react-native-gifted-charts 1.4.12 → 1.4.13

package/src/Components/common/StripAndLabel.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {View} from 'react-native';
+import Svg, {Line} from 'react-native-svg';
+import {getTopAndLeftForStripAndLabel} from 'gifted-charts-core';
+
+export const StripAndLabel = props => {
+  const {
+    pointerX,
+    pointerLabelWidth,
+    pointerRadius,
+    pointerWidth,
+    pointerYLocal,
+    pointerStripUptoDataPoint,
+    pointerStripHeight,
+    pointerItemLocal,
+    showPointerStrip,
+    pointerStripWidth,
+    containerHeight,
+    xAxisThickness,
+    pointerStripColor,
+    pointerConfig,
+    pointerLabelComponent,
+    secondaryPointerItem,
+    pointerEvents,
+    isBarChart,
+  } = props;
+
+  const {top, left} = getTopAndLeftForStripAndLabel(props);
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: pointerX + (pointerItemLocal[0]?.pointerShiftX || 0),
+        top: pointerYLocal,
+      }}>
+      {(
+        isBarChart
+          ? showPointerStrip && !pointerLabelComponent
+          : showPointerStrip
+      ) ? (
+        <View
+          style={{
+            position: 'absolute',
+            left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
+            top: pointerStripUptoDataPoint
+              ? pointerRadius || pointerStripHeight / 2
+              : -pointerYLocal + 8,
+            width: pointerStripWidth,
+            height: pointerStripUptoDataPoint
+              ? containerHeight - pointerYLocal + 5 - xAxisThickness
+              : pointerStripHeight,
+            marginTop: pointerStripUptoDataPoint
+              ? 0
+              : containerHeight - pointerStripHeight,
+          }}>
+          <Svg>
+            <Line
+              stroke={pointerStripColor}
+              strokeWidth={pointerStripWidth}
+              strokeDasharray={
+                pointerConfig?.strokeDashArray
+                  ? pointerConfig?.strokeDashArray
+                  : ''
+              }
+              x1={0}
+              y1={0}
+              x2={0}
+              y2={
+                pointerStripUptoDataPoint
+                  ? containerHeight - pointerYLocal + 5 - xAxisThickness
+                  : pointerStripHeight
+              }
+            />
+          </Svg>
+        </View>
+      ) : null}
+
+      {pointerLabelComponent ? (
+        <View
+          pointerEvents={pointerEvents ?? 'none'}
+          style={[
+            {
+              position: 'absolute',
+              left: left,
+              top: top,
+              marginTop: pointerStripUptoDataPoint
+                ? 0
+                : containerHeight - pointerStripHeight,
+              width: pointerLabelWidth,
+            },
+          ]}>
+          {pointerLabelComponent?.(pointerItemLocal, secondaryPointerItem)}
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/src/Components/lineSvg.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {ColorValue} from 'react-native';
+import Svg, {G, Path} from 'react-native-svg';
+import { ruleTypes } from 'gifted-charts-core';
+
+type ruleProps = {
+  thickness: number;
+  width: number;
+  color: ColorValue | String | any;
+  type: String;
+  dashWidth: number;
+  dashGap: number;
+};
+
+type configType = {
+  config: ruleProps;
+};
+
+function Rule(props: configType) {
+  const {thickness, width, color, type, dashWidth, dashGap} = props.config;
+  if (type === ruleTypes.SOLID) {
+    return (
+      <Svg height={thickness} width={width} {...props}>
+        <G fill="lightgray" stroke={color} strokeWidth={thickness}>
+          <Path d={`M0 ${thickness / 2}h${width}`} />
+        </G>
+      </Svg>
+    );
+  }
+  return (
+    <Svg height={thickness} width={width} {...props}>
+      <G fill="lightgray" stroke={color} strokeWidth={thickness}>
+        <Path
+          strokeDasharray={`${dashWidth},${dashGap}`}
+          d={`M0 ${thickness / 2}h${width}`}
+        />
+      </G>
+    </Svg>
+  );
+}
+
+export default Rule;