@impulse-ui-native/charts 2.1.0 → 2.2.0

package/README.md

@@ -1,14 +1,58 @@
 # @impulse-ui-native/charts
 
-The workspace package reserved for Impulse UI Native chart components and chart primitives.
+Skia-rendered chart components and primitives for Impulse UI Native.
 
-## Status
+## Components
 
-This package is currently under development. It declares D3 scale, shape, interpolation, array, and time utilities plus React Native Skia as its rendering peer, but it does not currently expose a public component or type from the package root.
+The package provides Skia-rendered `LineChart`, `MultiLineChart`, `BarChart`, and `MultiBarChart` components. Charts fill their parent, so give the surrounding view an explicit height.
 
-Do not depend on `@impulse-ui-native/charts` for application code until its first public exports are added and documented here.
+```tsx
+import { BarChart } from "@impulse-ui-native/charts";
 
-## Planned scope
+<BarChart
+  data={[
+    { x: "Jan", y: 18 },
+    { x: "Feb", y: 24 },
+    { x: "Mar", y: 16 },
+  ]}
+  insets={{ left: 40, bottom: 28 }}
+  bar={{ color: "#6366f1", radius: 4 }}
+/>;
+```
+
+Use `MultiBarChart` for grouped series. Categories are shared across the series, and each series can supply its own bar style.
+
+```tsx
+import { MultiBarChart } from "@impulse-ui-native/charts";
+
+<MultiBarChart
+  series={[
+    {
+      id: "revenue",
+      data: [
+        { x: "Jan", y: 18 },
+        { x: "Feb", y: 24 },
+      ],
+    },
+    {
+      id: "cost",
+      data: [
+        { x: "Jan", y: 12 },
+        { x: "Feb", y: 15 },
+      ],
+    },
+  ]}
+  categoryPadding={0.2}
+  seriesPadding={0.1}
+  insets={{ left: 40, bottom: 28 }}
+/>;
+```
+
+Bar charts support string, number, and `Date` categories, nullable values, positive and negative values, custom Y domains, axes, and grid styling. Inferred Y domains include zero.
+
+`categoryPadding` and `seriesPadding` are ratios clamped between `0` and `1`. Multi-series bars use the theme's chart palette unless a series supplies `bar.color`.
+
+## Scope
 
 - Token-aware chart primitives for React Native.
 - Skia-based rendering.
@@ -17,4 +61,4 @@ Do not depend on `@impulse-ui-native/charts` for application code until its firs
 
 ## Native prerequisite
 
-Future chart APIs will require `@shopify/react-native-skia` version 2 or newer. Follow Skia's platform setup instructions before using those APIs once they are available.
+Chart APIs require `@shopify/react-native-skia` version 2 or newer. Follow Skia's platform setup instructions before using them.

package/dist/components/bar-chart-body.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppTheme } from '@impulse-ui-native/theme';
+import { ChartSize } from '../types/common.types.mjs';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { BarChartProps } from '../types/bar-chart.types.mjs';
+import '../types/style.types.mjs';
+import '@shopify/react-native-skia';
+
+interface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {
+    size: ChartSize;
+    theme: AppTheme;
+}
+declare const BarChartBody: <X extends ChartXValue = string>(props: BarChartBodyProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { BarChartBody };

package/dist/components/bar-chart-body.js

@@ -0,0 +1,50 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { useBarChart, useChartLayout } from "../hooks";
+import { ChartAxes } from "./chart-axes";
+import { Bar } from "./primitives";
+const BarChartBody = memo(function BarChartBodyComponent(props) {
+  const {
+    bar,
+    categoryPadding,
+    data,
+    fontManager,
+    grid,
+    insets,
+    size,
+    theme,
+    xAxis,
+    yAxis
+  } = props;
+  const layout = useChartLayout(size, insets);
+  const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({
+    categoryPadding,
+    data,
+    plot: layout.plot,
+    xAxis,
+    yAxis
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ChartAxes,
+      {
+        fontManager,
+        grid,
+        layout,
+        theme,
+        xAxis,
+        xScale,
+        xTicks,
+        yAxis,
+        yScale,
+        yTicks
+      }
+    ),
+    /* @__PURE__ */ jsx(Group, { clip: layout.plot, children: /* @__PURE__ */ jsx(Bar, { coordinates, ...bar }) })
+  ] });
+});
+export {
+  BarChartBody
+};
+//# sourceMappingURL=bar-chart-body.js.map

