react-native-gifted-charts 1.4.12 → 1.4.13

package/src/PieChartPro/index.tsx

@@ -0,0 +1,267 @@
+import React, {useEffect} from 'react';
+import {
+  PieChartPropsType,
+  pieColors,
+  usePiePro,
+} from 'gifted-charts-core';
+import {
+  Defs,
+  Path,
+  Stop,
+  Svg,
+  Text as SvgText,
+  RadialGradient,
+} from 'react-native-svg';
+import {Animated, View} from 'react-native';
+
+export const PieChartPro = (props: PieChartPropsType) => {
+  const {
+    radius,
+    total,
+    donut,
+    strokeWidth,
+    maxStrokeWidth,
+    animationDuration,
+    initial,
+    dInitial,
+    dFinal,
+    getStartCaps,
+    getEndCaps,
+    getTextCoordinates,
+    height,
+    heightFactor,
+    svgProps,
+  } = usePiePro(props);
+
+  const {
+    data,
+    curvedStartEdges,
+    curvedEndEdges,
+    edgesRadius = 0,
+    showGradient,
+    ring,
+    centerLabelComponent,
+    strokeDashArray,
+    semiCircle,
+  } = props;
+
+  let {isAnimated} = props;
+
+  if (!props.semiCircle && data.some(dataItem => dataItem.value > total / 2)) {
+    // if we have an obtuse arc, we cant animate
+    isAnimated = false;
+  }
+
+  const AnimatedPath = Animated.createAnimatedComponent(Path);
+  const AnimatedText = Animated.createAnimatedComponent(SvgText);
+
+  const animatedValues = data.map(i => new Animated.Value(0));
+  const animatedOpacityValue = new Animated.Value(0);
+  const animatedPaths = data.map((item, index) =>
+    animatedValues[index]?.interpolate({
+      inputRange: [0, 1],
+      outputRange: [dInitial[index], dFinal[index]],
+    }),
+  );
+
+  const animatedOpacity = animatedOpacityValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  useEffect(() => {
+    Animated.timing(animatedOpacityValue, {
+      toValue: 1,
+      duration: 10,
+      useNativeDriver: true,
+      delay: animationDuration,
+    }).start();
+    animatedValues.forEach(animatedValue =>
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }).start(),
+    );
+  }, [data]);
+
+  const adjustHeight = height * heightFactor;
+  const rnSvgProps = semiCircle ? {} : svgProps;
+
+  return (
+    <View
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: adjustHeight,
+        width: height * 2,
+      }}>
+      <View
+        style={
+          semiCircle
+            ? {position: 'absolute', bottom: 0}
+            : {position: 'absolute'}
+        }>
+        {centerLabelComponent ? centerLabelComponent() : null}
+      </View>
+      <Svg
+        {...rnSvgProps}
+        viewBox={
+          semiCircle
+            ? ``
+            : `${-maxStrokeWidth * 1.5} ${
+                -maxStrokeWidth - (semiCircle ? height / 2 : 0)
+              } ${adjustHeight} ${adjustHeight}`
+        }
+        transform={
+          semiCircle
+            ? []
+            : [{scaleY: maxStrokeWidth ? 1 + maxStrokeWidth / (radius * 2) : 1}]
+        }>
+        {total ? (
+          <>
+            <Defs>
+              {data.map((item, index) => {
+                return (
+                  <RadialGradient
+                    key={index + ''}
+                    id={'grad' + index}
+                    cx="50%"
+                    cy="50%"
+                    rx="50%"
+                    ry="50%"
+                    fx="50%"
+                    fy="50%"
+                    gradientUnits="userSpaceOnUse">
+                    <Stop
+                      offset="0%"
+                      stopColor={item.gradientCenterColor}
+                      stopOpacity="1"
+                    />
+                    <Stop
+                      offset="100%"
+                      stopColor={item.color || pieColors[index % 9]}
+                      stopOpacity="1"
+                    />
+                  </RadialGradient>
+                );
+              })}
+            </Defs>
+            {data.map((item, index) => {
+              const borderWidth = item.strokeWidth ?? strokeWidth;
+              const borderColor =
+                item.strokeColor ??
+                props.strokeColor ??
+                (borderWidth ? 'black' : 'transparent');
+              const strokeDashArrayLocal =
+                item.strokeDashArray ?? strokeDashArray;
+              return (
+                <AnimatedPath
+                  key={`path${index}`}
+                  id="renderPath"
+                  d={isAnimated ? animatedPaths[index] : dFinal[index]}
+                  fill={
+                    ring
+                      ? 'transparent'
+                      : showGradient
+                        ? `url(#grad${index})`
+                        : data[index].color || pieColors[index % 9]
+                  }
+                  strokeWidth={borderWidth}
+                  strokeDasharray={strokeDashArrayLocal}
+                  stroke={borderColor}
+                />
+              );
+            })}
+
+            {donut
+              ? data.map((item, index) => {
+                  if (
+                    curvedStartEdges ||
+                    edgesRadius ||
+                    item.isStartEdgeCurved ||
+                    item.startEdgeRadius
+                  )
+                    return (
+                      <AnimatedPath
+                        key={`cap${index}`}
+                        d={`${initial} ${getStartCaps(index, item)}`}
+                        opacity={isAnimated ? animatedOpacity : 1}
+                        fill={
+                          showGradient
+                            ? `url(#grad${index})`
+                            : data[index].color || pieColors[index % 9]
+                        }
+                      />
+                    );
+                  return null;
+                })
+              : null}
+
+            {donut
+              ? data.map((item, index) => {
+                  if (
+                    curvedEndEdges ||
+                    edgesRadius ||
+                    item.isEndEdgeCurved ||
+                    item.endEdgeRadius
+                  )
+                    return (
+                      <Path
+                        key={`cap${index}`}
+                        d={`${initial} ${getEndCaps(index, item)}`}
+                        fill={
+                          showGradient
+                            ? `url(#grad${index})`
+                            : data[index].color || pieColors[index % 9]
+                        }
+                      />
+                    );
+                  return null;
+                })
+              : null}
+
+            {data.map((item, index) => {
+              const {x, y} = getTextCoordinates(index, item.labelPosition);
+
+              return (
+                <AnimatedText
+                  key={`label${index}`}
+                  // style={{ pointerEvents: 'all' }}
+                  fill={
+                    item.textColor ||
+                    props.textColor ||
+                    pieColors[(index + 2) % 9]
+                  }
+                  opacity={isAnimated ? animatedOpacity : 1}
+                  fontSize={item.textSize || props.textSize}
+                  fontFamily={item.font || props.font}
+                  fontWeight={item.fontWeight || props.fontWeight}
+                  fontStyle={item.fontStyle || props.fontStyle || 'normal'}
+                  x={
+                    x +
+                    (item.shiftTextX || 0) -
+                    (item.textSize ?? props.textSize ?? 0) / 1.8
+                  }
+                  y={y + (item.shiftTextY || 0)}
+                  onPress={() => {
+                    item.onLabelPress
+                      ? item.onLabelPress()
+                      : props.onLabelPress
+                        ? props.onLabelPress(item, index)
+                        : item.onPress
+                          ? item.onPress()
+                          : props.onPress?.(item, index);
+                  }}>
+                  {item.text ||
+                    (props.showValuesAsLabels ? item.value + '' : '')}
+                </AnimatedText>
+              );
+            })}
+          </>
+        ) : null}
+      </Svg>
+    </View>
+  );
+};