438 lines
13 KiB
JavaScript
438 lines
13 KiB
JavaScript
import { lineCompositeData, barCompositeData, typeData, getUpdateData,
|
|
getAddUpdateData, trendsData, eventsData, moonData, heatmapData } from './data';
|
|
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
|
|
|
|
export const lineComposite = {
|
|
config: {
|
|
title: "Fireball/Bolide Events - Yearly (reported)",
|
|
data: lineCompositeData,
|
|
type: "line",
|
|
height: 190,
|
|
colors: ["green"],
|
|
isNavigable: 1,
|
|
valuesOverPoints: 1,
|
|
|
|
lineOptions: {
|
|
dotSize: 8
|
|
}
|
|
}
|
|
}
|
|
|
|
export const barComposite = {
|
|
config: {
|
|
data: barCompositeData,
|
|
type: "bar",
|
|
height: 210,
|
|
colors: ["violet", "light-blue", "#46a9f9"],
|
|
valuesOverPoints: 1,
|
|
axisOptions: {
|
|
xAxisMode: "tick"
|
|
},
|
|
barOptions: {
|
|
stacked: 1
|
|
}
|
|
}
|
|
}
|
|
|
|
export const demoSections = [
|
|
{
|
|
title: "Create a Chart",
|
|
name: "demo-main",
|
|
contentBlocks: [
|
|
{
|
|
type: "code",
|
|
lang: "html",
|
|
content: ` <!--HTML-->
|
|
<figure id="frost-chart"></figure>`,
|
|
},
|
|
{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ` // Javascript
|
|
let chart = new frappe.Chart( "#frost-chart", { // or DOM element
|
|
data: {
|
|
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
|
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
|
|
|
datasets: [
|
|
{
|
|
name: "Some Data", chartType: 'bar',
|
|
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
|
},
|
|
{
|
|
name: "Another Set", chartType: 'bar',
|
|
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
|
},
|
|
{
|
|
name: "Yet Another", chartType: 'line',
|
|
values: [15, 20, -3, -15, 58, 12, -17, 37]
|
|
}
|
|
],
|
|
|
|
yMarkers: [{ label: "Marker", value: 70,
|
|
options: { labelPos: 'left' }}],
|
|
yRegions: [{ label: "Region", start: -10, end: 50,
|
|
options: { labelPos: 'right' }}]
|
|
},
|
|
|
|
title: "My Awesome Chart",
|
|
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
|
|
height: 300,
|
|
colors: ['purple', '#ffa3ef', 'light-blue'],
|
|
|
|
tooltipOptions: {
|
|
formatTooltipX: d => (d + '').toUpperCase(),
|
|
formatTooltipY: d => d + ' pts',
|
|
}
|
|
});
|
|
|
|
chart.export();`,
|
|
},
|
|
{
|
|
type: "demo",
|
|
config: {
|
|
title: "My Awesome Chart",
|
|
data: typeData,
|
|
type: "axis-mixed",
|
|
height: 300,
|
|
colors: ["purple", "magenta", "light-blue"],
|
|
maxSlices: 10,
|
|
|
|
tooltipOptions: {
|
|
formatTooltipX: d => (d + '').toUpperCase(),
|
|
formatTooltipY: d => d + ' pts',
|
|
}
|
|
},
|
|
options: [
|
|
{
|
|
name: "type",
|
|
path: ["type"],
|
|
type: "string",
|
|
states: {
|
|
"Mixed": 'axis-mixed',
|
|
"Line": 'line',
|
|
"Bar": 'bar',
|
|
"Pie Chart": 'pie',
|
|
"Percentage Chart": 'percentage',
|
|
},
|
|
activeState: "Mixed"
|
|
}
|
|
],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }],
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "Update Values",
|
|
name: "updates-chart",
|
|
contentBlocks: [
|
|
{
|
|
type: "demo",
|
|
config: {
|
|
data: getUpdateData(),
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#ff6c03'],
|
|
lineOptions: {
|
|
areaFill: 1
|
|
}
|
|
},
|
|
actions: [
|
|
{
|
|
name: "Random Data",
|
|
fn: "update",
|
|
args: [getUpdateData()]
|
|
},
|
|
{
|
|
name: "Add Value",
|
|
fn: "addDataPoint",
|
|
args: getAddUpdateData()
|
|
},
|
|
{
|
|
name: "Remove Value",
|
|
fn: "removeDataPoint",
|
|
args: []
|
|
},
|
|
{
|
|
name: "Export ...",
|
|
fn: "export",
|
|
args: []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "Plot Trends",
|
|
name: "trends-plot",
|
|
contentBlocks: [
|
|
{
|
|
type: "demo",
|
|
config: {
|
|
title: "Mean Total Sunspot Count - Yearly",
|
|
data: trendsData,
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#238e38'],
|
|
axisOptions: {
|
|
xAxisMode: 'tick',
|
|
yAxisMode: 'span',
|
|
xIsSeries: 1
|
|
}
|
|
},
|
|
options: [
|
|
{
|
|
name: "lineOptions",
|
|
path: ["lineOptions"],
|
|
type: "map",
|
|
mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
|
|
states: {
|
|
"Line": [0, 1, 0, 0],
|
|
"Dots": [1, 0, 0, 0],
|
|
"HeatLine": [0, 1, 1, 0],
|
|
"Area": [0, 1, 0, 1]
|
|
},
|
|
activeState: "HeatLine"
|
|
}
|
|
],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
|
}
|
|
],
|
|
},
|
|
|
|
{
|
|
title: "Listen to state change",
|
|
name: "state-change",
|
|
contentBlocks: [
|
|
{
|
|
type: "demo",
|
|
config: {
|
|
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
|
data: eventsData,
|
|
type: 'bar',
|
|
height: 330,
|
|
colors: ['grey'],
|
|
isNavigable: 1,
|
|
},
|
|
sideContent: `<div class="image-container border">
|
|
<img class="moon-image" src="./assets/img/europa.jpg">
|
|
</div>
|
|
<div class="content-data mt1">
|
|
<h6 class="moon-name">Europa</h6>
|
|
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
|
|
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
|
|
<p>Diameter: <span class="diameter">3121.6</span> km</p>
|
|
</div>`,
|
|
postSetup: (chart, figure, row) => {
|
|
chart.parent.addEventListener('data-select', (e) => {
|
|
let i = e.index;
|
|
let name = moonData.names[i];
|
|
row.querySelector('.moon-name').innerHTML = name;
|
|
row.querySelector('.semi-major-axis').innerHTML = moonData.distances[i] * 1000;
|
|
row.querySelector('.mass').innerHTML = moonData.masses[i];
|
|
row.querySelector('.diameter').innerHTML = moonData.diameters[i];
|
|
row.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
|
});
|
|
}
|
|
},
|
|
{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ` ...
|
|
isNavigable: 1, // Navigate across data points; default 0
|
|
...
|
|
|
|
chart.parent.addEventListener('data-select', (e) => {
|
|
update_moon_data(e.index); // e contains index and value of current datapoint
|
|
});`,
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "And a Month-wise Heatmap",
|
|
name: "heatmap",
|
|
contentBlocks: [
|
|
{
|
|
type: "demo",
|
|
config: {
|
|
title: "Monthly Distribution",
|
|
data: heatmapData,
|
|
type: 'heatmap',
|
|
discreteDomains: 1,
|
|
countLabel: 'Level',
|
|
colors: HEATMAP_COLORS_BLUE,
|
|
legendScale: [0, 1, 2, 4, 5]
|
|
},
|
|
options: [
|
|
{
|
|
name: "Discrete domains",
|
|
path: ["discreteDomains"],
|
|
type: 'boolean',
|
|
// boolNames: ["Continuous", "Discrete"],
|
|
states: { "Discrete": 1, "Continuous": 0 }
|
|
},
|
|
{
|
|
name: "Colors",
|
|
path: ["colors"],
|
|
type: "object",
|
|
states: {
|
|
"Green (Default)": [],
|
|
"Blue": HEATMAP_COLORS_BLUE,
|
|
"GitHub's Halloween": HEATMAP_COLORS_YELLOW
|
|
}
|
|
}
|
|
],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
|
},
|
|
{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ` let heatmap = new frappe.Chart("#heatmap", {
|
|
type: 'heatmap',
|
|
title: "Monthly Distribution",
|
|
data: {
|
|
dataPoints: {'1524064033': 8, /* ... */},
|
|
// object with timestamp-value pairs
|
|
start: startDate
|
|
end: endDate // Date objects
|
|
},
|
|
countLabel: 'Level',
|
|
discreteDomains: 0 // default: 1
|
|
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
|
// Set of five incremental colors,
|
|
// preferably with a low-saturation color for zero data;
|
|
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
|
|
});`,
|
|
}
|
|
],
|
|
},
|
|
|
|
{
|
|
title: "Demo",
|
|
name: "codepen",
|
|
contentBlocks: [
|
|
{
|
|
type: "custom",
|
|
html: `<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
|
|
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
|
|
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
|
|
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
|
|
<a href="https://codepen.io">CodePen</a>.
|
|
</p>`
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Available Options",
|
|
name: "options",
|
|
contentBlocks: [
|
|
{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: `
|
|
...
|
|
{
|
|
data: {
|
|
labels: [],
|
|
datasets: [],
|
|
yRegions: [],
|
|
yMarkers: []
|
|
}
|
|
title: '',
|
|
colors: [],
|
|
height: 200,
|
|
|
|
tooltipOptions: {
|
|
formatTooltipX: d => (d + '').toUpperCase(),
|
|
formatTooltipY: d => d + ' pts',
|
|
}
|
|
|
|
// Axis charts
|
|
isNavigable: 1, // default: 0
|
|
valuesOverPoints: 1, // default: 0
|
|
barOptions: {
|
|
spaceRatio: 1 // default: 0.5
|
|
stacked: 1 // default: 0
|
|
}
|
|
|
|
lineOptions: {
|
|
dotSize: 6, // default: 4
|
|
hideLine: 0, // default: 0
|
|
hideDots: 1, // default: 0
|
|
heatline: 1, // default: 0
|
|
areaFill: 1 // default: 0
|
|
}
|
|
|
|
axisOptions: {
|
|
yAxisMode: 'span', // Axis lines, default
|
|
xAxisMode: 'tick', // No axis lines, only short ticks
|
|
xIsSeries: 1 // Allow skipping x values for space
|
|
// default: 0
|
|
},
|
|
|
|
// Pie/Percentage charts
|
|
maxLegendPoints: 6, // default: 20
|
|
maxSlices: 10, // default: 20
|
|
|
|
// Percentage chart
|
|
barOptions: {
|
|
height: 15 // default: 20
|
|
depth: 5 // default: 2
|
|
}
|
|
|
|
// Heatmap
|
|
discreteDomains: 1, // default: 1
|
|
}
|
|
...
|
|
|
|
// Updating values
|
|
chart.update(data);
|
|
|
|
// Axis charts:
|
|
chart.addDataPoint(label, valueFromEachDataset, index)
|
|
chart.removeDataPoint(index)
|
|
chart.updateDataset(datasetValues, index)
|
|
|
|
// Exporting
|
|
chart.export();
|
|
|
|
// Unbind window-resize events
|
|
chart.unbindWindowEvents();
|
|
|
|
`
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "Install",
|
|
name: "installation",
|
|
contentBlocks: [
|
|
{ type: "text", content: 'Install via npm' },
|
|
{ type: "code", lang: "console", content: ` npm install frappe-charts` },
|
|
|
|
{ type: "text", content: 'And include it in your project' },
|
|
{ type: "code", lang: "javascript", content: ` import { Chart } from "frappe-charts` },
|
|
|
|
{ type: "text", content: 'Use as:' },
|
|
{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ` new Chart(); // ES6 module
|
|
// or
|
|
new frappe.Chart(); // Browser`,
|
|
},
|
|
|
|
{ type: "text", content: '... or include it directly in your HTML' },
|
|
{
|
|
type: "code",
|
|
lang: "html",
|
|
content: ` <script src="https://unpkg.com/frappe-charts@1.1.0"></script>`,
|
|
},
|
|
]
|
|
}
|
|
]
|