react-native-gifted-charts 1.4.12 → 1.4.14

package/src/LineChart/styles.tsx

@@ -0,0 +1,47 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: 40,
+    marginRight: 40,
+  },
+  horizBar: {
+    flexDirection: 'row',
+  },
+  leftLabel: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lastLeftLabel: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  leftPart: {
+    justifyContent: 'center',
+    // width: '100%',
+  },
+  lastLeftPart: {
+    justifyContent: 'flex-end',
+    // width: '100%',
+  },
+  line: {
+    width: '100%',
+    height: 1,
+    backgroundColor: 'gray',
+    opacity: 0.5,
+  },
+  lastLine: {
+    width: '100%',
+    height: 1,
+    backgroundColor: 'black',
+  },
+  bottomLabel: {
+    width: '100%',
+  },
+  customDataPointContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/PieChart/index.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChartMain} from './main';
+import {PieChartPropsType, pieColors, usePieChart} from 'gifted-charts-core';
+
+export const PieChart = (props: PieChartPropsType) => {
+  const {
+    radius,
+    extraRadiusForFocused,
+    selectedIndex,
+    setSelectedIndex,
+    startAngle,
+    total,
+    donut,
+    isThreeD,
+    semiCircle,
+    inwardExtraLengthForFocused,
+    canvasWidth,
+    canvasHeight,
+    innerRadius,
+    innerCircleColor,
+    innerCircleBorderWidth,
+    innerCircleBorderColor,
+    shiftInnerCenterX,
+    shiftInnerCenterY,
+    tiltAngle,
+    isDataShifted,
+    paddingHorizontal,
+    paddingVertical,
+  } = usePieChart(props);
+
+  const renderInnerCircle = (innerRadius, innerCircleBorderWidth) => {
+    if (props.centerLabelComponent || (donut && !isDataShifted)) {
+      return (
+        <View
+          style={[
+            {
+              height: innerRadius * 2,
+              width: innerRadius * 2,
+              borderRadius: innerRadius,
+              position: 'absolute',
+              // zIndex: 100,
+              alignSelf: 'center',
+              backgroundColor: innerCircleColor,
+              left:
+                canvasWidth / 2 -
+                innerRadius +
+                shiftInnerCenterX +
+                extraRadiusForFocused +
+                paddingHorizontal / 2,
+              top:
+                canvasHeight / 2 -
+                innerRadius +
+                shiftInnerCenterY +
+                extraRadiusForFocused +
+                paddingVertical / 2,
+              borderWidth: innerCircleBorderWidth,
+              borderColor: innerCircleBorderColor,
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+            isThreeD && {
+              borderTopWidth: innerCircleBorderWidth * 5,
+              borderLeftWidth: shiftInnerCenterX
+                ? innerCircleBorderWidth * 2
+                : innerCircleBorderWidth,
+              transform: [{rotateX: tiltAngle}],
+            },
+            semiCircle &&
+              isThreeD && {
+                borderTopWidth: isThreeD
+                  ? innerCircleBorderWidth * 5
+                  : innerCircleBorderWidth,
+                borderLeftWidth: 0.5,
+                borderLeftColor: innerCircleColor,
+                borderBottomWidth: 0,
+                borderRightWidth: 0.5,
+                borderRightColor: innerCircleColor,
+              },
+          ]}>
+          <View style={{marginTop: semiCircle ? -0.5 * innerRadius : 0}}>
+            {props.centerLabelComponent ? props.centerLabelComponent() : null}
+          </View>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  if (!total) return null;
+
+  return (
+    <View
+      style={{
+        height:
+          (radius + extraRadiusForFocused + paddingVertical / 2) *
+          (props.semiCircle ? 1 : 2),
+        width: (radius + extraRadiusForFocused + paddingHorizontal / 2) * 2,
+        overflow: 'hidden',
+      }}>
+      <View style={{position: 'absolute'}}>
+        <PieChartMain
+          {...props}
+          selectedIndex={selectedIndex}
+          setSelectedIndex={setSelectedIndex}
+          paddingHorizontal={paddingHorizontal}
+          paddingVertical={paddingVertical}
+          extraRadiusForFocused={extraRadiusForFocused}
+        />
+      </View>
+      {renderInnerCircle(innerRadius, innerCircleBorderWidth)}
+      {props.data.length > 1 &&
+        props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
+        (props.focusOnPress || props.sectionAutoFocus) &&
+        selectedIndex !== -1 && (
+          <View
+            pointerEvents="box-none"
+            style={{
+              position: 'absolute',
+              top: -extraRadiusForFocused,
+              left: -extraRadiusForFocused,
+            }}>
+            <PieChartMain
+              {...props}
+              data={[
+                {
+                  value: props.data[selectedIndex].value,
+                  text: props.data[selectedIndex].text,
+                  color:
+                    props.data[selectedIndex].color ||
+                    pieColors[selectedIndex % 9],
+                  strokeColor:
+                    props.data[selectedIndex].strokeColor || undefined,
+                  strokeWidth:
+                    props.data[selectedIndex].strokeWidth || undefined,
+                  gradientCenterColor:
+                    props.data[selectedIndex].gradientCenterColor || undefined,
+                  shiftTextX: props.data[selectedIndex].shiftTextX || undefined,
+                  shiftTextY: props.data[selectedIndex].shiftTextY || undefined,
+                },
+                {
+                  value: total - props.data[selectedIndex].value,
+                  onPress: () => alert('black'),
+                  peripheral: true,
+                  strokeWidth: 0,
+                },
+              ]}
+              radius={radius + extraRadiusForFocused}
+              initialAngle={startAngle}
+              innerRadius={props.innerRadius || radius / 2.5}
+              isBiggerPie
+              setSelectedIndex={setSelectedIndex}
+              paddingHorizontal={paddingHorizontal}
+              paddingVertical={paddingVertical}
+              extraRadiusForFocused={extraRadiusForFocused}
+            />
+          </View>
+        )}
+      {renderInnerCircle(
+        innerRadius - inwardExtraLengthForFocused,
+        inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth,
+      )}
+    </View>
+  );
+};

package/src/PieChart/main.tsx

@@ -0,0 +1,363 @@
+import React from 'react';
+import {View} from 'react-native';
+import Svg, {
+  Path,
+  Circle,
+  Text as SvgText,
+  Defs,
+  RadialGradient,
+  Stop,
+  G,
+} from 'react-native-svg';
+import {
+  getPieChartMainProps,
+  PieChartMainProps,
+  pieColors,
+} from 'gifted-charts-core';
+import { rnVersion } from '../utils';
+
+export const PieChartMain = (props: PieChartMainProps) => {
+  const {
+    isThreeD,
+    isBiggerPie,
+    data,
+    showInnerComponent,
+    radius,
+    canvasWidth,
+    canvasHeight,
+    shadowWidth,
+    backgroundColor,
+    shadowColor,
+    semiCircle,
+    pi,
+    initialAngle,
+    shadow,
+    donut,
+    strokeWidth,
+    strokeColor,
+    innerRadius,
+    showText,
+    textColor,
+    textSize,
+    tiltAngle,
+    labelsPosition,
+    showTextBackground,
+    textBackgroundColor,
+    showValuesAsLabels,
+    showGradient,
+    gradientCenterColor,
+    toggleFocusOnPress,
+    minShiftX,
+    minShiftY,
+    total,
+    horizAdjustment,
+    vertAdjustment,
+    cx,
+    cy,
+    pData,
+    mData,
+    paddingHorizontal,
+    paddingVertical,
+    extraRadiusForFocused,
+  } = getPieChartMainProps(props);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[
+        {
+          backgroundColor: backgroundColor,
+          height: semiCircle
+            ? (canvasHeight + paddingVertical) / 2 + extraRadiusForFocused
+            : canvasHeight + paddingVertical + extraRadiusForFocused * 2,
+          width: canvasWidth + paddingHorizontal + extraRadiusForFocused * 2,
+          overflow: 'hidden',
+        },
+        isThreeD && {transform: [{rotateX: tiltAngle}]},
+      ]}>
+      <Svg
+        pointerEvents={rnVersion >= 720000 ? 'box-none' : 'auto'} // use 'box-none' react-native version 0.72 onwards
+        viewBox={`${strokeWidth / -2 + minShiftX - extraRadiusForFocused - paddingHorizontal / 2} ${
+          strokeWidth / -2 +
+          minShiftY -
+          extraRadiusForFocused -
+          paddingVertical / 2
+        } ${
+          (radius + extraRadiusForFocused + strokeWidth) * 2 +
+          paddingHorizontal +
+          horizAdjustment +
+          (horizAdjustment ? strokeWidth : 0)
+        } ${
+          (radius + extraRadiusForFocused + strokeWidth) * 2 +
+          paddingVertical +
+          vertAdjustment +
+          (vertAdjustment ? strokeWidth : 0)
+        }`}
+        height={
+          (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingVertical
+        }
+        width={
+          (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingHorizontal
+        }>
+        <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 || gradientCenterColor}
+                  stopOpacity="1"
+                />
+                <Stop
+                  offset="100%"
+                  stopColor={item.color || pieColors[index % 9]}
+                  stopOpacity="1"
+                />
+              </RadialGradient>
+            );
+          })}
+        </Defs>
+        {data.length === 1 ? (
+          <>
+            <Circle
+              cx={cx}
+              cy={cy}
+              r={radius}
+              fill={
+                showGradient
+                  ? `url(#grad${0})`
+                  : data[0].color || pieColors[0 % 9]
+              }
+              onPress={() => {
+                data[0].onPress
+                  ? data[0].onPress()
+                  : props.onPress
+                    ? props.onPress(data[0], 0)
+                    : null;
+              }}
+            />
+          </>
+        ) : (
+          data.map((item, index) => {
+            // console.log('index', index);
+            let nextItem;
+            if (index === pData.length - 1) nextItem = pData[0];
+            else nextItem = pData[index + 1];
+            let sx =
+              cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
+              (item.shiftX || 0);
+            let sy =
+              cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
+              (item.shiftY || 0);
+            let ax =
+              cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
+              (item.shiftX || 0);
+            let ay =
+              cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
+              (item.shiftY || 0);
+
+            if (isBiggerPie && index) return null;
+
+            return (
+              <Path
+                key={index + 'a'}
+                d={`M ${cx + (item.shiftX || 0)} ${
+                  cy + (item.shiftY || 0)
+                } L ${sx} ${sy} A ${radius} ${radius} 0 ${
+                  semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
+                } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
+                  cy + (item.shiftY || 0)
+                }`}
+                stroke={item.strokeColor || strokeColor}
+                strokeWidth={
+                  props.focusOnPress && props.selectedIndex === index
+                    ? 0
+                    : item.strokeWidth === 0
+                      ? 0
+                      : item.strokeWidth || strokeWidth
+                }
+                fill={
+                  props.selectedIndex === index || item.peripheral
+                    ? 'transparent'
+                    : showGradient
+                      ? `url(#grad${index})`
+                      : item.color || pieColors[index % 9]
+                }
+                onPress={() => {
+                  if (item.onPress) {
+                    item.onPress();
+                  } else if (props.onPress) {
+                    props.onPress(item, index);
+                  }
+                  if (props.focusOnPress) {
+                    if (props.selectedIndex === index || props.isBiggerPie) {
+                      if (toggleFocusOnPress) {
+                        props.setSelectedIndex(-1);
+                      }
+                    } else {
+                      props.setSelectedIndex(index);
+                    }
+                  }
+                }}
+              />
+            );
+          })
+        )}
+
+        {(showText || showInnerComponent) &&
+          data.map((item, index) => {
+            const localPieInnerComponent =
+              item.pieInnerComponent ?? props.pieInnerComponent;
+            if (isBiggerPie && index) return null;
+            if (!props.data[index].value) return null;
+            let mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
+            let my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
+
+            let midx = (mx + cx) / 2;
+            let midy = (my + cy) / 2;
+
+            let x = midx,
+              y = midy;
+
+            const labelPosition = item.labelPosition || labelsPosition;
+
+            if (labelPosition === 'onBorder') {
+              x = mx;
+              y = my;
+            } else if (labelPosition === 'outward') {
+              x = (midx + mx) / 2;
+              y = (midy + my) / 2;
+            } else if (labelPosition === 'inward') {
+              x = (midx + cx) / 2;
+              y = (midy + cy) / 2;
+            }
+
+            x += item.shiftX || 0;
+            y += item.shiftY || 0;
+
+            if (data.length === 1) {
+              if (donut) {
+                y =
+                  (radius -
+                    innerRadius +
+                    (item.textBackgroundRadius ||
+                      props.textBackgroundRadius ||
+                      item.textSize ||
+                      textSize)) /
+                  2;
+              } else {
+                y = cy;
+              }
+            }
+
+            return (
+              <React.Fragment key={index}>
+                {/* <Line x1={mx} x2={cx} y1={my} y2={cy} stroke="black" /> */}
+                {showTextBackground ? (
+                  <Circle
+                    cx={x + (item.shiftTextBackgroundX ?? item.shiftTextX ?? 0)}
+                    cy={
+                      y +
+                      (item.shiftTextBackgroundY ?? item.shiftTextY ?? 0) -
+                      (item.textSize || textSize) / 4
+                    }
+                    r={
+                      item.textBackgroundRadius ||
+                      props.textBackgroundRadius ||
+                      item.textSize ||
+                      textSize
+                    }
+                    fill={item.textBackgroundColor || textBackgroundColor}
+                    onPress={() => {
+                      item.onLabelPress
+                        ? item.onLabelPress()
+                        : props.onLabelPress
+                          ? props.onLabelPress(item, index)
+                          : item.onPress
+                            ? item.onPress()
+                            : props.onPress
+                              ? props.onPress(item, index)
+                              : null;
+                      if (props.focusOnPress) {
+                        if (props.selectedIndex === index) {
+                          if (toggleFocusOnPress) {
+                            props.setSelectedIndex(-1);
+                          }
+                        } else {
+                          props.setSelectedIndex(index);
+                        }
+                      }
+                    }}
+                  />
+                ) : null}
+                <SvgText
+                  fill={
+                    item.textColor || textColor || pieColors[(index + 2) % 9]
+                  }
+                  fontSize={item.textSize || textSize}
+                  fontFamily={item.font || props.font}
+                  fontWeight={item.fontWeight || props.fontWeight}
+                  fontStyle={item.fontStyle || props.fontStyle || 'normal'}
+                  x={
+                    x +
+                    (item.shiftTextX || 0) -
+                    (item.textSize || textSize) / 1.8
+                  }
+                  y={y + (item.shiftTextY || 0)}
+                  onPress={() => {
+                    item.onLabelPress
+                      ? item.onLabelPress()
+                      : props.onLabelPress
+                        ? props.onLabelPress(item, index)
+                        : item.onPress
+                          ? item.onPress()
+                          : props.onPress
+                            ? props.onPress(item, index)
+                            : null;
+                    if (props.focusOnPress) {
+                      if (props.selectedIndex === index) {
+                        if (toggleFocusOnPress) {
+                          props.setSelectedIndex(-1);
+                        }
+                      } else {
+                        props.setSelectedIndex(index);
+                      }
+                    }
+                  }}>
+                  {item.text || (showValuesAsLabels ? item.value + '' : '')}
+                </SvgText>
+                {localPieInnerComponent ? (
+                  <G x={x} y={y}>
+                    {localPieInnerComponent?.(item, index) ?? null}
+                  </G>
+                ) : null}
+              </React.Fragment>
+            );
+          })}
+      </Svg>
+      {isThreeD && shadow && !semiCircle ? (
+        <View
+          style={{
+            width: radius * 2,
+            height: radius * 2,
+            backgroundColor: shadowColor,
+            borderRadius: radius,
+            position: 'absolute',
+            top: shadowWidth + paddingVertical / 2,
+            left: paddingHorizontal / 2,
+            zIndex: -1,
+          }}
+        />
+      ) : null}
+    </View>
+  );
+};