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