@@ -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,188 +548,242 @@ 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
}
var barComposite = {
config: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
stacked: 1
}
},
}
};
barComposite: {
var demoSections = [{
title: "Create a Chart",
name: "demo-main",
contentBlocks: [{
type: "code",
lang: "html",
content: ' <!--HTML-->\n <figure id="frost-chart"></figure>'
}, {
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: {
data: barCompositeData,
type: "bar",
height: 210,
colors: ["violet", "light-blue", "#46a9f9"],
valuesOverPoints: 1,
axisOptions: {
xAxisMode: "tick"
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'
},
barOptions: {
stacked: 1
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
}
}
},
demoMain: {
title: "Create a Chart",
contentBlocks: [{
type: "code",
lang: "html",
content: ' <!--HTML-->\n <figure id="frost-chart"></figure>'
},
actions: [{
name: "Random Data",
fn: "update",
args: [getUpdateData()]
}, {
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();'
name: "Add Value",
fn: "addDataPoint",
args: getAddUpdateData()
}, {
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: [] }]
name: "Remove Value",
fn: "removeDataPoint",
args: []
}, {
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]
}]
}, {
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]
},
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: [] }]
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 }
}, {
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: ' <script src="https://unpkg.com/frappe-charts@1.1.0"></script>'
}]
}
};
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: ' <script src="https://unpkg.com/frappe-charts@1.1.0"></script>'
}]
}];
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; }; }();
@@ -655,33 +791,43 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var docSection Builder = function () {
function docSection Builder(LIB_OBJ) {
_classCallCheck(this, docSection Builder);
var docs Builder = function () {
function docs Builder(LIB_OBJ) {
_classCallCheck(this, docs Builder);
this.LIB_OBJ = LIB_OBJ;
}
_createClass(docSectionBuilder, [{
key: 'setParent',
value: function setParent(parent) {
// this.parent = parent;
this.section = parent;
}
}, {
key: 'setSys',
value: function setSys(sys) {
this.sys = sys;
this.blockMap = {};
_createClass(docsBuilder, [{
key: 'makeSection',
value: function makeSection(parent, sys) {
return new docSection(this.LIB_OBJ, parent, sys);
}
}, {
}]);
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 docSection Builder(Chart);
var dbd = new docs Builder(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();
// 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);
var currentElement = document.querySelector('header');
// 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();
}());
Prateeksha Singh
пре 7 година