From 2bd0f2ca41ba180f99e971e65cd0f8c713ef84b4 Mon Sep 17 00:00:00 2001 From: Colton McCormack Date: Wed, 3 Mar 2021 15:51:27 -0600 Subject: [PATCH 1/2] Rework X axis labeling to allow dissimilar dataset lengths --- package.json | 1 - src/line-chart/LineChart.tsx | 23 ++++++++++++++--------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index ab087172..6819c0a2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "react-native-chart-kit", "version": "6.11.0", "devDependencies": { - "@types/react": "^16.9.38", "@types/react-native": "^0.62.13", "babel-eslint": "10.x", "babel-plugin-module-resolver": "^3.1.1", diff --git a/src/line-chart/LineChart.tsx b/src/line-chart/LineChart.tsx index 3b7a5a90..9fc90d61 100644 --- a/src/line-chart/LineChart.tsx +++ b/src/line-chart/LineChart.tsx @@ -278,7 +278,7 @@ class LineChart extends AbstractChart { return null; } } = this.props; - + const xMax = this.getXMaxValues(data); data.forEach(dataset => { if (dataset.withDots == false) return; @@ -287,8 +287,7 @@ class LineChart extends AbstractChart { return; } - const cx = - paddingRight + (i * (width - paddingRight)) / dataset.data.length; + const cx = paddingRight + (i * (width - paddingRight)) / xMax; const cy = ((baseHeight - this.calcHeight(x, datas, height)) / 4) * 3 + @@ -617,14 +616,14 @@ class LineChart extends AbstractChart { const output = []; const datas = this.getDatas(data); const baseHeight = this.calcBaseHeight(datas, height); + const xMax = this.getXMaxValues(data); let lastPoint: string; data.forEach((dataset, index) => { const points = dataset.data.map((d, i) => { if (d === null) return lastPoint; - const x = - (i * (width - paddingRight)) / dataset.data.length + paddingRight; + const x = (i * (width - paddingRight)) / xMax + paddingRight; const y = ((baseHeight - this.calcHeight(d, datas, height)) / 4) * 3 + paddingTop; @@ -649,6 +648,12 @@ class LineChart extends AbstractChart { return output; }; + getXMaxValues = (data: Dataset[]) => { + return data.reduce((acc, cur) => { + return cur.data.length > acc ? cur.data.length : acc; + }, 0); + }; + getBezierLinePoints = ( dataset: Dataset, { @@ -667,11 +672,10 @@ class LineChart extends AbstractChart { } const datas = this.getDatas(data); + const xMax = this.getXMaxValues(data); const x = (i: number) => - Math.floor( - paddingRight + (i * (width - paddingRight)) / dataset.data.length - ); + Math.floor(paddingRight + (i * (width - paddingRight)) / xMax); const baseHeight = this.calcBaseHeight(datas, height); @@ -744,6 +748,7 @@ class LineChart extends AbstractChart { useColorFromDataset: AbstractChartConfig["useShadowColorFromDataset"]; }) => data.map((dataset, index) => { + const xMax = this.getXMaxValues(data); const d = this.getBezierLinePoints(dataset, { width, @@ -753,7 +758,7 @@ class LineChart extends AbstractChart { data }) + ` L${paddingRight + - ((width - paddingRight) / dataset.data.length) * + ((width - paddingRight) / xMax) * (dataset.data.length - 1)},${(height / 4) * 3 + paddingTop} L${paddingRight},${(height / 4) * 3 + paddingTop} Z`; From 3b331988f18e22647174dc00e554ce5f8fc3c4a3 Mon Sep 17 00:00:00 2001 From: Colt McCormack Date: Thu, 3 Jun 2021 01:31:37 -0500 Subject: [PATCH 2/2] Add prepare script for GitHub sourced library usage (builds on install) --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6819c0a2..317d4b08 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "test": "jest", "build": "tsc", "dev": "tsc --watch", - "prepublish": "yarn build" + "prepublish": "yarn build", + "prepare": "yarn build" }, "jest": { "preset": "jest-expo"