jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

chore: format codebase

Browse Source
This commit is contained in:
Shivam Mishra 2020-10-26 12:31:30 +05:30
parent 5d2c141f14
commit 26671b143b
15 changed files with 277 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,8 +42,8 @@ export default class BaseChart {
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) { m.titleHeight = 0; } if (!this.title.length) { 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 = {};
@ -51,7 +51,7 @@ export default class BaseChart {
this.initTimeout = INIT_CHART_UPDATE_TIMEOUT; this.initTimeout = INIT_CHART_UPDATE_TIMEOUT;
if(this.config.isNavigable) { if (this.config.isNavigable) {
this.overlays = []; this.overlays = [];
} }
@ -71,7 +71,7 @@ export default class BaseChart {
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);
@ -119,7 +119,7 @@ export default class BaseChart {
className: 'chart-container' className: 'chart-container'
}; };
if(this.independentWidth) { if (this.independentWidth) {
args.styles = { width: this.independentWidth + 'px' }; args.styles = { width: this.independentWidth + 'px' };
} }
@ -134,9 +134,9 @@ export default class BaseChart {
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;
@ -151,9 +151,9 @@ export default class BaseChart {
// 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(() => {this.update(this.data);}, this.initTimeout); setTimeout(() => { this.update(this.data); }, this.initTimeout);
} }
this.renderLegend(); this.renderLegend();
@ -161,7 +161,7 @@ export default class BaseChart {
this.setupNavigation(init); this.setupNavigation(init);
} }
calc() {} // builds state calc() { } // builds state
updateWidth() { updateWidth() {
this.baseWidth = getElementContentWidth(this.parent); this.baseWidth = getElementContentWidth(this.parent);
@ -169,7 +169,7 @@ export default class BaseChart {
} }
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;
@ -182,7 +182,7 @@ export default class BaseChart {
); );
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,
@ -202,7 +202,7 @@ export default class BaseChart {
`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',
@ -210,9 +210,9 @@ export default class BaseChart {
); );
} }
if(this.title.length) { this.svg.appendChild(this.titleEL); } if (this.title.length) { this.svg.appendChild(this.titleEL); }
this.svg.appendChild(this.drawArea); this.svg.appendChild(this.drawArea);
if(this.config.showLegend) { this.svg.appendChild(this.legendArea); } if (this.config.showLegend) { this.svg.appendChild(this.legendArea); }
this.updateTipOffset(getLeftOffset(m), getTopOffset(m)); this.updateTipOffset(getLeftOffset(m), getTopOffset(m));
} }
@ -227,7 +227,7 @@ export default class BaseChart {
setupComponents() { this.components = new Map(); } setupComponents() { 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);
@ -235,8 +235,8 @@ export default class BaseChart {
this.render(this.components, this.config.animate); this.render(this.components, this.config.animate);
} }
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);
@ -246,7 +246,7 @@ export default class BaseChart {
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());
@ -259,7 +259,7 @@ export default class BaseChart {
} }
updateNav() { updateNav() {
if(this.config.isNavigable) { if (this.config.isNavigable) {
this.makeOverlay(); this.makeOverlay();
this.bindUnits(); this.bindUnits();
} }
@ -289,7 +289,7 @@ export default class BaseChart {
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 = {
@ -301,9 +301,9 @@ export default class BaseChart {
}; };
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]();
} }
} }
@ -311,24 +311,24 @@ export default class BaseChart {
} }
} }
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);

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

@ -1,11 +1,15 @@
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, 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, addDays, 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 { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
import { getExtraHeight, getExtraWidth, HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE, import {
HEATMAP_GUTTER_SIZE } from '../utils/constants'; 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;
@ -49,19 +53,19 @@ export default class Heatmap extends BaseChart {
+ getExtraWidth(this.measures); + 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);
} }
if(!data.end) { data.end = new Date(); } if (!data.end) { data.end = new Date(); }
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);
@ -105,7 +109,7 @@ export default class Heatmap extends BaseChart {
.reduce((a, b) => a + b, 0) .reduce((a, b) => a + b, 0)
* COL_WIDTH * COL_WIDTH
}, },
function() { function () {
return s.domainConfigs[i]; return s.domainConfigs[i];
}.bind(this) }.bind(this)
@ -120,8 +124,8 @@ export default class Heatmap extends BaseChart {
let y = 0; let y = 0;
DAY_NAMES_SHORT.forEach((dayName, i) => { DAY_NAMES_SHORT.forEach((dayName, i) => {
if([1, 3, 5].includes(i)) { if ([1, 3, 5].includes(i)) {
let dayText = makeText('subdomain-name', -COL_WIDTH/2, y, dayName, let dayText = makeText('subdomain-name', -COL_WIDTH / 2, y, dayName,
{ {
fontSize: HEATMAP_SQUARE_SIZE, fontSize: HEATMAP_SQUARE_SIZE,
dy: 8, dy: 8,
@ -135,7 +139,7 @@ export default class Heatmap extends BaseChart {
} }
update(data) { update(data) {
if(!data) { if (!data) {
console.error('No data to update.'); console.error('No data to update.');
} }
@ -149,22 +153,22 @@ export default class Heatmap extends BaseChart {
this.components.forEach(comp => { this.components.forEach(comp => {
let daySquares = comp.store; let daySquares = comp.store;
let daySquare = e.target; let daySquare = e.target;
if(daySquares.includes(daySquare)) { if (daySquares.includes(daySquare)) {
let count = daySquare.getAttribute('data-value'); let count = daySquare.getAttribute('data-value');
let dateParts = daySquare.getAttribute('data-date').split('-'); let dateParts = daySquare.getAttribute('data-date').split('-');
let month = getMonthName(parseInt(dateParts[1])-1, true); let month = getMonthName(parseInt(dateParts[1]) - 1, true);
let gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect(); let gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect();
let width = parseInt(e.target.getAttribute('width')); let width = parseInt(e.target.getAttribute('width'));
let x = pOff.left - gOff.left + width/2; let x = pOff.left - gOff.left + width / 2;
let y = pOff.top - gOff.top; let y = pOff.top - gOff.top;
let value = count + ' ' + this.countLabel; let value = count + ' ' + this.countLabel;
let name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2]; let name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2];
this.tip.setValues(x, y, {name: name, value: value, valueFirst: 1}, []); this.tip.setValues(x, y, { name: name, value: value, valueFirst: 1 }, []);
this.tip.showTip(); this.tip.showTip();
} }
}); });
@ -183,7 +187,7 @@ export default class Heatmap extends BaseChart {
dy: 9 dy: 9
} }
); );
x = (COL_WIDTH * 2) + COL_WIDTH/2; x = (COL_WIDTH * 2) + COL_WIDTH / 2;
this.legendArea.appendChild(lessText); this.legendArea.appendChild(lessText);
this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => { this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => {
@ -192,7 +196,7 @@ export default class Heatmap extends BaseChart {
this.legendArea.appendChild(square); this.legendArea.appendChild(square);
}); });
let moreTextX = x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH/4; let moreTextX = x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH / 4;
let moreText = makeText('subdomain-name', moreTextX, y, 'More', let moreText = makeText('subdomain-name', moreTextX, y, 'More',
{ {
fontSize: HEATMAP_SQUARE_SIZE + 1, fontSize: HEATMAP_SQUARE_SIZE + 1,
@ -212,9 +216,9 @@ export default class Heatmap extends BaseChart {
let domainConfigs = []; let domainConfigs = [];
let startOfMonth = clone(s.start); let startOfMonth = clone(s.start);
for(var i = 0; i < noOfMonths; i++) { for (var i = 0; i < noOfMonths; i++) {
let endDate = s.end; let endDate = s.end;
if(!areInSameMonth(startOfMonth, s.end)) { if (!areInSameMonth(startOfMonth, s.end)) {
let [month, year] = [startOfMonth.getMonth(), startOfMonth.getFullYear()]; let [month, year] = [startOfMonth.getMonth(), startOfMonth.getFullYear()];
endDate = getLastDateInMonth(month, year); endDate = getLastDateInMonth(month, year);
} }
@ -227,7 +231,7 @@ export default class Heatmap extends BaseChart {
return domainConfigs; return domainConfigs;
} }
getDomainConfig(startDate, endDate='') { getDomainConfig(startDate, endDate = '') {
let [month, year] = [startDate.getMonth(), startDate.getFullYear()]; let [month, year] = [startDate.getMonth(), startDate.getFullYear()];
let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
endDate = clone(endDate) || getLastDateInMonth(month, year); endDate = clone(endDate) || getLastDateInMonth(month, year);
@ -241,7 +245,7 @@ export default class Heatmap extends BaseChart {
let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate); let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate);
let cols = [], col; let cols = [], col;
for(var i = 0; i < noOfMonthWeeks; i++) { for (var i = 0; i < noOfMonthWeeks; i++) {
col = this.getCol(startOfWeek, month); col = this.getCol(startOfWeek, month);
cols.push(col); cols.push(col);
@ -249,7 +253,7 @@ export default class Heatmap extends BaseChart {
addDays(startOfWeek, 1); addDays(startOfWeek, 1);
} }
if(col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) { if (col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) {
addDays(startOfWeek, 1); addDays(startOfWeek, 1);
cols.push(this.getCol(startOfWeek, month, true)); cols.push(this.getCol(startOfWeek, month, true));
} }
@ -266,13 +270,13 @@ export default class Heatmap extends BaseChart {
let currentDate = clone(startDate); let currentDate = clone(startDate);
let col = []; let col = [];
for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) { for (var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
let config = {}; let config = {};
// Non-generic adjustment for entire heatmap, needs state // Non-generic adjustment for entire heatmap, needs state
let currentDateWithinData = currentDate >= s.start && currentDate <= s.end; let currentDateWithinData = currentDate >= s.start && currentDate <= s.end;
if(empty || currentDate.getMonth() !== month || !currentDateWithinData) { if (empty || currentDate.getMonth() !== month || !currentDateWithinData) {
config.yyyyMmDd = getYyyyMmDd(currentDate); config.yyyyMmDd = getYyyyMmDd(currentDate);
} else { } else {
config = this.getSubDomainConfig(currentDate); config = this.getSubDomainConfig(currentDate);

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

@ -34,7 +34,7 @@ export default class PercentageChart extends AggregationChart {
{ {
barHeight: this.barOptions.height, barHeight: this.barOptions.height,
}, },
function() { function () {
return { return {
xPositions: s.xPositions, xPositions: s.xPositions,
widths: s.widths, widths: s.widths,
@ -80,13 +80,13 @@ export default class PercentageChart extends AggregationChart {
let width = bar.getAttribute('width') || bar.getBoundingClientRect().width; let width = bar.getAttribute('width') || bar.getBoundingClientRect().width;
let x = pOff.left - gOff.left + parseInt(width)/2; let x = pOff.left - gOff.left + parseInt(width) / 2;
let y = pOff.top - gOff.top; let y = pOff.top - gOff.top;
let title = (this.formattedLabels && this.formattedLabels.length>0 let title = (this.formattedLabels && this.formattedLabels.length > 0
? this.formattedLabels[i] : this.state.labels[i]) + ': '; ? this.formattedLabels[i] : this.state.labels[i]) + ': ';
let fraction = s.sliceTotals[i]/s.grandTotal; let fraction = s.sliceTotals[i] / s.grandTotal;
this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"}); this.tip.setValues(x, y, { name: title, value: (fraction * 100).toFixed(1) + "%" });
this.tip.showTip(); this.tip.showTip();
} }
}); });

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

@ -3,7 +3,6 @@ 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 { makeArcPathStr, makeCircleStr } from '../utils/draw'; import { makeArcPathStr, makeCircleStr } from '../utils/draw';
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';

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

@ -1,8 +1,10 @@
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 { makeText, makePath, xLine, yLine, yMarker, yRegion, datasetBar, datasetDot, percentageBar, getPaths, heatSquare } from '../utils/draw';
import { equilizeNoOfElements } from '../utils/draw-utils'; import { equilizeNoOfElements } from '../utils/draw-utils';
import { translateHoriLine, translateVertLine, animateRegion, animateBar, import {
animateDot, animatePath, animatePathStr } from '../utils/animate'; translateHoriLine, translateVertLine, animateRegion, animateBar,
animateDot, animatePath, animatePathStr
} from '../utils/animate';
import { getMonthName } from '../utils/date-utils'; import { getMonthName } from '../utils/date-utils';
class ChartComponent { class ChartComponent {
@ -27,7 +29,7 @@ class ChartComponent {
this.labels = []; this.labels = [];
this.layerClass = layerClass; this.layerClass = layerClass;
this.layerClass = typeof(this.layerClass) === 'function' this.layerClass = typeof (this.layerClass) === 'function'
? this.layerClass() : this.layerClass; ? this.layerClass() : this.layerClass;
this.refresh(); this.refresh();
@ -61,7 +63,7 @@ class ChartComponent {
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;
@ -86,7 +88,7 @@ let componentConfigs = {
pieSlices: { pieSlices: {
layerClass: 'pie-slices', layerClass: 'pie-slices',
makeElements(data) { makeElements(data) {
return data.sliceStrings.map((s, i) =>{ return data.sliceStrings.map((s, i) => {
let slice = makePath(s, 'pie-path', 'none', data.colors[i]); let slice = makePath(s, 'pie-path', 'none', data.colors[i]);
slice.style.transition = 'transform .3s;'; slice.style.transition = 'transform .3s;';
return slice; return slice;
@ -103,7 +105,7 @@ let componentConfigs = {
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;
@ -115,7 +117,7 @@ let componentConfigs = {
}, },
animateElements(newData) { animateElements(newData) {
if(newData) return []; if (newData) return [];
} }
}, },
yAxis: { yAxis: {
@ -123,7 +125,7 @@ let componentConfigs = {
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 })
); );
}, },
@ -154,7 +156,7 @@ let componentConfigs = {
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 })
); );
}, },
@ -218,7 +220,7 @@ let componentConfigs = {
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, {labelPos: r.options.labelPos}) r.label, { labelPos: r.options.labelPos })
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -254,16 +256,16 @@ let componentConfigs = {
}, },
heatDomain: { heatDomain: {
layerClass: function() { return 'heat-domain domain-' + this.constants.index; }, layerClass: function () { return 'heat-domain domain-' + this.constants.index; },
makeElements(data) { makeElements(data) {
let {index, colWidth, rowHeight, squareSize, radius, xTranslate} = this.constants; let { index, colWidth, rowHeight, squareSize, radius, xTranslate } = this.constants;
let monthNameHeight = -12; let monthNameHeight = -12;
let x = xTranslate, y = 0; 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', x, monthNameHeight, getMonthName(index, true).toUpperCase(),
{ {
@ -273,7 +275,7 @@ let componentConfigs = {
); );
} }
week.map((day, i) => { week.map((day, i) => {
if(day.fill) { if (day.fill) {
let data = { let data = {
'data-date': day.yyyyMmDd, 'data-date': day.yyyyMmDd,
'data-value': day.dataValue, 'data-value': day.dataValue,
@ -292,12 +294,12 @@ let componentConfigs = {
}, },
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 () { return 'dataset-units dataset-bars dataset-' + this.constants.index; },
makeElements(data) { makeElements(data) {
let c = this.constants; let c = this.constants;
this.unitType = 'bar'; this.unitType = 'bar';
@ -351,7 +353,7 @@ let componentConfigs = {
this.store.map((bar, i) => { this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar( animateElements = animateElements.concat(animateBar(
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],
{zeroLine: newData.zeroLine} { zeroLine: newData.zeroLine }
)); ));
}); });
@ -360,12 +362,12 @@ let componentConfigs = {
}, },
lineGraph: { lineGraph: {
layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; }, layerClass: function () { return 'dataset-units dataset-line dataset-' + this.constants.index; },
makeElements(data) { makeElements(data) {
let c = this.constants; let c = this.constants;
this.unitType = 'dot'; this.unitType = 'dot';
this.paths = {}; this.paths = {};
if(!c.hideLine) { if (!c.hideLine) {
this.paths = getPaths( this.paths = getPaths(
data.xPositions, data.xPositions,
data.yPositions, data.yPositions,
@ -383,7 +385,7 @@ let componentConfigs = {
} }
this.units = []; this.units = [];
if(c.showDots) { if (c.showDots) {
this.units = data.yPositions.map((y, j) => { this.units = data.yPositions.map((y, j) => {
return datasetDot( return datasetDot(
data.xPositions[j], data.xPositions[j],
@ -422,12 +424,12 @@ let componentConfigs = {
let animateElements = []; let animateElements = [];
if(Object.keys(this.paths).length) { if (Object.keys(this.paths).length) {
animateElements = animateElements.concat(animatePath( animateElements = animateElements.concat(animatePath(
this.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline)); 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(animateDot(
dot, newXPos[i], newYPos[i])); dot, newXPos[i], newYPos[i]));

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

@ -11,11 +11,11 @@ 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 }
]; ];
} }
@ -42,14 +42,14 @@ export function animateRegion(rectGroup, newY1, newY2, oldY2) {
return [rectAnim, groupAnim]; 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
]; ];
@ -58,18 +58,18 @@ export function animateBar(bar, x, yTop, width, offset=0, meta={}) {
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, { 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); // 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);
} }
@ -81,16 +81,16 @@ export function animatePath(paths, newXList, newYList, zeroLine, spline) {
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 = [paths.path, { d: "M" + pointsStr }, PATH_ANIM_DUR, STD_EASING];
pathComponents.push(animPath); 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
]; ];
@ -101,5 +101,5 @@ export function animatePath(paths, newXList, newYList, zeroLine, spline) {
} }
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];
} }

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

@ -11,14 +11,14 @@ const EASING = {
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 animElement = element.cloneNode(true);
let newElement = element.cloneNode(true); let newElement = element.cloneNode(true);
for(var attributeName in props) { for (var attributeName in props) {
let animateElement; let animateElement;
if(attributeName === 'transform') { if (attributeName === 'transform') {
animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform"); animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
} else { } else {
animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animate"); animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animate");
@ -31,7 +31,7 @@ function animateSVGElement(element, props, dur, easingType="linear", type=undefi
from: currentValue, from: currentValue,
to: value, to: value,
begin: "0s", begin: "0s",
dur: dur/1000 + "s", dur: dur / 1000 + "s",
values: currentValue + ";" + value, values: currentValue + ";" + value,
keySplines: EASING[easingType], keySplines: EASING[easingType],
keyTimes: "0;1", keyTimes: "0;1",
@ -39,7 +39,7 @@ function animateSVGElement(element, props, dur, easingType="linear", type=undefi
fill: 'freeze' fill: 'freeze'
}; };
if(type) { if (type) {
animAttr["type"] = type; animAttr["type"] = type;
} }
@ -49,7 +49,7 @@ function animateSVGElement(element, props, dur, easingType="linear", type=undefi
animElement.appendChild(animateElement); animElement.appendChild(animateElement);
if(type) { if (type) {
newElement.setAttribute(attributeName, `translate(${value})`); newElement.setAttribute(attributeName, `translate(${value})`);
} else { } else {
newElement.setAttribute(attributeName, value); newElement.setAttribute(attributeName, value);
@ -97,10 +97,10 @@ function animateSVG(svgContainer, elements) {
} }
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);
@ -108,7 +108,7 @@ export function runSMILAnimation(parent, svgElement, elementsToAnimate) {
// Replace the new svgElement (data has already been replaced) // Replace the new svgElement (data has already been replaced)
setTimeout(() => { setTimeout(() => {
if(animSvgElement.parentNode == parent) { if (animSvgElement.parentNode == parent) {
parent.removeChild(animSvgElement); parent.removeChild(animSvgElement);
parent.appendChild(svgElement); parent.appendChild(svgElement);
} }

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

@ -1,6 +1,8 @@
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 || [];
@ -10,16 +12,16 @@ export function dataPrep(data, type) {
// 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
@ -27,7 +29,7 @@ export function dataPrep(data, type) {
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);
@ -38,8 +40,8 @@ export function dataPrep(data, type) {
// //
// 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)) type === DEFAULT_AXIS_CHART_TYPE;
d.chartType = type; d.chartType = type;
} }
@ -49,9 +51,9 @@ export function dataPrep(data, type) {
// Regions // Regions
// data.yRegions = data.yRegions || []; // data.yRegions = data.yRegions || [];
if(data.yRegions) { if (data.yRegions) {
data.yRegions.map(d => { data.yRegions.map(d => {
if(d.end < d.start) { if (d.end < d.start) {
[d.start, d.end] = [d.end, d.start]; [d.start, d.end] = [d.end, d.start];
} }
}); });
@ -75,7 +77,7 @@ export function zeroDataPrep(realData) {
}), }),
}; };
if(realData.yMarkers) { if (realData.yMarkers) {
zeroData.yMarkers = [ zeroData.yMarkers = [
{ {
value: 0, value: 0,
@ -84,7 +86,7 @@ export function zeroDataPrep(realData) {
]; ];
} }
if(realData.yRegions) { if (realData.yRegions) {
zeroData.yRegions = [ zeroData.yRegions = [
{ {
start: 0, start: 0,
@ -97,30 +99,30 @@ export function zeroDataPrep(realData) {
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 (!isSeries) {
if(allowedLetters-3 > 0) { if (allowedLetters - 3 > 0) {
label = label.slice(0, allowedLetters-3) + " ..."; label = label.slice(0, allowedLetters - 3) + " ...";
} else { } else {
label = label.slice(0, allowedLetters) + '..'; label = label.slice(0, allowedLetters) + '..';
} }
} else { } else {
if(i % seriesMultiple !== 0 && i !== (labels.length - 1)) { if (i % seriesMultiple !== 0 && i !== (labels.length - 1)) {
label = ""; label = "";
} }
} }

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

@ -27,8 +27,8 @@ export function getYyyyMmDd(date) {
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('-');
} }
@ -37,12 +37,12 @@ export function clone(date) {
} }
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;
@ -65,12 +65,12 @@ export function areInSameMonth(startDate, endDate) {
&& startDate.getFullYear() === endDate.getFullYear(); && 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
} }
@ -78,7 +78,7 @@ export function getLastDateInMonth (month, year) {
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;

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

@ -1,9 +1,8 @@
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;
@ -27,12 +26,12 @@ $.create = (tag, o) => {
element.appendChild(ref); element.appendChild(ref);
} else if (i === "styles") { } else if (i === "styles") {
if(typeof val === "object") { if (typeof val === "object") {
Object.keys(val).map(prop => { Object.keys(val).map(prop => {
element.style[prop] = val[prop]; element.style[prop] = val[prop];
}); });
} }
} else if (i in element ) { } else if (i in element) {
element[i] = val; element[i] = val;
} }
else { else {
@ -67,9 +66,9 @@ export function isElementInViewport(el) {
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 <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
); );
} }
@ -81,7 +80,7 @@ export function getElementContentWidth(element) {
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];
@ -93,12 +92,12 @@ export function bind(element, o){
} }
} }
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);
}); });
} }
@ -108,7 +107,7 @@ export function unbind(element, o){
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];
@ -119,17 +118,17 @@ export function fire(target, type, properties) {
// 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($parent, $child, commonClass, activeClass = 'active', index = -1) {
let $children = $parent.querySelectorAll(`.${commonClass}.${activeClass}`); 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);
}); });

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

@ -17,7 +17,7 @@ export function equilizeNoOfElements(array1, array2,
extraCount = array2.length - array1.length) { extraCount = array2.length - array1.length) {
// Doesn't work if either has zero elements. // Doesn't work if either has zero elements.
if(extraCount > 0) { if (extraCount > 0) {
array1 = fillArray(array1, extraCount); array1 = fillArray(array1, extraCount);
} else { } else {
array2 = fillArray(array2, extraCount); array2 = fillArray(array2, extraCount);
@ -30,7 +30,7 @@ export function truncateString(txt, len) {
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;
} }
@ -47,18 +47,18 @@ export function shortenLargeNumber(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=[]; let points = [];
for(let i=0;i<xList.length;i++){ for (let i = 0; i < xList.length; i++) {
points.push([xList[i], yList[i]]); points.push([xList[i], yList[i]]);
} }
@ -71,7 +71,7 @@ export function getSplineCurvePointsStr(xList, yList) {
angle: Math.atan2(lengthY, lengthX) angle: Math.atan2(lengthY, lengthX)
}; };
}; };
let controlPoint = (current, previous, next, reverse) => { let controlPoint = (current, previous, next, reverse) => {
let p = previous || current; let p = previous || current;
let n = next || current; let n = next || current;
@ -82,18 +82,18 @@ export function getSplineCurvePointsStr(xList, yList) {
let y = current[1] + Math.sin(angle) * length; let y = current[1] + Math.sin(angle) * length;
return [x, y]; return [x, y];
}; };
let bezierCommand = (point, i, a) => { let bezierCommand = (point, i, a) => {
let cps = controlPoint(a[i - 1], a[i - 2], point); let cps = controlPoint(a[i - 1], a[i - 2], point);
let cpe = controlPoint(point, a[i - 1], a[i + 1], true); 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 `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}; };
let pointStr = (points, command) => { let pointStr = (points, command) => {
return points.reduce((acc, point, i, a) => i === 0 return points.reduce((acc, point, i, a) => i === 0
? `${point[0]},${point[1]}` ? `${point[0]},${point[1]}`
: `${acc} ${command(point, i, a)}`, ''); : `${acc} ${command(point, i, a)}`, '');
}; };
return pointStr(points, bezierCommand); return pointStr(points, bezierCommand);
} }

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

