react-native-gifted-charts 1.4.20 → 1.4.21

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

@@ -1,151 +0,0 @@
-import React from 'react';
-import {View, Animated} from 'react-native';
-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: LineInBarChartPropsType) => {
-  const {
-    yAxisLabelWidth,
-    initialSpacing,
-    spacing,
-    containerHeight,
-    lineConfig,
-    maxValue,
-    animatedWidth,
-    lineBehindBars,
-    points,
-    arrowPoints,
-    data,
-    totalWidth,
-    barWidth,
-    labelsExtraHeight,
-    xAxisLabelsVerticalShift,
-    selectedIndex,
-  } = props;
-
-  const firstBarWidth = data[0].barWidth ?? barWidth;
-
-  const dataPointsProps: DataPointProps = {
-    data,
-    lineConfig,
-    barWidth,
-    containerHeight,
-    maxValue,
-    firstBarWidth,
-    yAxisLabelWidth,
-    spacing,
-    selectedIndex,
-  };
-
-  const specificVerticalLinesProps = {
-    data,
-    barWidth,
-    yAxisLabelWidth,
-    initialSpacing,
-    spacing,
-    containerHeight,
-    lineConfig,
-    maxValue,
-  };
-
-  const specificDataPointsProps = {
-    data,
-    barWidth,
-    firstBarWidth,
-    yAxisLabelWidth,
-    lineConfig,
-    spacing,
-    containerHeight,
-    maxValue,
-  };
-
-  const renderAnimatedLine = () => {
-    // console.log('animatedWidth is-------->', animatedWidth);
-    return (
-      <Animated.View
-        pointerEvents="none"
-        style={{
-          position: 'absolute',
-          height: containerHeight + 10,
-          left: 6 - yAxisLabelWidth,
-          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
-          width: animatedWidth,
-          zIndex: lineBehindBars ? -1 : 100000,
-          // backgroundColor: 'wheat',
-        }}>
-        <Svg>
-          <Path
-            d={points}
-            fill="none"
-            stroke={lineConfig.color}
-            strokeWidth={lineConfig.thickness}
-          />
-
-          {renderSpecificVerticalLines(specificVerticalLinesProps)}
-
-          {!lineConfig.hideDataPoints
-            ? renderDataPoints(dataPointsProps)
-            : renderSpecificDataPoints(specificDataPointsProps)}
-          {lineConfig.showArrow && (
-            <Path
-              d={arrowPoints}
-              fill={lineConfig.arrowConfig?.fillColor}
-              stroke={lineConfig.arrowConfig?.strokeColor}
-              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
-            />
-          )}
-        </Svg>
-      </Animated.View>
-    );
-  };
-
-  const renderLine = () => {
-    return (
-      <View
-        pointerEvents="none"
-        style={{
-          position: 'absolute',
-          height: containerHeight + 10 + labelsExtraHeight,
-          left: 6 - yAxisLabelWidth,
-          bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
-          width: totalWidth,
-          zIndex: lineBehindBars ? -1 : 100000,
-          // backgroundColor: 'rgba(200,150,150,0.1)'
-        }}>
-        <Svg>
-          <Path
-            d={points}
-            fill="none"
-            stroke={lineConfig.color}
-            strokeWidth={lineConfig.thickness}
-          />
-          {renderSpecificVerticalLines(specificVerticalLinesProps)}
-
-          {!lineConfig.hideDataPoints
-            ? renderDataPoints(dataPointsProps)
-            : renderSpecificDataPoints(specificDataPointsProps)}
-          {lineConfig.showArrow && (
-            <Path
-              d={arrowPoints}
-              fill={lineConfig.arrowConfig?.fillColor}
-              stroke={lineConfig.arrowConfig?.strokeColor}
-              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
-            />
-          )}
-        </Svg>
-      </View>
-    );
-  };
-
-  if (lineConfig.isAnimated) {
-    return renderAnimatedLine();
-  }
-
-  return renderLine();
-};
-
-export default RenderLineInBarChart;

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