package/dist/components/bar-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/bar-chart-body.tsx"],"sourcesContent":["import { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useBarChart, useChartLayout } from \"../hooks\";\nimport { BarChartProps, ChartSize, ChartXValue } from \"../types\";\nimport { ChartAxes } from \"./chart-axes\";\nimport { Bar } from \"./primitives\";\n\ninterface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const BarChartBody = memo(function BarChartBodyComponent<\n  X extends ChartXValue = string,\n>(props: BarChartBodyProps<X>) {\n  const {\n    bar,\n    categoryPadding,\n    data,\n    fontManager,\n    grid,\n    insets,\n    size,\n    theme,\n    xAxis,\n    yAxis,\n  } = props;\n  const layout = useChartLayout(size, insets);\n  const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({\n    categoryPadding,\n    data,\n    plot: layout.plot,\n    xAxis,\n    yAxis,\n  });\n\n  return (\n    <>\n      <ChartAxes\n        fontManager={fontManager}\n        grid={grid}\n        layout={layout}\n        theme={theme}\n        xAxis={xAxis}\n        xScale={xScale}\n        xTicks={xTicks}\n        yAxis={yAxis}\n        yScale={yScale}\n        yTicks={yTicks}\n      />\n\n      <Group clip={layout.plot}>\n        <Bar coordinates={coordinates} {...bar} />\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AAwCI,mBACE,KADF;AAxCJ,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,aAAa,sBAAsB;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAOb,MAAM,eAAe,KAAK,SAAS,sBAExC,OAA6B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,YAAY;AAAA,IAClE;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,OAAI,aAA2B,GAAG,KAAK,GAC1C;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/bar-chart.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { BarChartProps } from '../types/bar-chart.types.mjs';
+import '@shopify/react-native-skia';
+import '../types/common.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+
+declare const BarChart: <X extends ChartXValue = string>(props: BarChartProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { BarChart };

package/dist/components/bar-chart.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { Canvas } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { useTheme } from "@impulse-ui-native/theme";
+import { useChartCanvas } from "../hooks";
+import { BarChartBody } from "./bar-chart-body";
+const BarChart = memo(function BarChart2(props) {
+  const theme = useTheme();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(BarChartBody, { ...props, size, theme }) });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export {
+  BarChart
+};
+//# sourceMappingURL=bar-chart.js.map

package/dist/components/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { BarChartProps, ChartXValue } from \"../types\";\nimport { BarChartBody } from \"./bar-chart-body\";\n\nexport const BarChart = memo(function BarChart<X extends ChartXValue = string>(\n  props: BarChartProps<X>,\n) {\n  const theme = useTheme();\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <BarChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAEtB,MAAM,WAAW,KAAK,SAASA,UACpC,OACA;AACA,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,gBAAc,GAAG,OAAO,MAAY,OAAc,GACrD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["BarChart"]}

package/dist/components/chart-axes.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SkTypefaceFontProvider } from '@shopify/react-native-skia';
+import { AppTheme } from '@impulse-ui-native/theme';
+import { ChartLayout, ChartXAxisOptions, ChartYAxisOptions } from '../types/common.types.mjs';
+import { b as ChartXValue, a as ChartGridOptions, h as LineChartScale } from '../line-chart.types-yxru5uWc.mjs';
+import '../types/style.types.mjs';
+
+interface ChartAxesProps<X extends ChartXValue> {
+    fontManager?: SkTypefaceFontProvider;
+    grid?: ChartGridOptions;
+    layout: ChartLayout;
+    theme: AppTheme;
+    xAxis?: ChartXAxisOptions<X>;
+    xScale: LineChartScale<X>;
+    xTicks: readonly X[];
+    yAxis?: ChartYAxisOptions;
+    yScale: LineChartScale<number>;
+    yTicks: readonly number[];
+}
+declare const ChartAxes: <X extends ChartXValue = number>(props: ChartAxesProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { ChartAxes };

package/dist/components/chart-axes.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "@impulse-ui-native/core";
+import { Grid, XAxis, YAxis } from "./primitives";
+const ChartAxes = memo(function ChartAxes2(props) {
+  const {
+    fontManager,
+    grid,
+    layout,
+    theme,
+    xAxis,
+    xScale,
+    xTicks,
+    yAxis,
+    yScale,
+    yTicks
+  } = props;
+  const isGridStyle = grid !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isGridStyle ? /* @__PURE__ */ jsx(
+      Grid,
+      {
+        options: grid,
+        plot: layout.plot,
+        theme,
+        xTicks,
+        xScale,
+        yTicks,
+        yScale
+      }
+    ) : null,
+    xAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        ticks: xTicks,
+        scale: xScale,
+        plot: layout.plot,
+        region: layout.xAxis,
+        theme,
+        options: xAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    yAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        ticks: yTicks,
+        scale: yScale,
+        plot: layout.plot,
+        region: layout.yAxis,
+        theme,
+        options: yAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null
+  ] });
+});
+export {
+  ChartAxes
+};
+//# sourceMappingURL=chart-axes.js.map

