@wavemaker/react-native-echarts 1.0.0-dev.0

package/candlestick/candlestick-chart.props.d.ts

@@ -0,0 +1,51 @@
+import type { CartesianChartProps } from '../props/cartesian';
+/**
+ * One candlestick data point: [open, close, low, high].
+ */
+export type CandlestickItem = [number, number, number, number];
+/**
+ * Candlestick chart data: array of [open, close, low, high] per period.
+ */
+export type CandlestickData = CandlestickItem[];
+/**
+ * Props for CandlestickChart.
+ * common -> cartesian -> candlestick.
+ * colors is omitted; use positiveColor and negativeColor for candle colors.
+ */
+export interface CandlestickChartProps extends Omit<CartesianChartProps, 'colors'> {
+    /**
+     * Candlestick data: array of [open, close, low, high] per period.
+     */
+    data: CandlestickData;
+    /**
+     * X-axis category labels. If omitted, indices (0, 1, 2, ...) are used.
+     */
+    xAxisData?: (string | number)[];
+    /**
+     * Optional volume data (bar series below candlestick). Length should match data.
+     */
+    volumeData?: number[];
+    /**
+     * Optional MA5 (5-period moving average) line. Length should match data.
+     */
+    ma5?: number[];
+    /**
+     * Optional MA10 (10-period moving average) line. Length should match data.
+     */
+    ma10?: number[];
+    /**
+     * Optional MA20 (20-period moving average) line. Length should match data.
+     */
+    ma20?: number[];
+    /**
+     * Color for positive (up) candles.
+     * @default '#008000'
+     */
+    positiveColor?: string;
+    /**
+     * Color for negative (down) candles.
+     * @default '#FF2C2C'
+     */
+    negativeColor?: string;
+}
+//# sourceMappingURL=candlestick-chart.props.d.ts.map

package/candlestick/candlestick-chart.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/candlestick-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAChF;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/candlestick/index.d.ts

@@ -0,0 +1,3 @@
+export { CandlestickChart } from './candlestick-chart';
+export type { CandlestickChartProps, CandlestickData, CandlestickItem, } from './candlestick-chart.props';
+//# sourceMappingURL=index.d.ts.map

package/candlestick/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EACV,qBAAqB,EACrB,eAAe,EACf,eAAe,GAChB,MAAM,2BAA2B,CAAC"}

package/candlestick/index.js

@@ -0,0 +1 @@
+export { CandlestickChart } from './candlestick-chart';

