@xaui/native 0.0.21 → 0.0.23

package/dist/chart/index.js

@@ -0,0 +1,1005 @@
+// 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
+};