react-native-wagmi-charts 1.8.0 → 2.0.0

package/src/charts/line/Highlight.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import Animated from 'react-native-reanimated';
+import { Path, PathProps } from 'react-native-svg';
+
+import { LineChartDimensionsContext } from './Chart';
+import { LineChartPathContext } from './ChartPath';
+import useAnimatedPath from './useAnimatedPath';
+import { useLineChart } from './useLineChart';
+import { getPath } from './utils';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export type LineChartColorProps = Animated.AnimateProps<PathProps> & {
+  color?: string;
+  from: number;
+  to: number;
+  showInactiveColor?: boolean;
+  inactiveColor?: string;
+  width?: number;
+};
+
+LineChartHighlight.displayName = 'LineChartHighlight';
+
+export function LineChartHighlight({
+  color = 'black',
+  inactiveColor,
+  showInactiveColor = true,
+  from,
+  to,
+  width: strokeWidth = 3,
+  ...props
+}: LineChartColorProps) {
+  const { data, yDomain } = useLineChart();
+  const { pathWidth, height, gutter, shape } = React.useContext(
+    LineChartDimensionsContext
+  );
+  const { isTransitionEnabled, isInactive: _isInactive } =
+    React.useContext(LineChartPathContext);
+  const isInactive = showInactiveColor && _isInactive;
+
+  ////////////////////////////////////////////////
+
+  const path = React.useMemo(() => {
+    if (data && data.length > 0) {
+      return getPath({
+        data,
+        from,
+        to,
+        width: pathWidth,
+        height,
+        gutter,
+        shape,
+        yDomain,
+      });
+    }
+    return '';
+  }, [data, from, to, pathWidth, height, gutter, shape, yDomain]);
+
+  const { animatedProps } = useAnimatedPath({
+    enabled: isTransitionEnabled,
+    path,
+  });
+
+  ////////////////////////////////////////////////
+
+  return (
+    <>
+      <AnimatedPath
+        animatedProps={animatedProps}
+        fill="transparent"
+        stroke={isInactive ? inactiveColor || color : color}
+        strokeWidth={strokeWidth}
+        strokeOpacity={isInactive && !inactiveColor ? 0.5 : 1}
+        {...props}
+      />
+    </>
+  );
+}

package/src/charts/line/HorizontalLine.tsx

@@ -45,12 +45,14 @@ type HorizontalLineProps = {
     | number;
 };
 
