react-native-gifted-charts 1.3.33 → 1.4.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import {chartTypes} from '../../utils/constants';
+import {chartTypes} from 'gifted-charts-core';
 import {Line, Svg} from 'react-native-svg';
 
 const RenderVerticalLines = props => {

package/src/Components/BarSpecificComponents/cap.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import {BarDefaults} from '../../utils/constants';
+import {BarDefaults} from 'gifted-charts-core';
 
 const Cap = props => {
   const {

package/src/Components/common/StripAndLabel.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
-import {View, Dimensions} from 'react-native';
+import {View} from 'react-native';
 import Svg, {Line} from 'react-native-svg';
+import {getTopAndLeftForStripAndLabel} from 'gifted-charts-core';
 
 export const StripAndLabel = props => {
   const {
-    autoAdjustPointerLabelPosition,
     pointerX,
     pointerLabelWidth,
-    activatePointersOnLongPress,
-    yAxisLabelWidth,
     pointerRadius,
     pointerWidth,
-    shiftPointerLabelX,
-    pointerLabelHeight,
     pointerYLocal,
     pointerStripUptoDataPoint,
     pointerStripHeight,
-    shiftPointerLabelY,
     pointerItemLocal,
     showPointerStrip,
     pointerStripWidth,
@@ -26,59 +21,11 @@ export const StripAndLabel = props => {
     pointerConfig,
     pointerLabelComponent,
     secondaryPointerItem,
-    scrollX,
     pointerEvents,
     isBarChart,
   } = props;
-  let left = 0,
-    top = 0;
-  if (autoAdjustPointerLabelPosition) {
-    if (pointerX < pointerLabelWidth / 2) {
-      left = 7;
-    } else if (
-      activatePointersOnLongPress &&
-      pointerX - scrollX < pointerLabelWidth / 2 - 10
-    ) {
-      left = 7;
-    } else {
-      if (
-        !activatePointersOnLongPress &&
-        pointerX >
-          (props.width ||
-            Dimensions.get('window').width - yAxisLabelWidth - 15) -
-            pointerLabelWidth / 2
-      ) {
-        left = -pointerLabelWidth - 4;
-      } else if (
-        activatePointersOnLongPress &&
-        pointerX - scrollX >
-          ((props.width ?? 0) + 10 ||
-            Dimensions.get('window').width - yAxisLabelWidth - 15) -
-            pointerLabelWidth / 2
-      ) {
-        left = -pointerLabelWidth - 4;
-      } else {
-        left = -pointerLabelWidth / 2 + 5;
-      }
-    }
-  } else {
-    left = (pointerRadius || pointerWidth / 2) - 10 + shiftPointerLabelX;
-  }
 
-  if (autoAdjustPointerLabelPosition) {
-    if (pointerLabelHeight - pointerYLocal > 10) {
-      top = 10;
-    } else {
-      top = -pointerLabelHeight;
-    }
-  } else {
-    top =
-      (pointerStripUptoDataPoint
-        ? pointerRadius || pointerStripHeight / 2
-        : -pointerYLocal + 8) -
-      pointerLabelWidth / 2 +
-      shiftPointerLabelY;
-  }
+  const {top, left} = getTopAndLeftForStripAndLabel(props);
 
   return (
     <View

package/src/Components/lineSvg.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {ColorValue} from 'react-native';
 import Svg, {G, Path} from 'react-native-svg';
-import { ruleTypes } from '../utils/constants';
+import { ruleTypes } from 'gifted-charts-core';
 
 type ruleProps = {
   thickness: number;