@ -10,7 +10,7 @@ const BASE_LINE_COLOR = '#E2E6E9';
const FONT_FILL = '#313B44'; const FONT_FILL = '#313B44';
function $(expr, con) { 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 createSVG(tag, o) { export function createSVG(tag, o) {
@ -28,14 +28,14 @@ export function createSVG(tag, o) {
element.appendChild(ref); element.appendChild(ref);
} else if (i === "styles") { } else if (i === "styles") {
if(typeof val === "object") { if (typeof val === "object") {
Object.keys(val).map(prop => { Object.keys(val).map(prop => {
element.style[prop] = val[prop]; element.style[prop] = val[prop];
}); });
} }
} else { } else {
if(i === "className") { i = "class"; } if (i === "className") { i = "class"; }
if(i === "innerHTML") { if (i === "innerHTML") {
element['textContent'] = val; element['textContent'] = val;
} else { } else {
element.setAttribute(i, val); element.setAttribute(i, val);
@ -81,16 +81,16 @@ export function makeSVGDefs(svgContainer) {
}); });
} }
export function makeSVGGroup(className, transform='', parent=undefined) { export function makeSVGGroup(className, transform = '', parent = undefined) {
let args = { let args = {
className: className, className: className,
transform: transform transform: transform
}; };
if(parent) args.inside = parent; if (parent) args.inside = parent;
return createSVG('g', args); return createSVG('g', args);
} }
export function wrapInSVGGroup(elements, className='') { export function wrapInSVGGroup(elements, className = '') {
let g = createSVG('g', { let g = createSVG('g', {
className: className className: className
}); });
@ -98,7 +98,7 @@ export function wrapInSVGGroup(elements, className='') {
return g; return g;
} }
export function makePath(pathStr, className='', stroke='none', fill='none', strokeWidth=2) { export function makePath(pathStr, className = '', stroke = 'none', fill = 'none', strokeWidth = 2) {
return createSVG('path', { return createSVG('path', {
className: className, className: className,
d: pathStr, d: pathStr,
@ -110,7 +110,7 @@ export function makePath(pathStr, className='', stroke='none', fill='none', stro
}); });
} }
export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise = 1, largeArc = 0) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
return `M${center.x} ${center.y} return `M${center.x} ${center.y}
@ -119,7 +119,7 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock
${arcEndX} ${arcEndY} z`; ${arcEndX} ${arcEndY} z`;
} }
export function makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ export function makeCircleStr(startPosition, endPosition, center, radius, clockWise = 1, largeArc = 0) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y]; let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y];
return `M${center.x} ${center.y} return `M${center.x} ${center.y}
@ -131,7 +131,7 @@ export function makeCircleStr(startPosition, endPosition, center, radius, clockW
${arcEndX} ${arcEndY} z`; ${arcEndX} ${arcEndY} z`;
} }
export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise = 1, largeArc = 0) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
@ -140,7 +140,7 @@ export function makeArcStrokePathStr(startPosition, endPosition, center, radius,
${arcEndX} ${arcEndY}`; ${arcEndX} ${arcEndY}`;
} }
export function makeStrokeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ export function makeStrokeCircleStr(startPosition, endPosition, center, radius, clockWise = 1, largeArc = 0) {
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, radius * 2 + arcStartY, center.y + startPosition.y]; let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, radius * 2 + arcStartY, center.y + startPosition.y];
@ -153,7 +153,7 @@ export function makeStrokeCircleStr(startPosition, endPosition, center, radius,
} }
export function makeGradient(svgDefElem, color, lighter = false) { export function makeGradient(svgDefElem, color, lighter = false) {
let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default'); let gradientId = 'path-fill-gradient' + '-' + color + '-' + (lighter ? 'lighter' : 'default');
let gradientDef = renderVerticalGradient(svgDefElem, gradientId); let gradientDef = renderVerticalGradient(svgDefElem, gradientId);
let opacities = [1, 0.6, 0.2]; let opacities = [1, 0.6, 0.2];
if (lighter) { if (lighter) {
@ -169,20 +169,20 @@ export function makeGradient(svgDefElem, color, lighter = false) {
export function rightRoundedBar(x, width, height) { export function rightRoundedBar(x, width, height) {
// https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90 // https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90
let radius = height/2; let radius = height / 2;
let xOffset = width - radius; let xOffset = width - radius;
return `M${x},0 h${xOffset} q${radius},0 ${radius},${radius} q0,${radius} -${radius},${radius} h-${xOffset} v${height}z`; return `M${x},0 h${xOffset} q${radius},0 ${radius},${radius} q0,${radius} -${radius},${radius} h-${xOffset} v${height}z`;
} }
export function leftRoundedBar(x, width, height) { export function leftRoundedBar(x, width, height) {
let radius = height/2; let radius = height / 2;
let xOffset = width - radius; let xOffset = width - radius;
return `M${x + radius},0 h${xOffset} v${height} h-${xOffset} q-${radius}, 0 -${radius},-${radius} q0,-${radius} ${radius},-${radius}z`; return `M${x + radius},0 h${xOffset} v${height} h-${xOffset} q-${radius}, 0 -${radius},-${radius} q0,-${radius} ${radius},-${radius}z`;
} }
export function percentageBar(x, y, width, height, isFirst, isLast, fill='none') { export function percentageBar(x, y, width, height, isFirst, isLast, fill = 'none') {
if (isLast) { if (isLast) {
let pathStr = rightRoundedBar(x, width, height); let pathStr = rightRoundedBar(x, width, height);
return makePath(pathStr, 'percentage-bar', null, fill); return makePath(pathStr, 'percentage-bar', null, fill);
@ -205,7 +205,7 @@ export function percentageBar(x, y, width, height, isFirst, isLast, fill='none')
return createSVG("rect", args); return createSVG("rect", args);
} }
export function heatSquare(className, x, y, size, radius, fill='none', data={}) { export function heatSquare(className, x, y, size, radius, fill = 'none', data = {}) {
let args = { let args = {
className: className, className: className,
x: x, x: x,
@ -294,7 +294,7 @@ export function makeText(className, x, y, content, options = {}) {
}); });
} }
function makeVertLine(x, label, y1, y2, options={}) { function makeVertLine(x, label, y1, y2, options = {}) {
let l = createSVG('line', { let l = createSVG('line', {
className: 'line-vertical ' + options.className, className: 'line-vertical ' + options.className,
x1: 0, x1: 0,
@ -316,7 +316,7 @@ function makeVertLine(x, label, y1, y2, options={}) {
}); });
let line = createSVG('g', { let line = createSVG('g', {
transform: `translate(${ x }, 0)` transform: `translate(${x}, 0)`
}); });
line.appendChild(l); line.appendChild(l);
@ -325,12 +325,12 @@ function makeVertLine(x, label, y1, y2, options={}) {
return line; return line;
} }
function makeHoriLine(y, label, x1, x2, options={}) { function makeHoriLine(y, label, x1, x2, options = {}) {
if(!options.lineType) options.lineType = ''; if (!options.lineType) options.lineType = '';
if (options.shortenNumbers) label = shortenLargeNumber(label); if (options.shortenNumbers) label = shortenLargeNumber(label);
let className = 'line-horizontal ' + options.className + let className = 'line-horizontal ' + options.className +
(options.lineType === "dashed" ? "dashed": ""); (options.lineType === "dashed" ? "dashed" : "");
let l = createSVG('line', { let l = createSVG('line', {
className: className, className: className,
@ -349,7 +349,7 @@ function makeHoriLine(y, label, x1, x2, options={}) {
dy: (FONT_SIZE / 2 - 2) + 'px', dy: (FONT_SIZE / 2 - 2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': x1 < x2 ? 'end' : 'start', 'text-anchor': x1 < x2 ? 'end' : 'start',
innerHTML: label+"" innerHTML: label + ""
}); });
let line = createSVG('g', { let line = createSVG('g', {
@ -357,7 +357,7 @@ function makeHoriLine(y, label, x1, x2, options={}) {
'stroke-opacity': 1 'stroke-opacity': 1
}); });
if(text === 0 || text === '0') { if (text === 0 || text === '0') {
line.style.stroke = "rgba(27, 31, 35, 0.6)"; line.style.stroke = "rgba(27, 31, 35, 0.6)";
} }
@ -367,19 +367,19 @@ function makeHoriLine(y, label, x1, x2, options={}) {
return line; return line;
} }
export function yLine(y, label, width, options={}) { export function yLine(y, label, width, options = {}) {
if (!isValidNumber(y)) y = 0; if (!isValidNumber(y)) y = 0;
if(!options.pos) options.pos = 'left'; if (!options.pos) options.pos = 'left';
if(!options.offset) options.offset = 0; if (!options.offset) options.offset = 0;
if(!options.mode) options.mode = 'span'; if (!options.mode) options.mode = 'span';
if(!options.stroke) options.stroke = BASE_LINE_COLOR; if (!options.stroke) options.stroke = BASE_LINE_COLOR;
if(!options.className) options.className = ''; if (!options.className) options.className = '';
let x1 = -1 * AXIS_TICK_LENGTH; let x1 = -1 * AXIS_TICK_LENGTH;
let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0; let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;
if(options.mode === 'tick' && options.pos === 'right') { if (options.mode === 'tick' && options.pos === 'right') {
x1 = width + AXIS_TICK_LENGTH; x1 = width + AXIS_TICK_LENGTH;
x2 = width; x2 = width;
} }
@ -398,13 +398,13 @@ export function yLine(y, label, width, options={}) {
}); });
} }
export function xLine(x, label, height, options={}) { export function xLine(x, label, height, options = {}) {
if (!isValidNumber(x)) x = 0; if (!isValidNumber(x)) x = 0;
if(!options.pos) options.pos = 'bottom'; if (!options.pos) options.pos = 'bottom';
if(!options.offset) options.offset = 0; if (!options.offset) options.offset = 0;
if(!options.mode) options.mode = 'span'; if (!options.mode) options.mode = 'span';
if(!options.className) options.className = ''; if (!options.className) options.className = '';
// Draw X axis line in span/tick mode with optional label // Draw X axis line in span/tick mode with optional label
// y2(span) // y2(span)
@ -420,7 +420,7 @@ export function xLine(x, label, height, options={}) {
let y1 = height + AXIS_TICK_LENGTH; let y1 = height + AXIS_TICK_LENGTH;
let y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height; let y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height;
if(options.mode === 'tick' && options.pos === 'top') { if (options.mode === 'tick' && options.pos === 'top') {
// top axis ticks // top axis ticks
y1 = -1 * AXIS_TICK_LENGTH; y1 = -1 * AXIS_TICK_LENGTH;
y2 = 0; y2 = 0;
@ -432,8 +432,8 @@ export function xLine(x, label, height, options={}) {
}); });
} }
export function yMarker(y, label, width, options={}) { export function yMarker(y, label, width, options = {}) {
if(!options.labelPos) options.labelPos = 'right'; if (!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label, 5) - LABEL_MARGIN; : width - getStringWidth(label, 5) - LABEL_MARGIN;
@ -444,7 +444,7 @@ export function yMarker(y, label, width, options={}) {
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
innerHTML: label+"" innerHTML: label + ""
}); });
let line = makeHoriLine(y, '', 0, width, { let line = makeHoriLine(y, '', 0, width, {
@ -458,7 +458,7 @@ export function yMarker(y, label, width, options={}) {
return line; return line;
} }
export function yRegion(y1, y2, width, label, options={}) { export function yRegion(y1, y2, width, label, options = {}) {
// return a group // return a group
let height = y1 - y2; let height = y1 - y2;
@ -476,9 +476,9 @@ export function yRegion(y1, y2, width, label, options={}) {
height: height height: height
}); });
if(!options.labelPos) options.labelPos = 'right'; if (!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN; : width - getStringWidth(label + "", 4.5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
@ -487,7 +487,7 @@ export function yRegion(y1, y2, width, label, options={}) {
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
'text-anchor': 'start', 'text-anchor': 'start',
innerHTML: label+"" innerHTML: label + ""
}); });
let region = createSVG('g', { let region = createSVG('g', {
@ -500,11 +500,11 @@ export function yRegion(y1, y2, width, label, options={}) {
return region; return region;
} }
export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={}) { export function datasetBar(x, yTop, width, color, label = '', index = 0, offset = 0, meta = {}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine); let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset; y -= offset;
if(height === 0) { if (height === 0) {
height = meta.minHeight; height = meta.minHeight;
y -= meta.minHeight; y -= meta.minHeight;
} }
@ -547,14 +547,14 @@ export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, m
label += ""; label += "";
if(!label && !label.length) { if (!label && !label.length) {
return rect; return rect;
} else { } else {
rect.setAttribute('y', 0); rect.setAttribute('y', 0);
rect.setAttribute('x', 0); rect.setAttribute('x', 0);
let text = createSVG('text', { let text = createSVG('text', {
className: 'data-point-value', className: 'data-point-value',
x: width/2, x: width / 2,
y: 0, y: 0,
dy: (FONT_SIZE / 2 * -1) + 'px', dy: (FONT_SIZE / 2 * -1) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
@ -573,7 +573,7 @@ export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, m
} }
} }
export function datasetDot(x, y, radius, color, label='', index=0) { export function datasetDot(x, y, radius, color, label = '', index = 0) {
let dot = createSVG('circle', { let dot = createSVG('circle', {
style: `fill: ${color}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
@ -584,7 +584,7 @@ export function datasetDot(x, y, radius, color, label='', index=0) {
label += ""; label += "";
if(!label && !label.length) { if (!label && !label.length) {
return dot; return dot;
} else { } else {
dot.setAttribute('cy', 0); dot.setAttribute('cy', 0);
@ -611,7 +611,7 @@ export function datasetDot(x, y, radius, color, label='', index=0) {
} }
} }
export function getPaths(xList, yList, color, options={}, meta={}) { export function getPaths(xList, yList, color, options = {}, meta = {}) {
let pointsList = yList.map((y, i) => (xList[i] + ',' + y)); let pointsList = yList.map((y, i) => (xList[i] + ',' + y));
let pointsStr = pointsList.join("L"); let pointsStr = pointsList.join("L");
@ -619,10 +619,10 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
if (options.spline) if (options.spline)
pointsStr = getSplineCurvePointsStr(xList, yList); pointsStr = getSplineCurvePointsStr(xList, yList);
let path = makePath("M"+pointsStr, 'line-graph-path', color); let path = makePath("M" + pointsStr, 'line-graph-path', color);
// HeatLine // HeatLine
if(options.heatline) { if (options.heatline) {
let gradient_id = makeGradient(meta.svgDefs, color); let gradient_id = makeGradient(meta.svgDefs, color);
path.style.stroke = `url(#${gradient_id})`; path.style.stroke = `url(#${gradient_id})`;
} }
@ -632,7 +632,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
}; };
// Region // Region
if(options.regionFill) { if (options.regionFill) {
let gradient_id_region = makeGradient(meta.svgDefs, color, true); let gradient_id_region = makeGradient(meta.svgDefs, color, true);
let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`; let pathStr = "M" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;
@ -645,7 +645,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
export let makeOverlay = { export let makeOverlay = {
'bar': (unit) => { 'bar': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'rect') { if (unit.nodeName !== 'rect') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -653,7 +653,7 @@ export let makeOverlay = {
overlay.style.fill = '#000000'; overlay.style.fill = '#000000';
overlay.style.opacity = '0.4'; overlay.style.opacity = '0.4';
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
return overlay; return overlay;
@ -661,7 +661,7 @@ export let makeOverlay = {
'dot': (unit) => { 'dot': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if (unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -672,7 +672,7 @@ export let makeOverlay = {
overlay.setAttribute('fill', fill); overlay.setAttribute('fill', fill);
overlay.style.opacity = '0.6'; overlay.style.opacity = '0.6';
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
return overlay; return overlay;
@ -680,7 +680,7 @@ export let makeOverlay = {
'heat_square': (unit) => { 'heat_square': (unit) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if (unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -691,7 +691,7 @@ export let makeOverlay = {
overlay.setAttribute('fill', fill); overlay.setAttribute('fill', fill);
overlay.style.opacity = '0.6'; overlay.style.opacity = '0.6';
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
return overlay; return overlay;
@ -701,7 +701,7 @@ export let makeOverlay = {
export let updateOverlay = { export let updateOverlay = {
'bar': (unit, overlay) => { 'bar': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'rect') { if (unit.nodeName !== 'rect') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -712,14 +712,14 @@ export let updateOverlay = {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
}, },
'dot': (unit, overlay) => { 'dot': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if (unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -730,14 +730,14 @@ export let updateOverlay = {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
}, },
'heat_square': (unit, overlay) => { 'heat_square': (unit, overlay) => {
let transformValue; let transformValue;
if(unit.nodeName !== 'circle') { if (unit.nodeName !== 'circle') {
transformValue = unit.getAttribute('transform'); transformValue = unit.getAttribute('transform');
unit = unit.childNodes[0]; unit = unit.childNodes[0];
} }
@ -748,7 +748,7 @@ export let updateOverlay = {
overlay.setAttribute(attr.name, attr.nodeValue); overlay.setAttribute(attr.name, attr.nodeValue);
}); });
if(transformValue) { if (transformValue) {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
}, },

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

@ -4,13 +4,13 @@ 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);

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

@ -14,10 +14,10 @@ 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;
} }
@ -46,8 +46,8 @@ export function shuffle(array) {
* @param {Object} element element to fill with * @param {Object} element element to fill with
* @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);
@ -61,16 +61,16 @@ 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);
} }

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

@ -5,25 +5,25 @@ function normalize(x) {
// 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;
@ -32,38 +32,38 @@ function getChartRangeIntervals(max, min=0) {
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);
@ -73,7 +73,7 @@ function getChartIntervals(maxValue, minValue=0) {
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
@ -92,7 +92,7 @@ export function calcChartIntervals(values, withMinimum=false) {
// 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);
} }
@ -101,9 +101,9 @@ export function calcChartIntervals(values, withMinimum=false) {
// 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);
@ -112,7 +112,7 @@ export function calcChartIntervals(values, withMinimum=false) {
// CASE II: Only minValue negative // CASE II: Only minValue negative
else if(maxValue > 0 && minValue < 0) { else if (maxValue > 0 && minValue < 0) {
// `withMinimum` irrelevant in this case, // `withMinimum` irrelevant in this case,
// We'll be handling both sides of zero separately // We'll be handling both sides of zero separately
// (both starting from zero) // (both starting from zero)
@ -121,7 +121,7 @@ export function calcChartIntervals(values, withMinimum=false) {
let absMinValue = Math.abs(minValue); let absMinValue = Math.abs(minValue);
if(maxValue >= absMinValue) { if (maxValue >= absMinValue) {
exponent = normalize(maxValue)[1]; exponent = normalize(maxValue)[1];
intervals = getPositiveFirstIntervals(maxValue, absMinValue); intervals = getPositiveFirstIntervals(maxValue, absMinValue);
} else { } else {
@ -135,7 +135,7 @@ export function calcChartIntervals(values, withMinimum=false) {
// CASE III: Both non-positive // CASE III: Both non-positive
else if(maxValue <= 0 && minValue <= 0) { else if (maxValue <= 0 && minValue <= 0) {
// Mirrored Case I: // Mirrored Case I:
// Work with positives, then reverse the sign and array // Work with positives, then reverse the sign and array
@ -143,7 +143,7 @@ export function calcChartIntervals(values, withMinimum=false) {
let pseudoMinValue = Math.abs(maxValue); let pseudoMinValue = Math.abs(maxValue);
exponent = normalize(pseudoMaxValue)[1]; exponent = normalize(pseudoMaxValue)[1];
if(!withMinimum) { if (!withMinimum) {
intervals = getChartIntervals(pseudoMaxValue); intervals = getChartIntervals(pseudoMaxValue);
} else { } else {
intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue); intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);
@ -158,11 +158,11 @@ export function calcChartIntervals(values, withMinimum=false) {
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];
@ -181,7 +181,7 @@ export function getRealIntervals(max, noOfIntervals, min = 0, asc = 1) {
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);
} }
@ -193,7 +193,7 @@ export function getIntervalSize(orderedArray) {
} }
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) {
@ -210,7 +210,7 @@ export function isInRange2D(coord, minCoord, maxCoord) {
} }
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);
}, []); }, []);
@ -226,7 +226,7 @@ export function calcDistribution(values, distributionSize) {
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);
} }