-export const LineChartHorizontalLine = ({
+LineChartHorizontalLine.displayName = 'LineChartHorizontalLine';
+
+export function LineChartHorizontalLine({
   color = 'gray',
   lineProps = {},
   at = { index: 0 },
   offsetY = 0,
-}: HorizontalLineProps) => {
+}: HorizontalLineProps) {
   const { width, path, height, gutter } = React.useContext(
     LineChartDimensionsContext
   );
@@ -104,4 +106,4 @@ export const LineChartHorizontalLine = ({
       {...lineProps}
     />
   );
-};
+}

package/src/charts/line/Path.tsx

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import Animated, {
-  useAnimatedProps,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { Path, PathProps } from 'react-native-svg';
 
 import { LineChartDimensionsContext } from './Chart';
-import interpolatePath from './interpolatePath';
-import { usePrevious } from '../../utils';
+import { LineChartPathContext } from './ChartPath';
+import useAnimatedPath from './useAnimatedPath';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
   color?: string;
+  inactiveColor?: string;
   width?: number;
   isInactive?: boolean;
   /**
@@ -35,43 +31,23 @@ export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
   isTransitionEnabled?: boolean;
 };
 
+LineChartPath.displayName = 'LineChartPath';
+
 export function LineChartPath({
   color = 'black',
+  inactiveColor,
   width: strokeWidth = 3,
-  isInactive,
-  isTransitionEnabled = true,
   ...props
 }: LineChartPathProps) {
   const { path } = React.useContext(LineChartDimensionsContext);
+  const { isTransitionEnabled, isInactive } =
+    React.useContext(LineChartPathContext);
 
   ////////////////////////////////////////////////
 
-  const transition = useSharedValue(0);
-
-  const previousPath = usePrevious(path);
-
-  useAnimatedReaction(
-    () => {
-      return path;
-    },
-    (_, previous) => {
-      if (previous) {
-        transition.value = 0;
-        transition.value = withTiming(1);
-      }
-    },
-    [path]
-  );
-
-  const animatedProps = useAnimatedProps(() => {
-    let d = path || '';
-    if (previousPath && isTransitionEnabled) {
-      const pathInterpolator = interpolatePath(previousPath, path, null);
-      d = pathInterpolator(transition.value);
-    }
-    return {
-      d,
-    };
+  const { animatedProps } = useAnimatedPath({
+    enabled: isTransitionEnabled,
+    path,
   });
 
   ////////////////////////////////////////////////
@@ -81,8 +57,8 @@ export function LineChartPath({
       <AnimatedPath
         animatedProps={animatedProps}
         fill="transparent"
-        stroke={color}
-        strokeOpacity={isInactive ? 0.2 : 1}
+        stroke={isInactive ? inactiveColor || color : color}
+        strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}
         strokeWidth={strokeWidth}
         {...props}
       />

package/src/charts/line/PriceText.tsx

@@ -13,6 +13,8 @@ export type LineChartPriceTextProps = {
   style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 
+LineChartPriceText.displayName = 'LineChartPriceText';
+
 export function LineChartPriceText({
   format,
   precision = 2,

package/src/charts/line/Tooltip.tsx

@@ -20,6 +20,8 @@ type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
   textStyle?: LineChartPriceTextProps['style'];
 };
 
+LineChartTooltip.displayName = 'LineChartTooltip';
+
 export function LineChartTooltip({
   children,
   xGutter = 8,

package/src/charts/line/index.ts

@@ -1,10 +1,13 @@
-import { LineChartGradient } from './Gradient';
 import { LineChart as _LineChart } from './Chart';
 import { LineChartPathWrapper } from './ChartPath';
+import { LineChartHighlight } from './Highlight';
 import { LineChartProvider } from './Context';
 import { LineChartCursor } from './Cursor';
 import { LineChartCursorCrosshair } from './CursorCrosshair';
 import { LineChartCursorLine } from './CursorLine';
+import { LineChartDot } from './Dot';
+import { LineChartGradient } from './Gradient';
+import { LineChartGroup } from './Group';
 import { LineChartHorizontalLine } from './HorizontalLine';
 import { LineChartTooltip } from './Tooltip';
 import { LineChartPriceText } from './PriceText';
@@ -12,16 +15,16 @@ import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
-import { LineChartGroup } from './Group';
-import { LineChartDot } from './Dot';
 
-export * from './Gradient';
 export * from './Chart';
 export * from './ChartPath';
+export * from './Highlight';
 export * from './Context';
 export * from './Cursor';
 export * from './CursorCrosshair';
 export * from './CursorLine';
+export * from './Dot';
+export * from './Gradient';
 export * from './Tooltip';
 export * from './DatetimeText';
 export * from './Path';
@@ -32,12 +35,15 @@ export * from './usePrice';
 export * from './types';
 
 export const LineChart = Object.assign(_LineChart, {
-  Gradient: LineChartGradient,
   Chart: _LineChart,
+  Dot: LineChartDot,
   Path: LineChartPathWrapper,
   Cursor: LineChartCursor,
   CursorCrosshair: LineChartCursorCrosshair,
   CursorLine: LineChartCursorLine,
+  Gradient: LineChartGradient,
+  Group: LineChartGroup,
+  Highlight: LineChartHighlight,
   HorizontalLine: LineChartHorizontalLine,
   Tooltip: LineChartTooltip,
   Provider: LineChartProvider,
@@ -46,6 +52,4 @@ export const LineChart = Object.assign(_LineChart, {
   useDatetime: useLineChartDatetime,
   usePrice: useLineChartPrice,
   useChart: useLineChart,
-  Group: LineChartGroup,
-  Dot: LineChartDot,
 });

package/src/charts/line/useAnimatedPath.ts

@@ -0,0 +1,47 @@
+import {
+  useAnimatedProps,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { usePrevious } from '../../utils';
+import { interpolatePath } from './utils';
+
+export default function useAnimatedPath({
+  enabled = true,
+  path,
+}: {
+  enabled?: boolean;
+  path: string;
+}) {
+  const transition = useSharedValue(0);
+
+  const previousPath = usePrevious(path);
+
+  useAnimatedReaction(
+    () => {
+      return path;
+    },
+    (_, previous) => {
+      if (previous) {
+        transition.value = 0;
+        transition.value = withTiming(1);
+      }
+    },
+    [path]
+  );
+
+  const animatedProps = useAnimatedProps(() => {
+    let d = path || '';
+    if (previousPath && enabled) {
+      const pathInterpolator = interpolatePath(previousPath, path, null);
+      d = pathInterpolator(transition.value);
+    }
+    return {
+      d,
+    };
+  });
+
+  return { animatedProps };
+}

package/src/charts/line/utils/getArea.ts

@@ -0,0 +1,38 @@
+// @ts-ignore
+import * as shape from 'd3-shape';
+// @ts-ignore
+import { scaleLinear } from 'd3-scale';
+
+import type { TLineChartData, YDomain } from '../types';
+
+export function getArea({
+  data,
+  width,
+  height,
+  gutter,
+  shape: _shape,
+  yDomain,
+}: {
+  data: TLineChartData;
+  width: number;
+  height: number;
+  gutter: number;
+  shape?: unknown;
+  yDomain: YDomain;
+}): string {
+  const timestamps = data.map((_, i) => i);
+
+  const scaleX = scaleLinear()
+    .domain([Math.min(...timestamps), Math.max(...timestamps)])
+    .range([0, width]);
+  const scaleY = scaleLinear()
+    .domain([yDomain.min, yDomain.max])
+    .range([height - gutter, gutter]);
+  const area = shape
+    .area()
+    .x((_: unknown, i: number) => scaleX(i))
+    .y0((d: { value: unknown }) => scaleY(d.value))
+    .y1(() => height)
+    .curve(_shape)(data);
+  return area;
+}

package/src/charts/line/utils/getDomain.ts

@@ -0,0 +1,7 @@
+import type { TLineChartPoint } from '../types';
+
+export function getDomain(rows: TLineChartPoint[]): [number, number] {
+  'worklet';
+  const values = rows.map(({ value }) => value);
+  return [Math.min(...values), Math.max(...values)];
+}

package/src/charts/line/utils/getPath.ts

@@ -0,0 +1,48 @@
+// @ts-ignore
+import * as shape from 'd3-shape';
+// @ts-ignore
+import { scaleLinear } from 'd3-scale';
+
+import type { TLineChartData, YDomain } from '../types';
+
+export function getPath({
+  data,
+  from,
+  to,
+  width,
+  height,
+  gutter,
+  shape: _shape,
+  yDomain,
+}: {
+  data: TLineChartData;
+  from?: number;
+  to?: number;
+  width: number;
+  height: number;
+  gutter: number;
+  shape?: unknown;
+  yDomain: YDomain;
+}): string {
+  const timestamps = data.map((_, i) => i);
+
+  const scaleX = scaleLinear()
+    .domain([Math.min(...timestamps), Math.max(...timestamps)])
+    .range([0, width]);
+  const scaleY = scaleLinear()
+    .domain([yDomain.min, yDomain.max])
+    .range([height - gutter, gutter]);
+  const path = shape
+    .line()
+    .defined((d: { timestamp: number }) =>
+      from || to
+        ? data
+            .slice(from, to ? to + 1 : undefined)
+            .find((item) => item.timestamp === d.timestamp)
+        : true
+    )
+    .x((_: unknown, i: number) => scaleX(i))
+    .y((d: { value: number }) => scaleY(d.value))
+    .curve(_shape)(data);
+  return path;
+}

package/src/charts/line/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './getArea';
+export * from './getDomain';
+export * from './getPath';
+export * from './interpolatePath';
+export * from './lineChartDataPropToArray';

package/src/charts/line/{interpolatePath.ts → utils/interpolatePath.ts}

@@ -608,7 +608,7 @@ export function interpolatePathCommands(
  *   end command object and returns true if the segment should be excluded from splitting.
  * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
  */
-export default function interpolatePath(a, b, excludeSegment) {
+export function interpolatePath(a, b, excludeSegment) {
   'worklet';
 
   let aCommands = pathCommandsFromString(a);

package/src/charts/line/utils/lineChartDataPropToArray.ts

@@ -0,0 +1,25 @@
+import type { TLineChartData, TLineChartDataProp } from '../types';
+
+export function lineChartDataPropToArray(
+  dataProp: TLineChartDataProp
+): TLineChartData {
+  'worklet';
+
+  if (!dataProp) {
+    return [];
+  }
+
+  if (Array.isArray(dataProp)) {
+    return dataProp;
+  }
+
+  const data: TLineChartData = [];
+
+  Object.values(dataProp).forEach((dataSet) => {
+    if (dataSet) {
+      data.push(...dataSet);
+    }
+  });
+
+  return data;
+}

package/src/index.ts

@@ -1,4 +1,4 @@
 export * from './charts/candle';
 export * from './charts/line';
-export * from './utils';
 export * from './components/AnimatedText';
+export * from './utils';

package/src/utils/formatDatetime.ts

@@ -0,0 +1,16 @@
+/**
+ * @worklet
+ */
+export function formatDatetime({
+  value,
+  locale = 'en-US',
+  options = {},
+}: {
+  value: number;
+  locale?: string;
+  options?: Intl.DateTimeFormatOptions;
+}) {
+  'worklet';
+  const d = new Date(value);
+  return d.toLocaleString(locale, options);
+}

package/src/{utils.ts → utils/formatPrice.ts}

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 /**
  * @worklet
  */
@@ -40,32 +38,3 @@ export function formatPrice({
   }
   return res;
 }
-
-/**
- * @worklet
- */
-export function formatDatetime({
-  value,
-  locale = 'en-US',
-  options = {},
-}: {
-  value: number;
-  locale?: string;
-  options?: Intl.DateTimeFormatOptions;
-}) {
-  'worklet';
-  const d = new Date(value);
-  return d.toLocaleString(locale, options);
-}
-
-export function usePrevious<T>(value: T) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  const ref = React.useRef<T>();
-  // Store current value in ref
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-  return ref.current;
-}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './formatDatetime';
+export * from './formatPrice';
+export * from './usePrevious';

package/src/utils/usePrevious.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export function usePrevious<T>(value: T) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = React.useRef<T>();
+  // Store current value in ref
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}

package/yarn.lock

@@ -6158,7 +6158,7 @@ react-devtools-core@^4.6.0:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6168,6 +6168,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-keyed-flatten-children@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-keyed-flatten-children/-/react-keyed-flatten-children-1.3.0.tgz#38d171582c6358909f430648a7a7d094aebae42a"
+  integrity sha512-qB7A6n+NHU0x88qTZGAJw6dsqwI941jcRPBB640c/CyWqjPQQ+YUmXOuzPziuHb7iqplM3xksWAbGYwkQT0tXA==
+  dependencies:
+    react-is "^16.8.6"
+
 react-native-builder-bob@^0.18.1:
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/react-native-builder-bob/-/react-native-builder-bob-0.18.1.tgz#43f238e6cb6efffa6e3d23ac449eb7392650c2c3"

package/lib/commonjs/charts/line/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["utils.ts"],"names":["getDomain","rows","values","map","value","Math","min","max","lineChartDataPropToArray","dataProp","Array","isArray","data","Object","forEach","dataSet","push","getPath","width","height","gutter","shape","_shape","curveBumpX","yDomain","timestamps","_","i","scaleX","domain","range","scaleY","path","line","x","y","d","curve","getArea","area","y0","y1"],"mappings":"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","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, TLineChartPoint, YDomain } from './types';\nimport type { TLineChartDataProp } from './types';\n\nexport function getDomain(rows: TLineChartPoint[]): [number, number] {\n  'worklet';\n  const values = rows.map(({ value }) => value);\n  return [Math.min(...values), Math.max(...values)];\n}\n\nexport function lineChartDataPropToArray(\n  dataProp: TLineChartDataProp\n): TLineChartData {\n  'worklet';\n\n  if (!dataProp) {\n    return [];\n  }\n\n  if (Array.isArray(dataProp)) {\n    return dataProp;\n  }\n\n  const data: TLineChartData = [];\n\n  Object.values(dataProp).forEach((dataSet) => {\n    if (dataSet) {\n      data.push(...dataSet);\n    }\n  });\n\n  return data;\n}\n\nexport function getPath({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape = shape.curveBumpX,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: string;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const path = shape\n    .line()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y((d: { value: unknown }) => scaleY(d.value))\n    .curve(_shape)(data);\n  return path;\n}\n\nexport function getArea({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape = shape.curveBumpX,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: string;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const area = shape\n    .area()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y0((d: { value: unknown }) => scaleY(d.value))\n    .y1(() => height)\n    .curve(_shape)(data);\n  return area;\n}\n"]}