@@ -1,175 +0,0 @@
-import React, {Fragment} from 'react';
-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: DataPointProps) => {
-  const {
-    data,
-    lineConfig,
-    barWidth,
-    containerHeight,
-    maxValue,
-    firstBarWidth,
-    yAxisLabelWidth,
-    spacing,
-    selectedIndex,
-  } = props;
-  return data.map((item: any, index: number) => {
-    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);
-    if (customDataPoint) {
-      return (
-        <View
-          style={[
-            styles.customDataPointContainer,
-            {
-              height: lineConfig.dataPointsHeight,
-              width: lineConfig.dataPointsWidth,
-              top:
-                containerHeight -
-                (value * containerHeight) / maxValue -
-                (item.shiftY ?? lineConfig.shiftY ?? 0),
-              left: getXForLineInBar(
-                index,
-                firstBarWidth,
-                currentBarWidth,
-                yAxisLabelWidth,
-                lineConfig,
-                spacing,
-              ),
-            },
-          ]}>
-          {customDataPoint(item, index)}
-        </View>
-      );
-    }
-    if (lineConfig.dataPointsShape === 'rectangular') {
-      return (
-        <Fragment key={index}>
-          <Rect
-            x={getXForLineInBar(
-              index,
-              firstBarWidth,
-              currentBarWidth,
-              yAxisLabelWidth,
-              lineConfig,
-              spacing,
-            )}
-            y={
-              getYForLineInBar(
-                value,
-                lineConfig.shiftY,
-                containerHeight,
-                maxValue,
-              ) -
-              lineConfig.dataPointsHeight / 2
-            }
-            width={lineConfig.dataPointsWidth}
-            height={lineConfig.dataPointsHeight}
-            fill={dataPointColor}
-          />
-          {item.dataPointText && (
-            <CanvasText
-              fill={item.textColor || lineConfig.textColor}
-              fontSize={item.textFontSize || lineConfig.textFontSize}
-              x={
-                getXForLineInBar(
-                  index,
-                  firstBarWidth,
-                  currentBarWidth,
-                  yAxisLabelWidth,
-                  lineConfig,
-                  spacing,
-                ) + (item.textShiftX || lineConfig.textShiftX || 0)
-              }
-              y={
-                getYForLineInBar(
-                  value,
-                  lineConfig.shiftY,
-                  containerHeight,
-                  maxValue,
-                ) -
-                lineConfig.dataPointsHeight / 2 +
-                (item.textShiftY || lineConfig.textShiftY || 0)
-              }>
-              {item.dataPointText}
-            </CanvasText>
-          )}
-        </Fragment>
-      );
-    }
-    return (
-      <Fragment key={index}>
-        <Circle
-          cx={getXForLineInBar(
-            index,
-            firstBarWidth,
-            currentBarWidth,
-            yAxisLabelWidth,
-            lineConfig,
-            spacing,
-          )}
-          cy={getYForLineInBar(
-            value,
-            lineConfig.shiftY,
-            containerHeight,
-            maxValue,
-          )}
-          r={dataPointRadius}
-          fill={dataPointColor}
-        />
-        {item.dataPointText && (
-          <CanvasText
-            fill={item.textColor || lineConfig.textColor}
-            fontSize={item.textFontSize || lineConfig.textFontSize}
-            x={
-              getXForLineInBar(
-                index,
-                firstBarWidth,
-                currentBarWidth,
-                yAxisLabelWidth,
-                lineConfig,
-                spacing,
-              ) + (item.textShiftX || lineConfig.textShiftX || 0)
-            }
-            y={
-              getYForLineInBar(
-                value,
-                lineConfig.shiftY,
-                containerHeight,
-                maxValue,
-              ) -
-              lineConfig.dataPointsHeight / 2 +
-              (item.textShiftY || lineConfig.textShiftY || 0)
-            }>
-            {item.dataPointText}
-          </CanvasText>
-        )}
-      </Fragment>
-    );
-  });
-};

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

