@impulse-ui-native/charts 2.1.0 → 2.2.0

package/dist/utils/index.js

@@ -0,0 +1,56 @@
+import {
+  createAxisTicks,
+  createXAxisLayout,
+  createXAxisLabelRect,
+  createYAxisLayout,
+  createYAxisLabelRect,
+  formatAxisTick
+} from "./axis.util";
+import {
+  createBarChartCoordinates,
+  createBarChartModel
+} from "./bar-chart.util";
+import { createChartLayout, createInsetRect } from "./chart-layout.util";
+import {
+  createHorizontalGridPath,
+  createVerticalGridPath,
+  resolveGridLineOptions
+} from "./grid.util";
+import { getLabelTextAlign, getLabelY } from "./label.util";
+import { createLinePath, fitLineCoordinatesToRect } from "./line.util";
+import {
+  createLineChartCoordinates,
+  createLineChartModel
+} from "./line-chart.util";
+import { createDrawableMultiLineChartSeries } from "./multi-line-chart.util";
+import {
+  createDrawableMultiBarChartSeries,
+  createMultiBarChartModel
+} from "./multi-bar-chart.util";
+import { createParagraphBuilder } from "./paragraph-builder.util";
+export {
+  createAxisTicks,
+  createBarChartCoordinates,
+  createBarChartModel,
+  createChartLayout,
+  createDrawableMultiBarChartSeries,
+  createDrawableMultiLineChartSeries,
+  createHorizontalGridPath,
+  createInsetRect,
+  createLineChartCoordinates,
+  createLineChartModel,
+  createLinePath,
+  createMultiBarChartModel,
+  createParagraphBuilder,
+  createVerticalGridPath,
+  createXAxisLabelRect,
+  createXAxisLayout,
+  createYAxisLabelRect,
+  createYAxisLayout,
+  fitLineCoordinatesToRect,
+  formatAxisTick,
+  getLabelTextAlign,
+  getLabelY,
+  resolveGridLineOptions
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export {\n  createAxisTicks,\n  createXAxisLayout,\n  createXAxisLabelRect,\n  createYAxisLayout,\n  createYAxisLabelRect,\n  formatAxisTick,\n} from \"./axis.util\";\nexport {\n  createBarChartCoordinates,\n  createBarChartModel,\n} from \"./bar-chart.util\";\nexport { createChartLayout, createInsetRect } from \"./chart-layout.util\";\nexport {\n  createHorizontalGridPath,\n  createVerticalGridPath,\n  resolveGridLineOptions,\n} from \"./grid.util\";\nexport { getLabelTextAlign, getLabelY } from \"./label.util\";\nexport { createLinePath, fitLineCoordinatesToRect } from \"./line.util\";\nexport {\n  createLineChartCoordinates,\n  createLineChartModel,\n} from \"./line-chart.util\";\nexport { createDrawableMultiLineChartSeries } from \"./multi-line-chart.util\";\nexport {\n  createDrawableMultiBarChartSeries,\n  createMultiBarChartModel,\n} from \"./multi-bar-chart.util\";\nexport { createParagraphBuilder } from \"./paragraph-builder.util\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,uBAAuB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,gBAAgB,gCAAgC;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0CAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;","names":[]}

package/dist/utils/label.util.d.mts

@@ -0,0 +1,10 @@
+import { TextAlign } from '@shopify/react-native-skia';
+import { ChartRect } from '../types/common.types.mjs';
+import { LabelHorizontalAlignment, LabelVerticalAlignment } from '../types/label.types.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+
+declare function getLabelTextAlign(alignment: LabelHorizontalAlignment): TextAlign;
+declare function getLabelY(rect: ChartRect, paragraphHeight: number, alignment: LabelVerticalAlignment): number;
+
+export { getLabelTextAlign, getLabelY };

package/dist/utils/label.util.js

@@ -0,0 +1,24 @@
+import { TextAlign } from "@shopify/react-native-skia";
+function getLabelTextAlign(alignment) {
+  if (alignment === "center") {
+    return TextAlign.Center;
+  }
+  if (alignment === "right") {
+    return TextAlign.Right;
+  }
+  return TextAlign.Left;
+}
+function getLabelY(rect, paragraphHeight, alignment) {
+  if (alignment === "center") {
+    return rect.y + (rect.height - paragraphHeight) / 2;
+  }
+  if (alignment === "bottom") {
+    return rect.y + rect.height - paragraphHeight;
+  }
+  return rect.y;
+}
+export {
+  getLabelTextAlign,
+  getLabelY
+};
+//# sourceMappingURL=label.util.js.map

