jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

chore: formatting changes

Browse Source
This commit is contained in:
Arjun Choudhary 2022-11-24 12:54:27 +05:30
parent d4e78ebb05
commit f2262fac43
32 changed files with 4371 additions and 3913 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.babelrc
View File

@ -1,10 +1,13 @@
{ {
"presets": [ "presets": [
["@babel/preset-env", { [
"targets": { "@babel/preset-env",
"browsers": ["last 2 versions", "safari >= 7"] {
}, "targets": {
"modules": false "browsers": ["last 2 versions", "safari >= 7"]
}] },
] "modules": false
}
]
]
} }

53
.eslintrc.json
View File

@ -1,33 +1,24 @@
{ {
"env": { "env": {
"browser": true, "browser": true,
"es6": true "es6": true
}, },
"extends": "eslint:recommended", "extends": "eslint:recommended",
"parserOptions": { "parserOptions": {
"sourceType": "module" "sourceType": "module"
}, },
"rules": { "rules": {
"indent": [ "indent": ["error", "tab"],
"error", "linebreak-style": ["error", "unix"],
"tab" "semi": ["error", "always"],
], "no-console": [
"linebreak-style": [ "error",
"error", {
"unix" "allow": ["warn", "error"]
], }
"semi": [ ]
"error", },
"always" "globals": {
], "ENV": true
"no-console": [ }
"error",
{
"allow": ["warn", "error"]
}
]
},
"globals": {
"ENV": true
}
} }

2
.travis.yml
View File

@ -11,4 +11,4 @@ script:
- make test - make test
after_success: after_success:
- make coveralls - make coveralls

70
rollup.config.js
View File

@ -8,40 +8,40 @@ import bundleSize from "rollup-plugin-bundle-size";
import { terser } from "rollup-plugin-terser"; import { terser } from "rollup-plugin-terser";
export default [ export default [
// browser-friendly UMD build // browser-friendly UMD build
{ {
input: "src/js/index.js", input: "src/js/index.js",
output: { output: {
sourcemap: true, sourcemap: true,
name: "frappe", name: "frappe",
file: pkg.browser, file: pkg.browser,
format: "umd", format: "umd",
}, },
plugins: [ plugins: [
commonjs(), commonjs(),
babel({ babel({
exclude: ["node_modules/**"], exclude: ["node_modules/**"],
}), }),
terser(), terser(),
scss({ output: "dist/frappe-charts.min.css" }), scss({ output: "dist/frappe-charts.min.css" }),
bundleSize(), bundleSize(),
], ],
}, },
// CommonJS (for Node) and ES module (for bundlers) build. // CommonJS (for Node) and ES module (for bundlers) build.
{ {
input: "src/js/chart.js", input: "src/js/chart.js",
output: [ output: [
{ file: pkg.common, format: "cjs", sourcemap: true }, { file: pkg.common, format: "cjs", sourcemap: true },
{ file: pkg.module, format: "es", sourcemap: true }, { file: pkg.module, format: "es", sourcemap: true },
], ],
plugins: [ plugins: [
babel({ babel({
exclude: ["node_modules/**"], exclude: ["node_modules/**"],
}), }),
terser(), terser(),
postcss(), postcss(),
bundleSize(), bundleSize(),
], ],
}, },
]; ];

306
src/css/charts.scss
View File

@ -1,191 +1,191 @@
:root { :root {
--charts-label-color: #313b44; --charts-label-color: #313b44;
--charts-axis-line-color: #f4f5f6; --charts-axis-line-color: #f4f5f6;
--charts-tooltip-title: var(--charts-label-color); --charts-tooltip-title: var(--charts-label-color);
--charts-tooltip-label: var(--charts-label-color); --charts-tooltip-label: var(--charts-label-color);
--charts-tooltip-value: #192734; --charts-tooltip-value: #192734;
--charts-tooltip-bg: #ffffff; --charts-tooltip-bg: #ffffff;
--charts-stroke-width: 2px; --charts-stroke-width: 2px;
--charts-dataset-circle-stroke: #ffffff; --charts-dataset-circle-stroke: #ffffff;
--charts-dataset-circle-stroke-width: var(--charts-stroke-width); --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
--charts-legend-label: var(--charts-label-color); --charts-legend-label: var(--charts-label-color);
--charts-legend-value: var(--charts-label-color); --charts-legend-value: var(--charts-label-color);
} }
.chart-container { .chart-container {
position: relative; position: relative;
/* for absolutely positioned tooltip */ /* for absolutely positioned tooltip */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
"Helvetica Neue", sans-serif; sans-serif;
.axis, .axis,
.chart-label { .chart-label {
fill: var(--charts-label-color); fill: var(--charts-label-color);
line { line {
stroke: var(--charts-axis-line-color); stroke: var(--charts-axis-line-color);
} }
} }
.dataset-units { .dataset-units {
circle { circle {
stroke: var(--charts-dataset-circle-stroke); stroke: var(--charts-dataset-circle-stroke);
stroke-width: var(--charts-dataset-circle-stroke-width); stroke-width: var(--charts-dataset-circle-stroke-width);
} }
path { path {
fill: none; fill: none;
stroke-opacity: 1; stroke-opacity: 1;
stroke-width: var(--charts-stroke-width); stroke-width: var(--charts-stroke-width);
} }
} }
.dataset-path { .dataset-path {
stroke-width: var(--charts-stroke-width); stroke-width: var(--charts-stroke-width);
} }
.path-group { .path-group {
path { path {
fill: none; fill: none;
stroke-opacity: 1; stroke-opacity: 1;
stroke-width: var(--charts-stroke-width); stroke-width: var(--charts-stroke-width);
} }
} }
line.dashed { line.dashed {
stroke-dasharray: 5, 3; stroke-dasharray: 5, 3;
} }
.axis-line { .axis-line {
.specific-value { .specific-value {
text-anchor: start; text-anchor: start;
} }
.y-line { .y-line {
text-anchor: end; text-anchor: end;
} }
.x-line { .x-line {
text-anchor: middle; text-anchor: middle;
} }
} }
.legend-dataset-label { .legend-dataset-label {
fill: var(--charts-legend-label); fill: var(--charts-legend-label);
font-weight: 600; font-weight: 600;
} }
.legend-dataset-value { .legend-dataset-value {
fill: var(--charts-legend-value); fill: var(--charts-legend-value);
} }
} }
.graph-svg-tip { .graph-svg-tip {
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background: var(--charts-tooltip-bg); background: var(--charts-tooltip-bg);
box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1),
0px 2px 6px rgba(17, 43, 66, 0.08), 0px 2px 6px rgba(17, 43, 66, 0.08),
0px 40px 30px -30px rgba(17, 43, 66, 0.1); 0px 40px 30px -30px rgba(17, 43, 66, 0.1);
border-radius: 6px; border-radius: 6px;
ul { ul {
padding-left: 0; padding-left: 0;
display: flex; display: flex;
} }
ol { ol {
padding-left: 0; padding-left: 0;
display: flex; display: flex;
} }
ul.data-point-list { ul.data-point-list {
li { li {
min-width: 90px; min-width: 90px;
font-weight: 600; font-weight: 600;
} }
} }
.svg-pointer { .svg-pointer {
position: absolute; position: absolute;
height: 12px; height: 12px;
width: 12px; width: 12px;
border-radius: 2px; border-radius: 2px;
background: var(--charts-tooltip-bg); background: var(--charts-tooltip-bg);
transform: rotate(45deg); transform: rotate(45deg);
margin-top: -7px; margin-top: -7px;
margin-left: -6px; margin-left: -6px;
} }
&.comparison { &.comparison {
text-align: left; text-align: left;
padding: 0px; padding: 0px;
pointer-events: none; pointer-events: none;
.title { .title {
display: block; display: block;
padding: 16px; padding: 16px;
margin: 0; margin: 0;
color: var(--charts-tooltip-title); color: var(--charts-tooltip-title);
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
pointer-events: none; pointer-events: none;
text-transform: uppercase; text-transform: uppercase;
strong { strong {
color: var(--charts-tooltip-value); color: var(--charts-tooltip-value);
} }
} }
ul { ul {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
&.tooltip-grid { &.tooltip-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px; gap: 5px;
} }
} }
li { li {
display: inline-block; display: inline-block;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
padding: 5px 15px 15px 15px; padding: 5px 15px 15px 15px;
.tooltip-legend { .tooltip-legend {
height: 12px; height: 12px;
width: 12px; width: 12px;
margin-right: 8px; margin-right: 8px;
border-radius: 2px; border-radius: 2px;
} }
.tooltip-label { .tooltip-label {
margin-top: 4px; margin-top: 4px;
font-size: 11px; font-size: 11px;
line-height: 1.25; line-height: 1.25;
max-width: 150px; max-width: 150px;
white-space: normal; white-space: normal;
color: var(--charts-tooltip-label); color: var(--charts-tooltip-label);
} }
.tooltip-value { .tooltip-value {
color: var(--charts-tooltip-value); color: var(--charts-tooltip-value);
} }
} }
} }
} }

3
src/css/chartsCss.js
View File

@ -1 +1,2 @@
export const CSSTEXT = ".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}"; export const CSSTEXT =
".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}";

54
src/js/chart.js
View File

@ -1,40 +1,40 @@
import '../css/charts.scss'; import "../css/charts.scss";
// import MultiAxisChart from './charts/MultiAxisChart'; // import MultiAxisChart from './charts/MultiAxisChart';
import PercentageChart from './charts/PercentageChart'; import PercentageChart from "./charts/PercentageChart";
import PieChart from './charts/PieChart'; import PieChart from "./charts/PieChart";
import Heatmap from './charts/Heatmap'; import Heatmap from "./charts/Heatmap";
import AxisChart from './charts/AxisChart'; import AxisChart from "./charts/AxisChart";
import DonutChart from './charts/DonutChart'; import DonutChart from "./charts/DonutChart";
const chartTypes = { const chartTypes = {
bar: AxisChart, bar: AxisChart,
line: AxisChart, line: AxisChart,
// multiaxis: MultiAxisChart, // multiaxis: MultiAxisChart,
percentage: PercentageChart, percentage: PercentageChart,
heatmap: Heatmap, heatmap: Heatmap,
pie: PieChart, pie: PieChart,
donut: DonutChart, donut: DonutChart,
}; };
function getChartByType(chartType = 'line', parent, options) { function getChartByType(chartType = "line", parent, options) {
if (chartType === 'axis-mixed') { if (chartType === "axis-mixed") {
options.type = 'line'; options.type = "line";
return new AxisChart(parent, options); return new AxisChart(parent, options);
} }
if (!chartTypes[chartType]) { if (!chartTypes[chartType]) {
console.error("Undefined chart type: " + chartType); console.error("Undefined chart type: " + chartType);
return; return;
} }
return new chartTypes[chartType](parent, options); return new chartTypes[chartType](parent, options);
} }
class Chart { class Chart {
constructor(parent, options) { constructor(parent, options) {
return getChartByType(options.type, parent, options); return getChartByType(options.type, parent, options);
} }
} }
export { Chart, PercentageChart, PieChart, Heatmap, AxisChart }; export { Chart, PercentageChart, PieChart, Heatmap, AxisChart };

176
src/js/charts/AggregationChart.js
View File

@ -1,97 +1,109 @@
import BaseChart from './BaseChart'; import BaseChart from "./BaseChart";
import { truncateString } from '../utils/draw-utils'; import { truncateString } from "../utils/draw-utils";
import { legendDot } from '../utils/draw'; import { legendDot } from "../utils/draw";
import { round } from '../utils/helpers'; import { round } from "../utils/helpers";
import { getExtraWidth } from '../utils/constants'; import { getExtraWidth } from "../utils/constants";
export default class AggregationChart extends BaseChart { export default class AggregationChart extends BaseChart {
constructor(parent, args) { constructor(parent, args) {
super(parent, args); super(parent, args);
} }
configure(args) { configure(args) {
super.configure(args); super.configure(args);
this.config.formatTooltipY = (args.tooltipOptions || {}).formatTooltipY; this.config.formatTooltipY = (args.tooltipOptions || {}).formatTooltipY;
this.config.maxSlices = args.maxSlices || 20; this.config.maxSlices = args.maxSlices || 20;
this.config.maxLegendPoints = args.maxLegendPoints || 20; this.config.maxLegendPoints = args.maxLegendPoints || 20;
} }
calc() { calc() {
let s = this.state; let s = this.state;
let maxSlices = this.config.maxSlices; let maxSlices = this.config.maxSlices;
s.sliceTotals = []; s.sliceTotals = [];
let allTotals = this.data.labels.map((label, i) => { let allTotals = this.data.labels
let total = 0; .map((label, i) => {
this.data.datasets.map(e => { let total = 0;
total += e.values[i]; this.data.datasets.map((e) => {
}); total += e.values[i];
return [total, label]; });
}).filter(d => { return d[0] >= 0; }); // keep only positive results return [total, label];
})
.filter((d) => {
return d[0] >= 0;
}); // keep only positive results
let totals = allTotals; let totals = allTotals;
if(allTotals.length > maxSlices) { if (allTotals.length > maxSlices) {
// Prune and keep a grey area for rest as per maxSlices // Prune and keep a grey area for rest as per maxSlices
allTotals.sort((a, b) => { return b[0] - a[0]; }); allTotals.sort((a, b) => {
return b[0] - a[0];
});
totals = allTotals.slice(0, maxSlices-1); totals = allTotals.slice(0, maxSlices - 1);
let remaining = allTotals.slice(maxSlices-1); let remaining = allTotals.slice(maxSlices - 1);
let sumOfRemaining = 0; let sumOfRemaining = 0;
remaining.map(d => {sumOfRemaining += d[0];}); remaining.map((d) => {
totals.push([sumOfRemaining, 'Rest']); sumOfRemaining += d[0];
this.colors[maxSlices-1] = 'grey'; });
} totals.push([sumOfRemaining, "Rest"]);
this.colors[maxSlices - 1] = "grey";
}
s.labels = []; s.labels = [];
totals.map(d => { totals.map((d) => {
s.sliceTotals.push(round(d[0])); s.sliceTotals.push(round(d[0]));
s.labels.push(d[1]); s.labels.push(d[1]);
}); });
s.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0); s.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0);
this.center = { this.center = {
x: this.width / 2, x: this.width / 2,
y: this.height / 2 y: this.height / 2,
}; };
} }
renderLegend() { renderLegend() {
let s = this.state; let s = this.state;
this.legendArea.textContent = ''; this.legendArea.textContent = "";
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
let count = 0; let count = 0;
let y = 0; let y = 0;
this.legendTotals.map((d, i) => { this.legendTotals.map((d, i) => {
let barWidth = 150; let barWidth = 150;
let divisor = Math.floor( let divisor = Math.floor(
(this.width - getExtraWidth(this.measures))/barWidth (this.width - getExtraWidth(this.measures)) / barWidth
); );
if (this.legendTotals.length < divisor) { if (this.legendTotals.length < divisor) {
barWidth = this.width/this.legendTotals.length; barWidth = this.width / this.legendTotals.length;
} }
if(count > divisor) { if (count > divisor) {
count = 0; count = 0;
y += 60; y += 60;
} }
let x = barWidth * count + 5; let x = barWidth * count + 5;
let label = this.config.truncateLegends ? truncateString(s.labels[i], barWidth/10) : s.labels[i]; let label = this.config.truncateLegends
let formatted = this.config.formatTooltipY ? this.config.formatTooltipY(d) : d; ? truncateString(s.labels[i], barWidth / 10)
let dot = legendDot( : s.labels[i];
x, let formatted = this.config.formatTooltipY
y, ? this.config.formatTooltipY(d)
12, : d;
3, let dot = legendDot(
this.colors[i], x,
`${label}: ${formatted}`, y,
d, 12,
false 3,
); this.colors[i],
this.legendArea.appendChild(dot); `${label}: ${formatted}`,
count++; d,
}); false
} );
this.legendArea.appendChild(dot);
count++;
});
}
} }

1202
src/js/charts/AxisChart.js
View File

File diff suppressed because it is too large Load Diff

568
src/js/charts/BaseChart.js
View File