package/lib/commonjs/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["utils.ts"],"names":["formatPrice","value","_value","defaultPrice","_defaultPrice","precision","toString","replace","decimals","Number","Math","min","slice","search","res","toFixed","vals","split","length","formatDatetime","locale","options","d","Date","toLocaleString","usePrevious","ref","React","useRef","useEffect","current"],"mappings":";;;;;;;;;AAAA;;;;;;AAEA;AACA;AACA;AACO,SAASA,WAAT,CAAqB;AAC1BC,EAAAA,KAAK,EAAEC,MADmB;AAE1BC,EAAAA,YAAY,EAAEC,aAAa,GAAG,EAFJ;AAG1BC,EAAAA;AAH0B,CAArB,EAQJ;AACD;;AADC;;AAGD,MAAIF,YAAY,GAAGC,aAAnB;;AACA,MAAI,OAAOD,YAAP,KAAwB,QAA5B,EAAsC;AACpCA,IAAAA,YAAY,GAAIA,YAAD,CAAyBG,QAAzB,EAAf;AACD;;AAED,MAAIL,KAAK,GAAGC,MAAM,uBAAIC,YAAJ,4EAAI,eAAcI,OAAlB,0DAAI,2CAAwB,GAAxB,EAA6B,EAA7B,CAAJ,CAAlB;;AACA,MAAI,CAACN,KAAL,EAAY;AACV,WAAQ,MAAR;AACD;;AAED,MAAIO,QAAQ,GACVH,SADU,aACVA,SADU,cACVA,SADU,GAETI,MAAM,CAACR,KAAD,CAAN,GAAgB,CAAhB,GACGS,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYV,KAAK,CAACK,QAAN,GAAiBM,KAAjB,CAAuB,CAAvB,EAA0BC,MAA1B,CAAiC,OAAjC,IAA4C,CAAxD,CADH,GAEG,CAJN;AAMA,MAAIC,GAAG,GAAI,GAAEL,MAAM,CAACR,KAAD,CAAN,CAAcc,OAAd,CAAsBP,QAAtB,CAAgC,EAA7C;AACA,QAAMQ,IAAI,GAAGF,GAAG,CAACG,KAAJ,CAAU,GAAV,CAAb;;AACA,MAAID,IAAI,CAACE,MAAL,GAAc,CAAlB,EAAqB;AACnBJ,IAAAA,GAAG,GAAGE,IAAI,CAAC,CAAD,CAAJ,CAAQT,OAAR,CAAgB,uBAAhB,EAAyC,GAAzC,CAAN;;AACA,QAAIS,IAAI,CAACE,MAAL,KAAgB,CAApB,EAAuB;AACrB,aAAOJ,GAAG,GAAG,GAAN,GAAYE,IAAI,CAAC,CAAD,CAAvB;AACD;AACF;;AACD,SAAOF,GAAP;AACD;AAED;AACA;AACA;;;AACO,SAASK,cAAT,CAAwB;AAC7BlB,EAAAA,KAD6B;AAE7BmB,EAAAA,MAAM,GAAG,OAFoB;AAG7BC,EAAAA,OAAO,GAAG;AAHmB,CAAxB,EAQJ;AACD;;AACA,QAAMC,CAAC,GAAG,IAAIC,IAAJ,CAAStB,KAAT,CAAV;AACA,SAAOqB,CAAC,CAACE,cAAF,CAAiBJ,MAAjB,EAAyBC,OAAzB,CAAP;AACD;;AAEM,SAASI,WAAT,CAAwBxB,KAAxB,EAAkC;AACvC;AACA;AACA,QAAMyB,GAAG,GAAGC,KAAK,CAACC,MAAN,EAAZ,CAHuC,CAIvC;;AACAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpBH,IAAAA,GAAG,CAACI,OAAJ,GAAc7B,KAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH,EALuC,CAO1B;AACb;;AACA,SAAOyB,GAAG,CAACI,OAAX;AACD","sourcesContent":["import * as React from 'react';\n\n/**\n * @worklet\n */\nexport function formatPrice({\n  value: _value,\n  defaultPrice: _defaultPrice = '',\n  precision,\n}: {\n  value: string;\n  defaultPrice?: string;\n  precision?: number;\n}) {\n  'worklet';\n\n  let defaultPrice = _defaultPrice;\n  if (typeof defaultPrice === 'number') {\n    defaultPrice = (defaultPrice as number).toString();\n  }\n\n  let value = _value || defaultPrice?.replace?.(',', '');\n  if (!value) {\n    return `0.00`;\n  }\n\n  let decimals =\n    precision ??\n    (Number(value) < 1\n      ? Math.min(8, value.toString().slice(2).search(/[^0]/g) + 3)\n      : 2);\n\n  let res = `${Number(value).toFixed(decimals)}`;\n  const vals = res.split('.');\n  if (vals.length > 0) {\n    res = vals[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    if (vals.length === 2) {\n      return res + '.' + vals[1];\n    }\n  }\n  return res;\n}\n\n/**\n * @worklet\n */\nexport function formatDatetime({\n  value,\n  locale = 'en-US',\n  options = {},\n}: {\n  value: number;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n}) {\n  'worklet';\n  const d = new Date(value);\n  return d.toLocaleString(locale, options);\n}\n\nexport function usePrevious<T>(value: T) {\n  // The ref object is a generic container whose current property is mutable ...\n  // ... and can hold any value, similar to an instance property on a class\n  const ref = React.useRef<T>();\n  // Store current value in ref\n  React.useEffect(() => {\n    ref.current = value;\n  }, [value]); // Only re-run if value changes\n  // Return previous value (happens before update in useEffect above)\n  return ref.current;\n}\n"]}