package/dist/utils/label.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/label.util.ts"],"sourcesContent":["import { TextAlign } from \"@shopify/react-native-skia\";\n\nimport {\n  ChartRect,\n  LabelHorizontalAlignment,\n  LabelVerticalAlignment,\n} from \"../types\";\n\nexport function getLabelTextAlign(\n  alignment: LabelHorizontalAlignment,\n): TextAlign {\n  if (alignment === \"center\") {\n    return TextAlign.Center;\n  }\n\n  if (alignment === \"right\") {\n    return TextAlign.Right;\n  }\n\n  return TextAlign.Left;\n}\n\nexport function getLabelY(\n  rect: ChartRect,\n  paragraphHeight: number,\n  alignment: LabelVerticalAlignment,\n): number {\n  if (alignment === \"center\") {\n    return rect.y + (rect.height - paragraphHeight) / 2;\n  }\n\n  if (alignment === \"bottom\") {\n    return rect.y + rect.height - paragraphHeight;\n  }\n\n  return rect.y;\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAQnB,SAAS,kBACd,WACW;AACX,MAAI,cAAc,UAAU;AAC1B,WAAO,UAAU;AAAA,EACnB;AAEA,MAAI,cAAc,SAAS;AACzB,WAAO,UAAU;AAAA,EACnB;AAEA,SAAO,UAAU;AACnB;AAEO,SAAS,UACd,MACA,iBACA,WACQ;AACR,MAAI,cAAc,UAAU;AAC1B,WAAO,KAAK,KAAK,KAAK,SAAS,mBAAmB;AAAA,EACpD;AAEA,MAAI,cAAc,UAAU;AAC1B,WAAO,KAAK,IAAI,KAAK,SAAS;AAAA,EAChC;AAEA,SAAO,KAAK;AACd;","names":[]}

package/dist/utils/line-chart.util.d.mts

@@ -0,0 +1,11 @@
+import { b as ChartXValue, f as LineChartPoint, h as LineChartScale, c as LineChartCoordinate } from '../line-chart.types-yxru5uWc.mjs';
+import { UseLineChartProps, UseLineChartResult } from '../types/use-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 function createLineChartModel<X extends ChartXValue>(props: UseLineChartProps<X>): UseLineChartResult<X>;
+declare function createLineChartCoordinates<X extends ChartXValue>(data: readonly LineChartPoint<X>[], xScale: LineChartScale<X>, yScale: LineChartScale<number>): LineChartCoordinate<X>[];
+
+export { createLineChartCoordinates, createLineChartModel };

package/dist/utils/line-chart.util.js

@@ -0,0 +1,133 @@
+import { extent } from "d3-array";
+import { scaleLinear, scalePoint, scaleTime } from "d3-scale";
+import {
+  LineChartDefaultNumericDomain,
+  LineChartDefaultTickCount
+} from "../constants";
+function createLineChartModel(props) {
+  const xTickCount = getTickCount(props.xAxis?.tickCount);
+  const yTickCount = getTickCount(props.yAxis?.tickCount);
+  const xRange = [
+    props.plot.x,
+    props.plot.x + props.plot.width
+  ];
+  const yRange = [
+    props.plot.y + props.plot.height,
+    props.plot.y
+  ];
+  const xModel = createXScale(
+    props.data.map((point) => point.x),
+    props.xScaleType ?? "linear",
+    xRange,
+    xTickCount
+  );
+  const yValues = props.data.reduce((values, point) => {
+    if (point.y !== null && Number.isFinite(point.y)) {
+      values.push(point.y);
+    }
+    return values;
+  }, []);
+  const yDomain = props.yAxis?.domain ?? getNumericDomain(yValues);
+  const d3YScale = scaleLinear().domain(yDomain).range(yRange);
+  if (!props.yAxis?.domain && yTickCount > 0) {
+    d3YScale.nice(yTickCount);
+  }
+  const resolvedYDomain = d3YScale.domain();
+  const yScale = (value) => d3YScale(value);
+  const coordinates = createLineChartCoordinates(
+    props.data,
+    xModel.scale,
+    yScale
+  );
+  return {
+    xDomain: xModel.domain,
+    yDomain: resolvedYDomain,
+    xTicks: xModel.ticks,
+    yTicks: d3YScale.ticks(yTickCount),
+    coordinates,
+    xScale: xModel.scale,
+    yScale
+  };
+}
+function createLineChartCoordinates(data, xScale, yScale) {
+  return data.map((datum, index) => {
+    const x = xScale(datum.x);
+    const y = datum.y === null ? void 0 : yScale(datum.y);
+    return {
+      datum,
+      index,
+      x: isFiniteCoordinate(x) ? x : null,
+      y: isFiniteCoordinate(y) ? y : null
+    };
+  });
+}
+function createXScale(values, scaleType, range, tickCount) {
+  if (scaleType === "point") {
+    const d3Scale2 = scalePoint().domain(values).range(range);
+    const domain = d3Scale2.domain();
+    return {
+      domain,
+      ticks: selectPointTicks(domain, tickCount),
+      scale: (value) => d3Scale2(value)
+    };
+  }
+  if (scaleType === "time") {
+    const dates = values.filter(
+      (value) => value instanceof Date && Number.isFinite(value.getTime())
+    );
+    const [minimum, maximum] = extent(dates);
+    const domain = minimum && maximum ? [minimum, maximum] : [/* @__PURE__ */ new Date(0), /* @__PURE__ */ new Date(1)];
+    const d3Scale2 = scaleTime().domain(domain).range(range);
+    if (tickCount > 0) {
+      d3Scale2.nice(tickCount);
+    }
+    return {
+      domain: d3Scale2.domain(),
+      ticks: d3Scale2.ticks(tickCount),
+      scale: (value) => value instanceof Date && Number.isFinite(value.getTime()) ? d3Scale2(value) : void 0
+    };
+  }
+  const numbers = values.filter(
+    (value) => typeof value === "number" && Number.isFinite(value)
+  );
+  const d3Scale = scaleLinear().domain(getNumericDomain(numbers)).range(range);
+  if (tickCount > 0) {
+    d3Scale.nice(tickCount);
+  }
+  return {
+    domain: d3Scale.domain(),
+    ticks: d3Scale.ticks(tickCount),
+    scale: (value) => typeof value === "number" && Number.isFinite(value) ? d3Scale(value) : void 0
+  };
+}
+function getNumericDomain(values) {
+  const [minimum, maximum] = extent(values);
+  return minimum === void 0 || maximum === void 0 ? LineChartDefaultNumericDomain : [minimum, maximum];
+}
+function getTickCount(tickCount) {
+  return tickCount === void 0 || !Number.isFinite(tickCount) ? LineChartDefaultTickCount : Math.max(0, Math.floor(tickCount));
+}
+function selectPointTicks(values, tickCount) {
+  if (tickCount <= 0 || values.length === 0) {
+    return [];
+  }
+  if (values.length <= tickCount) {
+    return [...values];
+  }
+  if (tickCount === 1) {
+    return [values[0]];
+  }
+  const lastIndex = values.length - 1;
+  return Array.from({ length: tickCount }, (_, index) => {
+    const valueIndex = Math.round(index * lastIndex / (tickCount - 1));
+    return values[valueIndex];
+  });
+}
+function isFiniteCoordinate(value) {
+  return value !== void 0 && Number.isFinite(value);
+}
+export {
+  createLineChartCoordinates,
+  createLineChartModel
+};
+//# sourceMappingURL=line-chart.util.js.map

