Merge pull request #776 from Abhinandan-Kushwaha/development

v1.4.29 Secondary Y axis with negative values, refactors & fixes
Abhinandan-Kushwaha · Aug 12, 2024 · 26ca0be · 26ca0be
2 parents dacb803 + dd42f39
commit 26ca0be
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 68 deletions.
diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md
@@ -52,6 +52,9 @@
 | autoCenterTooltip            | boolean              | When set to true, automatically centers the tooltip                                                                                               | false               |
 | adjustToWidth                | boolean              | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth                                 | false               |
 | parentWidth                  | number               | The width of the parent View or the width that the chart should auto-fit into when `adjustToWidth` is true                                        | screenWidth         |
+| showValuesAsTopLabel         | boolean              | When set to true, shows the value as a label at the top of the bar                                                                                | false               |
+| topLabelContainerStyle       | object               | style of the top label container                                                                                                                  | \_                  |
+| topLabelTextStyle            | object               | text style for the top labels that appear at the top of bars                                                                                      | \_                  |
 
 #### lineConfig
 

diff --git a/examples/LineChart/SecondaryLineChartFromDataSet.tsx b/examples/LineChart/SecondaryLineChartFromDataSet.tsx
@@ -10,7 +10,7 @@ const SecondaryLineChart = () => {
       {value: 100},
       {value: 120},
       {value: 100, label: '2005', showXAxisIndex: true},
-      {value: 80},
+      {value: -80},
       {value: 90},
       {value: 110},
       {value: 120},
@@ -25,18 +25,18 @@ const SecondaryLineChart = () => {
       {value: 112},
     ];
     const d2 = [
-      0.055, 0.02, 0.1, 0.01, 0.05, 0.06, 0.08, 0.1, 0.08, 0.07, 0.06, 0.025,
+      0.055, 0.02, 0.1, 0.01, -0.05, 0.06, 0.08, 0.1, 0.08, 0.07, 0.06, 0.025,
       0.04, 0.06, 0.045, 0.09, 0.06, 0.04,
     ];
 
     const dataSet: Array<DataSet> = [
       {
         data: d1,
-        color: 'skyblue',
-        dataPointsColor: 'blue',
+        color: 'orange',
+        dataPointsColor: 'red',
         textColor: 'green',
       },
-      {data: d2.map(v=>({value:v})), color: 'orange', dataPointsColor: 'red', isSecondary:true},
+      {data: d2.map(v=>({value:v})), color: 'skyblue', dataPointsColor: 'blue', isSecondary:true},
     ];
 
     return (
@@ -45,9 +45,9 @@ const SecondaryLineChart = () => {
           dataSet={dataSet}
           maxValue={140}
           noOfSections={7}
-          spacing={16}
+          spacing={15}
           hideDataPoints
-          hideRules
+          // hideRules
           color="orange"
           yAxisColor={'orange'}
           showYAxisIndices

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.28",
+  "version": "1.4.29",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.29"
+    "gifted-charts-core": "^0.1.30"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,37 @@
+# 🎉 1.4.29
+
+## ✨ Features added-
+
+1. The prop `topLabelTextStyle` now works for stacked Bar charts just like it used to work for simple Bar charts. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/446#issuecomment-2269078504
+
+2. Secondary Y axis with negative values in secondary data or dataSet with `isSecondary: true` sets are now supported. Independent height, stepHeight, stepValue, mostNegativeValue, noOfSectionsBelowXAxis for primary and secondary Y-axes below origin supported.
+
+## 🐛 Bug fixes
+
+Fixed the issue- Negative steps and values in in second y axis are incorrect position. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/775
+
+## 🔨 Refactor
+
+1. Removed unnecessary interpolation for animations in Line charts.
+
+2. Passed `containerHeightIncludingBelowXAxis` to the `renderChartContent` method from the `BarAndLineChartsWrapper` component. This will ensure a consistent value of containerHeightIncludingBelowXAxis.
+
+3. Updated the util (`maxAndMinUtil`) to compute the value of `minItem` in case of `roundToDigits:true` in gifted-charts-core.
+
+4. Moved the computation of below variables from `getHorizSectionVals` to `useBarAndLineChartsWrapper` in gifted-charts-core.
+
+   1. secondaryMaxItem
+   2. secondaryMinItem
+   3. secondaryStepValue
+   4. secondaryNegativeStepValue
+   5. secondaryNoOfSectionsBelowXAxis
+
+---
+
+---
+
+---
+
 # 🎉 1.4.28
 
 ## ✨ Features added-

diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx
@@ -279,7 +279,7 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
               item.topLabelContainerStyle,
             ]}>
             {showValuesAsTopLabel ? (
-              <Text style={item.topLabelTextStyle}>
+              <Text style={item.topLabelTextStyle ?? props.topLabelTextStyle}>
                 {item.stacks.reduce((acc, stack) => acc + stack.value, 0)}
               </Text>
             ) : (

diff --git a/src/Components/BarAndLineChartsWrapper/index.tsx b/src/Components/BarAndLineChartsWrapper/index.tsx
@@ -233,7 +233,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
                 ) : null;
               })
           }
