@impulse-ui-native/charts 2.1.1 → 2.3.0

package/README.md

@@ -1,14 +1,105 @@
 # @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`, `MultiBarChart`, `PieChart`, and `MultiPieChart` 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`.
+
+Use `PieChart` for pies and donuts. Slice values must be positive finite numbers; invalid, zero, and negative values are ignored. Colors follow the chart palette unless a datum supplies `color`.
+
+```tsx
+import { PieChart } from "@impulse-ui-native/charts";
+
+<PieChart
+  data={[
+    { id: "mobile", value: 46 },
+    { id: "desktop", value: 34 },
+    { id: "tablet", value: 20 },
+  ]}
+  innerRadius={0.5}
+  outerRadius={0.9}
+  padAngle={2}
+  slice={{ cornerRadius: 4, strokeColor: "#fff", strokeWidth: 2 }}
+/>;
+```
+
+`innerRadius` and `outerRadius` are ratios of the available radius and are clamped between `0` and `1`. Angles use degrees, measured clockwise from 12 o'clock. The defaults render a complete circle from `0` through `360` degrees.
+
+Use `MultiPieChart` for independently normalized concentric series. The first series is the outermost ring, and angular padding keeps a consistent visual width across all rings.
+
+```tsx
+import { MultiPieChart } from "@impulse-ui-native/charts";
+
+<MultiPieChart
+  series={[
+    {
+      id: "current",
+      data: [
+        { id: "organic", value: 42 },
+        { id: "paid", value: 33 },
+      ],
+    },
+    {
+      id: "previous",
+      data: [
+        { id: "organic", value: 36 },
+        { id: "paid", value: 29 },
+      ],
+    },
+  ]}
+  innerRadius={0.25}
+  ringPadding={4}
+/>;
+```
+
+## Scope
 
 - Token-aware chart primitives for React Native.
 - Skia-based rendering.
@@ -17,4 +108,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/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/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/bar-chart-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/bar-chart/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/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/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/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/bar-chart/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/bar-chart/index.d.mts

@@ -0,0 +1,8 @@
+export { BarChart } from './bar-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-chart.types.mjs';

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

@@ -0,0 +1,5 @@
+import { BarChart } from "./bar-chart";
+export {
+  BarChart
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/bar-chart/index.ts"],"sourcesContent":["export { BarChart } from \"./bar-chart\";\n"],"mappings":"AAAA,SAAS,gBAAgB;","names":[]}

package/dist/components/chart-axes/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/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/chart-axes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/chart-axes/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/chart-axes/index.d.mts

@@ -0,0 +1,7 @@
+export { ChartAxes } from './chart-axes.mjs';
+import 'react/jsx-runtime';
+import '@shopify/react-native-skia';
+import '@impulse-ui-native/theme';
+import '../../types/common.types.mjs';
+import '../../types/style.types.mjs';
+import '../../line-chart.types-yxru5uWc.mjs';

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

@@ -0,0 +1,5 @@
+import { ChartAxes } from "./chart-axes";
+export {
+  ChartAxes
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/chart-axes/index.ts"],"sourcesContent":["export { ChartAxes } from \"./chart-axes\";\n"],"mappings":"AAAA,SAAS,iBAAiB;","names":[]}

package/dist/components/index.d.mts

@@ -1,17 +1,29 @@
+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 { Pie } from './primitives/pie.mjs';
 export { XAxis } from './primitives/x-axis.mjs';
 export { YAxis } from './primitives/y-axis.mjs';
-export { LineChart } from './line-chart.mjs';
-export { MultiLineChart } from './multi-line-chart.mjs';
+export { BarChart } from './bar-chart/bar-chart.mjs';
+export { LineChart } from './line-chart/line-chart.mjs';
+export { MultiBarChart } from './multi-bar-chart/multi-bar-chart.mjs';
+export { MultiLineChart } from './multi-line-chart/multi-line-chart.mjs';
+export { MultiPieChart } from './multi-pie-chart/multi-pie-chart.mjs';
+export { PieChart } from './pie-chart/pie-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/pie.types.mjs';
+import '../types/pie-chart.types.mjs';
 import '../types/axis.types.mjs';
+import '../types/multi-bar-chart.types.mjs';
 import '../types/multi-line-chart.types.mjs';
+import '../types/multi-pie-chart.types.mjs';

package/dist/components/index.js

@@ -1,8 +1,16 @@
 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";
+import { MultiPieChart } from "./multi-pie-chart";
+import { PieChart } from "./pie-chart";
 export {
+  BarChart,
   LineChart,
-  MultiLineChart
+  MultiBarChart,
+  MultiLineChart,
+  MultiPieChart,
+  PieChart
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\nexport { LineChart } from \"./line-chart\";\nexport { MultiLineChart } from \"./multi-line-chart\";\n"],"mappings":"AAAA,cAAc;AACd,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;","names":[]}
+{"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\";\nexport { MultiPieChart } from \"./multi-pie-chart\";\nexport { PieChart } from \"./pie-chart\";\n"],"mappings":"AAAA,cAAc;AACd,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;","names":[]}

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

@@ -0,0 +1,7 @@
+export { LineChart } from './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';

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

@@ -0,0 +1,5 @@
+import { LineChart } from "./line-chart";
+export {
+  LineChart
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/index.ts"],"sourcesContent":["export { LineChart } from \"./line-chart\";\n"],"mappings":"AAAA,SAAS,iBAAiB;","names":[]}

package/dist/components/{line-chart-body.d.mts → line-chart/line-chart-body.d.mts}

@@ -1,8 +1,8 @@
 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 { 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> {

package/dist/components/{line-chart-body.js → line-chart/line-chart-body.js}

@@ -2,14 +2,10 @@ 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 { useLineChart } from "../hooks";
-import {
-  createChartLayout,
-  createInsetRect,
-  fitLineCoordinatesToRect
-} from "../utils";
-import { Grid, Line, XAxis, YAxis } from "./primitives";
+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,
@@ -23,7 +19,7 @@ const LineChartBody = memo(function LineChartBodyComponent(props) {
     xScaleType,
     yAxis
   } = props;
-  const layout = useMemo(() => createChartLayout(size, insets), [insets, size]);
+  const layout = useChartLayout(size, insets);
   const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({
     data,
     plot: layout.plot,

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/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 → line-chart/line-chart.d.mts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ChartXValue, g as LineChartProps } from '../line-chart.types-yxru5uWc.mjs';
+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 '../../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;

package/dist/components/{line-chart.js → line-chart/line-chart.js}

@@ -3,7 +3,7 @@ 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 { useChartCanvas } from "../../hooks";
 import { LineChartBody } from "./line-chart-body";
 const LineChart = memo(function LineChart2(props) {
   const theme = useTheme();

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/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/index.d.mts

@@ -0,0 +1,9 @@
+export { MultiBarChart } from './multi-bar-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/multi-bar-chart.types.mjs';
+import '../../types/bar-chart.types.mjs';

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

@@ -0,0 +1,5 @@
+import { MultiBarChart } from "./multi-bar-chart";
+export {
+  MultiBarChart
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/multi-bar-chart/index.ts"],"sourcesContent":["export { MultiBarChart } from \"./multi-bar-chart\";\n"],"mappings":"AAAA,SAAS,qBAAqB;","names":[]}

package/dist/components/multi-bar-chart/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/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