gifted-charts-core 0.0.20 → 0.0.22

package/src/PieChart/index.ts

@@ -1,104 +1,135 @@
-import { useEffect, useState } from "react";
-import { PieChartPropsType } from "./types";
-import { getTextSizeForPieLabels } from "../utils";
+import { useEffect, useState } from 'react'
+import { type pieDataItem, type PieChartPropsType } from './types'
+import { getTextSizeForPieLabels } from '../utils'
+import { type ColorValue } from 'react-native'
 
-export const usePieChart = (props: PieChartPropsType) => {
-  const radius = props.radius || 120;
+interface IusePieChart {
+  radius: number
+  extraRadiusForFocused: number
+  pi: number
+  selectedIndex: number
+  setSelectedIndex: (index: number) => void
+  startAngle: number
+  setStartAngle: (angle: number) => void
+  total: number
+  setTotal: (total: number) => void
+  data: pieDataItem[]
+  donut?: boolean
+  isThreeD?: boolean
+  semiCircle?: boolean
+  inwardExtraLengthForFocused: number
+  canvasWidth: number
+  canvasHeight: number
+  strokeWidth: number
+  innerRadius: number
+  innerCircleColor: ColorValue
+  innerCircleBorderWidth: number
+  innerCircleBorderColor: ColorValue
+  shiftInnerCenterX: number
+  shiftInnerCenterY: number
+  tiltAngle: string
+  isDataShifted: boolean
+  paddingHorizontal: number
+  paddingVertical: number
+}
+
+export const usePieChart = (props: PieChartPropsType): IusePieChart => {
+  const radius = props.radius ?? 120
   const extraRadiusForFocused =
     props.extraRadiusForFocused ??
-    (props.focusOnPress || props.sectionAutoFocus ? radius / 10 : 0);
-  const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
-  const [selectedIndex, setSelectedIndex] = useState(-1); // at the start, nothing is selected
+    (props.focusOnPress ?? props.sectionAutoFocus ? radius / 10 : 0)
+  const pi = props.semiCircle ? Math.PI / 2 : Math.PI
+  const [selectedIndex, setSelectedIndex] = useState(-1) // at the start, nothing is selected
   // because we're going to use a useEffect, we need startAngle and total to be state variables
   const [startAngle, setStartAngle] = useState(
-    props.initialAngle || (props.semiCircle ? -pi : 0)
-  );
-  const [total, setTotal] = useState(0);
+    props.initialAngle ?? (props.semiCircle ? -pi : 0)
+  )
+  const [total, setTotal] = useState(0)
 
   useEffect(() => {
     // Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
-    let newTotal = 0;
+    let newTotal = 0
     props.data.forEach((item) => {
-      newTotal += item.value;
-    });
-    setTotal(newTotal);
+      newTotal += item.value
+    })
+    setTotal(newTotal)
 
     // Update selectedIndex based on focused item
     const newSelectedIndex = props.data.findIndex(
       (item) => item.focused === true
-    );
-    setSelectedIndex(newSelectedIndex);
+    )
+    setSelectedIndex(newSelectedIndex)
 
     // Calculate the new start angle
-    let newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+    const newStartAngle = props.initialAngle ?? (props.semiCircle ? -pi : 0)
     if (newSelectedIndex !== -1) {
       // it was !== 0 here before, which would not work, it's either !==-1 or >=0
       // This could be used to replace the for loop that was used before
       const sumBeforeSelectedIndex = props.data
         .slice(0, newSelectedIndex)
-        .reduce((acc, item) => acc + item.value, 0);
+        .reduce((acc, item) => acc + item.value, 0)
       setStartAngle(
         newStartAngle + (2 * pi * sumBeforeSelectedIndex) / (newTotal || 1)
-      );
+      )
     } else {
-      setStartAngle(newStartAngle);
+      setStartAngle(newStartAngle)
     }