@@ -1,86 +0,0 @@
-import React, {Fragment} from 'react';
-import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
-import {Circle, Rect, Text as CanvasText} from 'react-native-svg';
-
-export const renderSpecificDataPoints = (props: any) => {
-  const {
-    data,
-    barWidth,
-    firstBarWidth,
-    yAxisLabelWidth,
-    lineConfig,
-    spacing,
-    containerHeight,
-    maxValue,
-  } = props;
-  return data.map((item: any, index: number) => {
-    const currentBarWidth = item.barWidth || barWidth || 30;
-    const x = getXForLineInBar(
-      index,
-      firstBarWidth,
-      currentBarWidth,
-      yAxisLabelWidth,
-      lineConfig,
-      spacing,
-    );
-    const y = getYForLineInBar(
-      item.value,
-      lineConfig.shiftY,
-      containerHeight,
-      maxValue,
-    );
-    if (item.showDataPoint) {
-      if (item.dataPointShape === 'rectangular') {
-        return (
-          <Fragment key={index}>
-            <Rect
-              x={x}
-              y={y - item.dataPointsHeight / 2}
-              width={item.dataPointWidth || lineConfig.dataPointsWidth}
-              height={item.dataPointHeight || 2}
-              fill={item.dataPointColor || 'black'}
-            />
-            {item.dataPointText && (
-              <CanvasText
-                fill={item.textColor || 'black'}
-                fontSize={item.textFontSize || 10}
-                x={x + (item.textShiftX || lineConfig.textShiftX || 0)}
-                y={
-                  y -
-                  (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
-                  (item.textShiftY || lineConfig.textShiftY || 0)
-                }>
-                {item.dataPointText}
-              </CanvasText>
-            )}
-          </Fragment>
-        );
-      } else {
-        return (
-          <Fragment key={index}>
-            <Circle
-              cx={x}
-              cy={y}
-              r={item.dataPointRadius || 3}
-              fill={item.dataPointColor || 'black'}
-            />
-            {item.dataPointText && (
-              <CanvasText
-                fill={item.textColor || 'black'}
-                fontSize={item.textFontSize || 10}
-                x={x + (item.textShiftX || lineConfig.textShiftX || 0)}
-                y={
-                  y -
-                  (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
-                  (item.textShiftY || lineConfig.textShiftY || 0)
-                }>
-                {item.dataPointText}
-              </CanvasText>
-            )}
-          </Fragment>
-        );
-      }
-    }
-    return null;
-  });
-};

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import {Rect} from 'react-native-svg';
-
-export const renderSpecificVerticalLines = (props: any) => {
-  const {
-    data,
-    barWidth,
-    yAxisLabelWidth,
-    initialSpacing,
-    spacing,
-    containerHeight,
-    lineConfig,
-    maxValue,
-  } = props;
-  return data.map((item: any, index: number) => {
-    if (item.showVerticalLine) {
-      const currentBarWidth = item.barWidth || barWidth || 30;
-      return (
-        <Rect
-          x={
-            yAxisLabelWidth +
-            6 -
-            (item.verticalLineThickness || 1) / 2 -
-            1 -
-            (initialSpacing - currentBarWidth / 2) +
-            (currentBarWidth + spacing) * index
-          }
-          y={
-            containerHeight -
-            lineConfig.shiftY -
-            (item.value * containerHeight) / maxValue +
-            9
-          }
-          width={item.verticalLineThickness || 1}
-          height={(item.value * containerHeight) / maxValue + lineConfig.shiftY}
-          fill={item.verticalLineColor || 'lightgray'}
-        />
-      );
-    }
-    return null;
-  });
-};

package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import {chartTypes} from 'gifted-charts-core';
-import {Line, Svg} from 'react-native-svg';
-
-const RenderVerticalLines = (props: any) => {
-  const {
-    verticalLinesAr,
-    verticalLinesSpacing,
-    spacing,
-    initialSpacing,
-    verticalLinesZIndex,
-    verticalLinesHeight,
-    verticalLinesThickness,
-    verticalLinesColor,
-    verticalLinesStrokeDashArray,
-    verticalLinesShift,
-    verticalLinesUptoDataPoint,
-    xAxisThickness,
-    labelsExtraHeight,
-    containerHeight,
-    data,
-    stackData,
-    barWidth,
-    maxValue,
-    chartType,
-    containerHeightIncludingBelowXAxis,
-    totalWidth,
-    xAxisLabelsVerticalShift,
-  } = props;
-
-  const getHeightOfVerticalLine = (index: number) => {
-    if (verticalLinesUptoDataPoint) {
-      if (index < data.length) {
-        return (
-          (data[index].value * containerHeight) / maxValue - xAxisThickness
-        );
-      } else {
-        return verticalLinesHeight ?? 0;
-      }
-    } else {
-      return (
-        verticalLinesHeight ||
-        containerHeightIncludingBelowXAxis - xAxisThickness
-      );
-    }
-  };
-
-  const extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
-
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        height: extendedContainerHeight,
-        bottom: 60 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
-        width: totalWidth,
-        zIndex: verticalLinesZIndex || -1,
-      }}>
-      <Svg>
-        {verticalLinesAr.map((item: any, index: number) => {
-          let totalSpacing = initialSpacing;
-          if (verticalLinesSpacing) {
-            totalSpacing = verticalLinesSpacing * (index + 1);
-          } else {
-            if (stackData) {
-              totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
-            } else {
-              totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
-            }
-            for (let i = 0; i < index; i++) {
-              let actualSpacing = spacing;
-              if (stackData) {
-                if (i >= stackData.length - 1) {
-                  actualSpacing += (barWidth || 30) / 2;
-                } else {
-                  if (stackData[i].spacing || stackData[i].spacing === 0) {
-                    actualSpacing = stackData[i].spacing;
-                  }
-                  if (stackData[i + 1].barWidth) {
-                    actualSpacing += stackData[i + 1].barWidth;
-                  } else {
-                    actualSpacing += barWidth || 30;
-                  }
-                }
-              } else {
-                if (i >= data.length - 1) {
-                  actualSpacing += (barWidth || 30) / 2;
-                } else {
-                  if (data[i].spacing || data[i].spacing === 0) {
-                    actualSpacing = data[i].spacing;
-                  }
-                  if (data[i + 1].barWidth) {
-                    actualSpacing += data[i + 1].barWidth;
-                  } else {
-                    actualSpacing += barWidth || 30;
-                  }
-                }
-              }
-              totalSpacing += actualSpacing;
-            }
-          }
-
-          const x =
-            verticalLinesShift +
-            1 +
-            (chartType === chartTypes.BAR
-              ? totalSpacing - 1
-              : verticalLinesSpacing
-                ? verticalLinesSpacing * (index + 1)
-                : index * spacing + (initialSpacing - 2));
-
-          return (
-            <Line
-              key={index}
-              x1={x}
-              y1={extendedContainerHeight - getHeightOfVerticalLine(index)}
-              x2={x}
-              y2={extendedContainerHeight}
-              stroke={verticalLinesColor || 'lightgray'}
-              strokeWidth={verticalLinesThickness || 2}
-              strokeDasharray={verticalLinesStrokeDashArray ?? ''}
-            />
-          );
-        })}
-      </Svg>
-    </View>
-  );
-};
-
-export default RenderVerticalLines;

