@impulse-ui-native/charts 2.0.1 → 2.1.0

package/dist/index.js

@@ -1,6 +1,1084 @@
-// src/index.ts
-var packageName = "charts";
+// src/components/primitives/grid.tsx
+import { useMemo } from "react";
+import { DashPathEffect, Group, Path } from "@shopify/react-native-skia";
+import { memo } from "@impulse-ui-native/core";
+
+// src/constants/axis.constants.ts
+var AxisDefaultWidth = 1;
+var AxisDefaultOpacity = 1;
+var AxisDefaultTickLength = 4;
+var AxisDefaultLabelGap = 4;
+
+// src/constants/grid.constants.ts
+var GridDefaultWidth = 1;
+var GridDefaultOpacity = 1;
+var GridDefaultXVisible = true;
+var GridDefaultYVisible = true;
+
+// src/constants/label.constants.ts
+var TabularNumsFeature = {
+  name: "tnum",
+  value: 1
+};
+var LabelDefaultHorizontalAlignment = "left";
+var LabelDefaultVerticalAlignment = "top";
+
+// src/constants/line.constants.ts
+import { ChartColorTokens } from "@impulse-ui-native/theme";
+var LineDefaultColor = ChartColorTokens[0];
+var LineDefaultColors = ChartColorTokens;
+var LineDefaultWidth = 2;
+var LineDefaultOpacity = 1;
+var LineDefaultCurve = "linear";
+var LineDefaultCap = "round";
+var LineDefaultJoin = "round";
+
+// src/constants/line-chart.constants.ts
+var LineChartDefaultTickCount = 5;
+var LineChartDefaultNumericDomain = [0, 1];
+
+// src/utils/axis.util.ts
+function createAxisTicks(values, scale) {
+  return values.reduce((ticks, value) => {
+    const position = scale(value);
+    if (position !== void 0 && Number.isFinite(position)) {
+      ticks.push({ value, position });
+    }
+    return ticks;
+  }, []);
+}
+function createXAxisLayout(props) {
+  const ticks = createAxisTicks(props.values, props.scale);
+  const axisY = props.plot.y + props.plot.height;
+  const labelOffset = props.tickLength + props.labelGap;
+  return {
+    line: {
+      start: { x: props.plot.x, y: axisY },
+      end: { x: props.plot.x + props.plot.width, y: axisY }
+    },
+    ticks: ticks.map((tick, index) => ({
+      ...tick,
+      start: { x: tick.position, y: axisY },
+      end: { x: tick.position, y: axisY + props.tickLength },
+      labelRect: createXAxisLabelRect(ticks, index, props.region, labelOffset)
+    }))
+  };
+}
+function createYAxisLayout(props) {
+  const ticks = createAxisTicks(props.values, props.scale);
+  const axisX = props.plot.x;
+  const labelWidth = props.region.width - props.tickLength - props.labelGap;
+  return {
+    line: {
+      start: { x: axisX, y: props.plot.y },
+      end: { x: axisX, y: props.plot.y + props.plot.height }
+    },
+    ticks: ticks.map((tick) => ({
+      ...tick,
+      start: { x: axisX - props.tickLength, y: tick.position },
+      end: { x: axisX, y: tick.position },
+      labelRect: createYAxisLabelRect(
+        tick.position,
+        props.region,
+        labelWidth,
+        props.fontSize
+      )
+    }))
+  };
+}
+function createXAxisLabelRect(ticks, index, region, offset) {
+  const tick = ticks[index];
+  const previous = ticks[index - 1];
+  const next = ticks[index + 1];
+  const previousSpacing = previous ? Math.abs(tick.position - previous.position) : next ? Math.abs(next.position - tick.position) : region.width;
+  const nextSpacing = next ? Math.abs(next.position - tick.position) : previous ? Math.abs(tick.position - previous.position) : region.width;
+  const width = Math.max(0, Math.min(previousSpacing, nextSpacing));
+  return {
+    x: tick.position - width / 2,
+    y: region.y + offset,
+    width,
+    height: Math.max(0, region.height - offset)
+  };
+}
+function createYAxisLabelRect(position, region, width, fontSize) {
+  return {
+    x: region.x,
+    y: position - fontSize,
+    width: Math.max(0, width),
+    height: fontSize * 2
+  };
+}
+function formatAxisTick(value, format) {
+  return format ? format(value) : String(value);
+}
+
+// src/utils/chart-layout.util.ts
+function createChartLayout(size, insets = {}) {
+  const resolvedInsets = {
+    top: insets.top ?? 0,
+    right: insets.right ?? 0,
+    bottom: insets.bottom ?? 0,
+    left: insets.left ?? 0
+  };
+  const plotWidth = Math.max(
+    0,
+    size.width - resolvedInsets.left - resolvedInsets.right
+  );
+  const plotHeight = Math.max(
+    0,
+    size.height - resolvedInsets.top - resolvedInsets.bottom
+  );
+  const plot = {
+    x: resolvedInsets.left,
+    y: resolvedInsets.top,
+    width: plotWidth,
+    height: plotHeight
+  };
+  return {
+    size,
+    insets: resolvedInsets,
+    plot,
+    xAxis: {
+      x: plot.x,
+      y: plot.y + plot.height,
+      width: plot.width,
+      height: resolvedInsets.bottom
+    },
+    yAxis: {
+      x: 0,
+      y: plot.y,
+      width: resolvedInsets.left,
+      height: plot.height
+    }
+  };
+}
+function createInsetRect(rect, amount) {
+  const inset = Math.max(0, amount);
+  const horizontalInset = Math.min(inset, rect.width / 2);
+  const verticalInset = Math.min(inset, rect.height / 2);
+  return {
+    x: rect.x + horizontalInset,
+    y: rect.y + verticalInset,
+    width: Math.max(0, rect.width - horizontalInset * 2),
+    height: Math.max(0, rect.height - verticalInset * 2)
+  };
+}
+
+// src/utils/grid.util.ts
+import { Skia } from "@shopify/react-native-skia";
+function createVerticalGridPath(values, scale, plot) {
+  const ticks = createAxisTicks(values, scale);
+  if (ticks.length === 0) {
+    return null;
+  }
+  const path = Skia.Path.Make();
+  ticks.forEach(({ position }) => {
+    path.moveTo(position, plot.y);
+    path.lineTo(position, plot.y + plot.height);
+  });
+  return path;
+}
+function createHorizontalGridPath(values, scale, plot) {
+  const ticks = createAxisTicks(values, scale);
+  if (ticks.length === 0) {
+    return null;
+  }
+  const path = Skia.Path.Make();
+  ticks.forEach(({ position }) => {
+    path.moveTo(plot.x, position);
+    path.lineTo(plot.x + plot.width, position);
+  });
+  return path;
+}
+function resolveGridLineOptions(options, defaultVisible, defaultColor) {
+  if (typeof options === "boolean") {
+    return {
+      visible: options,
+      color: defaultColor,
+      width: GridDefaultWidth,
+      opacity: GridDefaultOpacity
+    };
+  }
+  return {
+    visible: isGridLineVisible(options, defaultVisible),
+    color: options?.color ?? defaultColor,
+    width: options?.width ?? GridDefaultWidth,
+    opacity: options?.opacity ?? GridDefaultOpacity,
+    dash: options?.dash
+  };
+}
+function isGridLineVisible(options, defaultVisible) {
+  if (typeof options === "boolean") {
+    return options;
+  }
+  return options?.visible ?? defaultVisible;
+}
+
+// src/utils/label.util.ts
+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;
+}
+
+// src/utils/line.util.ts
+import { Skia as Skia2 } 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 ? Skia2.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;
+}
+
+// src/utils/line-chart.util.ts
+import { extent } from "d3-array";
+import { scaleLinear, scalePoint, scaleTime } from "d3-scale";
+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);
+}
+
+// src/utils/multi-line-chart.util.ts
+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
+    }
+  };
+}
+
+// src/utils/paragraph-builder.util.ts
+import {
+  Skia as Skia3
+} from "@shopify/react-native-skia";
+function createParagraphBuilder(props) {
+  if (props.typefaceProvider) {
+    return Skia3.ParagraphBuilder.Make(
+      props.paragraphStyle,
+      props.typefaceProvider
+    );
+  }
+  return Skia3.ParagraphBuilder.Make(props.paragraphStyle);
+}
+
+// src/components/primitives/grid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Grid = memo(function Grid2(props) {
+  const { options, plot, theme, xScale, xTicks, yScale, yTicks } = props;
+  const xStyle = useMemo(
+    () => resolveGridLineOptions(
+      options?.x,
+      GridDefaultXVisible,
+      theme.colors.border.subtle.value
+    ),
+    [options?.x, theme.colors.border.subtle.value]
+  );
+  const yStyle = useMemo(
+    () => resolveGridLineOptions(
+      options?.y,
+      GridDefaultYVisible,
+      theme.colors.border.subtle.value
+    ),
+    [options?.y, theme.colors.border.subtle.value]
+  );
+  const xPath = useMemo(
+    () => createVerticalGridPath(xTicks, xScale, plot),
+    [plot, xScale, xTicks]
+  );
+  const yPath = useMemo(
+    () => createHorizontalGridPath(yTicks, yScale, plot),
+    [plot, yScale, yTicks]
+  );
+  return /* @__PURE__ */ jsxs(Group, { children: [
+    xStyle.visible && xPath ? /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: xPath,
+        color: xStyle.color,
+        opacity: xStyle.opacity,
+        strokeWidth: xStyle.width,
+        style: "stroke",
+        children: xStyle.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...xStyle.dash] }) : null
+      }
+    ) : null,
+    yStyle.visible && yPath ? /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: yPath,
+        color: yStyle.color,
+        opacity: yStyle.opacity,
+        strokeWidth: yStyle.width,
+        style: "stroke",
+        children: yStyle.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...yStyle.dash] }) : null
+      }
+    ) : null
+  ] });
+});
+
+// src/components/primitives/label.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  Group as Group2,
+  Paragraph,
+  Skia as Skia4
+} from "@shopify/react-native-skia";
+import { memo as memo2 } from "@impulse-ui-native/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Label = memo2(function Label2(props) {
+  const {
+    color,
+    fontManager,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    horizontalAlign = LabelDefaultHorizontalAlignment,
+    rect,
+    rotation = 0,
+    text,
+    theme,
+    tnum,
+    maxLines = 1,
+    verticalAlign = LabelDefaultVerticalAlignment
+  } = props;
+  const paragraph = useMemo2(() => {
+    const fontFeatures = [];
+    if (tnum) {
+      fontFeatures.push(TabularNumsFeature);
+    }
+    const textStyle = {
+      color: Skia4.Color(color ?? theme.colors.text.secondary),
+      fontSize: fontSize ?? theme.fontSize.xs,
+      fontFeatures
+    };
+    if (fontFamily) {
+      textStyle.fontFamilies = [fontFamily];
+    }
+    if (fontWeight !== void 0) {
+      textStyle.fontStyle = { weight: fontWeight };
+    }
+    const result = createParagraphBuilder({
+      paragraphStyle: {
+        ellipsis: "\u2026",
+        maxLines: Math.max(1, Math.floor(maxLines)),
+        textAlign: getLabelTextAlign(horizontalAlign)
+      },
+      typefaceProvider: fontManager
+    }).pushStyle(textStyle).addText(text).pop().build();
+    result.layout(rect.width);
+    return result;
+  }, [
+    color,
+    fontManager,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    horizontalAlign,
+    rect.width,
+    text,
+    theme.colors.text.secondary,
+    theme.fontSize.xs,
+    tnum,
+    maxLines
+  ]);
+  const rotationProps = useMemo2(
+    () => ({
+      origin: {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      },
+      transform: [{ rotate: rotation * Math.PI / 180 }]
+    }),
+    [rect.height, rect.width, rect.x, rect.y, rotation]
+  );
+  if (!paragraph) {
+    return null;
+  }
+  const y = getLabelY(rect, paragraph.getHeight(), verticalAlign);
+  return /* @__PURE__ */ jsx2(Group2, { origin: rotationProps.origin, transform: rotationProps.transform, children: /* @__PURE__ */ jsx2(Paragraph, { paragraph, x: rect.x, y, width: rect.width }) });
+});
+
+// src/components/primitives/line.tsx
+import { useMemo as useMemo3 } from "react";
+import { DashPathEffect as DashPathEffect2, Path as Path2 } from "@shopify/react-native-skia";
+import { memo as memo3 } from "@impulse-ui-native/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Line = memo3(function Line2(props) {
+  const {
+    cap = LineDefaultCap,
+    color = LineDefaultColor,
+    coordinates,
+    curve = LineDefaultCurve,
+    dash,
+    join = LineDefaultJoin,
+    opacity = LineDefaultOpacity,
+    visible = true,
+    width = LineDefaultWidth
+  } = props;
+  const path = useMemo3(
+    () => createLinePath(coordinates, curve),
+    [coordinates, curve]
+  );
+  if (!visible || !path) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    Path2,
+    {
+      path,
+      color,
+      opacity,
+      strokeWidth: width,
+      style: "stroke",
+      strokeCap: cap,
+      strokeJoin: join,
+      children: dash?.length ? /* @__PURE__ */ jsx3(DashPathEffect2, { intervals: [...dash] }) : null
+    }
+  );
+});
+
+// src/components/primitives/x-axis.tsx
+import { Fragment, useMemo as useMemo4 } from "react";
+import {
+  DashPathEffect as DashPathEffect3,
+  Group as Group3,
+  Line as SkiaLine
+} from "@shopify/react-native-skia";
+import { memo as memo4 } from "@impulse-ui-native/core";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var XAxis = memo4(function XAxis2(props) {
+  const {
+    fontManager,
+    lineVisible = true,
+    options,
+    plot,
+    region,
+    scale,
+    theme,
+    ticks,
+    tickVisible = true
+  } = props;
+  const line = options?.line;
+  const tick = options?.tick;
+  const label = options?.label;
+  const tickLength = tick?.length ?? AxisDefaultTickLength;
+  const labelGap = label?.gap ?? AxisDefaultLabelGap;
+  const fontSize = label?.fontSize ?? theme.fontSize.xs;
+  const layout = useMemo4(
+    () => createXAxisLayout({
+      values: ticks,
+      scale,
+      plot,
+      region,
+      tickLength,
+      labelGap
+    }),
+    [labelGap, plot, region, scale, tickLength, ticks]
+  );
+  return /* @__PURE__ */ jsxs2(Group3, { children: [
+    lineVisible && line?.visible !== false ? /* @__PURE__ */ jsx4(
+      SkiaLine,
+      {
+        p1: layout.line.start,
+        p2: layout.line.end,
+        color: line?.color ?? theme.colors.border.default.value,
+        opacity: line?.opacity ?? AxisDefaultOpacity,
+        strokeWidth: line?.width ?? AxisDefaultWidth,
+        children: line?.dash?.length ? /* @__PURE__ */ jsx4(DashPathEffect3, { intervals: [...line.dash] }) : null
+      }
+    ) : null,
+    layout.ticks.map((tick2, index) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      tickVisible && options?.tick?.visible !== false ? /* @__PURE__ */ jsx4(
+        SkiaLine,
+        {
+          p1: tick2.start,
+          p2: tick2.end,
+          color: options?.tick?.color ?? theme.colors.border.default.value,
+          opacity: options?.tick?.opacity ?? AxisDefaultOpacity,
+          strokeWidth: options?.tick?.width ?? AxisDefaultWidth,
+          children: options?.tick?.dash?.length ? /* @__PURE__ */ jsx4(DashPathEffect3, { intervals: [...options.tick.dash] }) : null
+        }
+      ) : null,
+      label?.visible !== false ? /* @__PURE__ */ jsx4(
+        Label,
+        {
+          text: formatAxisTick(tick2.value, options?.format),
+          rect: tick2.labelRect,
+          horizontalAlign: "center",
+          color: label?.color,
+          fontSize,
+          fontFamily: label?.fontFamily,
+          fontWeight: label?.fontWeight,
+          fontManager,
+          maxLines: label?.maxLines,
+          rotation: label?.rotation,
+          theme,
+          tnum: typeof tick2.value === "number"
+        }
+      ) : null
+    ] }, `${String(tick2.value)}-${index}`))
+  ] });
+});
+
+// src/components/primitives/y-axis.tsx
+import { Fragment as Fragment2, useMemo as useMemo5 } from "react";
+import {
+  DashPathEffect as DashPathEffect4,
+  Group as Group4,
+  Line as SkiaLine2
+} from "@shopify/react-native-skia";
+import { memo as memo5 } from "@impulse-ui-native/core";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var YAxis = memo5(function YAxis2(props) {
+  const {
+    fontManager,
+    lineVisible = true,
+    options,
+    plot,
+    region,
+    scale,
+    theme,
+    ticks,
+    tickVisible = true
+  } = props;
+  const line = options?.line;
+  const tick = options?.tick;
+  const label = options?.label;
+  const tickLength = tick?.length ?? AxisDefaultTickLength;
+  const labelGap = label?.gap ?? AxisDefaultLabelGap;
+  const fontSize = label?.fontSize ?? theme.fontSize.xs;
+  const layout = useMemo5(
+    () => createYAxisLayout({
+      values: ticks,
+      scale,
+      plot,
+      region,
+      tickLength,
+      labelGap,
+      fontSize
+    }),
+    [fontSize, labelGap, plot, region, scale, tickLength, ticks]
+  );
+  return /* @__PURE__ */ jsxs3(Group4, { children: [
+    lineVisible && line?.visible !== false ? /* @__PURE__ */ jsx5(
+      SkiaLine2,
+      {
+        p1: layout.line.start,
+        p2: layout.line.end,
+        color: line?.color ?? theme.colors.border.default.value,
+        opacity: line?.opacity ?? AxisDefaultOpacity,
+        strokeWidth: line?.width ?? AxisDefaultWidth,
+        children: line?.dash?.length ? /* @__PURE__ */ jsx5(DashPathEffect4, { intervals: [...line.dash] }) : null
+      }
+    ) : null,
+    layout.ticks.map((tick2, index) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      tickVisible && options?.tick?.visible !== false ? /* @__PURE__ */ jsx5(
+        SkiaLine2,
+        {
+          p1: tick2.start,
+          p2: tick2.end,
+          color: options?.tick?.color ?? theme.colors.border.default.value,
+          opacity: options?.tick?.opacity ?? AxisDefaultOpacity,
+          strokeWidth: options?.tick?.width ?? AxisDefaultWidth,
+          children: options?.tick?.dash?.length ? /* @__PURE__ */ jsx5(DashPathEffect4, { intervals: [...options.tick.dash] }) : null
+        }
+      ) : null,
+      label?.visible !== false ? /* @__PURE__ */ jsx5(
+        Label,
+        {
+          text: formatAxisTick(tick2.value, options?.format),
+          rect: tick2.labelRect,
+          horizontalAlign: "right",
+          verticalAlign: "center",
+          color: label?.color,
+          fontSize,
+          fontFamily: label?.fontFamily,
+          fontWeight: label?.fontWeight,
+          fontManager,
+          maxLines: label?.maxLines,
+          rotation: label?.rotation,
+          theme,
+          tnum: true
+        }
+      ) : null
+    ] }, `${tick2.value}-${index}`))
+  ] });
+});
+
+// src/components/line-chart.tsx
+import { StyleSheet } from "react-native";
+import { Canvas } from "@shopify/react-native-skia";
+import { memo as memo7 } from "@impulse-ui-native/core";
+import { useTheme } from "@impulse-ui-native/theme";
+
+// src/hooks/use-chart-canvas.hook.ts
+import { useCanvasRef, useCanvasSize } from "@shopify/react-native-skia";
+function useChartCanvas() {
+  const ref = useCanvasRef();
+  const { size } = useCanvasSize(ref);
+  return { ref, size };
+}
+
+// src/hooks/use-line-chart.hook.ts
+import { useMemo as useMemo6 } from "react";
+function useLineChart(props) {
+  const { data, plot, xAxis, xScaleType, yAxis } = props;
+  return useMemo6(
+    () => createLineChartModel({ data, plot, xAxis, xScaleType, yAxis }),
+    [data, plot, xAxis, xScaleType, yAxis]
+  );
+}
+
+// src/hooks/use-multi-line-chart.hook.ts
+import { useMemo as useMemo7 } from "react";
+function useMultiLineChart(props) {
+  const { plot, series, xAxis, xScaleType, yAxis } = props;
+  const data = useMemo7(
+    () => series.flatMap((currentSeries) => currentSeries.data),
+    [series]
+  );
+  const { xDomain, xScale, xTicks, yDomain, yScale, yTicks } = useLineChart({
+    data,
+    plot,
+    xAxis,
+    xScaleType,
+    yAxis
+  });
+  const seriesModels = useMemo7(
+    () => series.map((currentSeries) => ({
+      ...currentSeries,
+      coordinates: createLineChartCoordinates(
+        currentSeries.data,
+        xScale,
+        yScale
+      )
+    })),
+    [series, xScale, yScale]
+  );
+  return useMemo7(
+    () => ({
+      series: seriesModels,
+      xDomain,
+      xScale,
+      xTicks,
+      yDomain,
+      yScale,
+      yTicks
+    }),
+    [seriesModels, xDomain, xScale, xTicks, yDomain, yScale, yTicks]
+  );
+}
+
+// src/components/line-chart-body.tsx
+import { useMemo as useMemo8 } from "react";
+import { Group as Group5 } from "@shopify/react-native-skia";
+import { memo as memo6 } from "@impulse-ui-native/core";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var LineChartBody = memo6(function LineChartBodyComponent(props) {
+  const {
+    data,
+    fontManager,
+    grid,
+    insets,
+    line,
+    size,
+    theme,
+    xAxis,
+    xScaleType,
+    yAxis
+  } = props;
+  const layout = useMemo8(() => createChartLayout(size, insets), [insets, size]);
+  const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({
+    data,
+    plot: layout.plot,
+    xAxis,
+    xScaleType,
+    yAxis
+  });
+  const linePlot = useMemo8(
+    () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),
+    [layout.plot, line?.width]
+  );
+  const lineCoordinates = useMemo8(
+    () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),
+    [coordinates, layout.plot, linePlot]
+  );
+  const isGridStyle = grid !== void 0;
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    isGridStyle ? /* @__PURE__ */ jsx6(
+      Grid,
+      {
+        options: grid,
+        plot: layout.plot,
+        theme,
+        xTicks,
+        xScale,
+        yTicks,
+        yScale
+      }
+    ) : null,
+    xAxis?.visible !== false ? /* @__PURE__ */ jsx6(
+      XAxis,
+      {
+        ticks: xTicks,
+        scale: xScale,
+        plot: layout.plot,
+        region: layout.xAxis,
+        theme,
+        options: xAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    yAxis?.visible !== false ? /* @__PURE__ */ jsx6(
+      YAxis,
+      {
+        ticks: yTicks,
+        scale: yScale,
+        plot: layout.plot,
+        region: layout.yAxis,
+        theme,
+        options: yAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    /* @__PURE__ */ jsx6(Group5, { clip: layout.plot, children: /* @__PURE__ */ jsx6(Line, { coordinates: lineCoordinates, ...line }) })
+  ] });
+});
+
+// src/components/line-chart.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var LineChart = memo7(function LineChart2(props) {
+  const theme = useTheme();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx7(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx7(LineChartBody, { ...props, size, theme }) });
+});
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/components/multi-line-chart.tsx
+import { StyleSheet as StyleSheet2 } from "react-native";
+import { Canvas as Canvas2 } from "@shopify/react-native-skia";
+import { memo as memo9 } from "@impulse-ui-native/core";
+import { useTheme as useTheme2 } from "@impulse-ui-native/theme";
+
+// src/components/multi-line-chart-body.tsx
+import { useMemo as useMemo9 } from "react";
+import { Group as Group6 } from "@shopify/react-native-skia";
+import { memo as memo8 } from "@impulse-ui-native/core";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var MultiLineChartBody = memo8(function MultiLineChartBodyComponent(props) {
+  const {
+    fontManager,
+    grid,
+    insets,
+    series,
+    size,
+    theme,
+    xAxis,
+    xScaleType,
+    yAxis
+  } = props;
+  const layout = useMemo9(() => createChartLayout(size, insets), [insets, size]);
+  const {
+    series: seriesModels,
+    xScale,
+    xTicks,
+    yScale,
+    yTicks
+  } = useMultiLineChart({
+    plot: layout.plot,
+    series,
+    xAxis,
+    xScaleType,
+    yAxis
+  });
+  const drawableSeries = useMemo9(
+    () => seriesModels.map(
+      (currentSeries, index) => createDrawableMultiLineChartSeries(currentSeries, index, layout.plot)
+    ),
+    [layout.plot, seriesModels]
+  );
+  const isGridStyle = grid !== void 0;
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    isGridStyle ? /* @__PURE__ */ jsx8(
+      Grid,
+      {
+        options: grid,
+        plot: layout.plot,
+        theme,
+        xTicks,
+        xScale,
+        yTicks,
+        yScale
+      }
+    ) : null,
+    xAxis?.visible !== false ? /* @__PURE__ */ jsx8(
+      XAxis,
+      {
+        ticks: xTicks,
+        scale: xScale,
+        plot: layout.plot,
+        region: layout.xAxis,
+        theme,
+        options: xAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    yAxis?.visible !== false ? /* @__PURE__ */ jsx8(
+      YAxis,
+      {
+        ticks: yTicks,
+        scale: yScale,
+        plot: layout.plot,
+        region: layout.yAxis,
+        theme,
+        options: yAxis,
+        fontManager,
+        lineVisible: !isGridStyle,
+        tickVisible: !isGridStyle
+      }
+    ) : null,
+    /* @__PURE__ */ jsx8(Group6, { clip: layout.plot, children: drawableSeries.map((currentSeries) => /* @__PURE__ */ jsx8(
+      Line,
+      {
+        coordinates: currentSeries.coordinates,
+        ...currentSeries.line
+      },
+      currentSeries.id
+    )) })
+  ] });
+});
+
+// src/components/multi-line-chart.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var MultiLineChart = memo9(function MultiLineChart2(props) {
+  const theme = useTheme2();
+  const { ref, size } = useChartCanvas();
+  return /* @__PURE__ */ jsx9(Canvas2, { ref, style: styles2.container, children: /* @__PURE__ */ jsx9(MultiLineChartBody, { ...props, size, theme }) });
+});
+var styles2 = StyleSheet2.create({
+  container: {
+    flex: 1
+  }
+});
 export {
-  packageName
+  AxisDefaultLabelGap,
+  AxisDefaultOpacity,
+  AxisDefaultTickLength,
+  AxisDefaultWidth,
+  Grid,
+  GridDefaultOpacity,
+  GridDefaultWidth,
+  GridDefaultXVisible,
+  GridDefaultYVisible,
+  Label,
+  LabelDefaultHorizontalAlignment,
+  LabelDefaultVerticalAlignment,
+  Line,
+  LineChart,
+  LineChartDefaultNumericDomain,
+  LineChartDefaultTickCount,
+  LineDefaultCap,
+  LineDefaultColor,
+  LineDefaultColors,
+  LineDefaultCurve,
+  LineDefaultJoin,
+  LineDefaultOpacity,
+  LineDefaultWidth,
+  MultiLineChart,
+  TabularNumsFeature,
+  XAxis,
+  YAxis,
+  createAxisTicks,
+  createChartLayout,
+  createDrawableMultiLineChartSeries,
+  createHorizontalGridPath,
+  createInsetRect,
+  createLineChartCoordinates,
+  createLineChartModel,
+  createLinePath,
+  createParagraphBuilder,
+  createVerticalGridPath,
+  createXAxisLabelRect,
+  createXAxisLayout,
+  createYAxisLabelRect,
+  createYAxisLayout,
+  fitLineCoordinatesToRect,
+  formatAxisTick,
+  getLabelTextAlign,
+  getLabelY,
+  resolveGridLineOptions,
+  useChartCanvas,
+  useLineChart,
+  useMultiLineChart
 };
 //# sourceMappingURL=index.js.map