@@ -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); | |||
@@ -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); | |||
@@ -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(); | |||
} | |||
}); | |||
@@ -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'; | |||
@@ -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])); | |||
@@ -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]; | |||
} |
@@ -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); | |||
} | |||
@@ -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 = ""; | |||
} | |||
} | |||
@@ -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; | |||
@@ -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); | |||
}); | |||
@@ -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<xList.length;i++){ | |||
let points = []; | |||
for (let i = 0; i < xList.length; i++) { | |||
points.push([xList[i], yList[i]]); | |||
} | |||
@@ -71,7 +71,7 @@ export function getSplineCurvePointsStr(xList, yList) { | |||
angle: Math.atan2(lengthY, lengthX) | |||
}; | |||
}; | |||
let controlPoint = (current, previous, next, reverse) => { | |||
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); | |||
} |
@@ -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); | |||
} | |||
}, | |||
@@ -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); | |||
@@ -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); | |||
} | |||
@@ -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); | |||
} | |||