react-native-gifted-charts 1.4.12 → 1.4.13

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

@@ -0,0 +1,147 @@
+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';
+
+const RenderLineInBarChart = props => {
+  const {
+    yAxisLabelWidth,
+    initialSpacing,
+    spacing,
+    containerHeight,
+    lineConfig,
+    maxValue,
+    animatedWidth,
+    lineBehindBars,
+    points,
+    arrowPoints,
+    data,
+    totalWidth,
+    barWidth,
+    labelsExtraHeight,
+    xAxisLabelsVerticalShift,
+  } = props;
+
+  const firstBarWidth = data[0].barWidth ?? barWidth;
+
+  const dataPointsProps = {
+    data,
+    lineConfig,
+    barWidth,
+    containerHeight,
+    maxValue,
+    firstBarWidth,
+    yAxisLabelWidth,
+    spacing,
+  };
+
+  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

@@ -0,0 +1,157 @@
+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';
+
+export const renderDataPoints = props => {
+  const {
+    data,
+    lineConfig,
+    barWidth,
+    containerHeight,
+    maxValue,
+    firstBarWidth,
+    yAxisLabelWidth,
+    spacing,
+  } = props;
+  return data.map((item: any, index: number) => {
+    if (index < lineConfig.startIndex || index > lineConfig.endIndex) {
+      return null;
+    }
+    const currentBarWidth = item.barWidth || barWidth || 30;
+    const customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+    const value =
+      item.value ?? item.stacks.reduce((total, item) => 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={lineConfig.dataPointsColor}
+          />
+          {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={lineConfig.dataPointsRadius}
+          fill={lineConfig.dataPointsColor}
+        />
+        {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

@@ -0,0 +1,86 @@
+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 => {
+  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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Rect} from 'react-native-svg';
+
+export const renderSpecificVerticalLines = props => {
+  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

@@ -0,0 +1,131 @@
+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 => {
+  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 => {
+    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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Svg, {Defs, Rect} from 'react-native-svg';
+
+const BarBackgroundPattern = props => {
+  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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {View} from 'react-native';
+import {BarDefaults} from 'gifted-charts-core';
+
+const Cap = props => {
+  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/common/LinearGradient.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {ViewStyle} from "react-native";
+
+type LinearGradientProps = {
+  style?: ViewStyle;
+  start?: { x: number, y: number };
+  end?: { x: number, y: number };
+  colors: string[];
+}
+
+let LinearGradient: React.FC<LinearGradientProps>;
+
+try {
+  // for bare react-native projects
+  LinearGradient = require('react-native-linear-gradient').LinearGradient;
+} catch (e) {
+  try {
+    // for expo-based projects
+    LinearGradient = require('expo-linear-gradient').LinearGradient;
+  } catch (e) {
+    throw new Error(
+      'Gradient package was not found. Make sure "react-native-linear-gradient" or "expo-linear-gradient" is installed'
+    );
+  }
+}
+
+export default LinearGradient;

package/src/Components/common/Pointer.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {View} from 'react-native';
+
+export const Pointer = props => {
+  const {
+    pointerX,
+    pointerYLocal,
+    pointerComponent,
+    pointerHeight,
+    pointerRadius,
+    pointerWidth,
+    pointerItemLocal,
+    pointerColorLocal,
+  } = props;
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: pointerX + (pointerX.pointerShiftX || 0),
+        top: pointerYLocal - 2,
+      }}>
+      {pointerComponent ? (
+        pointerComponent()
+      ) : (
+        <View
+          style={{
+            height: pointerHeight || pointerRadius * 2,
+            width: pointerWidth || pointerRadius * 2,
+            marginTop: pointerItemLocal?.pointerShiftY || 0,
+            backgroundColor: pointerColorLocal,
+            borderRadius: pointerRadius || 0,
+          }}
+        />
+      )}
+    </View>
+  );
+};