@ -1,25 +1,25 @@
import SvgTip from "../objects/SvgTip"; import SvgTip from "../objects/SvgTip";
import { import {
$, $,
isElementInViewport, isElementInViewport,
getElementContentWidth, getElementContentWidth,
isHidden, isHidden,
} from "../utils/dom"; } from "../utils/dom";
import { import {
makeSVGContainer, makeSVGContainer,
makeSVGDefs, makeSVGDefs,
makeSVGGroup, makeSVGGroup,
makeText, makeText,
} from "../utils/draw"; } from "../utils/draw";
import { import {
BASE_MEASURES, BASE_MEASURES,
getExtraHeight, getExtraHeight,
getExtraWidth, getExtraWidth,
getTopOffset, getTopOffset,
getLeftOffset, getLeftOffset,
INIT_CHART_UPDATE_TIMEOUT, INIT_CHART_UPDATE_TIMEOUT,
CHART_POST_ANIMATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT,
DEFAULT_COLORS, DEFAULT_COLORS,
} from "../utils/constants"; } from "../utils/constants";
import { getColor, isValidColor } from "../utils/colors"; import { getColor, isValidColor } from "../utils/colors";
import { runSMILAnimation } from "../utils/animation"; import { runSMILAnimation } from "../utils/animation";
@ -27,330 +27,330 @@ import { downloadFile, prepareForExport } from "../utils/export";
import { deepClone } from "../utils/helpers"; import { deepClone } from "../utils/helpers";
export default class BaseChart { export default class BaseChart {
constructor(parent, options) { constructor(parent, options) {
// deepclone options to avoid making changes to orignal object // deepclone options to avoid making changes to orignal object
options = deepClone(options); options = deepClone(options);
this.parent = this.parent =
typeof parent === "string" ? document.querySelector(parent) : parent; typeof parent === "string" ? document.querySelector(parent) : parent;
if (!(this.parent instanceof HTMLElement)) { if (!(this.parent instanceof HTMLElement)) {
throw new Error("No `parent` element to render on was provided."); throw new Error("No `parent` element to render on was provided.");
} }
this.rawChartArgs = options; this.rawChartArgs = options;
this.title = options.title || ""; this.title = options.title || "";
this.type = options.type || ""; this.type = options.type || "";
this.realData = this.prepareData(options.data); this.realData = this.prepareData(options.data);
this.data = this.prepareFirstData(this.realData); this.data = this.prepareFirstData(this.realData);
this.colors = this.validateColors(options.colors, this.type); this.colors = this.validateColors(options.colors, this.type);
this.config = { this.config = {
showTooltip: 1, // calculate showTooltip: 1, // calculate
showLegend: showLegend:
typeof options.showLegend !== "undefined" ? options.showLegend : 1, typeof options.showLegend !== "undefined" ? options.showLegend : 1,
isNavigable: options.isNavigable || 0, isNavigable: options.isNavigable || 0,
animate: typeof options.animate !== "undefined" ? options.animate : 1, animate: typeof options.animate !== "undefined" ? options.animate : 1,
truncateLegends: truncateLegends:
typeof options.truncateLegends !== "undefined" typeof options.truncateLegends !== "undefined"
? options.truncateLegends ? options.truncateLegends
: 1, : 1,
}; };
this.measures = JSON.parse(JSON.stringify(BASE_MEASURES)); this.measures = JSON.parse(JSON.stringify(BASE_MEASURES));
let m = this.measures; let m = this.measures;
this.setMeasures(options); this.setMeasures(options);
if (!this.title.length) { if (!this.title.length) {
m.titleHeight = 0; m.titleHeight = 0;
} }
if (!this.config.showLegend) m.legendHeight = 0; if (!this.config.showLegend) m.legendHeight = 0;
this.argHeight = options.height || m.baseHeight; this.argHeight = options.height || m.baseHeight;
this.state = {}; this.state = {};
this.options = {}; this.options = {};
this.initTimeout = INIT_CHART_UPDATE_TIMEOUT; this.initTimeout = INIT_CHART_UPDATE_TIMEOUT;
if (this.config.isNavigable) { if (this.config.isNavigable) {
this.overlays = []; this.overlays = [];
} }
this.configure(options); this.configure(options);
} }
prepareData(data) { prepareData(data) {
return data; return data;
} }
prepareFirstData(data) { prepareFirstData(data) {
return data; return data;
} }
validateColors(colors, type) { validateColors(colors, type) {
const validColors = []; const validColors = [];
colors = (colors || []).concat(DEFAULT_COLORS[type]); colors = (colors || []).concat(DEFAULT_COLORS[type]);
colors.forEach((string) => { colors.forEach((string) => {
const color = getColor(string); const color = getColor(string);
if (!isValidColor(color)) { if (!isValidColor(color)) {
console.warn('"' + string + '" is not a valid color.'); console.warn('"' + string + '" is not a valid color.');
} else { } else {
validColors.push(color); validColors.push(color);
} }
}); });
return validColors; return validColors;
} }
setMeasures() { setMeasures() {
// Override measures, including those for title and legend // Override measures, including those for title and legend
// set config for legend and title // set config for legend and title
} }
configure() { configure() {
let height = this.argHeight; let height = this.argHeight;
this.baseHeight = height; this.baseHeight = height;
this.height = height - getExtraHeight(this.measures); this.height = height - getExtraHeight(this.measures);
// Bind window events // Bind window events
this.boundDrawFn = () => this.draw(true); this.boundDrawFn = () => this.draw(true);
// Look into improving responsiveness // Look into improving responsiveness
//if (ResizeObserver) { //if (ResizeObserver) {
// this.resizeObserver = new ResizeObserver(this.boundDrawFn); // this.resizeObserver = new ResizeObserver(this.boundDrawFn);
// this.resizeObserver.observe(this.parent); // this.resizeObserver.observe(this.parent);
//} //}
window.addEventListener("resize", this.boundDrawFn); window.addEventListener("resize", this.boundDrawFn);
window.addEventListener("orientationchange", this.boundDrawFn); window.addEventListener("orientationchange", this.boundDrawFn);
} }
destroy() { destroy() {
//if (this.resizeObserver) this.resizeObserver.disconnect(); //if (this.resizeObserver) this.resizeObserver.disconnect();
window.removeEventListener("resize", this.boundDrawFn); window.removeEventListener("resize", this.boundDrawFn);
window.removeEventListener("orientationchange", this.boundDrawFn); window.removeEventListener("orientationchange", this.boundDrawFn);
} }
// Has to be called manually // Has to be called manually
setup() { setup() {
this.makeContainer(); this.makeContainer();
this.updateWidth(); this.updateWidth();
this.makeTooltip(); this.makeTooltip();
this.draw(false, true); this.draw(false, true);
} }
makeContainer() { makeContainer() {
// Chart needs a dedicated parent element // Chart needs a dedicated parent element
this.parent.innerHTML = ""; this.parent.innerHTML = "";
let args = { let args = {
inside: this.parent, inside: this.parent,
className: "chart-container", className: "chart-container",
}; };
if (this.independentWidth) { if (this.independentWidth) {
args.styles = { width: this.independentWidth + "px" }; args.styles = { width: this.independentWidth + "px" };
} }
this.container = $.create("div", args); this.container = $.create("div", args);
} }
makeTooltip() { makeTooltip() {
this.tip = new SvgTip({ this.tip = new SvgTip({
parent: this.container, parent: this.container,
colors: this.colors, colors: this.colors,
}); });
this.bindTooltip(); this.bindTooltip();
} }
bindTooltip() {} bindTooltip() {}
draw(onlyWidthChange = false, init = false) { draw(onlyWidthChange = false, init = false) {
if (onlyWidthChange && isHidden(this.parent)) { if (onlyWidthChange && isHidden(this.parent)) {
// Don't update anything if the chart is hidden // Don't update anything if the chart is hidden
return; return;
} }
this.updateWidth(); this.updateWidth();
this.calc(onlyWidthChange); this.calc(onlyWidthChange);
this.makeChartArea(); this.makeChartArea();
this.setupComponents(); this.setupComponents();
this.components.forEach((c) => c.setup(this.drawArea)); this.components.forEach((c) => c.setup(this.drawArea));
// this.components.forEach(c => c.make()); // this.components.forEach(c => c.make());
this.render(this.components, false); this.render(this.components, false);
if (init) { if (init) {
this.data = this.realData; this.data = this.realData;
setTimeout(() => { setTimeout(() => {
this.update(this.data); this.update(this.data);
}, this.initTimeout); }, this.initTimeout);
} }
this.renderLegend(); this.renderLegend();
this.setupNavigation(init); this.setupNavigation(init);
} }
calc() {} // builds state calc() {} // builds state
updateWidth() { updateWidth() {
this.baseWidth = getElementContentWidth(this.parent); this.baseWidth = getElementContentWidth(this.parent);
this.width = this.baseWidth - getExtraWidth(this.measures); this.width = this.baseWidth - getExtraWidth(this.measures);
} }
makeChartArea() { makeChartArea() {
if (this.svg) { if (this.svg) {
this.container.removeChild(this.svg); this.container.removeChild(this.svg);
} }
let m = this.measures; let m = this.measures;
this.svg = makeSVGContainer( this.svg = makeSVGContainer(
this.container, this.container,
"frappe-chart chart", "frappe-chart chart",
this.baseWidth, this.baseWidth,
this.baseHeight this.baseHeight
); );
this.svgDefs = makeSVGDefs(this.svg); this.svgDefs = makeSVGDefs(this.svg);
if (this.title.length) { if (this.title.length) {
this.titleEL = makeText( this.titleEL = makeText(
"title", "title",
m.margins.left, m.margins.left,
m.margins.top, m.margins.top,
this.title, this.title,
{ {
fontSize: m.titleFontSize, fontSize: m.titleFontSize,
fill: "#666666", fill: "#666666",
dy: m.titleFontSize, dy: m.titleFontSize,
} }
); );
} }
let top = getTopOffset(m); let top = getTopOffset(m);
this.drawArea = makeSVGGroup( this.drawArea = makeSVGGroup(
this.type + "-chart chart-draw-area", this.type + "-chart chart-draw-area",
`translate(${getLeftOffset(m)}, ${top})` `translate(${getLeftOffset(m)}, ${top})`
); );
if (this.config.showLegend) { if (this.config.showLegend) {
top += this.height + m.paddings.bottom; top += this.height + m.paddings.bottom;
this.legendArea = makeSVGGroup( this.legendArea = makeSVGGroup(
"chart-legend", "chart-legend",
`translate(${getLeftOffset(m)}, ${top})` `translate(${getLeftOffset(m)}, ${top})`
); );
} }
if (this.title.length) { if (this.title.length) {
this.svg.appendChild(this.titleEL); this.svg.appendChild(this.titleEL);
} }
this.svg.appendChild(this.drawArea); this.svg.appendChild(this.drawArea);
if (this.config.showLegend) { if (this.config.showLegend) {
this.svg.appendChild(this.legendArea); this.svg.appendChild(this.legendArea);
} }
this.updateTipOffset(getLeftOffset(m), getTopOffset(m)); this.updateTipOffset(getLeftOffset(m), getTopOffset(m));
} }
updateTipOffset(x, y) { updateTipOffset(x, y) {
this.tip.offset = { this.tip.offset = {
x: x, x: x,
y: y, y: y,
}; };
} }
setupComponents() { setupComponents() {
this.components = new Map(); this.components = new Map();
} }
update(data) { update(data) {
if (!data) { if (!data) {
console.error("No data to update."); console.error("No data to update.");
} }
this.data = this.prepareData(data); this.data = this.prepareData(data);
this.calc(); // builds state this.calc(); // builds state
this.render(this.components, this.config.animate); this.render(this.components, this.config.animate);
this.renderLegend(); this.renderLegend();
} }
render(components = this.components, animate = true) { render(components = this.components, animate = true) {
if (this.config.isNavigable) { if (this.config.isNavigable) {
// Remove all existing overlays // Remove all existing overlays
this.overlays.map((o) => o.parentNode.removeChild(o)); this.overlays.map((o) => o.parentNode.removeChild(o));
// ref.parentNode.insertBefore(element, ref); // ref.parentNode.insertBefore(element, ref);
} }
let elementsToAnimate = []; let elementsToAnimate = [];
// Can decouple to this.refreshComponents() first to save animation timeout // Can decouple to this.refreshComponents() first to save animation timeout
components.forEach((c) => { components.forEach((c) => {
elementsToAnimate = elementsToAnimate.concat(c.update(animate)); elementsToAnimate = elementsToAnimate.concat(c.update(animate));
}); });
if (elementsToAnimate.length > 0) { if (elementsToAnimate.length > 0) {
runSMILAnimation(this.container, this.svg, elementsToAnimate); runSMILAnimation(this.container, this.svg, elementsToAnimate);
setTimeout(() => { setTimeout(() => {
components.forEach((c) => c.make()); components.forEach((c) => c.make());
this.updateNav(); this.updateNav();
}, CHART_POST_ANIMATE_TIMEOUT); }, CHART_POST_ANIMATE_TIMEOUT);
} else { } else {
components.forEach((c) => c.make()); components.forEach((c) => c.make());
this.updateNav(); this.updateNav();
} }
} }
updateNav() { updateNav() {
if (this.config.isNavigable) { if (this.config.isNavigable) {
this.makeOverlay(); this.makeOverlay();
this.bindUnits(); this.bindUnits();
} }
} }
renderLegend() {} renderLegend() {}
setupNavigation(init = false) { setupNavigation(init = false) {
if (!this.config.isNavigable) return; if (!this.config.isNavigable) return;
if (init) { if (init) {
this.bindOverlay(); this.bindOverlay();
this.keyActions = { this.keyActions = {
13: this.onEnterKey.bind(this), 13: this.onEnterKey.bind(this),
37: this.onLeftArrow.bind(this), 37: this.onLeftArrow.bind(this),
38: this.onUpArrow.bind(this), 38: this.onUpArrow.bind(this),
39: this.onRightArrow.bind(this), 39: this.onRightArrow.bind(this),
40: this.onDownArrow.bind(this), 40: this.onDownArrow.bind(this),
}; };
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
if (isElementInViewport(this.container)) { if (isElementInViewport(this.container)) {
e = e || window.event; e = e || window.event;
if (this.keyActions[e.keyCode]) { if (this.keyActions[e.keyCode]) {
this.keyActions[e.keyCode](); this.keyActions[e.keyCode]();
} }
} }
}); });
} }
} }
makeOverlay() {} makeOverlay() {}
updateOverlay() {} updateOverlay() {}
bindOverlay() {} bindOverlay() {}
bindUnits() {} bindUnits() {}
onLeftArrow() {} onLeftArrow() {}
onRightArrow() {} onRightArrow() {}
onUpArrow() {} onUpArrow() {}
onDownArrow() {} onDownArrow() {}
onEnterKey() {} onEnterKey() {}
addDataPoint() {} addDataPoint() {}
removeDataPoint() {} removeDataPoint() {}
getDataPoint() {} getDataPoint() {}
setCurrentDataPoint() {} setCurrentDataPoint() {}
updateDataset() {} updateDataset() {}
export() { export() {
let chartSvg = prepareForExport(this.svg); let chartSvg = prepareForExport(this.svg);
downloadFile(this.title || "Chart", [chartSvg]); downloadFile(this.title || "Chart", [chartSvg]);
} }
} }

302
src/js/charts/DonutChart.js
View File