package/dist/components/chart-axes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chart-axes.tsx"],"sourcesContent":["import { SkTypefaceFontProvider } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport {\n  ChartGridOptions,\n  ChartLayout,\n  ChartXAxisOptions,\n  ChartXValue,\n  ChartYAxisOptions,\n  LineChartScale,\n} from \"../types\";\nimport { Grid, XAxis, YAxis } from \"./primitives\";\n\ninterface ChartAxesProps<X extends ChartXValue> {\n  fontManager?: SkTypefaceFontProvider;\n  grid?: ChartGridOptions;\n  layout: ChartLayout;\n  theme: AppTheme;\n  xAxis?: ChartXAxisOptions<X>;\n  xScale: LineChartScale<X>;\n  xTicks: readonly X[];\n  yAxis?: ChartYAxisOptions;\n  yScale: LineChartScale<number>;\n  yTicks: readonly number[];\n}\n\nexport const ChartAxes = memo(function ChartAxes<\n  X extends ChartXValue = number,\n>(props: ChartAxesProps<X>) {\n  const {\n    fontManager,\n    grid,\n    layout,\n    theme,\n    xAxis,\n    xScale,\n    xTicks,\n    yAxis,\n    yScale,\n    yTicks,\n  } = props;\n  const isGridStyle = grid !== undefined;\n\n  return (\n    <>\n      {isGridStyle ? (\n        <Grid\n          options={grid}\n          plot={layout.plot}\n          theme={theme}\n          xTicks={xTicks}\n          xScale={xScale}\n          yTicks={yTicks}\n          yScale={yScale}\n        />\n      ) : null}\n\n      {xAxis?.visible !== false ? (\n        <XAxis\n          ticks={xTicks}\n          scale={xScale}\n          plot={layout.plot}\n          region={layout.xAxis}\n          theme={theme}\n          options={xAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      {yAxis?.visible !== false ? (\n        <YAxis\n          ticks={yTicks}\n          scale={yScale}\n          plot={layout.plot}\n          region={layout.yAxis}\n          theme={theme}\n          options={yAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n    </>\n  );\n});\n"],"mappings":"AA8CI,mBAEI,KAFJ;AA5CJ,SAAS,YAAY;AAWrB,SAAS,MAAM,OAAO,aAAa;AAe5B,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,KACN;AAEJ,CAAC;","names":["ChartAxes"]}

