react-native-wagmi-charts 1.8.0 → 2.0.0

package/lib/module/utils/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePrevious.ts"],"names":["React","usePrevious","value","ref","useRef","useEffect","current"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAO,SAASC,WAAT,CAAwBC,KAAxB,EAAkC;AACvC;AACA;AACA,QAAMC,GAAG,GAAGH,KAAK,CAACI,MAAN,EAAZ,CAHuC,CAIvC;;AACAJ,EAAAA,KAAK,CAACK,SAAN,CAAgB,MAAM;AACpBF,IAAAA,GAAG,CAACG,OAAJ,GAAcJ,KAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH,EALuC,CAO1B;AACb;;AACA,SAAOC,GAAG,CAACG,OAAX;AACD","sourcesContent":["import * as React from 'react';\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/typescript/src/charts/candle/utils/getDomain.d.ts

@@ -0,0 +1,2 @@
+import type { TCandle } from '../types';
+export declare function getDomain(rows: TCandle[]): [min: number, max: number];

package/lib/typescript/src/charts/candle/utils/getHeight.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getHeight({ value, domain, maxHeight, }: {
+    value: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/getPrice.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getPrice({ y, domain, maxHeight, }: {
+    y: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/getY.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getY({ value, domain, maxHeight, }: {
+    value: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getDomain';
+export * from './getHeight';
+export * from './getPrice';
+export * from './getY';

package/lib/typescript/src/charts/line/Chart.d.ts

@@ -5,6 +5,7 @@ export declare const LineChartDimensionsContext: React.Context<{
     height: number;
     path: string;
     area: string;
+    shape: any;
     gutter: number;
     pathWidth: number;
 }>;
@@ -13,7 +14,7 @@ declare type LineChartProps = ViewProps & {
     yGutter?: number;
     width?: number;
     height?: number;
-    shape?: string;
+    shape?: unknown;
     /**
      * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.
      */
@@ -21,4 +22,7 @@ declare type LineChartProps = ViewProps & {
     absolute?: boolean;
 };
 export declare function LineChart({ children, yGutter, width, height, shape, id, absolute, ...props }: LineChartProps): JSX.Element;
+export declare namespace LineChart {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/ChartPath.d.ts

@@ -3,6 +3,7 @@ import Animated from 'react-native-reanimated';
 import { LineChartPathProps } from './Path';
 export declare const LineChartPathContext: React.Context<{
     color: string;
+    isInactive: boolean;
     isTransitionEnabled: boolean;
 }>;
 declare type LineChartPathWrapperProps = {
@@ -10,9 +11,17 @@ declare type LineChartPathWrapperProps = {
     animationProps?: Partial<Animated.WithTimingConfig>;
     children?: React.ReactNode;
     color?: string;
+    inactiveColor?: string;
     width?: number;
+    widthOffset?: number;
     pathProps?: Partial<LineChartPathProps>;
     showInactivePath?: boolean;
+    animateOnMount?: 'foreground';
+    mountAnimationDuration?: number;
+    mountAnimationProps?: Partial<Animated.WithTimingConfig>;
 };
-export declare function LineChartPathWrapper({ animationDuration, animationProps, children, color, width: strokeWidth, pathProps, showInactivePath, }: LineChartPathWrapperProps): JSX.Element;
+export declare function LineChartPathWrapper({ animationDuration, animationProps, children, color, inactiveColor, width: strokeWidth, widthOffset, pathProps, showInactivePath, animateOnMount, mountAnimationDuration, mountAnimationProps, }: LineChartPathWrapperProps): JSX.Element;
+export declare namespace LineChartPathWrapper {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Context.d.ts

@@ -10,4 +10,7 @@ declare type LineChartProviderProps = {
     xLength?: number;
 };
 export declare function LineChartProvider({ children, data, yRange, onCurrentIndexChange, xLength, }: LineChartProviderProps): JSX.Element;
+export declare namespace LineChartProvider {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Cursor.d.ts

@@ -8,3 +8,6 @@ export declare const CursorContext: React.Context<{
     type: string;
 }>;
 export declare function LineChartCursor({ children, type, ...props }: LineChartCursorProps): JSX.Element;
+export declare namespace LineChartCursor {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/CursorCrosshair.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { LineChartCursorProps } from './Cursor';
-declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
+declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'children' | 'type'> & {
     children?: React.ReactNode;
     color?: string;
     size?: number;
@@ -12,4 +12,7 @@ declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'>
     crosshairOuterProps?: ViewProps;
 };
 export declare function LineChartCursorCrosshair({ children, color, size, outerSize, crosshairWrapperProps, crosshairProps, crosshairOuterProps, ...props }: LineChartCursorCrosshairProps): JSX.Element;
+export declare namespace LineChartCursorCrosshair {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/CursorLine.d.ts

@@ -5,5 +5,8 @@ declare type LineChartCursorLineProps = {
     color?: string;
     lineProps?: Partial<LineProps>;
 };
-export declare const LineChartCursorLine: ({ children, color, lineProps, }: LineChartCursorLineProps) => JSX.Element;
+export declare function LineChartCursorLine({ children, color, lineProps, }: LineChartCursorLineProps): JSX.Element;
+export declare namespace LineChartCursorLine {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/DatetimeText.d.ts

@@ -10,4 +10,7 @@ declare type LineChartDatetimeProps = {
     style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 export declare function LineChartDatetimeText({ locale, options, format, variant, style, }: LineChartDatetimeProps): JSX.Element;
+export declare namespace LineChartDatetimeText {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Dot.d.ts

@@ -1,28 +1,31 @@
 /// <reference types="react" />
-import type { ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { CircleProps } from 'react-native-svg';
 export declare type LineChartDotProps = {
-    dotProps?: ViewProps;
-    outerDotProps?: ViewProps;
+    dotProps?: Animated.AnimateProps<CircleProps>;
+    outerDotProps?: Animated.AnimateProps<CircleProps>;
     color?: string;
+    inactiveColor?: string;
+    showInactiveColor?: boolean;
     at: number;
     size?: number;
+    hasPulse?: boolean;
+    hasOuterDot?: boolean;
     /**
      * If `always`, the outer dot will still animate when interaction is active.
      *
-     * If `never`, the outer dot will never animate.
-     *
      * If `while-inactive`, the outer dot will animate only when the interaction is inactive.
      *
      * Default: `while-inactive`
      */
-    pulsesOuter?: 'always' | 'while-inactive' | 'never';
+    pulseBehaviour?: 'always' | 'while-inactive';
     /**
      * Defaults to `size * 4`
      */
     outerSize?: number;
     pulseDurationMs?: number;
 };
-export declare function LineChartDot({ color, at, size, pulsesOuter, outerSize, dotProps, outerDotProps, }: LineChartDotProps): JSX.Element;
+export declare function LineChartDot({ at, color: defaultColor, dotProps, hasOuterDot: defaultHasOuterDot, hasPulse, inactiveColor, outerDotProps, pulseBehaviour, pulseDurationMs, showInactiveColor, size, outerSize, }: LineChartDotProps): JSX.Element;
 export declare namespace LineChartDot {
     var displayName: string;
 }

package/lib/typescript/src/charts/line/Gradient.d.ts

@@ -6,3 +6,6 @@ export declare type LineChartGradientProps = Animated.AnimateProps<PathProps> &
     children?: React.ReactNode;
 };
 export declare function LineChartGradient({ color: overrideColor, children, ...props }: LineChartGradientProps): JSX.Element;
+export declare namespace LineChartGradient {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/Group.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode, ReactChild } from 'react';
+import { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
-export default function flattenChildren(children: ReactNode, depth?: number, keys?: (string | number)[]): ReactChild[];
 declare type Props = {
     children: ReactNode;
 } & ViewProps;

package/lib/typescript/src/charts/line/Highlight.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import Animated from 'react-native-reanimated';
+import { PathProps } from 'react-native-svg';
+export declare type LineChartColorProps = Animated.AnimateProps<PathProps> & {
+    color?: string;
+    from: number;
+    to: number;
+    showInactiveColor?: boolean;
+    inactiveColor?: string;
+    width?: number;
+};
+export declare function LineChartHighlight({ color, inactiveColor, showInactiveColor, from, to, width: strokeWidth, ...props }: LineChartColorProps): JSX.Element;
+export declare namespace LineChartHighlight {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/HorizontalLine.d.ts

@@ -29,5 +29,8 @@ declare type HorizontalLineProps = {
         value: number;
     } | number;
 };
-export declare const LineChartHorizontalLine: ({ color, lineProps, at, offsetY, }: HorizontalLineProps) => JSX.Element;
+export declare function LineChartHorizontalLine({ color, lineProps, at, offsetY, }: HorizontalLineProps): JSX.Element;
+export declare namespace LineChartHorizontalLine {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Path.d.ts

@@ -3,6 +3,7 @@ import Animated from 'react-native-reanimated';
 import { PathProps } from 'react-native-svg';
 export declare type LineChartPathProps = Animated.AnimateProps<PathProps> & {
     color?: string;
+    inactiveColor?: string;
     width?: number;
     isInactive?: boolean;
     /**
@@ -22,4 +23,7 @@ export declare type LineChartPathProps = Animated.AnimateProps<PathProps> & {
      */
     isTransitionEnabled?: boolean;
 };
-export declare function LineChartPath({ color, width: strokeWidth, isInactive, isTransitionEnabled, ...props }: LineChartPathProps): JSX.Element;
+export declare function LineChartPath({ color, inactiveColor, width: strokeWidth, ...props }: LineChartPathProps): JSX.Element;
+export declare namespace LineChartPath {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/PriceText.d.ts

@@ -9,3 +9,6 @@ export declare type LineChartPriceTextProps = {
     style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 export declare function LineChartPriceText({ format, precision, variant, style, }: LineChartPriceTextProps): JSX.Element;
+export declare namespace LineChartPriceText {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/Tooltip.d.ts

@@ -12,4 +12,7 @@ declare type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
     textStyle?: LineChartPriceTextProps['style'];
 };
 export declare function LineChartTooltip({ children, xGutter, yGutter, cursorGutter, position, textProps, textStyle, ...props }: LineChartTooltipProps): JSX.Element;
+export declare namespace LineChartTooltip {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/index.d.ts

@@ -1,25 +1,29 @@
-/// <reference types="react" />
-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';
 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';
@@ -29,28 +33,16 @@ export * from './useLineChart';
 export * from './usePrice';
 export * from './types';
 export declare const LineChart: typeof _LineChart & {
-    Gradient: typeof LineChartGradient;
     Chart: typeof _LineChart;
+    Dot: typeof LineChartDot;
     Path: typeof LineChartPathWrapper;
     Cursor: typeof LineChartCursor;
     CursorCrosshair: typeof LineChartCursorCrosshair;
-    CursorLine: ({ children, color, lineProps, }: {
-        children?: import("react").ReactNode;
-        color?: string | undefined;
-        lineProps?: Partial<import("react-native-svg").LineProps> | undefined;
-    }) => JSX.Element;
-    HorizontalLine: ({ color, lineProps, at, offsetY, }: {
-        color?: string | undefined;
-        lineProps?: Partial<import("react-native-svg").LineProps> | undefined;
-        offsetY?: number | undefined;
-        at?: number | {
-            index: number;
-            value?: undefined;
-        } | {
-            index?: undefined;
-            value: number;
-        } | undefined;
-    }) => JSX.Element;
+    CursorLine: typeof LineChartCursorLine;
+    Gradient: typeof LineChartGradient;
+    Group: typeof LineChartGroup;
+    Highlight: typeof LineChartHighlight;
+    HorizontalLine: typeof LineChartHorizontalLine;
     Tooltip: typeof LineChartTooltip;
     Provider: typeof LineChartProvider;
     PriceText: typeof LineChartPriceText;
@@ -58,6 +50,4 @@ export declare const LineChart: typeof _LineChart & {
     useDatetime: typeof useLineChartDatetime;
     usePrice: typeof useLineChartPrice;
     useChart: typeof useLineChart;
-    Group: typeof LineChartGroup;
-    Dot: typeof LineChartDot;
 };

package/lib/typescript/src/charts/line/useAnimatedPath.d.ts

@@ -0,0 +1,8 @@
+export default function useAnimatedPath({ enabled, path, }: {
+    enabled?: boolean;
+    path: string;
+}): {
+    animatedProps: Partial<{
+        d: string;
+    }>;
+};

package/lib/typescript/src/charts/line/utils/getArea.d.ts

@@ -0,0 +1,9 @@
+import type { TLineChartData, YDomain } from '../types';
+export declare function getArea({ data, width, height, gutter, shape: _shape, yDomain, }: {
+    data: TLineChartData;
+    width: number;
+    height: number;
+    gutter: number;
+    shape?: unknown;
+    yDomain: YDomain;
+}): string;

package/lib/typescript/src/charts/line/utils/getDomain.d.ts

@@ -0,0 +1,2 @@
+import type { TLineChartPoint } from '../types';
+export declare function getDomain(rows: TLineChartPoint[]): [number, number];

package/lib/typescript/src/charts/line/utils/getPath.d.ts

@@ -0,0 +1,11 @@
+import type { TLineChartData, YDomain } from '../types';
+export declare 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;

package/lib/typescript/src/charts/line/utils/index.d.ts

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

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

@@ -47,4 +47,4 @@ export declare function interpolatePathCommands(aCommandsInput: any, bCommandsIn
  *   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: any, b: any, excludeSegment: any): (t: any) => any;
+export declare function interpolatePath(a: any, b: any, excludeSegment: any): (t: any) => any;

package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts

@@ -0,0 +1,2 @@
+import type { TLineChartData, TLineChartDataProp } from '../types';
+export declare function lineChartDataPropToArray(dataProp: TLineChartDataProp): TLineChartData;

package/lib/typescript/src/index.d.ts

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

package/lib/typescript/src/utils/formatDatetime.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @worklet
+ */
+export declare function formatDatetime({ value, locale, options, }: {
+    value: number;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
+}): string;

package/lib/typescript/src/utils/formatPrice.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @worklet
+ */
+export declare function formatPrice({ value: _value, defaultPrice: _defaultPrice, precision, }: {
+    value: string;
+    defaultPrice?: string;
+    precision?: number;
+}): string;

package/lib/typescript/src/utils/index.d.ts

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

package/lib/typescript/src/utils/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,6 +39,7 @@
     "d3-interpolate-path": "^2.2.3",
     "d3-scale": "^2",
     "d3-shape": "^3.0.1",
+    "react-keyed-flatten-children": "^1.3.0",
     "react-native-redash": "^16.1.1",
     "react-native-svg": "^12.1.1"
   },
@@ -92,7 +93,8 @@
           "useTabs": false
         }
       ],
-      "@typescript-eslint/no-explicit-any": "error"
+      "@typescript-eslint/no-explicit-any": "error",
+      "no-shadow": "off"
     }
   },
   "eslintIgnore": [

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

@@ -0,0 +1,9 @@
+import type { TCandle } from '../types';
+
+export function getDomain(rows: TCandle[]): [min: number, max: number] {
+  'worklet';
+  const values = rows.map(({ high, low }) => [high, low]).flat();
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  return [min - (max - min) * 0.025, max + (max - min) * 0.025];
+}

package/src/charts/candle/utils/getHeight.ts

@@ -0,0 +1,21 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getHeight({
+  value,
+  domain,
+  maxHeight,
+}: {
+  value: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  return interpolate(
+    value,
+    [0, Math.max(...domain) - Math.min(...domain)],
+    [0, maxHeight],
+    Extrapolate.CLAMP
+  );
+}

package/src/charts/candle/utils/getPrice.ts

@@ -0,0 +1,17 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getPrice({
+  y,
+  domain,
+  maxHeight,
+}: {
+  y: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  if (y === -1) return -1;
+  return interpolate(y, [0, maxHeight], domain.reverse(), Extrapolate.CLAMP);
+}

package/src/charts/candle/utils/getY.ts

@@ -0,0 +1,16 @@
+import { interpolate, Extrapolate } from 'react-native-reanimated';
+
+import type { TDomain } from '../types';
+
+export function getY({
+  value,
+  domain,
+  maxHeight,
+}: {
+  value: number;
+  domain: TDomain;
+  maxHeight: number;
+}) {
+  'worklet';
+  return interpolate(value, domain, [maxHeight, 0], Extrapolate.CLAMP);
+}

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

@@ -0,0 +1,4 @@
+export * from './getDomain';
+export * from './getHeight';
+export * from './getPrice';
+export * from './getY';

package/src/charts/line/Chart.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+// @ts-ignore
+import * as d3Shape from 'd3-shape';
 import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
 import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
@@ -10,6 +12,7 @@ export const LineChartDimensionsContext = React.createContext({
   height: 0,
   path: '',
   area: '',
+  shape: d3Shape.curveBumpX,
   gutter: 0,
   pathWidth: 0,
 });
@@ -19,7 +22,7 @@ type LineChartProps = ViewProps & {
   yGutter?: number;
   width?: number;
   height?: number;
-  shape?: string;
+  shape?: unknown;
   /**
    * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.
    */
@@ -29,12 +32,14 @@ type LineChartProps = ViewProps & {
 
 const { width: screenWidth } = Dimensions.get('window');
 
+LineChart.displayName = 'LineChart';
+
 export function LineChart({
   children,
   yGutter = 16,
   width = screenWidth,
   height = screenWidth,
-  shape,
+  shape = d3Shape.curveBumpX,
   id,
   absolute,
   ...props
@@ -88,8 +93,9 @@ export function LineChart({
       width,
       height,
       pathWidth,
+      shape,
     }),
-    [area, height, path, width, yGutter, pathWidth]
+    [yGutter, area, path, width, height, pathWidth, shape]
   );
 
   return (