@impulse-ui-native/charts 2.1.0 → 2.2.0

package/dist/index.js

@@ -1,1084 +1,7 @@
-// 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 {
-  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
-};
+export * from "./components";
+export * from "./constants";
+export * from "./hooks";
+export * from "./types";
+export * from "./utils";
+export * from "./contexts";
 //# sourceMappingURL=index.js.map