-  }, [props.data, props.initialAngle, props.semiCircle]);
+  }, [props.data, props.initialAngle, props.semiCircle])
 
   useEffect(() => {
     if (selectedIndex !== -1) {
-      const newStartAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
-      let start = 0;
+      const newStartAngle = props.initialAngle ?? (props.semiCircle ? -pi : 0)
+      let start = 0
       for (let i = 0; i < selectedIndex; i++) {
-        start += props.data[i].value;
+        start += props.data[i].value
       }
       if (total) {
-        setStartAngle(newStartAngle + (2 * pi * start) / (total || 1));
+        setStartAngle(newStartAngle + (2 * pi * start) / (total || 1))
       }
     }
-  }, [selectedIndex]);
+  }, [selectedIndex])
 
   const {
     data,
     donut,
     isThreeD,
     semiCircle,
-    inwardExtraLengthForFocused = 0,
-  } = props;
+    inwardExtraLengthForFocused = 0
+  } = props
 
-  const canvasWidth = radius * 2;
-  const canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
+  const canvasWidth = radius * 2
+  const canvasHeight = isThreeD ? radius * 2.3 : radius * 2
 
-  const strokeWidth = props.strokeWidth || 0;
-  const innerRadius = props.innerRadius || radius / 2.5;
+  const strokeWidth = props.strokeWidth ?? 0
+  const innerRadius = props.innerRadius ?? radius / 2.5
   const innerCircleColor =
-    props.innerCircleColor || props.backgroundColor || "white";
+    props.innerCircleColor ?? props.backgroundColor ?? 'white'
   const innerCircleBorderWidth =
-    props.innerCircleBorderWidth ||
-    (props.innerCircleBorderColor ? strokeWidth || 2 : 0);
-  const innerCircleBorderColor = props.innerCircleBorderColor || "lightgray";
-  const shiftInnerCenterX = props.shiftInnerCenterX || 0;
-  const shiftInnerCenterY = props.shiftInnerCenterY || 0;
+    props.innerCircleBorderWidth ??
+    (props.innerCircleBorderColor ? strokeWidth || 2 : 0)
+  const innerCircleBorderColor = props.innerCircleBorderColor ?? 'lightgray'
+  const shiftInnerCenterX = props.shiftInnerCenterX ?? 0
+  const shiftInnerCenterY = props.shiftInnerCenterY ?? 0
 
-  let tiltAngle = props.tiltAngle || "55deg";
+  const tiltAngle = props.tiltAngle ?? '55deg'
 
-  let isDataShifted = false;
+  let isDataShifted = false
 
   data.forEach((item: any) => {
     if (item.shiftX || item.shiftY) {
-      isDataShifted = true;
+      isDataShifted = true
     }
-  });
-  const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius);
+  })
+  const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius)
 
   const paddingHorizontal =
-    props.paddingHorizontal ?? props.labelsPosition === "onBorder"
+    props.paddingHorizontal ?? props.labelsPosition === 'onBorder'
       ? (props.textBackgroundRadius ?? textSize) * 2 + 6
-      : 0;
+      : 0
   const paddingVertical =
-    props.paddingVertical ?? props.labelsPosition === "onBorder"
+    props.paddingVertical ?? props.labelsPosition === 'onBorder'
       ? (props.textBackgroundRadius ?? textSize) * 2 + 6
-      : 0;
+      : 0
 
   return {
     radius,
@@ -127,6 +158,6 @@ export const usePieChart = (props: PieChartPropsType) => {
     tiltAngle,
     isDataShifted,
     paddingHorizontal,
-    paddingVertical,
-  };
-};
+    paddingVertical
+  }
+}

package/src/PieChart/main.ts

@@ -1,5 +1,5 @@
-import { getTextSizeForPieLabels } from "../utils";
-import { PieChartMainProps, pieDataItem } from "./types";
+import { getTextSizeForPieLabels } from '../utils'
+import { type PieChartMainProps, type pieDataItem } from './types'
 
 export const getPieChartMainProps = (props: PieChartMainProps) => {
   const {
@@ -7,120 +7,120 @@ export const getPieChartMainProps = (props: PieChartMainProps) => {
     isBiggerPie,
     paddingHorizontal,
     paddingVertical,
-    extraRadiusForFocused,
-  } = props;
-  const propData = props.data;
-  const data: Array<pieDataItem> = [];
-  let itemHasInnerComponent = false;
+    extraRadiusForFocused
+  } = props
+  const propData = props.data
+  const data: pieDataItem[] = []
+  let itemHasInnerComponent = false
   if (propData) {
     for (let i = 0; i < propData.length; i++) {
-      if (propData[i].pieInnerComponent) itemHasInnerComponent = true;
+      if (propData[i].pieInnerComponent) itemHasInnerComponent = true
       if (propData[i].value !== 0) {
-        data.push(propData[i]);
+        data.push(propData[i])
       } else {
         data.push({
           ...propData[i],
           value:
             props.data.map((item) => item.value).reduce((v, a) => v + a) /
-            160000,
-        });
+            160000
+        })
       }
     }
   }
