jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[docs] full migration of demo to docsBuilder

Browse Source
This commit is contained in:
Prateeksha Singh 2018-05-01 00:57:27 +05:30
parent dc6ae93742
commit a5f215eccc
11 changed files with 722 additions and 704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/frappe-charts.esm.js vendored
View File

@ -301,10 +301,6 @@ class SvgTip {
}
}
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) {
return parseFloat(d.toFixed(2));
}

2
dist/frappe-charts.min.cjs.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/index.css
View File

@ -54,7 +54,7 @@ section figure {
.btn, .btn-group {
margin-bottom: 1rem;
}
.btn-group {
.btn-group, .btn-action {
margin-right: 0.5rem;
}
h1 {

73
docs/assets/js/data.js
View File

@ -130,6 +130,69 @@ export const typeData = {
]
};
let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
const baseLength = 10;
const fullLength = 30;
let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
let updateDataAllValues = Array.from({length: fullLength}, getRandom);
// We're gonna be shuffling this
let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
let getUpdateArray = (sourceArray, length=10) => {
let indices = updateDataAllIndices.slice(0, length);
return indices.map((index) => sourceArray[index]);
};
let currentLastIndex = baseLength;
export function getUpdateData() {
shuffle(updateDataAllIndices);
let value = getRandom();
let start = getRandom();
let end = getRandom();
currentLastIndex = baseLength;
return {
labels: updateDataAllLabels.slice(0, baseLength),
datasets: [{
values: getUpdateArray(updateDataAllValues)
}],
yMarkers: [
{
label: "Altitude",
value: value,
type: 'dashed'
}
],
yRegions: [
{
label: "Range",
start: start,
end: end
},
],
};
}
export function getAddUpdateData() {
if(currentLastIndex >= fullLength) return;
// TODO: Fix update on removal
currentLastIndex++;
let c = currentLastIndex -1;
return [updateDataAllLabels[c], [updateDataAllValues[c]]];
// updateChart.addDataPoint(
// updateDataAllLabels[index], [updateDataAllValues[index]]
// );
}
export const trendsData = {
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
@ -154,6 +217,16 @@ export const moonData = {
diameters: [5262.4, 4820.6, 3637.4, 3121.6],
};
export const eventsData = {
labels: ["Ganymede", "Callisto", "Io", "Europa"],
datasets: [
{
"values": moonData.distances,
"formatted": moonData.distances.map(d => d*1000 + " km")
}
]
};
// const jupiterMoons = {
// 'Ganymede': {
// mass: '14819000 x 10^16 kg',

174
docs/assets/js/demoConfig.js
View File

@ -1,41 +1,43 @@
import { lineCompositeData, barCompositeData, typeData, trendsData, heatmapData } from './data';
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 default {
lineComposite: {
config: {
title: "Fireball/Bolide Events - Yearly (reported)",
data: lineCompositeData,
type: "line",
height: 190,
colors: ["green"],
isNavigable: 1,
valuesOverPoints: 1,
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
}
}
},
lineOptions: {
dotSize: 8
}
}
}
barComposite: {
config: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
stacked: 1
}
}
},
export const barComposite = {
config: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
stacked: 1
}
}
}
demoMain: {
export const demoSections = [
{
title: "Create a Chart",
name: "demo-main",
contentBlocks: [
{
type: "code",
@ -121,10 +123,50 @@ export default {
]
},
updateValues: { },
{
title: "Update Values",
name: "updates-chart",
contentBlocks: [
{
type: "demo",
config: {
data: getUpdateData(),
type: 'line',
height: 300,
colors: ['#ff6c03'],
lineOptions: {
regionFill: 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: []
}
]
}
]
},
trendsPlot: {
{
title: "Plot Trends",
name: "trends-plot",
contentBlocks: [
{
type: "demo",
@ -161,10 +203,58 @@ export default {
},
stateChange: {},
{
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
...
heatmap: {
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",
@ -220,8 +310,10 @@ export default {
}
],
},
codePenDemo: {
{
title: "Demo",
name: "codepen",
contentBlocks: [
{
type: "custom",
@ -234,8 +326,9 @@ export default {
}
]
},
optionsList: {
{
title: "Available Options",
name: "options",
contentBlocks: [
{
type: "code",
@ -315,8 +408,9 @@ export default {
]
},
installation: {
{
title: "Install",
name: "installation",
contentBlocks: [
{ type: "text", content: 'Install via npm' },
{ type: "code", lang: "console", content: ` npm install frappe-charts` },
@ -341,4 +435,4 @@ export default {
},
]
}
}
]

67
docs/assets/js/docSectionBuilder.js → docs/assets/js/docsBuilder.js
View File

@ -1,25 +1,30 @@
import { $ } from '../../../src/js/utils/dom';
import { toTitleCase } from '../../../src/js/utils/helpers';
export class docSectionBuilder {
export class docsBuilder {
constructor(LIB_OBJ) {
this.LIB_OBJ = LIB_OBJ;
}
setParent(parent) {
// this.parent = parent;
this.section = parent;
makeSection(parent, sys) {
return new docSection(this.LIB_OBJ, parent, sys);
}
}
setSys(sys) {
class docSection {
constructor(LIB_OBJ, parent, sys) {
this.LIB_OBJ = LIB_OBJ;
this.parent = parent; // should be preferably a section
this.sys = sys;
this.blockMap = {};
this.make();
}
make() {
// const section = document.querySelector(this.section);
// const section = document.querySelector(this.parent);
let s = this.sys;
$.create('h6', { inside: this.section, innerHTML: s.title });
$.create('h6', { inside: this.parent, innerHTML: s.title });
s.contentBlocks.forEach((blockConf, index) => {
this.blockMap[index] = this.getBlock(blockConf);
@ -34,14 +39,16 @@ export class docSectionBuilder {
throw new Error(`Unknown section block type '${blockConf.type}'.`);
}
}
getText(blockConf) {
return $.create('p', {
inside: this.section,
inside: this.parent,
innerHTML: blockConf.content
});
}
getCode(blockConf) {
let pre = $.create('pre', { inside: this.section });
let pre = $.create('pre', { inside: this.parent });
let lang = blockConf.lang || 'javascript';
let code = $.create('code', {
inside: pre,
@ -49,21 +56,41 @@ export class docSectionBuilder {
innerHTML: blockConf.content
});
}
getCustom(blockConf) {
this.section.innerHTML += blockConf.html;
this.parent.innerHTML += blockConf.html;
}
getDemo(blockConf) {
let args = blockConf.config;
let figure = $.create('figure', { inside: this.section });
let bc = blockConf;
let args = bc.config;
let figure, row;
if(!bc.sideContent) {
figure = $.create('figure', { inside: this.parent });
} else {
row = $.create('div', {
inside: this.parent,
className: "row",
innerHTML: `<div class="col-sm-8"></div>
<div class="col-sm-4"></div>`,
});
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
}
this.libObj = new this.LIB_OBJ(figure, args);
this.getDemoOptions(blockConf.options, args, figure);
this.getDemoActions(blockConf.actions, args);
if(bc.postSetup) {
bc.postSetup(this.libObj, figure, row);
}
this.getDemoOptions(bc.options, args, figure);
this.getDemoActions(bc.actions, args);
}
getDemoOptions(options, args, figure) {
getDemoOptions(options=[], args={}, figure) {
options.forEach(o => {
const btnGroup = $.create('div', {
inside: this.section,
inside: this.parent,
className: `btn-group ${o.name}`
});
const mapKeys = o.mapKeys;
@ -99,14 +126,14 @@ export class docSectionBuilder {
});
}
getDemoActions(actions, args) {
getDemoActions(actions=[], args={}) {
actions.forEach(o => {
let args = o.args || [];
$.create('button', {
inside: this.section,
className: `btn btn-sm btn-secondary`,
inside: this.parent,
className: `btn btn-action btn-sm btn-secondary`,
innerHTML: o.name,
onClick: () => {this.libObj[o.fn](...o.args);}
onClick: () => {this.libObj[o.fn](...args);}
});
});
}

183
docs/assets/js/index.js
View File

@ -1,179 +1,26 @@
import { $ } from '../../../src/js/utils/dom';
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
barCompositeData, typeData, trendsData, moonData } from './data';
import dc from './demoConfig';
import { docSectionBuilder } from './docSectionBuilder';
import { $, insertAfter } from '../../../src/js/utils/dom';
import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
import { lineComposite, barComposite, demoSections} from './demoConfig';
import { docsBuilder } from './docsBuilder';
let Chart = frappe.Chart; // eslint-disable-line no-undef
let dcb = new docSectionBuilder(Chart);
let dbd = new docsBuilder(Chart);
let lineComposite = new Chart("#line-composite-1", dc.lineComposite.config);
let barComposite = new Chart("#bar-composite-1", dc.barComposite.config);
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineComposite.parent.addEventListener('data-select', (e) => {
lineCompositeChart.parent.addEventListener('data-select', (e) => {
let i = e.index;
barComposite.updateDatasets([
barCompositeChart.updateDatasets([
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
]);
});
let section = document.querySelector('.demo-main');
dcb.setParent(section);
dcb.setSys(dc.demoMain);
dcb.make();
let currentElement = document.querySelector('header');
// Update values chart
// ================================================================================
let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
let updateDataAllValues = Array.from({length: 30}, getRandom);
// We're gonna be shuffling this
let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
let getUpdateData = (source_array, length=10) => {
let indices = updateDataAllIndices.slice(0, length);
return indices.map((index) => source_array[index]);
};
let updateData = {
labels: getUpdateData(updateDataAllLabels),
datasets: [{
"values": getUpdateData(updateDataAllValues)
}],
yMarkers: [
{
label: "Altitude",
value: 25,
type: 'dashed'
}
],
yRegions: [
{
label: "Range",
start: 10,
end: 45
},
],
};
let updateChart = new Chart("#chart-update", {
data: updateData,
type: 'line',
height: 300,
colors: ['#ff6c03'],
lineOptions: {
// hideLine: 1,
regionFill: 1
},
demoSections.forEach(sectionConf => {
let sectionEl = $.create('section', { className: sectionConf.name });
insertAfter(sectionEl, currentElement);
currentElement = sectionEl;
dbd.makeSection(sectionEl, sectionConf);
});
let chartUpdateButtons = document.querySelector('.chart-update-buttons');
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
shuffle(updateDataAllIndices);
let value = getRandom();
let start = getRandom();
let end = getRandom();
let data = {
labels: updateDataAllLabels.slice(0, 10),
datasets: [{values: getUpdateData(updateDataAllValues)}],
yMarkers: [
{
label: "Altitude",
value: value,
type: 'dashed'
}
],
yRegions: [
{
label: "Range",
start: start,
end: end
},
],
};
updateChart.update(data);
});
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
let index = updateChart.state.datasetLength; // last index to add
if(index >= updateDataAllIndices.length) return;
updateChart.addDataPoint(
updateDataAllLabels[index], [updateDataAllValues[index]]
);
});
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
updateChart.removeDataPoint();
});
document.querySelector('.export-update').addEventListener('click', () => {
updateChart.export();
});
// Trends Chart
// ================================================================================
section = document.querySelector('.trends-plot');
dcb.setParent(section);
dcb.setSys(dc.trendsPlot);
dcb.make();
let eventsData = {
labels: ["Ganymede", "Callisto", "Io", "Europa"],
datasets: [
{
"values": moonData.distances,
"formatted": moonData.distances.map(d => d*1000 + " km")
}
]
};
let eventsChart = new Chart("#chart-events", {
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
data: eventsData,
type: 'bar',
height: 330,
colors: ['grey'],
isNavigable: 1,
});
let dataDiv = document.querySelector('.chart-events-data');
eventsChart.parent.addEventListener('data-select', (e) => {
let name = moonData.names[e.index];
dataDiv.querySelector('.moon-name').innerHTML = name;
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
});
// Heatmap
// ================================================================================
section = document.querySelector('.heatmap');
dcb.setParent(section);
dcb.setSys(dc.heatmap);
dcb.make();
section = document.querySelector('.codepen');
dcb.setParent(section);
dcb.setSys(dc.codePenDemo);
dcb.make();
section = document.querySelector('.options');
dcb.setParent(section);
dcb.setSys(dc.optionsList);
dcb.make();
section = document.querySelector('.installation');
dcb.setParent(section);
dcb.setSys(dc.installation);
dcb.make();

866
docs/assets/js/index.min.js vendored
View File

@ -193,6 +193,68 @@ $.create = function (tag, o) {
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
// Playing around with dates
var NO_OF_MILLIS = 1000;
var SEC_IN_DAY = 86400;
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// https://stackoverflow.com/a/11252167/6495043
function clone(date) {
return new Date(date.getTime());
}
function timestampSec(date) {
return date.getTime() / NO_OF_MILLIS;
}
function timestampToMidnight(timestamp) {
var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
if (roundAhead) {
return midnightTs + SEC_IN_DAY;
}
return midnightTs;
}
// export function getMonthsBetween(startDate, endDate) {}
// mutates
// mutates
function addDays(date, numberOfDays) {
date.setDate(date.getDate() + numberOfDays);
}
// Fixed 5-color theme,
// More colors are difficult to parse visually
@ -273,61 +335,6 @@ function toTitleCase(str) {
});
}
// Playing around with dates
var NO_OF_MILLIS = 1000;
var SEC_IN_DAY = 86400;
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// https://stackoverflow.com/a/11252167/6495043
function clone(date) {
return new Date(date.getTime());
}
function timestampSec(date) {
return date.getTime() / NO_OF_MILLIS;
}
function timestampToMidnight(timestamp) {
var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
if (roundAhead) {
return midnightTs + SEC_IN_DAY;
}
return midnightTs;
}
// export function getMonthsBetween(startDate, endDate) {}
// mutates
// mutates
function addDays(date, numberOfDays) {
date.setDate(date.getDate() + numberOfDays);
}
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
var lineCompositeData = {
@ -401,6 +408,71 @@ var typeData = {
}]
};
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
var baseLength = 10;
var fullLength = 30;
var getRandom = function getRandom() {
return Math.floor(getRandomBias(-40, 60, 0.8, 1));
};
var updateDataAllValues = Array.from({ length: fullLength }, getRandom);
// We're gonna be shuffling this
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
return i;
});
var getUpdateArray = function getUpdateArray(sourceArray) {
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
var indices = updateDataAllIndices.slice(0, length);
return indices.map(function (index) {
return sourceArray[index];
});
};
var currentLastIndex = baseLength;
function getUpdateData() {
shuffle(updateDataAllIndices);
var value = getRandom();
var start = getRandom();
var end = getRandom();
currentLastIndex = baseLength;
return {
labels: updateDataAllLabels.slice(0, baseLength),
datasets: [{
values: getUpdateArray(updateDataAllValues)
}],
yMarkers: [{
label: "Altitude",
value: value,
type: 'dashed'
}],
yRegions: [{
label: "Range",
start: start,
end: end
}]
};
}
function getAddUpdateData() {
if (currentLastIndex >= fullLength) return;
// TODO: Fix update on removal
currentLastIndex++;
var c = currentLastIndex - 1;
return [updateDataAllLabels[c], [updateDataAllValues[c]]];
// updateChart.addDataPoint(
// updateDataAllLabels[index], [updateDataAllValues[index]]
// );
}
var trendsData = {
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [{
@ -415,6 +487,16 @@ var moonData = {
diameters: [5262.4, 4820.6, 3637.4, 3121.6]
};
var eventsData = {
labels: ["Ganymede", "Callisto", "Io", "Europa"],
datasets: [{
"values": moonData.distances,
"formatted": moonData.distances.map(function (d) {
return d * 1000 + " km";
})
}]
};
// const jupiterMoons = {
// 'Ganymede': {
// mass: '14819000 x 10^16 kg',
@ -466,222 +548,286 @@ var heatmapData = {
end: end
};
var dc = {
lineComposite: {
config: {
title: "Fireball/Bolide Events - Yearly (reported)",
data: lineCompositeData,
type: "line",
height: 190,
colors: ["green"],
isNavigable: 1,
valuesOverPoints: 1,
var lineComposite = {
config: {
title: "Fireball/Bolide Events - Yearly (reported)",
data: lineCompositeData,
type: "line",
height: 190,
colors: ["green"],
isNavigable: 1,
valuesOverPoints: 1,
lineOptions: {
dotSize: 8
}
lineOptions: {
dotSize: 8
}
},
barComposite: {
config: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
stacked: 1
}
}
},
demoMain: {
title: "Create a Chart",
contentBlocks: [{
type: "code",
lang: "html",
content: ' &lt!--HTML--&gt;\n &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
}, {
type: "code",
lang: "javascript",
content: ' // Javascript\n let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n data: {\n labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n datasets: [\n {\n name: "Some Data", chartType: \'bar\',\n values: [25, 40, 30, 35, 8, 52, 17, -4]\n },\n {\n name: "Another Set", chartType: \'bar\',\n values: [25, 50, -10, 15, 18, 32, 27, 14]\n },\n {\n name: "Yet Another", chartType: \'line\',\n values: [15, 20, -3, -15, 58, 12, -17, 37]\n }\n ],\n\n yMarkers: [{ label: "Marker", value: 70,\n options: { labelPos: \'left\' }}],\n yRegions: [{ label: "Region", start: -10, end: 50,\n options: { labelPos: \'right\' }}]\n },\n\n title: "My Awesome Chart",\n type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n height: 300,\n colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n });\n\n 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: function formatTooltipX(d) {
return (d + '').toUpperCase();
},
formatTooltipY: function formatTooltipY(d) {
return 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: [] }]
}]
},
updateValues: {},
trendsPlot: {
title: "Plot Trends",
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', 'regionFill'],
states: {
"Line": [0, 1, 0, 0],
"Dots": [1, 0, 0, 0],
"HeatLine": [0, 1, 1, 0],
"Region": [0, 1, 0, 1]
},
activeState: "HeatLine"
}],
actions: [{ name: "Export ...", fn: "export", args: [] }]
}]
},
stateChange: {},
heatmap: {
title: "And a Month-wise 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", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
}]
},
codePenDemo: {
title: "Demo",
contentBlocks: [{
type: "custom",
html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
}]
},
optionsList: {
title: "Available Options",
contentBlocks: [{
type: "code",
lang: "javascript",
content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n regionFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
}]
},
installation: {
title: "Install",
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\n // or\n new frappe.Chart(); // Browser'
}, { type: "text", content: '... or include it directly in your HTML' }, {
type: "code",
lang: "html",
content: ' &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
}]
}
};
var barComposite = {
config: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
stacked: 1
}
}
};
var demoSections = [{
title: "Create a Chart",
name: "demo-main",
contentBlocks: [{
type: "code",
lang: "html",
content: ' &lt!--HTML--&gt;\n &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
}, {
type: "code",
lang: "javascript",
content: ' // Javascript\n let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n data: {\n labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n datasets: [\n {\n name: "Some Data", chartType: \'bar\',\n values: [25, 40, 30, 35, 8, 52, 17, -4]\n },\n {\n name: "Another Set", chartType: \'bar\',\n values: [25, 50, -10, 15, 18, 32, 27, 14]\n },\n {\n name: "Yet Another", chartType: \'line\',\n values: [15, 20, -3, -15, 58, 12, -17, 37]\n }\n ],\n\n yMarkers: [{ label: "Marker", value: 70,\n options: { labelPos: \'left\' }}],\n yRegions: [{ label: "Region", start: -10, end: 50,\n options: { labelPos: \'right\' }}]\n },\n\n title: "My Awesome Chart",\n type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n height: 300,\n colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n });\n\n 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: function formatTooltipX(d) {
return (d + '').toUpperCase();
},
formatTooltipY: function formatTooltipY(d) {
return 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: {
regionFill: 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', 'regionFill'],
states: {
"Line": [0, 1, 0, 0],
"Dots": [1, 0, 0, 0],
"HeatLine": [0, 1, 1, 0],
"Region": [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">\n <img class="moon-image" src="./assets/img/europa.jpg">\n </div>\n <div class="content-data mt1">\n <h6 class="moon-name">Europa</h6>\n <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>\n <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>\n <p>Diameter: <span class="diameter">3121.6</span> km</p>\n </div>',
postSetup: function postSetup(chart, figure, row) {
chart.parent.addEventListener('data-select', function (e) {
var i = e.index;
var 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: ' ...\n isNavigable: 1, // Navigate across data points; default 0\n ...\n\n chart.parent.addEventListener(\'data-select\', (e) => {\n update_moon_data(e.index); // e contains index and value of current datapoint\n });'
}]
}, {
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", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
}]
}, {
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"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
}]
}, {
title: "Available Options",
name: "options",
contentBlocks: [{
type: "code",
lang: "javascript",
content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n regionFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
}]
}, {
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\n // or\n new frappe.Chart(); // Browser'
}, { type: "text", content: '... or include it directly in your HTML' }, {
type: "code",
lang: "html",
content: ' &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
}]
}];
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var docSectionBuilder = function () {
function docSectionBuilder(LIB_OBJ) {
_classCallCheck(this, docSectionBuilder);
var docsBuilder = function () {
function docsBuilder(LIB_OBJ) {
_classCallCheck(this, docsBuilder);
this.LIB_OBJ = LIB_OBJ;
}
_createClass(docSectionBuilder, [{
key: 'setParent',
value: function setParent(parent) {
// this.parent = parent;
this.section = parent;
_createClass(docsBuilder, [{
key: 'makeSection',
value: function makeSection(parent, sys) {
return new docSection(this.LIB_OBJ, parent, sys);
}
}, {
key: 'setSys',
value: function setSys(sys) {
this.sys = sys;
this.blockMap = {};
}
}, {
}]);
return docsBuilder;
}();
var docSection = function () {
function docSection(LIB_OBJ, parent, sys) {
_classCallCheck(this, docSection);
this.LIB_OBJ = LIB_OBJ;
this.parent = parent; // should be preferably a section
this.sys = sys;
this.blockMap = {};
this.make();
}
_createClass(docSection, [{
key: 'make',
value: function make() {
var _this = this;
// const section = document.querySelector(this.section);
// const section = document.querySelector(this.parent);
var s = this.sys;
$.create('h6', { inside: this.section, innerHTML: s.title });
$.create('h6', { inside: this.parent, innerHTML: s.title });
s.contentBlocks.forEach(function (blockConf, index) {
_this.blockMap[index] = _this.getBlock(blockConf);
@ -701,14 +847,14 @@ var docSectionBuilder = function () {
key: 'getText',
value: function getText(blockConf) {
return $.create('p', {
inside: this.section,
inside: this.parent,
innerHTML: blockConf.content
});
}
}, {
key: 'getCode',
value: function getCode(blockConf) {
var pre = $.create('pre', { inside: this.section });
var pre = $.create('pre', { inside: this.parent });
var lang = blockConf.lang || 'javascript';
var code = $.create('code', {
inside: pre,
@ -719,26 +865,48 @@ var docSectionBuilder = function () {
}, {
key: 'getCustom',
value: function getCustom(blockConf) {
this.section.innerHTML += blockConf.html;
this.parent.innerHTML += blockConf.html;
}
}, {
key: 'getDemo',
value: function getDemo(blockConf) {
var args = blockConf.config;
var figure = $.create('figure', { inside: this.section });
var bc = blockConf;
var args = bc.config;
var figure = void 0,
row = void 0;
if (!bc.sideContent) {
figure = $.create('figure', { inside: this.parent });
} else {
row = $.create('div', {
inside: this.parent,
className: "row",
innerHTML: '<div class="col-sm-8"></div>\n\t\t\t\t\t<div class="col-sm-4"></div>'
});
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
}
this.libObj = new this.LIB_OBJ(figure, args);
this.getDemoOptions(blockConf.options, args, figure);
this.getDemoActions(blockConf.actions, args);
if (bc.postSetup) {
bc.postSetup(this.libObj, figure, row);
}
this.getDemoOptions(bc.options, args, figure);
this.getDemoActions(bc.actions, args);
}
}, {
key: 'getDemoOptions',
value: function getDemoOptions(options, args, figure) {
value: function getDemoOptions() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var _this2 = this;
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var figure = arguments[2];
options.forEach(function (o) {
var btnGroup = $.create('div', {
inside: _this2.section,
inside: _this2.parent,
className: 'btn-group ' + o.name
});
var mapKeys = o.mapKeys;
@ -777,191 +945,47 @@ var docSectionBuilder = function () {
}
}, {
key: 'getDemoActions',
value: function getDemoActions(actions, args) {
value: function getDemoActions() {
var _this3 = this;
var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
actions.forEach(function (o) {
var args = o.args || [];
$.create('button', {
inside: _this3.section,
className: 'btn btn-sm btn-secondary',
inside: _this3.parent,
className: 'btn btn-action btn-sm btn-secondary',
innerHTML: o.name,
onClick: function onClick() {
var _libObj;
(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(o.args));
(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(args));
}
});
});
}
}]);
return docSectionBuilder;
return docSection;
}();
var Chart = frappe.Chart; // eslint-disable-line no-undef
var dcb = new docSectionBuilder(Chart);
var dbd = new docsBuilder(Chart);
var lineComposite = new Chart("#line-composite-1", dc.lineComposite.config);
var barComposite = new Chart("#bar-composite-1", dc.barComposite.config);
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineComposite.parent.addEventListener('data-select', function (e) {
lineCompositeChart.parent.addEventListener('data-select', function (e) {
var i = e.index;
barComposite.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
});
var section = document.querySelector('.demo-main');
dcb.setParent(section);
dcb.setSys(dc.demoMain);
dcb.make();
var currentElement = document.querySelector('header');
// Update values chart
// ================================================================================
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
var getRandom = function getRandom() {
return Math.floor(getRandomBias(-40, 60, 0.8, 1));
};
var updateDataAllValues = Array.from({ length: 30 }, getRandom);
// We're gonna be shuffling this
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
return i;
demoSections.forEach(function (sectionConf) {
var sectionEl = $.create('section', { className: sectionConf.name });
insertAfter(sectionEl, currentElement);
currentElement = sectionEl;
dbd.makeSection(sectionEl, sectionConf);
});
var getUpdateData = function getUpdateData(source_array) {
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
var indices = updateDataAllIndices.slice(0, length);
return indices.map(function (index) {
return source_array[index];
});
};
var updateData = {
labels: getUpdateData(updateDataAllLabels),
datasets: [{
"values": getUpdateData(updateDataAllValues)
}],
yMarkers: [{
label: "Altitude",
value: 25,
type: 'dashed'
}],
yRegions: [{
label: "Range",
start: 10,
end: 45
}]
};
var updateChart = new Chart("#chart-update", {
data: updateData,
type: 'line',
height: 300,
colors: ['#ff6c03'],
lineOptions: {
// hideLine: 1,
regionFill: 1
}
});
var chartUpdateButtons = document.querySelector('.chart-update-buttons');
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () {
shuffle(updateDataAllIndices);
var value = getRandom();
var start = getRandom();
var end = getRandom();
var data = {
labels: updateDataAllLabels.slice(0, 10),
datasets: [{ values: getUpdateData(updateDataAllValues) }],
yMarkers: [{
label: "Altitude",
value: value,
type: 'dashed'
}],
yRegions: [{
label: "Range",
start: start,
end: end
}]
};
updateChart.update(data);
});
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
var index = updateChart.state.datasetLength; // last index to add
if (index >= updateDataAllIndices.length) return;
updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
});
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
updateChart.removeDataPoint();
});
document.querySelector('.export-update').addEventListener('click', function () {
updateChart.export();
});
// Trends Chart
// ================================================================================
section = document.querySelector('.trends-plot');
dcb.setParent(section);
dcb.setSys(dc.trendsPlot);
dcb.make();
var eventsData = {
labels: ["Ganymede", "Callisto", "Io", "Europa"],
datasets: [{
"values": moonData.distances,
"formatted": moonData.distances.map(function (d) {
return d * 1000 + " km";
})
}]
};
var eventsChart = new Chart("#chart-events", {
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
data: eventsData,
type: 'bar',
height: 330,
colors: ['grey'],
isNavigable: 1
});
var dataDiv = document.querySelector('.chart-events-data');
eventsChart.parent.addEventListener('data-select', function (e) {
var name = moonData.names[e.index];
dataDiv.querySelector('.moon-name').innerHTML = name;
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
});
// Heatmap
// ================================================================================
section = document.querySelector('.heatmap');
dcb.setParent(section);
dcb.setSys(dc.heatmap);
dcb.make();
section = document.querySelector('.codepen');
dcb.setParent(section);
dcb.setSys(dc.codePenDemo);
dcb.make();
section = document.querySelector('.options');
dcb.setParent(section);
dcb.setSys(dc.optionsList);
dcb.make();
section = document.querySelector('.installation');
dcb.setParent(section);
dcb.setSys(dc.installation);
dcb.make();
}());

49
docs/index.html
View File

@ -32,54 +32,7 @@
<figure id="bar-composite-1" class="border"></figure>
</header>
<section class="demo-main"></section>
<section>
<h6>Update Values</h6>
<div id="chart-update" class="border"></div>
<div class="chart-update-buttons mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
</div>
</section>
<section class="trends-plot"></section>
<section>
<h6>Listen to state change</h6>
<div class="row">
<div class="col-sm-8">
<div id="chart-events" class="border"></div>
</div>
<div class="col-sm-4 chart-events-data">
<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>
</div>
</div>
<pre><code class="hljs javascript mt1"> ...
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
});</code></pre>
</section>
<section class="heatmap"></section>
<section class="codepen"></section>
<section class="options"></section>
<section class="installation"></section>
<!-- Generated content goes here -->
<section class="text-center">
<!-- Closing -->

4
src/js/utils/dom.js
View File

@ -135,3 +135,7 @@ export function activate($parent, $child, commonSelector, activeClass='active',
$child.classList.add(activeClass);
}
export function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}