-          {renderChartContent()}
+          {renderChartContent(containerHeightIncludingBelowXAxis)}
         </Fragment>
       </ScrollView>
       {referenceLinesOverChartContent

diff --git a/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx b/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx
@@ -85,6 +85,8 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     getLabelTextsForSecondaryYAxis,
   } = getHorizSectionVals(props);
 
+  const secondaryYAxisExtraHeightAtBottom = 10;
+
   const renderAxesAndRules = (index: number) => {
     const invertedIndex = horizSections.length - index - 1;
     return (
@@ -189,7 +191,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
             borderRightColor: yAxisColor,
             borderTopColor: secondaryXAxis?.color ?? xAxisColor,
             borderTopWidth: secondaryXAxis
-              ? secondaryXAxis.thickness ?? xAxisThickness
+              ? (secondaryXAxis.thickness ?? xAxisThickness)
               : 0,
             backgroundColor: backgroundColor,
             width: (props.width || totalWidth - spacing) + endSpacing,
@@ -205,8 +207,8 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
   const renderSecondaryYaxisLabels = (
     horizSections: HorizSectionsType,
     isBelow: boolean,
-  ) =>
-    horizSections.map((sectionItems, index) => {
+  ) => {
+    return horizSections.map((sectionItems, index) => {
       let label = getLabelTextsForSecondaryYAxis(sectionItems.value, index);
       if (secondaryYAxisConfig.hideOrigin && index === 0) {
         label = '';
@@ -221,16 +223,23 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
               position: 'absolute',
               zIndex: 1,
               bottom:
-                (secondaryYAxisConfig.stepHeight ?? 0) *
-                ((isBelow ? 0 : noOfSectionsBelowXAxis) +
-                  index -
-                  (noOfSectionsBelowXAxis ? 0 : 0.5)),
+                (index - 0.5) *
+                  (isBelow
+                    ? (secondaryYAxisConfig.negativeStepHeight ??
+                      secondaryYAxisConfig.stepHeight ??
+                      0)
+                    : (secondaryYAxisConfig.stepHeight ?? 0)) +
+                (isBelow ? secondaryYAxisExtraHeightAtBottom : 0),
               width: secondaryYAxisConfig.yAxisLabelWidth,
-              height: secondaryYAxisConfig.stepHeight ?? 0,
+              height: isBelow
+                ? (secondaryYAxisConfig.negativeStepHeight ??
+                  secondaryYAxisConfig.stepHeight ??
+                  0)
+                : (secondaryYAxisConfig.stepHeight ?? 0),
             },
             yAxisLabelContainerStyle,
           ]}>
-          {secondaryYAxisConfig.showYAxisIndices && index !== 0 ? (
+          {secondaryYAxisConfig.showYAxisIndices && (index !== 0 || isBelow) ? (
             <View
               style={{
                 height: secondaryYAxisConfig.yAxisIndicesHeight,
@@ -250,6 +259,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         </View>
       );
     });
+  };
 
   const referenceLines = () => {
     return (
@@ -587,11 +597,38 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                   borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
                   height: containerHeight + yAxisExtraHeightAtTop,
                   bottom: stepHeight / -2,
+                  // backgroundColor:'red'
                 }}>
                 {!secondaryYAxisConfig.hideYAxisText
                   ? renderSecondaryYaxisLabels(secondaryHorizSections, false)
                   : null}
-                {noOfSectionsBelowXAxis && !secondaryYAxisConfig.hideYAxisText
+              </View>
+            ) : null
+          }
+
+          {
+            /***********************************************************************************************/
+            /*************************      Render the secondary Y Axis below origin   *********************/
+            /***********************************************************************************************/
+
+            secondaryYAxisConfig.noOfSectionsBelowXAxis ? (
+              <View
+                style={{
+                  width: secondaryYAxisConfig.yAxisLabelWidth,
+                  left:
+                    (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
+                    yAxisLabelWidth,
+                  borderColor: secondaryYAxisConfig.yAxisColor,
+                  borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
+                  height:
+                    (secondaryYAxisConfig.negativeStepHeight ??
+                      secondaryYAxisConfig.stepHeight ??
+                      stepHeight) *
+                      secondaryHorizSectionsBelow.length +
+                    secondaryYAxisExtraHeightAtBottom,
+                  bottom: -containerHeight - stepHeight * 0.84,
+                }}>
+                {!secondaryYAxisConfig.hideYAxisText
                   ? renderSecondaryYaxisLabels(
                       secondaryHorizSectionsBelow,
                       true,