package/dist/utils/line-chart.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/line-chart.util.ts"],"sourcesContent":["import { extent } from \"d3-array\";\nimport { scaleLinear, scalePoint, scaleTime } from \"d3-scale\";\n\nimport {\n  LineChartDefaultNumericDomain,\n  LineChartDefaultTickCount,\n} from \"../constants\";\nimport {\n  ChartNumericDomain,\n  ChartXValue,\n  LineChartCoordinate,\n  LineChartPoint,\n  LineChartScale,\n  LineChartXScaleModel,\n  UseLineChartProps,\n  UseLineChartResult,\n} from \"../types\";\n\nexport function createLineChartModel<X extends ChartXValue>(\n  props: UseLineChartProps<X>,\n): UseLineChartResult<X> {\n  const xTickCount = getTickCount(props.xAxis?.tickCount);\n  const yTickCount = getTickCount(props.yAxis?.tickCount);\n  const xRange: ChartNumericDomain = [\n    props.plot.x,\n    props.plot.x + props.plot.width,\n  ];\n  const yRange: ChartNumericDomain = [\n    props.plot.y + props.plot.height,\n    props.plot.y,\n  ];\n\n  const xModel = createXScale(\n    props.data.map((point) => point.x),\n    props.xScaleType ?? \"linear\",\n    xRange,\n    xTickCount,\n  );\n\n  const yValues = props.data.reduce<number[]>((values, point) => {\n    if (point.y !== null && Number.isFinite(point.y)) {\n      values.push(point.y);\n    }\n\n    return values;\n  }, []);\n  const yDomain = props.yAxis?.domain ?? getNumericDomain(yValues);\n  const d3YScale = scaleLinear().domain(yDomain).range(yRange);\n\n  if (!props.yAxis?.domain && yTickCount > 0) {\n    d3YScale.nice(yTickCount);\n  }\n\n  const resolvedYDomain = d3YScale.domain() as [number, number];\n  const yScale: LineChartScale<number> = (value) => d3YScale(value);\n  const coordinates = createLineChartCoordinates(\n    props.data,\n    xModel.scale,\n    yScale,\n  );\n\n  return {\n    xDomain: xModel.domain,\n    yDomain: resolvedYDomain,\n    xTicks: xModel.ticks,\n    yTicks: d3YScale.ticks(yTickCount),\n    coordinates,\n    xScale: xModel.scale,\n    yScale,\n  };\n}\n\nexport function createLineChartCoordinates<X extends ChartXValue>(\n  data: readonly LineChartPoint<X>[],\n  xScale: LineChartScale<X>,\n  yScale: LineChartScale<number>,\n): LineChartCoordinate<X>[] {\n  return data.map((datum, index) => {\n    const x = xScale(datum.x);\n    const y = datum.y === null ? undefined : yScale(datum.y);\n\n    return {\n      datum,\n      index,\n      x: isFiniteCoordinate(x) ? x : null,\n      y: isFiniteCoordinate(y) ? y : null,\n    };\n  });\n}\n\nfunction createXScale<X extends ChartXValue>(\n  values: readonly X[],\n  scaleType: UseLineChartProps<X>[\"xScaleType\"],\n  range: ChartNumericDomain,\n  tickCount: number,\n): LineChartXScaleModel<X> {\n  if (scaleType === \"point\") {\n    const d3Scale = scalePoint<X>().domain(values).range(range);\n    const domain = d3Scale.domain();\n\n    return {\n      domain,\n      ticks: selectPointTicks(domain, tickCount),\n      scale: (value) => d3Scale(value),\n    };\n  }\n\n  if (scaleType === \"time\") {\n    const dates = values.filter(\n      (value): value is Extract<X, Date> =>\n        value instanceof Date && Number.isFinite(value.getTime()),\n    );\n    const [minimum, maximum] = extent(dates);\n    const domain =\n      minimum && maximum\n        ? ([minimum, maximum] as const)\n        : ([new Date(0), new Date(1)] as const);\n    const d3Scale = scaleTime().domain(domain).range(range);\n\n    if (tickCount > 0) {\n      d3Scale.nice(tickCount);\n    }\n\n    return {\n      domain: d3Scale.domain() as X[],\n      ticks: d3Scale.ticks(tickCount) as X[],\n      scale: (value) =>\n        value instanceof Date && Number.isFinite(value.getTime())\n          ? d3Scale(value)\n          : undefined,\n    };\n  }\n\n  const numbers = values.filter(\n    (value): value is Extract<X, number> =>\n      typeof value === \"number\" && Number.isFinite(value),\n  );\n  const d3Scale = scaleLinear().domain(getNumericDomain(numbers)).range(range);\n\n  if (tickCount > 0) {\n    d3Scale.nice(tickCount);\n  }\n\n  return {\n    domain: d3Scale.domain() as X[],\n    ticks: d3Scale.ticks(tickCount) as X[],\n    scale: (value) =>\n      typeof value === \"number\" && Number.isFinite(value)\n        ? d3Scale(value)\n        : undefined,\n  };\n}\n\nfunction getNumericDomain(values: readonly number[]): ChartNumericDomain {\n  const [minimum, maximum] = extent(values);\n\n  return minimum === undefined || maximum === undefined\n    ? LineChartDefaultNumericDomain\n    : [minimum, maximum];\n}\n\nfunction getTickCount(tickCount: number | undefined): number {\n  return tickCount === undefined || !Number.isFinite(tickCount)\n    ? LineChartDefaultTickCount\n    : Math.max(0, Math.floor(tickCount));\n}\n\nfunction selectPointTicks<X>(values: readonly X[], tickCount: number): X[] {\n  if (tickCount <= 0 || values.length === 0) {\n    return [];\n  }\n\n  if (values.length <= tickCount) {\n    return [...values];\n  }\n\n  if (tickCount === 1) {\n    return [values[0]!];\n  }\n\n  const lastIndex = values.length - 1;\n\n  return Array.from({ length: tickCount }, (_, index) => {\n    const valueIndex = Math.round((index * lastIndex) / (tickCount - 1));\n\n    return values[valueIndex]!;\n  });\n}\n\nfunction isFiniteCoordinate(value: number | undefined): value is number {\n  return value !== undefined && Number.isFinite(value);\n}\n"],"mappings":"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","names":["d3Scale"]}