package/lib/module/charts/line/utils.js

@@ -1,60 +0,0 @@
-// @ts-ignore
-import * as shape from 'd3-shape'; // @ts-ignore
-
-import { scaleLinear } from 'd3-scale';
-export function getDomain(rows) {
-  'worklet';
-
-  const values = rows.map(({
-    value
-  }) => value);
-  return [Math.min(...values), Math.max(...values)];
-}
-export function lineChartDataPropToArray(dataProp) {
-  'worklet';
-
-  if (!dataProp) {
-    return [];
-  }
-
-  if (Array.isArray(dataProp)) {
-    return dataProp;
-  }
-
-  const data = [];
-  Object.values(dataProp).forEach(dataSet => {
-    if (dataSet) {
-      data.push(...dataSet);
-    }
-  });
-  return data;
-}
-export function getPath({
-  data,
-  width,
-  height,
-  gutter,
-  shape: _shape = shape.curveBumpX,
-  yDomain
-}) {
-  const timestamps = data.map((_, i) => i);
-  const scaleX = scaleLinear().domain([Math.min(...timestamps), Math.max(...timestamps)]).range([0, width]);
-  const scaleY = scaleLinear().domain([yDomain.min, yDomain.max]).range([height - gutter, gutter]);
-  const path = shape.line().x((_, i) => scaleX(i)).y(d => scaleY(d.value)).curve(_shape)(data);
-  return path;
-}
-export function getArea({
-  data,
-  width,
-  height,
-  gutter,
-  shape: _shape = shape.curveBumpX,
-  yDomain
-}) {
-  const timestamps = data.map((_, i) => i);
-  const scaleX = scaleLinear().domain([Math.min(...timestamps), Math.max(...timestamps)]).range([0, width]);
-  const scaleY = scaleLinear().domain([yDomain.min, yDomain.max]).range([height - gutter, gutter]);
-  const area = shape.area().x((_, i) => scaleX(i)).y0(d => scaleY(d.value)).y1(() => height).curve(_shape)(data);
-  return area;
-}
-//# sourceMappingURL=utils.js.map

