react-native-gifted-charts 1.4.19 → 1.4.20

package/README.md

@@ -23,6 +23,8 @@ The exact same piece of code that you write to render charts in react-native, ca
 
 ## [Release notes 🎉](release-notes/release-notes.md)
 
+See the **[release changes by version here.](release-notes/release-notes.md)**
+
 
 <img src='/demos/bars.png' alt=''/>
 <img src='/demos/lineArea.png' alt=''/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.19",
+  "version": "1.4.20",
   "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": "src/index.tsx",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.18"
+    "gifted-charts-core": "^0.1.19"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx

@@ -4,8 +4,10 @@ import Svg, {Path} from 'react-native-svg';
 import {renderSpecificVerticalLines} from './renderSpecificVerticalLines';
 import {renderDataPoints} from './renderDataPoints';
 import {renderSpecificDataPoints} from './renderSpecificDataPoints';
+import {LineInBarChartPropsType} from 'gifted-charts-core';
+import {DataPointProps} from 'gifted-charts-core';
 
-const RenderLineInBarChart = (props: any) => {
+const RenderLineInBarChart = (props: LineInBarChartPropsType) => {
   const {
     yAxisLabelWidth,
     initialSpacing,
@@ -22,11 +24,12 @@ const RenderLineInBarChart = (props: any) => {
     barWidth,
     labelsExtraHeight,
     xAxisLabelsVerticalShift,
+    selectedIndex,
   } = props;
 
   const firstBarWidth = data[0].barWidth ?? barWidth;
 
-  const dataPointsProps = {
+  const dataPointsProps: DataPointProps = {
     data,
     lineConfig,
     barWidth,
@@ -35,6 +38,7 @@ const RenderLineInBarChart = (props: any) => {
     firstBarWidth,
     yAxisLabelWidth,
     spacing,
+    selectedIndex,
   };
 
   const specificVerticalLinesProps = {
@@ -89,9 +93,9 @@ const RenderLineInBarChart = (props: any) => {
           {lineConfig.showArrow && (
             <Path
               d={arrowPoints}
-              fill={lineConfig.arrowConfig.fillColor}
-              stroke={lineConfig.arrowConfig.strokeColor}
-              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+              fill={lineConfig.arrowConfig?.fillColor}
+              stroke={lineConfig.arrowConfig?.strokeColor}
+              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
             />
           )}
         </Svg>
@@ -127,9 +131,9 @@ const RenderLineInBarChart = (props: any) => {
           {lineConfig.showArrow && (
             <Path
               d={arrowPoints}
-              fill={lineConfig.arrowConfig.fillColor}
-              stroke={lineConfig.arrowConfig.strokeColor}
-              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+              fill={lineConfig.arrowConfig?.fillColor}
+              stroke={lineConfig.arrowConfig?.strokeColor}
+              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
             />
           )}
         </Svg>

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx

@@ -3,8 +3,9 @@ import {styles} from '../../../BarChart/styles';
 import {View} from 'react-native';
 import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
 import {Rect, Text as CanvasText, Circle} from 'react-native-svg';
+import {DataPointProps} from 'gifted-charts-core';
 
-export const renderDataPoints = (props: any) => {
+export const renderDataPoints = (props: DataPointProps) => {
   const {
     data,
     lineConfig,
@@ -14,13 +15,29 @@ export const renderDataPoints = (props: any) => {
     firstBarWidth,
     yAxisLabelWidth,
     spacing,
+    selectedIndex,
   } = props;
   return data.map((item: any, index: number) => {
-    if (index < lineConfig.startIndex || index > lineConfig.endIndex || item.hideDataPoint) {
+    if (
+      index < lineConfig.startIndex ||
+      index > lineConfig.endIndex ||
+      item.hideDataPoint
+    ) {
       return null;
     }
     const currentBarWidth = item.barWidth || barWidth || 30;
     const customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+    const dataPointColor =
+      lineConfig.focusEnabled &&
+      index === (lineConfig.focusedDataPointIndex ?? selectedIndex)
+        ? lineConfig.focusedDataPointColor
+        : lineConfig.dataPointsColor;
+
+    const dataPointRadius =
+      lineConfig.focusEnabled &&
+      index === (lineConfig.focusedDataPointIndex ?? selectedIndex)
+        ? lineConfig.focusedDataPointRadius
+        : lineConfig.dataPointsRadius;
     const value =
       item.value ??
       item.stacks.reduce((total: number, item: any) => total + item.value, 0);
@@ -73,7 +90,7 @@ export const renderDataPoints = (props: any) => {
             }
             width={lineConfig.dataPointsWidth}
             height={lineConfig.dataPointsHeight}
-            fill={lineConfig.dataPointsColor}
+            fill={dataPointColor}
           />
           {item.dataPointText && (
             <CanvasText
@@ -122,8 +139,8 @@ export const renderDataPoints = (props: any) => {
             containerHeight,
             maxValue,
           )}
-          r={lineConfig.dataPointsRadius}
-          fill={lineConfig.dataPointsColor}
+          r={dataPointRadius}
+          fill={dataPointColor}
         />
         {item.dataPointText && (
           <CanvasText

package/src/LineChart/index.tsx

@@ -34,6 +34,7 @@ import {
   useLineChart,
   adjustToOffset,
   LineProperties,
+  LineDefaults,
 } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
@@ -626,7 +627,9 @@ export const LineChart = (props: LineChartPropsType) => {
           item.dataPointHeight ||
           dataPtsHeight;
         dataPointsColor =
-          item.focusedDataPointColor || props.focusedDataPointColor || 'orange';
+          item.focusedDataPointColor ||
+          props.focusedDataPointColor ||
+          LineDefaults.focusedDataPointColor;
         dataPointsRadius =
           item.focusedDataPointRadius ||
           props.focusedDataPointRadius ||
@@ -1217,7 +1220,7 @@ export const LineChart = (props: LineChartPropsType) => {
             set.textFontSize ?? textFontSize1,
             set.startIndex ?? 0,
             set.endIndex ?? set.data.length - 1,
-            false,
+            set.isSecondary,
             showValuesAsDataPointsText,
           );
         }) ?? null}