package/dist/utils/line.util.d.mts

@@ -0,0 +1,10 @@
+import { SkPath } from '@shopify/react-native-skia';
+import { ChartRect } from '../types/common.types.mjs';
+import { b as ChartXValue, c as LineChartCoordinate, d as LineChartCurve } from '../line-chart.types-yxru5uWc.mjs';
+import '../types/style.types.mjs';
+import '@impulse-ui-native/theme';
+
+declare function createLinePath<X extends ChartXValue>(coordinates: readonly LineChartCoordinate<X>[], curve: LineChartCurve): SkPath | null;
+declare function fitLineCoordinatesToRect<X extends ChartXValue>(coordinates: readonly LineChartCoordinate<X>[], source: ChartRect, target: ChartRect): LineChartCoordinate<X>[];
+
+export { createLinePath, fitLineCoordinatesToRect };

package/dist/utils/line.util.js

@@ -0,0 +1,36 @@
+import { Skia } from "@shopify/react-native-skia";
+import { line as createD3Line, curveLinear, curveMonotoneX } from "d3-shape";
+function createLinePath(coordinates, curve) {
+  const pathData = createD3Line().defined((coordinate) => coordinate.x !== null && coordinate.y !== null).x((coordinate) => coordinate.x).y((coordinate) => coordinate.y).curve(curve === "monotone" ? curveMonotoneX : curveLinear)(coordinates);
+  return pathData ? Skia.Path.MakeFromSVGString(pathData) : null;
+}
+function fitLineCoordinatesToRect(coordinates, source, target) {
+  return coordinates.map((coordinate) => ({
+    ...coordinate,
+    x: coordinate.x === null ? null : mapCoordinate(
+      coordinate.x,
+      source.x,
+      source.width,
+      target.x,
+      target.width
+    ),
+    y: coordinate.y === null ? null : mapCoordinate(
+      coordinate.y,
+      source.y,
+      source.height,
+      target.y,
+      target.height
+    )
+  }));
+}
+function mapCoordinate(value, sourceStart, sourceLength, targetStart, targetLength) {
+  if (sourceLength <= 0) {
+    return targetStart + targetLength / 2;
+  }
+  return targetStart + (value - sourceStart) / sourceLength * targetLength;
+}
+export {
+  createLinePath,
+  fitLineCoordinatesToRect
+};
+//# sourceMappingURL=line.util.js.map