package/lib/module/charts/line/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["utils.ts"],"names":["shape","scaleLinear","getDomain","rows","values","map","value","Math","min","max","lineChartDataPropToArray","dataProp","Array","isArray","data","Object","forEach","dataSet","push","getPath","width","height","gutter","_shape","curveBumpX","yDomain","timestamps","_","i","scaleX","domain","range","scaleY","path","line","x","y","d","curve","getArea","area","y0","y1"],"mappings":"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","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, TLineChartPoint, YDomain } from './types';\nimport type { TLineChartDataProp } from './types';\n\nexport function getDomain(rows: TLineChartPoint[]): [number, number] {\n  'worklet';\n  const values = rows.map(({ value }) => value);\n  return [Math.min(...values), Math.max(...values)];\n}\n\nexport function lineChartDataPropToArray(\n  dataProp: TLineChartDataProp\n): TLineChartData {\n  'worklet';\n\n  if (!dataProp) {\n    return [];\n  }\n\n  if (Array.isArray(dataProp)) {\n    return dataProp;\n  }\n\n  const data: TLineChartData = [];\n\n  Object.values(dataProp).forEach((dataSet) => {\n    if (dataSet) {\n      data.push(...dataSet);\n    }\n  });\n\n  return data;\n}\n\nexport function getPath({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape = shape.curveBumpX,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: string;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const path = shape\n    .line()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y((d: { value: unknown }) => scaleY(d.value))\n    .curve(_shape)(data);\n  return path;\n}\n\nexport function getArea({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape = shape.curveBumpX,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: string;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const area = shape\n    .area()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y0((d: { value: unknown }) => scaleY(d.value))\n    .y1(() => height)\n    .curve(_shape)(data);\n  return area;\n}\n"]}