diff --git a/src/js/chart.js b/src/js/chart.js index be22d68..53696ab 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 75ceff9..0000000 --- a/src/js/charts/MultiAxisChart.js +++ /dev/null @@ -1,183 +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 < this.oldState.xExtra; i++) { - let unit = lastUnit.cloneNode(true); - parentNode.appendChild(unit); - svgUnits.push(unit); - } - } - - this.renderer.setZeroline(d.yAxis.zeroLine); - - svgUnits.map((unit, 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 - ) - ); - }); - }, - }); - }); - } -}