-  const showInnerComponent = !!props.pieInnerComponent || itemHasInnerComponent;
+  const showInnerComponent = !!props.pieInnerComponent || itemHasInnerComponent
 
-  const radius = props.radius || 120;
-  const canvasWidth = radius * 2;
-  const canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
-  const shadowWidth = props.shadowWidth || radius / 5;
-  const backgroundColor = props.backgroundColor || "transparent";
-  const shadowColor = props.shadowColor || "lightgray";
-  const semiCircle = props.semiCircle || false;
+  const radius = props.radius ?? 120
+  const canvasWidth = radius * 2
+  const canvasHeight = isThreeD ? radius * 2.3 : radius * 2
+  const shadowWidth = props.shadowWidth ?? radius / 5
+  const backgroundColor = props.backgroundColor ?? 'transparent'
+  const shadowColor = props.shadowColor ?? 'lightgray'
+  const semiCircle = props.semiCircle ?? false
 
-  let pi = Math.PI;
-  const initialAngle = props.initialAngle || (semiCircle ? pi / -2 : 0);
-  const shadow = props.shadow || false;
-  const donut = props.donut || false;
-  const strokeWidth = props.strokeWidth || 0;
+  let pi = Math.PI
+  const initialAngle = props.initialAngle ?? (semiCircle ? pi / -2 : 0)
+  const shadow = props.shadow ?? false
+  const donut = props.donut ?? false
+  const strokeWidth = props.strokeWidth ?? 0
   const strokeColor =
-    props.strokeColor || (strokeWidth ? "gray" : "transparent");
-  const innerRadius = props.innerRadius || radius / 2.5;
+    props.strokeColor ?? (strokeWidth ? 'gray' : 'transparent')
+  const innerRadius = props.innerRadius ?? radius / 2.5
 
-  const showText = props.showText || false;
-  const textColor = props.textColor || "";
-  const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius);
-  let tiltAngle = props.tiltAngle || "55deg";
+  const showText = props.showText ?? false
+  const textColor = props.textColor ?? ''
+  const textSize = getTextSizeForPieLabels(props.textSize ?? 0, radius)
+  let tiltAngle = props.tiltAngle ?? '55deg'
   if (
     tiltAngle &&
     !isNaN(Number(tiltAngle)) &&
-    !(tiltAngle + "").endsWith("deg")
+    !(tiltAngle + '').endsWith('deg')
   ) {
-    tiltAngle += "deg";
+    tiltAngle += 'deg'
   }
 
   // const tilt = props.tilt ? Math.min(props.tilt, 1) : props.isThreeD ? 0.5 : 1;
   const labelsPosition = props.labelsPosition
     ? props.labelsPosition
     : donut || props.centerLabelComponent
-    ? "outward"
-    : "mid";
+      ? 'outward'
+      : 'mid'
 
-  const showTextBackground = props.showTextBackground || false;
-  const textBackgroundColor = props.textBackgroundColor || "white";
-  const showValuesAsLabels = props.showValuesAsLabels || false;
-  const showGradient = props.showGradient || false;
-  const gradientCenterColor = props.gradientCenterColor || "white";
-  const toggleFocusOnPress = props.toggleFocusOnPress ?? true;
+  const showTextBackground = props.showTextBackground ?? false
+  const textBackgroundColor = props.textBackgroundColor ?? 'white'
+  const showValuesAsLabels = props.showValuesAsLabels ?? false
+  const showGradient = props.showGradient ?? false
+  const gradientCenterColor = props.gradientCenterColor ?? 'white'
+  const toggleFocusOnPress = props.toggleFocusOnPress ?? true
 