package/src/Components/BarSpecificComponents/barBackgroundPattern.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Svg, {Defs, Rect} from 'react-native-svg';
-
-const BarBackgroundPattern = (props: any) => {
-  const {
-    barBackgroundPatternFromItem,
-    barBackgroundPatternFromProps,
-    patternIdFromItem,
-    patternIdFromProps,
-  } = props;
-  return (
-    <Svg>
-      <Defs>
-        {barBackgroundPatternFromItem
-          ? barBackgroundPatternFromItem()
-          : barBackgroundPatternFromProps()}
-      </Defs>
-      <Rect
-        stroke="transparent"
-        x="1"
-        y="1"
-        width="100%"
-        height="100%"
-        fill={`url(#${patternIdFromItem ?? patternIdFromProps})`}
-      />
-    </Svg>
-  );
-};
-
-export default BarBackgroundPattern;

package/src/Components/BarSpecificComponents/cap.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import {BarDefaults} from 'gifted-charts-core';
-
-const Cap = (props: any) => {
-  const {
-    capThicknessFromItem,
-    capThicknessFromProps,
-    capColorFromItem,
-    capColorFromProps,
-    capRadiusFromItem,
-    capRadiusFromProps,
-  } = props;
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        width: '100%',
-        height:
-          capThicknessFromItem ??
-          capThicknessFromProps ??
-          BarDefaults.capThickness,
-        backgroundColor:
-          capColorFromItem ?? capColorFromProps ?? BarDefaults.capColor,
-        borderTopLeftRadius:
-          capRadiusFromItem ?? capRadiusFromProps ?? BarDefaults.capRadius,
-        borderTopRightRadius:
-          capRadiusFromItem ?? capRadiusFromProps ?? BarDefaults.capRadius,
-      }}
-    />
-  );
-};
-
-export default Cap;

package/src/Components/BarSpecificComponents/tooltip.tsx

@@ -1,59 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-
-interface TooltipProps {
-  barHeight: number;
-  barWidth: number;
-  item: any;
-  index: number;
-  isLast: boolean;
-  leftSpacing: number;
-  leftShiftForLastIndexTooltip: number;
-  leftShiftForTooltip: number;
-  renderTooltip?: Function;
-  autoCenterTooltip?: boolean;
-  horizontal?: boolean;
-}
-
-const Tooltip = (props: TooltipProps) => {
-  const {
-    barHeight,
-    barWidth,
-    item,
-    index,
-    isLast,
-    leftSpacing,
-    leftShiftForLastIndexTooltip,
-    leftShiftForTooltip,
-    renderTooltip,
-    autoCenterTooltip,
-    horizontal,
-  } = props;
-
-  const [leftShiftTooltipForCentering, setLeftShiftTooltipForCentering] =
-    useState(0);
-
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        bottom: barHeight + 60,
-        left:
-          leftSpacing -
-          (isLast ? leftShiftForLastIndexTooltip : leftShiftForTooltip) -
-          leftShiftTooltipForCentering,
-        zIndex: 1000,
-        transform: [{rotate: horizontal ? '-90deg' : '0deg'}],
-      }}
-      onLayout={event => {
-        if (!autoCenterTooltip) return;
-        const {width} = event.nativeEvent.layout;
-        const shift = (width - barWidth) / 2;
-        if (shift > 0) setLeftShiftTooltipForCentering(shift);
-      }}>
-      {renderTooltip?.(item, index)}
-    </View>
-  );
-};
-
-export default Tooltip;