@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/chart/index.js

@@ -1,1026 +0,0 @@
-// src/components/chart/donut-chart-card.tsx
-import React from "react";
-import { Text, View } from "react-native";
-import Svg, { Circle } from "react-native-svg";
-
-// src/components/chart/chart.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  card: {
-    borderRadius: 22,
-    paddingHorizontal: 20,
-    paddingVertical: 18,
-    width: "100%"
-  },
-  contentVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    gap: 20
-  },
-  contentHorizontal: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 18
-  },
-  pieContentVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    gap: 0
-  },
-  pieContentHorizontal: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 0
-  },
-  chartWrapper: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  pieHeader: {
-    width: "100%",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 10
-  },
-  pieHeaderTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    flex: 1
-  },
-  pieHeaderTotal: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginLeft: 12,
-    textAlign: "right"
-  },
-  centerContent: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "62%"
-  },
-  centerTitle: {
-    fontSize: 17,
-    color: "#aeb7c2",
-    fontWeight: "500",
-    textAlign: "center",
-    includeFontPadding: false
-  },
-  centerTotal: {
-    marginTop: 6,
-    fontSize: 44,
-    fontWeight: "600",
-    color: "#ffffff",
-    lineHeight: 50,
-    includeFontPadding: false
-  },
-  legend: {
-    width: "100%",
-    gap: 10
-  },
-  legendCompact: {
-    width: "auto",
-    minWidth: 180,
-    flexShrink: 1
-  },
-  legendItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 14
-  },
-  legendLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    flex: 1
-  },
-  legendDot: {
-    width: 14,
-    height: 14,
-    borderRadius: 14
-  },
-  legendTitle: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: "#f4f6f8",
-    flexShrink: 1
-  },
-  legendValue: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: "#ffffff",
-    minWidth: 34,
-    textAlign: "right"
-  },
-  barCard: {
-    borderRadius: 22,
-    paddingHorizontal: 18,
-    paddingTop: 16,
-    paddingBottom: 14,
-    width: "100%"
-  },
-  barTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginBottom: 14
-  },
-  barChartRow: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    marginTop: 15
-  },
-  yAxis: {
-    width: 44,
-    justifyContent: "space-between",
-    paddingRight: 8
-  },
-  yAxisLabel: {
-    fontSize: 12,
-    fontWeight: "500",
-    textAlign: "right"
-  },
-  chartAndLabels: {
-    flex: 1
-  },
-  xAxisRow: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    marginTop: 8
-  },
-  xAxisLabel: {
-    fontSize: 12,
-    fontWeight: "500",
-    textAlign: "center",
-    includeFontPadding: false
-  },
-  legendBelow: {
-    marginTop: 20,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8
-  },
-  legendBelowItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginRight: 12
-  },
-  legendBelowDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 8
-  },
-  legendBelowText: {
-    fontSize: 12,
-    fontWeight: "500"
-  },
-  legendBelowValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    marginLeft: 2
-  },
-  lineChartArea: {
-    flex: 1
-  },
-  lineChartGrid: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    height: 1,
-    backgroundColor: "rgba(255,255,255,0.12)"
-  },
-  chartHeader: {
-    width: "100%",
-    marginBottom: 16
-  },
-  chartTitle: {
-    fontSize: 16,
-    fontWeight: "600"
-  },
-  heatmapContainer: {
-    alignItems: "flex-start"
-  },
-  heatmapGrid: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  heatmapRow: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  heatmapCell: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 4
-  },
-  heatmapCellText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: "#ffffff"
-  },
-  heatmapXLabel: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  heatmapYLabel: {
-    alignItems: "flex-end",
-    justifyContent: "center",
-    paddingRight: 4
-  },
-  heatmapLabelText: {
-    fontSize: 12,
-    fontWeight: "500"
-  },
-  heatmapLegend: {
-    marginTop: 20,
-    width: "100%"
-  },
-  heatmapLegendGradient: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  heatmapLegendItem: {
-    alignItems: "center",
-    gap: 6
-  },
-  heatmapLegendBox: {
-    width: 24,
-    height: 24,
-    borderRadius: 4
-  },
-  heatmapLegendValue: {
-    fontSize: 11,
-    fontWeight: "500"
-  }
-});
-
-// src/components/chart/chart.shared.ts
-var DEFAULT_CHART_BACKGROUND = "#6a6a6a30";
-var resolveElevationStyles = (elevation) => {
-  if (elevation <= 0) {
-    return {
-      shadowOpacity: 0,
-      elevation: 0
-    };
-  }
-  return {
-    shadowColor: "#000000",
-    shadowOpacity: Math.min(0.18 + elevation * 0.04, 0.34),
-    shadowOffset: {
-      width: 0,
-      height: elevation * 2
-    },
-    shadowRadius: 6 + elevation * 2,
-    elevation
-  };
-};
-var formatAxisValue = (value) => {
-  if (Number.isInteger(value)) {
-    return `${value}`;
-  }
-  return value.toFixed(1);
-};
-var abbreviateLabel = (label, length) => {
-  const compact = label.trim();
-  if (compact.length <= length) {
-    return compact;
-  }
-  return `${compact.slice(0, length)}.`;
-};
-var isLegendHorizontal = (position) => position === "left" || position === "right";
-
-// src/components/chart/donut-chart-card.tsx
-var DonutChartCard = ({
-  data,
-  showLegend = true,
-  legendPosition = "top",
-  total,
-  title,
-  elevation = 0,
-  backgroundColor = DEFAULT_CHART_BACKGROUND,
-  textColor = "#ffffff",
-  size = 250,
-  strokeWidth,
-  style
-}) => {
-  const normalizedData = React.useMemo(
-    () => data.filter((item) => item.value > 0),
-    [data]
-  );
-  const totalValue = React.useMemo(
-    () => normalizedData.reduce((sum, item) => sum + item.value, 0),
-    [normalizedData]
-  );
-  const effectiveStrokeWidth = React.useMemo(() => {
-    const autoStroke = Math.max(8, Math.min(24, Math.round(size * 0.082)));
-    if (strokeWidth === void 0) {
-      return autoStroke;
-    }
-    return Math.max(6, Math.min(strokeWidth, Math.round(size * 0.22)));
-  }, [size, strokeWidth]);
-  const radius = React.useMemo(
-    () => (size - effectiveStrokeWidth) / 2,
-    [effectiveStrokeWidth, size]
-  );
-  const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
-  const internalGapDegrees = React.useMemo(
-    () => Math.max(6.5, Math.min(12.5, 8.1 * (250 / size))),
-    [size]
-  );
-  const centerTitleFontSize = React.useMemo(
-    () => Math.max(12, Math.round(size * 0.058)),
-    [size]
-  );
-  const centerTotalFontSize = React.useMemo(
-    () => Math.max(24, Math.round(size * 0.128)),
-    [size]
-  );
-  const segments = React.useMemo(() => {
-    if (!normalizedData.length || totalValue <= 0) {
-      return [];
-    }
-    const requestedGap = internalGapDegrees / 360 * circumference;
-    const capCompensation = effectiveStrokeWidth * 0.66;
-    const maxGap = circumference / (normalizedData.length * 1.55);
-    const gapLength = Math.min(requestedGap + capCompensation, maxGap);
-    const availableArcLength = circumference - normalizedData.length * gapLength;
-    let offset = 0;
-    return normalizedData.map((item, index) => {
-      const segmentLength = item.value / totalValue * availableArcLength;
-      const segment = {
-        key: `${item.label}-${index}`,
-        color: item.color,
-        strokeDasharray: `${segmentLength} ${circumference}`,
-        strokeDashoffset: -offset
-      };
-      offset += segmentLength + gapLength;
-      return segment;
-    });
-  }, [
-    circumference,
-    effectiveStrokeWidth,
-    internalGapDegrees,
-    normalizedData,
-    totalValue
-  ]);
-  const chart = /* @__PURE__ */ React.createElement(View, { style: [styles.chartWrapper, { width: size, height: size }] }, /* @__PURE__ */ React.createElement(Svg, { width: size, height: size }, /* @__PURE__ */ React.createElement(
-    Circle,
-    {
-      cx: size / 2,
-      cy: size / 2,
-      r: radius,
-      stroke: "rgba(255,255,255,0.06)",
-      strokeWidth: effectiveStrokeWidth,
-      fill: "none"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Svg,
-    {
-      width: size,
-      height: size,
-      style: { transform: [{ rotate: "-90deg" }] }
-    },
-    segments.map((segment) => /* @__PURE__ */ React.createElement(
-      Circle,
-      {
-        key: segment.key,
-        cx: size / 2,
-        cy: size / 2,
-        r: radius,
-        stroke: segment.color,
-        strokeWidth: effectiveStrokeWidth,
-        strokeDasharray: segment.strokeDasharray,
-        strokeDashoffset: segment.strokeDashoffset,
-        strokeLinecap: "round",
-        fill: "none"
-      }
-    ))
-  )), (title !== void 0 || total !== void 0) && /* @__PURE__ */ React.createElement(View, { style: styles.centerContent, pointerEvents: "none" }, title !== void 0 && /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      style: [
-        styles.centerTitle,
-        { fontSize: centerTitleFontSize, color: textColor }
-      ]
-    },
-    title
-  ), total !== void 0 && /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      style: [
-        styles.centerTotal,
-        {
-          color: textColor,
-          fontSize: centerTotalFontSize,
-          lineHeight: Math.round(centerTotalFontSize * 1.14)
-        }
-      ]
-    },
-    total
-  )));
-  const legend = showLegend ? /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.legend,
-        isLegendHorizontal(legendPosition) && styles.legendCompact
-      ]
-    },
-    data.map((item, index) => /* @__PURE__ */ React.createElement(View, { style: styles.legendItem, key: `${item.label}-${index}-legend` }, /* @__PURE__ */ React.createElement(View, { style: styles.legendLeft }, /* @__PURE__ */ React.createElement(View, { style: [styles.legendDot, { backgroundColor: item.color }] }), /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [styles.legendTitle, { color: item.labelColor ?? textColor }]
-      },
-      item.label
-    )), /* @__PURE__ */ React.createElement(Text, { style: [styles.legendValue, { color: textColor }] }, item.value)))
-  ) : null;
-  const content = isLegendHorizontal(legendPosition) ? /* @__PURE__ */ React.createElement(View, { style: styles.contentHorizontal }, legendPosition === "left" && legend, chart, legendPosition === "right" && legend) : /* @__PURE__ */ React.createElement(View, { style: styles.contentVertical }, legendPosition === "top" && legend, chart, legendPosition === "bottom" && legend);
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.barCard,
-        { backgroundColor },
-        resolveElevationStyles(elevation),
-        style
-      ]
-    },
-    content
-  );
-};
-
-// src/components/chart/vertical-bar-chart-card.tsx
-import React2 from "react";
-import { Text as Text2, View as View2 } from "react-native";
-var VerticalBarChartCard = ({
-  data,
-  title,
-  elevation = 0,
-  backgroundColor = DEFAULT_CHART_BACKGROUND,
-  textColor = "#ffffff",
-  size = 260,
-  showAxes = true,
-  abbreviateXAxisLabels = true,
-  xAxisAbbreviationLength = 3,
-  showFullLegendBelow = true,
-  justifyBars = true,
-  style
-}) => {
-  const normalizedData = React2.useMemo(
-    () => data.filter((item) => item.value >= 0),
-    [data]
-  );
-  const minValue = React2.useMemo(() => {
-    if (!normalizedData.length) {
-      return 0;
-    }
-    return Math.min(...normalizedData.map((item) => item.value));
-  }, [normalizedData]);
-  const maxValue = React2.useMemo(() => {
-    if (!normalizedData.length) {
-      return 1;
-    }
-    return Math.max(...normalizedData.map((item) => item.value), 1);
-  }, [normalizedData]);
-  const meanValue = React2.useMemo(() => {
-    if (!normalizedData.length) {
-      return 0;
-    }
-    const total = normalizedData.reduce((sum, item) => sum + item.value, 0);
-    return total / normalizedData.length;
-  }, [normalizedData]);
-  const chartWidth = Math.max(170, size);
-  const chartHeight = Math.max(130, Math.min(220, Math.round(size * 0.56)));
-  const horizontalPadding = justifyBars ? 0 : Math.max(10, Math.round(size * 0.045));
-  const barsCount = Math.max(normalizedData.length, 1);
-  const usableWidth = chartWidth - horizontalPadding * 2;
-  const slotWidth = usableWidth / barsCount;
-  const dynamicBarWidth = Math.max(8, Math.min(30, slotWidth * 0.52));
-  const cornerRadius = Math.min(dynamicBarWidth / 2, 10);
-  const graphHeight = chartHeight - 8;
-  return /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [
-        styles.barCard,
-        { backgroundColor },
-        resolveElevationStyles(elevation),
-        style
-      ]
-    },
-    title !== void 0 && /* @__PURE__ */ React2.createElement(Text2, { style: [styles.barTitle, { color: textColor }] }, title),
-    /* @__PURE__ */ React2.createElement(View2, { style: styles.barChartRow }, showAxes && /* @__PURE__ */ React2.createElement(View2, { style: [styles.yAxis, { height: chartHeight }] }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(maxValue)), /* @__PURE__ */ React2.createElement(Text2, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(meanValue)), /* @__PURE__ */ React2.createElement(Text2, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(minValue))), /* @__PURE__ */ React2.createElement(View2, { style: styles.chartAndLabels }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: {
-          width: chartWidth,
-          height: chartHeight,
-          position: "relative",
-          justifyContent: "flex-end"
-        }
-      },
-      showAxes && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            height: 1,
-            backgroundColor: "rgba(255,255,255,0.15)"
-          }
-        }
-      ), /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: Math.round((chartHeight - 1) / 2),
-            height: 1,
-            backgroundColor: "rgba(255,255,255,0.12)"
-          }
-        }
-      ), /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            bottom: 0,
-            height: 1,
-            backgroundColor: "rgba(255,255,255,0.15)"
-          }
-        }
-      )),
-      /* @__PURE__ */ React2.createElement(
-        View2,
-        {
-          style: {
-            flexDirection: "row",
-            alignItems: "flex-end",
-            height: chartHeight,
-            paddingHorizontal: horizontalPadding,
-            justifyContent: justifyBars ? "space-between" : "flex-start"
-          }
-        },
-        normalizedData.map((item, index) => {
-          const valueRatio = Math.max(0, Math.min(1, item.value / maxValue));
-          const barHeight = Math.max(2, Math.round(valueRatio * graphHeight));
-          return /* @__PURE__ */ React2.createElement(
-            View2,
-            {
-              key: `${item.label}-${index}-bar`,
-              style: {
-                width: slotWidth,
-                height: "100%",
-                alignItems: "center",
-                justifyContent: "flex-end"
-              }
-            },
-            /* @__PURE__ */ React2.createElement(
-              View2,
-              {
-                style: {
-                  width: dynamicBarWidth,
-                  height: barHeight,
-                  borderRadius: cornerRadius,
-                  backgroundColor: item.color ?? "#57C9ED"
-                }
-              }
-            )
-          );
-        })
-      )
-    ), /* @__PURE__ */ React2.createElement(View2, { style: [styles.xAxisRow, { width: chartWidth }] }, normalizedData.map((item, index) => /* @__PURE__ */ React2.createElement(View2, { key: `${item.label}-${index}-x`, style: { width: slotWidth } }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles.xAxisLabel, { color: textColor }] }, abbreviateXAxisLabels ? abbreviateLabel(item.label, xAxisAbbreviationLength) : item.label)))))),
-    showFullLegendBelow && /* @__PURE__ */ React2.createElement(View2, { style: [styles.legend, { marginTop: 18 }] }, normalizedData.map((item, index) => /* @__PURE__ */ React2.createElement(View2, { key: `${item.label}-${index}-legend`, style: styles.legendItem }, /* @__PURE__ */ React2.createElement(View2, { style: styles.legendLeft }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.legendDot,
-          { backgroundColor: item.color ?? "#57C9ED" }
-        ]
-      }
-    ), /* @__PURE__ */ React2.createElement(Text2, { style: [styles.legendTitle, { color: textColor }] }, item.label)), /* @__PURE__ */ React2.createElement(Text2, { style: [styles.legendValue, { color: textColor }] }, item.value))))
-  );
-};
-
-// src/components/chart/pie-chart-card.tsx
-import React3 from "react";
-import { Text as Text3, View as View3 } from "react-native";
-import Svg2, { Circle as Circle2 } from "react-native-svg";
-import * as SvgElements from "react-native-svg";
-var polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
-  return {
-    x: centerX + radius * Math.cos(angleInRadians),
-    y: centerY + radius * Math.sin(angleInRadians)
-  };
-};
-var createSectorPath = (centerX, centerY, radius, startAngle, endAngle) => {
-  const start = polarToCartesian(centerX, centerY, radius, endAngle);
-  const end = polarToCartesian(centerX, centerY, radius, startAngle);
-  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
-  return [
-    `M ${centerX} ${centerY}`,
-    `L ${start.x} ${start.y}`,
-    `A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`,
-    "Z"
-  ].join(" ");
-};
-var PieChartCard = ({
-  data,
-  title,
-  total,
-  showLegend = true,
-  legendPosition = "bottom",
-  elevation = 0,
-  backgroundColor = DEFAULT_CHART_BACKGROUND,
-  textColor = "#ffffff",
-  size = 220,
-  style
-}) => {
-  const normalizedData = React3.useMemo(
-    () => data.filter((item) => item.value > 0),
-    [data]
-  );
-  const totalValue = React3.useMemo(
-    () => normalizedData.reduce((sum, item) => sum + item.value, 0),
-    [normalizedData]
-  );
-  const chartSize = Math.max(120, size);
-  const center = chartSize / 2;
-  const radius = chartSize * 0.44;
-  const gapDegrees = 1;
-  const sectors = React3.useMemo(() => {
-    if (!normalizedData.length || totalValue <= 0) {
-      return [];
-    }
-    let startAngle = 0;
-    return normalizedData.map((item, index) => {
-      const portion = item.value / totalValue * 360;
-      const sweep = Math.max(0, portion - gapDegrees);
-      const endAngle = startAngle + sweep;
-      const path = createSectorPath(center, center, radius, startAngle, endAngle);
-      startAngle += portion;
-      return {
-        key: `${item.label}-${index}-sector`,
-        color: item.color,
-        path
-      };
-    });
-  }, [center, gapDegrees, normalizedData, radius, totalValue]);
-  const PathElement = SvgElements.Path;
-  const chart = /* @__PURE__ */ React3.createElement(View3, { style: [styles.chartWrapper, { width: chartSize, height: chartSize }] }, /* @__PURE__ */ React3.createElement(Svg2, { width: chartSize, height: chartSize }, PathElement ? sectors.map((sector) => /* @__PURE__ */ React3.createElement(PathElement, { key: sector.key, d: sector.path, fill: sector.color })) : sectors.map((sector, index) => /* @__PURE__ */ React3.createElement(
-    Circle2,
-    {
-      key: `${sector.key}-fallback`,
-      cx: chartSize / 2,
-      cy: chartSize / 2,
-      r: Math.max(8, radius - index * 8),
-      fill: sector.color
-    }
-  ))));
-  const legend = showLegend ? /* @__PURE__ */ React3.createElement(
-    View3,
-    {
-      style: [
-        styles.legend,
-        isLegendHorizontal(legendPosition) && styles.legendCompact
-      ]
-    },
-    data.map((item, index) => /* @__PURE__ */ React3.createElement(View3, { style: styles.legendItem, key: `${item.label}-${index}-legend` }, /* @__PURE__ */ React3.createElement(View3, { style: styles.legendLeft }, /* @__PURE__ */ React3.createElement(View3, { style: [styles.legendDot, { backgroundColor: item.color }] }), /* @__PURE__ */ React3.createElement(
-      Text3,
-      {
-        style: [styles.legendTitle, { color: item.labelColor ?? textColor }]
-      },
-      item.label
-    )), /* @__PURE__ */ React3.createElement(Text3, { style: [styles.legendValue, { color: textColor }] }, item.value)))
-  ) : null;
-  const content = isLegendHorizontal(legendPosition) ? /* @__PURE__ */ React3.createElement(View3, { style: styles.pieContentHorizontal }, legendPosition === "left" && legend, chart, legendPosition === "right" && legend) : /* @__PURE__ */ React3.createElement(View3, { style: styles.pieContentVertical }, legendPosition === "top" && legend, chart, legendPosition === "bottom" && legend);
-  return /* @__PURE__ */ React3.createElement(
-    View3,
-    {
-      style: [
-        styles.card,
-        { backgroundColor },
-        resolveElevationStyles(elevation),
-        style
-      ]
-    },
-    (title !== void 0 || total !== void 0) && /* @__PURE__ */ React3.createElement(View3, { style: styles.pieHeader }, /* @__PURE__ */ React3.createElement(Text3, { style: [styles.pieHeaderTitle, { color: textColor }] }, title ?? ""), /* @__PURE__ */ React3.createElement(Text3, { style: [styles.pieHeaderTotal, { color: textColor }] }, total ?? "")),
-    content
-  );
-};
-
-// src/components/chart/line-chart-card.tsx
-import React4 from "react";
-import { Text as Text4, View as View4 } from "react-native";
-import Svg3, { Circle as Circle3 } from "react-native-svg";
-import * as SvgElements2 from "react-native-svg";
-var buildSmoothPath = (points) => {
-  if (points.length < 2) {
-    return "";
-  }
-  let path = `M ${points[0].x} ${points[0].y}`;
-  for (let index = 1; index < points.length; index += 1) {
-    const prev = points[index - 1];
-    const current = points[index];
-    const controlX = (prev.x + current.x) / 2;
-    path += ` C ${controlX} ${prev.y}, ${controlX} ${current.y}, ${current.x} ${current.y}`;
-  }
-  return path;
-};
-var buildDirectPath = (points) => {
-  if (!points.length) {
-    return "";
-  }
-  const [first, ...rest] = points;
-  return rest.reduce(
-    (path, point) => `${path} L ${point.x} ${point.y}`,
-    `M ${first.x} ${first.y}`
-  );
-};
-var LineChartCard = ({
-  data,
-  title,
-  elevation = 0,
-  backgroundColor = DEFAULT_CHART_BACKGROUND,
-  textColor = "#ffffff",
-  size = 280,
-  showAxes = true,
-  showPoints = true,
-  lineMode = "smooth",
-  lineColor = "#57C9ED",
-  areaColor = "rgba(87,201,237,0.16)",
-  abbreviateXAxisLabels = true,
-  xAxisAbbreviationLength = 3,
-  style
-}) => {
-  const normalizedData = React4.useMemo(
-    () => data.filter((item) => Number.isFinite(item.value)),
-    [data]
-  );
-  const minValue = React4.useMemo(() => {
-    if (!normalizedData.length) {
-      return 0;
-    }
-    return Math.min(...normalizedData.map((item) => item.value));
-  }, [normalizedData]);
-  const maxValue = React4.useMemo(() => {
-    if (!normalizedData.length) {
-      return 1;
-    }
-    return Math.max(...normalizedData.map((item) => item.value), 1);
-  }, [normalizedData]);
-  const meanValue = React4.useMemo(() => {
-    if (!normalizedData.length) {
-      return 0;
-    }
-    return normalizedData.reduce((sum, item) => sum + item.value, 0) / normalizedData.length;
-  }, [normalizedData]);
-  const chartWidth = Math.max(190, size);
-  const chartHeight = Math.max(130, Math.min(220, Math.round(size * 0.56)));
-  const paddingX = Math.max(10, Math.round(size * 0.05));
-  const rightPadding = paddingX + 8;
-  const graphHeight = chartHeight - 10;
-  const dataRange = Math.max(1, maxValue - minValue);
-  const points = React4.useMemo(() => {
-    if (!normalizedData.length) {
-      return [];
-    }
-    const slots = Math.max(normalizedData.length - 1, 1);
-    return normalizedData.map((item, index) => {
-      const x = paddingX + index * (chartWidth - paddingX - rightPadding) / slots;
-      const ratio = (item.value - minValue) / dataRange;
-      const y = graphHeight - ratio * graphHeight;
-      return { x, y };
-    });
-  }, [
-    chartWidth,
-    dataRange,
-    graphHeight,
-    minValue,
-    normalizedData,
-    paddingX,
-    rightPadding
-  ]);
-  const linePath = lineMode === "smooth" ? buildSmoothPath(points) : buildDirectPath(points);
-  const areaPath = points.length ? `${linePath} L ${points[points.length - 1].x} ${graphHeight} L ${points[0].x} ${graphHeight} Z` : "";
-  const PathElement = SvgElements2.Path;
-  return /* @__PURE__ */ React4.createElement(
-    View4,
-    {
-      style: [
-        styles.barCard,
-        { backgroundColor },
-        resolveElevationStyles(elevation),
-        style
-      ]
-    },
-    title !== void 0 && /* @__PURE__ */ React4.createElement(Text4, { style: [styles.barTitle, { color: textColor }] }, title),
-    /* @__PURE__ */ React4.createElement(View4, { style: styles.barChartRow }, showAxes && /* @__PURE__ */ React4.createElement(View4, { style: styles.yAxis }, /* @__PURE__ */ React4.createElement(Text4, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(maxValue)), /* @__PURE__ */ React4.createElement(Text4, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(meanValue)), /* @__PURE__ */ React4.createElement(Text4, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(minValue))), /* @__PURE__ */ React4.createElement(View4, { style: styles.chartAndLabels }, /* @__PURE__ */ React4.createElement(
-      View4,
-      {
-        style: [
-          styles.lineChartArea,
-          { width: chartWidth, height: chartHeight }
-        ]
-      },
-      showAxes && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(View4, { style: [styles.lineChartGrid, { top: 0 }] }), /* @__PURE__ */ React4.createElement(
-        View4,
-        {
-          style: [
-            styles.lineChartGrid,
-            { top: Math.round(chartHeight / 2) }
-          ]
-        }
-      ), /* @__PURE__ */ React4.createElement(View4, { style: [styles.lineChartGrid, { top: chartHeight - 1 }] })),
-      /* @__PURE__ */ React4.createElement(Svg3, { width: chartWidth, height: chartHeight }, !!areaPath && (PathElement ? /* @__PURE__ */ React4.createElement(PathElement, { d: areaPath, fill: areaColor }) : null), !!linePath && (PathElement ? /* @__PURE__ */ React4.createElement(
-        PathElement,
-        {
-          d: linePath,
-          fill: "none",
-          stroke: lineColor,
-          strokeWidth: 2.5,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ) : null), showPoints && points.map((point, index) => /* @__PURE__ */ React4.createElement(
-        Circle3,
-        {
-          key: `line-point-${index}`,
-          cx: point.x,
-          cy: point.y,
-          r: 3.8,
-          fill: lineColor
-        }
-      )))
-    ), /* @__PURE__ */ React4.createElement(View4, { style: [styles.xAxisRow, { width: chartWidth }] }, normalizedData.map((item, index) => /* @__PURE__ */ React4.createElement(
-      View4,
-      {
-        key: `${item.label}-${index}-line-x`,
-        style: { width: chartWidth / Math.max(normalizedData.length, 1) }
-      },
-      /* @__PURE__ */ React4.createElement(Text4, { style: [styles.xAxisLabel, { color: textColor }] }, abbreviateXAxisLabels ? abbreviateLabel(item.label, xAxisAbbreviationLength) : item.label)
-    )))))
-  );
-};
-
-// src/components/chart/heatmap-chart-card.tsx
-import React5 from "react";
-import { Text as Text5, View as View5 } from "react-native";
-var getHeatmapColor = (value, min, max, startColor, endColor) => {
-  if (max === min) {
-    return startColor;
-  }
-  const ratio = (value - min) / (max - min);
-  const parseColor = (color) => {
-    const hex = color.replace("#", "");
-    return {
-      r: Number.parseInt(hex.substring(0, 2), 16),
-      g: Number.parseInt(hex.substring(2, 4), 16),
-      b: Number.parseInt(hex.substring(4, 6), 16)
-    };
-  };
-  const start = parseColor(startColor);
-  const end = parseColor(endColor);
-  const r = Math.round(start.r + (end.r - start.r) * ratio);
-  const g = Math.round(start.g + (end.g - start.g) * ratio);
-  const b = Math.round(start.b + (end.b - start.b) * ratio);
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-};
-var HeatmapChartCard = ({
-  data,
-  title,
-  xLabels,
-  yLabels,
-  showValues = false,
-  showLegend = true,
-  startColor = "#3B82F6",
-  endColor = "#EF4444",
-  elevation = 0,
-  backgroundColor = DEFAULT_CHART_BACKGROUND,
-  textColor = "#ffffff",
-  cellSize = 32,
-  cellGap = 4,
-  style
-}) => {
-  const { minValue, maxValue } = React5.useMemo(() => {
-    let min = Number.POSITIVE_INFINITY;
-    let max = Number.NEGATIVE_INFINITY;
-    for (const row of data) {
-      for (const value of row) {
-        if (value < min) {
-          min = value;
-        }
-        if (value > max) {
-          max = value;
-        }
-      }
-    }
-    return { minValue: min, maxValue: max };
-  }, [data]);
-  const rows = data.length;
-  const cols = data[0]?.length ?? 0;
-  const labelWidth = 50;
-  const labelHeight = 30;
-  return /* @__PURE__ */ React5.createElement(
-    View5,
-    {
-      style: [
-        styles.card,
-        { backgroundColor },
-        resolveElevationStyles(elevation),
-        style
-      ]
-    },
-    title && /* @__PURE__ */ React5.createElement(View5, { style: styles.chartHeader }, /* @__PURE__ */ React5.createElement(Text5, { style: [styles.chartTitle, { color: textColor }] }, title)),
-    /* @__PURE__ */ React5.createElement(View5, { style: styles.heatmapContainer }, /* @__PURE__ */ React5.createElement(View5, { style: styles.heatmapGrid }, /* @__PURE__ */ React5.createElement(View5, { style: { width: labelWidth, height: labelHeight } }), xLabels?.map((label, index) => /* @__PURE__ */ React5.createElement(
-      View5,
-      {
-        key: `x-label-${index}`,
-        style: [
-          styles.heatmapXLabel,
-          {
-            width: cellSize,
-            height: labelHeight,
-            marginRight: index < cols - 1 ? cellGap : 0
-          }
-        ]
-      },
-      /* @__PURE__ */ React5.createElement(
-        Text5,
-        {
-          style: [styles.heatmapLabelText, { color: textColor }],
-          numberOfLines: 1
-        },
-        abbreviateLabel(label, 3)
-      )
-    ))), data.map((row, rowIndex) => /* @__PURE__ */ React5.createElement(View5, { key: `row-${rowIndex}`, style: styles.heatmapRow }, yLabels?.[rowIndex] && /* @__PURE__ */ React5.createElement(View5, { style: [styles.heatmapYLabel, { width: labelWidth }] }, /* @__PURE__ */ React5.createElement(
-      Text5,
-      {
-        style: [styles.heatmapLabelText, { color: textColor }],
-        numberOfLines: 1
-      },
-      abbreviateLabel(yLabels[rowIndex], 5)
-    )), row.map((value, colIndex) => {
-      const cellColor = getHeatmapColor(
-        value,
-        minValue,
-        maxValue,
-        startColor,
-        endColor
-      );
-      return /* @__PURE__ */ React5.createElement(
-        View5,
-        {
-          key: `cell-${rowIndex}-${colIndex}`,
-          style: [
-            styles.heatmapCell,
-            {
-              width: cellSize,
-              height: cellSize,
-              backgroundColor: cellColor,
-              marginRight: colIndex < cols - 1 ? cellGap : 0,
-              marginBottom: rowIndex < rows - 1 ? cellGap : 0
-            }
-          ]
-        },
-        showValues && /* @__PURE__ */ React5.createElement(Text5, { style: styles.heatmapCellText }, value)
-      );
-    })))),
-    showLegend && /* @__PURE__ */ React5.createElement(View5, { style: styles.heatmapLegend }, /* @__PURE__ */ React5.createElement(View5, { style: styles.heatmapLegendGradient }, Array.from({ length: 5 }).map((_, index) => {
-      const ratio = index / 4;
-      const value = minValue + (maxValue - minValue) * ratio;
-      const color = getHeatmapColor(
-        value,
-        minValue,
-        maxValue,
-        startColor,
-        endColor
-      );
-      return /* @__PURE__ */ React5.createElement(View5, { key: `legend-${index}`, style: styles.heatmapLegendItem }, /* @__PURE__ */ React5.createElement(
-        View5,
-        {
-          style: [styles.heatmapLegendBox, { backgroundColor: color }]
-        }
-      ), /* @__PURE__ */ React5.createElement(Text5, { style: [styles.heatmapLegendValue, { color: textColor }] }, value.toFixed(1)));
-    })))
-  );
-};
-export {
-  DonutChartCard,
-  HeatmapChartCard,
-  LineChartCard,
-  PieChartCard,
-  VerticalBarChartCard
-};