-  let minShiftX = 0,
-    maxShiftX = 0,
-    minShiftY = 0,
-    maxShiftY = 0,
-    total = 0;
+  let minShiftX = 0
+  let maxShiftX = 0
+  let minShiftY = 0
+  let maxShiftY = 0
+  let total = 0
 
   data.forEach((item: any) => {
     if (item.shiftX || item.shiftY) {
       if (minShiftX > item.shiftX) {
-        minShiftX = item.shiftX;
+        minShiftX = item.shiftX
       }
       if (minShiftY > item.shiftY) {
-        minShiftY = item.shiftY;
+        minShiftY = item.shiftY
       }
       if (maxShiftX < item.shiftX) {
-        maxShiftX = item.shiftX;
+        maxShiftX = item.shiftX
       }
       if (maxShiftY < item.shiftY) {
-        maxShiftY = item.shiftY;
+        maxShiftY = item.shiftY
       }
     }
-  });
+  })
 
-  const horizAdjustment = maxShiftX - minShiftX;
-  const vertAdjustment = maxShiftY - minShiftY;
+  const horizAdjustment = maxShiftX - minShiftX
+  const vertAdjustment = maxShiftY - minShiftY
 
   if (semiCircle) {
-    pi = Math.PI / 2;
+    pi = Math.PI / 2
   }
 
-  let cx = radius,
-    cy = radius;
+  const cx = radius
+  const cy = radius
 
   total =
-    data && data.length
+    data && data.length > 0
       ? data.map((item) => item.value).reduce((v, a) => v + a)
-      : 0;
-  let acc = 0;
+      : 0
+  let acc = 0
   let pData = data.map((item) => {
-    acc += item.value / total;
-    return acc;
-  });
-  acc = 0;
-  let mData = data.map((item) => {
-    let pAcc = acc;
-    acc += item.value / total;
-    return pAcc + (acc - pAcc) / 2;
-  });
-  pData = [0, ...pData];
+    acc += item.value / total
+    return acc
+  })
+  acc = 0
+  const mData = data.map((item) => {
+    const pAcc = acc
+    acc += item.value / total
+    return pAcc + (acc - pAcc) / 2
+  })
+  pData = [0, ...pData]
 
   return {
     isThreeD,
@@ -168,6 +168,6 @@ export const getPieChartMainProps = (props: PieChartMainProps) => {
     acc,
     paddingHorizontal,
     paddingVertical,
-    extraRadiusForFocused,
-  };
-};
+    extraRadiusForFocused
+  }
+}

package/src/PieChart/types.ts

@@ -1,89 +1,89 @@
-import { ColorValue } from "react-native";
-import { FontStyle } from "react-native-svg";
+import { type ColorValue } from 'react-native'
+import { type FontStyle } from 'react-native-svg'
 