package/dist/components/index.d.mts

@@ -0,0 +1,23 @@
+export { Bar } from './primitives/bar.mjs';
+export { Grid } from './primitives/grid.mjs';
+export { Label } from './primitives/label.mjs';
+export { Line } from './primitives/line.mjs';
+export { XAxis } from './primitives/x-axis.mjs';
+export { YAxis } from './primitives/y-axis.mjs';
+export { BarChart } from './bar-chart.mjs';
+export { LineChart } from './line-chart.mjs';
+export { MultiBarChart } from './multi-bar-chart.mjs';
+export { MultiLineChart } from './multi-line-chart.mjs';
+import 'react/jsx-runtime';
+import '../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../types/common.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+import '../types/bar.types.mjs';
+import '../types/bar-chart.types.mjs';
+import '../types/label.types.mjs';
+import '../types/line.types.mjs';
+import '../types/axis.types.mjs';
+import '../types/multi-bar-chart.types.mjs';
+import '../types/multi-line-chart.types.mjs';

package/dist/components/index.js

@@ -0,0 +1,12 @@
+export * from "./primitives";
+import { BarChart } from "./bar-chart";
+import { LineChart } from "./line-chart";
+import { MultiBarChart } from "./multi-bar-chart";
+import { MultiLineChart } from "./multi-line-chart";
+export {
+  BarChart,
+  LineChart,
+  MultiBarChart,
+  MultiLineChart
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\nexport { BarChart } from \"./bar-chart\";\nexport { LineChart } from \"./line-chart\";\nexport { MultiBarChart } from \"./multi-bar-chart\";\nexport { MultiLineChart } from \"./multi-line-chart\";\n"],"mappings":"AAAA,cAAc;AACd,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;","names":[]}

package/dist/components/line-chart-body.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppTheme } from '@impulse-ui-native/theme';
+import { ChartSize } from '../types/common.types.mjs';
+import { b as ChartXValue, g as LineChartProps } from '../line-chart.types-yxru5uWc.mjs';
+import '../types/style.types.mjs';
+import '@shopify/react-native-skia';
+
+interface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {
+    size: ChartSize;
+    theme: AppTheme;
+}
+declare const LineChartBody: <X extends ChartXValue = number>(props: LineChartBodyProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { LineChartBody };

package/dist/components/line-chart-body.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Group } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { LineDefaultWidth } from "../constants";
+import { useChartLayout, useLineChart } from "../hooks";
+import { createInsetRect, fitLineCoordinatesToRect } from "../utils";
+import { Grid, Line, XAxis, YAxis } from "./primitives";
+const LineChartBody = memo(function LineChartBodyComponent(props) {
+  const {
+    data,
+    fontManager,
+    grid,
+    insets,
+    line,
+    size,
+    theme,
+    xAxis,
+    xScaleType,
+    yAxis
+  } = props;
+  const layout = useChartLayout(size, insets);
+  const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({
+    data,
+    plot: layout.plot,
+    xAxis,
+    xScaleType,
+    yAxis
+  });
+  const linePlot = useMemo(
+    () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),
+    [layout.plot, line?.width]
+  );
+  const lineCoordinates = useMemo(
+    () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),
+    [coordinates, layout.plot, linePlot]
+  );
+  const isGridStyle = grid !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isGridStyle ? /* @__PURE__ */ jsx(
+      Grid,
+      {
+        options: grid,
+        plot: layout.plot,
+        theme,
+        xTicks,
+        xScale,
+        yTicks,
+        yScale
+      }
+    ) : null,
+    xAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        ticks: xTicks,
+        scale: xScale,
+        plot: layout.plot,
+        region: layout.xAxis,
+        theme,
+        options: xAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    yAxis?.visible !== false ? /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        ticks: yTicks,
+        scale: yScale,
+        plot: layout.plot,
+        region: layout.yAxis,
+        theme,
+        options: yAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Group, { clip: layout.plot, children: /* @__PURE__ */ jsx(Line, { coordinates: lineCoordinates, ...line }) })
+  ] });
+});
+export {
+  LineChartBody
+};
+//# sourceMappingURL=line-chart-body.js.map

