|$)",e:">",k:{name:"script"},c:[t],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b://,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});
--------------------------------------------------------------------------------
/docs/assets/js/index.js:
--------------------------------------------------------------------------------
1 | import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
2 | import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
3 | import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
4 | /* eslint-disable no-unused-vars */
5 | import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
6 | barCompositeData, typeData, trendsData, moonData } from './data';
7 | /* eslint-enable no-unused-vars */
8 | import demoConfig from './demoConfig';
9 | // import { lineComposite, barComposite } from './demoConfig';
10 | // ================================================================================
11 |
12 | let Chart = frappe.Chart; // eslint-disable-line no-undef
13 |
14 | let lc = demoConfig.lineComposite;
15 | let lineCompositeChart = new Chart (lc.elementID, lc.options);
16 |
17 | let bc = demoConfig.barComposite;
18 | let barCompositeChart = new Chart (bc.elementID, bc.options);
19 |
20 | lineCompositeChart.parent.addEventListener('data-select', (e) => {
21 | let i = e.index;
22 | barCompositeChart.updateDatasets([
23 | fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
24 | ]);
25 | });
26 |
27 | // ================================================================================
28 |
29 | let customColors = ['purple', 'magenta', 'light-blue'];
30 | let typeChartArgs = {
31 | title: "My Awesome Chart",
32 | data: typeData,
33 | type: 'axis-mixed',
34 | height: 300,
35 | colors: customColors,
36 |
37 | // maxLegendPoints: 6,
38 | maxSlices: 10,
39 |
40 | tooltipOptions: {
41 | formatTooltipX: d => (d + '').toUpperCase(),
42 | formatTooltipY: d => d + ' pts',
43 | }
44 | };
45 |
46 | let aggrChart = new Chart("#chart-aggr", typeChartArgs);
47 |
48 | Array.prototype.slice.call(
49 | document.querySelectorAll('.aggr-type-buttons button')
50 | ).map(el => {
51 | el.addEventListener('click', (e) => {
52 | let btn = e.target;
53 | let type = btn.getAttribute('data-type');
54 | typeChartArgs.type = type;
55 | if(type !== 'axis-mixed') {
56 | typeChartArgs.colors = undefined;
57 | } else {
58 | typeChartArgs.colors = customColors;
59 | }
60 |
61 | if(type !== 'percentage') {
62 | typeChartArgs.height = 300;
63 | } else {
64 | typeChartArgs.height = undefined;
65 | }
66 |
67 | let newChart = new Chart("#chart-aggr", typeChartArgs);
68 | if(newChart){
69 | aggrChart = newChart;
70 | }
71 | Array.prototype.slice.call(
72 | btn.parentNode.querySelectorAll('button')).map(el => {
73 | el.classList.remove('active');
74 | });
75 | btn.classList.add('active');
76 | });
77 | });
78 |
79 | document.querySelector('.export-aggr').addEventListener('click', () => {
80 | aggrChart.export();
81 | });
82 |
83 | // Update values chart
84 | // ================================================================================
85 | let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
86 | "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
87 | "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
88 |
89 | let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
90 | let updateDataAllValues = Array.from({length: 30}, getRandom);
91 |
92 | // We're gonna be shuffling this
93 | let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
94 |
95 | let getUpdateData = (source_array, length=10) => {
96 | let indices = updateDataAllIndices.slice(0, length);
97 | return indices.map((index) => source_array[index]);
98 | };
99 |
100 | let updateData = {
101 | labels: getUpdateData(updateDataAllLabels),
102 | datasets: [{
103 | "values": getUpdateData(updateDataAllValues)
104 | }],
105 | yMarkers: [
106 | {
107 | label: "Altitude",
108 | value: 25,
109 | type: 'dashed'
110 | }
111 | ],
112 | yRegions: [
113 | {
114 | label: "Range",
115 | start: 10,
116 | end: 45
117 | },
118 | ],
119 | };
120 |
121 | let updateChart = new Chart("#chart-update", {
122 | data: updateData,
123 | type: 'line',
124 | height: 300,
125 | colors: ['#ff6c03'],
126 | lineOptions: {
127 | // hideLine: 1,
128 | regionFill: 1
129 | },
130 | });
131 |
132 | let chartUpdateButtons = document.querySelector('.chart-update-buttons');
133 |
134 | chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
135 | shuffle(updateDataAllIndices);
136 | let value = getRandom();
137 | let start = getRandom();
138 | let end = getRandom();
139 | let data = {
140 | labels: updateDataAllLabels.slice(0, 10),
141 | datasets: [{values: getUpdateData(updateDataAllValues)}],
142 | yMarkers: [
143 | {
144 | label: "Altitude",
145 | value: value,
146 | type: 'dashed'
147 | }
148 | ],
149 | yRegions: [
150 | {
151 | label: "Range",
152 | start: start,
153 | end: end
154 | },
155 | ],
156 | };
157 | updateChart.update(data);
158 | });
159 |
160 | chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
161 | let index = updateChart.state.datasetLength; // last index to add
162 | if(index >= updateDataAllIndices.length) return;
163 | updateChart.addDataPoint(
164 | updateDataAllLabels[index], [updateDataAllValues[index]]
165 | );
166 | });
167 |
168 | chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
169 | updateChart.removeDataPoint();
170 | });
171 |
172 | document.querySelector('.export-update').addEventListener('click', () => {
173 | updateChart.export();
174 | });
175 |
176 | // Trends Chart
177 | // ================================================================================
178 |
179 | let plotChartArgs = {
180 | title: "Mean Total Sunspot Count - Yearly",
181 | data: trendsData,
182 | type: 'line',
183 | height: 300,
184 | colors: ['#238e38'],
185 | lineOptions: {
186 | hideDots: 1,
187 | heatline: 1,
188 | },
189 | axisOptions: {
190 | xAxisMode: 'tick',
191 | yAxisMode: 'span',
192 | xIsSeries: 1
193 | }
194 | };
195 |
196 | let trendsChart = new Chart("#chart-trends", plotChartArgs);
197 |
198 | Array.prototype.slice.call(
199 | document.querySelectorAll('.chart-plot-buttons button')
200 | ).map(el => {
201 | el.addEventListener('click', (e) => {
202 | let btn = e.target;
203 | let type = btn.getAttribute('data-type');
204 | let config = {};
205 | config[type] = 1;
206 |
207 | if(['regionFill', 'heatline'].includes(type)) {
208 | config.hideDots = 1;
209 | }
210 |
211 | // plotChartArgs.init = false;
212 | plotChartArgs.lineOptions = config;
213 |
214 | new Chart("#chart-trends", plotChartArgs);
215 |
216 | Array.prototype.slice.call(
217 | btn.parentNode.querySelectorAll('button')).map(el => {
218 | el.classList.remove('active');
219 | });
220 | btn.classList.add('active');
221 | });
222 | });
223 |
224 | document.querySelector('.export-trends').addEventListener('click', () => {
225 | trendsChart.export();
226 | });
227 |
228 |
229 | // Event chart
230 | // ================================================================================
231 |
232 |
233 |
234 | let eventsData = {
235 | labels: ["Ganymede", "Callisto", "Io", "Europa"],
236 | datasets: [
237 | {
238 | "values": moonData.distances,
239 | "formatted": moonData.distances.map(d => d*1000 + " km")
240 | }
241 | ]
242 | };
243 |
244 | let eventsChart = new Chart("#chart-events", {
245 | title: "Jupiter's Moons: Semi-major Axis (1000 km)",
246 | data: eventsData,
247 | type: 'bar',
248 | height: 330,
249 | colors: ['grey'],
250 | isNavigable: 1,
251 | });
252 |
253 | let dataDiv = document.querySelector('.chart-events-data');
254 |
255 | eventsChart.parent.addEventListener('data-select', (e) => {
256 | let name = moonData.names[e.index];
257 | dataDiv.querySelector('.moon-name').innerHTML = name;
258 | dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
259 | dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
260 | dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
261 | dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
262 | });
263 |
264 | // Heatmap
265 | // ================================================================================
266 |
267 | let today = new Date();
268 | let start = clone(today);
269 | addDays(start, 4);
270 | let end = clone(start);
271 | start.setFullYear( start.getFullYear() - 2 );
272 | end.setFullYear( end.getFullYear() - 1 );
273 |
274 | let dataPoints = {};
275 |
276 | let startTs = timestampSec(start);
277 | let endTs = timestampSec(end);
278 |
279 | startTs = timestampToMidnight(startTs);
280 | endTs = timestampToMidnight(endTs, true);
281 |
282 | while (startTs < endTs) {
283 | dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
284 | startTs += SEC_IN_DAY;
285 | }
286 |
287 | const heatmapData = {
288 | dataPoints: dataPoints,
289 | start: start,
290 | end: end
291 | };
292 |
293 | let heatmapArgs = {
294 | title: "Monthly Distribution",
295 | data: heatmapData,
296 | type: 'heatmap',
297 | discreteDomains: 1,
298 | countLabel: 'Level',
299 | colors: HEATMAP_COLORS_BLUE,
300 | legendScale: [0, 1, 2, 4, 5]
301 | };
302 | let heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
303 |
304 | Array.prototype.slice.call(
305 | document.querySelectorAll('.heatmap-mode-buttons button')
306 | ).map(el => {
307 | el.addEventListener('click', (e) => {
308 | let btn = e.target;
309 | let mode = btn.getAttribute('data-mode');
310 | let discreteDomains = 0;
311 |
312 | if(mode === 'discrete') {
313 | discreteDomains = 1;
314 | }
315 |
316 | let colors = [];
317 | let colors_mode = document
318 | .querySelector('.heatmap-color-buttons .active')
319 | .getAttribute('data-color');
320 | if(colors_mode === 'halloween') {
321 | colors = HEATMAP_COLORS_YELLOW;
322 | } else if (colors_mode === 'blue') {
323 | colors = HEATMAP_COLORS_BLUE;
324 | }
325 |
326 | heatmapArgs.discreteDomains = discreteDomains;
327 | heatmapArgs.colors = colors;
328 | new Chart("#chart-heatmap", heatmapArgs);
329 |
330 | Array.prototype.slice.call(
331 | btn.parentNode.querySelectorAll('button')).map(el => {
332 | el.classList.remove('active');
333 | });
334 | btn.classList.add('active');
335 | });
336 | });
337 |
338 | Array.prototype.slice.call(
339 | document.querySelectorAll('.heatmap-color-buttons button')
340 | ).map(el => {
341 | el.addEventListener('click', (e) => {
342 | let btn = e.target;
343 | let colors_mode = btn.getAttribute('data-color');
344 | let colors = [];
345 |
346 | if(colors_mode === 'halloween') {
347 | colors = HEATMAP_COLORS_YELLOW;
348 | } else if (colors_mode === 'blue') {
349 | colors = HEATMAP_COLORS_BLUE;
350 | }
351 |
352 | let discreteDomains = 1;
353 |
354 | let view_mode = document
355 | .querySelector('.heatmap-mode-buttons .active')
356 | .getAttribute('data-mode');
357 | if(view_mode === 'continuous') {
358 | discreteDomains = 0;
359 | }
360 |
361 | heatmapArgs.discreteDomains = discreteDomains;
362 | heatmapArgs.colors = colors;
363 | new Chart("#chart-heatmap", heatmapArgs);
364 |
365 | Array.prototype.slice.call(
366 | btn.parentNode.querySelectorAll('button')).map(el => {
367 | el.classList.remove('active');
368 | });
369 | btn.classList.add('active');
370 | });
371 | });
372 |
373 | document.querySelector('.export-heatmap').addEventListener('click', () => {
374 | heatmapChart.export();
375 | });
376 |
--------------------------------------------------------------------------------
/docs/assets/js/index.min.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 |
4 | var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
5 | var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
6 |
7 | // Universal constants
8 | var ANGLE_RATIO = Math.PI / 180;
9 |
10 | /**
11 | * Shuffles array in place. ES6 version
12 | * @param {Array} array An array containing the items.
13 | */
14 | function shuffle(array) {
15 | // Awesomeness: https://bost.ocks.org/mike/shuffle/
16 | // https://stackoverflow.com/a/2450976/6495043
17 | // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
18 |
19 | for (var i = array.length - 1; i > 0; i--) {
20 | var j = Math.floor(Math.random() * (i + 1));
21 | var _ref = [array[j], array[i]];
22 | array[i] = _ref[0];
23 | array[j] = _ref[1];
24 | }
25 |
26 | return array;
27 | }
28 |
29 | // https://stackoverflow.com/a/29325222
30 | function getRandomBias(min, max, bias, influence) {
31 | var range = max - min;
32 | var biasValue = range * bias + min;
33 | var rnd = Math.random() * range + min,
34 | // random in range
35 | mix = Math.random() * influence; // random mixer
36 | return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
37 | }
38 |
39 | // Playing around with dates
40 | var NO_OF_MILLIS = 1000;
41 | var SEC_IN_DAY = 86400;
42 | var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
43 |
44 | function clone(date) {
45 | return new Date(date.getTime());
46 | }
47 |
48 | function timestampSec(date) {
49 | return date.getTime() / NO_OF_MILLIS;
50 | }
51 |
52 | function timestampToMidnight(timestamp) {
53 | var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
54 |
55 | var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
56 | if (roundAhead) {
57 | return midnightTs + SEC_IN_DAY;
58 | }
59 | return midnightTs;
60 | }
61 |
62 | // mutates
63 | function addDays(date, numberOfDays) {
64 | date.setDate(date.getDate() + numberOfDays);
65 | }
66 |
67 | // Composite Chart
68 | // ================================================================================
69 | var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
70 |
71 | var lineCompositeData = {
72 | labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
73 |
74 | yMarkers: [{
75 | label: "Average 100 reports/month",
76 | value: 1200,
77 | options: { labelPos: "left" }
78 | }],
79 |
80 | datasets: [{
81 | name: "Events",
82 | values: reportCountList
83 | }]
84 | };
85 |
86 | var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
87 | var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
88 | var fireballOver25 = [
89 | // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
90 | [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
91 |
92 | var barCompositeData = {
93 | labels: MONTH_NAMES_SHORT,
94 | datasets: [{
95 | name: "Over 25 reports",
96 | values: fireballOver25[9]
97 | }, {
98 | name: "5 to 25 reports",
99 | values: fireball_5_25[9]
100 | }, {
101 | name: "2 to 5 reports",
102 | values: fireball_2_5[9]
103 | }]
104 | };
105 |
106 | // Demo Chart multitype Chart
107 | // ================================================================================
108 | var typeData = {
109 | labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
110 |
111 | yMarkers: [{
112 | label: "Marker",
113 | value: 43,
114 | options: { labelPos: "left" }
115 | // type: 'dashed'
116 | }],
117 |
118 | yRegions: [{
119 | label: "Region",
120 | start: -10,
121 | end: 50,
122 | options: { labelPos: "right" }
123 | }],
124 |
125 | datasets: [{
126 | name: "Some Data",
127 | values: [18, 40, 30, 35, 8, 52, 17, -4],
128 | axisPosition: "right",
129 | chartType: "bar"
130 | }, {
131 | name: "Another Set",
132 | values: [30, 50, -10, 15, 18, 32, 27, 14],
133 | axisPosition: "right",
134 | chartType: "bar"
135 | }, {
136 | name: "Yet Another",
137 | values: [15, 20, -3, -15, 58, 12, -17, 37],
138 | chartType: "line"
139 | }]
140 | };
141 |
142 | var trendsData = {
143 | 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],
144 | datasets: [{
145 | values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
146 | }]
147 | };
148 |
149 | var moonData = {
150 | names: ["Ganymede", "Callisto", "Io", "Europa"],
151 | masses: [14819000, 10759000, 8931900, 4800000],
152 | distances: [1070.412, 1882.709, 421.7, 671.034],
153 | diameters: [5262.4, 4820.6, 3637.4, 3121.6]
154 | };
155 |
156 | var demoConfig = {
157 | lineComposite: {
158 | elementID: "#chart-composite-1",
159 | options: {
160 | title: "Fireball/Bolide Events - Yearly (reported)",
161 | data: lineCompositeData,
162 | type: "line",
163 | height: 190,
164 | colors: ["green"],
165 | isNavigable: 1,
166 | valuesOverPoints: 1,
167 |
168 | lineOptions: {
169 | dotSize: 8
170 | }
171 | }
172 | },
173 |
174 | barComposite: {
175 | elementID: "#chart-composite-2",
176 | options: {
177 | data: barCompositeData,
178 | type: "bar",
179 | height: 210,
180 | colors: ["violet", "light-blue", "#46a9f9"],
181 | valuesOverPoints: 1,
182 | axisOptions: {
183 | xAxisMode: "tick",
184 | shortenYAxisNumbers: true
185 | },
186 | barOptions: {
187 | stacked: 1
188 | }
189 | }
190 | },
191 |
192 | demoMain: {
193 | elementID: "",
194 | options: {
195 | title: "My Awesome Chart",
196 | data: "typeData",
197 | type: "axis-mixed",
198 | height: 300,
199 | colors: ["purple", "magenta", "light-blue"],
200 | maxSlices: 10,
201 |
202 | tooltipOptions: {
203 | formatTooltipX: function formatTooltipX(d) {
204 | return (d + '').toUpperCase();
205 | },
206 | formatTooltipY: function formatTooltipY(d) {
207 | return d + ' pts';
208 | }
209 | }
210 | }
211 | }
212 | };
213 |
214 | // import { lineComposite, barComposite } from './demoConfig';
215 | // ================================================================================
216 |
217 | var Chart = frappe.Chart; // eslint-disable-line no-undef
218 |
219 | var lc = demoConfig.lineComposite;
220 | var lineCompositeChart = new Chart(lc.elementID, lc.options);
221 |
222 | var bc = demoConfig.barComposite;
223 | var barCompositeChart = new Chart(bc.elementID, bc.options);
224 |
225 | lineCompositeChart.parent.addEventListener('data-select', function (e) {
226 | var i = e.index;
227 | barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
228 | });
229 |
230 | // ================================================================================
231 |
232 | var customColors = ['purple', 'magenta', 'light-blue'];
233 | var typeChartArgs = {
234 | title: "My Awesome Chart",
235 | data: typeData,
236 | type: 'axis-mixed',
237 | height: 300,
238 | colors: customColors,
239 |
240 | // maxLegendPoints: 6,
241 | maxSlices: 10,
242 |
243 | tooltipOptions: {
244 | formatTooltipX: function formatTooltipX(d) {
245 | return (d + '').toUpperCase();
246 | },
247 | formatTooltipY: function formatTooltipY(d) {
248 | return d + ' pts';
249 | }
250 | }
251 | };
252 |
253 | var aggrChart = new Chart("#chart-aggr", typeChartArgs);
254 |
255 | Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
256 | el.addEventListener('click', function (e) {
257 | var btn = e.target;
258 | var type = btn.getAttribute('data-type');
259 | typeChartArgs.type = type;
260 | if (type !== 'axis-mixed') {
261 | typeChartArgs.colors = undefined;
262 | } else {
263 | typeChartArgs.colors = customColors;
264 | }
265 |
266 | if (type !== 'percentage') {
267 | typeChartArgs.height = 300;
268 | } else {
269 | typeChartArgs.height = undefined;
270 | }
271 |
272 | var newChart = new Chart("#chart-aggr", typeChartArgs);
273 | if (newChart) {
274 | aggrChart = newChart;
275 | }
276 | Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
277 | el.classList.remove('active');
278 | });
279 | btn.classList.add('active');
280 | });
281 | });
282 |
283 | document.querySelector('.export-aggr').addEventListener('click', function () {
284 | aggrChart.export();
285 | });
286 |
287 | // Update values chart
288 | // ================================================================================
289 | 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"];
290 |
291 | var getRandom = function getRandom() {
292 | return Math.floor(getRandomBias(-40, 60, 0.8, 1));
293 | };
294 | var updateDataAllValues = Array.from({ length: 30 }, getRandom);
295 |
296 | // We're gonna be shuffling this
297 | var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
298 | return i;
299 | });
300 |
301 | var getUpdateData = function getUpdateData(source_array) {
302 | var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
303 |
304 | var indices = updateDataAllIndices.slice(0, length);
305 | return indices.map(function (index) {
306 | return source_array[index];
307 | });
308 | };
309 |
310 | var updateData = {
311 | labels: getUpdateData(updateDataAllLabels),
312 | datasets: [{
313 | "values": getUpdateData(updateDataAllValues)
314 | }],
315 | yMarkers: [{
316 | label: "Altitude",
317 | value: 25,
318 | type: 'dashed'
319 | }],
320 | yRegions: [{
321 | label: "Range",
322 | start: 10,
323 | end: 45
324 | }]
325 | };
326 |
327 | var updateChart = new Chart("#chart-update", {
328 | data: updateData,
329 | type: 'line',
330 | height: 300,
331 | colors: ['#ff6c03'],
332 | lineOptions: {
333 | // hideLine: 1,
334 | regionFill: 1
335 | }
336 | });
337 |
338 | var chartUpdateButtons = document.querySelector('.chart-update-buttons');
339 |
340 | chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () {
341 | shuffle(updateDataAllIndices);
342 | var value = getRandom();
343 | var start = getRandom();
344 | var end = getRandom();
345 | var data = {
346 | labels: updateDataAllLabels.slice(0, 10),
347 | datasets: [{ values: getUpdateData(updateDataAllValues) }],
348 | yMarkers: [{
349 | label: "Altitude",
350 | value: value,
351 | type: 'dashed'
352 | }],
353 | yRegions: [{
354 | label: "Range",
355 | start: start,
356 | end: end
357 | }]
358 | };
359 | updateChart.update(data);
360 | });
361 |
362 | chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
363 | var index = updateChart.state.datasetLength; // last index to add
364 | if (index >= updateDataAllIndices.length) return;
365 | updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
366 | });
367 |
368 | chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
369 | updateChart.removeDataPoint();
370 | });
371 |
372 | document.querySelector('.export-update').addEventListener('click', function () {
373 | updateChart.export();
374 | });
375 |
376 | // Trends Chart
377 | // ================================================================================
378 |
379 | var plotChartArgs = {
380 | title: "Mean Total Sunspot Count - Yearly",
381 | data: trendsData,
382 | type: 'line',
383 | height: 300,
384 | colors: ['#238e38'],
385 | lineOptions: {
386 | hideDots: 1,
387 | heatline: 1
388 | },
389 | axisOptions: {
390 | xAxisMode: 'tick',
391 | yAxisMode: 'span',
392 | xIsSeries: 1
393 | }
394 | };
395 |
396 | var trendsChart = new Chart("#chart-trends", plotChartArgs);
397 |
398 | Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) {
399 | el.addEventListener('click', function (e) {
400 | var btn = e.target;
401 | var type = btn.getAttribute('data-type');
402 | var config = {};
403 | config[type] = 1;
404 |
405 | if (['regionFill', 'heatline'].includes(type)) {
406 | config.hideDots = 1;
407 | }
408 |
409 | // plotChartArgs.init = false;
410 | plotChartArgs.lineOptions = config;
411 |
412 | new Chart("#chart-trends", plotChartArgs);
413 |
414 | Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
415 | el.classList.remove('active');
416 | });
417 | btn.classList.add('active');
418 | });
419 | });
420 |
421 | document.querySelector('.export-trends').addEventListener('click', function () {
422 | trendsChart.export();
423 | });
424 |
425 | // Event chart
426 | // ================================================================================
427 |
428 |
429 | var eventsData = {
430 | labels: ["Ganymede", "Callisto", "Io", "Europa"],
431 | datasets: [{
432 | "values": moonData.distances,
433 | "formatted": moonData.distances.map(function (d) {
434 | return d * 1000 + " km";
435 | })
436 | }]
437 | };
438 |
439 | var eventsChart = new Chart("#chart-events", {
440 | title: "Jupiter's Moons: Semi-major Axis (1000 km)",
441 | data: eventsData,
442 | type: 'bar',
443 | height: 330,
444 | colors: ['grey'],
445 | isNavigable: 1
446 | });
447 |
448 | var dataDiv = document.querySelector('.chart-events-data');
449 |
450 | eventsChart.parent.addEventListener('data-select', function (e) {
451 | var name = moonData.names[e.index];
452 | dataDiv.querySelector('.moon-name').innerHTML = name;
453 | dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
454 | dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
455 | dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
456 | dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
457 | });
458 |
459 | // Heatmap
460 | // ================================================================================
461 |
462 | var today = new Date();
463 | var start = clone(today);
464 | addDays(start, 4);
465 | var end = clone(start);
466 | start.setFullYear(start.getFullYear() - 2);
467 | end.setFullYear(end.getFullYear() - 1);
468 |
469 | var dataPoints = {};
470 |
471 | var startTs = timestampSec(start);
472 | var endTs = timestampSec(end);
473 |
474 | startTs = timestampToMidnight(startTs);
475 | endTs = timestampToMidnight(endTs, true);
476 |
477 | while (startTs < endTs) {
478 | dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
479 | startTs += SEC_IN_DAY;
480 | }
481 |
482 | var heatmapData = {
483 | dataPoints: dataPoints,
484 | start: start,
485 | end: end
486 | };
487 |
488 | var heatmapArgs = {
489 | title: "Monthly Distribution",
490 | data: heatmapData,
491 | type: 'heatmap',
492 | discreteDomains: 1,
493 | countLabel: 'Level',
494 | colors: HEATMAP_COLORS_BLUE,
495 | legendScale: [0, 1, 2, 4, 5]
496 | };
497 | var heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
498 |
499 | Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
500 | el.addEventListener('click', function (e) {
501 | var btn = e.target;
502 | var mode = btn.getAttribute('data-mode');
503 | var discreteDomains = 0;
504 |
505 | if (mode === 'discrete') {
506 | discreteDomains = 1;
507 | }
508 |
509 | var colors = [];
510 | var colors_mode = document.querySelector('.heatmap-color-buttons .active').getAttribute('data-color');
511 | if (colors_mode === 'halloween') {
512 | colors = HEATMAP_COLORS_YELLOW;
513 | } else if (colors_mode === 'blue') {
514 | colors = HEATMAP_COLORS_BLUE;
515 | }
516 |
517 | heatmapArgs.discreteDomains = discreteDomains;
518 | heatmapArgs.colors = colors;
519 | new Chart("#chart-heatmap", heatmapArgs);
520 |
521 | Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
522 | el.classList.remove('active');
523 | });
524 | btn.classList.add('active');
525 | });
526 | });
527 |
528 | Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) {
529 | el.addEventListener('click', function (e) {
530 | var btn = e.target;
531 | var colors_mode = btn.getAttribute('data-color');
532 | var colors = [];
533 |
534 | if (colors_mode === 'halloween') {
535 | colors = HEATMAP_COLORS_YELLOW;
536 | } else if (colors_mode === 'blue') {
537 | colors = HEATMAP_COLORS_BLUE;
538 | }
539 |
540 | var discreteDomains = 1;
541 |
542 | var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
543 | if (view_mode === 'continuous') {
544 | discreteDomains = 0;
545 | }
546 |
547 | heatmapArgs.discreteDomains = discreteDomains;
548 | heatmapArgs.colors = colors;
549 | new Chart("#chart-heatmap", heatmapArgs);
550 |
551 | Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
552 | el.classList.remove('active');
553 | });
554 | btn.classList.add('active');
555 | });
556 | });
557 |
558 | document.querySelector('.export-heatmap').addEventListener('click', function () {
559 | heatmapChart.export();
560 | });
561 |
562 | }());
563 | //# sourceMappingURL=index.min.js.map
564 |
--------------------------------------------------------------------------------
/docs/docs.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frappe/charts/7b15424c3af80b1c8e178d8e612c290d2d630904/docs/docs.html
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | redirect_to: "https://frappe.io/charts"
3 | ---
4 |
5 |
6 |
7 | Frappe Charts
9 |
29 | Frappe Charts
30 | GitHub-inspired simple and modern SVG charts for the web
31 |
32 | Click or use arrow keys to navigate data points
33 |
34 |
35 |
36 |
37 | Create a chart
38 | <!--HTML-->
39 | <div id="chart"></div> // Javascript
41 | let chart = new frappe.Chart( "#chart", { // or DOM element
42 | data: {
43 | labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
44 | "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
45 |
46 | datasets: [
47 | {
48 | name: "Some Data", chartType: 'bar',
49 | values: [25, 40, 30, 35, 8, 52, 17, -4]
50 | },
51 | {
52 | name: "Another Set", chartType: 'bar',
53 | values: [25, 50, -10, 15, 18, 32, 27, 14]
54 | },
55 | {
56 | name: "Yet Another", chartType: 'line',
57 | values: [15, 20, -3, -15, 58, 12, -17, 37]
58 | }
59 | ],
60 |
61 | yMarkers: [{ label: "Marker", value: 70,
62 | options: { labelPos: 'left' }}],
63 | yRegions: [{ label: "Region", start: -10, end: 50,
64 | options: { labelPos: 'right' }}]
65 | },
66 |
67 | title: "My Awesome Chart",
68 | type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage', 'donut'
69 | height: 300,
70 | colors: ['purple', '#ffa3ef', 'light-blue'],
71 |
72 | tooltipOptions: {
73 | formatTooltipX: d => (d + '').toUpperCase(),
74 | formatTooltipY: d => d + ' pts',
75 | }
76 | });
77 |
78 | chart.export();
79 |
82 |
83 | Mixed
84 | Pie Chart
85 | Donut Chart
86 | Percentage Chart
87 |
88 |
89 | Export ...
90 |
91 |
92 |
93 |
94 | Update Values
95 |
96 |
97 |
98 | Random Data
99 | Add Value
100 | Remove Value
101 | Export ...
102 |
103 |
104 |
105 |
106 | Plot Trends
107 |
108 |
109 |
110 | Line
111 | Dots
112 | HeatLine
113 | Region
114 |
115 |
116 | Export ...
117 |
118 |
119 |
120 |
121 | Listen to state change
122 |
123 |
126 |
127 |
128 |
129 |
130 |
131 |
Europa
132 |
Semi-major-axis: 671034 km
133 |
Mass: 4800000 x 10^16 kg
134 |
Diameter: 3121.6 km
135 |
136 |
137 |
...
139 | isNavigable: 1, // Navigate across data points; default 0
140 | ...
141 |
142 | chart.parent.addEventListener('data-select', (e) => {
143 | update_moon_data(e.index); // e contains index and value of current datapoint
144 | });
146 |
147 |
148 |
149 | And a Month-wise Heatmap
150 |
151 |
153 |
154 | Discrete
155 | Continuous
156 |
157 |
158 | Green (Default)
159 | Blue
160 | GitHub's Halloween
161 |
162 |
163 | Export ...
164 |
165 | let heatmap = new frappe.Chart("#heatmap", {
166 | type: 'heatmap',
167 | title: "Monthly Distribution",
168 | data: {
169 | dataPoints: {'1524064033': 8, /* ... */},
170 | // object with timestamp-value pairs
171 | start: startDate
172 | end: endDate // Date objects
173 | },
174 | countLabel: 'Level',
175 | discreteDomains: 0 // default: 1
176 | colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
177 | // Set of five incremental colors,
178 | // preferably with a low-saturation color for zero data;
179 | // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
180 | });
182 |
183 |
193 |
194 |
195 | Available options
196 |
197 | ...
198 | {
199 | data: {
200 | labels: [],
201 | datasets: [],
202 | yRegions: [],
203 | yMarkers: []
204 | }
205 | title: '',
206 | colors: [],
207 | height: 200,
208 |
209 | tooltipOptions: {
210 | formatTooltipX: d => (d + '').toUpperCase(),
211 | formatTooltipY: d => d + ' pts',
212 | }
213 |
214 | // Axis charts
215 | isNavigable: 1, // default: 0
216 | valuesOverPoints: 1, // default: 0
217 | barOptions: {
218 | spaceRatio: 1 // default: 0.5
219 | stacked: 1 // default: 0
220 | }
221 |
222 | lineOptions: {
223 | dotSize: 6, // default: 4
224 | hideLine: 0, // default: 0
225 | hideDots: 1, // default: 0
226 | heatline: 1, // default: 0
227 | regionFill: 1 // default: 0
228 | }
229 |
230 | axisOptions: {
231 | yAxisMode: 'span', // Axis lines, default
232 | xAxisMode: 'tick', // No axis lines, only short ticks
233 | xIsSeries: 1 // Allow skipping x values for space
234 | // default: 0
235 | },
236 |
237 | // Pie/Percentage/Donut charts
238 | maxLegendPoints: 6, // default: 20
239 | maxSlices: 10, // default: 20
240 |
241 | // Percentage chart
242 | barOptions: {
243 | height: 15 // default: 20
244 | depth: 5 // default: 2
245 | }
246 |
247 | // Heatmap
248 | discreteDomains: 1, // default: 1
249 | }
250 | ...
251 |
252 | // Updating values
253 | chart.update(data);
254 |
255 | // Axis charts:
256 | chart.addDataPoint(label, valueFromEachDataset, index)
257 | chart.removeDataPoint(index)
258 | chart.updateDataset(datasetValues, index)
259 |
260 | // Exporting
261 | chart.export();
262 |
263 | // Unbind window-resize events
264 | chart.destroy();
265 |
266 |
268 |
269 |
270 | Install
271 | Install via npm
272 | npm install frappe-chartsAnd include it in your project
274 | import { Chart } from "frappe-charts"(for ES6+ import the ESModule from the dist folder)
276 | import { Chart } from "frappe-charts/dist/frappe-charts.esm.js"... or include it directly in your HTML
278 | <script src="https://unpkg.com/frappe-charts@1.1.0"></script>Use as:
280 | new Chart(); // ES6 module
281 | // or
282 | new frappe.Chart(); // Browser
284 |
285 |
286 |
287 | Download
289 |
290 | View on GitHub
291 |
292 |
293 | Star
294 |
295 | License: MIT
296 |
297 |
298 |
299 |
301 | Project maintained by Frappe .
302 | Used in ERPNext .
303 | Read the blog post .
304 |
305 |
306 | Data from the American Meteor Society ,
307 | SILSO and
308 | NASA Open APIs
309 |
310 |
311 |
312 |
313 |
314 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frappe-charts",
3 | "version": "v1.6.3",
4 | "type": "module",
5 | "main": "dist/frappe-charts.esm.js",
6 | "module": "dist/frappe-charts.esm.js",
7 | "browser": "dist/frappe-charts.umd.js",
8 | "common": "dist/frappe-charts.cjs.js",
9 | "unnpkg": "dist/frappe-charts.umd.js",
10 | "description": "https://frappe.github.io/charts",
11 | "directories": {
12 | "doc": "docs"
13 | },
14 | "files": [
15 | "src",
16 | "dist"
17 | ],
18 | "scripts": {
19 | "test": "echo \"Error: no test specified\" && exit 1",
20 | "watch": "rollup -c --watch",
21 | "dev": "npm-run-all --parallel watch",
22 | "build": "rollup -c"
23 | },
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/frappe/charts.git"
27 | },
28 | "keywords": [
29 | "js",
30 | "charts"
31 | ],
32 | "author": "Prateeksha Singh",
33 | "license": "MIT",
34 | "bugs": {
35 | "url": "https://github.com/frappe/charts/issues"
36 | },
37 | "homepage": "https://github.com/frappe/charts#readme",
38 | "devDependencies": {
39 | "@babel/core": "^7.10.5",
40 | "@babel/preset-env": "^7.10.4",
41 | "node-sass": "^8.0.0",
42 | "rollup": "^2.21.0",
43 | "rollup-plugin-babel": "^4.4.0",
44 | "rollup-plugin-bundle-size": "^1.0.3",
45 | "rollup-plugin-commonjs": "^10.1.0",
46 | "rollup-plugin-eslint": "^7.0.0",
47 | "rollup-plugin-postcss": "^3.1.3",
48 | "rollup-plugin-scss": "^2.5.0",
49 | "rollup-plugin-terser": "^6.1.0"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import pkg from "./package.json";
2 |
3 | import commonjs from "rollup-plugin-commonjs";
4 | import babel from "rollup-plugin-babel";
5 | import postcss from "rollup-plugin-postcss";
6 | import scss from "rollup-plugin-scss";
7 | import bundleSize from "rollup-plugin-bundle-size";
8 | import { terser } from "rollup-plugin-terser";
9 |
10 | export default [
11 | // browser-friendly UMD build
12 | {
13 | input: "src/js/index.js",
14 | output: {
15 | sourcemap: true,
16 | name: "frappe",
17 | file: pkg.browser,
18 | format: "umd",
19 | },
20 | plugins: [
21 | commonjs(),
22 | babel({
23 | exclude: ["node_modules/**"],
24 | }),
25 | terser(),
26 | scss({ output: "dist/frappe-charts.min.css" }),
27 | bundleSize(),
28 | ],
29 | },
30 |
31 | // CommonJS (for Node) and ES module (for bundlers) build.
32 | {
33 | input: "src/js/chart.js",
34 | output: [
35 | { file: pkg.common, format: "cjs", sourcemap: true },
36 | { file: pkg.module, format: "es", sourcemap: true },
37 | ],
38 | plugins: [
39 | babel({
40 | exclude: ["node_modules/**"],
41 | }),
42 | terser(),
43 | postcss(),
44 | bundleSize(),
45 | ],
46 | },
47 | ];
48 |
--------------------------------------------------------------------------------
/src/css/charts.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --charts-label-color: #313b44;
3 | --charts-axis-line-color: #f4f5f6;
4 |
5 | --charts-tooltip-title: var(--charts-label-color);
6 | --charts-tooltip-label: var(--charts-label-color);
7 | --charts-tooltip-value: #192734;
8 | --charts-tooltip-bg: #ffffff;
9 |
10 | --charts-stroke-width: 2px;
11 | --charts-dataset-circle-stroke: #ffffff;
12 | --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
13 |
14 | --charts-legend-label: var(--charts-label-color);
15 | --charts-legend-value: var(--charts-label-color);
16 | }
17 |
18 | .chart-container {
19 | position: relative;
20 | /* for absolutely positioned tooltip */
21 |
22 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
23 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
24 | sans-serif;
25 |
26 | .axis,
27 | .chart-label {
28 | fill: var(--charts-label-color);
29 |
30 | line {
31 | stroke: var(--charts-axis-line-color);
32 | }
33 | }
34 |
35 | .dataset-units {
36 | circle {
37 | stroke: var(--charts-dataset-circle-stroke);
38 | stroke-width: var(--charts-dataset-circle-stroke-width);
39 | }
40 |
41 | path {
42 | fill: none;
43 | stroke-opacity: 1;
44 | stroke-width: var(--charts-stroke-width);
45 | }
46 | }
47 |
48 | .dataset-path {
49 | stroke-width: var(--charts-stroke-width);
50 | }
51 |
52 | .path-group {
53 | path {
54 | fill: none;
55 | stroke-opacity: 1;
56 | stroke-width: var(--charts-stroke-width);
57 | }
58 | }
59 |
60 | line.dashed {
61 | stroke-dasharray: 5, 3;
62 | }
63 |
64 | .axis-line {
65 | .specific-value {
66 | text-anchor: start;
67 | }
68 |
69 | .y-line {
70 | text-anchor: end;
71 | }
72 |
73 | .x-line {
74 | text-anchor: middle;
75 | }
76 | }
77 |
78 | .legend-dataset-label {
79 | fill: var(--charts-legend-label);
80 | font-weight: 600;
81 | }
82 |
83 | .legend-dataset-value {
84 | fill: var(--charts-legend-value);
85 | }
86 | }
87 |
88 | .graph-svg-tip {
89 | position: absolute;
90 | z-index: 99999;
91 | padding: 10px;
92 | font-size: 12px;
93 | text-align: center;
94 | background: var(--charts-tooltip-bg);
95 | box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1),
96 | 0px 2px 6px rgba(17, 43, 66, 0.08),
97 | 0px 40px 30px -30px rgba(17, 43, 66, 0.1);
98 | border-radius: 6px;
99 |
100 | ul {
101 | padding-left: 0;
102 | display: flex;
103 | }
104 |
105 | ol {
106 | padding-left: 0;
107 | display: flex;
108 | }
109 |
110 | ul.data-point-list {
111 | li {
112 | min-width: 90px;
113 | font-weight: 600;
114 | }
115 | }
116 |
117 | .svg-pointer {
118 | position: absolute;
119 | height: 12px;
120 | width: 12px;
121 | border-radius: 2px;
122 | background: var(--charts-tooltip-bg);
123 | transform: rotate(45deg);
124 | margin-top: -7px;
125 | margin-left: -6px;
126 | }
127 |
128 | &.comparison {
129 | text-align: left;
130 | padding: 0px;
131 | pointer-events: none;
132 |
133 | .title {
134 | display: block;
135 | padding: 16px;
136 | margin: 0;
137 | color: var(--charts-tooltip-title);
138 | font-weight: 600;
139 | line-height: 1;
140 | pointer-events: none;
141 | text-transform: uppercase;
142 |
143 | strong {
144 | color: var(--charts-tooltip-value);
145 | }
146 | }
147 |
148 | ul {
149 | margin: 0;
150 | white-space: nowrap;
151 | list-style: none;
152 |
153 | &.tooltip-grid {
154 | display: grid;
155 | grid-template-columns: repeat(4, minmax(0, 1fr));
156 | gap: 5px;
157 | }
158 | }
159 |
160 | li {
161 | display: inline-block;
162 | display: flex;
163 | flex-direction: row;
164 | font-weight: 600;
165 | line-height: 1;
166 |
167 | padding: 5px 15px 15px 15px;
168 |
169 | .tooltip-legend {
170 | height: 12px;
171 | width: 12px;
172 | margin-right: 8px;
173 | border-radius: 2px;
174 | }
175 |
176 | .tooltip-label {
177 | margin-top: 4px;
178 | font-size: 11px;
179 | max-width: 100px;
180 |
181 | color: var(--fr-tooltip-label);
182 | overflow: hidden;
183 | text-overflow: ellipsis;
184 | white-space: nowrap;
185 | }
186 |
187 | .tooltip-value {
188 | color: var(--charts-tooltip-value);
189 | }
190 | }
191 | }
192 | }
--------------------------------------------------------------------------------
/src/css/chartsCss.js:
--------------------------------------------------------------------------------
1 | export const CSSTEXT =
2 | ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";
3 |
--------------------------------------------------------------------------------
/src/js/chart.js:
--------------------------------------------------------------------------------
1 | import "../css/charts.scss";
2 |
3 | import PercentageChart from "./charts/PercentageChart";
4 | import PieChart from "./charts/PieChart";
5 | import Heatmap from "./charts/Heatmap";
6 | import AxisChart from "./charts/AxisChart";
7 | import DonutChart from "./charts/DonutChart";
8 |
9 | const chartTypes = {
10 | bar: AxisChart,
11 | line: AxisChart,
12 | percentage: PercentageChart,
13 | heatmap: Heatmap,
14 | pie: PieChart,
15 | donut: DonutChart,
16 | };
17 |
18 | function getChartByType(chartType = "line", parent, options) {
19 | if (chartType === "axis-mixed") {
20 | options.type = "line";
21 | return new AxisChart(parent, options);
22 | }
23 |
24 | if (!chartTypes[chartType]) {
25 | console.error("Undefined chart type: " + chartType);
26 | return;
27 | }
28 |
29 | return new chartTypes[chartType](parent, options);
30 | }
31 |
32 | class Chart {
33 | constructor(parent, options) {
34 | return getChartByType(options.type, parent, options);
35 | }
36 | }
37 |
38 | export { Chart, PercentageChart, PieChart, Heatmap, AxisChart };
39 |
--------------------------------------------------------------------------------
/src/js/charts/AggregationChart.js:
--------------------------------------------------------------------------------
1 | import BaseChart from "./BaseChart";
2 | import { truncateString } from "../utils/draw-utils";
3 | import { legendDot } from "../utils/draw";
4 | import { round } from "../utils/helpers";
5 | import { getExtraWidth } from "../utils/constants";
6 |
7 | export default class AggregationChart extends BaseChart {
8 | constructor(parent, args) {
9 | super(parent, args);
10 | }
11 |
12 | configure(args) {
13 | super.configure(args);
14 |
15 | this.config.formatTooltipY = (args.tooltipOptions || {}).formatTooltipY;
16 | this.config.maxSlices = args.maxSlices || 20;
17 | this.config.maxLegendPoints = args.maxLegendPoints || 20;
18 | this.config.legendRowHeight = 60;
19 | }
20 |
21 | calc() {
22 | let s = this.state;
23 | let maxSlices = this.config.maxSlices;
24 | s.sliceTotals = [];
25 |
26 | let allTotals = this.data.labels
27 | .map((label, i) => {
28 | let total = 0;
29 | this.data.datasets.map((e) => {
30 | total += e.values[i];
31 | });
32 | return [total, label];
33 | })
34 | .filter((d) => {
35 | return d[0] >= 0;
36 | }); // keep only positive results
37 |
38 | let totals = allTotals;
39 | if (allTotals.length > maxSlices) {
40 | // Prune and keep a grey area for rest as per maxSlices
41 | allTotals.sort((a, b) => {
42 | return b[0] - a[0];
43 | });
44 |
45 | totals = allTotals.slice(0, maxSlices - 1);
46 | let remaining = allTotals.slice(maxSlices - 1);
47 |
48 | let sumOfRemaining = 0;
49 | remaining.map((d) => {
50 | sumOfRemaining += d[0];
51 | });
52 | totals.push([sumOfRemaining, "Rest"]);
53 | this.colors[maxSlices - 1] = "grey";
54 | }
55 |
56 | s.labels = [];
57 | totals.map((d) => {
58 | s.sliceTotals.push(round(d[0]));
59 | s.labels.push(d[1]);
60 | });
61 |
62 | s.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0);
63 |
64 | this.center = {
65 | x: this.width / 2,
66 | y: this.height / 2,
67 | };
68 | }
69 |
70 | renderLegend() {
71 | let s = this.state;
72 | this.legendArea.textContent = "";
73 | this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
74 | super.renderLegend(this.legendTotals);
75 | }
76 |
77 | makeLegend(data, index, x_pos, y_pos) {
78 | let formatted = this.config.formatTooltipY
79 | ? this.config.formatTooltipY(data)
80 | : data;
81 |
82 | return legendDot(
83 | x_pos,
84 | y_pos,
85 | 12, // size
86 | 3, // dot radius
87 | this.colors[index], // fill
88 | this.state.labels[index], // label
89 | formatted, // value
90 | null, // base_font_size
91 | this.config.truncateLegends // truncate_legends
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/js/charts/BaseChart.js:
--------------------------------------------------------------------------------
1 | import SvgTip from "../objects/SvgTip";
2 | import {
3 | $,
4 | isElementInViewport,
5 | getElementContentWidth,
6 | isHidden,
7 | } from "../utils/dom";
8 | import {
9 | makeSVGContainer,
10 | makeSVGDefs,
11 | makeSVGGroup,
12 | makeText,
13 | } from "../utils/draw";
14 | import { LEGEND_ITEM_WIDTH } from "../utils/constants";
15 | import {
16 | BASE_MEASURES,
17 | getExtraHeight,
18 | getExtraWidth,
19 | getTopOffset,
20 | getLeftOffset,
21 | INIT_CHART_UPDATE_TIMEOUT,
22 | CHART_POST_ANIMATE_TIMEOUT,
23 | DEFAULT_COLORS,
24 | } from "../utils/constants";
25 | import { getColor, isValidColor } from "../utils/colors";
26 | import { runSMILAnimation } from "../utils/animation";
27 | import { downloadFile, prepareForExport } from "../utils/export";
28 | import { deepClone } from "../utils/helpers";
29 |
30 | export default class BaseChart {
31 | constructor(parent, options) {
32 | // deepclone options to avoid making changes to orignal object
33 | options = deepClone(options);
34 |
35 | this.parent =
36 | typeof parent === "string"
37 | ? document.querySelector(parent)
38 | : parent;
39 |
40 | if (!(this.parent instanceof HTMLElement)) {
41 | throw new Error("No `parent` element to render on was provided.");
42 | }
43 |
44 | this.rawChartArgs = options;
45 |
46 | this.title = options.title || "";
47 | this.type = options.type || "";
48 |
49 | this.colors = this.validateColors(options.colors, this.type);
50 |
51 | this.config = {
52 | showTooltip: 1, // calculate
53 | showLegend:
54 | typeof options.showLegend !== "undefined"
55 | ? options.showLegend
56 | : 1,
57 | isNavigable: options.isNavigable || 0,
58 | animate: 0,
59 | overrideCeiling: options.overrideCeiling || false,
60 | overrideFloor: options.overrideFloor || false,
61 | truncateLegends:
62 | typeof options.truncateLegends !== "undefined"
63 | ? options.truncateLegends
64 | : 1,
65 | continuous:
66 | typeof options.continuous !== "undefined"
67 | ? options.continuous
68 | : 1,
69 | };
70 |
71 | this.measures = JSON.parse(JSON.stringify(BASE_MEASURES));
72 | let m = this.measures;
73 |
74 | this.realData = this.prepareData(options.data, this.config);
75 | this.data = this.prepareFirstData(this.realData);
76 |
77 | this.setMeasures(options);
78 | if (!this.title.length) {
79 | m.titleHeight = 0;
80 | }
81 | if (!this.config.showLegend) m.legendHeight = 0;
82 | this.argHeight = options.height || m.baseHeight;
83 |
84 | this.state = {};
85 | this.options = {};
86 |
87 | this.initTimeout = INIT_CHART_UPDATE_TIMEOUT;
88 |
89 | if (this.config.isNavigable) {
90 | this.overlays = [];
91 | }
92 |
93 | this.configure(options);
94 | }
95 |
96 | prepareData(data) {
97 | return data;
98 | }
99 |
100 | prepareFirstData(data) {
101 | return data;
102 | }
103 |
104 | validateColors(colors, type) {
105 | const validColors = [];
106 | colors = (colors || []).concat(DEFAULT_COLORS[type]);
107 | colors.forEach((string) => {
108 | const color = getColor(string);
109 | if (!isValidColor(color)) {
110 | console.warn('"' + string + '" is not a valid color.');
111 | } else {
112 | validColors.push(color);
113 | }
114 | });
115 | return validColors;
116 | }
117 |
118 | setMeasures() {
119 | // Override measures, including those for title and legend
120 | // set config for legend and title
121 | }
122 |
123 | configure() {
124 | let height = this.argHeight;
125 | this.baseHeight = height;
126 | this.height = height - getExtraHeight(this.measures);
127 |
128 | // Bind window events
129 | this.boundDrawFn = () => this.draw(true);
130 | // Look into improving responsiveness
131 | //if (ResizeObserver) {
132 | // this.resizeObserver = new ResizeObserver(this.boundDrawFn);
133 | // this.resizeObserver.observe(this.parent);
134 | //}
135 | window.addEventListener("resize", this.boundDrawFn);
136 | window.addEventListener("orientationchange", this.boundDrawFn);
137 | }
138 |
139 | destroy() {
140 | //if (this.resizeObserver) this.resizeObserver.disconnect();
141 | window.removeEventListener("resize", this.boundDrawFn);
142 | window.removeEventListener("orientationchange", this.boundDrawFn);
143 | }
144 |
145 | // Has to be called manually
146 | setup() {
147 | this.makeContainer();
148 | this.updateWidth();
149 | this.makeTooltip();
150 |
151 | this.draw(false, true);
152 | }
153 |
154 | makeContainer() {
155 | // Chart needs a dedicated parent element
156 | this.parent.innerHTML = "";
157 |
158 | let args = {
159 | inside: this.parent,
160 | className: "chart-container",
161 | };
162 |
163 | if (this.independentWidth) {
164 | args.styles = { width: this.independentWidth + "px" };
165 | }
166 |
167 | this.container = $.create("div", args);
168 | }
169 |
170 | makeTooltip() {
171 | this.tip = new SvgTip({
172 | parent: this.container,
173 | colors: this.colors,
174 | });
175 | this.bindTooltip();
176 | }
177 |
178 | bindTooltip() {}
179 |
180 | draw(onlyWidthChange = false, init = false) {
181 | if (onlyWidthChange && isHidden(this.parent)) {
182 | // Don't update anything if the chart is hidden
183 | return;
184 | }
185 | this.updateWidth();
186 |
187 | this.calc(onlyWidthChange);
188 | this.makeChartArea();
189 | this.setupComponents();
190 |
191 | this.components.forEach((c) => c.setup(this.drawArea));
192 | // this.components.forEach(c => c.make());
193 | this.render(this.components, false);
194 |
195 | if (init) {
196 | this.data = this.realData;
197 | this.update(this.data, true);
198 | // Not needed anymore since animate defaults to 0 and might potentially be refactored or deprecated
199 | /* setTimeout(() => {
200 | this.update(this.data, true);
201 | }, this.initTimeout); */
202 | }
203 |
204 | if (this.config.showLegend) {
205 | this.renderLegend();
206 | }
207 |
208 | this.setupNavigation(init);
209 | }
210 |
211 | calc() {} // builds state
212 |
213 | updateWidth() {
214 | this.baseWidth = getElementContentWidth(this.parent);
215 | this.width = this.baseWidth - getExtraWidth(this.measures);
216 | }
217 |
218 | makeChartArea() {
219 | if (this.svg) {
220 | this.container.removeChild(this.svg);
221 | }
222 | let m = this.measures;
223 |
224 | this.svg = makeSVGContainer(
225 | this.container,
226 | "frappe-chart chart",
227 | this.baseWidth,
228 | this.baseHeight
229 | );
230 | this.svgDefs = makeSVGDefs(this.svg);
231 |
232 | if (this.title.length) {
233 | this.titleEL = makeText(
234 | "title",
235 | m.margins.left,
236 | m.margins.top,
237 | this.title,
238 | {
239 | fontSize: m.titleFontSize,
240 | fill: "#666666",
241 | dy: m.titleFontSize,
242 | }
243 | );
244 | }
245 |
246 | let top = getTopOffset(m);
247 | this.drawArea = makeSVGGroup(
248 | this.type + "-chart chart-draw-area",
249 | `translate(${getLeftOffset(m)}, ${top})`
250 | );
251 |
252 | if (this.config.showLegend) {
253 | top += this.height + m.paddings.bottom;
254 | this.legendArea = makeSVGGroup(
255 | "chart-legend",
256 | `translate(${getLeftOffset(m)}, ${top})`
257 | );
258 | }
259 |
260 | if (this.title.length) {
261 | this.svg.appendChild(this.titleEL);
262 | }
263 | this.svg.appendChild(this.drawArea);
264 | if (this.config.showLegend) {
265 | this.svg.appendChild(this.legendArea);
266 | }
267 |
268 | this.updateTipOffset(getLeftOffset(m), getTopOffset(m));
269 | }
270 |
271 | updateTipOffset(x, y) {
272 | this.tip.offset = {
273 | x: x,
274 | y: y,
275 | };
276 | }
277 |
278 | setupComponents() {
279 | this.components = new Map();
280 | }
281 |
282 | update(data, drawing = false, config) {
283 | if (!data) console.error("No data to update.");
284 | if (!drawing) data = deepClone(data);
285 | this.data = this.prepareData(data, config);
286 | this.calc(); // builds state
287 | this.render(this.components, this.config.animate);
288 | }
289 |
290 | render(components = this.components, animate = true) {
291 | if (this.config.isNavigable) {
292 | // Remove all existing overlays
293 | this.overlays.map((o) => o.parentNode.removeChild(o));
294 | // ref.parentNode.insertBefore(element, ref);
295 | }
296 | let elementsToAnimate = [];
297 | // Can decouple to this.refreshComponents() first to save animation timeout
298 | components.forEach((c) => {
299 | elementsToAnimate = elementsToAnimate.concat(c.update(animate));
300 | });
301 | if (elementsToAnimate.length > 0) {
302 | runSMILAnimation(this.container, this.svg, elementsToAnimate);
303 | setTimeout(() => {
304 | components.forEach((c) => c.make());
305 | this.updateNav();
306 | }, CHART_POST_ANIMATE_TIMEOUT);
307 | } else {
308 | components.forEach((c) => c.make());
309 | this.updateNav();
310 | }
311 | }
312 |
313 | updateNav() {
314 | if (this.config.isNavigable) {
315 | this.makeOverlay();
316 | this.bindUnits();
317 | }
318 | }
319 |
320 | renderLegend(dataset) {
321 | this.legendArea.textContent = "";
322 | let count = 0;
323 | let y = 0;
324 |
325 | dataset.map((data, index) => {
326 | let divisor = Math.floor(this.width / LEGEND_ITEM_WIDTH);
327 | if (count > divisor) {
328 | count = 0;
329 | y += this.config.legendRowHeight;
330 | }
331 | let x = LEGEND_ITEM_WIDTH * count;
332 | let dot = this.makeLegend(data, index, x, y);
333 | this.legendArea.appendChild(dot);
334 | count++;
335 | });
336 | }
337 |
338 | makeLegend() {}
339 |
340 | setupNavigation(init = false) {
341 | if (!this.config.isNavigable) return;
342 |
343 | if (init) {
344 | this.bindOverlay();
345 |
346 | this.keyActions = {
347 | 13: this.onEnterKey.bind(this),
348 | 37: this.onLeftArrow.bind(this),
349 | 38: this.onUpArrow.bind(this),
350 | 39: this.onRightArrow.bind(this),
351 | 40: this.onDownArrow.bind(this),
352 | };
353 |
354 | document.addEventListener("keydown", (e) => {
355 | if (isElementInViewport(this.container)) {
356 | e = e || window.event;
357 | if (this.keyActions[e.keyCode]) {
358 | this.keyActions[e.keyCode]();
359 | }
360 | }
361 | });
362 | }
363 | }
364 |
365 | makeOverlay() {}
366 | updateOverlay() {}
367 | bindOverlay() {}
368 | bindUnits() {}
369 |
370 | onLeftArrow() {}
371 | onRightArrow() {}
372 | onUpArrow() {}
373 | onDownArrow() {}
374 | onEnterKey() {}
375 |
376 | addDataPoint() {}
377 | removeDataPoint() {}
378 |
379 | getDataPoint() {}
380 | setCurrentDataPoint() {}
381 |
382 | updateDataset() {}
383 |
384 | export() {
385 | let chartSvg = prepareForExport(this.svg);
386 | downloadFile(this.title || "Chart", [chartSvg]);
387 | }
388 | }
389 |
--------------------------------------------------------------------------------
/src/js/charts/DonutChart.js:
--------------------------------------------------------------------------------
1 | import AggregationChart from "./AggregationChart";
2 | import { getComponent } from "../objects/ChartComponents";
3 | import { getOffset } from "../utils/dom";
4 | import { getPositionByAngle } from "../utils/helpers";
5 | import { makeArcStrokePathStr, makeStrokeCircleStr } from "../utils/draw";
6 | import { lightenDarkenColor } from "../utils/colors";
7 | import { transform } from "../utils/animation";
8 | import { FULL_ANGLE } from "../utils/constants";
9 |
10 | export default class DonutChart extends AggregationChart {
11 | constructor(parent, args) {
12 | super(parent, args);
13 | this.type = "donut";
14 | this.initTimeout = 0;
15 | this.init = 1;
16 |
17 | this.setup();
18 | }
19 |
20 | configure(args) {
21 | super.configure(args);
22 | this.mouseMove = this.mouseMove.bind(this);
23 | this.mouseLeave = this.mouseLeave.bind(this);
24 |
25 | this.hoverRadio = args.hoverRadio || 0.1;
26 | this.config.startAngle = args.startAngle || 0;
27 |
28 | this.clockWise = args.clockWise || false;
29 | this.strokeWidth = args.strokeWidth || 30;
30 | }
31 |
32 | calc() {
33 | super.calc();
34 | let s = this.state;
35 | this.radius =
36 | this.height > this.width
37 | ? this.center.x - this.strokeWidth / 2
38 | : this.center.y - this.strokeWidth / 2;
39 |
40 | const { radius, clockWise } = this;
41 |
42 | const prevSlicesProperties = s.slicesProperties || [];
43 | s.sliceStrings = [];
44 | s.slicesProperties = [];
45 | let curAngle = 180 - this.config.startAngle;
46 |
47 | s.sliceTotals.map((total, i) => {
48 | const startAngle = curAngle;
49 | const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
50 | const largeArc = originDiffAngle > 180 ? 1 : 0;
51 | const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
52 | const endAngle = (curAngle = curAngle + diffAngle);
53 | const startPosition = getPositionByAngle(startAngle, radius);
54 | const endPosition = getPositionByAngle(endAngle, radius);
55 |
56 | const prevProperty = this.init && prevSlicesProperties[i];
57 |
58 | let curStart, curEnd;
59 | if (this.init) {
60 | curStart = prevProperty ? prevProperty.startPosition : startPosition;
61 | curEnd = prevProperty ? prevProperty.endPosition : startPosition;
62 | } else {
63 | curStart = startPosition;
64 | curEnd = endPosition;
65 | }
66 | const curPath =
67 | originDiffAngle === 360
68 | ? makeStrokeCircleStr(
69 | curStart,
70 | curEnd,
71 | this.center,
72 | this.radius,
73 | this.clockWise,
74 | largeArc
75 | )
76 | : makeArcStrokePathStr(
77 | curStart,
78 | curEnd,
79 | this.center,
80 | this.radius,
81 | this.clockWise,
82 | largeArc
83 | );
84 |
85 | s.sliceStrings.push(curPath);
86 | s.slicesProperties.push({
87 | startPosition,
88 | endPosition,
89 | value: total,
90 | total: s.grandTotal,
91 | startAngle,
92 | endAngle,
93 | angle: diffAngle,
94 | });
95 | });
96 | this.init = 0;
97 | }
98 |
99 | setupComponents() {
100 | let s = this.state;
101 |
102 | let componentConfigs = [
103 | [
104 | "donutSlices",
105 | {},
106 | function () {
107 | return {
108 | sliceStrings: s.sliceStrings,
109 | colors: this.colors,
110 | strokeWidth: this.strokeWidth,
111 | };
112 | }.bind(this),
113 | ],
114 | ];
115 |
116 | this.components = new Map(
117 | componentConfigs.map((args) => {
118 | let component = getComponent(...args);
119 | return [args[0], component];
120 | })
121 | );
122 | }
123 |
124 | calTranslateByAngle(property) {
125 | const { radius, hoverRadio } = this;
126 | const position = getPositionByAngle(
127 | property.startAngle + property.angle / 2,
128 | radius
129 | );
130 | return `translate3d(${position.x * hoverRadio}px,${
131 | position.y * hoverRadio
132 | }px,0)`;
133 | }
134 |
135 | hoverSlice(path, i, flag, e) {
136 | if (!path) return;
137 | const color = this.colors[i];
138 | if (flag) {
139 | transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
140 | path.style.stroke = lightenDarkenColor(color, 50);
141 | let g_off = getOffset(this.svg);
142 | let x = e.pageX - g_off.left + 10;
143 | let y = e.pageY - g_off.top - 10;
144 | let title =
145 | (this.formatted_labels && this.formatted_labels.length > 0
146 | ? this.formatted_labels[i]
147 | : this.state.labels[i]) + ": ";
148 | let percent = (
149 | (this.state.sliceTotals[i] * 100) /
150 | this.state.grandTotal
151 | ).toFixed(1);
152 | this.tip.setValues(x, y, { name: title, value: percent + "%" });
153 | this.tip.showTip();
154 | } else {
155 | transform(path, "translate3d(0,0,0)");
156 | this.tip.hideTip();
157 | path.style.stroke = color;
158 | }
159 | }
160 |
161 | bindTooltip() {
162 | this.container.addEventListener("mousemove", this.mouseMove);
163 | this.container.addEventListener("mouseleave", this.mouseLeave);
164 | }
165 |
166 | mouseMove(e) {
167 | const target = e.target;
168 | let slices = this.components.get("donutSlices").store;
169 | let prevIndex = this.curActiveSliceIndex;
170 | let prevAcitve = this.curActiveSlice;
171 | if (slices.includes(target)) {
172 | let i = slices.indexOf(target);
173 | this.hoverSlice(prevAcitve, prevIndex, false);
174 | this.curActiveSlice = target;
175 | this.curActiveSliceIndex = i;
176 | this.hoverSlice(target, i, true, e);
177 | } else {
178 | this.mouseLeave();
179 | }
180 | }
181 |
182 | mouseLeave() {
183 | this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
184 | }
185 | }
186 |
--------------------------------------------------------------------------------
/src/js/charts/Heatmap.js:
--------------------------------------------------------------------------------
1 | import BaseChart from "./BaseChart";
2 | import { getComponent } from "../objects/ChartComponents";
3 | import { makeText, heatSquare } from "../utils/draw";
4 | import {
5 | DAY_NAMES_SHORT,
6 | toMidnightUTC,
7 | addDays,
8 | areInSameMonth,
9 | getLastDateInMonth,
10 | setDayToSunday,
11 | getYyyyMmDd,
12 | getWeeksBetween,
13 | getMonthName,
14 | clone,
15 | NO_OF_MILLIS,
16 | NO_OF_YEAR_MONTHS,
17 | NO_OF_DAYS_IN_WEEK,
18 | } from "../utils/date-utils";
19 | import { calcDistribution, getMaxCheckpoint } from "../utils/intervals";
20 | import {
21 | getExtraHeight,
22 | getExtraWidth,
23 | HEATMAP_DISTRIBUTION_SIZE,
24 | HEATMAP_SQUARE_SIZE,
25 | HEATMAP_GUTTER_SIZE,
26 | } from "../utils/constants";
27 |
28 | const COL_WIDTH = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
29 | const ROW_HEIGHT = COL_WIDTH;
30 | // const DAY_INCR = 1;
31 |
32 | export default class Heatmap extends BaseChart {
33 | constructor(parent, options) {
34 | super(parent, options);
35 | this.type = "heatmap";
36 |
37 | this.countLabel = options.countLabel || "";
38 |
39 | let validStarts = ["Sunday", "Monday"];
40 | let startSubDomain = validStarts.includes(options.startSubDomain)
41 | ? options.startSubDomain
42 | : "Sunday";
43 | this.startSubDomainIndex = validStarts.indexOf(startSubDomain);
44 |
45 | this.setup();
46 | }
47 |
48 | setMeasures(options) {
49 | let m = this.measures;
50 | this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
51 |
52 | m.paddings.top = ROW_HEIGHT * 3;
53 | m.paddings.bottom = 0;
54 | m.legendHeight = ROW_HEIGHT * 2;
55 | m.baseHeight = ROW_HEIGHT * NO_OF_DAYS_IN_WEEK + getExtraHeight(m);
56 |
57 | let d = this.data;
58 | let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
59 | this.independentWidth =
60 | (getWeeksBetween(d.start, d.end) + spacing) * COL_WIDTH +
61 | getExtraWidth(m);
62 | }
63 |
64 | updateWidth() {
65 | let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
66 | let noOfWeeks = this.state.noOfWeeks ? this.state.noOfWeeks : 52;
67 | this.baseWidth =
68 | (noOfWeeks + spacing) * COL_WIDTH + getExtraWidth(this.measures);
69 | }
70 |
71 | prepareData(data = this.data) {
72 | if (data.start && data.end && data.start > data.end) {
73 | throw new Error("Start date cannot be greater than end date.");
74 | }
75 |
76 | if (!data.start) {
77 | data.start = new Date();
78 | data.start.setFullYear(data.start.getFullYear() - 1);
79 | }
80 | data.start = toMidnightUTC(data.start);
81 |
82 | if (!data.end) {
83 | data.end = new Date();
84 | }
85 | data.end = toMidnightUTC(data.end);
86 |
87 | data.dataPoints = data.dataPoints || {};
88 |
89 | if (parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
90 | let points = {};
91 | Object.keys(data.dataPoints).forEach((timestampSec) => {
92 | let date = new Date(timestampSec * NO_OF_MILLIS);
93 | points[getYyyyMmDd(date)] = data.dataPoints[timestampSec];
94 | });
95 | data.dataPoints = points;
96 | }
97 |
98 | return data;
99 | }
100 |
101 | calc() {
102 | let s = this.state;
103 |
104 | s.start = clone(this.data.start);
105 | s.end = clone(this.data.end);
106 |
107 | s.firstWeekStart = clone(s.start);
108 | s.noOfWeeks = getWeeksBetween(s.start, s.end);
109 | s.distribution = calcDistribution(
110 | Object.values(this.data.dataPoints),
111 | HEATMAP_DISTRIBUTION_SIZE
112 | );
113 |
114 | s.domainConfigs = this.getDomains();
115 | }
116 |
117 | setupComponents() {
118 | let s = this.state;
119 | let lessCol = this.discreteDomains ? 0 : 1;
120 |
121 | let componentConfigs = s.domainConfigs.map((config, i) => [
122 | "heatDomain",
123 | {
124 | index: config.index,
125 | colWidth: COL_WIDTH,
126 | rowHeight: ROW_HEIGHT,
127 | squareSize: HEATMAP_SQUARE_SIZE,
128 | radius: this.rawChartArgs.radius || 0,
129 | xTranslate:
130 | s.domainConfigs
131 | .filter((config, j) => j < i)
132 | .map((config) => config.cols.length - lessCol)
133 | .reduce((a, b) => a + b, 0) * COL_WIDTH,
134 | },
135 | function () {
136 | return s.domainConfigs[i];
137 | }.bind(this),
138 | ]);
139 |
140 | this.components = new Map(
141 | componentConfigs.map((args, i) => {
142 | let component = getComponent(...args);
143 | return [args[0] + "-" + i, component];
144 | })
145 | );
146 |
147 | let y = 0;
148 | DAY_NAMES_SHORT.forEach((dayName, i) => {
149 | if ([1, 3, 5].includes(i)) {
150 | let dayText = makeText("subdomain-name", -COL_WIDTH / 2, y, dayName, {
151 | fontSize: HEATMAP_SQUARE_SIZE,
152 | dy: 8,
153 | textAnchor: "end",
154 | });
155 | this.drawArea.appendChild(dayText);
156 | }
157 | y += ROW_HEIGHT;
158 | });
159 | }
160 |
161 | update(data) {
162 | if (!data) {
163 | console.error("No data to update.");
164 | }
165 |
166 | this.data = this.prepareData(data);
167 | this.draw();
168 | this.bindTooltip();
169 | }
170 |
171 | bindTooltip() {
172 | this.container.addEventListener("mousemove", (e) => {
173 | this.components.forEach((comp) => {
174 | let daySquares = comp.store;
175 | let daySquare = e.target;
176 | if (daySquares.includes(daySquare)) {
177 | let count = daySquare.getAttribute("data-value");
178 | let dateParts = daySquare.getAttribute("data-date").split("-");
179 |
180 | let month = getMonthName(parseInt(dateParts[1]) - 1, true);
181 |
182 | let gOff = this.container.getBoundingClientRect(),
183 | pOff = daySquare.getBoundingClientRect();
184 |
185 | let width = parseInt(e.target.getAttribute("width"));
186 | let x = pOff.left - gOff.left + width / 2;
187 | let y = pOff.top - gOff.top;
188 | let value = count + " " + this.countLabel;
189 | let name = " on " + month + " " + dateParts[0] + ", " + dateParts[2];
190 |
191 | this.tip.setValues(
192 | x,
193 | y,
194 | { name: name, value: value, valueFirst: 1 },
195 | []
196 | );
197 | this.tip.showTip();
198 | }
199 | });
200 | });
201 | }
202 |
203 | renderLegend() {
204 | this.legendArea.textContent = "";
205 | let x = 0;
206 | let y = ROW_HEIGHT;
207 | let radius = this.rawChartArgs.radius || 0;
208 |
209 | let lessText = makeText("subdomain-name", x, y, "Less", {
210 | fontSize: HEATMAP_SQUARE_SIZE + 1,
211 | dy: 9,
212 | });
213 | x = COL_WIDTH * 2 + COL_WIDTH / 2;
214 | this.legendArea.appendChild(lessText);
215 |
216 | this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => {
217 | const square = heatSquare(
218 | "heatmap-legend-unit",
219 | x + (COL_WIDTH + 3) * i,
220 | y,
221 | HEATMAP_SQUARE_SIZE,
222 | radius,
223 | color
224 | );
225 | this.legendArea.appendChild(square);
226 | });
227 |
228 | let moreTextX =
229 | x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH / 4;
230 | let moreText = makeText("subdomain-name", moreTextX, y, "More", {
231 | fontSize: HEATMAP_SQUARE_SIZE + 1,
232 | dy: 9,
233 | });
234 | this.legendArea.appendChild(moreText);
235 | }
236 |
237 | getDomains() {
238 | let s = this.state;
239 | const [startMonth, startYear] = [s.start.getMonth(), s.start.getFullYear()];
240 | const [endMonth, endYear] = [s.end.getMonth(), s.end.getFullYear()];
241 |
242 | const noOfMonths = endMonth - startMonth + 1 + (endYear - startYear) * 12;
243 |
244 | let domainConfigs = [];
245 |
246 | let startOfMonth = clone(s.start);
247 | for (var i = 0; i < noOfMonths; i++) {
248 | let endDate = s.end;
249 | if (!areInSameMonth(startOfMonth, s.end)) {
250 | let [month, year] = [
251 | startOfMonth.getMonth(),
252 | startOfMonth.getFullYear(),
253 | ];
254 | endDate = getLastDateInMonth(month, year);
255 | }
256 | domainConfigs.push(this.getDomainConfig(startOfMonth, endDate));
257 |
258 | addDays(endDate, 1);
259 | startOfMonth = endDate;
260 | }
261 |
262 | return domainConfigs;
263 | }
264 |
265 | getDomainConfig(startDate, endDate = "") {
266 | let [month, year] = [startDate.getMonth(), startDate.getFullYear()];
267 | let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
268 | endDate = endDate
269 | ? clone(endDate)
270 | : toMidnightUTC(getLastDateInMonth(month, year));
271 |
272 | let domainConfig = {
273 | index: month,
274 | cols: [],
275 | };
276 |
277 | addDays(endDate, 1);
278 | let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate);
279 |
280 | let cols = [],
281 | col;
282 | for (var i = 0; i < noOfMonthWeeks; i++) {
283 | col = this.getCol(startOfWeek, month);
284 | cols.push(col);
285 |
286 | startOfWeek = toMidnightUTC(
287 | new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd)
288 | );
289 | addDays(startOfWeek, 1);
290 | }
291 |
292 | if (col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) {
293 | addDays(startOfWeek, 1);
294 | cols.push(this.getCol(startOfWeek, month, true));
295 | }
296 |
297 | domainConfig.cols = cols;
298 |
299 | return domainConfig;
300 | }
301 |
302 | getCol(startDate, month, empty = false) {
303 | let s = this.state;
304 |
305 | // startDate is the start of week
306 | let currentDate = clone(startDate);
307 | let col = [];
308 |
309 | for (var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
310 | let config = {};
311 |
312 | // Non-generic adjustment for entire heatmap, needs state
313 | let currentDateWithinData =
314 | currentDate >= s.start && currentDate <= s.end;
315 |
316 | if (empty || currentDate.getMonth() !== month || !currentDateWithinData) {
317 | config.yyyyMmDd = getYyyyMmDd(currentDate);
318 | } else {
319 | config = this.getSubDomainConfig(currentDate);
320 | }
321 | col.push(config);
322 | }
323 |
324 | return col;
325 | }
326 |
327 | getSubDomainConfig(date) {
328 | let yyyyMmDd = getYyyyMmDd(date);
329 | let dataValue = this.data.dataPoints[yyyyMmDd];
330 | let config = {
331 | yyyyMmDd: yyyyMmDd,
332 | dataValue: dataValue || 0,
333 | fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)],
334 | };
335 | return config;
336 | }
337 | }
338 |
--------------------------------------------------------------------------------
/src/js/charts/PercentageChart.js:
--------------------------------------------------------------------------------
1 | import AggregationChart from "./AggregationChart";
2 | import { getOffset } from "../utils/dom";
3 | import { getComponent } from "../objects/ChartComponents";
4 | import { PERCENTAGE_BAR_DEFAULT_HEIGHT } from "../utils/constants";
5 |
6 | export default class PercentageChart extends AggregationChart {
7 | constructor(parent, args) {
8 | super(parent, args);
9 | this.type = "percentage";
10 | this.setup();
11 | }
12 |
13 | setMeasures(options) {
14 | let m = this.measures;
15 | this.barOptions = options.barOptions || {};
16 |
17 | let b = this.barOptions;
18 | b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
19 |
20 | m.paddings.right = 30;
21 | m.legendHeight = 60;
22 | m.baseHeight = (b.height + b.depth * 0.5) * 8;
23 | }
24 |
25 | setupComponents() {
26 | let s = this.state;
27 |
28 | let componentConfigs = [
29 | [
30 | "percentageBars",
31 | {
32 | barHeight: this.barOptions.height,
33 | },
34 | function () {
35 | return {
36 | xPositions: s.xPositions,
37 | widths: s.widths,
38 | colors: this.colors,
39 | };
40 | }.bind(this),
41 | ],
42 | ];
43 |
44 | this.components = new Map(
45 | componentConfigs.map((args) => {
46 | let component = getComponent(...args);
47 | return [args[0], component];
48 | })
49 | );
50 | }
51 |
52 | calc() {
53 | super.calc();
54 | let s = this.state;
55 |
56 | s.xPositions = [];
57 | s.widths = [];
58 |
59 | let xPos = 0;
60 | s.sliceTotals.map((value) => {
61 | let width = (this.width * value) / s.grandTotal;
62 | s.widths.push(width);
63 | s.xPositions.push(xPos);
64 | xPos += width;
65 | });
66 | }
67 |
68 | makeDataByIndex() {}
69 |
70 | bindTooltip() {
71 | let s = this.state;
72 | this.container.addEventListener("mousemove", (e) => {
73 | let bars = this.components.get("percentageBars").store;
74 | let bar = e.target;
75 | if (bars.includes(bar)) {
76 | let i = bars.indexOf(bar);
77 | let gOff = getOffset(this.container),
78 | pOff = getOffset(bar);
79 |
80 | let x = pOff.left - gOff.left + parseInt(bar.getAttribute("width")) / 2;
81 | let y = pOff.top - gOff.top;
82 | let title =
83 | (this.formattedLabels && this.formattedLabels.length > 0
84 | ? this.formattedLabels[i]
85 | : this.state.labels[i]) + ": ";
86 | let fraction = s.sliceTotals[i] / s.grandTotal;
87 |
88 | this.tip.setValues(x, y, {
89 | name: title,
90 | value: (fraction * 100).toFixed(1) + "%",
91 | });
92 | this.tip.showTip();
93 | }
94 | });
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/src/js/charts/PieChart.js:
--------------------------------------------------------------------------------
1 | import AggregationChart from "./AggregationChart";
2 | import { getComponent } from "../objects/ChartComponents";
3 | import { getOffset, fire } from "../utils/dom";
4 | import { getPositionByAngle } from "../utils/helpers";
5 | import { makeArcPathStr, makeCircleStr } from "../utils/draw";
6 | import { lightenDarkenColor } from "../utils/colors";
7 | import { transform } from "../utils/animation";
8 | import { FULL_ANGLE } from "../utils/constants";
9 |
10 | export default class PieChart extends AggregationChart {
11 | constructor(parent, args) {
12 | super(parent, args);
13 | this.type = "pie";
14 | this.initTimeout = 0;
15 | this.init = 1;
16 |
17 | this.setup();
18 | }
19 |
20 | configure(args) {
21 | super.configure(args);
22 | this.mouseMove = this.mouseMove.bind(this);
23 | this.mouseLeave = this.mouseLeave.bind(this);
24 |
25 | this.hoverRadio = args.hoverRadio || 0.1;
26 | this.config.startAngle = args.startAngle || 0;
27 |
28 | this.clockWise = args.clockWise || false;
29 | }
30 |
31 | calc() {
32 | super.calc();
33 | let s = this.state;
34 | this.radius = this.height > this.width ? this.center.x : this.center.y;
35 |
36 | const { radius, clockWise } = this;
37 |
38 | const prevSlicesProperties = s.slicesProperties || [];
39 | s.sliceStrings = [];
40 | s.slicesProperties = [];
41 | let curAngle = 180 - this.config.startAngle;
42 |
43 | s.sliceTotals.map((total, i) => {
44 | const startAngle = curAngle;
45 | const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
46 | const largeArc = originDiffAngle > 180 ? 1 : 0;
47 | const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
48 | const endAngle = (curAngle = curAngle + diffAngle);
49 | const startPosition = getPositionByAngle(startAngle, radius);
50 | const endPosition = getPositionByAngle(endAngle, radius);
51 |
52 | const prevProperty = this.init && prevSlicesProperties[i];
53 |
54 | let curStart, curEnd;
55 | if (this.init) {
56 | curStart = prevProperty ? prevProperty.startPosition : startPosition;
57 | curEnd = prevProperty ? prevProperty.endPosition : startPosition;
58 | } else {
59 | curStart = startPosition;
60 | curEnd = endPosition;
61 | }
62 | const curPath =
63 | originDiffAngle === 360
64 | ? makeCircleStr(
65 | curStart,
66 | curEnd,
67 | this.center,
68 | this.radius,
69 | clockWise,
70 | largeArc
71 | )
72 | : makeArcPathStr(
73 | curStart,
74 | curEnd,
75 | this.center,
76 | this.radius,
77 | clockWise,
78 | largeArc
79 | );
80 |
81 | s.sliceStrings.push(curPath);
82 | s.slicesProperties.push({
83 | startPosition,
84 | endPosition,
85 | value: total,
86 | total: s.grandTotal,
87 | startAngle,
88 | endAngle,
89 | angle: diffAngle,
90 | });
91 | });
92 | this.init = 0;
93 | }
94 |
95 | setupComponents() {
96 | let s = this.state;
97 |
98 | let componentConfigs = [
99 | [
100 | "pieSlices",
101 | {},
102 | function () {
103 | return {
104 | sliceStrings: s.sliceStrings,
105 | colors: this.colors,
106 | };
107 | }.bind(this),
108 | ],
109 | ];
110 |
111 | this.components = new Map(
112 | componentConfigs.map((args) => {
113 | let component = getComponent(...args);
114 | return [args[0], component];
115 | })
116 | );
117 | }
118 |
119 | calTranslateByAngle(property) {
120 | const { radius, hoverRadio } = this;
121 | const position = getPositionByAngle(
122 | property.startAngle + property.angle / 2,
123 | radius
124 | );
125 | return `translate3d(${position.x * hoverRadio}px,${
126 | position.y * hoverRadio
127 | }px,0)`;
128 | }
129 |
130 | hoverSlice(path, i, flag, e) {
131 | if (!path) return;
132 | const color = this.colors[i];
133 | if (flag) {
134 | transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
135 | path.style.fill = lightenDarkenColor(color, 50);
136 | let g_off = getOffset(this.svg);
137 | let x = e.pageX - g_off.left + 10;
138 | let y = e.pageY - g_off.top - 10;
139 | let title =
140 | (this.formatted_labels && this.formatted_labels.length > 0
141 | ? this.formatted_labels[i]
142 | : this.state.labels[i]) + ": ";
143 | let percent = (
144 | (this.state.sliceTotals[i] * 100) /
145 | this.state.grandTotal
146 | ).toFixed(1);
147 | this.tip.setValues(x, y, { name: title, value: percent + "%" });
148 | this.tip.showTip();
149 | } else {
150 | transform(path, "translate3d(0,0,0)");
151 | this.tip.hideTip();
152 | path.style.fill = color;
153 | }
154 | }
155 |
156 | bindTooltip() {
157 | this.container.addEventListener("mousemove", this.mouseMove);
158 | this.container.addEventListener("mouseleave", this.mouseLeave);
159 | }
160 | getDataPoint(index = this.state.currentIndex) {
161 | let s = this.state;
162 | let data_point = {
163 | index: index,
164 | label: s.labels[index],
165 | values: s.sliceTotals[index],
166 | };
167 | return data_point;
168 | }
169 | setCurrentDataPoint(index) {
170 | let s = this.state;
171 | index = parseInt(index);
172 | if (index < 0) index = 0;
173 | if (index >= s.labels.length) index = s.labels.length - 1;
174 | if (index === s.currentIndex) return;
175 | s.currentIndex = index;
176 | fire(this.parent, "data-select", this.getDataPoint());
177 | }
178 |
179 | bindUnits() {
180 | const units = this.components.get("pieSlices").store;
181 | if (!units) return;
182 | units.forEach((unit, index) => {
183 | unit.addEventListener("click", () => {
184 | this.setCurrentDataPoint(index);
185 | });
186 | });
187 | }
188 | mouseMove(e) {
189 | const target = e.target;
190 | let slices = this.components.get("pieSlices").store;
191 | let prevIndex = this.curActiveSliceIndex;
192 | let prevAcitve = this.curActiveSlice;
193 | if (slices.includes(target)) {
194 | let i = slices.indexOf(target);
195 | this.hoverSlice(prevAcitve, prevIndex, false);
196 | this.curActiveSlice = target;
197 | this.curActiveSliceIndex = i;
198 | this.hoverSlice(target, i, true, e);
199 | } else {
200 | this.mouseLeave();
201 | }
202 | }
203 |
204 | mouseLeave() {
205 | this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
206 | }
207 | }
208 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import * as Charts from "./chart";
2 |
3 | let frappe = {};
4 |
5 | frappe.NAME = "Frappe Charts";
6 | frappe.VERSION = "1.6.2";
7 |
8 | frappe = Object.assign({}, frappe, Charts);
9 |
10 | export default frappe;
11 |
--------------------------------------------------------------------------------
/src/js/objects/ChartComponents.js:
--------------------------------------------------------------------------------
1 | import { makeSVGGroup } from "../utils/draw";
2 | import {
3 | makeText,
4 | makePath,
5 | xLine,
6 | yLine,
7 | generateAxisLabel,
8 | yMarker,
9 | yRegion,
10 | datasetBar,
11 | datasetDot,
12 | percentageBar,
13 | getPaths,
14 | heatSquare,
15 | } from "../utils/draw";
16 | import { equilizeNoOfElements } from "../utils/draw-utils";
17 | import {
18 | translateHoriLine,
19 | translateVertLine,
20 | animateRegion,
21 | animateBar,
22 | animateDot,
23 | animatePath,
24 | animatePathStr,
25 | } from "../utils/animate";
26 | import { getMonthName } from "../utils/date-utils";
27 |
28 | class ChartComponent {
29 | constructor({
30 | layerClass = "",
31 | layerTransform = "",
32 | constants,
33 |
34 | getData,
35 | makeElements,
36 | animateElements,
37 | }) {
38 | this.layerTransform = layerTransform;
39 | this.constants = constants;
40 |
41 | this.makeElements = makeElements;
42 | this.getData = getData;
43 |
44 | this.animateElements = animateElements;
45 |
46 | this.store = [];
47 | this.labels = [];
48 |
49 | this.layerClass = layerClass;
50 | this.layerClass =
51 | typeof this.layerClass === "function"
52 | ? this.layerClass()
53 | : this.layerClass;
54 |
55 | this.refresh();
56 | }
57 |
58 | refresh(data) {
59 | this.data = data || this.getData();
60 | }
61 |
62 | setup(parent) {
63 | this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent);
64 | }
65 |
66 | make() {
67 | this.render(this.data);
68 | this.oldData = this.data;
69 | }
70 |
71 | render(data) {
72 | this.store = this.makeElements(data);
73 |
74 | this.layer.textContent = "";
75 | this.store.forEach((element) => {
76 | element.length
77 | ? element.forEach((el) => {
78 | this.layer.appendChild(el);
79 | })
80 | : this.layer.appendChild(element);
81 | });
82 | this.labels.forEach((element) => {
83 | this.layer.appendChild(element);
84 | });
85 | }
86 |
87 | update(animate = true) {
88 | this.refresh();
89 | let animateElements = [];
90 | if (animate) {
91 | animateElements = this.animateElements(this.data) || [];
92 | }
93 | return animateElements;
94 | }
95 | }
96 |
97 | let componentConfigs = {
98 | donutSlices: {
99 | layerClass: "donut-slices",
100 | makeElements(data) {
101 | return data.sliceStrings.map((s, i) => {
102 | let slice = makePath(
103 | s,
104 | "donut-path",
105 | data.colors[i],
106 | "none",
107 | data.strokeWidth
108 | );
109 | slice.style.transition = "transform .3s;";
110 | return slice;
111 | });
112 | },
113 |
114 | animateElements(newData) {
115 | return this.store.map((slice, i) =>
116 | animatePathStr(slice, newData.sliceStrings[i])
117 | );
118 | },
119 | },
120 | pieSlices: {
121 | layerClass: "pie-slices",
122 | makeElements(data) {
123 | return data.sliceStrings.map((s, i) => {
124 | let slice = makePath(s, "pie-path", "none", data.colors[i]);
125 | slice.style.transition = "transform .3s;";
126 | return slice;
127 | });
128 | },
129 |
130 | animateElements(newData) {
131 | return this.store.map((slice, i) =>
132 | animatePathStr(slice, newData.sliceStrings[i])
133 | );
134 | },
135 | },
136 | percentageBars: {
137 | layerClass: "percentage-bars",
138 | makeElements(data) {
139 | const numberOfPoints = data.xPositions.length;
140 | return data.xPositions.map((x, i) => {
141 | let y = 0;
142 |
143 | let isLast = i == numberOfPoints - 1;
144 | let isFirst = i == 0;
145 |
146 | let bar = percentageBar(
147 | x,
148 | y,
149 | data.widths[i],
150 | this.constants.barHeight,
151 | isFirst,
152 | isLast,
153 | data.colors[i]
154 | );
155 | return bar;
156 | });
157 | },
158 |
159 | animateElements(newData) {
160 | if (newData) return [];
161 | },
162 | },
163 | yAxis: {
164 | layerClass: "y axis",
165 | makeElements(data) {
166 | let elements = [];
167 | // will loop through each yaxis dataset if it exists
168 | if (data.length) {
169 | data.forEach((item, i) => {
170 | item.positions.map((position, i) => {
171 | elements.push(
172 | yLine(
173 | position,
174 | item.labels[i],
175 | this.constants.width,
176 | {
177 | mode: this.constants.mode,
178 | pos: item.pos || this.constants.pos,
179 | shortenNumbers:
180 | this.constants.shortenNumbers,
181 | title: item.title,
182 | }
183 | )
184 | );
185 | });
186 | // we need to make yAxis titles if they are defined
187 | if (item.title) {
188 | elements.push(
189 | generateAxisLabel({
190 | title: item.title,
191 | position: item.pos,
192 | height: this.constants.height || data.zeroLine,
193 | width: this.constants.width,
194 | })
195 | );
196 | }
197 | });
198 |
199 | return elements;
200 | }
201 |
202 | data.positions.forEach((position, i) => {
203 | elements.push(
204 | yLine(position, data.labels[i], this.constants.width, {
205 | mode: this.constants.mode,
206 | pos: data.pos || this.constants.pos,
207 | shortenNumbers: this.constants.shortenNumbers,
208 | })
209 | );
210 | });
211 |
212 | if (data.title) {
213 | elements.push(
214 | generateAxisLabel({
215 | title: data.title,
216 | position: data.pos,
217 | height: this.constants.height || data.zeroLine,
218 | width: this.constants.width,
219 | })
220 | );
221 | }
222 |
223 | return elements;
224 | },
225 |
226 | animateElements(newData) {
227 | const animateMultipleElements = (oldData, newData) => {
228 | let newPos = newData.positions;
229 | let newLabels = newData.labels;
230 | let oldPos = oldData.positions;
231 | let oldLabels = oldData.labels;
232 |
233 | [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
234 | [oldLabels, newLabels] = equilizeNoOfElements(
235 | oldLabels,
236 | newLabels
237 | );
238 |
239 | this.render({
240 | positions: oldPos,
241 | labels: newLabels,
242 | });
243 |
244 | return this.store.map((line, i) => {
245 | return translateHoriLine(line, newPos[i], oldPos[i]);
246 | });
247 | };
248 |
249 | // we will need to animate both axis if we have more than one.
250 | // so check if the oldData is an array of values.
251 | if (this.oldData instanceof Array) {
252 | return this.oldData.forEach((old, i) => {
253 | animateMultipleElements(old, newData[i]);
254 | });
255 | }
256 |
257 | let newPos = newData.positions;
258 | let newLabels = newData.labels;
259 | let oldPos = this.oldData.positions;
260 | let oldLabels = this.oldData.labels;
261 |
262 | [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
263 | [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
264 |
265 | this.render({
266 | positions: oldPos,
267 | labels: newLabels,
268 | });
269 |
270 | return this.store.map((line, i) => {
271 | return translateHoriLine(line, newPos[i], oldPos[i]);
272 | });
273 | },
274 | },
275 |
276 | xAxis: {
277 | layerClass: "x axis",
278 | makeElements(data) {
279 | return data.positions.map((position, i) =>
280 | xLine(position, data.calcLabels[i], this.constants.height, {
281 | mode: this.constants.mode,
282 | pos: this.constants.pos,
283 | })
284 | );
285 | },
286 |
287 | animateElements(newData) {
288 | let newPos = newData.positions;
289 | let newLabels = newData.calcLabels;
290 | let oldPos = this.oldData.positions;
291 | let oldLabels = this.oldData.calcLabels;
292 |
293 | [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
294 | [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
295 |
296 | this.render({
297 | positions: oldPos,
298 | calcLabels: newLabels,
299 | });
300 |
301 | return this.store.map((line, i) => {
302 | return translateVertLine(line, newPos[i], oldPos[i]);
303 | });
304 | },
305 | },
306 |
307 | yMarkers: {
308 | layerClass: "y-markers",
309 | makeElements(data) {
310 | return data.map((m) =>
311 | yMarker(m.position, m.label, this.constants.width, {
312 | labelPos: m.options.labelPos,
313 | stroke: m.options.stroke,
314 | mode: "span",
315 | lineType: m.options.lineType,
316 | })
317 | );
318 | },
319 | animateElements(newData) {
320 | [this.oldData, newData] = equilizeNoOfElements(
321 | this.oldData,
322 | newData
323 | );
324 |
325 | let newPos = newData.map((d) => d.position);
326 | let newLabels = newData.map((d) => d.label);
327 | let newOptions = newData.map((d) => d.options);
328 |
329 | let oldPos = this.oldData.map((d) => d.position);
330 |
331 | this.render(
332 | oldPos.map((pos, i) => {
333 | return {
334 | position: oldPos[i],
335 | label: newLabels[i],
336 | options: newOptions[i],
337 | };
338 | })
339 | );
340 |
341 | return this.store.map((line, i) => {
342 | return translateHoriLine(line, newPos[i], oldPos[i]);
343 | });
344 | },
345 | },
346 |
347 | yRegions: {
348 | layerClass: "y-regions",
349 | makeElements(data) {
350 | return data.map((r) =>
351 | yRegion(r.startPos, r.endPos, this.constants.width, r.label, {
352 | labelPos: r.options.labelPos,
353 | })
354 | );
355 | },
356 | animateElements(newData) {
357 | [this.oldData, newData] = equilizeNoOfElements(
358 | this.oldData,
359 | newData
360 | );
361 |
362 | let newPos = newData.map((d) => d.endPos);
363 | let newLabels = newData.map((d) => d.label);
364 | let newStarts = newData.map((d) => d.startPos);
365 | let newOptions = newData.map((d) => d.options);
366 |
367 | let oldPos = this.oldData.map((d) => d.endPos);
368 | let oldStarts = this.oldData.map((d) => d.startPos);
369 |
370 | this.render(
371 | oldPos.map((pos, i) => {
372 | return {
373 | startPos: oldStarts[i],
374 | endPos: oldPos[i],
375 | label: newLabels[i],
376 | options: newOptions[i],
377 | };
378 | })
379 | );
380 |
381 | let animateElements = [];
382 |
383 | this.store.map((rectGroup, i) => {
384 | animateElements = animateElements.concat(
385 | animateRegion(rectGroup, newStarts[i], newPos[i], oldPos[i])
386 | );
387 | });
388 |
389 | return animateElements;
390 | },
391 | },
392 |
393 | heatDomain: {
394 | layerClass: function () {
395 | return "heat-domain domain-" + this.constants.index;
396 | },
397 | makeElements(data) {
398 | let { index, colWidth, rowHeight, squareSize, radius, xTranslate } =
399 | this.constants;
400 | let monthNameHeight = -12;
401 | let x = xTranslate,
402 | y = 0;
403 |
404 | this.serializedSubDomains = [];
405 |
406 | data.cols.map((week, weekNo) => {
407 | if (weekNo === 1) {
408 | this.labels.push(
409 | makeText(
410 | "domain-name",
411 | x,
412 | monthNameHeight,
413 | getMonthName(index, true).toUpperCase(),
414 | {
415 | fontSize: 9,
416 | }
417 | )
418 | );
419 | }
420 | week.map((day, i) => {
421 | if (day.fill) {
422 | let data = {
423 | "data-date": day.yyyyMmDd,
424 | "data-value": day.dataValue,
425 | "data-day": i,
426 | };
427 | let square = heatSquare(
428 | "day",
429 | x,
430 | y,
431 | squareSize,
432 | radius,
433 | day.fill,
434 | data
435 | );
436 | this.serializedSubDomains.push(square);
437 | }
438 | y += rowHeight;
439 | });
440 | y = 0;
441 | x += colWidth;
442 | });
443 |
444 | return this.serializedSubDomains;
445 | },
446 |
447 | animateElements(newData) {
448 | if (newData) return [];
449 | },
450 | },
451 |
452 | barGraph: {
453 | layerClass: function () {
454 | return "dataset-units dataset-bars dataset-" + this.constants.index;
455 | },
456 | makeElements(data) {
457 | let c = this.constants;
458 | this.unitType = "bar";
459 | this.units = data.yPositions.map((y, j) => {
460 | return datasetBar(
461 | data.xPositions[j],
462 | y,
463 | data.barWidth,
464 | c.color,
465 | data.labels[j],
466 | j,
467 | data.offsets[j],
468 | {
469 | zeroLine: data.zeroLine,
470 | barsWidth: data.barsWidth,
471 | minHeight: c.minHeight,
472 | }
473 | );
474 | });
475 | return this.units;
476 | },
477 | animateElements(newData) {
478 | let newXPos = newData.xPositions;
479 | let newYPos = newData.yPositions;
480 | let newOffsets = newData.offsets;
481 | let newLabels = newData.labels;
482 |
483 | let oldXPos = this.oldData.xPositions;
484 | let oldYPos = this.oldData.yPositions;
485 | let oldOffsets = this.oldData.offsets;
486 | let oldLabels = this.oldData.labels;
487 |
488 | [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
489 | [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
490 | [oldOffsets, newOffsets] = equilizeNoOfElements(
491 | oldOffsets,
492 | newOffsets
493 | );
494 | [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
495 |
496 | this.render({
497 | xPositions: oldXPos,
498 | yPositions: oldYPos,
499 | offsets: oldOffsets,
500 | labels: newLabels,
501 |
502 | zeroLine: this.oldData.zeroLine,
503 | barsWidth: this.oldData.barsWidth,
504 | barWidth: this.oldData.barWidth,
505 | });
506 |
507 | let animateElements = [];
508 |
509 | this.store.map((bar, i) => {
510 | animateElements = animateElements.concat(
511 | animateBar(
512 | bar,
513 | newXPos[i],
514 | newYPos[i],
515 | newData.barWidth,
516 | newOffsets[i],
517 | { zeroLine: newData.zeroLine }
518 | )
519 | );
520 | });
521 |
522 | return animateElements;
523 | },
524 | },
525 |
526 | lineGraph: {
527 | layerClass: function () {
528 | return "dataset-units dataset-line dataset-" + this.constants.index;
529 | },
530 | makeElements(data) {
531 | let c = this.constants;
532 | this.unitType = "dot";
533 | this.paths = {};
534 | if (!c.hideLine) {
535 | this.paths = getPaths(
536 | data.xPositions,
537 | data.yPositions,
538 | c.color,
539 | {
540 | heatline: c.heatline,
541 | regionFill: c.regionFill,
542 | spline: c.spline,
543 | },
544 | {
545 | svgDefs: c.svgDefs,
546 | zeroLine: data.zeroLine,
547 | }
548 | );
549 | }
550 |
551 | this.units = [];
552 | if (!c.hideDots) {
553 | this.units = data.yPositions.map((y, j) => {
554 | return datasetDot(
555 | data.xPositions[j],
556 | y,
557 | data.radius,
558 | c.color,
559 | c.valuesOverPoints ? data.values[j] : "",
560 | j
561 | );
562 | });
563 | }
564 |
565 | return Object.values(this.paths).concat(this.units);
566 | },
567 | animateElements(newData) {
568 | let newXPos = newData.xPositions;
569 | let newYPos = newData.yPositions;
570 | let newValues = newData.values;
571 |
572 | let oldXPos = this.oldData.xPositions;
573 | let oldYPos = this.oldData.yPositions;
574 | let oldValues = this.oldData.values;
575 |
576 | [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
577 | [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
578 | [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);
579 |
580 | this.render({
581 | xPositions: oldXPos,
582 | yPositions: oldYPos,
583 | values: newValues,
584 |
585 | zeroLine: this.oldData.zeroLine,
586 | radius: this.oldData.radius,
587 | });
588 |
589 | let animateElements = [];
590 |
591 | if (Object.keys(this.paths).length) {
592 | animateElements = animateElements.concat(
593 | animatePath(
594 | this.paths,
595 | newXPos,
596 | newYPos,
597 | newData.zeroLine,
598 | this.constants.spline
599 | )
600 | );
601 | }
602 |
603 | if (this.units.length) {
604 | this.units.map((dot, i) => {
605 | animateElements = animateElements.concat(
606 | animateDot(dot, newXPos[i], newYPos[i])
607 | );
608 | });
609 | }
610 |
611 | return animateElements;
612 | },
613 | },
614 | };
615 |
616 | export function getComponent(name, constants, getData) {
617 | let keys = Object.keys(componentConfigs).filter((k) => name.includes(k));
618 | let config = componentConfigs[keys[0]];
619 | Object.assign(config, {
620 | constants: constants,
621 | getData: getData,
622 | });
623 | return new ChartComponent(config);
624 | }
625 |
--------------------------------------------------------------------------------
/src/js/objects/SvgTip.js:
--------------------------------------------------------------------------------
1 | import { $ } from "../utils/dom";
2 | import { TOOLTIP_POINTER_TRIANGLE_HEIGHT } from "../utils/constants";
3 |
4 | export default class SvgTip {
5 | constructor({ parent = null, colors = [] }) {
6 | this.parent = parent;
7 | this.colors = colors;
8 | this.titleName = "";
9 | this.titleValue = "";
10 | this.listValues = [];
11 | this.titleValueFirst = 0;
12 |
13 | this.x = 0;
14 | this.y = 0;
15 |
16 | this.top = 0;
17 | this.left = 0;
18 |
19 | this.setup();
20 | }
21 |
22 | setup() {
23 | this.makeTooltip();
24 | }
25 |
26 | refresh() {
27 | this.fill();
28 | this.calcPosition();
29 | }
30 |
31 | makeTooltip() {
32 | this.container = $.create("div", {
33 | inside: this.parent,
34 | className: "graph-svg-tip comparison",
35 | innerHTML: `
`,
38 | });
39 | this.hideTip();
40 |
41 | this.title = this.container.querySelector(".title");
42 | this.list = this.container.querySelector(".data-point-list");
43 | this.dataPointList = this.container.querySelector(".data-point-list");
44 |
45 | this.parent.addEventListener("mouseleave", () => {
46 | this.hideTip();
47 | });
48 | }
49 |
50 | fill() {
51 | let title;
52 | if (this.index) {
53 | this.container.setAttribute("data-point-index", this.index);
54 | }
55 | if (this.titleValueFirst) {
56 | title = `${this.titleValue} ${this.titleName}`;
57 | } else {
58 | title = `${this.titleName}${this.titleValue} `;
59 | }
60 |
61 | if (this.listValues.length > 4) {
62 | this.list.classList.add("tooltip-grid");
63 | } else {
64 | this.list.classList.remove("tooltip-grid");
65 | }
66 |
67 | this.title.innerHTML = title;
68 | this.dataPointList.innerHTML = "";
69 |
70 | this.listValues.map((set, i) => {
71 | const color = this.colors[i] || "black";
72 | let value =
73 | set.formatted === 0 || set.formatted ? set.formatted : set.value;
74 | let li = $.create("li", {
75 | innerHTML: `
76 |
77 |
${value === 0 || value ? value : ""}
78 |
${set.title ? set.title : ""}
79 |
15 |
16 | 
107 | 
129 |