-export type PieChartPropsType = {
-  radius?: number;
-  isThreeD?: boolean;
-  donut?: boolean;
-  innerRadius?: number;
-  shadow?: boolean;
-  innerCircleColor?: ColorValue;
-  innerCircleBorderWidth?: number;
-  innerCircleBorderColor?: ColorValue;
-  shiftInnerCenterX?: number;
-  shiftInnerCenterY?: number;
-  shadowColor?: string;
-  shadowWidth?: number;
-  strokeWidth?: number;
-  strokeColor?: string;
-  backgroundColor?: string;
-  data: Array<pieDataItem>;
-  semiCircle?: boolean;
+export interface PieChartPropsType {
+  radius?: number
+  isThreeD?: boolean
+  donut?: boolean
+  innerRadius?: number
+  shadow?: boolean
+  innerCircleColor?: ColorValue
+  innerCircleBorderWidth?: number
+  innerCircleBorderColor?: ColorValue
+  shiftInnerCenterX?: number
+  shiftInnerCenterY?: number
+  shadowColor?: string
+  shadowWidth?: number
+  strokeWidth?: number
+  strokeColor?: string
+  backgroundColor?: string
+  data: pieDataItem[]
+  semiCircle?: boolean
 
-  showText?: boolean;
-  textColor?: string;
-  textSize?: number;
-  fontStyle?: FontStyle;
-  fontWeight?: string;
-  font?: string;
-  showTextBackground?: boolean;
-  textBackgroundColor?: string;
-  textBackgroundRadius?: number;
-  showValuesAsLabels?: boolean;
+  showText?: boolean
+  textColor?: string
+  textSize?: number
+  fontStyle?: FontStyle
+  fontWeight?: string
+  font?: string
+  showTextBackground?: boolean
+  textBackgroundColor?: string
+  textBackgroundRadius?: number
+  showValuesAsLabels?: boolean
 
-  centerLabelComponent?: Function;
-  tiltAngle?: string;
-  initialAngle?: number;
-  labelsPosition?: "onBorder" | "outward" | "inward" | "mid";
-  showGradient?: boolean;
-  gradientCenterColor?: string;
-  onPress?: Function;
-  focusOnPress?: boolean;
-  toggleFocusOnPress?: boolean;
-  selectedIndex?: number;
-  setSelectedIndex?: Function;
-  sectionAutoFocus?: boolean;
-  onLabelPress?: Function;
-  extraRadiusForFocused?: number;
-  inwardExtraLengthForFocused?: number;
-  pieInnerComponent?: (item?: pieDataItem, index?: number) => any;
-  pieInnerComponentHeight?: number;
-  pieInnerComponentWidth?: number;
-  paddingHorizontal?: number;
-  paddingVertical?: number;
-};
-export type pieDataItem = {
-  value: number;
-  shiftX?: number;
-  shiftY?: number;
-  color?: string;
-  gradientCenterColor?: string;
-  text?: string;
-  textColor?: string;
-  textSize?: number;
-  fontStyle?: FontStyle;
-  fontWeight?: string;
-  font?: string;
-  textBackgroundColor?: string;
-  textBackgroundRadius?: number;
-  shiftTextX?: number;
-  shiftTextY?: number;
-  shiftTextBackgroundX?: number;
-  shiftTextBackgroundY?: number;
-  labelPosition?: "onBorder" | "outward" | "inward" | "mid";
-  onPress?: Function;
-  onLabelPress?: Function;
-  strokeWidth?: number;
-  strokeColor?: string;
-  focused?: boolean;
-  peripheral?: boolean;
-  pieInnerComponent?: (item?: pieDataItem, index?: number) => any;
-};
+  centerLabelComponent?: Function
+  tiltAngle?: string
+  initialAngle?: number
+  labelsPosition?: 'onBorder' | 'outward' | 'inward' | 'mid'
+  showGradient?: boolean
+  gradientCenterColor?: string
+  onPress?: Function
+  focusOnPress?: boolean
+  toggleFocusOnPress?: boolean
+  selectedIndex?: number
+  setSelectedIndex?: Function
+  sectionAutoFocus?: boolean
+  onLabelPress?: Function
+  extraRadiusForFocused?: number
+  inwardExtraLengthForFocused?: number
+  pieInnerComponent?: (item?: pieDataItem, index?: number) => any
+  pieInnerComponentHeight?: number
+  pieInnerComponentWidth?: number
+  paddingHorizontal?: number
+  paddingVertical?: number
+}
+export interface pieDataItem {
+  value: number
+  shiftX?: number
+  shiftY?: number
+  color?: string
+  gradientCenterColor?: string
+  text?: string
+  textColor?: string
+  textSize?: number
+  fontStyle?: FontStyle
+  fontWeight?: string
+  font?: string
+  textBackgroundColor?: string
+  textBackgroundRadius?: number
+  shiftTextX?: number
+  shiftTextY?: number
+  shiftTextBackgroundX?: number
+  shiftTextBackgroundY?: number
+  labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid'
+  onPress?: Function
+  onLabelPress?: Function
+  strokeWidth?: number
+  strokeColor?: string
+  focused?: boolean
+  peripheral?: boolean
+  pieInnerComponent?: (item?: pieDataItem, index?: number) => any
+}
 
 export interface PieChartMainProps extends PieChartPropsType {
-  setSelectedIndex: Function;
-  isBiggerPie?: boolean;
-  paddingHorizontal: number;
-  paddingVertical: number;
-  extraRadiusForFocused: number;
+  setSelectedIndex: Function
+  isBiggerPie?: boolean
+  paddingHorizontal: number
+  paddingVertical: number
+  extraRadiusForFocused: number
 }