package/dist/utils/line.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/line.util.ts"],"sourcesContent":["import { Skia, SkPath } from \"@shopify/react-native-skia\";\nimport { line as createD3Line, curveLinear, curveMonotoneX } from \"d3-shape\";\n\nimport {\n  ChartRect,\n  ChartXValue,\n  LineChartCoordinate,\n  LineChartCurve,\n} from \"../types\";\n\nexport function createLinePath<X extends ChartXValue>(\n  coordinates: readonly LineChartCoordinate<X>[],\n  curve: LineChartCurve,\n): SkPath | null {\n  const pathData = createD3Line<LineChartCoordinate<X>>()\n    .defined((coordinate) => coordinate.x !== null && coordinate.y !== null)\n    .x((coordinate) => coordinate.x!)\n    .y((coordinate) => coordinate.y!)\n    .curve(curve === \"monotone\" ? curveMonotoneX : curveLinear)(coordinates);\n\n  return pathData ? Skia.Path.MakeFromSVGString(pathData) : null;\n}\n\nexport function fitLineCoordinatesToRect<X extends ChartXValue>(\n  coordinates: readonly LineChartCoordinate<X>[],\n  source: ChartRect,\n  target: ChartRect,\n): LineChartCoordinate<X>[] {\n  return coordinates.map((coordinate) => ({\n    ...coordinate,\n    x:\n      coordinate.x === null\n        ? null\n        : mapCoordinate(\n            coordinate.x,\n            source.x,\n            source.width,\n            target.x,\n            target.width,\n          ),\n    y:\n      coordinate.y === null\n        ? null\n        : mapCoordinate(\n            coordinate.y,\n            source.y,\n            source.height,\n            target.y,\n            target.height,\n          ),\n  }));\n}\n\nfunction mapCoordinate(\n  value: number,\n  sourceStart: number,\n  sourceLength: number,\n  targetStart: number,\n  targetLength: number,\n): number {\n  if (sourceLength <= 0) {\n    return targetStart + targetLength / 2;\n  }\n\n  return targetStart + ((value - sourceStart) / sourceLength) * targetLength;\n}\n"],"mappings":"AAAA,SAAS,YAAoB;AAC7B,SAAS,QAAQ,cAAc,aAAa,sBAAsB;AAS3D,SAAS,eACd,aACA,OACe;AACf,QAAM,WAAW,aAAqC,EACnD,QAAQ,CAAC,eAAe,WAAW,MAAM,QAAQ,WAAW,MAAM,IAAI,EACtE,EAAE,CAAC,eAAe,WAAW,CAAE,EAC/B,EAAE,CAAC,eAAe,WAAW,CAAE,EAC/B,MAAM,UAAU,aAAa,iBAAiB,WAAW,EAAE,WAAW;AAEzE,SAAO,WAAW,KAAK,KAAK,kBAAkB,QAAQ,IAAI;AAC5D;AAEO,SAAS,yBACd,aACA,QACA,QAC0B;AAC1B,SAAO,YAAY,IAAI,CAAC,gBAAgB;AAAA,IACtC,GAAG;AAAA,IACH,GACE,WAAW,MAAM,OACb,OACA;AAAA,MACE,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACN,GACE,WAAW,MAAM,OACb,OACA;AAAA,MACE,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACR,EAAE;AACJ;AAEA,SAAS,cACP,OACA,aACA,cACA,aACA,cACQ;AACR,MAAI,gBAAgB,GAAG;AACrB,WAAO,cAAc,eAAe;AAAA,EACtC;AAEA,SAAO,eAAgB,QAAQ,eAAe,eAAgB;AAChE;","names":[]}

