react-native-gifted-charts 1.2.27 → 1.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.27",
+  "version": "1.2.30",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

package/src/BarChart/index.tsx

@@ -44,6 +44,7 @@ type PropTypes = {
   xAxisColor?: ColorValue;
   yAxisThickness?: number;
   yAxisColor?: ColorValue;
+  xAxisType?: String;
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
@@ -103,6 +104,7 @@ type PropTypes = {
 
   disableScroll?: Boolean;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
   roundedTop?: Boolean;
   roundedBottom?: Boolean;
   disablePress?: boolean;
@@ -402,6 +404,7 @@ export const BarChart = (props: PropTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -715,11 +718,17 @@ export const BarChart = (props: PropTypes) => {
                   {backgroundColor: backgroundColor},
                 ]}>
                 {index === noOfSections ? (
-                  <View
-                    style={[
-                      styles.lastLine,
-                      {height: xAxisThickness, backgroundColor: xAxisColor},
-                    ]}
+                  <Rule
+                    config={{
+                      thickness: xAxisThickness,
+                      color: xAxisColor,
+                      width: horizontal
+                        ? props.width || Math.min(300, totalWidth)
+                        : (props.width || totalWidth) + 11,
+                      dashWidth: dashWidth,
+                      dashGap: dashGap,
+                      type: xAxisType,
+                    }}
                   />
                 ) : hideRules ? null : (
                   <Rule
@@ -1379,6 +1388,7 @@ export const BarChart = (props: PropTypes) => {
           !props.width && {width: totalWidth},
         ]}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         horizontal
         // data={props.stackData || data}
         keyExtractor={(item, index) => index.toString()}>

package/src/LineChart/index.tsx

@@ -71,6 +71,7 @@ type propTypes = {
   animateTogether?: boolean;
   xAxisThickness?: number;
   xAxisColor?: ColorValue;
+  xAxisType?: String;
   hideRules?: Boolean;
   rulesColor?: ColorValue;
   rulesThickness?: number;
@@ -119,6 +120,7 @@ type propTypes = {
   disableScroll?: Boolean;
   pointerConfig?: Pointer;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
 
   //Indices
 
@@ -1554,6 +1556,7 @@ export const LineChart = (props: propTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -1855,11 +1858,15 @@ export const LineChart = (props: propTypes) => {
                     },
                   ]}>
                   {index === noOfSections ? (
-                    <View
-                      style={[
-                        styles.lastLine,
-                        {height: xAxisThickness, backgroundColor: xAxisColor},
-                      ]}
+                    <Rule
+                      config={{
+                        thickness: xAxisThickness,
+                        color: xAxisColor,
+                        width: (props.width || totalWidth) + 11,
+                        dashWidth: dashWidth,
+                        dashGap: dashGap,
+                        type: xAxisType,
+                      }}
                     />
                   ) : hideRules ? null : (
                     <Rule
@@ -3287,6 +3294,7 @@ export const LineChart = (props: propTypes) => {
           }
         }}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         style={[
           {
             marginLeft:

package/src/PieChart/index.tsx

@@ -67,6 +67,8 @@ type itemType = {
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
   onPress?: Function;
   onLabelPress?: Function;
+  strokeWidth?: number;
+  strokeColor?: string;
 };
 
 export const PieChart = (props: propTypes) => {
@@ -74,32 +76,29 @@ export const PieChart = (props: propTypes) => {
   const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
   const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
   const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  if (props.data.length <= 1 || !props.focusOnPress || selectedIndex === -1) {
-    return (
-      <PieChartMain
-        {...props}
-        key="pie"
-        setSelectedIndex={setSelectedIndex}
-        selectedIndex={selectedIndex}
-      />
-    );
-  } else {
-    let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
-    // let startColor;
-    let total = 0;
-    props.data.forEach(item => {
-      total += item.value;
-    });
-    if (selectedIndex !== 0) {
-      let start = 0;
-      for (let i = 0; i < selectedIndex; i++) {
-        start += props.data[i].value;
-      }
-      startAngle += (2 * pi * start) / total;
+  let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+  let total = 0;
+  props.data.forEach(item => {
+    total += item.value;
+  });
+  if (selectedIndex !== 0) {
+    let start = 0;
+    for (let i = 0; i < selectedIndex; i++) {
+      start += props.data[i].value;
     }
-    return (
-      <View>
+    startAngle += (2 * pi * start) / total;
+  }
+  return (
+    <View
+      style={{
+        height: (radius + extraRadiusForFocused) * 2,
+        width: (radius + extraRadiusForFocused) * 2,
+      }}>
+      {!(
+        props.data.length <= 1 ||
+        !props.focusOnPress ||
+        selectedIndex === -1
+      ) && (
         <View
           style={{
             position: 'absolute',
@@ -113,26 +112,31 @@ export const PieChart = (props: propTypes) => {
                 value: props.data[selectedIndex].value,
                 color:
                   props.data[selectedIndex].color || colors[selectedIndex % 9],
+                strokeColor: props.data[selectedIndex].strokeColor || null,
+                strokeWidth: props.data[selectedIndex].strokeWidth || null,
+                gradientCenterColor:
+                  props.data[selectedIndex].gradientCenterColor || null,
               },
               {
                 value: total - props.data[selectedIndex].value,
-                color: 'transparent',
+                peripheral: true,
+                strokeWidth: 0,
               },
             ]}
-            key="pie"
             radius={radius + extraRadiusForFocused}
             initialAngle={startAngle}
+            showText={false}
+            innerRadius={props.innerRadius || radius / 2.5}
           />
         </View>
-        <View style={{position: 'absolute'}}>
-          <PieChartMain
-            {...props}
-            key="pie"
-            selectedIndex={selectedIndex}
-            setSelectedIndex={setSelectedIndex}
-          />
-        </View>
+      )}
+      <View style={{position: 'absolute'}}>
+        <PieChartMain
+          {...props}
+          selectedIndex={selectedIndex}
+          setSelectedIndex={setSelectedIndex}
+        />
       </View>
-    );
-  }
+    </View>
+  );
 };

package/src/PieChart/main.tsx

@@ -73,6 +73,9 @@ type itemType = {
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
   onPress?: Function;
   onLabelPress?: Function;
+  strokeWidth?: number;
+  strokeColor?: string;
+  peripheral?: boolean;
 };
 
 export const PieChartMain = (props: propTypes) => {
@@ -266,10 +269,6 @@ export const PieChartMain = (props: propTypes) => {
               cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
               (item.shiftY || 0);
 
-            // console.log('sx', sx);
-            // console.log('sy', sy);
-            // console.log('ax', ax);
-            // console.log('ay', ay);
             return (
               <Path
                 key={index + 'a'}
@@ -280,10 +279,18 @@ export const PieChartMain = (props: propTypes) => {
                 } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
                   cy + (item.shiftY || 0)
                 }`}
-                stroke={strokeColor}
-                strokeWidth={strokeWidth}
+                stroke={item.strokeColor || strokeColor}
+                strokeWidth={
+                  props.focusOnPress && props.selectedIndex === index
+                    ? 0
+                    : item.strokeWidth === 0
+                    ? 0
+                    : item.strokeWidth || strokeWidth
+                }
                 fill={
-                  showGradient
+                  props.selectedIndex === index || item.peripheral
+                    ? 'transparent'
+                    : showGradient
                     ? `url(#grad${index})`
                     : item.color || colors[index % 9]
                 }

package/src/todos.md

@@ -4,19 +4,15 @@
 
 ## To-dos in documentation-
 
-1. Prepare a doc for Bar chart with negative values
-2. Prepare a doc for Line chart with negative values
-3. Prepare a doc for Bar chart with y axis on right side
-4. Prepare a doc for Line chart with y axis on right side
-5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
-6. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
-7. Prepare a doc for Bar chart with barMarginBottom
-8. Prepare a doc for reference lines
-9. Prepare a doc for labelsPosition in Pie and Donut charts
-8. Prepare a doc for adjustToWidth in Line and Area charts
-9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
-10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
-11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+1. Prepare a doc for Line chart with negative values
+2. Prepare a doc for Line chart with y axis on right side
+3. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
+4. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
+5. Prepare a doc for labelsPosition in Pie and Donut charts
+6. Prepare a doc for adjustToWidth in Line and Area charts
+7. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
+8. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
+9. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
 
 
 ## Architecture Enhancement