package/dist/components/line-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { LineDefaultWidth } from \"../constants\";\nimport { useChartLayout, useLineChart } from \"../hooks\";\nimport { ChartSize, ChartXValue, LineChartProps } from \"../types\";\nimport { createInsetRect, fitLineCoordinatesToRect } from \"../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"./primitives\";\n\ninterface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const LineChartBody = memo(function LineChartBodyComponent<\n  X extends ChartXValue = number,\n>(props: LineChartBodyProps<X>) {\n  const {\n    data,\n    fontManager,\n    grid,\n    insets,\n    line,\n    size,\n    theme,\n    xAxis,\n    xScaleType,\n    yAxis,\n  } = props;\n\n  const layout = useChartLayout(size, insets);\n\n  const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({\n    data,\n    plot: layout.plot,\n    xAxis,\n    xScaleType,\n    yAxis,\n  });\n\n  const linePlot = useMemo(\n    () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),\n    [layout.plot, line?.width],\n  );\n\n  const lineCoordinates = useMemo(\n    () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),\n    [coordinates, layout.plot, linePlot],\n  );\n\n  const isGridStyle = grid !== undefined;\n\n  return (\n    <>\n      {isGridStyle ? (\n        <Grid\n          options={grid}\n          plot={layout.plot}\n          theme={theme}\n          xTicks={xTicks}\n          xScale={xScale}\n          yTicks={yTicks}\n          yScale={yScale}\n        />\n      ) : null}\n\n      {xAxis?.visible !== false ? (\n        <XAxis\n          ticks={xTicks}\n          scale={xScale}\n          plot={layout.plot}\n          region={layout.xAxis}\n          theme={theme}\n          options={xAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      {yAxis?.visible !== false ? (\n        <YAxis\n          ticks={yTicks}\n          scale={yScale}\n          plot={layout.plot}\n          region={layout.yAxis}\n          theme={theme}\n          options={yAxis}\n          fontManager={fontManager}\n          lineVisible={!isGridStyle}\n          tickVisible={!isGridStyle}\n        />\n      ) : null}\n\n      <Group clip={layout.plot}>\n        <Line coordinates={lineCoordinates} {...line} />\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,oBAAoB;AAE7C,SAAS,iBAAiB,gCAAgC;AAC1D,SAAS,MAAM,MAAM,OAAO,aAAa;AAOlC,MAAM,gBAAgB,KAAK,SAAS,uBAEzC,OAA8B;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAE1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,aAAa;AAAA,IACnE;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW;AAAA,IACf,MAAM,gBAAgB,OAAO,OAAO,MAAM,SAAS,oBAAoB,CAAC;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,KAAK;AAAA,EAC3B;AAEA,QAAM,kBAAkB;AAAA,IACtB,MAAM,yBAAyB,aAAa,OAAO,MAAM,QAAQ;AAAA,IACjE,CAAC,aAAa,OAAO,MAAM,QAAQ;AAAA,EACrC;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,QAAK,aAAa,iBAAkB,GAAG,MAAM,GAChD;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/line-chart.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue, g as LineChartProps } from '../line-chart.types-yxru5uWc.mjs';
+import '@shopify/react-native-skia';
+import '../types/common.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+
+declare const LineChart: <X extends ChartXValue = number>(props: LineChartProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { LineChart };

package/dist/components/line-chart.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { Canvas } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { useTheme } from "@impulse-ui-native/theme";
+import { useChartCanvas } from "../hooks";
+import { LineChartBody } from "./line-chart-body";
+const LineChart = memo(function LineChart2(props) {
+  const theme = useTheme();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(LineChartBody, { ...props, size, theme }) });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export {
+  LineChart
+};
+//# sourceMappingURL=line-chart.js.map

package/dist/components/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { ChartXValue, LineChartProps } from \"../types\";\nimport { LineChartBody } from \"./line-chart-body\";\n\nexport const LineChart = memo(function LineChart<\n  X extends ChartXValue = number,\n>(props: LineChartProps<X>) {\n  const theme = useTheme();\n\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <LineChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAmBM;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAEvB,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,iBAAe,GAAG,OAAO,MAAY,OAAc,GACtD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["LineChart"]}

package/dist/components/multi-bar-chart-body.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppTheme } from '@impulse-ui-native/theme';
+import { ChartSize } from '../types/common.types.mjs';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { MultiBarChartProps } from '../types/multi-bar-chart.types.mjs';
+import '../types/style.types.mjs';
+import '@shopify/react-native-skia';
+import '../types/bar-chart.types.mjs';
+
+interface MultiBarChartBodyProps<X extends ChartXValue> extends MultiBarChartProps<X> {
+    size: ChartSize;
+    theme: AppTheme;
+}
+declare const MultiBarChartBody: <X extends ChartXValue = string>(props: MultiBarChartBodyProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { MultiBarChartBody };

package/dist/components/multi-bar-chart-body.js

@@ -0,0 +1,72 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Group } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { useChartLayout, useMultiBarChart } from "../hooks";
+import { createDrawableMultiBarChartSeries } from "../utils";
+import { ChartAxes } from "./chart-axes";
+import { Bar } from "./primitives";
+const MultiBarChartBody = memo(function MultiBarChartBodyComponent(props) {
+  const {
+    categoryPadding,
+    fontManager,
+    grid,
+    insets,
+    series,
+    seriesPadding,
+    size,
+    theme,
+    xAxis,
+    yAxis
+  } = props;
+  const layout = useChartLayout(size, insets);
+  const {
+    series: seriesModels,
+    xScale,
+    xTicks,
+    yScale,
+    yTicks
+  } = useMultiBarChart({
+    categoryPadding,
+    plot: layout.plot,
+    series,
+    seriesPadding,
+    xAxis,
+    yAxis
+  });
+  const drawableSeries = useMemo(
+    () => seriesModels.map(
+      (currentSeries, index) => createDrawableMultiBarChartSeries(currentSeries, index)
+    ),
+    [seriesModels]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ChartAxes,
+      {
+        fontManager,
+        grid,
+        layout,
+        theme,
+        xAxis,
+        xScale,
+        xTicks,
+        yAxis,
+        yScale,
+        yTicks
+      }
+    ),
+    /* @__PURE__ */ jsx(Group, { clip: layout.plot, children: drawableSeries.map((currentSeries) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        coordinates: currentSeries.coordinates,
+        ...currentSeries.bar
+      },
+      currentSeries.id
+    )) })
+  ] });
+});
+export {
+  MultiBarChartBody
+};
+//# sourceMappingURL=multi-bar-chart-body.js.map