package/dist/utils/multi-bar-chart.util.d.mts

@@ -0,0 +1,14 @@
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { MultiBarChartSeriesModel } from '../types/multi-bar-chart.types.mjs';
+import { UseMultiBarChartProps, UseMultiBarChartResult } from '../types/use-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';
+import '../types/use-bar-chart.types.mjs';
+
+declare function createMultiBarChartModel<X extends ChartXValue>(props: UseMultiBarChartProps<X>): UseMultiBarChartResult<X>;
+declare function createDrawableMultiBarChartSeries<X extends ChartXValue>(series: MultiBarChartSeriesModel<X>, index: number): MultiBarChartSeriesModel<X>;
+
+export { createDrawableMultiBarChartSeries, createMultiBarChartModel };

package/dist/utils/multi-bar-chart.util.js

@@ -0,0 +1,62 @@
+import { scaleBand } from "d3-scale";
+import { MultiBarChartDefaultSeriesPadding } from "../constants/bar-chart.constants";
+import { BarDefaultColor, BarDefaultColors } from "../constants/bar.constants";
+import {
+  createBarChartCoordinates,
+  createBarChartScaleModel,
+  normalizeBarChartPadding
+} from "./bar-chart.util";
+function createMultiBarChartModel(props) {
+  const data = props.series.flatMap((series2) => series2.data);
+  const model = createBarChartScaleModel({
+    data,
+    plot: props.plot,
+    xAxis: props.xAxis,
+    yAxis: props.yAxis,
+    categoryPadding: props.categoryPadding
+  });
+  const seriesScale = scaleBand().domain(props.series.map((_, index) => index)).range([0, model.bandwidth]).paddingInner(
+    normalizeBarChartPadding(
+      props.seriesPadding,
+      MultiBarChartDefaultSeriesPadding
+    )
+  );
+  const seriesBandwidth = seriesScale.bandwidth();
+  const series = props.series.map(
+    (currentSeries, index) => ({
+      ...currentSeries,
+      coordinates: createBarChartCoordinates(
+        currentSeries.data,
+        model.xStartScale,
+        model.yScale,
+        model.baseline,
+        seriesBandwidth,
+        seriesScale(index) ?? 0
+      )
+    })
+  );
+  return {
+    series,
+    xDomain: model.xDomain,
+    yDomain: model.yDomain,
+    xTicks: model.xTicks,
+    yTicks: model.yTicks,
+    xScale: model.xScale,
+    yScale: model.yScale,
+    bandwidth: model.bandwidth
+  };
+}
+function createDrawableMultiBarChartSeries(series, index) {
+  return {
+    ...series,
+    bar: {
+      ...series.bar,
+      color: series.bar?.color ?? BarDefaultColors[index % BarDefaultColors.length] ?? BarDefaultColor
+    }
+  };
+}
+export {
+  createDrawableMultiBarChartSeries,
+  createMultiBarChartModel
+};
+//# sourceMappingURL=multi-bar-chart.util.js.map