@ -1,161 +1,185 @@
import AggregationChart from './AggregationChart'; import AggregationChart from "./AggregationChart";
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from "../objects/ChartComponents";
import { getOffset } from '../utils/dom'; import { getOffset } from "../utils/dom";
import { getPositionByAngle } from '../utils/helpers'; import { getPositionByAngle } from "../utils/helpers";
import { makeArcStrokePathStr, makeStrokeCircleStr } from '../utils/draw'; import { makeArcStrokePathStr, makeStrokeCircleStr } from "../utils/draw";
import { lightenDarkenColor } from '../utils/colors'; import { lightenDarkenColor } from "../utils/colors";
import { transform } from '../utils/animation'; import { transform } from "../utils/animation";
import { FULL_ANGLE } from '../utils/constants'; import { FULL_ANGLE } from "../utils/constants";
export default class DonutChart extends AggregationChart { export default class DonutChart extends AggregationChart {
constructor(parent, args) { constructor(parent, args) {
super(parent, args); super(parent, args);
this.type = 'donut'; this.type = "donut";
this.initTimeout = 0; this.initTimeout = 0;
this.init = 1; this.init = 1;
this.setup(); this.setup();
} }
configure(args) { configure(args) {
super.configure(args); super.configure(args);
this.mouseMove = this.mouseMove.bind(this); this.mouseMove = this.mouseMove.bind(this);
this.mouseLeave = this.mouseLeave.bind(this); this.mouseLeave = this.mouseLeave.bind(this);
this.hoverRadio = args.hoverRadio || 0.1; this.hoverRadio = args.hoverRadio || 0.1;
this.config.startAngle = args.startAngle || 0; this.config.startAngle = args.startAngle || 0;
this.clockWise = args.clockWise || false; this.clockWise = args.clockWise || false;
this.strokeWidth = args.strokeWidth || 30; this.strokeWidth = args.strokeWidth || 30;
} }
calc() { calc() {
super.calc(); super.calc();
let s = this.state; let s = this.state;
this.radius = this.radius =
this.height > this.width this.height > this.width
? this.center.x - this.strokeWidth / 2 ? this.center.x - this.strokeWidth / 2
: this.center.y - this.strokeWidth / 2; : this.center.y - this.strokeWidth / 2;
const { radius, clockWise } = this; const { radius, clockWise } = this;
const prevSlicesProperties = s.slicesProperties || []; const prevSlicesProperties = s.slicesProperties || [];
s.sliceStrings = []; s.sliceStrings = [];
s.slicesProperties = []; s.slicesProperties = [];
let curAngle = 180 - this.config.startAngle; let curAngle = 180 - this.config.startAngle;
s.sliceTotals.map((total, i) => { s.sliceTotals.map((total, i) => {
const startAngle = curAngle; const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE; const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1: 0; const largeArc = originDiffAngle > 180 ? 1 : 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle; const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle; const endAngle = (curAngle = curAngle + diffAngle);
const startPosition = getPositionByAngle(startAngle, radius); const startPosition = getPositionByAngle(startAngle, radius);
const endPosition = getPositionByAngle(endAngle, radius); const endPosition = getPositionByAngle(endAngle, radius);
const prevProperty = this.init && prevSlicesProperties[i]; const prevProperty = this.init && prevSlicesProperties[i];
let curStart,curEnd; let curStart, curEnd;
if(this.init) { if (this.init) {
curStart = prevProperty ? prevProperty.startPosition : startPosition; curStart = prevProperty ? prevProperty.startPosition : startPosition;
curEnd = prevProperty ? prevProperty.endPosition : startPosition; curEnd = prevProperty ? prevProperty.endPosition : startPosition;
} else { } else {
curStart = startPosition; curStart = startPosition;
curEnd = endPosition; curEnd = endPosition;
} }
const curPath = const curPath =
originDiffAngle === 360 originDiffAngle === 360
? makeStrokeCircleStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc) ? makeStrokeCircleStr(
: makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc); curStart,
curEnd,
this.center,
this.radius,
this.clockWise,
largeArc
)
: makeArcStrokePathStr(
curStart,
curEnd,
this.center,
this.radius,
this.clockWise,
largeArc
);
s.sliceStrings.push(curPath); s.sliceStrings.push(curPath);
s.slicesProperties.push({ s.slicesProperties.push({
startPosition, startPosition,
endPosition, endPosition,
value: total, value: total,
total: s.grandTotal, total: s.grandTotal,
startAngle, startAngle,
endAngle, endAngle,
angle: diffAngle angle: diffAngle,
}); });
});
this.init = 0;
}
}); setupComponents() {
this.init = 0; let s = this.state;
}
setupComponents() { let componentConfigs = [
let s = this.state; [
"donutSlices",
{},
function () {
return {
sliceStrings: s.sliceStrings,
colors: this.colors,
strokeWidth: this.strokeWidth,
};
}.bind(this),
],
];
let componentConfigs = [ this.components = new Map(
[ componentConfigs.map((args) => {
'donutSlices', let component = getComponent(...args);
{ }, return [args[0], component];
function() { })
return { );
sliceStrings: s.sliceStrings, }
colors: this.colors,
strokeWidth: this.strokeWidth,
};
}.bind(this)
]
];
this.components = new Map(componentConfigs calTranslateByAngle(property) {
.map(args => { const { radius, hoverRadio } = this;
let component = getComponent(...args); const position = getPositionByAngle(
return [args[0], component]; property.startAngle + property.angle / 2,
})); radius
} );
return `translate3d(${position.x * hoverRadio}px,${
position.y * hoverRadio
}px,0)`;
}
calTranslateByAngle(property){ hoverSlice(path, i, flag, e) {
const{ radius, hoverRadio } = this; if (!path) return;
const position = getPositionByAngle(property.startAngle+(property.angle / 2),radius); const color = this.colors[i];
return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`; if (flag) {
} transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.stroke = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
let title =
(this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels[i]
: this.state.labels[i]) + ": ";
let percent = (
(this.state.sliceTotals[i] * 100) /
this.state.grandTotal
).toFixed(1);
this.tip.setValues(x, y, { name: title, value: percent + "%" });
this.tip.showTip();
} else {
transform(path, "translate3d(0,0,0)");
this.tip.hideTip();
path.style.stroke = color;
}
}
hoverSlice(path,i,flag,e){ bindTooltip() {
if(!path) return; this.container.addEventListener("mousemove", this.mouseMove);
const color = this.colors[i]; this.container.addEventListener("mouseleave", this.mouseLeave);
if(flag) { }
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.stroke = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
let title = (this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels[i] : this.state.labels[i]) + ': ';
let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);
this.tip.setValues(x, y, {name: title, value: percent + "%"});
this.tip.showTip();
} else {
transform(path,'translate3d(0,0,0)');
this.tip.hideTip();
path.style.stroke = color;
}
}
bindTooltip() { mouseMove(e) {
this.container.addEventListener('mousemove', this.mouseMove); const target = e.target;
this.container.addEventListener('mouseleave', this.mouseLeave); let slices = this.components.get("donutSlices").store;
} let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice;
if (slices.includes(target)) {
let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex, false);
this.curActiveSlice = target;
this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e);
} else {
this.mouseLeave();
}
}
mouseMove(e){ mouseLeave() {
const target = e.target; this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
let slices = this.components.get('donutSlices').store; }
let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice;
if(slices.includes(target)) {
let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex,false);
this.curActiveSlice = target;
this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e);
} else {
this.mouseLeave();
}
}
mouseLeave(){
this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false);
}
} }

519
src/js/charts/Heatmap.js
View File

@ -1,302 +1,337 @@
import BaseChart from './BaseChart'; import BaseChart from "./BaseChart";
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from "../objects/ChartComponents";
import { makeText, heatSquare } from '../utils/draw'; import { makeText, heatSquare } from "../utils/draw";
import { DAY_NAMES_SHORT, toMidnightUTC, addDays, areInSameMonth, getLastDateInMonth, setDayToSunday, getYyyyMmDd, getWeeksBetween, getMonthName, clone, import {
NO_OF_MILLIS, NO_OF_YEAR_MONTHS, NO_OF_DAYS_IN_WEEK } from '../utils/date-utils'; DAY_NAMES_SHORT,
import { calcDistribution, getMaxCheckpoint } from '../utils/intervals'; toMidnightUTC,
import { getExtraHeight, getExtraWidth, HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE, addDays,
HEATMAP_GUTTER_SIZE } from '../utils/constants'; areInSameMonth,
getLastDateInMonth,
setDayToSunday,
getYyyyMmDd,
getWeeksBetween,
getMonthName,
clone,
NO_OF_MILLIS,
NO_OF_YEAR_MONTHS,
NO_OF_DAYS_IN_WEEK,
} from "../utils/date-utils";
import { calcDistribution, getMaxCheckpoint } from "../utils/intervals";
import {
getExtraHeight,
getExtraWidth,
HEATMAP_DISTRIBUTION_SIZE,
HEATMAP_SQUARE_SIZE,
HEATMAP_GUTTER_SIZE,
} from "../utils/constants";
const COL_WIDTH = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE; const COL_WIDTH = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
const ROW_HEIGHT = COL_WIDTH; const ROW_HEIGHT = COL_WIDTH;
// const DAY_INCR = 1; // const DAY_INCR = 1;
export default class Heatmap extends BaseChart { export default class Heatmap extends BaseChart {
constructor(parent, options) { constructor(parent, options) {
super(parent, options); super(parent, options);
this.type = 'heatmap'; this.type = "heatmap";
this.countLabel = options.countLabel || ''; this.countLabel = options.countLabel || "";
let validStarts = ['Sunday', 'Monday']; let validStarts = ["Sunday", "Monday"];
let startSubDomain = validStarts.includes(options.startSubDomain) let startSubDomain = validStarts.includes(options.startSubDomain)
? options.startSubDomain : 'Sunday'; ? options.startSubDomain
this.startSubDomainIndex = validStarts.indexOf(startSubDomain); : "Sunday";
this.startSubDomainIndex = validStarts.indexOf(startSubDomain);
this.setup(); this.setup();
} }
setMeasures(options) { setMeasures(options) {
let m = this.measures; let m = this.measures;
this.discreteDomains = options.discreteDomains === 0 ? 0 : 1; this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
m.paddings.top = ROW_HEIGHT * 3; m.paddings.top = ROW_HEIGHT * 3;
m.paddings.bottom = 0; m.paddings.bottom = 0;
m.legendHeight = ROW_HEIGHT * 2; m.legendHeight = ROW_HEIGHT * 2;
m.baseHeight = ROW_HEIGHT * NO_OF_DAYS_IN_WEEK m.baseHeight = ROW_HEIGHT * NO_OF_DAYS_IN_WEEK + getExtraHeight(m);
+ getExtraHeight(m);
let d = this.data; let d = this.data;
let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0; let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
this.independentWidth = (getWeeksBetween(d.start, d.end) this.independentWidth =
+ spacing) * COL_WIDTH + getExtraWidth(m); (getWeeksBetween(d.start, d.end) + spacing) * COL_WIDTH +
} getExtraWidth(m);
}
updateWidth() { updateWidth() {
let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0; let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
let noOfWeeks = this.state.noOfWeeks ? this.state.noOfWeeks : 52; let noOfWeeks = this.state.noOfWeeks ? this.state.noOfWeeks : 52;
this.baseWidth = (noOfWeeks + spacing) * COL_WIDTH this.baseWidth =
+ getExtraWidth(this.measures); (noOfWeeks + spacing) * COL_WIDTH + getExtraWidth(this.measures);
} }
prepareData(data=this.data) { prepareData(data = this.data) {
if(data.start && data.end && data.start > data.end) { if (data.start && data.end && data.start > data.end) {
throw new Error('Start date cannot be greater than end date.'); throw new Error("Start date cannot be greater than end date.");
} }
if(!data.start) { if (!data.start) {
data.start = new Date(); data.start = new Date();
data.start.setFullYear( data.start.getFullYear() - 1 ); data.start.setFullYear(data.start.getFullYear() - 1);
} }
data.start = toMidnightUTC(data.start); data.start = toMidnightUTC(data.start);
if(!data.end) { if (!data.end) {
data.end = new Date(); data.end = new Date();
} }
data.end = toMidnightUTC(data.end); data.end = toMidnightUTC(data.end);
data.dataPoints = data.dataPoints || {}; data.dataPoints = data.dataPoints || {};
if(parseInt(Object.keys(data.dataPoints)[0]) > 100000) { if (parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
let points = {}; let points = {};
Object.keys(data.dataPoints).forEach(timestampSec => { Object.keys(data.dataPoints).forEach((timestampSec) => {
let date = new Date(timestampSec * NO_OF_MILLIS); let date = new Date(timestampSec * NO_OF_MILLIS);
points[getYyyyMmDd(date)] = data.dataPoints[timestampSec]; points[getYyyyMmDd(date)] = data.dataPoints[timestampSec];
}); });
data.dataPoints = points; data.dataPoints = points;
} }
return data; return data;
} }
calc() { calc() {
let s = this.state; let s = this.state;
s.start = clone(this.data.start); s.start = clone(this.data.start);
s.end = clone(this.data.end); s.end = clone(this.data.end);
s.firstWeekStart = clone(s.start); s.firstWeekStart = clone(s.start);
s.noOfWeeks = getWeeksBetween(s.start, s.end); s.noOfWeeks = getWeeksBetween(s.start, s.end);
s.distribution = calcDistribution( s.distribution = calcDistribution(
Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE); Object.values(this.data.dataPoints),
HEATMAP_DISTRIBUTION_SIZE
);
s.domainConfigs = this.getDomains(); s.domainConfigs = this.getDomains();
} }
setupComponents() { setupComponents() {
let s = this.state; let s = this.state;
let lessCol = this.discreteDomains ? 0 : 1; let lessCol = this.discreteDomains ? 0 : 1;
let componentConfigs = s.domainConfigs.map((config, i) => [ let componentConfigs = s.domainConfigs.map((config, i) => [
'heatDomain', "heatDomain",
{ {
index: config.index, index: config.index,
colWidth: COL_WIDTH, colWidth: COL_WIDTH,
rowHeight: ROW_HEIGHT, rowHeight: ROW_HEIGHT,
squareSize: HEATMAP_SQUARE_SIZE, squareSize: HEATMAP_SQUARE_SIZE,
radius: this.rawChartArgs.radius || 0, radius: this.rawChartArgs.radius || 0,
xTranslate: s.domainConfigs xTranslate:
.filter((config, j) => j < i) s.domainConfigs
.map(config => config.cols.length - lessCol) .filter((config, j) => j < i)
.reduce((a, b) => a + b, 0) .map((config) => config.cols.length - lessCol)
* COL_WIDTH .reduce((a, b) => a + b, 0) * COL_WIDTH,
}, },
function() { function () {
return s.domainConfigs[i]; return s.domainConfigs[i];
}.bind(this) }.bind(this),
]);
]); this.components = new Map(
componentConfigs.map((args, i) => {
let component = getComponent(...args);
return [args[0] + "-" + i, component];
})
);
this.components = new Map(componentConfigs let y = 0;
.map((args, i) => { DAY_NAMES_SHORT.forEach((dayName, i) => {
let component = getComponent(...args); if ([1, 3, 5].includes(i)) {
return [args[0] + '-' + i, component]; let dayText = makeText("subdomain-name", -COL_WIDTH / 2, y, dayName, {
}) fontSize: HEATMAP_SQUARE_SIZE,
); dy: 8,
textAnchor: "end",
});
this.drawArea.appendChild(dayText);
}
y += ROW_HEIGHT;
});
}
let y = 0; update(data) {
DAY_NAMES_SHORT.forEach((dayName, i) => { if (!data) {
if([1, 3, 5].includes(i)) { console.error("No data to update.");
let dayText = makeText('subdomain-name', -COL_WIDTH/2, y, dayName, }
{
fontSize: HEATMAP_SQUARE_SIZE,
dy: 8,
textAnchor: 'end'
}
);
this.drawArea.appendChild(dayText);
}
y += ROW_HEIGHT;
});
}
update(data) { this.data = this.prepareData(data);
if(!data) { this.draw();
console.error('No data to update.'); this.bindTooltip();
} }
this.data = this.prepareData(data); bindTooltip() {
this.draw(); this.container.addEventListener("mousemove", (e) => {
this.bindTooltip(); this.components.forEach((comp) => {
} let daySquares = comp.store;
let daySquare = e.target;
if (daySquares.includes(daySquare)) {
let count = daySquare.getAttribute("data-value");
let dateParts = daySquare.getAttribute("data-date").split("-");
bindTooltip() { let month = getMonthName(parseInt(dateParts[1]) - 1, true);
this.container.addEventListener('mousemove', (e) => {
this.components.forEach(comp => {
let daySquares = comp.store;
let daySquare = e.target;
if(daySquares.includes(daySquare)) {
let count = daySquare.getAttribute('data-value'); let gOff = this.container.getBoundingClientRect(),
let dateParts = daySquare.getAttribute('data-date').split('-'); pOff = daySquare.getBoundingClientRect();
let month = getMonthName(parseInt(dateParts[1])-1, true); let width = parseInt(e.target.getAttribute("width"));
let x = pOff.left - gOff.left + width / 2;
let y = pOff.top - gOff.top;
let value = count + " " + this.countLabel;
let name = " on " + month + " " + dateParts[0] + ", " + dateParts[2];
let gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect(); this.tip.setValues(
x,
y,
{ name: name, value: value, valueFirst: 1 },
[]
);
this.tip.showTip();
}
});
});
}
let width = parseInt(e.target.getAttribute('width')); renderLegend() {
let x = pOff.left - gOff.left + width/2; this.legendArea.textContent = "";
let y = pOff.top - gOff.top; let x = 0;
let value = count + ' ' + this.countLabel; let y = ROW_HEIGHT;
let name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2]; let radius = this.rawChartArgs.radius || 0;
this.tip.setValues(x, y, {name: name, value: value, valueFirst: 1}, []); let lessText = makeText("subdomain-name", x, y, "Less", {
this.tip.showTip(); fontSize: HEATMAP_SQUARE_SIZE + 1,
} dy: 9,
}); });
}); x = COL_WIDTH * 2 + COL_WIDTH / 2;
} this.legendArea.appendChild(lessText);
renderLegend() { this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => {
this.legendArea.textContent = ''; const square = heatSquare(
let x = 0; "heatmap-legend-unit",
let y = ROW_HEIGHT; x + (COL_WIDTH + 3) * i,
let radius = this.rawChartArgs.radius || 0; y,
HEATMAP_SQUARE_SIZE,
radius,
color
);
this.legendArea.appendChild(square);
});
let lessText = makeText('subdomain-name', x, y, 'Less', let moreTextX =
{ x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH / 4;
fontSize: HEATMAP_SQUARE_SIZE + 1, let moreText = makeText("subdomain-name", moreTextX, y, "More", {
dy: 9 fontSize: HEATMAP_SQUARE_SIZE + 1,
} dy: 9,
); });
x = (COL_WIDTH * 2) + COL_WIDTH/2; this.legendArea.appendChild(moreText);
this.legendArea.appendChild(lessText); }
this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => { getDomains() {
const square = heatSquare('heatmap-legend-unit', x + (COL_WIDTH + 3) * i, let s = this.state;
y, HEATMAP_SQUARE_SIZE, radius, color); const [startMonth, startYear] = [s.start.getMonth(), s.start.getFullYear()];
this.legendArea.appendChild(square); const [endMonth, endYear] = [s.end.getMonth(), s.end.getFullYear()];
});
let moreTextX = x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH/4; const noOfMonths = endMonth - startMonth + 1 + (endYear - startYear) * 12;
let moreText = makeText('subdomain-name', moreTextX, y, 'More',
{
fontSize: HEATMAP_SQUARE_SIZE + 1,
dy: 9
}
);
this.legendArea.appendChild(moreText);
}
getDomains() { let domainConfigs = [];
let s = this.state;
const [startMonth, startYear] = [s.start.getMonth(), s.start.getFullYear()];
const [endMonth, endYear] = [s.end.getMonth(), s.end.getFullYear()];
const noOfMonths = (endMonth - startMonth + 1) + (endYear - startYear) * 12; let startOfMonth = clone(s.start);
for (var i = 0; i < noOfMonths; i++) {
let endDate = s.end;
if (!areInSameMonth(startOfMonth, s.end)) {
let [month, year] = [
startOfMonth.getMonth(),
startOfMonth.getFullYear(),
];
endDate = getLastDateInMonth(month, year);
}
domainConfigs.push(this.getDomainConfig(startOfMonth, endDate));
let domainConfigs = []; addDays(endDate, 1);
startOfMonth = endDate;
}
let startOfMonth = clone(s.start); return domainConfigs;
for(var i = 0; i < noOfMonths; i++) { }
let endDate = s.end;
if(!areInSameMonth(startOfMonth, s.end)) {
let [month, year] = [startOfMonth.getMonth(), startOfMonth.getFullYear()];
endDate = getLastDateInMonth(month, year);
}
domainConfigs.push(this.getDomainConfig(startOfMonth, endDate));
addDays(endDate, 1); getDomainConfig(startDate, endDate = "") {
startOfMonth = endDate; let [month, year] = [startDate.getMonth(), startDate.getFullYear()];
} let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
endDate = endDate
? clone(endDate)
: toMidnightUTC(getLastDateInMonth(month, year));
return domainConfigs; let domainConfig = {
} index: month,
cols: [],
};
getDomainConfig(startDate, endDate='') { addDays(endDate, 1);
let [month, year] = [startDate.getMonth(), startDate.getFullYear()]; let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate);
let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
endDate = endDate ? clone(endDate) : toMidnightUTC(getLastDateInMonth(month, year));
let domainConfig = { let cols = [],
index: month, col;
cols: [] for (var i = 0; i < noOfMonthWeeks; i++) {
}; col = this.getCol(startOfWeek, month);
cols.push(col);
addDays(endDate, 1); startOfWeek = toMidnightUTC(
let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate); new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd)
);
addDays(startOfWeek, 1);
}
let cols = [], col; if (col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) {
for(var i = 0; i < noOfMonthWeeks; i++) { addDays(startOfWeek, 1);
col = this.getCol(startOfWeek, month); cols.push(this.getCol(startOfWeek, month, true));
cols.push(col); }
startOfWeek = toMidnightUTC(new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd)); domainConfig.cols = cols;
addDays(startOfWeek, 1);
}
if(col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) { return domainConfig;
addDays(startOfWeek, 1); }
cols.push(this.getCol(startOfWeek, month, true));
}
domainConfig.cols = cols; getCol(startDate, month, empty = false) {
let s = this.state;
return domainConfig; // startDate is the start of week
} let currentDate = clone(startDate);
let col = [];
getCol(startDate, month, empty = false) { for (var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
let s = this.state; let config = {};
// startDate is the start of week // Non-generic adjustment for entire heatmap, needs state
let currentDate = clone(startDate); let currentDateWithinData =
let col = []; currentDate >= s.start && currentDate <= s.end;
for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) { if (empty || currentDate.getMonth() !== month || !currentDateWithinData) {
let config = {}; config.yyyyMmDd = getYyyyMmDd(currentDate);
} else {
config = this.getSubDomainConfig(currentDate);
}
col.push(config);
}
// Non-generic adjustment for entire heatmap, needs state return col;
let currentDateWithinData = currentDate >= s.start && currentDate <= s.end; }
if(empty || currentDate.getMonth() !== month || !currentDateWithinData) { getSubDomainConfig(date) {
config.yyyyMmDd = getYyyyMmDd(currentDate); let yyyyMmDd = getYyyyMmDd(date);
} else { let dataValue = this.data.dataPoints[yyyyMmDd];
config = this.getSubDomainConfig(currentDate); let config = {
} yyyyMmDd: yyyyMmDd,
col.push(config); dataValue: dataValue || 0,
} fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)],
};
return col; return config;
} }
getSubDomainConfig(date) {
let yyyyMmDd = getYyyyMmDd(date);
let dataValue = this.data.dataPoints[yyyyMmDd];
let config = {
yyyyMmDd: yyyyMmDd,
dataValue: dataValue || 0,
fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
};
return config;
}
} }

304
src/js/charts/MultiAxisChart.js
View File

@ -1,173 +1,183 @@
import AxisChart from './AxisChart'; import AxisChart from "./AxisChart";
import { Y_AXIS_MARGIN } from '../utils/constants'; import { Y_AXIS_MARGIN } from "../utils/constants";
// import { ChartComponent } from '../objects/ChartComponents'; // import { ChartComponent } from '../objects/ChartComponents';
import { floatTwo } from '../utils/helpers'; import { floatTwo } from "../utils/helpers";
export default class MultiAxisChart extends AxisChart { export default class MultiAxisChart extends AxisChart {
constructor(args) { constructor(args) {
super(args); super(args);
// this.unitType = args.unitType || 'line'; // this.unitType = args.unitType || 'line';
// this.setup(); // this.setup();
} }
preSetup() { preSetup() {
this.type = 'multiaxis'; this.type = "multiaxis";
} }
setMeasures() { setMeasures() {
super.setMeasures(); super.setMeasures();
let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length; let noOfLeftAxes = this.data.datasets.filter(
this.measures.margins.left = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; (d) => d.axisPosition === "left"
this.measures.margins.right = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; ).length;
} this.measures.margins.left = noOfLeftAxes * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
this.measures.margins.right =
(this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN ||
Y_AXIS_MARGIN;
}
prepareYAxis() { } prepareYAxis() {}
prepareData(data) { prepareData(data) {
super.prepareData(data); super.prepareData(data);
let sets = this.state.datasets; let sets = this.state.datasets;
// let axesLeft = sets.filter(d => d.axisPosition === 'left'); // let axesLeft = sets.filter(d => d.axisPosition === 'left');
// let axesRight = sets.filter(d => d.axisPosition === 'right'); // let axesRight = sets.filter(d => d.axisPosition === 'right');
// let axesNone = sets.filter(d => !d.axisPosition || // let axesNone = sets.filter(d => !d.axisPosition ||
// !['left', 'right'].includes(d.axisPosition)); // !['left', 'right'].includes(d.axisPosition));
let leftCount = 0, rightCount = 0; let leftCount = 0,
rightCount = 0;
sets.forEach((d, i) => { sets.forEach((d, i) => {
d.yAxis = { d.yAxis = {
position: d.axisPosition, position: d.axisPosition,
index: d.axisPosition === 'left' ? leftCount++ : rightCount++ index: d.axisPosition === "left" ? leftCount++ : rightCount++,
}; };
}); });
} }
configure(args) { configure(args) {
super.configure(args); super.configure(args);
this.config.xAxisMode = args.xAxisMode || 'tick'; this.config.xAxisMode = args.xAxisMode || "tick";
this.config.yAxisMode = args.yAxisMode || 'span'; this.config.yAxisMode = args.yAxisMode || "span";
} }
// setUnitWidthAndXOffset() { // setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength); // this.state.unitWidth = this.width/(this.state.datasetLength);
// this.state.xOffset = this.state.unitWidth/2; // this.state.xOffset = this.state.unitWidth/2;
// } // }
configUnits() { configUnits() {
this.unitArgs = { this.unitArgs = {
type: 'bar', type: "bar",
args: { args: {
spaceWidth: this.state.unitWidth/2, spaceWidth: this.state.unitWidth / 2,
} },
}; };
} }
setYAxis() { setYAxis() {
this.state.datasets.map(d => { this.state.datasets.map((d) => {
this.calcYAxisParameters(d.yAxis, d.values, this.unitType === 'line'); this.calcYAxisParameters(d.yAxis, d.values, this.unitType === "line");
}); });
} }
calcYUnits() { calcYUnits() {
this.state.datasets.map(d => { this.state.datasets.map((d) => {
d.positions = d.values.map(val => floatTwo(d.yAxis.zeroLine - val * d.yAxis.scaleMultiplier)); d.positions = d.values.map((val) =>
}); floatTwo(d.yAxis.zeroLine - val * d.yAxis.scaleMultiplier)
} );
});
}
// TODO: function doesn't exist, handle with components // TODO: function doesn't exist, handle with components
renderConstants() { renderConstants() {
this.state.datasets.map(d => { this.state.datasets.map((d) => {
let guidePos = d.yAxis.position === 'left' let guidePos =
? -1 * d.yAxis.index * Y_AXIS_MARGIN d.yAxis.position === "left"
: this.width + d.yAxis.index * Y_AXIS_MARGIN; ? -1 * d.yAxis.index * Y_AXIS_MARGIN
this.renderer.xLine(guidePos, '', { : this.width + d.yAxis.index * Y_AXIS_MARGIN;
pos:'top', this.renderer.xLine(guidePos, "", {
mode: 'span', pos: "top",
stroke: this.colors[i], mode: "span",
className: 'y-axis-guide' stroke: this.colors[i],
}) className: "y-axis-guide",
}); });
} });
}
getYAxesComponents() { getYAxesComponents() {
return this.data.datasets.map((e, i) => { return this.data.datasets.map((e, i) => {
return new ChartComponent({ return new ChartComponent({
layerClass: 'y axis y-axis-' + i, layerClass: "y axis y-axis-" + i,
make: () => { make: () => {
let yAxis = this.state.datasets[i].yAxis; let yAxis = this.state.datasets[i].yAxis;
this.renderer.setZeroline(yAxis.zeroline); this.renderer.setZeroline(yAxis.zeroline);
let options = { let options = {
pos: yAxis.position, pos: yAxis.position,
mode: 'tick', mode: "tick",
offset: yAxis.index * Y_AXIS_MARGIN, offset: yAxis.index * Y_AXIS_MARGIN,
stroke: this.colors[i] stroke: this.colors[i],
}; };
return yAxis.positions.map((position, j) => return yAxis.positions.map((position, j) =>
this.renderer.yLine(position, yAxis.labels[j], options) this.renderer.yLine(position, yAxis.labels[j], options)
); );
}, },
animate: () => {} animate: () => {},
}); });
}); });
} }
// TODO remove renderer zeroline from above and below // TODO remove renderer zeroline from above and below
getChartComponents() { getChartComponents() {
return this.data.datasets.map((d, index) => { return this.data.datasets.map((d, index) => {
return new ChartComponent({ return new ChartComponent({
layerClass: 'dataset-units dataset-' + index, layerClass: "dataset-units dataset-" + index,
make: () => { make: () => {
let d = this.state.datasets[index]; let d = this.state.datasets[index];
let unitType = this.unitArgs; let unitType = this.unitArgs;
// the only difference, should be tied to datasets or default // the only difference, should be tied to datasets or default
this.renderer.setZeroline(d.yAxis.zeroLine); this.renderer.setZeroline(d.yAxis.zeroLine);
return d.positions.map((y, j) => { return d.positions.map((y, j) => {
return this.renderer[unitType.type]( return this.renderer[unitType.type](
this.state.xAxisPositions[j], this.state.xAxisPositions[j],
y, y,
unitType.args, unitType.args,
this.colors[index], this.colors[index],
j, j,
index, index,
this.state.datasetLength this.state.datasetLength
); );
}); });
}, },
animate: (svgUnits) => { animate: (svgUnits) => {
let d = this.state.datasets[index]; let d = this.state.datasets[index];
let unitType = this.unitArgs.type; let unitType = this.unitArgs.type;
// have been updated in axis render; // have been updated in axis render;
let newX = this.state.xAxisPositions; let newX = this.state.xAxisPositions;
let newY = this.state.datasets[index].positions; let newY = this.state.datasets[index].positions;
let lastUnit = svgUnits[svgUnits.length - 1]; let lastUnit = svgUnits[svgUnits.length - 1];
let parentNode = lastUnit.parentNode; let parentNode = lastUnit.parentNode;
if(this.oldState.xExtra > 0) { if (this.oldState.xExtra > 0) {
for(var i = 0; i<this.oldState.xExtra; i++) { for (var i = 0; i < this.oldState.xExtra; i++) {
let unit = lastUnit.cloneNode(true); let unit = lastUnit.cloneNode(true);
parentNode.appendChild(unit); parentNode.appendChild(unit);
svgUnits.push(unit); svgUnits.push(unit);
} }
} }
this.renderer.setZeroline(d.yAxis.zeroLine); this.renderer.setZeroline(d.yAxis.zeroLine);
svgUnits.map((unit, i) => { svgUnits.map((unit, i) => {
if(newX[i] === undefined || newY[i] === undefined) return; if (newX[i] === undefined || newY[i] === undefined) return;
this.elementsToAnimate.push(this.renderer['animate' + unitType]( this.elementsToAnimate.push(
unit, // unit, with info to replace where it came from in the data this.renderer["animate" + unitType](
newX[i], unit, // unit, with info to replace where it came from in the data
newY[i], newX[i],
index, newY[i],
this.state.noOfDatasets index,
)); this.state.noOfDatasets
}); )
} );
}); });
}); },
} });
});
}
} }

154
src/js/charts/PercentageChart.js
View File

@ -1,90 +1,96 @@
import AggregationChart from './AggregationChart'; import AggregationChart from "./AggregationChart";
import { getOffset } from '../utils/dom'; import { getOffset } from "../utils/dom";
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from "../objects/ChartComponents";
import { PERCENTAGE_BAR_DEFAULT_HEIGHT } from '../utils/constants'; import { PERCENTAGE_BAR_DEFAULT_HEIGHT } from "../utils/constants";
export default class PercentageChart extends AggregationChart { export default class PercentageChart extends AggregationChart {
constructor(parent, args) { constructor(parent, args) {
super(parent, args); super(parent, args);
this.type = 'percentage'; this.type = "percentage";
this.setup(); this.setup();
} }
setMeasures(options) { setMeasures(options) {
let m = this.measures; let m = this.measures;
this.barOptions = options.barOptions || {}; this.barOptions = options.barOptions || {};
let b = this.barOptions; let b = this.barOptions;
b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT; b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
m.paddings.right = 30; m.paddings.right = 30;
m.legendHeight = 60; m.legendHeight = 60;
m.baseHeight = (b.height + b.depth * 0.5) * 8; m.baseHeight = (b.height + b.depth * 0.5) * 8;
} }
setupComponents() { setupComponents() {
let s = this.state; let s = this.state;
let componentConfigs = [ let componentConfigs = [
[ [
'percentageBars', "percentageBars",
{ {
barHeight: this.barOptions.height, barHeight: this.barOptions.height,
}, },
function() { function () {
return { return {
xPositions: s.xPositions, xPositions: s.xPositions,
widths: s.widths, widths: s.widths,
colors: this.colors colors: this.colors,
}; };
}.bind(this) }.bind(this),
] ],
]; ];
this.components = new Map(componentConfigs this.components = new Map(
.map(args => { componentConfigs.map((args) => {
let component = getComponent(...args); let component = getComponent(...args);
return [args[0], component]; return [args[0], component];
})); })
} );
}
calc() { calc() {
super.calc(); super.calc();
let s = this.state; let s = this.state;
s.xPositions = []; s.xPositions = [];
s.widths = []; s.widths = [];
let xPos = 0; let xPos = 0;
s.sliceTotals.map((value) => { s.sliceTotals.map((value) => {
let width = this.width * value / s.grandTotal; let width = (this.width * value) / s.grandTotal;
s.widths.push(width); s.widths.push(width);
s.xPositions.push(xPos); s.xPositions.push(xPos);
xPos += width; xPos += width;
}); });
} }
makeDataByIndex() { } makeDataByIndex() {}
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
this.container.addEventListener('mousemove', (e) => { this.container.addEventListener("mousemove", (e) => {
let bars = this.components.get('percentageBars').store; let bars = this.components.get("percentageBars").store;
let bar = e.target; let bar = e.target;
if(bars.includes(bar)) { if (bars.includes(bar)) {
let i = bars.indexOf(bar);
let gOff = getOffset(this.container),
pOff = getOffset(bar);
let i = bars.indexOf(bar); let x = pOff.left - gOff.left + parseInt(bar.getAttribute("width")) / 2;
let gOff = getOffset(this.container), pOff = getOffset(bar); let y = pOff.top - gOff.top;
let title =
(this.formattedLabels && this.formattedLabels.length > 0
? this.formattedLabels[i]
: this.state.labels[i]) + ": ";
let fraction = s.sliceTotals[i] / s.grandTotal;
let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2; this.tip.setValues(x, y, {
let y = pOff.top - gOff.top; name: title,
let title = (this.formattedLabels && this.formattedLabels.length>0 value: (fraction * 100).toFixed(1) + "%",
? this.formattedLabels[i] : this.state.labels[i]) + ': '; });
let fraction = s.sliceTotals[i]/s.grandTotal; this.tip.showTip();
}
this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"}); });
this.tip.showTip(); }
}
});
}
} }

347
src/js/charts/PieChart.js
View File

@ -1,184 +1,207 @@
import AggregationChart from './AggregationChart'; import AggregationChart from "./AggregationChart";
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from "../objects/ChartComponents";
import { getOffset, fire } from '../utils/dom'; import { getOffset, fire } from "../utils/dom";
import { getPositionByAngle } from '../utils/helpers'; import { getPositionByAngle } from "../utils/helpers";
import { makeArcPathStr, makeCircleStr } from '../utils/draw'; import { makeArcPathStr, makeCircleStr } from "../utils/draw";
import { lightenDarkenColor } from '../utils/colors'; import { lightenDarkenColor } from "../utils/colors";
import { transform } from '../utils/animation'; import { transform } from "../utils/animation";
import { FULL_ANGLE } from '../utils/constants'; import { FULL_ANGLE } from "../utils/constants";
export default class PieChart extends AggregationChart { export default class PieChart extends AggregationChart {
constructor(parent, args) { constructor(parent, args) {
super(parent, args); super(parent, args);
this.type = 'pie'; this.type = "pie";
this.initTimeout = 0; this.initTimeout = 0;
this.init = 1; this.init = 1;
this.setup(); this.setup();
} }
configure(args) { configure(args) {
super.configure(args); super.configure(args);
this.mouseMove = this.mouseMove.bind(this); this.mouseMove = this.mouseMove.bind(this);
this.mouseLeave = this.mouseLeave.bind(this); this.mouseLeave = this.mouseLeave.bind(this);
this.hoverRadio = args.hoverRadio || 0.1; this.hoverRadio = args.hoverRadio || 0.1;
this.config.startAngle = args.startAngle || 0; this.config.startAngle = args.startAngle || 0;
this.clockWise = args.clockWise || false; this.clockWise = args.clockWise || false;
} }
calc() { calc() {
super.calc(); super.calc();
let s = this.state; let s = this.state;
this.radius = (this.height > this.width ? this.center.x : this.center.y); this.radius = this.height > this.width ? this.center.x : this.center.y;
const { radius, clockWise } = this; const { radius, clockWise } = this;
const prevSlicesProperties = s.slicesProperties || []; const prevSlicesProperties = s.slicesProperties || [];
s.sliceStrings = []; s.sliceStrings = [];
s.slicesProperties = []; s.slicesProperties = [];
let curAngle = 180 - this.config.startAngle; let curAngle = 180 - this.config.startAngle;
s.sliceTotals.map((total, i) => { s.sliceTotals.map((total, i) => {
const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1 : 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = (curAngle = curAngle + diffAngle);
const startPosition = getPositionByAngle(startAngle, radius);
const endPosition = getPositionByAngle(endAngle, radius);
const startAngle = curAngle; const prevProperty = this.init && prevSlicesProperties[i];
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1 : 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius);
const endPosition = getPositionByAngle(endAngle, radius);
const prevProperty = this.init && prevSlicesProperties[i]; let curStart, curEnd;
if (this.init) {
curStart = prevProperty ? prevProperty.startPosition : startPosition;
curEnd = prevProperty ? prevProperty.endPosition : startPosition;
} else {
curStart = startPosition;
curEnd = endPosition;
}
const curPath =
originDiffAngle === 360
? makeCircleStr(
curStart,
curEnd,
this.center,
this.radius,
clockWise,
largeArc
)
: makeArcPathStr(
curStart,
curEnd,
this.center,
this.radius,
clockWise,
largeArc
);
let curStart, curEnd; s.sliceStrings.push(curPath);
if (this.init) { s.slicesProperties.push({
curStart = prevProperty ? prevProperty.startPosition : startPosition; startPosition,
curEnd = prevProperty ? prevProperty.endPosition : startPosition; endPosition,
} else { value: total,
curStart = startPosition; total: s.grandTotal,
curEnd = endPosition; startAngle,
} endAngle,
const curPath = angle: diffAngle,
originDiffAngle === 360 });
? makeCircleStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc) });
: makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc); this.init = 0;
}
s.sliceStrings.push(curPath); setupComponents() {
s.slicesProperties.push({ let s = this.state;
startPosition,
endPosition,
value: total,
total: s.grandTotal,
startAngle,
endAngle,
angle: diffAngle
});
});
this.init = 0;
}
setupComponents() { let componentConfigs = [
let s = this.state; [
"pieSlices",
{},
function () {
return {
sliceStrings: s.sliceStrings,
colors: this.colors,
};
}.bind(this),
],
];
let componentConfigs = [ this.components = new Map(
[ componentConfigs.map((args) => {
'pieSlices', let component = getComponent(...args);
{}, return [args[0], component];
function () { })
return { );
sliceStrings: s.sliceStrings, }
colors: this.colors
};
}.bind(this)
]
];
this.components = new Map(componentConfigs calTranslateByAngle(property) {
.map(args => { const { radius, hoverRadio } = this;
let component = getComponent(...args); const position = getPositionByAngle(
return [args[0], component]; property.startAngle + property.angle / 2,
})); radius
);
return `translate3d(${position.x * hoverRadio}px,${
position.y * hoverRadio
}px,0)`;
}
} hoverSlice(path, i, flag, e) {
if (!path) return;
const color = this.colors[i];
if (flag) {
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
path.style.fill = lightenDarkenColor(color, 50);
let g_off = getOffset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;
let title =
(this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels[i]
: this.state.labels[i]) + ": ";
let percent = (
(this.state.sliceTotals[i] * 100) /
this.state.grandTotal
).toFixed(1);
this.tip.setValues(x, y, { name: title, value: percent + "%" });
this.tip.showTip();
} else {
transform(path, "translate3d(0,0,0)");
this.tip.hideTip();
path.style.fill = color;
}
}
calTranslateByAngle(property) { bindTooltip() {
const { radius, hoverRadio } = this; this.container.addEventListener("mousemove", this.mouseMove);
const position = getPositionByAngle(property.startAngle + (property.angle / 2), radius); this.container.addEventListener("mouseleave", this.mouseLeave);
return `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`; }
} getDataPoint(index = this.state.currentIndex) {
let s = this.state;
let data_point = {
index: index,
label: s.labels[index],
values: s.sliceTotals[index],
};
return data_point;
}
setCurrentDataPoint(index) {
let s = this.state;
index = parseInt(index);
if (index < 0) index = 0;
if (index >= s.labels.length) index = s.labels.length - 1;
if (index === s.currentIndex) return;
s.currentIndex = index;
fire(this.parent, "data-select", this.getDataPoint());
}
hoverSlice(path, i, flag, e) { bindUnits() {
if (!path) return; const units = this.components.get("pieSlices").store;
const color = this.colors[i]; if (!units) return;
if (flag) { units.forEach((unit, index) => {
transform(path, this.calTranslateByAngle(this.state.slicesProperties[i])); unit.addEventListener("click", () => {
path.style.fill = lightenDarkenColor(color, 50); this.setCurrentDataPoint(index);
let g_off = getOffset(this.svg); });
let x = e.pageX - g_off.left + 10; });
let y = e.pageY - g_off.top - 10; }
let title = (this.formatted_labels && this.formatted_labels.length > 0 mouseMove(e) {
? this.formatted_labels[i] : this.state.labels[i]) + ': '; const target = e.target;
let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1); let slices = this.components.get("pieSlices").store;
this.tip.setValues(x, y, { name: title, value: percent + "%" }); let prevIndex = this.curActiveSliceIndex;
this.tip.showTip(); let prevAcitve = this.curActiveSlice;
} else { if (slices.includes(target)) {
transform(path, 'translate3d(0,0,0)'); let i = slices.indexOf(target);
this.tip.hideTip(); this.hoverSlice(prevAcitve, prevIndex, false);
path.style.fill = color; this.curActiveSlice = target;
} this.curActiveSliceIndex = i;
} this.hoverSlice(target, i, true, e);
} else {
this.mouseLeave();
}
}
bindTooltip() { mouseLeave() {
this.container.addEventListener('mousemove', this.mouseMove); this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
this.container.addEventListener('mouseleave', this.mouseLeave); }
}
getDataPoint(index = this.state.currentIndex) {
let s = this.state;
let data_point = {
index: index,
label: s.labels[index],
values: s.sliceTotals[index]
};
return data_point;
}
setCurrentDataPoint(index) {
let s = this.state;
index = parseInt(index);
if (index < 0) index = 0;
if (index >= s.labels.length) index = s.labels.length - 1;
if (index === s.currentIndex) return;
s.currentIndex = index;
fire(this.parent, "data-select", this.getDataPoint());
}
bindUnits() {
const units = this.components.get('pieSlices').store;
if (!units) return;
units.forEach((unit, index) => {
unit.addEventListener('click', () => {
this.setCurrentDataPoint(index);
});
});
}
mouseMove(e) {
const target = e.target;
let slices = this.components.get('pieSlices').store;
let prevIndex = this.curActiveSliceIndex;
let prevAcitve = this.curActiveSlice;
if (slices.includes(target)) {
let i = slices.indexOf(target);
this.hoverSlice(prevAcitve, prevIndex, false);
this.curActiveSlice = target;
this.curActiveSliceIndex = i;
this.hoverSlice(target, i, true, e);
} else {
this.mouseLeave();
}
}
mouseLeave() {
this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
}
} }

12
src/js/index.js
View File

@ -1,10 +1,10 @@
import * as Charts from './chart'; import * as Charts from "./chart";
let frappe = { }; let frappe = {};
frappe.NAME = 'Frappe Charts'; frappe.NAME = "Frappe Charts";
frappe.VERSION = '1.6.2'; frappe.VERSION = "1.6.2";
frappe = Object.assign({ }, frappe, Charts); frappe = Object.assign({}, frappe, Charts);
export default frappe; export default frappe;

836
src/js/objects/ChartComponents.js
View File

@ -1,450 +1,528 @@
import { makeSVGGroup } from '../utils/draw'; import { makeSVGGroup } from "../utils/draw";
import { makeText, makePath, xLine, yLine, yMarker, yRegion, datasetBar, datasetDot, percentageBar, getPaths, heatSquare } from '../utils/draw'; import {
import { equilizeNoOfElements } from '../utils/draw-utils'; makeText,
import { translateHoriLine, translateVertLine, animateRegion, animateBar, makePath,
animateDot, animatePath, animatePathStr } from '../utils/animate'; xLine,
import { getMonthName } from '../utils/date-utils'; yLine,
yMarker,
yRegion,
datasetBar,
datasetDot,
percentageBar,
getPaths,
heatSquare,
} from "../utils/draw";
import { equilizeNoOfElements } from "../utils/draw-utils";
import {
translateHoriLine,
translateVertLine,
animateRegion,
animateBar,
animateDot,
animatePath,
animatePathStr,
} from "../utils/animate";
import { getMonthName } from "../utils/date-utils";
class ChartComponent { class ChartComponent {
constructor({ constructor({
layerClass = '', layerClass = "",
layerTransform = '', layerTransform = "",
constants, constants,
getData, getData,
makeElements, makeElements,
animateElements animateElements,
}) { }) {
this.layerTransform = layerTransform; this.layerTransform = layerTransform;
this.constants = constants; this.constants = constants;
this.makeElements = makeElements; this.makeElements = makeElements;
this.getData = getData; this.getData = getData;
this.animateElements = animateElements; this.animateElements = animateElements;
this.store = []; this.store = [];
this.labels = []; this.labels = [];
this.layerClass = layerClass; this.layerClass = layerClass;
this.layerClass = typeof(this.layerClass) === 'function' this.layerClass =
? this.layerClass() : this.layerClass; typeof this.layerClass === "function"
? this.layerClass()
: this.layerClass;
this.refresh(); this.refresh();
} }
refresh(data) { refresh(data) {
this.data = data || this.getData(); this.data = data || this.getData();
} }
setup(parent) { setup(parent) {
this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent); this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent);
} }
make() { make() {
this.render(this.data); this.render(this.data);
this.oldData = this.data; this.oldData = this.data;
} }
render(data) { render(data) {
this.store = this.makeElements(data); this.store = this.makeElements(data);
this.layer.textContent = ''; this.layer.textContent = "";
this.store.forEach(element => { this.store.forEach((element) => {
this.layer.appendChild(element); this.layer.appendChild(element);
}); });
this.labels.forEach(element => { this.labels.forEach((element) => {
this.layer.appendChild(element); this.layer.appendChild(element);
}); });
} }
update(animate = true) { update(animate = true) {
this.refresh(); this.refresh();
let animateElements = []; let animateElements = [];
if(animate) { if (animate) {
animateElements = this.animateElements(this.data) || []; animateElements = this.animateElements(this.data) || [];
} }
return animateElements; return animateElements;
} }
} }
let componentConfigs = { let componentConfigs = {
donutSlices: { donutSlices: {
layerClass: 'donut-slices', layerClass: "donut-slices",
makeElements(data) { makeElements(data) {
return data.sliceStrings.map((s, i) => { return data.sliceStrings.map((s, i) => {
let slice = makePath(s, 'donut-path', data.colors[i], 'none', data.strokeWidth); let slice = makePath(
slice.style.transition = 'transform .3s;'; s,
return slice; "donut-path",
}); data.colors[i],
}, "none",
data.strokeWidth
);
slice.style.transition = "transform .3s;";
return slice;
});
},
animateElements(newData) { animateElements(newData) {
return this.store.map((slice, i) => animatePathStr(slice, newData.sliceStrings[i])); return this.store.map((slice, i) =>
}, animatePathStr(slice, newData.sliceStrings[i])
}, );
pieSlices: { },
layerClass: 'pie-slices', },
makeElements(data) { pieSlices: {
return data.sliceStrings.map((s, i) =>{ layerClass: "pie-slices",
let slice = makePath(s, 'pie-path', 'none', data.colors[i]); makeElements(data) {
slice.style.transition = 'transform .3s;'; return data.sliceStrings.map((s, i) => {
return slice; let slice = makePath(s, "pie-path", "none", data.colors[i]);
}); slice.style.transition = "transform .3s;";
}, return slice;
});
},
animateElements(newData) { animateElements(newData) {
return this.store.map((slice, i) => return this.store.map((slice, i) =>
animatePathStr(slice, newData.sliceStrings[i]) animatePathStr(slice, newData.sliceStrings[i])
); );
} },
}, },
percentageBars: { percentageBars: {
layerClass: 'percentage-bars', layerClass: "percentage-bars",
makeElements(data) { makeElements(data) {
const numberOfPoints = data.xPositions.length; const numberOfPoints = data.xPositions.length;
return data.xPositions.map((x, i) =>{ return data.xPositions.map((x, i) => {
let y = 0; let y = 0;
let isLast = i == numberOfPoints - 1; let isLast = i == numberOfPoints - 1;
let isFirst = i == 0; let isFirst = i == 0;
let bar = percentageBar(x, y, data.widths[i], this.constants.barHeight, isFirst, isLast, data.colors[i]); let bar = percentageBar(
return bar; x,
}); y,
}, data.widths[i],
this.constants.barHeight,
isFirst,
isLast,
data.colors[i]
);
return bar;
});
},
animateElements(newData) { animateElements(newData) {
if(newData) return []; if (newData) return [];
} },
}, },
yAxis: { yAxis: {
layerClass: 'y axis', layerClass: "y axis",
makeElements(data) { makeElements(data) {
return data.positions.map((position, i) => return data.positions.map((position, i) =>
yLine(position, data.labels[i], this.constants.width, yLine(position, data.labels[i], this.constants.width, {
{mode: this.constants.mode, pos: this.constants.pos, shortenNumbers: this.constants.shortenNumbers}) mode: this.constants.mode,
); pos: this.constants.pos,
}, shortenNumbers: this.constants.shortenNumbers,
})
);
},
animateElements(newData) { animateElements(newData) {
let newPos = newData.positions; let newPos = newData.positions;
let newLabels = newData.labels; let newLabels = newData.labels;
let oldPos = this.oldData.positions; let oldPos = this.oldData.positions;
let oldLabels = this.oldData.labels; let oldLabels = this.oldData.labels;
[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
this.render({ this.render({
positions: oldPos, positions: oldPos,
labels: newLabels labels: newLabels,
}); });
return this.store.map((line, i) => { return this.store.map((line, i) => {
return translateHoriLine( return translateHoriLine(line, newPos[i], oldPos[i]);
line, newPos[i], oldPos[i] });
); },
}); },
}
},
xAxis: { xAxis: {
layerClass: 'x axis', layerClass: "x axis",
makeElements(data) { makeElements(data) {
return data.positions.map((position, i) => return data.positions.map((position, i) =>
xLine(position, data.calcLabels[i], this.constants.height, xLine(position, data.calcLabels[i], this.constants.height, {
{mode: this.constants.mode, pos: this.constants.pos}) mode: this.constants.mode,
); pos: this.constants.pos,
}, })
);
},
animateElements(newData) { animateElements(newData) {
let newPos = newData.positions; let newPos = newData.positions;
let newLabels = newData.calcLabels; let newLabels = newData.calcLabels;
let oldPos = this.oldData.positions; let oldPos = this.oldData.positions;
let oldLabels = this.oldData.calcLabels; let oldLabels = this.oldData.calcLabels;
[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos); [oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
this.render({ this.render({
positions: oldPos, positions: oldPos,
calcLabels: newLabels calcLabels: newLabels,
}); });
return this.store.map((line, i) => { return this.store.map((line, i) => {
return translateVertLine( return translateVertLine(line, newPos[i], oldPos[i]);
line, newPos[i], oldPos[i] });
); },
}); },
}
},
yMarkers: { yMarkers: {
layerClass: 'y-markers', layerClass: "y-markers",
makeElements(data) { makeElements(data) {
return data.map(m => return data.map((m) =>
yMarker(m.position, m.label, this.constants.width, yMarker(m.position, m.label, this.constants.width, {
{labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'}) labelPos: m.options.labelPos,
); mode: "span",
}, lineType: "dashed",
animateElements(newData) { })
[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); );
},
animateElements(newData) {
[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);
let newPos = newData.map(d => d.position); let newPos = newData.map((d) => d.position);
let newLabels = newData.map(d => d.label); let newLabels = newData.map((d) => d.label);
let newOptions = newData.map(d => d.options); let newOptions = newData.map((d) => d.options);
let oldPos = this.oldData.map(d => d.position); let oldPos = this.oldData.map((d) => d.position);
this.render(oldPos.map((pos, i) => { this.render(
return { oldPos.map((pos, i) => {
position: oldPos[i], return {
label: newLabels[i], position: oldPos[i],
options: newOptions[i] label: newLabels[i],
}; options: newOptions[i],
})); };
})
);
return this.store.map((line, i) => { return this.store.map((line, i) => {
return translateHoriLine( return translateHoriLine(line, newPos[i], oldPos[i]);
line, newPos[i], oldPos[i] });
); },
}); },
}
},
yRegions: { yRegions: {
layerClass: 'y-regions', layerClass: "y-regions",
makeElements(data) { makeElements(data) {
return data.map(r => return data.map((r) =>
yRegion(r.startPos, r.endPos, this.constants.width, yRegion(r.startPos, r.endPos, this.constants.width, r.label, {
r.label, {labelPos: r.options.labelPos}) labelPos: r.options.labelPos,
); })
}, );
animateElements(newData) { },
[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData); animateElements(newData) {
[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);
let newPos = newData.map(d => d.endPos); let newPos = newData.map((d) => d.endPos);
let newLabels = newData.map(d => d.label); let newLabels = newData.map((d) => d.label);
let newStarts = newData.map(d => d.startPos); let newStarts = newData.map((d) => d.startPos);
let newOptions = newData.map(d => d.options); let newOptions = newData.map((d) => d.options);
let oldPos = this.oldData.map(d => d.endPos); let oldPos = this.oldData.map((d) => d.endPos);
let oldStarts = this.oldData.map(d => d.startPos); let oldStarts = this.oldData.map((d) => d.startPos);
this.render(oldPos.map((pos, i) => { this.render(
return { oldPos.map((pos, i) => {
startPos: oldStarts[i], return {
endPos: oldPos[i], startPos: oldStarts[i],
label: newLabels[i], endPos: oldPos[i],
options: newOptions[i] label: newLabels[i],
}; options: newOptions[i],
})); };
})
);
let animateElements = []; let animateElements = [];
this.store.map((rectGroup, i) => { this.store.map((rectGroup, i) => {
animateElements = animateElements.concat(animateRegion( animateElements = animateElements.concat(
rectGroup, newStarts[i], newPos[i], oldPos[i] animateRegion(rectGroup, newStarts[i], newPos[i], oldPos[i])
)); );
}); });
return animateElements; return animateElements;
} },
}, },
heatDomain: { heatDomain: {
layerClass: function() { return 'heat-domain domain-' + this.constants.index; }, layerClass: function () {
makeElements(data) { return "heat-domain domain-" + this.constants.index;
let {index, colWidth, rowHeight, squareSize, radius, xTranslate} = this.constants; },
let monthNameHeight = -12; makeElements(data) {
let x = xTranslate, y = 0; let { index, colWidth, rowHeight, squareSize, radius, xTranslate } =
this.constants;
let monthNameHeight = -12;
let x = xTranslate,
y = 0;
this.serializedSubDomains = []; this.serializedSubDomains = [];
data.cols.map((week, weekNo) => { data.cols.map((week, weekNo) => {
if(weekNo === 1) { if (weekNo === 1) {
this.labels.push( this.labels.push(
makeText('domain-name', x, monthNameHeight, getMonthName(index, true).toUpperCase(), makeText(
{ "domain-name",
fontSize: 9 x,
} monthNameHeight,
) getMonthName(index, true).toUpperCase(),
); {
} fontSize: 9,
week.map((day, i) => { }
if(day.fill) { )
let data = { );
'data-date': day.yyyyMmDd, }
'data-value': day.dataValue, week.map((day, i) => {
'data-day': i if (day.fill) {
}; let data = {
let square = heatSquare('day', x, y, squareSize, radius, day.fill, data); "data-date": day.yyyyMmDd,
this.serializedSubDomains.push(square); "data-value": day.dataValue,
} "data-day": i,
y += rowHeight; };
}); let square = heatSquare(
y = 0; "day",
x += colWidth; x,
}); y,
squareSize,
radius,
day.fill,
data
);
this.serializedSubDomains.push(square);
}
y += rowHeight;
});
y = 0;
x += colWidth;
});
return this.serializedSubDomains; return this.serializedSubDomains;
}, },
animateElements(newData) { animateElements(newData) {
if(newData) return []; if (newData) return [];
} },
}, },
barGraph: { barGraph: {
layerClass: function() { return 'dataset-units dataset-bars dataset-' + this.constants.index; }, layerClass: function () {
makeElements(data) { return "dataset-units dataset-bars dataset-" + this.constants.index;
let c = this.constants; },
this.unitType = 'bar'; makeElements(data) {
this.units = data.yPositions.map((y, j) => { let c = this.constants;
return datasetBar( this.unitType = "bar";
data.xPositions[j], this.units = data.yPositions.map((y, j) => {
y, return datasetBar(
data.barWidth, data.xPositions[j],
c.color, y,
data.labels[j], data.barWidth,
j, c.color,
data.offsets[j], data.labels[j],
{ j,
zeroLine: data.zeroLine, data.offsets[j],
barsWidth: data.barsWidth, {
minHeight: c.minHeight zeroLine: data.zeroLine,
} barsWidth: data.barsWidth,
); minHeight: c.minHeight,
}); }
return this.units; );
}, });
animateElements(newData) { return this.units;
let newXPos = newData.xPositions; },
let newYPos = newData.yPositions; animateElements(newData) {
let newOffsets = newData.offsets; let newXPos = newData.xPositions;
let newLabels = newData.labels; let newYPos = newData.yPositions;
let newOffsets = newData.offsets;
let newLabels = newData.labels;
let oldXPos = this.oldData.xPositions; let oldXPos = this.oldData.xPositions;
let oldYPos = this.oldData.yPositions; let oldYPos = this.oldData.yPositions;
let oldOffsets = this.oldData.offsets; let oldOffsets = this.oldData.offsets;
let oldLabels = this.oldData.labels; let oldLabels = this.oldData.labels;
[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
[oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets); [oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets);
[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels); [oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
this.render({ this.render({
xPositions: oldXPos, xPositions: oldXPos,
yPositions: oldYPos, yPositions: oldYPos,
offsets: oldOffsets, offsets: oldOffsets,
labels: newLabels, labels: newLabels,
zeroLine: this.oldData.zeroLine, zeroLine: this.oldData.zeroLine,
barsWidth: this.oldData.barsWidth, barsWidth: this.oldData.barsWidth,
barWidth: this.oldData.barWidth, barWidth: this.oldData.barWidth,
}); });
let animateElements = []; let animateElements = [];
this.store.map((bar, i) => { this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar( animateElements = animateElements.concat(
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], animateBar(
{zeroLine: newData.zeroLine} bar,
)); newXPos[i],
}); newYPos[i],
newData.barWidth,
newOffsets[i],
{ zeroLine: newData.zeroLine }
)
);
});
return animateElements; return animateElements;
} },
}, },
lineGraph: { lineGraph: {
layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; }, layerClass: function () {
makeElements(data) { return "dataset-units dataset-line dataset-" + this.constants.index;
let c = this.constants; },
this.unitType = 'dot'; makeElements(data) {
this.paths = {}; let c = this.constants;
if(!c.hideLine) { this.unitType = "dot";
this.paths = getPaths( this.paths = {};
data.xPositions, if (!c.hideLine) {
data.yPositions, this.paths = getPaths(
c.color, data.xPositions,
{ data.yPositions,
heatline: c.heatline, c.color,
regionFill: c.regionFill, {
spline: c.spline heatline: c.heatline,
}, regionFill: c.regionFill,
{ spline: c.spline,
svgDefs: c.svgDefs, },
zeroLine: data.zeroLine {
} svgDefs: c.svgDefs,
); zeroLine: data.zeroLine,
} }
);
}
this.units = []; this.units = [];
if(!c.hideDots) { if (!c.hideDots) {
this.units = data.yPositions.map((y, j) => { this.units = data.yPositions.map((y, j) => {
return datasetDot( return datasetDot(
data.xPositions[j], data.xPositions[j],
y, y,
data.radius, data.radius,
c.color, c.color,
(c.valuesOverPoints ? data.values[j] : ''), c.valuesOverPoints ? data.values[j] : "",
j j
); );
}); });
} }
return Object.values(this.paths).concat(this.units); return Object.values(this.paths).concat(this.units);
}, },
animateElements(newData) { animateElements(newData) {
let newXPos = newData.xPositions; let newXPos = newData.xPositions;
let newYPos = newData.yPositions; let newYPos = newData.yPositions;
let newValues = newData.values; let newValues = newData.values;
let oldXPos = this.oldData.xPositions; let oldXPos = this.oldData.xPositions;
let oldYPos = this.oldData.yPositions; let oldYPos = this.oldData.yPositions;
let oldValues = this.oldData.values; let oldValues = this.oldData.values;
[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos); [oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos); [oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues); [oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);
this.render({ this.render({
xPositions: oldXPos, xPositions: oldXPos,
yPositions: oldYPos, yPositions: oldYPos,
values: newValues, values: newValues,
zeroLine: this.oldData.zeroLine, zeroLine: this.oldData.zeroLine,
radius: this.oldData.radius, radius: this.oldData.radius,
}); });
let animateElements = []; let animateElements = [];
if(Object.keys(this.paths).length) { if (Object.keys(this.paths).length) {
animateElements = animateElements.concat(animatePath( animateElements = animateElements.concat(
this.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline)); animatePath(
} this.paths,
newXPos,
newYPos,
newData.zeroLine,
this.constants.spline
)
);
}
if(this.units.length) { if (this.units.length) {
this.units.map((dot, i) => { this.units.map((dot, i) => {
animateElements = animateElements.concat(animateDot( animateElements = animateElements.concat(
dot, newXPos[i], newYPos[i])); animateDot(dot, newXPos[i], newYPos[i])
}); );
} });
}
return animateElements; return animateElements;
} },
} },
}; };
export function getComponent(name, constants, getData) { export function getComponent(name, constants, getData) {
let keys = Object.keys(componentConfigs).filter(k => name.includes(k)); let keys = Object.keys(componentConfigs).filter((k) => name.includes(k));
let config = componentConfigs[keys[0]]; let config = componentConfigs[keys[0]];
Object.assign(config, { Object.assign(config, {
constants: constants, constants: constants,
getData: getData getData: getData,
}); });
return new ChartComponent(config); return new ChartComponent(config);
} }

214
src/js/objects/SvgTip.js
View File

@ -1,134 +1,132 @@
import { $ } from '../utils/dom'; import { $ } from "../utils/dom";
import { TOOLTIP_POINTER_TRIANGLE_HEIGHT } from '../utils/constants'; import { TOOLTIP_POINTER_TRIANGLE_HEIGHT } from "../utils/constants";
export default class SvgTip { export default class SvgTip {
constructor({ constructor({ parent = null, colors = [] }) {
parent = null, this.parent = parent;
colors = [] this.colors = colors;
}) { this.titleName = "";
this.parent = parent; this.titleValue = "";
this.colors = colors; this.listValues = [];
this.titleName = ''; this.titleValueFirst = 0;
this.titleValue = '';
this.listValues = [];
this.titleValueFirst = 0;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.top = 0; this.top = 0;
this.left = 0; this.left = 0;
this.setup(); this.setup();
} }
setup() { setup() {
this.makeTooltip(); this.makeTooltip();
} }
refresh() { refresh() {
this.fill(); this.fill();
this.calcPosition(); this.calcPosition();
} }
makeTooltip() { makeTooltip() {
this.container = $.create('div', { this.container = $.create("div", {
inside: this.parent, inside: this.parent,
className: 'graph-svg-tip comparison', className: "graph-svg-tip comparison",
innerHTML: `<span class="title"></span> innerHTML: `<span class="title"></span>
<ul class="data-point-list"></ul> <ul class="data-point-list"></ul>
<div class="svg-pointer"></div>` <div class="svg-pointer"></div>`,
}); });
this.hideTip(); this.hideTip();
this.title = this.container.querySelector('.title'); this.title = this.container.querySelector(".title");
this.list = this.container.querySelector('.data-point-list'); this.list = this.container.querySelector(".data-point-list");
this.dataPointList = this.container.querySelector('.data-point-list'); this.dataPointList = this.container.querySelector(".data-point-list");
this.parent.addEventListener('mouseleave', () => { this.parent.addEventListener("mouseleave", () => {
this.hideTip(); this.hideTip();
}); });
} }
fill() { fill() {
let title; let title;
if(this.index) { if (this.index) {
this.container.setAttribute('data-point-index', this.index); this.container.setAttribute("data-point-index", this.index);
} }
if(this.titleValueFirst) { if (this.titleValueFirst) {
title = `<strong>${this.titleValue}</strong>${this.titleName}`; title = `<strong>${this.titleValue}</strong>${this.titleName}`;
} else { } else {
title = `${this.titleName}<strong>${this.titleValue}</strong>`; title = `${this.titleName}<strong>${this.titleValue}</strong>`;
} }
if (this.listValues.length > 4) { if (this.listValues.length > 4) {
this.list.classList.add('tooltip-grid'); this.list.classList.add("tooltip-grid");
} else { } else {
this.list.classList.remove('tooltip-grid'); this.list.classList.remove("tooltip-grid");
} }
this.title.innerHTML = title; this.title.innerHTML = title;
this.dataPointList.innerHTML = ''; this.dataPointList.innerHTML = "";
this.listValues.map((set, i) => { this.listValues.map((set, i) => {
const color = this.colors[i] || 'black'; const color = this.colors[i] || "black";
let value = set.formatted === 0 || set.formatted ? set.formatted : set.value; let value =
let li = $.create('li', { set.formatted === 0 || set.formatted ? set.formatted : set.value;
innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div> let li = $.create("li", {
innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div>
<div> <div>
<div class="tooltip-value">${ value === 0 || value ? value : '' }</div> <div class="tooltip-value">${value === 0 || value ? value : ""}</div>
<div class="tooltip-label">${set.title ? set.title : '' }</div> <div class="tooltip-label">${set.title ? set.title : ""}</div>
</div>` </div>`,
}); });
this.dataPointList.appendChild(li); this.dataPointList.appendChild(li);
}); });
} }
calcPosition() { calcPosition() {
let width = this.container.offsetWidth; let width = this.container.offsetWidth;
this.top = this.y - this.container.offsetHeight this.top =
- TOOLTIP_POINTER_TRIANGLE_HEIGHT; this.y - this.container.offsetHeight - TOOLTIP_POINTER_TRIANGLE_HEIGHT;
this.left = this.x - width/2; this.left = this.x - width / 2;
let maxLeft = this.parent.offsetWidth - width; let maxLeft = this.parent.offsetWidth - width;
let pointer = this.container.querySelector('.svg-pointer'); let pointer = this.container.querySelector(".svg-pointer");
if(this.left < 0) { if (this.left < 0) {
pointer.style.left = `calc(50% - ${-1 * this.left}px)`; pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
this.left = 0; this.left = 0;
} else if(this.left > maxLeft) { } else if (this.left > maxLeft) {
let delta = this.left - maxLeft; let delta = this.left - maxLeft;
let pointerOffset = `calc(50% + ${delta}px)`; let pointerOffset = `calc(50% + ${delta}px)`;
pointer.style.left = pointerOffset; pointer.style.left = pointerOffset;
this.left = maxLeft; this.left = maxLeft;
} else { } else {
pointer.style.left = `50%`; pointer.style.left = `50%`;
} }
} }
setValues(x, y, title = {}, listValues = [], index = -1) { setValues(x, y, title = {}, listValues = [], index = -1) {
this.titleName = title.name; this.titleName = title.name;
this.titleValue = title.value; this.titleValue = title.value;
this.listValues = listValues; this.listValues = listValues;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.titleValueFirst = title.valueFirst || 0; this.titleValueFirst = title.valueFirst || 0;
this.index = index; this.index = index;
this.refresh(); this.refresh();
} }
hideTip() { hideTip() {
this.container.style.top = '0px'; this.container.style.top = "0px";
this.container.style.left = '0px'; this.container.style.left = "0px";
this.container.style.opacity = '0'; this.container.style.opacity = "0";
} }
showTip() { showTip() {
this.container.style.top = this.top + 'px'; this.container.style.top = this.top + "px";
this.container.style.left = this.left + 'px'; this.container.style.left = this.left + "px";
this.container.style.opacity = '1'; this.container.style.opacity = "1";
} }
} }

154
src/js/utils/animate.js
View File

@ -1,105 +1,121 @@
import { getBarHeightAndYAttr, getSplineCurvePointsStr } from './draw-utils'; import { getBarHeightAndYAttr, getSplineCurvePointsStr } from "./draw-utils";
export const UNIT_ANIM_DUR = 350; export const UNIT_ANIM_DUR = 350;
export const PATH_ANIM_DUR = 350; export const PATH_ANIM_DUR = 350;
export const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR; export const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
export const REPLACE_ALL_NEW_DUR = 250; export const REPLACE_ALL_NEW_DUR = 250;
export const STD_EASING = 'easein'; export const STD_EASING = "easein";
export function translate(unit, oldCoord, newCoord, duration) { export function translate(unit, oldCoord, newCoord, duration) {
let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', '); let old = typeof oldCoord === "string" ? oldCoord : oldCoord.join(", ");
return [ return [
unit, unit,
{transform: newCoord.join(', ')}, { transform: newCoord.join(", ") },
duration, duration,
STD_EASING, STD_EASING,
"translate", "translate",
{transform: old} { transform: old },
]; ];
} }
export function translateVertLine(xLine, newX, oldX) { export function translateVertLine(xLine, newX, oldX) {
return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR); return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
} }
export function translateHoriLine(yLine, newY, oldY) { export function translateHoriLine(yLine, newY, oldY) {
return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR); return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
} }
export function animateRegion(rectGroup, newY1, newY2, oldY2) { export function animateRegion(rectGroup, newY1, newY2, oldY2) {
let newHeight = newY1 - newY2; let newHeight = newY1 - newY2;
let rect = rectGroup.childNodes[0]; let rect = rectGroup.childNodes[0];
let width = rect.getAttribute("width"); let width = rect.getAttribute("width");
let rectAnim = [ let rectAnim = [
rect, rect,
{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` }, { height: newHeight, "stroke-dasharray": `${width}, ${newHeight}` },
MARKER_LINE_ANIM_DUR, MARKER_LINE_ANIM_DUR,
STD_EASING STD_EASING,
]; ];
let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR); let groupAnim = translate(
return [rectAnim, groupAnim]; rectGroup,
[0, oldY2],
[0, newY2],
MARKER_LINE_ANIM_DUR
);
return [rectAnim, groupAnim];
} }
export function animateBar(bar, x, yTop, width, offset=0, meta={}) { export function animateBar(bar, x, yTop, width, offset = 0, meta = {}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine); let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset; y -= offset;
if(bar.nodeName !== 'rect') { if (bar.nodeName !== "rect") {
let rect = bar.childNodes[0]; let rect = bar.childNodes[0];
let rectAnim = [ let rectAnim = [
rect, rect,
{width: width, height: height}, { width: width, height: height },
UNIT_ANIM_DUR, UNIT_ANIM_DUR,
STD_EASING STD_EASING,
]; ];
let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1); let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR); let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim]; return [rectAnim, groupAnim];
} else { } else {
return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]]; return [
} [
// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein); bar,
{ width: width, height: height, x: x, y: y },
UNIT_ANIM_DUR,
STD_EASING,
],
];
}
// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
} }
export function animateDot(dot, x, y) { export function animateDot(dot, x, y) {
if(dot.nodeName !== 'circle') { if (dot.nodeName !== "circle") {
let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1); let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR); let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [groupAnim]; return [groupAnim];
} else { } else {
return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]]; return [[dot, { cx: x, cy: y }, UNIT_ANIM_DUR, STD_EASING]];
} }
// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein); // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
} }
export function animatePath(paths, newXList, newYList, zeroLine, spline) { export function animatePath(paths, newXList, newYList, zeroLine, spline) {
let pathComponents = []; let pathComponents = [];
let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y)).join("L"); let pointsStr = newYList.map((y, i) => newXList[i] + "," + y).join("L");
if (spline) if (spline) pointsStr = getSplineCurvePointsStr(newXList, newYList);
pointsStr = getSplineCurvePointsStr(newXList, newYList);
const animPath = [paths.path, {d:"M" + pointsStr}, PATH_ANIM_DUR, STD_EASING]; const animPath = [
pathComponents.push(animPath); paths.path,
{ d: "M" + pointsStr },
PATH_ANIM_DUR,
STD_EASING,
];
pathComponents.push(animPath);
if(paths.region) { if (paths.region) {
let regStartPt = `${newXList[0]},${zeroLine}L`; let regStartPt = `${newXList[0]},${zeroLine}L`;
let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`; let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
const animRegion = [ const animRegion = [
paths.region, paths.region,
{d:"M" + regStartPt + pointsStr + regEndPt}, { d: "M" + regStartPt + pointsStr + regEndPt },
PATH_ANIM_DUR, PATH_ANIM_DUR,
STD_EASING STD_EASING,
]; ];
pathComponents.push(animRegion); pathComponents.push(animRegion);
} }
return pathComponents; return pathComponents;
} }
export function animatePathStr(oldPath, pathStr) { export function animatePathStr(oldPath, pathStr) {
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING]; return [oldPath, { d: pathStr }, UNIT_ANIM_DUR, STD_EASING];
} }

191
src/js/utils/animation.js
View File

@ -1,120 +1,133 @@
// Leveraging SMIL Animations // Leveraging SMIL Animations
import { REPLACE_ALL_NEW_DUR } from './animate'; import { REPLACE_ALL_NEW_DUR } from "./animate";
const EASING = { const EASING = {
ease: "0.25 0.1 0.25 1", ease: "0.25 0.1 0.25 1",
linear: "0 0 1 1", linear: "0 0 1 1",
// easein: "0.42 0 1 1", // easein: "0.42 0 1 1",
easein: "0.1 0.8 0.2 1", easein: "0.1 0.8 0.2 1",
easeout: "0 0 0.58 1", easeout: "0 0 0.58 1",
easeinout: "0.42 0 0.58 1" easeinout: "0.42 0 0.58 1",
}; };
function animateSVGElement(element, props, dur, easingType="linear", type=undefined, oldValues={}) { function animateSVGElement(
element,
props,
dur,
easingType = "linear",
type = undefined,
oldValues = {}
) {
let animElement = element.cloneNode(true);
let newElement = element.cloneNode(true);
let animElement = element.cloneNode(true); for (var attributeName in props) {
let newElement = element.cloneNode(true); let animateElement;
if (attributeName === "transform") {
animateElement = document.createElementNS(
"http://www.w3.org/2000/svg",
"animateTransform"
);
} else {
animateElement = document.createElementNS(
"http://www.w3.org/2000/svg",
"animate"
);
}
let currentValue =
oldValues[attributeName] || element.getAttribute(attributeName);
let value = props[attributeName];
for(var attributeName in props) { let animAttr = {
let animateElement; attributeName: attributeName,
if(attributeName === 'transform') { from: currentValue,
animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform"); to: value,
} else { begin: "0s",
animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animate"); dur: dur / 1000 + "s",
} values: currentValue + ";" + value,
let currentValue = oldValues[attributeName] || element.getAttribute(attributeName); keySplines: EASING[easingType],
let value = props[attributeName]; keyTimes: "0;1",
calcMode: "spline",
fill: "freeze",
};
let animAttr = { if (type) {
attributeName: attributeName, animAttr["type"] = type;
from: currentValue, }
to: value,
begin: "0s",
dur: dur/1000 + "s",
values: currentValue + ";" + value,
keySplines: EASING[easingType],
keyTimes: "0;1",
calcMode: "spline",
fill: 'freeze'
};
if(type) { for (var i in animAttr) {
animAttr["type"] = type; animateElement.setAttribute(i, animAttr[i]);
} }
for (var i in animAttr) { animElement.appendChild(animateElement);
animateElement.setAttribute(i, animAttr[i]);
}
animElement.appendChild(animateElement); if (type) {
newElement.setAttribute(attributeName, `translate(${value})`);
} else {
newElement.setAttribute(attributeName, value);
}
}
if(type) { return [animElement, newElement];
newElement.setAttribute(attributeName, `translate(${value})`);
} else {
newElement.setAttribute(attributeName, value);
}
}
return [animElement, newElement];
} }
export function transform(element, style) { // eslint-disable-line no-unused-vars export function transform(element, style) {
element.style.transform = style; // eslint-disable-line no-unused-vars
element.style.webkitTransform = style; element.style.transform = style;
element.style.msTransform = style; element.style.webkitTransform = style;
element.style.mozTransform = style; element.style.msTransform = style;
element.style.oTransform = style; element.style.mozTransform = style;
element.style.oTransform = style;
} }
function animateSVG(svgContainer, elements) { function animateSVG(svgContainer, elements) {
let newElements = []; let newElements = [];
let animElements = []; let animElements = [];
elements.map(element => { elements.map((element) => {
let unit = element[0]; let unit = element[0];
let parent = unit.parentNode; let parent = unit.parentNode;
let animElement, newElement; let animElement, newElement;
element[0] = unit; element[0] = unit;
[animElement, newElement] = animateSVGElement(...element); [animElement, newElement] = animateSVGElement(...element);
newElements.push(newElement); newElements.push(newElement);
animElements.push([animElement, parent]); animElements.push([animElement, parent]);
if (parent) {
parent.replaceChild(animElement, unit);
}
});
let animSvg = svgContainer.cloneNode(true); if (parent) {
parent.replaceChild(animElement, unit);
}
});
animElements.map((animElement, i) => { let animSvg = svgContainer.cloneNode(true);
if (animElement[1]) {
animElement[1].replaceChild(newElements[i], animElement[0]);
elements[i][0] = newElements[i];
}
});
return animSvg; animElements.map((animElement, i) => {
if (animElement[1]) {
animElement[1].replaceChild(newElements[i], animElement[0]);
elements[i][0] = newElements[i];
}
});
return animSvg;
} }
export function runSMILAnimation(parent, svgElement, elementsToAnimate) { export function runSMILAnimation(parent, svgElement, elementsToAnimate) {
if(elementsToAnimate.length === 0) return; if (elementsToAnimate.length === 0) return;
let animSvgElement = animateSVG(svgElement, elementsToAnimate); let animSvgElement = animateSVG(svgElement, elementsToAnimate);
if(svgElement.parentNode == parent) { if (svgElement.parentNode == parent) {
parent.removeChild(svgElement); parent.removeChild(svgElement);
parent.appendChild(animSvgElement); parent.appendChild(animSvgElement);
}
} // Replace the new svgElement (data has already been replaced)
setTimeout(() => {
// Replace the new svgElement (data has already been replaced) if (animSvgElement.parentNode == parent) {
setTimeout(() => { parent.removeChild(animSvgElement);
if(animSvgElement.parentNode == parent) { parent.appendChild(svgElement);
parent.removeChild(animSvgElement); }
parent.appendChild(svgElement); }, REPLACE_ALL_NEW_DUR);
}
}, REPLACE_ALL_NEW_DUR);
} }

219
src/js/utils/axis-chart-utils.js
View File

@ -1,130 +1,135 @@
import { fillArray } from '../utils/helpers'; import { fillArray } from "../utils/helpers";
import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH, import {
SERIES_LABEL_SPACE_RATIO } from '../utils/constants'; DEFAULT_AXIS_CHART_TYPE,
AXIS_DATASET_CHART_TYPES,
DEFAULT_CHAR_WIDTH,
SERIES_LABEL_SPACE_RATIO,
} from "../utils/constants";
export function dataPrep(data, type) { export function dataPrep(data, type) {
data.labels = data.labels || []; data.labels = data.labels || [];
let datasetLength = data.labels.length; let datasetLength = data.labels.length;
// Datasets // Datasets
let datasets = data.datasets; let datasets = data.datasets;
let zeroArray = new Array(datasetLength).fill(0); let zeroArray = new Array(datasetLength).fill(0);
if(!datasets) { if (!datasets) {
// default // default
datasets = [{ datasets = [
values: zeroArray {
}]; values: zeroArray,
} },
];
}
datasets.map(d=> { datasets.map((d) => {
// Set values // Set values
if(!d.values) { if (!d.values) {
d.values = zeroArray; d.values = zeroArray;
} else { } else {
// Check for non values // Check for non values
let vals = d.values; let vals = d.values;
vals = vals.map(val => (!isNaN(val) ? val : 0)); vals = vals.map((val) => (!isNaN(val) ? val : 0));
// Trim or extend // Trim or extend
if(vals.length > datasetLength) { if (vals.length > datasetLength) {
vals = vals.slice(0, datasetLength); vals = vals.slice(0, datasetLength);
} else { } else {
vals = fillArray(vals, datasetLength - vals.length, 0); vals = fillArray(vals, datasetLength - vals.length, 0);
} }
d.values = vals; d.values = vals;
} }
// Set type // Set type
if(!d.chartType ) { if (!d.chartType) {
if(!AXIS_DATASET_CHART_TYPES.includes(type)) type = DEFAULT_AXIS_CHART_TYPE; if (!AXIS_DATASET_CHART_TYPES.includes(type))
d.chartType = type; type = DEFAULT_AXIS_CHART_TYPE;
} d.chartType = type;
}
});
}); // Markers
// Markers // Regions
// data.yRegions = data.yRegions || [];
if (data.yRegions) {
data.yRegions.map((d) => {
if (d.end < d.start) {
[d.start, d.end] = [d.end, d.start];
}
});
}
// Regions return data;
// data.yRegions = data.yRegions || [];
if(data.yRegions) {
data.yRegions.map(d => {
if(d.end < d.start) {
[d.start, d.end] = [d.end, d.start];
}
});
}
return data;
} }
export function zeroDataPrep(realData) { export function zeroDataPrep(realData) {
let datasetLength = realData.labels.length; let datasetLength = realData.labels.length;
let zeroArray = new Array(datasetLength).fill(0); let zeroArray = new Array(datasetLength).fill(0);
let zeroData = { let zeroData = {
labels: realData.labels.slice(0, -1), labels: realData.labels.slice(0, -1),
datasets: realData.datasets.map(d => { datasets: realData.datasets.map((d) => {
return { return {
name: '', name: "",
values: zeroArray.slice(0, -1), values: zeroArray.slice(0, -1),
chartType: d.chartType chartType: d.chartType,
}; };
}), }),
}; };
if(realData.yMarkers) { if (realData.yMarkers) {
zeroData.yMarkers = [ zeroData.yMarkers = [
{ {
value: 0, value: 0,
label: '' label: "",
} },
]; ];
} }
if(realData.yRegions) { if (realData.yRegions) {
zeroData.yRegions = [ zeroData.yRegions = [
{ {
start: 0, start: 0,
end: 0, end: 0,
label: '' label: "",
} },
]; ];
} }
return zeroData; return zeroData;
} }
export function getShortenedLabels(chartWidth, labels=[], isSeries=true) { export function getShortenedLabels(chartWidth, labels = [], isSeries = true) {
let allowedSpace = (chartWidth / labels.length) * SERIES_LABEL_SPACE_RATIO; let allowedSpace = (chartWidth / labels.length) * SERIES_LABEL_SPACE_RATIO;
if(allowedSpace <= 0) allowedSpace = 1; if (allowedSpace <= 0) allowedSpace = 1;
let allowedLetters = allowedSpace / DEFAULT_CHAR_WIDTH; let allowedLetters = allowedSpace / DEFAULT_CHAR_WIDTH;
let seriesMultiple; let seriesMultiple;
if(isSeries) { if (isSeries) {
// Find the maximum label length for spacing calculations // Find the maximum label length for spacing calculations
let maxLabelLength = Math.max(...labels.map(label => label.length)); let maxLabelLength = Math.max(...labels.map((label) => label.length));
seriesMultiple = Math.ceil(maxLabelLength/allowedLetters); seriesMultiple = Math.ceil(maxLabelLength / allowedLetters);
} }
let calcLabels = labels.map((label, i) => { let calcLabels = labels.map((label, i) => {
label += ""; label += "";
if(label.length > allowedLetters) { if (label.length > allowedLetters) {
if (!isSeries) {
if (allowedLetters - 3 > 0) {
label = label.slice(0, allowedLetters - 3) + " ...";
} else {
label = label.slice(0, allowedLetters) + "..";
}
} else {
if (i % seriesMultiple !== 0 && i !== labels.length - 1) {
label = "";
}
}
}
return label;
});
if(!isSeries) { return calcLabels;
if(allowedLetters-3 > 0) {
label = label.slice(0, allowedLetters-3) + " ...";
} else {
label = label.slice(0, allowedLetters) + '..';
}
} else {
if(i % seriesMultiple !== 0 && i !== (labels.length - 1)) {
label = "";
}
}
}
return label;
});
return calcLabels;
} }

94
src/js/utils/colors.js
View File

@ -1,59 +1,61 @@
const PRESET_COLOR_MAP = { const PRESET_COLOR_MAP = {
'pink': '#F683AE', pink: "#F683AE",
'blue': '#318AD8', blue: "#318AD8",
'green': '#48BB74', green: "#48BB74",
'grey': '#A6B1B9', grey: "#A6B1B9",
'red': '#F56B6B', red: "#F56B6B",
'yellow': '#FACF7A', yellow: "#FACF7A",
'purple': '#44427B', purple: "#44427B",
'teal': '#5FD8C4', teal: "#5FD8C4",
'cyan': '#15CCEF', cyan: "#15CCEF",
'orange': '#F8814F', orange: "#F8814F",
'light-pink': '#FED7E5', "light-pink": "#FED7E5",
'light-blue': '#BFDDF7', "light-blue": "#BFDDF7",
'light-green': '#48BB74', "light-green": "#48BB74",
'light-grey': '#F4F5F6', "light-grey": "#F4F5F6",
'light-red': '#F6DFDF', "light-red": "#F6DFDF",
'light-yellow': '#FEE9BF', "light-yellow": "#FEE9BF",
'light-purple': '#E8E8F7', "light-purple": "#E8E8F7",
'light-teal': '#D3FDF6', "light-teal": "#D3FDF6",
'light-cyan': '#DDF8FD', "light-cyan": "#DDF8FD",
'light-orange': '#FECDB8' "light-orange": "#FECDB8",
}; };
function limitColor(r){ function limitColor(r) {
if (r > 255) return 255; if (r > 255) return 255;
else if (r < 0) return 0; else if (r < 0) return 0;
return r; return r;
} }
export function lightenDarkenColor(color, amt) { export function lightenDarkenColor(color, amt) {
let col = getColor(color); let col = getColor(color);
let usePound = false; let usePound = false;
if (col[0] == "#") { if (col[0] == "#") {
col = col.slice(1); col = col.slice(1);
usePound = true; usePound = true;
} }
let num = parseInt(col,16); let num = parseInt(col, 16);
let r = limitColor((num >> 16) + amt); let r = limitColor((num >> 16) + amt);
let b = limitColor(((num >> 8) & 0x00FF) + amt); let b = limitColor(((num >> 8) & 0x00ff) + amt);
let g = limitColor((num & 0x0000FF) + amt); let g = limitColor((num & 0x0000ff) + amt);
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
} }
export function isValidColor(string) { export function isValidColor(string) {
// https://stackoverflow.com/a/32685393 // https://stackoverflow.com/a/32685393
let HEX_RE = /(^\s*)(#)((?:[A-Fa-f0-9]{3}){1,2})$/i; let HEX_RE = /(^\s*)(#)((?:[A-Fa-f0-9]{3}){1,2})$/i;
let RGB_RE = /(^\s*)(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$/i; let RGB_RE =
return HEX_RE.test(string) || RGB_RE.test(string); /(^\s*)(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$/i;
return HEX_RE.test(string) || RGB_RE.test(string);
} }
export const getColor = (color) => { export const getColor = (color) => {
// When RGB color, convert to hexadecimal (alpha value is omitted) // When RGB color, convert to hexadecimal (alpha value is omitted)
if((/rgb[a]{0,1}\([\d, ]+\)/gim).test(color)) { if (/rgb[a]{0,1}\([\d, ]+\)/gim.test(color)) {
return (/\D+(\d*)\D+(\d*)\D+(\d*)/gim).exec(color) return /\D+(\d*)\D+(\d*)\D+(\d*)/gim
.map((x, i) => (i !== 0 ? Number(x).toString(16) : '#')) .exec(color)
.reduce((c, ch) => `${c}${ch}`); .map((x, i) => (i !== 0 ? Number(x).toString(16) : "#"))
} .reduce((c, ch) => `${c}${ch}`);
return PRESET_COLOR_MAP[color] || color; }
return PRESET_COLOR_MAP[color] || color;
}; };

138
src/js/utils/constants.js
View File

@ -1,75 +1,86 @@
export const ALL_CHART_TYPES = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie']; export const ALL_CHART_TYPES = [
"line",
"scatter",
"bar",
"percentage",
"heatmap",
"pie",
];
export const COMPATIBLE_CHARTS = { export const COMPATIBLE_CHARTS = {
bar: ['line', 'scatter', 'percentage', 'pie'], bar: ["line", "scatter", "percentage", "pie"],
line: ['scatter', 'bar', 'percentage', 'pie'], line: ["scatter", "bar", "percentage", "pie"],
pie: ['line', 'scatter', 'percentage', 'bar'], pie: ["line", "scatter", "percentage", "bar"],
percentage: ['bar', 'line', 'scatter', 'pie'], percentage: ["bar", "line", "scatter", "pie"],
heatmap: [] heatmap: [],
}; };
export const DATA_COLOR_DIVISIONS = { export const DATA_COLOR_DIVISIONS = {
bar: 'datasets', bar: "datasets",
line: 'datasets', line: "datasets",
pie: 'labels', pie: "labels",
percentage: 'labels', percentage: "labels",
heatmap: HEATMAP_DISTRIBUTION_SIZE heatmap: HEATMAP_DISTRIBUTION_SIZE,
}; };
export const BASE_MEASURES = { export const BASE_MEASURES = {
margins: { margins: {
top: 10, top: 10,
bottom: 10, bottom: 10,
left: 20, left: 20,
right: 20 right: 20,
}, },
paddings: { paddings: {
top: 20, top: 20,
bottom: 40, bottom: 40,
left: 30, left: 30,
right: 10 right: 10,
}, },
baseHeight: 240, baseHeight: 240,
titleHeight: 20, titleHeight: 20,
legendHeight: 30, legendHeight: 30,
titleFontSize: 12, titleFontSize: 12,
}; };
export function getTopOffset(m) { export function getTopOffset(m) {
return m.titleHeight + m.margins.top + m.paddings.top; return m.titleHeight + m.margins.top + m.paddings.top;
} }
export function getLeftOffset(m) { export function getLeftOffset(m) {
return m.margins.left + m.paddings.left; return m.margins.left + m.paddings.left;
} }
export function getExtraHeight(m) { export function getExtraHeight(m) {
let totalExtraHeight = m.margins.top + m.margins.bottom let totalExtraHeight =
+ m.paddings.top + m.paddings.bottom m.margins.top +
+ m.titleHeight + m.legendHeight; m.margins.bottom +
return totalExtraHeight; m.paddings.top +
m.paddings.bottom +
m.titleHeight +
m.legendHeight;
return totalExtraHeight;
} }
export function getExtraWidth(m) { export function getExtraWidth(m) {
let totalExtraWidth = m.margins.left + m.margins.right let totalExtraWidth =
+ m.paddings.left + m.paddings.right; m.margins.left + m.margins.right + m.paddings.left + m.paddings.right;
return totalExtraWidth; return totalExtraWidth;
} }
export const INIT_CHART_UPDATE_TIMEOUT = 700; export const INIT_CHART_UPDATE_TIMEOUT = 700;
export const CHART_POST_ANIMATE_TIMEOUT = 400; export const CHART_POST_ANIMATE_TIMEOUT = 400;
export const DEFAULT_AXIS_CHART_TYPE = 'line'; export const DEFAULT_AXIS_CHART_TYPE = "line";
export const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; export const AXIS_DATASET_CHART_TYPES = ["line", "bar"];
export const AXIS_LEGEND_BAR_SIZE = 100; export const AXIS_LEGEND_BAR_SIZE = 100;
export const SERIES_LABEL_SPACE_RATIO = 0.6; export const SERIES_LABEL_SPACE_RATIO = 0.6;
export const BAR_CHART_SPACE_RATIO = 0.5; export const BAR_CHART_SPACE_RATIO = 0.5;
export const MIN_BAR_PERCENT_HEIGHT = 0.00; export const MIN_BAR_PERCENT_HEIGHT = 0.0;
export const LINE_CHART_DOT_SIZE = 4; export const LINE_CHART_DOT_SIZE = 4;
export const DOT_OVERLAY_SIZE_INCR = 4; export const DOT_OVERLAY_SIZE_INCR = 4;
@ -86,18 +97,47 @@ export const HEATMAP_GUTTER_SIZE = 2;
export const DEFAULT_CHAR_WIDTH = 7; export const DEFAULT_CHAR_WIDTH = 7;
export const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 7.48; export const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 7.48;
const DEFAULT_CHART_COLORS = ['pink', 'blue', 'green', 'grey', 'red', 'yellow', 'purple', 'teal', 'cyan', 'orange']; const DEFAULT_CHART_COLORS = [
const HEATMAP_COLORS_GREEN = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']; "pink",
export const HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']; "blue",
export const HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']; "green",
"grey",
"red",
"yellow",
"purple",
"teal",
"cyan",
"orange",
];
const HEATMAP_COLORS_GREEN = [
"#ebedf0",
"#c6e48b",
"#7bc96f",
"#239a3b",
"#196127",
];
export const HEATMAP_COLORS_BLUE = [
"#ebedf0",
"#c0ddf9",
"#73b3f3",
"#3886e1",
"#17459e",
];
export const HEATMAP_COLORS_YELLOW = [
"#ebedf0",
"#fdf436",
"#ffc700",
"#ff9100",
"#06001c",
];
export const DEFAULT_COLORS = { export const DEFAULT_COLORS = {
bar: DEFAULT_CHART_COLORS, bar: DEFAULT_CHART_COLORS,
line: DEFAULT_CHART_COLORS, line: DEFAULT_CHART_COLORS,
pie: DEFAULT_CHART_COLORS, pie: DEFAULT_CHART_COLORS,
percentage: DEFAULT_CHART_COLORS, percentage: DEFAULT_CHART_COLORS,
heatmap: HEATMAP_COLORS_GREEN, heatmap: HEATMAP_COLORS_GREEN,
donut: DEFAULT_CHART_COLORS donut: DEFAULT_CHART_COLORS,
}; };
// Universal constants // Universal constants

131
src/js/utils/date-utils.js
View File

@ -6,91 +6,132 @@ export const DAYS_IN_YEAR = 375;
export const NO_OF_MILLIS = 1000; export const NO_OF_MILLIS = 1000;
export const SEC_IN_DAY = 86400; export const SEC_IN_DAY = 86400;
export const MONTH_NAMES = ["January", "February", "March", "April", "May", export const MONTH_NAMES = [
"June", "July", "August", "September", "October", "November", "December"]; "January",
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "February",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; "March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
export const MONTH_NAMES_SHORT = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
export const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; export const DAY_NAMES_SHORT = [
export const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Sun",
"Thursday", "Friday", "Saturday"]; "Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
];
export const DAY_NAMES = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
// https://stackoverflow.com/a/11252167/6495043 // https://stackoverflow.com/a/11252167/6495043
function treatAsUtc(date) { function treatAsUtc(date) {
let result = new Date(date); let result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset()); result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result; return result;
} }
export function toMidnightUTC(date) { export function toMidnightUTC(date) {
let result = new Date(date); let result = new Date(date);
result.setUTCHours(0, result.getTimezoneOffset(), 0, 0); result.setUTCHours(0, result.getTimezoneOffset(), 0, 0);
return result; return result;
} }
export function getYyyyMmDd(date) { export function getYyyyMmDd(date) {
let dd = date.getDate(); let dd = date.getDate();
let mm = date.getMonth() + 1; // getMonth() is zero-based let mm = date.getMonth() + 1; // getMonth() is zero-based
return [ return [
date.getFullYear(), date.getFullYear(),
(mm>9 ? '' : '0') + mm, (mm > 9 ? "" : "0") + mm,
(dd>9 ? '' : '0') + dd (dd > 9 ? "" : "0") + dd,
].join('-'); ].join("-");
} }
export function clone(date) { export function clone(date) {
return new Date(date.getTime()); return new Date(date.getTime());
} }
export function timestampSec(date) { export function timestampSec(date) {
return date.getTime()/NO_OF_MILLIS; return date.getTime() / NO_OF_MILLIS;
} }
export function timestampToMidnight(timestamp, roundAhead = false) { export function timestampToMidnight(timestamp, roundAhead = false) {
let midnightTs = Math.floor(timestamp - (timestamp % SEC_IN_DAY)); let midnightTs = Math.floor(timestamp - (timestamp % SEC_IN_DAY));
if(roundAhead) { if (roundAhead) {
return midnightTs + SEC_IN_DAY; return midnightTs + SEC_IN_DAY;
} }
return midnightTs; return midnightTs;
} }
// export function getMonthsBetween(startDate, endDate) {} // export function getMonthsBetween(startDate, endDate) {}
export function getWeeksBetween(startDate, endDate) { export function getWeeksBetween(startDate, endDate) {
let weekStartDate = setDayToSunday(startDate); let weekStartDate = setDayToSunday(startDate);
return Math.ceil(getDaysBetween(weekStartDate, endDate) / NO_OF_DAYS_IN_WEEK); return Math.ceil(getDaysBetween(weekStartDate, endDate) / NO_OF_DAYS_IN_WEEK);
} }
export function getDaysBetween(startDate, endDate) { export function getDaysBetween(startDate, endDate) {
let millisecondsPerDay = SEC_IN_DAY * NO_OF_MILLIS; let millisecondsPerDay = SEC_IN_DAY * NO_OF_MILLIS;
return (treatAsUtc(endDate) - treatAsUtc(startDate)) / millisecondsPerDay; return (treatAsUtc(endDate) - treatAsUtc(startDate)) / millisecondsPerDay;
} }
export function areInSameMonth(startDate, endDate) { export function areInSameMonth(startDate, endDate) {
return startDate.getMonth() === endDate.getMonth() return (
&& startDate.getFullYear() === endDate.getFullYear(); startDate.getMonth() === endDate.getMonth() &&
startDate.getFullYear() === endDate.getFullYear()
);
} }
export function getMonthName(i, short=false) { export function getMonthName(i, short = false) {
let monthName = MONTH_NAMES[i]; let monthName = MONTH_NAMES[i];
return short ? monthName.slice(0, 3) : monthName; return short ? monthName.slice(0, 3) : monthName;
} }
export function getLastDateInMonth (month, year) { export function getLastDateInMonth(month, year) {
return new Date(year, month + 1, 0); // 0: last day in previous month return new Date(year, month + 1, 0); // 0: last day in previous month
} }
// mutates // mutates
export function setDayToSunday(date) { export function setDayToSunday(date) {
let newDate = clone(date); let newDate = clone(date);
const day = newDate.getDay(); const day = newDate.getDay();
if(day !== 0) { if (day !== 0) {
addDays(newDate, (-1) * day); addDays(newDate, -1 * day);
} }
return newDate; return newDate;
} }
// mutates // mutates
export function addDays(date, numberOfDays) { export function addDays(date, numberOfDays) {
date.setDate(date.getDate() + numberOfDays); date.setDate(date.getDate() + numberOfDays);
} }

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

@ -1,137 +1,149 @@
export function $(expr, con) { export function $(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; return typeof expr === "string"
? (con || document).querySelector(expr)
: expr || null;
} }
export function findNodeIndex(node) export function findNodeIndex(node) {
{ var i = 0;
var i = 0; while (node.previousSibling) {
while (node.previousSibling) { node = node.previousSibling;
node = node.previousSibling; i++;
i++; }
} return i;
return i;
} }
$.create = (tag, o) => { $.create = (tag, o) => {
var element = document.createElement(tag); var element = document.createElement(tag);
for (var i in o) { for (var i in o) {
var val = o[i]; var val = o[i];
if (i === "inside") { if (i === "inside") {
$(val).appendChild(element); $(val).appendChild(element);
} } else if (i === "around") {
else if (i === "around") { var ref = $(val);
var ref = $(val); ref.parentNode.insertBefore(element, ref);
ref.parentNode.insertBefore(element, ref); element.appendChild(ref);
element.appendChild(ref); } else if (i === "styles") {
if (typeof val === "object") {
Object.keys(val).map((prop) => {
element.style[prop] = val[prop];
});
}
} else if (i in element) {
element[i] = val;
} else {
element.setAttribute(i, val);
}
}
} else if (i === "styles") { return element;
if(typeof val === "object") {
Object.keys(val).map(prop => {
element.style[prop] = val[prop];
});
}
} else if (i in element ) {
element[i] = val;
}
else {
element.setAttribute(i, val);
}
}
return element;
}; };
export function getOffset(element) { export function getOffset(element) {
let rect = element.getBoundingClientRect(); let rect = element.getBoundingClientRect();
return { return {
// https://stackoverflow.com/a/7436602/6495043 // https://stackoverflow.com/a/7436602/6495043
// rect.top varies with scroll, so we add whatever has been // rect.top varies with scroll, so we add whatever has been
// scrolled to it to get absolute distance from actual page top // scrolled to it to get absolute distance from actual page top
top: rect.top + (document.documentElement.scrollTop || document.body.scrollTop), top:
left: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft) rect.top +
}; (document.documentElement.scrollTop || document.body.scrollTop),
left:
rect.left +
(document.documentElement.scrollLeft || document.body.scrollLeft),
};
} }
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
// an element's offsetParent property will return null whenever it, or any of its parents, // an element's offsetParent property will return null whenever it, or any of its parents,
// is hidden via the display style property. // is hidden via the display style property.
export function isHidden(el) { export function isHidden(el) {
return (el.offsetParent === null); return el.offsetParent === null;
} }
export function isElementInViewport(el) { export function isElementInViewport(el) {
// Although straightforward: https://stackoverflow.com/a/7557433/6495043 // Although straightforward: https://stackoverflow.com/a/7557433/6495043
var rect = el.getBoundingClientRect(); var rect = el.getBoundingClientRect();
return ( return (
rect.top >= 0 && rect.top >= 0 &&
rect.left >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.bottom <=
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ (window.innerHeight ||
); document.documentElement.clientHeight) /*or $(window).height() */ &&
rect.right <=
(window.innerWidth ||
document.documentElement.clientWidth) /*or $(window).width() */
);
} }
export function getElementContentWidth(element) { export function getElementContentWidth(element) {
var styles = window.getComputedStyle(element); var styles = window.getComputedStyle(element);
var padding = parseFloat(styles.paddingLeft) + var padding =
parseFloat(styles.paddingRight); parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
return element.clientWidth - padding; return element.clientWidth - padding;
} }
export function bind(element, o){ export function bind(element, o) {
if (element) { if (element) {
for (var event in o) { for (var event in o) {
var callback = o[event]; var callback = o[event];
event.split(/\s+/).forEach(function (event) { event.split(/\s+/).forEach(function (event) {
element.addEventListener(event, callback); element.addEventListener(event, callback);
}); });
} }
} }
} }
export function unbind(element, o){ export function unbind(element, o) {
if (element) { if (element) {
for (var event in o) { for (var event in o) {
var callback = o[event]; var callback = o[event];
event.split(/\s+/).forEach(function(event) { event.split(/\s+/).forEach(function (event) {
element.removeEventListener(event, callback); element.removeEventListener(event, callback);
}); });
} }
} }
} }
export function fire(target, type, properties) { export function fire(target, type, properties) {
var evt = document.createEvent("HTMLEvents"); var evt = document.createEvent("HTMLEvents");
evt.initEvent(type, true, true ); evt.initEvent(type, true, true);
for (var j in properties) { for (var j in properties) {
evt[j] = properties[j]; evt[j] = properties[j];
} }
return target.dispatchEvent(evt); return target.dispatchEvent(evt);
} }
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
export function forEachNode(nodeList, callback, scope) { export function forEachNode(nodeList, callback, scope) {
if(!nodeList) return; if (!nodeList) return;
for (var i = 0; i < nodeList.length; i++) { for (var i = 0; i < nodeList.length; i++) {
callback.call(scope, nodeList[i], i); callback.call(scope, nodeList[i], i);
} }
} }
export function activate($parent, $child, commonClass, activeClass='active', index = -1) { export function activate(
let $children = $parent.querySelectorAll(`.${commonClass}.${activeClass}`); $parent,
$child,
commonClass,
activeClass = "active",
index = -1
) {
let $children = $parent.querySelectorAll(`.${commonClass}.${activeClass}`);
forEachNode($children, (node, i) => { forEachNode($children, (node, i) => {
if(index >= 0 && i <= index) return; if (index >= 0 && i <= index) return;
node.classList.remove(activeClass); node.classList.remove(activeClass);
}); });
$child.classList.add(activeClass); $child.classList.add(activeClass);
} }

162
src/js/utils/draw-utils.js
View File

@ -1,99 +1,103 @@
import { fillArray } from './helpers'; import { fillArray } from "./helpers";
export function getBarHeightAndYAttr(yTop, zeroLine) { export function getBarHeightAndYAttr(yTop, zeroLine) {
let height, y; let height, y;
if (yTop <= zeroLine) { if (yTop <= zeroLine) {
height = zeroLine - yTop; height = zeroLine - yTop;
y = yTop; y = yTop;
} else { } else {
height = yTop - zeroLine; height = yTop - zeroLine;
y = zeroLine; y = zeroLine;
} }
return [height, y]; return [height, y];
} }
export function equilizeNoOfElements(array1, array2, export function equilizeNoOfElements(
extraCount = array2.length - array1.length) { array1,
array2,
// Doesn't work if either has zero elements. extraCount = array2.length - array1.length
if(extraCount > 0) { ) {
array1 = fillArray(array1, extraCount); // Doesn't work if either has zero elements.
} else { if (extraCount > 0) {
array2 = fillArray(array2, extraCount); array1 = fillArray(array1, extraCount);
} } else {
return [array1, array2]; array2 = fillArray(array2, extraCount);
}
return [array1, array2];
} }
export function truncateString(txt, len) { export function truncateString(txt, len) {
if (!txt) { if (!txt) {
return; return;
} }
if (txt.length > len) { if (txt.length > len) {
return txt.slice(0, len-3) + '...'; return txt.slice(0, len - 3) + "...";
} else { } else {
return txt; return txt;
} }
} }
export function shortenLargeNumber(label) { export function shortenLargeNumber(label) {
let number; let number;
if (typeof label === 'number') number = label; if (typeof label === "number") number = label;
else if (typeof label === 'string') { else if (typeof label === "string") {
number = Number(label); number = Number(label);
if (Number.isNaN(number)) return label; if (Number.isNaN(number)) return label;
} }
// Using absolute since log wont work for negative numbers // Using absolute since log wont work for negative numbers
let p = Math.floor(Math.log10(Math.abs(number))); let p = Math.floor(Math.log10(Math.abs(number)));
if (p <= 2) return number; // Return as is for a 3 digit number of less if (p <= 2) return number; // Return as is for a 3 digit number of less
let l = Math.floor(p / 3); let l = Math.floor(p / 3);
let shortened = (Math.pow(10, p - l * 3) * +(number / Math.pow(10, p)).toFixed(1)); let shortened =
Math.pow(10, p - l * 3) * +(number / Math.pow(10, p)).toFixed(1);
// Correct for floating point error upto 2 decimal places // Correct for floating point error upto 2 decimal places
return Math.round(shortened*100)/100 + ' ' + ['', 'K', 'M', 'B', 'T'][l]; return Math.round(shortened * 100) / 100 + " " + ["", "K", "M", "B", "T"][l];
} }
// cubic bezier curve calculation (from example by François Romain) // cubic bezier curve calculation (from example by François Romain)
export function getSplineCurvePointsStr(xList, yList) { export function getSplineCurvePointsStr(xList, yList) {
let points = [];
for (let i = 0; i < xList.length; i++) {
points.push([xList[i], yList[i]]);
}
let points=[]; let smoothing = 0.2;
for(let i=0;i<xList.length;i++){ let line = (pointA, pointB) => {
points.push([xList[i], yList[i]]); let lengthX = pointB[0] - pointA[0];
} let lengthY = pointB[1] - pointA[1];
return {
length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
angle: Math.atan2(lengthY, lengthX),
};
};
let smoothing = 0.2; let controlPoint = (current, previous, next, reverse) => {
let line = (pointA, pointB) => { let p = previous || current;
let lengthX = pointB[0] - pointA[0]; let n = next || current;
let lengthY = pointB[1] - pointA[1]; let o = line(p, n);
return { let angle = o.angle + (reverse ? Math.PI : 0);
length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)), let length = o.length * smoothing;
angle: Math.atan2(lengthY, lengthX) let x = current[0] + Math.cos(angle) * length;
}; let y = current[1] + Math.sin(angle) * length;
}; return [x, y];
};
let controlPoint = (current, previous, next, reverse) => {
let p = previous || current; let bezierCommand = (point, i, a) => {
let n = next || current; let cps = controlPoint(a[i - 1], a[i - 2], point);
let o = line(p, n); let cpe = controlPoint(point, a[i - 1], a[i + 1], true);
let angle = o.angle + (reverse ? Math.PI : 0); return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
let length = o.length * smoothing; };
let x = current[0] + Math.cos(angle) * length;
let y = current[1] + Math.sin(angle) * length; let pointStr = (points, command) => {
return [x, y]; return points.reduce(
}; (acc, point, i, a) =>
i === 0 ? `${point[0]},${point[1]}` : `${acc} ${command(point, i, a)}`,
let bezierCommand = (point, i, a) => { ""
let cps = controlPoint(a[i - 1], a[i - 2], point); );
let cpe = controlPoint(point, a[i - 1], a[i + 1], true); };
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}; return pointStr(points, bezierCommand);
let pointStr = (points, command) => {
return points.reduce((acc, point, i, a) => i === 0
? `${point[0]},${point[1]}`
: `${acc} ${command(point, i, a)}`, '');
};
return pointStr(points, bezierCommand);
} }

1302
src/js/utils/draw.js
View File

File diff suppressed because it is too large Load Diff

50
src/js/utils/export.js
View File

@ -1,33 +1,33 @@
import { $ } from '../utils/dom'; import { $ } from "../utils/dom";
import { CSSTEXT } from '../../css/chartsCss'; import { CSSTEXT } from "../../css/chartsCss";
export function downloadFile(filename, data) { export function downloadFile(filename, data) {
var a = document.createElement('a'); var a = document.createElement("a");
a.style = "display: none"; a.style = "display: none";
var blob = new Blob(data, {type: "image/svg+xml; charset=utf-8"}); var blob = new Blob(data, { type: "image/svg+xml; charset=utf-8" });
var url = window.URL.createObjectURL(blob); var url = window.URL.createObjectURL(blob);
a.href = url; a.href = url;
a.download = filename; a.download = filename;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
setTimeout(function(){ setTimeout(function () {
document.body.removeChild(a); document.body.removeChild(a);
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
}, 300); }, 300);
} }
export function prepareForExport(svg) { export function prepareForExport(svg) {
let clone = svg.cloneNode(true); let clone = svg.cloneNode(true);
clone.classList.add('chart-container'); clone.classList.add("chart-container");
clone.setAttribute('xmlns', "http://www.w3.org/2000/svg"); clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
clone.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink"); clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
let styleEl = $.create('style', { let styleEl = $.create("style", {
'innerHTML': CSSTEXT innerHTML: CSSTEXT,
}); });
clone.insertBefore(styleEl, clone.firstChild); clone.insertBefore(styleEl, clone.firstChild);
let container = $.create('div'); let container = $.create("div");
container.appendChild(clone); container.appendChild(clone);
return container.innerHTML; return container.innerHTML;
} }

128
src/js/utils/helpers.js
View File

@ -1,11 +1,11 @@
import { ANGLE_RATIO } from './constants'; import { ANGLE_RATIO } from "./constants";
/** /**
* Returns the value of a number upto 2 decimal places. * Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number * @param {Number} d Any number
*/ */
export function floatTwo(d) { export function floatTwo(d) {
return parseFloat(d.toFixed(2)); return parseFloat(d.toFixed(2));
} }
/** /**
@ -14,12 +14,12 @@ export function floatTwo(d) {
* @param {Array} arr2 Second array * @param {Array} arr2 Second array
*/ */
export function arraysEqual(arr1, arr2) { export function arraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length) return false; if (arr1.length !== arr2.length) return false;
let areEqual = true; let areEqual = true;
arr1.map((d, i) => { arr1.map((d, i) => {
if (arr2[i] !== d) areEqual = false; if (arr2[i] !== d) areEqual = false;
}); });
return areEqual; return areEqual;
} }
/** /**
@ -27,16 +27,16 @@ export function arraysEqual(arr1, arr2) {
* @param {Array} array An array containing the items. * @param {Array} array An array containing the items.
*/ */
export function shuffle(array) { export function shuffle(array) {
// Awesomeness: https://bost.ocks.org/mike/shuffle/ // Awesomeness: https://bost.ocks.org/mike/shuffle/
// https://stackoverflow.com/a/2450976/6495043 // https://stackoverflow.com/a/2450976/6495043
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1 // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]; [array[i], array[j]] = [array[j], array[i]];
} }
return array; return array;
} }
/** /**
@ -47,12 +47,12 @@ export function shuffle(array) {
* @param {Boolean} start fill at start? * @param {Boolean} start fill at start?
*/ */
export function fillArray(array, count, element, start = false) { export function fillArray(array, count, element, start = false) {
if (!element) { if (!element) {
element = start ? array[0] : array[array.length - 1]; element = start ? array[0] : array[array.length - 1];
} }
let fillerArray = new Array(Math.abs(count)).fill(element); let fillerArray = new Array(Math.abs(count)).fill(element);
array = start ? fillerArray.concat(array) : array.concat(fillerArray); array = start ? fillerArray.concat(array) : array.concat(fillerArray);
return array; return array;
} }
/** /**
@ -61,36 +61,36 @@ export function fillArray(array, count, element, start = false) {
* @param {Number} charWidth Width of single char in pixels * @param {Number} charWidth Width of single char in pixels
*/ */
export function getStringWidth(string, charWidth) { export function getStringWidth(string, charWidth) {
return (string + "").length * charWidth; return (string + "").length * charWidth;
} }
export function bindChange(obj, getFn, setFn) { export function bindChange(obj, getFn, setFn) {
return new Proxy(obj, { return new Proxy(obj, {
set: function (target, prop, value) { set: function (target, prop, value) {
setFn(); setFn();
return Reflect.set(target, prop, value); return Reflect.set(target, prop, value);
}, },
get: function (target, prop) { get: function (target, prop) {
getFn(); getFn();
return Reflect.get(target, prop); return Reflect.get(target, prop);
} },
}); });
} }
// https://stackoverflow.com/a/29325222 // https://stackoverflow.com/a/29325222
export function getRandomBias(min, max, bias, influence) { export function getRandomBias(min, max, bias, influence) {
const range = max - min; const range = max - min;
const biasValue = range * bias + min; const biasValue = range * bias + min;
var rnd = Math.random() * range + min, // random in range var rnd = Math.random() * range + min, // random in range
mix = Math.random() * influence; // random mixer mix = Math.random() * influence; // random mixer
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
} }
export function getPositionByAngle(angle, radius) { export function getPositionByAngle(angle, radius) {
return { return {
x: Math.sin(angle * ANGLE_RATIO) * radius, x: Math.sin(angle * ANGLE_RATIO) * radius,
y: Math.cos(angle * ANGLE_RATIO) * radius, y: Math.cos(angle * ANGLE_RATIO) * radius,
}; };
} }
/** /**
@ -99,11 +99,11 @@ export function getPositionByAngle(angle, radius) {
* @param {Boolean} nonNegative flag to treat negative number as invalid * @param {Boolean} nonNegative flag to treat negative number as invalid
*/ */
export function isValidNumber(candidate, nonNegative = false) { export function isValidNumber(candidate, nonNegative = false) {
if (Number.isNaN(candidate)) return false; if (Number.isNaN(candidate)) return false;
else if (candidate === undefined) return false; else if (candidate === undefined) return false;
else if (!Number.isFinite(candidate)) return false; else if (!Number.isFinite(candidate)) return false;
else if (nonNegative && candidate < 0) return false; else if (nonNegative && candidate < 0) return false;
else return true; else return true;
} }
/** /**
@ -111,9 +111,9 @@ export function isValidNumber(candidate, nonNegative = false) {
* @param {Number} d Any Number * @param {Number} d Any Number
*/ */
export function round(d) { export function round(d) {
// https://floating-point-gui.de/ // https://floating-point-gui.de/
// https://www.jacklmoore.com/notes/rounding-in-javascript/ // https://www.jacklmoore.com/notes/rounding-in-javascript/
return Number(Math.round(d + 'e4') + 'e-4'); return Number(Math.round(d + "e4") + "e-4");
} }
/** /**
@ -121,23 +121,23 @@ export function round(d) {
* @param {Object} candidate Any Object * @param {Object} candidate Any Object
*/ */
export function deepClone(candidate) { export function deepClone(candidate) {
let cloned, value, key; let cloned, value, key;
if (candidate instanceof Date) { if (candidate instanceof Date) {
return new Date(candidate.getTime()); return new Date(candidate.getTime());
} }
if (typeof candidate !== "object" || candidate === null) { if (typeof candidate !== "object" || candidate === null) {
return candidate; return candidate;
} }
cloned = Array.isArray(candidate) ? [] : {}; cloned = Array.isArray(candidate) ? [] : {};
for (key in candidate) { for (key in candidate) {
value = candidate[key]; value = candidate[key];
cloned[key] = deepClone(value); cloned[key] = deepClone(value);
} }
return cloned; return cloned;
} }

350
src/js/utils/intervals.js
View File

@ -1,247 +1,247 @@
import { floatTwo } from './helpers'; import { floatTwo } from "./helpers";
function normalize(x) { function normalize(x) {
// Calculates mantissa and exponent of a number // Calculates mantissa and exponent of a number
// Returns normalized number and exponent // Returns normalized number and exponent
// https://stackoverflow.com/q/9383593/6495043 // https://stackoverflow.com/q/9383593/6495043
if(x===0) { if (x === 0) {
return [0, 0]; return [0, 0];
} }
if(isNaN(x)) { if (isNaN(x)) {
return {mantissa: -6755399441055744, exponent: 972}; return { mantissa: -6755399441055744, exponent: 972 };
} }
var sig = x > 0 ? 1 : -1; var sig = x > 0 ? 1 : -1;
if(!isFinite(x)) { if (!isFinite(x)) {
return {mantissa: sig * 4503599627370496, exponent: 972}; return { mantissa: sig * 4503599627370496, exponent: 972 };
} }
x = Math.abs(x); x = Math.abs(x);
var exp = Math.floor(Math.log10(x)); var exp = Math.floor(Math.log10(x));
var man = x/Math.pow(10, exp); var man = x / Math.pow(10, exp);
return [sig * man, exp]; return [sig * man, exp];
} }
function getChartRangeIntervals(max, min=0) { function getChartRangeIntervals(max, min = 0) {
let upperBound = Math.ceil(max); let upperBound = Math.ceil(max);
let lowerBound = Math.floor(min); let lowerBound = Math.floor(min);
let range = upperBound - lowerBound; let range = upperBound - lowerBound;
let noOfParts = range; let noOfParts = range;
let partSize = 1; let partSize = 1;
// To avoid too many partitions // To avoid too many partitions
if(range > 5) { if (range > 5) {
if(range % 2 !== 0) { if (range % 2 !== 0) {
upperBound++; upperBound++;
// Recalc range // Recalc range
range = upperBound - lowerBound; range = upperBound - lowerBound;
} }
noOfParts = range/2; noOfParts = range / 2;
partSize = 2; partSize = 2;
} }
// Special case: 1 and 2 // Special case: 1 and 2
if(range <= 2) { if (range <= 2) {
noOfParts = 4; noOfParts = 4;
partSize = range/noOfParts; partSize = range / noOfParts;
} }
// Special case: 0 // Special case: 0
if(range === 0) { if (range === 0) {
noOfParts = 5; noOfParts = 5;
partSize = 1; partSize = 1;
} }
let intervals = []; let intervals = [];
for(var i = 0; i <= noOfParts; i++){ for (var i = 0; i <= noOfParts; i++) {
intervals.push(lowerBound + partSize * i); intervals.push(lowerBound + partSize * i);
} }
return intervals; return intervals;
} }
function getChartIntervals(maxValue, minValue=0) { function getChartIntervals(maxValue, minValue = 0) {
let [normalMaxValue, exponent] = normalize(maxValue); let [normalMaxValue, exponent] = normalize(maxValue);
let normalMinValue = minValue ? minValue/Math.pow(10, exponent): 0; let normalMinValue = minValue ? minValue / Math.pow(10, exponent) : 0;
// Allow only 7 significant digits // Allow only 7 significant digits
normalMaxValue = normalMaxValue.toFixed(6); normalMaxValue = normalMaxValue.toFixed(6);
let intervals = getChartRangeIntervals(normalMaxValue, normalMinValue); let intervals = getChartRangeIntervals(normalMaxValue, normalMinValue);
intervals = intervals.map(value => { intervals = intervals.map((value) => {
// For negative exponents we want to divide by 10^-exponent to avoid // For negative exponents we want to divide by 10^-exponent to avoid
// floating point arithmetic bugs. For instance, in javascript // floating point arithmetic bugs. For instance, in javascript
// 6 * 10^-1 == 0.6000000000000001, we instead want 6 / 10^1 == 0.6 // 6 * 10^-1 == 0.6000000000000001, we instead want 6 / 10^1 == 0.6
if (exponent < 0) { if (exponent < 0) {
return value / Math.pow(10, -exponent); return value / Math.pow(10, -exponent);
} }
return value * Math.pow(10, exponent); return value * Math.pow(10, exponent);
}); });
return intervals; return intervals;
} }
export function calcChartIntervals(values, withMinimum=false) { export function calcChartIntervals(values, withMinimum = false) {
//*** Where the magic happens *** //*** Where the magic happens ***
// Calculates best-fit y intervals from given values // Calculates best-fit y intervals from given values
// and returns the interval array // and returns the interval array
let maxValue = Math.max(...values); let maxValue = Math.max(...values);
let minValue = Math.min(...values); let minValue = Math.min(...values);
// Exponent to be used for pretty print // Exponent to be used for pretty print
let exponent = 0, intervals = []; // eslint-disable-line no-unused-vars let exponent = 0,
intervals = []; // eslint-disable-line no-unused-vars
function getPositiveFirstIntervals(maxValue, absMinValue) { function getPositiveFirstIntervals(maxValue, absMinValue) {
let intervals = getChartIntervals(maxValue); let intervals = getChartIntervals(maxValue);
let intervalSize = intervals[1] - intervals[0]; let intervalSize = intervals[1] - intervals[0];
// Then unshift the negative values // Then unshift the negative values
let value = 0; let value = 0;
for(var i = 1; value < absMinValue; i++) { for (var i = 1; value < absMinValue; i++) {
value += intervalSize; value += intervalSize;
intervals.unshift((-1) * value); intervals.unshift(-1 * value);
} }
return intervals; return intervals;
} }
// CASE I: Both non-negative // CASE I: Both non-negative
if(maxValue >= 0 && minValue >= 0) { if (maxValue >= 0 && minValue >= 0) {
exponent = normalize(maxValue)[1]; exponent = normalize(maxValue)[1];
if(!withMinimum) { if (!withMinimum) {
intervals = getChartIntervals(maxValue); intervals = getChartIntervals(maxValue);
} else { } else {
intervals = getChartIntervals(maxValue, minValue); intervals = getChartIntervals(maxValue, minValue);
} }
} }
// CASE II: Only minValue negative // CASE II: Only minValue negative
else if (maxValue > 0 && minValue < 0) {
// `withMinimum` irrelevant in this case,
// We'll be handling both sides of zero separately
// (both starting from zero)
// Because ceil() and floor() behave differently
// in those two regions
else if(maxValue > 0 && minValue < 0) { let absMinValue = Math.abs(minValue);
// `withMinimum` irrelevant in this case,
// We'll be handling both sides of zero separately
// (both starting from zero)
// Because ceil() and floor() behave differently
// in those two regions
let absMinValue = Math.abs(minValue); if (maxValue >= absMinValue) {
exponent = normalize(maxValue)[1];
intervals = getPositiveFirstIntervals(maxValue, absMinValue);
} else {
// Mirror: maxValue => absMinValue, then change sign
exponent = normalize(absMinValue)[1];
let posIntervals = getPositiveFirstIntervals(absMinValue, maxValue);
intervals = posIntervals.reverse().map((d) => d * -1);
}
}
if(maxValue >= absMinValue) { // CASE III: Both non-positive
exponent = normalize(maxValue)[1]; else if (maxValue <= 0 && minValue <= 0) {
intervals = getPositiveFirstIntervals(maxValue, absMinValue); // Mirrored Case I:
} else { // Work with positives, then reverse the sign and array
// Mirror: maxValue => absMinValue, then change sign
exponent = normalize(absMinValue)[1];
let posIntervals = getPositiveFirstIntervals(absMinValue, maxValue);
intervals = posIntervals.reverse().map(d => d * (-1));
}
} let pseudoMaxValue = Math.abs(minValue);
let pseudoMinValue = Math.abs(maxValue);
// CASE III: Both non-positive exponent = normalize(pseudoMaxValue)[1];
if (!withMinimum) {
intervals = getChartIntervals(pseudoMaxValue);
} else {
intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);
}
else if(maxValue <= 0 && minValue <= 0) { intervals = intervals.reverse().map((d) => d * -1);
// Mirrored Case I: }
// Work with positives, then reverse the sign and array
let pseudoMaxValue = Math.abs(minValue); return intervals.sort((a, b) => a - b);
let pseudoMinValue = Math.abs(maxValue);
exponent = normalize(pseudoMaxValue)[1];
if(!withMinimum) {
intervals = getChartIntervals(pseudoMaxValue);
} else {
intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);
}
intervals = intervals.reverse().map(d => d * (-1));
}
return intervals.sort((a, b) => (a - b));
} }
export function getZeroIndex(yPts) { export function getZeroIndex(yPts) {
let zeroIndex; let zeroIndex;
let interval = getIntervalSize(yPts); let interval = getIntervalSize(yPts);
if(yPts.indexOf(0) >= 0) { if (yPts.indexOf(0) >= 0) {
// the range has a given zero // the range has a given zero
// zero-line on the chart // zero-line on the chart
zeroIndex = yPts.indexOf(0); zeroIndex = yPts.indexOf(0);
} else if(yPts[0] > 0) { } else if (yPts[0] > 0) {
// Minimum value is positive // Minimum value is positive
// zero-line is off the chart: below // zero-line is off the chart: below
let min = yPts[0]; let min = yPts[0];
zeroIndex = (-1) * min / interval; zeroIndex = (-1 * min) / interval;
} else { } else {
// Maximum value is negative // Maximum value is negative
// zero-line is off the chart: above // zero-line is off the chart: above
let max = yPts[yPts.length - 1]; let max = yPts[yPts.length - 1];
zeroIndex = (-1) * max / interval + (yPts.length - 1); zeroIndex = (-1 * max) / interval + (yPts.length - 1);
} }
return zeroIndex; return zeroIndex;
} }
export function getRealIntervals(max, noOfIntervals, min = 0, asc = 1) { export function getRealIntervals(max, noOfIntervals, min = 0, asc = 1) {
let range = max - min; let range = max - min;
let part = range * 1.0 / noOfIntervals; let part = (range * 1.0) / noOfIntervals;
let intervals = []; let intervals = [];
for(var i = 0; i <= noOfIntervals; i++) { for (var i = 0; i <= noOfIntervals; i++) {
intervals.push(min + part * i); intervals.push(min + part * i);
} }
return asc ? intervals : intervals.reverse(); return asc ? intervals : intervals.reverse();
} }
export function getIntervalSize(orderedArray) { export function getIntervalSize(orderedArray) {
return orderedArray[1] - orderedArray[0]; return orderedArray[1] - orderedArray[0];
} }
export function getValueRange(orderedArray) { export function getValueRange(orderedArray) {
return orderedArray[orderedArray.length-1] - orderedArray[0]; return orderedArray[orderedArray.length - 1] - orderedArray[0];
} }
export function scale(val, yAxis) { export function scale(val, yAxis) {
return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier); return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
} }
export function isInRange(val, min, max) { export function isInRange(val, min, max) {
return val > min && val < max; return val > min && val < max;
} }
export function isInRange2D(coord, minCoord, maxCoord) { export function isInRange2D(coord, minCoord, maxCoord) {
return isInRange(coord[0], minCoord[0], maxCoord[0]) return (
&& isInRange(coord[1], minCoord[1], maxCoord[1]); isInRange(coord[0], minCoord[0], maxCoord[0]) &&
isInRange(coord[1], minCoord[1], maxCoord[1])
);
} }
export function getClosestInArray(goal, arr, index = false) { export function getClosestInArray(goal, arr, index = false) {
let closest = arr.reduce(function(prev, curr) { let closest = arr.reduce(function (prev, curr) {
return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev); return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
}, []); }, []);
return index ? arr.indexOf(closest) : closest; return index ? arr.indexOf(closest) : closest;
} }
export function calcDistribution(values, distributionSize) { export function calcDistribution(values, distributionSize) {
// Assume non-negative values, // Assume non-negative values,
// implying distribution minimum at zero // implying distribution minimum at zero
let dataMaxValue = Math.max(...values); let dataMaxValue = Math.max(...values);
let distributionStep = 1 / (distributionSize - 1); let distributionStep = 1 / (distributionSize - 1);
let distribution = []; let distribution = [];
for(var i = 0; i < distributionSize; i++) { for (var i = 0; i < distributionSize; i++) {
let checkpoint = dataMaxValue * (distributionStep * i); let checkpoint = dataMaxValue * (distributionStep * i);
distribution.push(checkpoint); distribution.push(checkpoint);
} }
return distribution; return distribution;
} }
export function getMaxCheckpoint(value, distribution) { export function getMaxCheckpoint(value, distribution) {
return distribution.filter(d => d < value).length; return distribution.filter((d) => d < value).length;
} }

20
src/js/utils/test/colors.test.js
View File

@ -1,14 +1,14 @@
const assert = require('assert'); const assert = require("assert");
const colors = require('../colors'); const colors = require("../colors");
describe('utils.colors', () => { describe("utils.colors", () => {
it('should return #aaabac for RGB()', () => { it("should return #aaabac for RGB()", () => {
assert.equal(colors.getColor('rgb(170, 171, 172)'), '#aaabac'); assert.equal(colors.getColor("rgb(170, 171, 172)"), "#aaabac");
}); });
it('should return #ff5858 for the named color red', () => { it("should return #ff5858 for the named color red", () => {
assert.equal(colors.getColor('red'), '#ff5858d'); assert.equal(colors.getColor("red"), "#ff5858d");
}); });
it('should return #1a5c29 for the hex color #1a5c29', () => { it("should return #1a5c29 for the hex color #1a5c29", () => {
assert.equal(colors.getColor('#1a5c29'), '#1a5c29'); assert.equal(colors.getColor("#1a5c29"), "#1a5c29");
}); });
}); });

12
src/js/utils/test/helpers.test.js
View File

@ -1,10 +1,10 @@
const assert = require('assert'); const assert = require("assert");
const helpers = require('../helpers'); const helpers = require("../helpers");
describe('utils.helpers', () => { describe("utils.helpers", () => {
it('should return a value fixed upto 2 decimals', () => { it("should return a value fixed upto 2 decimals", () => {
assert.equal(helpers.floatTwo(1.234), 1.23); assert.equal(helpers.floatTwo(1.234), 1.23);
assert.equal(helpers.floatTwo(1.456), 1.46); assert.equal(helpers.floatTwo(1.456), 1.46);
assert.equal(helpers.floatTwo(1), 1.00); assert.equal(helpers.floatTwo(1), 1.0);
}); });
}); });