package/dist/components/multi-bar-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/multi-bar-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartLayout, useMultiBarChart } from \"../hooks\";\nimport { ChartSize, ChartXValue, MultiBarChartProps } from \"../types\";\nimport { createDrawableMultiBarChartSeries } from \"../utils\";\nimport { ChartAxes } from \"./chart-axes\";\nimport { Bar } from \"./primitives\";\n\ninterface MultiBarChartBodyProps<\n  X extends ChartXValue,\n> extends MultiBarChartProps<X> {\n  size: ChartSize;\n  theme: AppTheme;\n}\n\nexport const MultiBarChartBody = memo(function MultiBarChartBodyComponent<\n  X extends ChartXValue = string,\n>(props: MultiBarChartBodyProps<X>) {\n  const {\n    categoryPadding,\n    fontManager,\n    grid,\n    insets,\n    series,\n    seriesPadding,\n    size,\n    theme,\n    xAxis,\n    yAxis,\n  } = props;\n  const layout = useChartLayout(size, insets);\n  const {\n    series: seriesModels,\n    xScale,\n    xTicks,\n    yScale,\n    yTicks,\n  } = useMultiBarChart({\n    categoryPadding,\n    plot: layout.plot,\n    series,\n    seriesPadding,\n    xAxis,\n    yAxis,\n  });\n  const drawableSeries = useMemo(\n    () =>\n      seriesModels.map((currentSeries, index) =>\n        createDrawableMultiBarChartSeries(currentSeries, index),\n      ),\n    [seriesModels],\n  );\n\n  return (\n    <>\n      <ChartAxes\n        fontManager={fontManager}\n        grid={grid}\n        layout={layout}\n        theme={theme}\n        xAxis={xAxis}\n        xScale={xScale}\n        xTicks={xTicks}\n        yAxis={yAxis}\n        yScale={yScale}\n        yTicks={yTicks}\n      />\n\n      <Group clip={layout.plot}>\n        {drawableSeries.map((currentSeries) => (\n          <Bar\n            key={currentSeries.id}\n            coordinates={currentSeries.coordinates}\n            {...currentSeries.bar}\n          />\n        ))}\n      </Group>\n    </>\n  );\n});\n"],"mappings":"AA0DI,mBACE,KADF;AA1DJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,gBAAgB,wBAAwB;AAEjD,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AASb,MAAM,oBAAoB,KAAK,SAAS,2BAE7C,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAAA,IACnB;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,kCAAkC,eAAe,KAAK;AAAA,IACxD;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/multi-bar-chart.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { MultiBarChartProps } from '../types/multi-bar-chart.types.mjs';
+import '@shopify/react-native-skia';
+import '../types/common.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+import '../types/bar-chart.types.mjs';
+
+declare const MultiBarChart: <X extends ChartXValue = string>(props: MultiBarChartProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { MultiBarChart };

package/dist/components/multi-bar-chart.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { Canvas } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+import { useTheme } from "@impulse-ui-native/theme";
+import { useChartCanvas } from "../hooks";
+import { MultiBarChartBody } from "./multi-bar-chart-body";
+const MultiBarChart = memo(function MultiBarChart2(props) {
+  const theme = useTheme();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(MultiBarChartBody, { ...props, size, theme }) });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export {
+  MultiBarChart
+};
+//# sourceMappingURL=multi-bar-chart.js.map

package/dist/components/multi-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/multi-bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { ChartXValue, MultiBarChartProps } from \"../types\";\nimport { MultiBarChartBody } from \"./multi-bar-chart-body\";\n\nexport const MultiBarChart = memo(function MultiBarChart<\n  X extends ChartXValue = string,\n>(props: MultiBarChartProps<X>) {\n  const theme = useTheme();\n  const { ref, size } = useChartCanvas();\n\n  return (\n    <Canvas ref={ref} style={styles.container}>\n      <MultiBarChartBody {...props} size={size} theme={theme} />\n    </Canvas>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,KAAK,SAASA,eAEzC,OAA8B;AAC9B,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,qBAAmB,GAAG,OAAO,MAAY,OAAc,GAC1D;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiBarChart"]}

package/dist/components/multi-line-chart-body.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { MultiLineChartBodyProps } from '../types/multi-line-chart.types.mjs';
+import '@shopify/react-native-skia';
+import '../types/common.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+
+declare const MultiLineChartBody: <X extends ChartXValue = number>(props: MultiLineChartBodyProps<X>) => react_jsx_runtime.JSX.Element;
+
+export { MultiLineChartBody };