package/chart-container.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const withResponsiveContainer: <T extends React.ComponentType<any>>(Component: T, ...dataName: string[]) => (props: React.ComponentProps<T> & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element;
+//# sourceMappingURL=chart-container.d.ts.map

package/chart-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../components/chart/chart-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAqGrD,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,UAAU,MAAM,EAAE,MACrG,OAAO,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,sBAmB/F,CAAC"}

package/chart-container.js

@@ -0,0 +1,63 @@
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+const ChartContainer = ({ width = '100%', height = 350, data, noDataText = 'No data to render chart.', noDataIcon, noDataTextStyle = {}, noDataContainerStyle = {}, render, style, }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const handleLayout = useCallback((event) => {
+        const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+        // Calculate actual dimensions based on props
+        let actualWidth = layoutWidth;
+        let actualHeight = layoutHeight;
+        // If width/height are numbers, use them directly
+        // If they're percentages, they're already resolved by React Native's layout system
+        if (typeof width === 'number') {
+            actualWidth = width;
+        }
+        if (typeof height === 'number') {
+            actualHeight = height;
+        }
+        setDimensions({
+            width: actualWidth,
+            height: actualHeight,
+        });
+    }, [width, height]);
+    // Parse width and height for container style
+    const containerStyle = {
+        width: typeof width === 'number' ? width : width,
+        height: typeof height === 'number' ? height : height,
+    };
+    return (<View style={[styles.container, containerStyle, style]} onLayout={handleLayout}>
+      {data ? (dimensions ? render(dimensions.width, dimensions.height) : null) : (<View style={[styles.noDataContainer, noDataContainerStyle, style]}>
+          <Text style={[styles.noDataText, noDataTextStyle]}>{noDataText}</Text>
+        </View>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    noDataContainer: {
+        minHeight: 200,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    noDataText: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#222',
+    },
+});
+export const withResponsiveContainer = (Component, ...dataName) => {
+    return (props) => {
+        const render = useCallback((width, height) => {
+            return React.createElement(Component, {
+                ...props,
+                width: width,
+                height: height,
+            });
+        }, [props]);
+        const data = dataName.length > 0 ? dataName.find((name) => !!props[name]) || props.data : props.data;
+        return (<ChartContainer width={props.width} height={props.height} style={props.style} data={data} render={render} noDataText={props.noDataText}/>);
+    };
+};

package/chart-theme.context.d.ts

@@ -0,0 +1,191 @@
+import React from 'react';
+/**
+ * Style configuration for chart axes (x, y, or radial).
+ * Defines the visual appearance of axis lines, labels, ticks, and split lines.
+ */
+type AxisStyle = {
+    /** Color of the main axis line */
+    lineColor: string;
+    /** Width of the main axis line in pixels */
+    lineWidth: number;
+    /** Color of the axis label text */
+    labelColor: string;
+    /** Color of the tick marks */
+    tickColor: string;
+    /** Width of the tick marks in pixels */
+    tickWidth: number;
+    /** Color of the tick mark labels */
+    tickLabelColor: string;
+    /** Color of the split lines (grid lines parallel to axis) */
+    splitLineColor: string;
+    /** Width of the split lines in pixels */
+    splitLineWidth: number;
+};
+/**
+ * Style configuration for grid lines.
+ * Defines the visual appearance of grid lines that help with data reading.
+ */
+type GridLineStyle = {
+    /** Color of the grid lines */
+    lineColor: string;
+    /** Width of the grid lines in pixels */
+    lineWidth: number;
+};
+/**
+ * Style configuration for tooltips.
+ * Defines the visual appearance of tooltips that appear when hovering over chart elements.
+ */
+type TooltipStyle = {
+    /** Background color of the tooltip */
+    backgroundColor: string;
+    /** Color of the label text in the tooltip */
+    labelColor: string;
+    /** Color of the value text in the tooltip */
+    valueColor: string;
+    /** Color of the tooltip border */
+    borderColor: string;
+    /** Width of the tooltip border in pixels */
+    borderWidth: number;
+    /** Border radius of the tooltip corners in pixels */
+    borderRadius: number;
+    /** Internal padding of the tooltip in pixels */
+    padding: number;
+};
+/**
+ * Style configuration for chart items (bars, lines, pie slices, etc.).
+ * Defines the visual appearance of individual data elements in the chart.
+ */
+type Series = {
+    /** Primary color for the data series */
+    color: string;
+    /** Width of lines for line/area charts in pixels */
+    lineWidth?: number;
+    /** Border radius for each corner [top-left, top-right, bottom-right, bottom-left] */
+    borderRadius?: number[];
+    /** Color of the border around chart items */
+    borderColor?: string;
+    /** Width of the border around chart items in pixels */
+    borderWidth?: number;
+    /** Style of the border: 'solid', 'dashed', or 'dotted' */
+    borderType?: 'solid' | 'dashed' | 'dotted';
+};
+/**
+ * Style configuration for chart legends.
+ * Defines the visual appearance of legends that identify data series in charts.
+ */
+type LegendStyle = {
+    /** Color of the legend text */
+    textColor: string;
+    /** Font size of the legend text in pixels */
+    fontSize: number;
+    /** Color of the legend background */
+    backgroundColor: string;
+};
+/**
+ * Complete chart theme configuration.
+ * Contains styling for all chart components: axes (x, y, radial), grid lines, tooltips, and item styles.
+ * The series array provides a color palette that cycles through for multiple data series.
+ */
+export type ChartTheme = {
+    /** Configuration for chart axes (x, y, and radial) */
+    axis: {
+        /** X-axis styling configuration */
+        x: AxisStyle;
+        /** Y-axis styling configuration */
+        y: AxisStyle;
+        /** Radial axis styling configuration (for radar/polar charts) */
+        r: AxisStyle;
+    };
+    /** Configuration for grid lines */
+    grid: {
+        /** X-axis grid line styling */
+        x: GridLineStyle;
+        /** Y-axis grid line styling */
+        y: GridLineStyle;
+        /** Radial grid line styling (for radar/polar charts) */
+        r: GridLineStyle;
+    };
+    legend: LegendStyle;
+    /** Configuration for tooltip appearance */
+    tooltip: TooltipStyle;
+    /** Array of series styles that cycle through for multiple data series */
+    series: Series[];
+};
+/**
+ * Utility function to extend the default theme with custom overrides.
+ * Useful for creating theme variants without using the React context system.
+ *
+ * @param theme - Partial theme configuration to merge with defaults
+ * @returns A complete ChartTheme with defaults merged
+ */
+export declare const extendChartTheme: (...themes: Partial<ChartTheme>[]) => ChartTheme;
+/**
+ * Default chart theme configuration.
+ * Provides sensible defaults for all chart styling elements.
+ * Uses a blue color palette for item styles that cycles through different shades.
+ */
+export declare const LIGHT_THEME: ChartTheme;
+export declare const DARK_THEME: ChartTheme;
+/**
+ * Type definition for the chart theme context value.
+ * Contains the current theme that can be accessed by chart components.
+ */
+interface ChartThemeContextType {
+    /** The current chart theme configuration */
+    theme: ChartTheme;
+}
+/**
+ * Hook to access and optionally extend the chart theme.
+ * Merges the theme from context (if available) with any local theme overrides.
+ * The local theme parameter takes precedence over the context theme.
+ *
+ * @param theme - Optional partial theme to merge with the context theme
+ * @returns ChartThemeContextType with the merged theme
+ *
+ * @example
+ * ```tsx
+ * const { theme } = useChartTheme({ tooltip: { backgroundColor: '#000' } });
+ * ```
+ */
+export declare const useChartTheme: (theme?: Partial<ChartTheme>, colors?: string[]) => ChartThemeContextType;
+/**
+ * Props for the ChartThemeProvider component.
+ */
+interface ThemeProviderProps {
+    /** Partial theme configuration to merge with parent theme or defaults */
+    theme: Partial<ChartTheme>;
+    /** Child components that will have access to the theme */
+    children: React.ReactNode;
+}
+/**
+ * Provider component that supplies chart theme configuration to child components.
+ * Supports nested providers - child providers will merge their theme with the parent theme.
+ * The parent theme serves as the base, and the current provider's theme overrides it.
+ *
+ * @example
+ * ```tsx
+ * <ChartThemeProvider theme={{ tooltip: { backgroundColor: '#000' } }}>
+ *   <MyChart />
+ * </ChartThemeProvider>
+ * ```
+ */
+export declare const ChartThemeProvider: React.FC<ThemeProviderProps>;
+/**
+ * Higher-order component (HOC) that wraps a component with ChartThemeProvider.
+ * Allows passing a theme prop directly to a component, which will be applied
+ * to that component and its children.
+ *
+ * @param Component - The component to wrap with theme provider
+ * @returns A new component that accepts an optional theme prop
+ *
+ * @example
+ * ```tsx
+ * const ThemedChart = withChartTheme(MyChart);
+ * <ThemedChart theme={{ tooltip: { backgroundColor: '#000' } }} />
+ * ```
+ */
+export declare const withChartTheme: <T extends React.ComponentType<any>>(Component: T) => (props: React.ComponentProps<T> & {
+    theme?: Partial<ChartTheme>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=chart-theme.context.d.ts.map

package/chart-theme.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme.context.d.ts","sourceRoot":"","sources":["../../../components/chart/chart-theme.context.tsx"],"names":[],"mappings":"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"}

package/chart-theme.context.js

@@ -0,0 +1,276 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+/**
+ * Merges two chart themes together, with theme2 taking precedence over theme1.
+ * Performs a deep merge for nested objects (like axis.x, axis.y, etc.) and
+ * allows partial theme overrides. Arrays (like itemStyles) are replaced entirely.
+ *
+ * @param theme1 - Base theme to merge from
+ * @param theme2 - Partial theme that will override/extend theme1
+ * @returns A new merged ChartTheme object
+ */
+const mergeThemes = (theme1, theme2) => {
+    const result = { ...theme1 };
+    for (const key in theme2) {
+        if (theme2.hasOwnProperty(key)) {
+            const value2 = theme2[key];
+            const value1 = result[key];
+            if (value2 !== undefined) {
+                if (typeof value2 === 'object' && !Array.isArray(value2) && value2 !== null &&
+                    typeof value1 === 'object' && !Array.isArray(value1) && value1 !== null) {
+                    // Recursively merge nested objects
+                    result[key] = mergeThemes(value1, value2);
+                }
+                else {
+                    // Override with value from theme2
+                    result[key] = value2;
+                }
+            }
+        }
+    }
+    return result;
+};
+/**
+ * Utility function to extend the default theme with custom overrides.
+ * Useful for creating theme variants without using the React context system.
+ *
+ * @param theme - Partial theme configuration to merge with defaults
+ * @returns A complete ChartTheme with defaults merged
+ */
+export const extendChartTheme = (...themes) => {
+    return themes.filter(theme => theme !== undefined).reduce((acc, theme) => {
+        return acc ? mergeThemes(acc, theme) : theme;
+    }, LIGHT_THEME);
+};
+/**
+ * Default chart theme configuration.
+ * Provides sensible defaults for all chart styling elements.
+ * Uses a blue color palette for item styles that cycles through different shades.
+ */
+export const LIGHT_THEME = {
+    axis: {
+        x: {
+            lineColor: '#AAAAAA',
+            lineWidth: 1,
+            labelColor: '#666666',
+            tickLabelColor: '#666666',
+            tickColor: '#DDDDDD',
+            tickWidth: 1,
+            splitLineColor: '#DDDDDD',
+            splitLineWidth: 1
+        },
+        y: {
+            lineColor: '#AAAAAA',
+            lineWidth: 1,
+            labelColor: '#666666',
+            tickLabelColor: '#666666',
+            tickColor: '#DDDDDD',
+            tickWidth: 1,
+            splitLineColor: '#DDDDDD',
+            splitLineWidth: 1
+        },
+        r: {
+            lineColor: '#DDDDDD',
+            lineWidth: 1,
+            labelColor: '#666666',
+            tickLabelColor: '#666666',
+            tickColor: '#DDDDDD',
+            tickWidth: 1,
+            splitLineColor: '#DDDDDD',
+            splitLineWidth: 1
+        }
+    },
+    grid: {
+        x: {
+            lineColor: '#AAAAAA',
+            lineWidth: 1
+        },
+        y: {
+            lineColor: '#AAAAAA',
+            lineWidth: 1
+        },
+        r: {
+            lineColor: '#EEEEEE',
+            lineWidth: 1,
+        }
+    },
+    tooltip: {
+        backgroundColor: '#FFFFFF',
+        labelColor: '#AAAAAA',
+        valueColor: '#000000',
+        borderColor: '#DDDDDD',
+        borderWidth: 1,
+        borderRadius: 5,
+        padding: 2,
+    },
+    series: [
+        {
+            color: '#8c62f2',
+            borderRadius: [4, 4, 4, 4],
+            lineWidth: 2,
+        },
+        {
+            color: '#4ad0e0',
+            borderRadius: [4, 4, 4, 4],
+            lineWidth: 2,
+        },
+        {
+            color: '#ffc635',
+            borderRadius: [4, 4, 4, 4],
+            lineWidth: 2,
+        },
+        {
+            color: '#ff5722',
+            borderRadius: [4, 4, 4, 4],
+            lineWidth: 2,
+        },
+        {
+            color: '#f44336',
+            borderRadius: [4, 4, 4, 4],
+            lineWidth: 2,
+        },
+    ],
+    legend: {
+        textColor: '#666666',
+        fontSize: 12,
+        backgroundColor: '#00000000',
+    },
+};
+export const DARK_THEME = extendChartTheme(LIGHT_THEME, {
+    axis: {
+        x: {
+            lineColor: '#FFFFFF',
+            labelColor: '#FFFFFF',
+            tickLabelColor: '#FFFFFF',
+            tickColor: '#FFFFFF',
+            splitLineColor: '#DDDDDD',
+        },
+        y: {
+            lineColor: '#FFFFFF',
+            labelColor: '#FFFFFF',
+            tickLabelColor: '#FFFFFF',
+            tickColor: '#FFFFFF',
+            splitLineColor: '#DDDDDD',
+        },
+        r: {
+            lineColor: '#FFFFFF',
+            labelColor: '#FFFFFF',
+            tickLabelColor: '#FFFFFF',
+            tickColor: '#FFFFFF',
+            splitLineColor: '#DDDDDD',
+        },
+    },
+    grid: {
+        x: {
+            lineColor: '#FFFFFF',
+        },
+        y: {
+            lineColor: '#FFFFFF',
+        },
+        r: {
+            lineColor: '#FFFFFF',
+        },
+    },
+    legend: {
+        textColor: '#FFFFFF',
+        backgroundColor: '#00000000',
+    },
+    tooltip: {
+        backgroundColor: '#151718',
+        labelColor: '#FFFFFF',
+        valueColor: '#FFFFFF',
+        borderColor: '#FFFFFF',
+        borderWidth: 1,
+        borderRadius: 5,
+        padding: 2,
+    },
+});
+/**
+ * React context for chart theming.
+ * Allows chart components to access the current theme configuration.
+ * Undefined when used outside of a ChartThemeProvider.
+ */
+const ChartThemeContext = createContext(undefined);
+/**
+ * Hook to access and optionally extend the chart theme.
+ * Merges the theme from context (if available) with any local theme overrides.
+ * The local theme parameter takes precedence over the context theme.
+ *
+ * @param theme - Optional partial theme to merge with the context theme
+ * @returns ChartThemeContextType with the merged theme
+ *
+ * @example
+ * ```tsx
+ * const { theme } = useChartTheme({ tooltip: { backgroundColor: '#000' } });
+ * ```
+ */
+export const useChartTheme = (theme, colors) => {
+    const context = useContext(ChartThemeContext);
+    const prepareMergedThemeContext = useCallback(() => {
+        const mergedTheme = mergeThemes(context?.theme || LIGHT_THEME, theme || {});
+        return {
+            theme: mergedTheme
+        };
+    }, [context?.theme, theme]);
+    const [mergedThemeContext, setMergedThemeContext] = useState(prepareMergedThemeContext);
+    useEffect(() => {
+        setMergedThemeContext(prepareMergedThemeContext);
+    }, [theme, context?.theme]);
+    useEffect(() => {
+        if (colors) {
+            setMergedThemeContext({
+                theme: mergeThemes(mergedThemeContext.theme, { series: mergedThemeContext.theme.series
+                        .map((item, index) => ({
+                        ...item,
+                        color: colors[index] || item.color
+                    }))
+                })
+            });
+        }
+    }, [colors]);
+    return mergedThemeContext;
+};
+/**
+ * Provider component that supplies chart theme configuration to child components.
+ * Supports nested providers - child providers will merge their theme with the parent theme.
+ * The parent theme serves as the base, and the current provider's theme overrides it.
+ *
+ * @example
+ * ```tsx
+ * <ChartThemeProvider theme={{ tooltip: { backgroundColor: '#000' } }}>
+ *   <MyChart />
+ * </ChartThemeProvider>
+ * ```
+ */
+export const ChartThemeProvider = (props) => {
+    const context = useContext(ChartThemeContext);
+    const parentTheme = context?.theme || LIGHT_THEME;
+    const contextValue = useMemo(() => {
+        return {
+            theme: mergeThemes(parentTheme, props.theme || {})
+        };
+    }, [parentTheme, props.theme]);
+    return (<ChartThemeContext.Provider value={contextValue}>
+      {props.children}
+    </ChartThemeContext.Provider>);
+};
+/**
+ * Higher-order component (HOC) that wraps a component with ChartThemeProvider.
+ * Allows passing a theme prop directly to a component, which will be applied
+ * to that component and its children.
+ *
+ * @param Component - The component to wrap with theme provider
+ * @returns A new component that accepts an optional theme prop
+ *
+ * @example
+ * ```tsx
+ * const ThemedChart = withChartTheme(MyChart);
+ * <ThemedChart theme={{ tooltip: { backgroundColor: '#000' } }} />
+ * ```
+ */
+export const withChartTheme = (Component) => {
+    return (props) => {
+        return (<ChartThemeProvider theme={props.theme}>
+        <Component {...props}/>
+      </ChartThemeProvider>);
+    };
+};

package/column/column-chart.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnChartProps } from './column-chart.props';
+import React from 'react';
+/** common -> cartesian -> column */
+export type { ColumnChartProps } from './column-chart.props';
+export declare const ColumnChart: ((props: ColumnChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=column-chart.d.ts.map

package/column/column-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/column/column-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA6jB7D,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}