package/dist/utils/multi-bar-chart.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/multi-bar-chart.util.ts"],"sourcesContent":["import { scaleBand } from \"d3-scale\";\n\nimport { MultiBarChartDefaultSeriesPadding } from \"../constants/bar-chart.constants\";\nimport { BarDefaultColor, BarDefaultColors } from \"../constants/bar.constants\";\nimport {\n  ChartXValue,\n  MultiBarChartSeriesModel,\n  UseMultiBarChartProps,\n  UseMultiBarChartResult,\n} from \"../types\";\nimport {\n  createBarChartCoordinates,\n  createBarChartScaleModel,\n  normalizeBarChartPadding,\n} from \"./bar-chart.util\";\n\nexport function createMultiBarChartModel<X extends ChartXValue>(\n  props: UseMultiBarChartProps<X>,\n): UseMultiBarChartResult<X> {\n  const data = props.series.flatMap((series) => series.data);\n  const model = createBarChartScaleModel({\n    data,\n    plot: props.plot,\n    xAxis: props.xAxis,\n    yAxis: props.yAxis,\n    categoryPadding: props.categoryPadding,\n  });\n  const seriesScale = scaleBand<number>()\n    .domain(props.series.map((_, index) => index))\n    .range([0, model.bandwidth])\n    .paddingInner(\n      normalizeBarChartPadding(\n        props.seriesPadding,\n        MultiBarChartDefaultSeriesPadding,\n      ),\n    );\n  const seriesBandwidth = seriesScale.bandwidth();\n  const series: MultiBarChartSeriesModel<X>[] = props.series.map(\n    (currentSeries, index) => ({\n      ...currentSeries,\n      coordinates: createBarChartCoordinates(\n        currentSeries.data,\n        model.xStartScale,\n        model.yScale,\n        model.baseline,\n        seriesBandwidth,\n        seriesScale(index) ?? 0,\n      ),\n    }),\n  );\n\n  return {\n    series,\n    xDomain: model.xDomain,\n    yDomain: model.yDomain,\n    xTicks: model.xTicks,\n    yTicks: model.yTicks,\n    xScale: model.xScale,\n    yScale: model.yScale,\n    bandwidth: model.bandwidth,\n  };\n}\n\nexport function createDrawableMultiBarChartSeries<X extends ChartXValue>(\n  series: MultiBarChartSeriesModel<X>,\n  index: number,\n): MultiBarChartSeriesModel<X> {\n  return {\n    ...series,\n    bar: {\n      ...series.bar,\n      color:\n        series.bar?.color ??\n        BarDefaultColors[index % BarDefaultColors.length] ??\n        BarDefaultColor,\n    },\n  };\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,yCAAyC;AAClD,SAAS,iBAAiB,wBAAwB;AAOlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,yBACd,OAC2B;AAC3B,QAAM,OAAO,MAAM,OAAO,QAAQ,CAACA,YAAWA,QAAO,IAAI;AACzD,QAAM,QAAQ,yBAAyB;AAAA,IACrC;AAAA,IACA,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM;AAAA,IACb,OAAO,MAAM;AAAA,IACb,iBAAiB,MAAM;AAAA,EACzB,CAAC;AACD,QAAM,cAAc,UAAkB,EACnC,OAAO,MAAM,OAAO,IAAI,CAAC,GAAG,UAAU,KAAK,CAAC,EAC5C,MAAM,CAAC,GAAG,MAAM,SAAS,CAAC,EAC1B;AAAA,IACC;AAAA,MACE,MAAM;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF,QAAM,kBAAkB,YAAY,UAAU;AAC9C,QAAM,SAAwC,MAAM,OAAO;AAAA,IACzD,CAAC,eAAe,WAAW;AAAA,MACzB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,cAAc;AAAA,QACd,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,YAAY,KAAK,KAAK;AAAA,MACxB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,WAAW,MAAM;AAAA,EACnB;AACF;AAEO,SAAS,kCACd,QACA,OAC6B;AAC7B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,MACH,GAAG,OAAO;AAAA,MACV,OACE,OAAO,KAAK,SACZ,iBAAiB,QAAQ,iBAAiB,MAAM,KAChD;AAAA,IACJ;AAAA,EACF;AACF;","names":["series"]}

package/dist/utils/multi-line-chart.util.d.mts

@@ -0,0 +1,10 @@
+import { ChartRect } from '../types/common.types.mjs';
+import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
+import { MultiLineChartSeriesModel } from '../types/multi-line-chart.types.mjs';
+import '../types/style.types.mjs';
+import '@shopify/react-native-skia';
+import '@impulse-ui-native/theme';
+
+declare function createDrawableMultiLineChartSeries<X extends ChartXValue>(series: MultiLineChartSeriesModel<X>, index: number, plot: ChartRect): MultiLineChartSeriesModel<X>;
+
+export { createDrawableMultiLineChartSeries };

package/dist/utils/multi-line-chart.util.js

@@ -0,0 +1,23 @@
+import {
+  LineDefaultColor,
+  LineDefaultColors,
+  LineDefaultWidth
+} from "../constants";
+import { createInsetRect } from "./chart-layout.util";
+import { fitLineCoordinatesToRect } from "./line.util";
+function createDrawableMultiLineChartSeries(series, index, plot) {
+  const width = series.line?.width ?? LineDefaultWidth;
+  const linePlot = createInsetRect(plot, width / 2);
+  return {
+    ...series,
+    coordinates: fitLineCoordinatesToRect(series.coordinates, plot, linePlot),
+    line: {
+      ...series.line,
+      color: series.line?.color ?? LineDefaultColors[index % LineDefaultColors.length] ?? LineDefaultColor
+    }
+  };
+}
+export {
+  createDrawableMultiLineChartSeries
+};
+//# sourceMappingURL=multi-line-chart.util.js.map

