From ebcfd068a486d64f21b5fe5fdb32097148d1727a Mon Sep 17 00:00:00 2001 From: Abhinandan Kushwaha Date: Mon, 11 Oct 2021 04:49:19 +0530 Subject: [PATCH] Made Y axis Label texts a separate Array --- docs/BarChart/BarChartProps.md | 62 ++++++++++++++++---------------- docs/LineChart/LineChartProps.md | 59 +++++++++++++++--------------- package.json | 2 +- src/BarChart/index.tsx | 8 +++-- src/LineChart/index.tsx | 8 ++--- 5 files changed, 72 insertions(+), 67 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 306e3a6..540fe1f 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -56,7 +56,6 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab | labelComponent | Component | Custom label component appearing below the bar | | topLabelComponent | Component | Custom component appearing above the bar | | topLabelContainerStyle | object | Style object for the container of the custom component appearing above the bar | -| yAxisLabelText | string | Y axis label text | | cappedBars | Boolean | To show caps on the top of bar | | capThickness | number | Thickness of the bar cap | | capColor | ColorValue | Color of the bar cap | @@ -68,36 +67,37 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab ### Axes and rules related props -| Prop | Type | Description | Default value | -| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- | -| xAxisColor | ColorValue | X axis color | black | -| xAxisThickness | number | X axis thickness | 1 | -| yAxisColor | ColorValue | Y axis color | black | -| yAxisThickness | number | Y axis thickness | 1 | -| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | -| yAxisTextStyle | object | Style object for the Y axis text style | \_ | -| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | -| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | -| hideYAxisText | Boolean | To hide Y axis label text | false | -| rulesColor | ColorValue | Color of the horizontal rules | lightgray | -| rulesThickness | number | Thickness of the horizontal rules | 1 | -| hideRules | Boolean | To hide the horizontal rules | false | -| showVerticalLines | Boolean | To show vertical lines | false | -| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | -| verticallinesThickness | number | Thickness of the vertical lines | 1 | -| verticalLinesZIndex | number | Z index of the vertical lines | -1 | -| showXAxisIndices | Boolean | To show the pointers on the X axis | false | -| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | -| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | -| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | -| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | -| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | -| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | -| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | -| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false | -| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) | barWidth | +| Prop | Type | Description | Default value | +| ---------------------- | ------------- | ---------------------------------------------------------------------- | ------------- | +| xAxisColor | ColorValue | X axis color | black | +| xAxisThickness | number | X axis thickness | 1 | +| yAxisColor | ColorValue | Y axis color | black | +| yAxisThickness | number | Y axis thickness | 1 | +| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | +| yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | +| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | +| hideYAxisText | Boolean | To hide Y axis label text | false | +| rulesColor | ColorValue | Color of the horizontal rules | lightgray | +| rulesThickness | number | Thickness of the horizontal rules | 1 | +| hideRules | Boolean | To hide the horizontal rules | false | +| showVerticalLines | Boolean | To show vertical lines | false | +| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | +| verticallinesThickness | number | Thickness of the vertical lines | 1 | +| verticalLinesZIndex | number | Z index of the vertical lines | -1 | +| showXAxisIndices | Boolean | To show the pointers on the X axis | false | +| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | +| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | +| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | +| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | +| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | +| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | +| yAxisLabelTexts | Array | Array of label texts to be displayed along y axis | null | +| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | +| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false | +| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) | barWidth | --- diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index df948b9..aa5977e 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -66,35 +66,36 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to ### Axes and rules related props -| Prop | Type | Description | Default value | -| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- | -| xAxisColor | ColorValue | X axis color | black | -| xAxisThickness | number | X axis thickness | 1 | -| yAxisColor | ColorValue | Y axis color | black | -| yAxisThickness | number | Y axis thickness | 1 | -| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | -| yAxisTextStyle | object | Style object for the Y axis text style | \_ | -| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | -| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | -| hideYAxisText | Boolean | To hide Y axis label text | false | -| rulesColor | ColorValue | Color of the horizontal rules | lightgray | -| rulesThickness | number | Thickness of the horizontal rules | 1 | -| hideRules | Boolean | To hide the horizontal rules | false | -| showVerticalLines | Boolean | To show vertical lines | false | -| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | -| verticallinesThickness | number | Thickness of the vertical lines | 1 | -| verticalLinesZIndex | number | Z index of the vertical lines | -1 | -| showXAxisIndices | Boolean | To show the pointers on the X axis | false | -| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | -| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | -| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | -| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | -| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | -| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | -| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | -| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false | +| Prop | Type | Description | Default value | +| ---------------------- | ------------- | ---------------------------------------------------------------------- | ------------- | +| xAxisColor | ColorValue | X axis color | black | +| xAxisThickness | number | X axis thickness | 1 | +| yAxisColor | ColorValue | Y axis color | black | +| yAxisThickness | number | Y axis thickness | 1 | +| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | +| yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | +| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | +| hideYAxisText | Boolean | To hide Y axis label text | false | +| rulesColor | ColorValue | Color of the horizontal rules | lightgray | +| rulesThickness | number | Thickness of the horizontal rules | 1 | +| hideRules | Boolean | To hide the horizontal rules | false | +| showVerticalLines | Boolean | To show vertical lines | false | +| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | +| verticallinesThickness | number | Thickness of the vertical lines | 1 | +| verticalLinesZIndex | number | Z index of the vertical lines | -1 | +| showXAxisIndices | Boolean | To show the pointers on the X axis | false | +| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | +| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | +| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | +| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | +| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | +| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | +| yAxisLabelTexts | Array | Array of label texts to be displayed along y axis | null | +| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | +| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false | --- diff --git a/package.json b/package.json index e805915..dae8fd3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "0.1.6", + "version": "0.1.8", "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.", "main": "src/index.tsx", "files": [ diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index e348547..28db91f 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -81,6 +81,7 @@ type PropTypes = { barBorderRadius?: number; hideOrigin?: Boolean; labelWidth?: number; + yAxisLabelTexts?: Array; }; type sectionType = { value: string; @@ -102,7 +103,6 @@ type itemType = { disablePress?: any; labelComponent?: View; spacing?: number; - yAxisLabelText?: string; }; export const BarChart = (props: PropTypes) => { @@ -215,7 +215,11 @@ export const BarChart = (props: PropTypes) => { if (props.showFractionalValues || props.roundToDigits) { value = parseFloat(value.toFixed(props.roundToDigits || 1)); } - horizSections.push({value: data[i].yAxisLabelText ?? value.toString()}); + horizSections.push({ + value: props.yAxisLabelTexts + ? props.yAxisLabelTexts[i] ?? value.toString() + : value.toString(), + }); } const heightValue = new Animated.Value(0); diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 786e667..6766d7e 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -121,6 +121,7 @@ type propTypes = { hideOrigin?: Boolean; textShiftX?: number; textShiftY?: number; + yAxisLabelTexts?: Array; }; type itemType = { value?: number; @@ -142,7 +143,6 @@ type itemType = { showVerticalLine?: Boolean; verticalLineColor?: string; verticalLineThickness?: number; - yAxisLabelText?: string; }; type sectionType = { @@ -289,9 +289,9 @@ export const LineChart = (props: propTypes) => { value = parseFloat(value.toFixed(props.roundToDigits || 1)); } horizSections.push({ - value: - data[i].yAxisLabelText ?? - (data2 ? data2[i].yAxisLabelText : value.toString()), + value: props.yAxisLabelTexts + ? props.yAxisLabelTexts[i] ?? value.toString() + : value.toString(), }); }