From 26671b143b8722f60a20017b9d67f914451d6c31 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 26 Oct 2020 12:31:30 +0530 Subject: [PATCH] chore: format codebase --- src/js/charts/BaseChart.js | 74 ++++++++--------- src/js/charts/Heatmap.js | 58 +++++++------ src/js/charts/PercentageChart.js | 10 +-- src/js/charts/PieChart.js | 1 - src/js/objects/ChartComponents.js | 46 ++++++----- src/js/utils/animate.js | 24 +++--- src/js/utils/animation.js | 18 ++-- src/js/utils/axis-chart-utils.js | 44 +++++----- src/js/utils/date-utils.js | 14 ++-- src/js/utils/dom.js | 29 ++++--- src/js/utils/draw-utils.js | 20 ++--- src/js/utils/draw.js | 132 +++++++++++++++--------------- src/js/utils/export.js | 4 +- src/js/utils/helpers.js | 14 ++-- src/js/utils/intervals.js | 60 +++++++------- 15 files changed, 277 insertions(+), 271 deletions(-) diff --git a/src/js/charts/BaseChart.js b/src/js/charts/BaseChart.js index 084380a..91b9d6e 100644 --- a/src/js/charts/BaseChart.js +++ b/src/js/charts/BaseChart.js @@ -42,8 +42,8 @@ export default class BaseChart { this.measures = JSON.parse(JSON.stringify(BASE_MEASURES)); let m = this.measures; this.setMeasures(options); - if(!this.title.length) { m.titleHeight = 0; } - if(!this.config.showLegend) m.legendHeight = 0; + if (!this.title.length) { m.titleHeight = 0; } + if (!this.config.showLegend) m.legendHeight = 0; this.argHeight = options.height || m.baseHeight; this.state = {}; @@ -51,7 +51,7 @@ export default class BaseChart { this.initTimeout = INIT_CHART_UPDATE_TIMEOUT; - if(this.config.isNavigable) { + if (this.config.isNavigable) { this.overlays = []; } @@ -71,7 +71,7 @@ export default class BaseChart { colors = (colors || []).concat(DEFAULT_COLORS[type]); colors.forEach((string) => { const color = getColor(string); - if(!isValidColor(color)) { + if (!isValidColor(color)) { console.warn('"' + string + '" is not a valid color.'); } else { validColors.push(color); @@ -119,7 +119,7 @@ export default class BaseChart { className: 'chart-container' }; - if(this.independentWidth) { + if (this.independentWidth) { args.styles = { width: this.independentWidth + 'px' }; } @@ -134,9 +134,9 @@ export default class BaseChart { this.bindTooltip(); } - bindTooltip() {} + bindTooltip() { } - draw(onlyWidthChange=false, init=false) { + draw(onlyWidthChange = false, init = false) { if (onlyWidthChange && isHidden(this.parent)) { // Don't update anything if the chart is hidden return; @@ -151,9 +151,9 @@ export default class BaseChart { // this.components.forEach(c => c.make()); this.render(this.components, false); - if(init) { + if (init) { this.data = this.realData; - setTimeout(() => {this.update(this.data);}, this.initTimeout); + setTimeout(() => { this.update(this.data); }, this.initTimeout); } this.renderLegend(); @@ -161,7 +161,7 @@ export default class BaseChart { this.setupNavigation(init); } - calc() {} // builds state + calc() { } // builds state updateWidth() { this.baseWidth = getElementContentWidth(this.parent); @@ -169,7 +169,7 @@ export default class BaseChart { } makeChartArea() { - if(this.svg) { + if (this.svg) { this.container.removeChild(this.svg); } let m = this.measures; @@ -182,7 +182,7 @@ export default class BaseChart { ); this.svgDefs = makeSVGDefs(this.svg); - if(this.title.length) { + if (this.title.length) { this.titleEL = makeText( 'title', m.margins.left, @@ -202,7 +202,7 @@ export default class BaseChart { `translate(${getLeftOffset(m)}, ${top})` ); - if(this.config.showLegend) { + if (this.config.showLegend) { top += this.height + m.paddings.bottom; this.legendArea = makeSVGGroup( '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); - if(this.config.showLegend) { this.svg.appendChild(this.legendArea); } + if (this.config.showLegend) { this.svg.appendChild(this.legendArea); } this.updateTipOffset(getLeftOffset(m), getTopOffset(m)); } @@ -227,7 +227,7 @@ export default class BaseChart { setupComponents() { this.components = new Map(); } update(data) { - if(!data) { + if (!data) { console.error('No data to update.'); } this.data = this.prepareData(data); @@ -235,8 +235,8 @@ export default class BaseChart { this.render(this.components, this.config.animate); } - render(components=this.components, animate=true) { - if(this.config.isNavigable) { + render(components = this.components, animate = true) { + if (this.config.isNavigable) { // Remove all existing overlays this.overlays.map(o => o.parentNode.removeChild(o)); // ref.parentNode.insertBefore(element, ref); @@ -246,7 +246,7 @@ export default class BaseChart { components.forEach(c => { elementsToAnimate = elementsToAnimate.concat(c.update(animate)); }); - if(elementsToAnimate.length > 0) { + if (elementsToAnimate.length > 0) { runSMILAnimation(this.container, this.svg, elementsToAnimate); setTimeout(() => { components.forEach(c => c.make()); @@ -259,7 +259,7 @@ export default class BaseChart { } updateNav() { - if(this.config.isNavigable) { + if (this.config.isNavigable) { this.makeOverlay(); this.bindUnits(); } @@ -289,7 +289,7 @@ export default class BaseChart { setupNavigation(init = false) { if (!this.config.isNavigable) return; - if(init) { + if (init) { this.bindOverlay(); this.keyActions = { @@ -301,9 +301,9 @@ export default class BaseChart { }; document.addEventListener('keydown', (e) => { - if(isElementInViewport(this.container)) { + if (isElementInViewport(this.container)) { e = e || window.event; - if(this.keyActions[e.keyCode]) { + if (this.keyActions[e.keyCode]) { this.keyActions[e.keyCode](); } } @@ -311,24 +311,24 @@ export default class BaseChart { } } - makeOverlay() {} - updateOverlay() {} - bindOverlay() {} - bindUnits() {} + makeOverlay() { } + updateOverlay() { } + bindOverlay() { } + bindUnits() { } - onLeftArrow() {} - onRightArrow() {} - onUpArrow() {} - onDownArrow() {} - onEnterKey() {} + onLeftArrow() { } + onRightArrow() { } + onUpArrow() { } + onDownArrow() { } + onEnterKey() { } - addDataPoint() {} - removeDataPoint() {} + addDataPoint() { } + removeDataPoint() { } - getDataPoint() {} - setCurrentDataPoint() {} + getDataPoint() { } + setCurrentDataPoint() { } - updateDataset() {} + updateDataset() { } export() { let chartSvg = prepareForExport(this.svg); diff --git a/src/js/charts/Heatmap.js b/src/js/charts/Heatmap.js index dacb10e..de5a128 100644 --- a/src/js/charts/Heatmap.js +++ b/src/js/charts/Heatmap.js @@ -1,11 +1,15 @@ import BaseChart from './BaseChart'; import { getComponent } from '../objects/ChartComponents'; import { makeText, heatSquare } from '../utils/draw'; -import { 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 { + 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 { getExtraHeight, getExtraWidth, HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE, - HEATMAP_GUTTER_SIZE } from '../utils/constants'; +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 ROW_HEIGHT = COL_WIDTH; @@ -49,19 +53,19 @@ export default class Heatmap extends BaseChart { + getExtraWidth(this.measures); } - prepareData(data=this.data) { - if(data.start && data.end && data.start > data.end) { + prepareData(data = this.data) { + if (data.start && data.end && data.start > data.end) { throw new Error('Start date cannot be greater than end date.'); } - if(!data.start) { + if (!data.start) { 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 || {}; - if(parseInt(Object.keys(data.dataPoints)[0]) > 100000) { + if (parseInt(Object.keys(data.dataPoints)[0]) > 100000) { let points = {}; Object.keys(data.dataPoints).forEach(timestampSec => { let date = new Date(timestampSec * NO_OF_MILLIS); @@ -105,7 +109,7 @@ export default class Heatmap extends BaseChart { .reduce((a, b) => a + b, 0) * COL_WIDTH }, - function() { + function () { return s.domainConfigs[i]; }.bind(this) @@ -120,8 +124,8 @@ export default class Heatmap extends BaseChart { let y = 0; DAY_NAMES_SHORT.forEach((dayName, i) => { - if([1, 3, 5].includes(i)) { - let dayText = makeText('subdomain-name', -COL_WIDTH/2, y, dayName, + if ([1, 3, 5].includes(i)) { + let dayText = makeText('subdomain-name', -COL_WIDTH / 2, y, dayName, { fontSize: HEATMAP_SQUARE_SIZE, dy: 8, @@ -135,7 +139,7 @@ export default class Heatmap extends BaseChart { } update(data) { - if(!data) { + if (!data) { console.error('No data to update.'); } @@ -149,22 +153,22 @@ export default class Heatmap extends BaseChart { this.components.forEach(comp => { let daySquares = comp.store; let daySquare = e.target; - if(daySquares.includes(daySquare)) { + if (daySquares.includes(daySquare)) { let count = daySquare.getAttribute('data-value'); 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 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 value = count + ' ' + this.countLabel; 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(); } }); @@ -183,7 +187,7 @@ export default class Heatmap extends BaseChart { dy: 9 } ); - x = (COL_WIDTH * 2) + COL_WIDTH/2; + x = (COL_WIDTH * 2) + COL_WIDTH / 2; this.legendArea.appendChild(lessText); this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => { @@ -192,7 +196,7 @@ export default class Heatmap extends BaseChart { 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', { fontSize: HEATMAP_SQUARE_SIZE + 1, @@ -212,9 +216,9 @@ export default class Heatmap extends BaseChart { let domainConfigs = []; let startOfMonth = clone(s.start); - for(var i = 0; i < noOfMonths; i++) { + for (var i = 0; i < noOfMonths; i++) { let endDate = s.end; - if(!areInSameMonth(startOfMonth, s.end)) { + if (!areInSameMonth(startOfMonth, s.end)) { let [month, year] = [startOfMonth.getMonth(), startOfMonth.getFullYear()]; endDate = getLastDateInMonth(month, year); } @@ -227,7 +231,7 @@ export default class Heatmap extends BaseChart { return domainConfigs; } - getDomainConfig(startDate, endDate='') { + getDomainConfig(startDate, endDate = '') { let [month, year] = [startDate.getMonth(), startDate.getFullYear()]; let startOfWeek = setDayToSunday(startDate); // TODO: Monday as well endDate = clone(endDate) || getLastDateInMonth(month, year); @@ -241,7 +245,7 @@ export default class Heatmap extends BaseChart { let noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate); let cols = [], col; - for(var i = 0; i < noOfMonthWeeks; i++) { + for (var i = 0; i < noOfMonthWeeks; i++) { col = this.getCol(startOfWeek, month); cols.push(col); @@ -249,7 +253,7 @@ export default class Heatmap extends BaseChart { 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); cols.push(this.getCol(startOfWeek, month, true)); } @@ -266,13 +270,13 @@ export default class Heatmap extends BaseChart { let currentDate = clone(startDate); 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 = {}; // Non-generic adjustment for entire heatmap, needs state let currentDateWithinData = currentDate >= s.start && currentDate <= s.end; - if(empty || currentDate.getMonth() !== month || !currentDateWithinData) { + if (empty || currentDate.getMonth() !== month || !currentDateWithinData) { config.yyyyMmDd = getYyyyMmDd(currentDate); } else { config = this.getSubDomainConfig(currentDate); diff --git a/src/js/charts/PercentageChart.js b/src/js/charts/PercentageChart.js index 7724191..f2f05e4 100644 --- a/src/js/charts/PercentageChart.js +++ b/src/js/charts/PercentageChart.js @@ -34,7 +34,7 @@ export default class PercentageChart extends AggregationChart { { barHeight: this.barOptions.height, }, - function() { + function () { return { xPositions: s.xPositions, widths: s.widths, @@ -80,13 +80,13 @@ export default class PercentageChart extends AggregationChart { 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 title = (this.formattedLabels && this.formattedLabels.length>0 + let title = (this.formattedLabels && this.formattedLabels.length > 0 ? 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(); } }); diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index 3457ba7..e550a73 100644 --- a/src/js/charts/PieChart.js +++ b/src/js/charts/PieChart.js @@ -3,7 +3,6 @@ import { getComponent } from '../objects/ChartComponents'; import { getOffset } from '../utils/dom'; import { getPositionByAngle } from '../utils/helpers'; import { makeArcPathStr, makeCircleStr } from '../utils/draw'; -import { lightenDarkenColor } from '../utils/colors'; import { transform } from '../utils/animation'; import { FULL_ANGLE } from '../utils/constants'; diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js index cd20268..77e3284 100644 --- a/src/js/objects/ChartComponents.js +++ b/src/js/objects/ChartComponents.js @@ -1,8 +1,10 @@ import { makeSVGGroup } 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 { translateHoriLine, translateVertLine, animateRegion, animateBar, - animateDot, animatePath, animatePathStr } from '../utils/animate'; +import { + translateHoriLine, translateVertLine, animateRegion, animateBar, + animateDot, animatePath, animatePathStr +} from '../utils/animate'; import { getMonthName } from '../utils/date-utils'; class ChartComponent { @@ -27,7 +29,7 @@ class ChartComponent { this.labels = []; this.layerClass = layerClass; - this.layerClass = typeof(this.layerClass) === 'function' + this.layerClass = typeof (this.layerClass) === 'function' ? this.layerClass() : this.layerClass; this.refresh(); @@ -61,7 +63,7 @@ class ChartComponent { update(animate = true) { this.refresh(); let animateElements = []; - if(animate) { + if (animate) { animateElements = this.animateElements(this.data) || []; } return animateElements; @@ -86,7 +88,7 @@ let componentConfigs = { pieSlices: { layerClass: 'pie-slices', makeElements(data) { - return data.sliceStrings.map((s, i) =>{ + return data.sliceStrings.map((s, i) => { let slice = makePath(s, 'pie-path', 'none', data.colors[i]); slice.style.transition = 'transform .3s;'; return slice; @@ -103,7 +105,7 @@ let componentConfigs = { layerClass: 'percentage-bars', makeElements(data) { const numberOfPoints = data.xPositions.length; - return data.xPositions.map((x, i) =>{ + return data.xPositions.map((x, i) => { let y = 0; let isLast = i == numberOfPoints - 1; @@ -115,7 +117,7 @@ let componentConfigs = { }, animateElements(newData) { - if(newData) return []; + if (newData) return []; } }, yAxis: { @@ -123,7 +125,7 @@ let componentConfigs = { makeElements(data) { return data.positions.map((position, i) => 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) { return data.positions.map((position, i) => 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) { return data.map(r => yRegion(r.startPos, r.endPos, this.constants.width, - r.label, {labelPos: r.options.labelPos}) + r.label, { labelPos: r.options.labelPos }) ); }, animateElements(newData) { @@ -254,16 +256,16 @@ let componentConfigs = { }, heatDomain: { - layerClass: function() { return 'heat-domain domain-' + this.constants.index; }, + layerClass: function () { return 'heat-domain domain-' + this.constants.index; }, makeElements(data) { - let {index, colWidth, rowHeight, squareSize, radius, xTranslate} = this.constants; + let { index, colWidth, rowHeight, squareSize, radius, xTranslate } = this.constants; let monthNameHeight = -12; let x = xTranslate, y = 0; this.serializedSubDomains = []; data.cols.map((week, weekNo) => { - if(weekNo === 1) { + if (weekNo === 1) { this.labels.push( makeText('domain-name', x, monthNameHeight, getMonthName(index, true).toUpperCase(), { @@ -273,7 +275,7 @@ let componentConfigs = { ); } week.map((day, i) => { - if(day.fill) { + if (day.fill) { let data = { 'data-date': day.yyyyMmDd, 'data-value': day.dataValue, @@ -292,12 +294,12 @@ let componentConfigs = { }, animateElements(newData) { - if(newData) return []; + if (newData) return []; } }, 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) { let c = this.constants; this.unitType = 'bar'; @@ -351,7 +353,7 @@ let componentConfigs = { this.store.map((bar, i) => { animateElements = animateElements.concat(animateBar( bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], - {zeroLine: newData.zeroLine} + { zeroLine: newData.zeroLine } )); }); @@ -360,12 +362,12 @@ let componentConfigs = { }, 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) { let c = this.constants; this.unitType = 'dot'; this.paths = {}; - if(!c.hideLine) { + if (!c.hideLine) { this.paths = getPaths( data.xPositions, data.yPositions, @@ -383,7 +385,7 @@ let componentConfigs = { } this.units = []; - if(c.showDots) { + if (c.showDots) { this.units = data.yPositions.map((y, j) => { return datasetDot( data.xPositions[j], @@ -422,12 +424,12 @@ let componentConfigs = { let animateElements = []; - if(Object.keys(this.paths).length) { + if (Object.keys(this.paths).length) { animateElements = animateElements.concat(animatePath( this.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline)); } - if(this.units.length) { + if (this.units.length) { this.units.map((dot, i) => { animateElements = animateElements.concat(animateDot( dot, newXPos[i], newYPos[i])); diff --git a/src/js/utils/animate.js b/src/js/utils/animate.js index 2cc6c8e..2deeae9 100644 --- a/src/js/utils/animate.js +++ b/src/js/utils/animate.js @@ -11,11 +11,11 @@ export function translate(unit, oldCoord, newCoord, duration) { let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', '); return [ unit, - {transform: newCoord.join(', ')}, + { transform: newCoord.join(', ') }, duration, STD_EASING, "translate", - {transform: old} + { transform: old } ]; } @@ -42,14 +42,14 @@ export function animateRegion(rectGroup, newY1, newY2, oldY2) { 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); y -= offset; - if(bar.nodeName !== 'rect') { + if (bar.nodeName !== 'rect') { let rect = bar.childNodes[0]; let rectAnim = [ rect, - {width: width, height: height}, + { width: width, height: height }, UNIT_ANIM_DUR, 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); return [rectAnim, groupAnim]; } 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); } 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 groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR); return [groupAnim]; } 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); } @@ -81,16 +81,16 @@ export function animatePath(paths, newXList, newYList, zeroLine, spline) { if (spline) 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); - if(paths.region) { + if (paths.region) { let regStartPt = `${newXList[0]},${zeroLine}L`; let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`; const animRegion = [ paths.region, - {d:"M" + regStartPt + pointsStr + regEndPt}, + { d: "M" + regStartPt + pointsStr + regEndPt }, PATH_ANIM_DUR, STD_EASING ]; @@ -101,5 +101,5 @@ export function animatePath(paths, newXList, newYList, zeroLine, spline) { } export function animatePathStr(oldPath, pathStr) { - return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING]; + return [oldPath, { d: pathStr }, UNIT_ANIM_DUR, STD_EASING]; } diff --git a/src/js/utils/animation.js b/src/js/utils/animation.js index 8df29b0..77bf2f1 100644 --- a/src/js/utils/animation.js +++ b/src/js/utils/animation.js @@ -11,14 +11,14 @@ const EASING = { 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); - for(var attributeName in props) { + for (var attributeName in props) { let animateElement; - if(attributeName === 'transform') { + if (attributeName === 'transform') { animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform"); } else { 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, to: value, begin: "0s", - dur: dur/1000 + "s", + dur: dur / 1000 + "s", values: currentValue + ";" + value, keySplines: EASING[easingType], keyTimes: "0;1", @@ -39,7 +39,7 @@ function animateSVGElement(element, props, dur, easingType="linear", type=undefi fill: 'freeze' }; - if(type) { + if (type) { animAttr["type"] = type; } @@ -49,7 +49,7 @@ function animateSVGElement(element, props, dur, easingType="linear", type=undefi animElement.appendChild(animateElement); - if(type) { + if (type) { newElement.setAttribute(attributeName, `translate(${value})`); } else { newElement.setAttribute(attributeName, value); @@ -97,10 +97,10 @@ function animateSVG(svgContainer, elements) { } export function runSMILAnimation(parent, svgElement, elementsToAnimate) { - if(elementsToAnimate.length === 0) return; + if (elementsToAnimate.length === 0) return; let animSvgElement = animateSVG(svgElement, elementsToAnimate); - if(svgElement.parentNode == parent) { + if (svgElement.parentNode == parent) { parent.removeChild(svgElement); parent.appendChild(animSvgElement); @@ -108,7 +108,7 @@ export function runSMILAnimation(parent, svgElement, elementsToAnimate) { // Replace the new svgElement (data has already been replaced) setTimeout(() => { - if(animSvgElement.parentNode == parent) { + if (animSvgElement.parentNode == parent) { parent.removeChild(animSvgElement); parent.appendChild(svgElement); } diff --git a/src/js/utils/axis-chart-utils.js b/src/js/utils/axis-chart-utils.js index 5f58854..853e9a3 100644 --- a/src/js/utils/axis-chart-utils.js +++ b/src/js/utils/axis-chart-utils.js @@ -1,6 +1,8 @@ import { fillArray } from '../utils/helpers'; -import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH, - SERIES_LABEL_SPACE_RATIO } from '../utils/constants'; +import { + DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH, + SERIES_LABEL_SPACE_RATIO +} from '../utils/constants'; export function dataPrep(data, type) { data.labels = data.labels || []; @@ -10,16 +12,16 @@ export function dataPrep(data, type) { // Datasets let datasets = data.datasets; let zeroArray = new Array(datasetLength).fill(0); - if(!datasets) { + if (!datasets) { // default datasets = [{ values: zeroArray }]; } - datasets.map(d=> { + datasets.map(d => { // Set values - if(!d.values) { + if (!d.values) { d.values = zeroArray; } else { // Check for non values @@ -27,7 +29,7 @@ export function dataPrep(data, type) { vals = vals.map(val => (!isNaN(val) ? val : 0)); // Trim or extend - if(vals.length > datasetLength) { + if (vals.length > datasetLength) { vals = vals.slice(0, datasetLength); } else { vals = fillArray(vals, datasetLength - vals.length, 0); @@ -38,8 +40,8 @@ export function dataPrep(data, type) { // // Set type - if(!d.chartType ) { - if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE; + if (!d.chartType) { + if (!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE; d.chartType = type; } @@ -49,9 +51,9 @@ export function dataPrep(data, type) { // Regions // data.yRegions = data.yRegions || []; - if(data.yRegions) { + if (data.yRegions) { data.yRegions.map(d => { - if(d.end < d.start) { + if (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 = [ { value: 0, @@ -84,7 +86,7 @@ export function zeroDataPrep(realData) { ]; } - if(realData.yRegions) { + if (realData.yRegions) { zeroData.yRegions = [ { start: 0, @@ -97,30 +99,30 @@ export function zeroDataPrep(realData) { 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; - if(allowedSpace <= 0) allowedSpace = 1; + if (allowedSpace <= 0) allowedSpace = 1; let allowedLetters = allowedSpace / DEFAULT_CHAR_WIDTH; let seriesMultiple; - if(isSeries) { + if (isSeries) { // Find the maximum label length for spacing calculations 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) => { label += ""; - if(label.length > allowedLetters) { + if (label.length > allowedLetters) { - if(!isSeries) { - if(allowedLetters-3 > 0) { - label = label.slice(0, allowedLetters-3) + " ..."; + 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)) { + if (i % seriesMultiple !== 0 && i !== (labels.length - 1)) { label = ""; } } diff --git a/src/js/utils/date-utils.js b/src/js/utils/date-utils.js index d0c8d80..1f9b982 100644 --- a/src/js/utils/date-utils.js +++ b/src/js/utils/date-utils.js @@ -27,8 +27,8 @@ export function getYyyyMmDd(date) { let mm = date.getMonth() + 1; // getMonth() is zero-based return [ date.getFullYear(), - (mm>9 ? '' : '0') + mm, - (dd>9 ? '' : '0') + dd + (mm > 9 ? '' : '0') + mm, + (dd > 9 ? '' : '0') + dd ].join('-'); } @@ -37,12 +37,12 @@ export function clone(date) { } export function timestampSec(date) { - return date.getTime()/NO_OF_MILLIS; + return date.getTime() / NO_OF_MILLIS; } export function timestampToMidnight(timestamp, roundAhead = false) { let midnightTs = Math.floor(timestamp - (timestamp % SEC_IN_DAY)); - if(roundAhead) { + if (roundAhead) { return midnightTs + SEC_IN_DAY; } return midnightTs; @@ -65,12 +65,12 @@ export function areInSameMonth(startDate, endDate) { && startDate.getFullYear() === endDate.getFullYear(); } -export function getMonthName(i, short=false) { +export function getMonthName(i, short = false) { let monthName = MONTH_NAMES[i]; 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 } @@ -78,7 +78,7 @@ export function getLastDateInMonth (month, year) { export function setDayToSunday(date) { let newDate = clone(date); const day = newDate.getDay(); - if(day !== 0) { + if (day !== 0) { addDays(newDate, (-1) * day); } return newDate; diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 91cd2a7..5b690d2 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -1,9 +1,8 @@ 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; while (node.previousSibling) { node = node.previousSibling; @@ -27,12 +26,12 @@ $.create = (tag, o) => { element.appendChild(ref); } else if (i === "styles") { - if(typeof val === "object") { + if (typeof val === "object") { Object.keys(val).map(prop => { element.style[prop] = val[prop]; }); } - } else if (i in element ) { + } else if (i in element) { element[i] = val; } else { @@ -67,9 +66,9 @@ export function isElementInViewport(el) { return ( rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ - rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ + rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); } @@ -81,7 +80,7 @@ export function getElementContentWidth(element) { return element.clientWidth - padding; } -export function bind(element, o){ +export function bind(element, o) { if (element) { for (var event in o) { 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) { for (var event in o) { var callback = o[event]; - event.split(/\s+/).forEach(function(event) { + event.split(/\s+/).forEach(function (event) { element.removeEventListener(event, callback); }); } @@ -108,7 +107,7 @@ export function unbind(element, o){ export function fire(target, type, properties) { var evt = document.createEvent("HTMLEvents"); - evt.initEvent(type, true, true ); + evt.initEvent(type, true, true); for (var j in properties) { evt[j] = properties[j]; @@ -119,17 +118,17 @@ export function fire(target, type, properties) { // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ export function forEachNode(nodeList, callback, scope) { - if(!nodeList) return; + if (!nodeList) return; for (var i = 0; i < nodeList.length; 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}`); forEachNode($children, (node, i) => { - if(index >= 0 && i <= index) return; + if (index >= 0 && i <= index) return; node.classList.remove(activeClass); }); diff --git a/src/js/utils/draw-utils.js b/src/js/utils/draw-utils.js index c4a81aa..595255d 100644 --- a/src/js/utils/draw-utils.js +++ b/src/js/utils/draw-utils.js @@ -17,7 +17,7 @@ export function equilizeNoOfElements(array1, array2, extraCount = array2.length - array1.length) { // Doesn't work if either has zero elements. - if(extraCount > 0) { + if (extraCount > 0) { array1 = fillArray(array1, extraCount); } else { array2 = fillArray(array2, extraCount); @@ -30,7 +30,7 @@ export function truncateString(txt, len) { return; } if (txt.length > len) { - return txt.slice(0, len-3) + '...'; + return txt.slice(0, len - 3) + '...'; } else { return txt; } @@ -47,18 +47,18 @@ export function shortenLargeNumber(label) { // Using absolute since log wont work for negative numbers let p = Math.floor(Math.log10(Math.abs(number))); 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)); // 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) export function getSplineCurvePointsStr(xList, yList) { - let points=[]; - for(let i=0;i { let p = previous || current; let n = next || current; @@ -82,18 +82,18 @@ export function getSplineCurvePointsStr(xList, yList) { let y = current[1] + Math.sin(angle) * length; return [x, y]; }; - + 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]}`; }; - + 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); } diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 79f73e9..6f913cd 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -10,7 +10,7 @@ const BASE_LINE_COLOR = '#E2E6E9'; const FONT_FILL = '#313B44'; 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) { @@ -28,14 +28,14 @@ export function createSVG(tag, o) { element.appendChild(ref); } else if (i === "styles") { - if(typeof val === "object") { + if (typeof val === "object") { Object.keys(val).map(prop => { element.style[prop] = val[prop]; }); } } else { - if(i === "className") { i = "class"; } - if(i === "innerHTML") { + if (i === "className") { i = "class"; } + if (i === "innerHTML") { element['textContent'] = val; } else { 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 = { className: className, transform: transform }; - if(parent) args.inside = parent; + if (parent) args.inside = parent; return createSVG('g', args); } -export function wrapInSVGGroup(elements, className='') { +export function wrapInSVGGroup(elements, className = '') { let g = createSVG('g', { className: className }); @@ -98,7 +98,7 @@ export function wrapInSVGGroup(elements, className='') { 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', { className: className, 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 [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; return `M${center.x} ${center.y} @@ -119,7 +119,7 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock ${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 [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y]; return `M${center.x} ${center.y} @@ -131,7 +131,7 @@ export function makeCircleStr(startPosition, endPosition, center, radius, clockW ${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 [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y]; @@ -140,7 +140,7 @@ export function makeArcStrokePathStr(startPosition, endPosition, center, radius, ${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 [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) { - let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default'); + let gradientId = 'path-fill-gradient' + '-' + color + '-' + (lighter ? 'lighter' : 'default'); let gradientDef = renderVerticalGradient(svgDefElem, gradientId); let opacities = [1, 0.6, 0.2]; if (lighter) { @@ -169,20 +169,20 @@ export function makeGradient(svgDefElem, color, lighter = false) { export function rightRoundedBar(x, width, height) { // https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90 - let radius = height/2; + let radius = height / 2; let xOffset = width - radius; 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) { - let radius = height/2; + let radius = height / 2; 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`; } -export function percentageBar(x, y, width, height, isFirst, isLast, fill='none') { +export function percentageBar(x, y, width, height, isFirst, isLast, fill = 'none') { if (isLast) { let pathStr = rightRoundedBar(x, width, height); 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); } -export function heatSquare(className, x, y, size, radius, fill='none', data={}) { +export function heatSquare(className, x, y, size, radius, fill = 'none', data = {}) { let args = { className: className, 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', { className: 'line-vertical ' + options.className, x1: 0, @@ -316,7 +316,7 @@ function makeVertLine(x, label, y1, y2, options={}) { }); let line = createSVG('g', { - transform: `translate(${ x }, 0)` + transform: `translate(${x}, 0)` }); line.appendChild(l); @@ -325,12 +325,12 @@ function makeVertLine(x, label, y1, y2, options={}) { return line; } -function makeHoriLine(y, label, x1, x2, options={}) { - if(!options.lineType) options.lineType = ''; +function makeHoriLine(y, label, x1, x2, options = {}) { + if (!options.lineType) options.lineType = ''; if (options.shortenNumbers) label = shortenLargeNumber(label); let className = 'line-horizontal ' + options.className + - (options.lineType === "dashed" ? "dashed": ""); + (options.lineType === "dashed" ? "dashed" : ""); let l = createSVG('line', { className: className, @@ -349,7 +349,7 @@ function makeHoriLine(y, label, x1, x2, options={}) { dy: (FONT_SIZE / 2 - 2) + 'px', 'font-size': FONT_SIZE + 'px', 'text-anchor': x1 < x2 ? 'end' : 'start', - innerHTML: label+"" + innerHTML: label + "" }); let line = createSVG('g', { @@ -357,7 +357,7 @@ function makeHoriLine(y, label, x1, x2, options={}) { 'stroke-opacity': 1 }); - if(text === 0 || text === '0') { + if (text === 0 || text === '0') { line.style.stroke = "rgba(27, 31, 35, 0.6)"; } @@ -367,19 +367,19 @@ function makeHoriLine(y, label, x1, x2, options={}) { return line; } -export function yLine(y, label, width, options={}) { +export function yLine(y, label, width, options = {}) { if (!isValidNumber(y)) y = 0; - if(!options.pos) options.pos = 'left'; - if(!options.offset) options.offset = 0; - if(!options.mode) options.mode = 'span'; - if(!options.stroke) options.stroke = BASE_LINE_COLOR; - if(!options.className) options.className = ''; + if (!options.pos) options.pos = 'left'; + if (!options.offset) options.offset = 0; + if (!options.mode) options.mode = 'span'; + if (!options.stroke) options.stroke = BASE_LINE_COLOR; + if (!options.className) options.className = ''; let x1 = -1 * AXIS_TICK_LENGTH; 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; 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(!options.pos) options.pos = 'bottom'; - if(!options.offset) options.offset = 0; - if(!options.mode) options.mode = 'span'; - if(!options.className) options.className = ''; + if (!options.pos) options.pos = 'bottom'; + if (!options.offset) options.offset = 0; + if (!options.mode) options.mode = 'span'; + if (!options.className) options.className = ''; // Draw X axis line in span/tick mode with optional label // y2(span) @@ -420,7 +420,7 @@ export function xLine(x, label, height, options={}) { let y1 = height + AXIS_TICK_LENGTH; 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 y1 = -1 * AXIS_TICK_LENGTH; y2 = 0; @@ -432,8 +432,8 @@ export function xLine(x, label, height, options={}) { }); } -export function yMarker(y, label, width, options={}) { - if(!options.labelPos) options.labelPos = 'right'; +export function yMarker(y, label, width, options = {}) { + if (!options.labelPos) options.labelPos = 'right'; let x = options.labelPos === 'left' ? LABEL_MARGIN : width - getStringWidth(label, 5) - LABEL_MARGIN; @@ -444,7 +444,7 @@ export function yMarker(y, label, width, options={}) { dy: (FONT_SIZE / -2) + 'px', 'font-size': FONT_SIZE + 'px', 'text-anchor': 'start', - innerHTML: label+"" + innerHTML: label + "" }); let line = makeHoriLine(y, '', 0, width, { @@ -458,7 +458,7 @@ export function yMarker(y, label, width, options={}) { return line; } -export function yRegion(y1, y2, width, label, options={}) { +export function yRegion(y1, y2, width, label, options = {}) { // return a group let height = y1 - y2; @@ -476,9 +476,9 @@ export function yRegion(y1, y2, width, label, options={}) { height: height }); - if(!options.labelPos) options.labelPos = 'right'; + if (!options.labelPos) options.labelPos = 'right'; 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', { className: 'chart-label', @@ -487,7 +487,7 @@ export function yRegion(y1, y2, width, label, options={}) { dy: (FONT_SIZE / -2) + 'px', 'font-size': FONT_SIZE + 'px', 'text-anchor': 'start', - innerHTML: label+"" + innerHTML: label + "" }); let region = createSVG('g', { @@ -500,11 +500,11 @@ export function yRegion(y1, y2, width, label, options={}) { 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); y -= offset; - if(height === 0) { + if (height === 0) { height = meta.minHeight; y -= meta.minHeight; } @@ -547,14 +547,14 @@ export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, m label += ""; - if(!label && !label.length) { + if (!label && !label.length) { return rect; } else { rect.setAttribute('y', 0); rect.setAttribute('x', 0); let text = createSVG('text', { className: 'data-point-value', - x: width/2, + x: width / 2, y: 0, dy: (FONT_SIZE / 2 * -1) + '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', { style: `fill: ${color}`, 'data-point-index': index, @@ -584,7 +584,7 @@ export function datasetDot(x, y, radius, color, label='', index=0) { label += ""; - if(!label && !label.length) { + if (!label && !label.length) { return dot; } else { 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 pointsStr = pointsList.join("L"); @@ -619,10 +619,10 @@ export function getPaths(xList, yList, color, options={}, meta={}) { if (options.spline) pointsStr = getSplineCurvePointsStr(xList, yList); - let path = makePath("M"+pointsStr, 'line-graph-path', color); + let path = makePath("M" + pointsStr, 'line-graph-path', color); // HeatLine - if(options.heatline) { + if (options.heatline) { let gradient_id = makeGradient(meta.svgDefs, color); path.style.stroke = `url(#${gradient_id})`; } @@ -632,7 +632,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) { }; // Region - if(options.regionFill) { + if (options.regionFill) { 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}`; @@ -645,7 +645,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) { export let makeOverlay = { 'bar': (unit) => { let transformValue; - if(unit.nodeName !== 'rect') { + if (unit.nodeName !== 'rect') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -653,7 +653,7 @@ export let makeOverlay = { overlay.style.fill = '#000000'; overlay.style.opacity = '0.4'; - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } return overlay; @@ -661,7 +661,7 @@ export let makeOverlay = { 'dot': (unit) => { let transformValue; - if(unit.nodeName !== 'circle') { + if (unit.nodeName !== 'circle') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -672,7 +672,7 @@ export let makeOverlay = { overlay.setAttribute('fill', fill); overlay.style.opacity = '0.6'; - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } return overlay; @@ -680,7 +680,7 @@ export let makeOverlay = { 'heat_square': (unit) => { let transformValue; - if(unit.nodeName !== 'circle') { + if (unit.nodeName !== 'circle') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -691,7 +691,7 @@ export let makeOverlay = { overlay.setAttribute('fill', fill); overlay.style.opacity = '0.6'; - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } return overlay; @@ -701,7 +701,7 @@ export let makeOverlay = { export let updateOverlay = { 'bar': (unit, overlay) => { let transformValue; - if(unit.nodeName !== 'rect') { + if (unit.nodeName !== 'rect') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -712,14 +712,14 @@ export let updateOverlay = { overlay.setAttribute(attr.name, attr.nodeValue); }); - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } }, 'dot': (unit, overlay) => { let transformValue; - if(unit.nodeName !== 'circle') { + if (unit.nodeName !== 'circle') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -730,14 +730,14 @@ export let updateOverlay = { overlay.setAttribute(attr.name, attr.nodeValue); }); - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } }, 'heat_square': (unit, overlay) => { let transformValue; - if(unit.nodeName !== 'circle') { + if (unit.nodeName !== 'circle') { transformValue = unit.getAttribute('transform'); unit = unit.childNodes[0]; } @@ -748,7 +748,7 @@ export let updateOverlay = { overlay.setAttribute(attr.name, attr.nodeValue); }); - if(transformValue) { + if (transformValue) { overlay.setAttribute('transform', transformValue); } }, diff --git a/src/js/utils/export.js b/src/js/utils/export.js index 842dc3d..284f40b 100644 --- a/src/js/utils/export.js +++ b/src/js/utils/export.js @@ -4,13 +4,13 @@ import { CSSTEXT } from '../../css/chartsCss'; export function downloadFile(filename, data) { var a = document.createElement('a'); 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); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); - setTimeout(function(){ + setTimeout(function () { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 300); diff --git a/src/js/utils/helpers.js b/src/js/utils/helpers.js index 74805c9..f0ee548 100644 --- a/src/js/utils/helpers.js +++ b/src/js/utils/helpers.js @@ -14,10 +14,10 @@ export function floatTwo(d) { * @param {Array} arr2 Second array */ export function arraysEqual(arr1, arr2) { - if(arr1.length !== arr2.length) return false; + if (arr1.length !== arr2.length) return false; let areEqual = true; arr1.map((d, i) => { - if(arr2[i] !== d) areEqual = false; + if (arr2[i] !== d) areEqual = false; }); return areEqual; } @@ -46,8 +46,8 @@ export function shuffle(array) { * @param {Object} element element to fill with * @param {Boolean} start fill at start? */ -export function fillArray(array, count, element, start=false) { - if(!element) { +export function fillArray(array, count, element, start = false) { + if (!element) { element = start ? array[0] : array[array.length - 1]; } 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 */ export function getStringWidth(string, charWidth) { - return (string+"").length * charWidth; + return (string + "").length * charWidth; } export function bindChange(obj, getFn, setFn) { return new Proxy(obj, { - set: function(target, prop, value) { + set: function (target, prop, value) { setFn(); return Reflect.set(target, prop, value); }, - get: function(target, prop) { + get: function (target, prop) { getFn(); return Reflect.get(target, prop); } diff --git a/src/js/utils/intervals.js b/src/js/utils/intervals.js index 6218117..f109def 100644 --- a/src/js/utils/intervals.js +++ b/src/js/utils/intervals.js @@ -5,25 +5,25 @@ function normalize(x) { // Returns normalized number and exponent // https://stackoverflow.com/q/9383593/6495043 - if(x===0) { + if (x === 0) { return [0, 0]; } - if(isNaN(x)) { - return {mantissa: -6755399441055744, exponent: 972}; + if (isNaN(x)) { + return { mantissa: -6755399441055744, exponent: 972 }; } var sig = x > 0 ? 1 : -1; - if(!isFinite(x)) { - return {mantissa: sig * 4503599627370496, exponent: 972}; + if (!isFinite(x)) { + return { mantissa: sig * 4503599627370496, exponent: 972 }; } x = Math.abs(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]; } -function getChartRangeIntervals(max, min=0) { +function getChartRangeIntervals(max, min = 0) { let upperBound = Math.ceil(max); let lowerBound = Math.floor(min); let range = upperBound - lowerBound; @@ -32,38 +32,38 @@ function getChartRangeIntervals(max, min=0) { let partSize = 1; // To avoid too many partitions - if(range > 5) { - if(range % 2 !== 0) { + if (range > 5) { + if (range % 2 !== 0) { upperBound++; // Recalc range range = upperBound - lowerBound; } - noOfParts = range/2; + noOfParts = range / 2; partSize = 2; } // Special case: 1 and 2 - if(range <= 2) { + if (range <= 2) { noOfParts = 4; - partSize = range/noOfParts; + partSize = range / noOfParts; } // Special case: 0 - if(range === 0) { + if (range === 0) { noOfParts = 5; partSize = 1; } let intervals = []; - for(var i = 0; i <= noOfParts; i++){ + for (var i = 0; i <= noOfParts; i++) { intervals.push(lowerBound + partSize * i); } return intervals; } -function getChartIntervals(maxValue, minValue=0) { +function getChartIntervals(maxValue, minValue = 0) { 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 normalMaxValue = normalMaxValue.toFixed(6); @@ -73,7 +73,7 @@ function getChartIntervals(maxValue, minValue=0) { return intervals; } -export function calcChartIntervals(values, withMinimum=false) { +export function calcChartIntervals(values, withMinimum = false) { //*** Where the magic happens *** // Calculates best-fit y intervals from given values @@ -92,7 +92,7 @@ export function calcChartIntervals(values, withMinimum=false) { // Then unshift the negative values let value = 0; - for(var i = 1; value < absMinValue; i++) { + for (var i = 1; value < absMinValue; i++) { value += intervalSize; intervals.unshift((-1) * value); } @@ -101,9 +101,9 @@ export function calcChartIntervals(values, withMinimum=false) { // CASE I: Both non-negative - if(maxValue >= 0 && minValue >= 0) { + if (maxValue >= 0 && minValue >= 0) { exponent = normalize(maxValue)[1]; - if(!withMinimum) { + if (!withMinimum) { intervals = getChartIntervals(maxValue); } else { intervals = getChartIntervals(maxValue, minValue); @@ -112,7 +112,7 @@ export function calcChartIntervals(values, withMinimum=false) { // CASE II: Only minValue negative - else if(maxValue > 0 && minValue < 0) { + else if (maxValue > 0 && minValue < 0) { // `withMinimum` irrelevant in this case, // We'll be handling both sides of zero separately // (both starting from zero) @@ -121,7 +121,7 @@ export function calcChartIntervals(values, withMinimum=false) { let absMinValue = Math.abs(minValue); - if(maxValue >= absMinValue) { + if (maxValue >= absMinValue) { exponent = normalize(maxValue)[1]; intervals = getPositiveFirstIntervals(maxValue, absMinValue); } else { @@ -135,7 +135,7 @@ export function calcChartIntervals(values, withMinimum=false) { // CASE III: Both non-positive - else if(maxValue <= 0 && minValue <= 0) { + else if (maxValue <= 0 && minValue <= 0) { // Mirrored Case I: // Work with positives, then reverse the sign and array @@ -143,7 +143,7 @@ export function calcChartIntervals(values, withMinimum=false) { let pseudoMinValue = Math.abs(maxValue); exponent = normalize(pseudoMaxValue)[1]; - if(!withMinimum) { + if (!withMinimum) { intervals = getChartIntervals(pseudoMaxValue); } else { intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue); @@ -158,11 +158,11 @@ export function calcChartIntervals(values, withMinimum=false) { export function getZeroIndex(yPts) { let zeroIndex; let interval = getIntervalSize(yPts); - if(yPts.indexOf(0) >= 0) { + if (yPts.indexOf(0) >= 0) { // the range has a given zero // zero-line on the chart zeroIndex = yPts.indexOf(0); - } else if(yPts[0] > 0) { + } else if (yPts[0] > 0) { // Minimum value is positive // zero-line is off the chart: below let min = yPts[0]; @@ -181,7 +181,7 @@ export function getRealIntervals(max, noOfIntervals, min = 0, asc = 1) { let part = range * 1.0 / noOfIntervals; let intervals = []; - for(var i = 0; i <= noOfIntervals; i++) { + for (var i = 0; i <= noOfIntervals; i++) { intervals.push(min + part * i); } @@ -193,7 +193,7 @@ export function getIntervalSize(orderedArray) { } export function getValueRange(orderedArray) { - return orderedArray[orderedArray.length-1] - orderedArray[0]; + return orderedArray[orderedArray.length - 1] - orderedArray[0]; } export function scale(val, yAxis) { @@ -210,7 +210,7 @@ export function isInRange2D(coord, minCoord, maxCoord) { } 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); }, []); @@ -226,7 +226,7 @@ export function calcDistribution(values, distributionSize) { let distributionStep = 1 / (distributionSize - 1); let distribution = []; - for(var i = 0; i < distributionSize; i++) { + for (var i = 0; i < distributionSize; i++) { let checkpoint = dataMaxValue * (distributionStep * i); distribution.push(checkpoint); }