package/dist/utils/multi-line-chart.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/multi-line-chart.util.ts"],"sourcesContent":["import {\n  LineDefaultColor,\n  LineDefaultColors,\n  LineDefaultWidth,\n} from \"../constants\";\nimport { ChartRect, ChartXValue, MultiLineChartSeriesModel } from \"../types\";\nimport { createInsetRect } from \"./chart-layout.util\";\nimport { fitLineCoordinatesToRect } from \"./line.util\";\n\nexport function createDrawableMultiLineChartSeries<X extends ChartXValue>(\n  series: MultiLineChartSeriesModel<X>,\n  index: number,\n  plot: ChartRect,\n): MultiLineChartSeriesModel<X> {\n  const width = series.line?.width ?? LineDefaultWidth;\n  const linePlot = createInsetRect(plot, width / 2);\n\n  return {\n    ...series,\n    coordinates: fitLineCoordinatesToRect(series.coordinates, plot, linePlot),\n    line: {\n      ...series.line,\n      color:\n        series.line?.color ??\n        LineDefaultColors[index % LineDefaultColors.length] ??\n        LineDefaultColor,\n    },\n  };\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAElC,SAAS,mCACd,QACA,OACA,MAC8B;AAC9B,QAAM,QAAQ,OAAO,MAAM,SAAS;AACpC,QAAM,WAAW,gBAAgB,MAAM,QAAQ,CAAC;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,aAAa,yBAAyB,OAAO,aAAa,MAAM,QAAQ;AAAA,IACxE,MAAM;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,OACE,OAAO,MAAM,SACb,kBAAkB,QAAQ,kBAAkB,MAAM,KAClD;AAAA,IACJ;AAAA,EACF;AACF;","names":[]}

package/dist/utils/paragraph-builder.util.d.mts

@@ -0,0 +1,10 @@
+import * as _shopify_react_native_skia from '@shopify/react-native-skia';
+import { SkParagraphStyle, SkTypefaceFontProvider } from '@shopify/react-native-skia';
+
+interface CreateParagraphBuilderProps {
+    paragraphStyle?: SkParagraphStyle;
+    typefaceProvider?: SkTypefaceFontProvider;
+}
+declare function createParagraphBuilder(props: CreateParagraphBuilderProps): _shopify_react_native_skia.SkParagraphBuilder;
+
+export { createParagraphBuilder };

package/dist/utils/paragraph-builder.util.js

@@ -0,0 +1,16 @@
+import {
+  Skia
+} from "@shopify/react-native-skia";
+function createParagraphBuilder(props) {
+  if (props.typefaceProvider) {
+    return Skia.ParagraphBuilder.Make(
+      props.paragraphStyle,
+      props.typefaceProvider
+    );
+  }
+  return Skia.ParagraphBuilder.Make(props.paragraphStyle);
+}
+export {
+  createParagraphBuilder
+};
+//# sourceMappingURL=paragraph-builder.util.js.map

package/dist/utils/paragraph-builder.util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/paragraph-builder.util.ts"],"sourcesContent":["import {\n  Skia,\n  SkParagraphStyle,\n  SkTypefaceFontProvider,\n} from \"@shopify/react-native-skia\";\n\ninterface CreateParagraphBuilderProps {\n  paragraphStyle?: SkParagraphStyle;\n  typefaceProvider?: SkTypefaceFontProvider;\n}\n\nexport function createParagraphBuilder(props: CreateParagraphBuilderProps) {\n  if (props.typefaceProvider) {\n    return Skia.ParagraphBuilder.Make(\n      props.paragraphStyle,\n      props.typefaceProvider,\n    );\n  }\n\n  return Skia.ParagraphBuilder.Make(props.paragraphStyle);\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAGK;AAOA,SAAS,uBAAuB,OAAoC;AACzE,MAAI,MAAM,kBAAkB;AAC1B,WAAO,KAAK,iBAAiB;AAAA,MAC3B,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO,KAAK,iBAAiB,KAAK,MAAM,cAAc;AACxD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/charts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "source": "src/index.ts",
   "module": "dist/index.js",
   "types": "dist/index.d.mts",
@@ -17,6 +17,7 @@
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": false,
   "dependencies": {
     "d3-array": "3.2.4",
     "d3-interpolate": "3.0.1",
@@ -24,9 +25,9 @@
     "d3-shape": "3.2.0",
     "d3-time": "3.1.0",
     "d3-time-format": "4.1.0",
-    "@impulse-ui-native/core": "2.1.0",
-    "@impulse-ui-native/primitives": "2.1.0",
-    "@impulse-ui-native/theme": "2.1.0"
+    "@impulse-ui-native/primitives": "2.1.2",
+    "@impulse-ui-native/core": "2.1.2",
+    "@impulse-ui-native/theme": "2.1.2"
   },
   "devDependencies": {
     "@shopify/react-native-skia": "2.6.2",
@@ -42,8 +43,8 @@
     "react": "19.2.3",
     "react-native": "0.86.2",
     "typescript": "~6.0.3",
-    "@impulse-ui-native/eslint-config": "1.0.0",
     "@impulse-ui-native/tsconfig": "1.0.0",
+    "@impulse-ui-native/eslint-config": "1.0.0",
     "@impulse-ui-native/prettier-config": "1.0.0"
   },
   "peerDependencies": {