@zendir/ui 0.1.0

package/dist/react/charts/unified/AstroChart.js

@@ -0,0 +1,1405 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useRef, useMemo, useCallback, useImperativeHandle, useState, useEffect } from "react";
+import ReactEChartsCore from "echarts-for-react/lib/core";
+import * as echarts from "echarts/core";
+import { LineChart, BarChart, PieChart, ScatterChart, RadarChart, GaugeChart, HeatmapChart, CandlestickChart, BoxplotChart, TreemapChart, SunburstChart, FunnelChart, SankeyChart, CustomChart, GraphChart, ParallelChart } from "echarts/charts";
+import { GridComponent, TooltipComponent, TitleComponent, LegendComponent, DataZoomComponent, ToolboxComponent, MarkLineComponent, MarkAreaComponent, MarkPointComponent, VisualMapComponent, BrushComponent, PolarComponent, RadarComponent, GeoComponent, ParallelComponent } from "echarts/components";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import { AstroIcon } from "../../core/AstroIcon.js";
+import { HeaderIconWithStatus } from "../../core/HeaderIconWithStatus.js";
+import { useCardBorderStyle } from "../../context/DisplaySettingsContext.js";
+import { createAstroEChartsTheme, getSeriesColor, createAreaGradient } from "./theme.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const STATUS_SHAPES = {
+  off: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
+  standby: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
+  normal: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
+  caution: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) }),
+  serious: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) }),
+  critical: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) })
+};
+const STATUS_LABELS = {
+  off: "Off",
+  standby: "Standby",
+  normal: "Normal",
+  caution: "Caution",
+  serious: "Serious",
+  critical: "Critical"
+};
+function slug(str) {
+  return str.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function derivedExportBaseName(title, seriesNames, chartType) {
+  const parts = ["zendir"];
+  if (title) parts.push(slug(title));
+  else parts.push("chart");
+  const seriesSlug = seriesNames.slice(0, 4).map(slug).filter(Boolean).join("-");
+  if (seriesSlug) parts.push(seriesSlug);
+  parts.push(slug(chartType));
+  return parts.join("-") || "zendir-chart";
+}
+echarts.use([
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  GaugeChart,
+  HeatmapChart,
+  CandlestickChart,
+  BoxplotChart,
+  TreemapChart,
+  SunburstChart,
+  FunnelChart,
+  SankeyChart,
+  CustomChart,
+  GraphChart,
+  ParallelChart,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  MarkPointComponent,
+  VisualMapComponent,
+  BrushComponent,
+  PolarComponent,
+  RadarComponent,
+  GeoComponent,
+  ParallelComponent,
+  CanvasRenderer,
+  SVGRenderer
+]);
+function transformSeriesToECharts(series, chartType, theme) {
+  return series.map((s, index) => {
+    var _a, _b, _c, _d, _e;
+    const seriesType = s.type || chartType;
+    const color = s.color || getSeriesColor(index);
+    const baseSeries = {
+      id: s.id,
+      name: s.name,
+      type: mapChartType(seriesType),
+      data: transformData(s.data, seriesType),
+      yAxisIndex: s.yAxisIndex || 0,
+      showSymbol: seriesType === "scatter" || ((_a = s.symbol) == null ? void 0 : _a.type) !== "none",
+      smooth: s.smooth ?? (seriesType === "line" || seriesType === "area")
+    };
+    if (seriesType === "line" || seriesType === "area") {
+      baseSeries.lineStyle = {
+        width: ((_b = s.lineStyle) == null ? void 0 : _b.width) ?? 2,
+        type: ((_c = s.lineStyle) == null ? void 0 : _c.type) ?? "solid",
+        opacity: ((_d = s.lineStyle) == null ? void 0 : _d.opacity) ?? 1
+      };
+      baseSeries.itemStyle = { color };
+      if (seriesType === "area") {
+        baseSeries.areaStyle = s.areaStyle || {
+          opacity: 0.3,
+          color: createAreaGradient(color)
+        };
+      }
+      if (s.symbol) {
+        baseSeries.symbol = s.symbol.type || "circle";
+        baseSeries.symbolSize = s.symbol.size || 6;
+      }
+    }
+    if (seriesType === "bar") {
+      baseSeries.itemStyle = {
+        color,
+        borderRadius: [4, 4, 0, 0]
+      };
+      if (s.stack) {
+        baseSeries.stack = s.stack;
+      }
+    }
+    if (seriesType === "pie" || seriesType === "donut") {
+      baseSeries.radius = seriesType === "donut" ? ["40%", "70%"] : "70%";
+      baseSeries.label = {
+        show: true,
+        formatter: "{b}: {d}%",
+        color: theme.textStyle.color,
+        textBorderWidth: 0,
+        textBorderColor: "transparent"
+      };
+      baseSeries.emphasis = {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      };
+    }
+    if (seriesType === "scatter") {
+      baseSeries.symbolSize = ((_e = s.symbol) == null ? void 0 : _e.size) || 10;
+      baseSeries.itemStyle = { color };
+    }
+    if (seriesType === "gauge") {
+      baseSeries.detail = {
+        formatter: "{value}%",
+        fontSize: 20,
+        color: theme.textStyle.color
+      };
+      baseSeries.axisLine = {
+        lineStyle: {
+          width: 10,
+          color: [
+            [0.3, theme.color[1]],
+            // Green
+            [0.7, theme.color[3]],
+            // Yellow
+            [1, theme.color[2]]
+            // Red
+          ]
+        }
+      };
+    }
+    return baseSeries;
+  });
+}
+function mapChartType(type) {
+  switch (type) {
+    case "area":
+      return "line";
+    case "donut":
+      return "pie";
+    default:
+      return type;
+  }
+}
+function transformData(data, type) {
+  if (!data || data.length === 0) return [];
+  if (typeof data[0] === "number") {
+    return data;
+  }
+  if (Array.isArray(data[0])) {
+    return data;
+  }
+  const firstItem = data[0];
+  if ("time" in firstItem) {
+    return data.map((d) => [d.time, d.value]);
+  }
+  if (type === "pie" || type === "donut") {
+    return data.map((d) => ({
+      name: String(d.x),
+      value: d.y,
+      // Apply color via itemStyle if specified
+      ...d.color ? { itemStyle: { color: d.color } } : {},
+      // Preserve any additional metadata
+      ...d.meta || {}
+    }));
+  }
+  return data.map((d) => [d.x, d.y]);
+}
+function buildEChartsOptions(props, theme, hideTitle = false) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const {
+    type,
+    series,
+    title,
+    subtitle,
+    xAxis,
+    yAxis,
+    tooltip,
+    legend,
+    zoom,
+    annotations,
+    loading,
+    compactAxes = true
+    // Default: hide axis names for more chart space
+  } = props;
+  const showEChartsTitle = title && !hideTitle;
+  const isPolar = type === "radar";
+  const isPie = type === "pie" || type === "donut";
+  const isGauge = type === "gauge";
+  const isSankey = type === "sankey";
+  const isTreemap = type === "treemap" || type === "sunburst";
+  const isGraph = ((_a = props.echartsOptions) == null ? void 0 : _a.series) && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => (s == null ? void 0 : s.type) === "graph");
+  const is3D = !!(((_b = props.echartsOptions) == null ? void 0 : _b.grid3D) || ((_c = props.echartsOptions) == null ? void 0 : _c.xAxis3D) || ((_d = props.echartsOptions) == null ? void 0 : _d.globe) || ((_e = props.echartsOptions) == null ? void 0 : _e.series) && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => {
+    const seriesType = (s == null ? void 0 : s.type) || "";
+    return seriesType.includes("3D") || seriesType.includes("3d");
+  }));
+  const needsGrid = !isPolar && !isPie && !isGauge && !isSankey && !isTreemap && !isGraph && !is3D && !props.hideAxes;
+  const hasTitle = hideTitle ? true : !!title;
+  const hasSubtitle = hideTitle ? false : !!subtitle;
+  const legendPosition = (legend == null ? void 0 : legend.position) ?? "bottom";
+  const legendAtTop = legendPosition === "top";
+  const legendAtBottom = legendPosition === "bottom";
+  const showLegend = (legend == null ? void 0 : legend.show) !== false;
+  const options = {
+    // Title - positioned to avoid legend overlap (hidden when using custom header)
+    title: showEChartsTitle ? {
+      text: title,
+      subtext: subtitle,
+      left: "center",
+      top: legendAtTop && showLegend ? 35 : 10,
+      textStyle: { ...theme.title.textStyle, fontWeight: theme.title.textStyle.fontWeight ?? "normal" },
+      subtextStyle: theme.title.subtextStyle
+    } : void 0,
+    // Tooltip with improved contrast
+    // When compactAxes is true, axis names are shown in the axisPointer label on hover
+    tooltip: (tooltip == null ? void 0 : tooltip.enabled) !== false ? {
+      trigger: (tooltip == null ? void 0 : tooltip.trigger) || (isPie ? "item" : "axis"),
+      axisPointer: {
+        type: (tooltip == null ? void 0 : tooltip.crosshair) === true || (tooltip == null ? void 0 : tooltip.crosshair) === "both" ? "cross" : "line",
+        lineStyle: theme.axisPointer.lineStyle,
+        crossStyle: theme.axisPointer.crossStyle,
+        // Show axis value labels on hover (includes axis name context)
+        label: compactAxes ? {
+          show: true,
+          backgroundColor: theme.tooltip.backgroundColor,
+          borderColor: theme.tooltip.borderColor,
+          color: theme.tooltip.textStyle.color,
+          fontSize: 11,
+          padding: [4, 8],
+          // Add axis name prefix to the label when in compact mode
+          formatter: (params) => {
+            var _a2;
+            const axisName = params.axisDimension === "x" ? xAxis == null ? void 0 : xAxis.name : Array.isArray(yAxis) ? (_a2 = yAxis[params.axisIndex]) == null ? void 0 : _a2.name : yAxis == null ? void 0 : yAxis.name;
+            const value = typeof params.value === "number" ? params.value.toLocaleString() : params.value;
+            return axisName ? `${axisName}: ${value}` : String(value);
+          }
+        } : void 0
+      },
+      backgroundColor: theme.tooltip.backgroundColor,
+      borderColor: theme.tooltip.borderColor,
+      borderWidth: theme.tooltip.borderWidth,
+      textStyle: {
+        ...theme.tooltip.textStyle,
+        fontSize: 14
+        // AstroUXDS minimum 14pt
+      },
+      extraCssText: theme.tooltip.extraCssText,
+      confine: (tooltip == null ? void 0 : tooltip.confine) ?? true,
+      formatter: tooltip == null ? void 0 : tooltip.formatter
+    } : void 0,
+    // Legend - ultra-compact styling for maximum chart space
+    legend: showLegend ? {
+      show: true,
+      type: "scroll",
+      orient: (legend == null ? void 0 : legend.orient) || "horizontal",
+      left: (legend == null ? void 0 : legend.position) === "left" ? "left" : (legend == null ? void 0 : legend.position) === "right" ? "right" : "center",
+      top: legendAtTop ? 4 : void 0,
+      bottom: legendAtBottom ? 2 : void 0,
+      padding: [2, 6],
+      itemGap: 8,
+      itemWidth: 12,
+      itemHeight: 6,
+      textStyle: {
+        ...theme.legend.textStyle,
+        fontSize: 10
+        // Ultra-compact for maximum chart space
+      },
+      inactiveColor: theme.legend.inactiveColor,
+      selectedMode: (legend == null ? void 0 : legend.interactive) !== false
+    } : { show: false },
+    // Grid - minimal spacing for maximum chart plotting area
+    // When compactAxes is true, axis names are hidden so we need minimal padding
+    // containLabel: true ensures axis tick labels don't get cut off
+    // Extra space only needed for slider zoom (inside zoom is invisible)
+    grid: needsGrid ? {
+      left: compactAxes ? 8 : 40,
+      right: Array.isArray(yAxis) && yAxis.length > 1 ? compactAxes ? 8 : 40 : 8,
+      top: hasTitle ? hasSubtitle ? 50 : 36 : legendAtTop && showLegend ? 26 : 4,
+      bottom: (legendAtBottom && showLegend ? 26 : 16) + ((zoom == null ? void 0 : zoom.type) === "slider" || (zoom == null ? void 0 : zoom.type) === "both" ? 26 : 0),
+      containLabel: true
+    } : void 0,
+    // X Axis - compact font sizes for more chart space
+    // In compact mode, hide axis name (shown in tooltip instead)
+    xAxis: needsGrid ? {
+      type: (xAxis == null ? void 0 : xAxis.type) || "time",
+      name: compactAxes ? void 0 : xAxis == null ? void 0 : xAxis.name,
+      nameLocation: (xAxis == null ? void 0 : xAxis.nameLocation) || "middle",
+      nameGap: 18,
+      nameTextStyle: {
+        ...theme.xAxis.nameTextStyle,
+        fontSize: 10,
+        // Ultra-compact for maximum chart space
+        fontWeight: 500
+      },
+      min: xAxis == null ? void 0 : xAxis.min,
+      max: xAxis == null ? void 0 : xAxis.max,
+      axisLine: {
+        show: (xAxis == null ? void 0 : xAxis.showLine) !== false,
+        lineStyle: theme.xAxis.axisLine.lineStyle
+      },
+      axisTick: {
+        lineStyle: theme.xAxis.axisTick.lineStyle
+      },
+      axisLabel: {
+        ...theme.xAxis.axisLabel,
+        fontSize: 10,
+        // Ultra-compact for maximum chart space
+        formatter: xAxis == null ? void 0 : xAxis.labelFormatter,
+        // Prevent label overlap - auto-hide overlapping labels
+        hideOverlap: true,
+        // Rotate labels slightly if needed for better fit
+        rotate: 0,
+        // Show fewer labels when space is tight
+        interval: "auto"
+      },
+      splitLine: {
+        show: (xAxis == null ? void 0 : xAxis.showGrid) !== false,
+        lineStyle: { ...theme.xAxis.splitLine.lineStyle, type: theme.xAxis.splitLine.lineStyle.type ?? "solid" }
+      },
+      inverse: xAxis == null ? void 0 : xAxis.inverse
+    } : void 0,
+    // Y Axis - ultra-compact font sizes for maximum chart space
+    // In compact mode, hide axis name (shown in tooltip instead)
+    yAxis: needsGrid ? (Array.isArray(yAxis) ? yAxis : [yAxis || {}]).map((axis, i) => ({
+      type: (axis == null ? void 0 : axis.type) || "value",
+      name: compactAxes ? void 0 : axis == null ? void 0 : axis.name,
+      nameLocation: (axis == null ? void 0 : axis.nameLocation) || "middle",
+      nameGap: 28,
+      nameTextStyle: {
+        ...theme.yAxis.nameTextStyle,
+        fontSize: 10,
+        // Ultra-compact for maximum chart space
+        fontWeight: 500
+      },
+      position: (axis == null ? void 0 : axis.position) || (i === 0 ? "left" : "right"),
+      min: axis == null ? void 0 : axis.min,
+      max: axis == null ? void 0 : axis.max,
+      splitNumber: axis == null ? void 0 : axis.splitNumber,
+      axisLine: {
+        show: (axis == null ? void 0 : axis.showLine) !== false,
+        lineStyle: theme.yAxis.axisLine.lineStyle
+      },
+      axisTick: {
+        lineStyle: theme.yAxis.axisTick.lineStyle
+      },
+      axisLabel: {
+        ...theme.yAxis.axisLabel,
+        fontSize: 10,
+        // Ultra-compact for maximum chart space
+        formatter: (axis == null ? void 0 : axis.labelFormatter) ? axis.labelFormatter : (axis == null ? void 0 : axis.unit) ? (v) => `${v}${axis.unit}` : void 0
+      },
+      splitLine: {
+        show: (axis == null ? void 0 : axis.showGrid) !== false,
+        lineStyle: theme.yAxis.splitLine.lineStyle
+      },
+      inverse: axis == null ? void 0 : axis.inverse
+    })) : void 0,
+    // Radar (for radar charts) - transparent background for glassmorphic look
+    radar: isPolar ? {
+      indicator: ((_g = (_f = series[0]) == null ? void 0 : _f.data) == null ? void 0 : _g.map((d) => {
+        const point = d;
+        return {
+          name: point.label || point.category || String(point.x),
+          max: 100
+        };
+      })) || [],
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ["transparent", "transparent", "transparent", "transparent", "transparent"]
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: theme.xAxis.splitLine.lineStyle.color,
+          opacity: 0.4
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: theme.xAxis.axisLine.lineStyle.color,
+          opacity: 0.4
+        }
+      },
+      axisName: {
+        color: theme.xAxis.axisLabel.color,
+        fontSize: 12
+      }
+    } : void 0,
+    // Data Zoom - inside zoom enabled by default for mouse wheel/pinch
+    // Use zoom={{ enabled: false }} to disable, or zoom={{ type: 'slider' }} for slider
+    dataZoom: (zoom == null ? void 0 : zoom.enabled) === false ? void 0 : [
+      // Inside zoom (mouse wheel / pinch) - ENABLED BY DEFAULT
+      ...(zoom == null ? void 0 : zoom.type) === "inside" || (zoom == null ? void 0 : zoom.type) === "both" || !(zoom == null ? void 0 : zoom.type) ? [{
+        type: "inside",
+        xAxisIndex: (zoom == null ? void 0 : zoom.axis) === "x" || (zoom == null ? void 0 : zoom.axis) === "both" || !(zoom == null ? void 0 : zoom.axis) ? 0 : void 0,
+        yAxisIndex: (zoom == null ? void 0 : zoom.axis) === "y" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
+        start: (zoom == null ? void 0 : zoom.start) ?? 0,
+        end: (zoom == null ? void 0 : zoom.end) ?? 100,
+        minSpan: zoom == null ? void 0 : zoom.minSpan,
+        maxSpan: zoom == null ? void 0 : zoom.maxSpan,
+        // Smooth zoom animation
+        throttle: 50
+      }] : [],
+      // Slider zoom (only when explicitly requested)
+      ...(zoom == null ? void 0 : zoom.type) === "slider" || (zoom == null ? void 0 : zoom.type) === "both" ? [{
+        type: "slider",
+        show: true,
+        xAxisIndex: (zoom == null ? void 0 : zoom.axis) === "x" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
+        yAxisIndex: (zoom == null ? void 0 : zoom.axis) === "y" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
+        start: (zoom == null ? void 0 : zoom.start) ?? 0,
+        end: (zoom == null ? void 0 : zoom.end) ?? 100,
+        minSpan: zoom == null ? void 0 : zoom.minSpan,
+        maxSpan: zoom == null ? void 0 : zoom.maxSpan,
+        backgroundColor: theme.dataZoom.backgroundColor,
+        borderColor: theme.dataZoom.borderColor,
+        fillerColor: theme.dataZoom.fillerColor,
+        handleStyle: { color: theme.dataZoom.handleColor },
+        textStyle: theme.dataZoom.textStyle,
+        height: 25,
+        bottom: 10
+      }] : []
+    ],
+    // Toolbox (export) – always use custom dropdown for consistent UI
+    toolbox: ((_h = props.export) == null ? void 0 : _h.enabled) ? (() => {
+      var _a2;
+      return {
+        show: false,
+        // Hide ECharts toolbox, use custom export button instead
+        right: 20,
+        top: 10,
+        feature: {
+          dataView: ((_a2 = props.export.formats) == null ? void 0 : _a2.includes("json")) ? {
+            show: true,
+            readOnly: true
+          } : void 0
+        },
+        iconStyle: {
+          borderColor: theme.textStyle.color
+        }
+      };
+    })() : void 0,
+    // Series
+    series: transformSeriesToECharts(series, type, theme),
+    // Animation
+    animation: !loading,
+    animationDuration: 300,
+    animationEasing: "cubicOut"
+  };
+  if ((annotations == null ? void 0 : annotations.markLines) && options.series) {
+    const seriesArray = options.series;
+    if (seriesArray.length > 0) {
+      seriesArray[0].markLine = {
+        silent: true,
+        symbol: "none",
+        data: annotations.markLines.data.map((line) => {
+          var _a2, _b2;
+          return {
+            ...line,
+            lineStyle: {
+              color: line.color || theme.color[2],
+              type: ((_a2 = line.lineStyle) == null ? void 0 : _a2.type) || "dashed",
+              width: ((_b2 = line.lineStyle) == null ? void 0 : _b2.width) || 1
+            },
+            label: {
+              show: !!line.label,
+              formatter: line.label,
+              position: "middle",
+              // center of line so label doesn't overlap y-axis at bottom
+              distance: 8,
+              color: theme.textStyle.color,
+              fontWeight: 600,
+              fontSize: 11,
+              textBorderWidth: 0,
+              textBorderColor: "transparent",
+              backgroundColor: theme.tooltip.backgroundColor,
+              borderColor: line.color || theme.color[2],
+              borderWidth: 1,
+              borderRadius: 4,
+              padding: [2, 6]
+            }
+          };
+        })
+      };
+    }
+  }
+  if ((annotations == null ? void 0 : annotations.markAreas) && options.series) {
+    const seriesArray = options.series;
+    const axisLabelColor = ((_j = (_i = theme.xAxis) == null ? void 0 : _i.axisLabel) == null ? void 0 : _j.color) ?? ((_k = theme.textStyle) == null ? void 0 : _k.color) ?? "#94a3b8";
+    const fadedColor = axisLabelColor.startsWith("rgba") ? axisLabelColor : `${axisLabelColor}cc`;
+    const defaultLabelStyle = {
+      show: true,
+      color: fadedColor,
+      fontSize: 11,
+      fontWeight: "500",
+      textBorderWidth: 0,
+      textBorderColor: "transparent",
+      formatter: (params) => {
+        const name = ((params == null ? void 0 : params.name) ?? "") || (typeof (params == null ? void 0 : params.value) === "string" ? params.value : "");
+        if (!name) return "";
+        const icon = name.toLowerCase().includes("eclipse") ? "◐ " : "";
+        return icon ? `${icon}${name}` : name;
+      }
+    };
+    if (seriesArray.length > 0) {
+      seriesArray[0].markArea = {
+        silent: true,
+        data: annotations.markAreas.data.map((pair) => {
+          const [start, end] = pair;
+          return [
+            { ...start, label: { ...defaultLabelStyle, formatter: defaultLabelStyle.formatter } },
+            end
+          ];
+        }),
+        itemStyle: annotations.markAreas.itemStyle
+      };
+    }
+  }
+  if (props.echartsOptions) {
+    return mergeOptions(options, props.echartsOptions);
+  }
+  return options;
+}
+function mergeOptions(base, custom) {
+  let mergedSeries = base.series;
+  if (custom.series) {
+    const baseSeries = base.series || [];
+    const customSeries = custom.series;
+    const allBaseSeriesEmpty = baseSeries.length === 0 || baseSeries.every((s) => {
+      if (!s) return true;
+      if (!s.data) return true;
+      if (Array.isArray(s.data) && s.data.length === 0) return true;
+      return false;
+    });
+    const baseLen = baseSeries.length;
+    const customLen = customSeries.length;
+    if (baseLen === 1 && customLen === 1) {
+      const b = baseSeries[0];
+      const c = customSeries[0];
+      if ((b == null ? void 0 : b.type) === "gauge" && (c == null ? void 0 : c.type) === "gauge") {
+        mergedSeries = customSeries;
+      } else if (allBaseSeriesEmpty) {
+        mergedSeries = customSeries;
+      } else {
+        mergedSeries = [...baseSeries, ...customSeries];
+      }
+    } else if (allBaseSeriesEmpty) {
+      mergedSeries = customSeries;
+    } else {
+      mergedSeries = [...baseSeries, ...customSeries];
+    }
+  }
+  return {
+    ...base,
+    ...custom,
+    series: mergedSeries
+  };
+}
+const AstroChart = memo(forwardRef(
+  function AstroChart2(props, ref) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const {
+      width = "100%",
+      height = 400,
+      loading = false,
+      emptyMessage = "No data available",
+      className = "",
+      style,
+      ariaLabel,
+      onChartReady,
+      onClick,
+      onHover,
+      onZoomChange,
+      onBrushSelect,
+      realTime,
+      series = [],
+      infoTooltip,
+      // Header icon/status system
+      icon,
+      iconStatus,
+      statusMessage,
+      showStatusBadge = false
+    } = props;
+    const chartRef = useRef(null);
+    const { tokens, mode, theme: themeVariant } = useTheme();
+    const isTransparentTheme = themeVariant === "transparent" || themeVariant === "transparent-bold" || themeVariant === "transparent-minimal";
+    const isBoldVariant = themeVariant === "transparent-bold";
+    const isMinimalVariant = themeVariant === "transparent-minimal";
+    const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);
+    const glassAccentColor = tokens.colors.accent.primary;
+    const glassAccentMuted = `${glassAccentColor}66`;
+    const headingConfig = ((_b = (_a = tokens.layout) == null ? void 0 : _a.card) == null ? void 0 : _b.heading) ?? {
+      iconSize: 20,
+      iconSizeCompact: 16,
+      titleFontSize: "1.125rem",
+      titleFontSizeChart: "0.875rem",
+      titleFontWeight: 500,
+      gap: 8
+    };
+    const chartTitleFontSize = headingConfig.titleFontSizeChart ?? headingConfig.titleFontSize;
+    const theme = useMemo(
+      () => createAstroEChartsTheme(tokens, mode, themeVariant),
+      [tokens, mode, themeVariant]
+    );
+    const hideEChartsTitle = !!(icon || props.title);
+    const options = useMemo(
+      () => buildEChartsOptions(props, theme, hideEChartsTitle),
+      [props, theme, hideEChartsTitle]
+    );
+    const getChart = useCallback(() => {
+      var _a2;
+      return (_a2 = chartRef.current) == null ? void 0 : _a2.getEchartsInstance();
+    }, []);
+    const getExportFileName = useCallback((extension, includeTimestamp = true) => {
+      var _a2, _b2;
+      const context = {
+        title: props.title,
+        subtitle: props.subtitle,
+        seriesNames: series.map((s) => s.name),
+        chartType: props.type
+      };
+      let base;
+      if ((_a2 = props.export) == null ? void 0 : _a2.getExportFileName) {
+        base = props.export.getExportFileName(context);
+      } else if ((_b2 = props.export) == null ? void 0 : _b2.fileName) {
+        base = props.export.fileName;
+      } else {
+        base = derivedExportBaseName(props.title, context.seriesNames, props.type);
+      }
+      if (includeTimestamp) {
+        const d = /* @__PURE__ */ new Date();
+        const ts = d.toISOString().slice(0, 19).replace(/[-T:]/g, "").replace(/(\d{8})(\d{6})/, "$1-$2");
+        base = `${base}-${ts}`;
+      }
+      if (extension) base = `${base}.${extension.replace(/^\./, "")}`;
+      return base;
+    }, [props.title, props.subtitle, props.type, props.export, series]);
+    useImperativeHandle(ref, () => ({
+      getChart,
+      resize: () => {
+        var _a2;
+        return (_a2 = getChart()) == null ? void 0 : _a2.resize();
+      },
+      getExportFileName,
+      exportImage: (type = "png", pixelRatio = 2) => {
+        const chart = getChart();
+        if (!chart) return void 0;
+        const imgType = type === "jpg" ? "jpeg" : type;
+        return chart.getDataURL({
+          type: imgType,
+          pixelRatio,
+          backgroundColor: "transparent"
+        });
+      },
+      exportCSV: () => {
+        var _a2, _b2;
+        const rows = [];
+        const headers = ["Index", ...series.map((s) => s.name)];
+        rows.push(headers.join(","));
+        const maxLen = Math.max(...series.map((s) => {
+          var _a3;
+          return ((_a3 = s.data) == null ? void 0 : _a3.length) || 0;
+        }));
+        for (let i = 0; i < maxLen; i++) {
+          const row = [i.toString()];
+          for (const s of series) {
+            const data = s.data;
+            const value = data == null ? void 0 : data[i];
+            if (typeof value === "number") {
+              row.push(value.toString());
+            } else if (Array.isArray(value)) {
+              row.push(((_a2 = value[1]) == null ? void 0 : _a2.toString()) || "");
+            } else if (value && typeof value === "object") {
+              const point = value;
+              row.push(((_b2 = "value" in point ? point.value : point.y) == null ? void 0 : _b2.toString()) || "");
+            } else {
+              row.push("");
+            }
+          }
+          rows.push(row.join(","));
+        }
+        return rows.join("\n");
+      },
+      appendData: (seriesIndex, data) => {
+        var _a2;
+        const chart = getChart();
+        if (!chart) return;
+        const option = chart.getOption();
+        const seriesOpt = (_a2 = option.series) == null ? void 0 : _a2[seriesIndex];
+        if (!seriesOpt) return;
+        const currentData = [...seriesOpt.data || []];
+        const newPoint = "time" in data ? [data.time, data.value] : [data.x, data.y];
+        currentData.push(newPoint);
+        const maxPoints = (realTime == null ? void 0 : realTime.maxPoints) || 1e3;
+        while (currentData.length > maxPoints) {
+          currentData.shift();
+        }
+        chart.setOption({
+          series: [{
+            data: currentData
+          }]
+        }, {
+          replaceMerge: ["series"]
+        });
+      },
+      clearData: () => {
+        const chart = getChart();
+        if (!chart) return;
+        chart.setOption({
+          series: series.map(() => ({ data: [] }))
+        });
+      },
+      dispatchAction: (action) => {
+        var _a2;
+        (_a2 = getChart()) == null ? void 0 : _a2.dispatchAction(action);
+      }
+    }), [getChart, series, realTime]);
+    const handleEvents = useMemo(() => {
+      const events = {};
+      if (onClick) {
+        events.click = (params) => {
+          onClick(params);
+        };
+      }
+      if (onHover) {
+        events.mouseover = (params) => {
+          onHover(params);
+        };
+      }
+      if (onZoomChange) {
+        events.datazoom = (params) => {
+          var _a2, _b2, _c2, _d2;
+          const p = params;
+          onZoomChange({
+            start: ((_b2 = (_a2 = p.batch) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.start) ?? p.start ?? 0,
+            end: ((_d2 = (_c2 = p.batch) == null ? void 0 : _c2[0]) == null ? void 0 : _d2.end) ?? p.end ?? 100
+          });
+        };
+      }
+      if (onBrushSelect) {
+        events.brushselected = (params) => {
+          onBrushSelect(params);
+        };
+      }
+      return events;
+    }, [onClick, onHover, onZoomChange, onBrushSelect]);
+    const handleChartReady = useCallback((chart) => {
+      onChartReady == null ? void 0 : onChartReady(chart);
+    }, [onChartReady]);
+    const exportFormats = ((_c = props.export) == null ? void 0 : _c.formats) ?? ["png"];
+    const useCustomExportDropdown = (_d = props.export) == null ? void 0 : _d.enabled;
+    const [exportMenuOpen, setExportMenuOpen] = useState(false);
+    const exportMenuRef = useRef(null);
+    const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
+    const infoTooltipRef = useRef(null);
+    useEffect(() => {
+      if (!infoTooltip || !infoTooltipOpen) return;
+      const handleClickOutside = (e) => {
+        if (infoTooltipRef.current && !infoTooltipRef.current.contains(e.target)) {
+          setInfoTooltipOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [infoTooltip, infoTooltipOpen]);
+    useEffect(() => {
+      if (!useCustomExportDropdown || !exportMenuOpen) return;
+      const handleClickOutside = (e) => {
+        if (exportMenuRef.current && !exportMenuRef.current.contains(e.target)) {
+          setExportMenuOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [useCustomExportDropdown, exportMenuOpen]);
+    const handleExportFormat = useCallback((format) => {
+      var _a2, _b2, _c2, _d2;
+      const chart = getChart();
+      if (format === "csv") {
+        const rows = [];
+        const headers = ["Index", ...series.map((s) => s.name)];
+        rows.push(headers.join(","));
+        const maxLen = Math.max(...series.map((s) => {
+          var _a3;
+          return ((_a3 = s.data) == null ? void 0 : _a3.length) || 0;
+        }));
+        for (let i = 0; i < maxLen; i++) {
+          const row = [i.toString()];
+          for (const s of series) {
+            const data = s.data;
+            const value = data == null ? void 0 : data[i];
+            if (typeof value === "number") row.push(value.toString());
+            else if (Array.isArray(value)) row.push(((_a2 = value[1]) == null ? void 0 : _a2.toString()) || "");
+            else if (value && typeof value === "object") {
+              const point = value;
+              row.push(((_b2 = "value" in point ? point.value : point.y) == null ? void 0 : _b2.toString()) || "");
+            } else row.push("");
+          }
+          rows.push(row.join(","));
+        }
+        const csv = rows.join("\n");
+        const filename = getExportFileName("csv", true);
+        const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+      } else if (chart) {
+        const imgType = format === "jpeg" ? "jpeg" : format;
+        const dataUrl = chart.getDataURL({
+          type: imgType,
+          pixelRatio: ((_c2 = props.export) == null ? void 0 : _c2.pixelRatio) || 2,
+          backgroundColor: ((_d2 = props.export) == null ? void 0 : _d2.backgroundColor) || "transparent"
+        });
+        if (dataUrl) {
+          const ext = format === "jpeg" ? "jpg" : format;
+          const filename = getExportFileName(ext, true);
+          const a = document.createElement("a");
+          a.href = dataUrl;
+          a.download = filename;
+          a.click();
+        }
+      }
+      setExportMenuOpen(false);
+    }, [getChart, series, getExportFileName, (_e = props.export) == null ? void 0 : _e.pixelRatio, (_f = props.export) == null ? void 0 : _f.backgroundColor]);
+    useEffect(() => {
+      var _a2;
+      const chart = getChart();
+      if (!chart) return;
+      let mounted = true;
+      const resizeObserver = new ResizeObserver(() => {
+        if (!mounted) return;
+        try {
+          chart.resize();
+        } catch {
+        }
+      });
+      const container = (_a2 = chartRef.current) == null ? void 0 : _a2.ele;
+      if (container) {
+        resizeObserver.observe(container);
+      }
+      return () => {
+        mounted = false;
+        resizeObserver.disconnect();
+      };
+    }, [getChart]);
+    const needs3DCanvas = useMemo(() => {
+      const eo = props.echartsOptions;
+      if (!eo) return false;
+      if (eo.grid3D || eo.xAxis3D || eo.yAxis3D || eo.zAxis3D || eo.globe || eo.geo3D) return true;
+      if (Array.isArray(eo.series)) {
+        return eo.series.some((s) => {
+          const t = (s == null ? void 0 : s.type) || "";
+          return t.includes("3D") || t.includes("3d") || t === "scatter3D" || t === "bar3D" || t === "surface" || t === "lines3D";
+        });
+      }
+      return false;
+    }, [props.echartsOptions]);
+    const hasSeriesData = series.some((s) => s.data && s.data.length > 0);
+    const hasEchartsOptionsSeries = ((_g = props.echartsOptions) == null ? void 0 : _g.series) && (Array.isArray(props.echartsOptions.series) ? props.echartsOptions.series.length > 0 : props.echartsOptions.series !== void 0);
+    const hasData = hasSeriesData || hasEchartsOptionsSeries;
+    const getStatusColor = (status) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2;
+      switch (status) {
+        case "critical":
+          return ((_a2 = tokens.colors.status) == null ? void 0 : _a2.critical) || "#ff3838";
+        case "serious":
+          return ((_b2 = tokens.colors.status) == null ? void 0 : _b2.serious) || "#ffb302";
+        case "caution":
+          return ((_c2 = tokens.colors.status) == null ? void 0 : _c2.caution) || "#fce83a";
+        case "normal":
+          return ((_d2 = tokens.colors.status) == null ? void 0 : _d2.normal) || "#56f000";
+        case "standby":
+          return ((_e2 = tokens.colors.status) == null ? void 0 : _e2.standby) || "#2dccff";
+        case "off":
+          return ((_f2 = tokens.colors.status) == null ? void 0 : _f2.off) || "#a4abb6";
+        default:
+          return tokens.colors.text.secondary;
+      }
+    };
+    const hasHeader = !!(icon || props.title);
+    const useGlassMode = isBoldVariant || isMinimalVariant;
+    const containerStyle = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height,
+      borderRadius: tokens.borderRadius.lg,
+      padding: tokens.spacing.sm,
+      position: "relative",
+      overflow: "hidden",
+      // Glass mode styling for bold/minimal (matching Container)
+      ...useGlassMode ? {
+        backgroundColor: "rgba(10, 15, 25, 0.35)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        border: `1px solid ${glassAccentMuted}`,
+        borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,
+        transition: "all 0.3s ease-out, box-shadow 0.3s ease-out"
+      } : isTransparentTheme ? {
+        // Regular transparent (glass) theme — match top cards (ISS): transparent + blur
+        backgroundColor: "transparent",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        ...cardBorderStyle
+      } : {
+        // Non-transparent themes — use same border as Container (muted) so chart doesn't stand out
+        backgroundColor: tokens.colors.background.surface,
+        border: `1px solid ${tokens.colors.border.muted}`
+      },
+      ...style
+    };
+    const glassGradient = useGlassMode ? `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)` : void 0;
+    if (!hasData && !loading) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `astro-chart astro-chart--empty ${className}`,
+          style: containerStyle,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": ariaLabel || "Empty chart",
+          children: [
+            useGlassMode && glassGradient && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  background: glassGradient,
+                  pointerEvents: "none",
+                  zIndex: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: tokens.colors.text.secondary,
+              fontFamily: tokens.typography.fontFamily.primary,
+              fontSize: tokens.typography.fontSize.sm,
+              position: "relative",
+              zIndex: 1
+            }, children: emptyMessage })
+          ]
+        }
+      );
+    }
+    const exportImageFormats = exportFormats.filter((f) => ["png", "jpeg", "jpg", "svg"].includes(f));
+    const hasCsv = exportFormats.includes("csv");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `astro-chart ${className}`,
+        style: containerStyle,
+        role: "group",
+        "aria-roledescription": "chart",
+        "aria-label": ariaLabel || props.title || "Chart",
+        children: [
+          useGlassMode && glassGradient && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: glassGradient,
+                pointerEvents: "none",
+                zIndex: 0
+              }
+            }
+          ),
+          hasHeader && isBoldVariant && /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: `12px ${tokens.spacing.sm} 0`
+            }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: headingConfig.gap }, children: [
+              icon && iconStatus && /* @__PURE__ */ jsx(
+                HeaderIconWithStatus,
+                {
+                  icon,
+                  size: headingConfig.iconSize,
+                  status: iconStatus,
+                  statusColor: getStatusColor(iconStatus)
+                }
+              ),
+              icon && !iconStatus && /* @__PURE__ */ jsx(
+                AstroIcon,
+                {
+                  name: icon,
+                  size: headingConfig.iconSize,
+                  color: glassAccentColor
+                }
+              ),
+              props.title && /* @__PURE__ */ jsx("h3", { style: {
+                margin: 0,
+                fontSize: chartTitleFontSize,
+                fontWeight: headingConfig.titleFontWeight,
+                color: glassAccentColor,
+                letterSpacing: "0.5px",
+                textShadow: `0 0 20px ${glassAccentMuted}`
+              }, children: props.title })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: `10px ${tokens.spacing.sm} 0`,
+              marginBottom: tokens.spacing.xs
+            }, children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                flex: 1,
+                height: "2px",
+                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 50%, transparent 100%)`,
+                boxShadow: `0 0 8px ${glassAccentMuted}`
+              } }),
+              showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "2px 8px",
+                fontSize: "0.625rem",
+                // 10px in rem
+                fontWeight: 500,
+                // AstroUXDS medium (not 600)
+                letterSpacing: "0.05em",
+                color: getStatusColor(iconStatus),
+                backgroundColor: `${getStatusColor(iconStatus)}20`,
+                border: `1px solid ${getStatusColor(iconStatus)}40`,
+                borderRadius: "3px",
+                whiteSpace: "nowrap"
+              }, children: [
+                STATUS_SHAPES[iconStatus](6, getStatusColor(iconStatus)),
+                STATUS_LABELS[iconStatus]
+              ] })
+            ] })
+          ] }),
+          hasHeader && isMinimalVariant && /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            padding: `${tokens.spacing.xs} ${tokens.spacing.sm} 0`,
+            marginBottom: tokens.spacing.xs,
+            position: "relative",
+            zIndex: 1
+          }, children: [
+            icon && iconStatus && /* @__PURE__ */ jsx(
+              HeaderIconWithStatus,
+              {
+                icon,
+                size: headingConfig.iconSizeCompact,
+                status: iconStatus,
+                statusColor: getStatusColor(iconStatus),
+                style: { marginRight: tokens.spacing.sm }
+              }
+            ),
+            icon && !iconStatus && /* @__PURE__ */ jsx(
+              AstroIcon,
+              {
+                name: icon,
+                size: headingConfig.iconSizeCompact,
+                color: glassAccentColor,
+                style: { marginRight: tokens.spacing.sm }
+              }
+            ),
+            props.title && /* @__PURE__ */ jsx("h3", { style: {
+              margin: 0,
+              fontSize: chartTitleFontSize,
+              fontWeight: headingConfig.titleFontWeight,
+              color: glassAccentColor,
+              textShadow: `0 0 16px ${glassAccentMuted}`,
+              letterSpacing: "0.02em",
+              whiteSpace: "nowrap",
+              marginRight: "12px"
+            }, children: props.title }),
+            /* @__PURE__ */ jsxs("div", { style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              gap: headingConfig.gap,
+              minWidth: 40
+            }, children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                flex: 1,
+                height: "1px",
+                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`
+              } }),
+              showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "3px",
+                padding: "1px 6px",
+                fontSize: "0.5625rem",
+                // 9px in rem (micro)
+                fontWeight: 500,
+                // AstroUXDS medium (not 600)
+                letterSpacing: "0.05em",
+                color: getStatusColor(iconStatus),
+                backgroundColor: `${getStatusColor(iconStatus)}15`,
+                border: `1px solid ${getStatusColor(iconStatus)}30`,
+                borderRadius: "2px",
+                whiteSpace: "nowrap"
+              }, children: [
+                STATUS_SHAPES[iconStatus](5, getStatusColor(iconStatus)),
+                STATUS_LABELS[iconStatus]
+              ] })
+            ] })
+          ] }),
+          hasHeader && isTransparentTheme && !useGlassMode && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              title: statusMessage,
+              style: {
+                position: "absolute",
+                top: 6,
+                left: 8,
+                display: "flex",
+                alignItems: "center",
+                gap: headingConfig.gap,
+                zIndex: 10
+              },
+              children: [
+                icon && iconStatus && /* @__PURE__ */ jsx(
+                  HeaderIconWithStatus,
+                  {
+                    icon,
+                    size: headingConfig.iconSizeCompact,
+                    status: iconStatus,
+                    statusColor: getStatusColor(iconStatus)
+                  }
+                ),
+                icon && !iconStatus && /* @__PURE__ */ jsx(
+                  AstroIcon,
+                  {
+                    name: icon,
+                    size: headingConfig.iconSizeCompact,
+                    color: tokens.colors.text.tertiary
+                  }
+                ),
+                props.title && /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: chartTitleFontSize,
+                  fontWeight: headingConfig.titleFontWeight,
+                  color: tokens.colors.text.primary
+                }, children: props.title })
+              ]
+            }
+          ),
+          hasHeader && !isTransparentTheme && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              title: statusMessage,
+              style: {
+                position: "absolute",
+                top: 6,
+                left: 8,
+                display: "flex",
+                alignItems: "center",
+                gap: headingConfig.gap,
+                zIndex: 10
+              },
+              children: [
+                icon && iconStatus && /* @__PURE__ */ jsx(
+                  HeaderIconWithStatus,
+                  {
+                    icon,
+                    size: headingConfig.iconSizeCompact,
+                    status: iconStatus,
+                    statusColor: getStatusColor(iconStatus)
+                  }
+                ),
+                icon && !iconStatus && /* @__PURE__ */ jsx(
+                  AstroIcon,
+                  {
+                    name: icon,
+                    size: headingConfig.iconSizeCompact,
+                    color: tokens.colors.text.tertiary
+                  }
+                ),
+                props.title && /* @__PURE__ */ jsx("span", { style: {
+                  fontSize: chartTitleFontSize,
+                  fontWeight: headingConfig.titleFontWeight,
+                  color: tokens.colors.text.primary
+                }, children: props.title })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReactEChartsCore,
+            {
+              ref: chartRef,
+              echarts,
+              option: options,
+              opts: {
+                renderer: props.renderer ?? (needs3DCanvas ? "canvas" : "svg"),
+                ...(props.renderer === "canvas" || needs3DCanvas) && typeof window !== "undefined" && { devicePixelRatio: window.devicePixelRatio || 1 }
+              },
+              style: { width: "100%", height: "100%" },
+              notMerge: true,
+              lazyUpdate: true,
+              showLoading: loading,
+              loadingOption: {
+                text: "Loading...",
+                color: tokens.colors.accent.primary,
+                textColor: tokens.colors.text.primary,
+                maskColor: isTransparentTheme ? "rgba(10, 15, 25, 0.6)" : `${tokens.colors.background.surface}80`
+              },
+              onEvents: handleEvents,
+              onChartReady: handleChartReady
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: {
+            position: "absolute",
+            right: 8,
+            top: 6,
+            zIndex: 10,
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }, children: [
+            infoTooltip && /* @__PURE__ */ jsxs("div", { ref: infoTooltipRef, style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setInfoTooltipOpen((v) => !v),
+                  "aria-label": "Chart information",
+                  "aria-expanded": infoTooltipOpen,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    padding: 4,
+                    border: `1px solid ${tokens.colors.border.default}`,
+                    borderRadius: "50%",
+                    background: infoTooltipOpen ? tokens.colors.accent.primary : isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
+                    color: infoTooltipOpen ? tokens.colors.background.base : tokens.colors.text.secondary,
+                    cursor: "pointer",
+                    transition: "all 0.15s ease"
+                  },
+                  children: infoTooltip.icon || /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) })
+                }
+              ),
+              infoTooltipOpen && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "tooltip",
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: "100%",
+                    marginTop: 8,
+                    minWidth: 200,
+                    maxWidth: infoTooltip.maxWidth || 300,
+                    padding: "12px 16px",
+                    background: isTransparentTheme ? "rgba(10, 15, 25, 0.85)" : tokens.colors.background.surface,
+                    backdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
+                    border: `1px solid ${tokens.colors.border.default}`,
+                    borderRadius: tokens.borderRadius.md,
+                    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+                    color: tokens.colors.text.primary,
+                    fontFamily: tokens.typography.fontFamily.primary,
+                    fontSize: tokens.typography.fontSize.sm,
+                    lineHeight: 1.5,
+                    zIndex: 20
+                  },
+                  children: infoTooltip.content
+                }
+              )
+            ] }),
+            useCustomExportDropdown && /* @__PURE__ */ jsxs("div", { ref: exportMenuRef, style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setExportMenuOpen((v) => !v),
+                  "aria-haspopup": "true",
+                  "aria-expanded": exportMenuOpen,
+                  "aria-label": "Save chart as",
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    padding: 4,
+                    border: `1px solid ${tokens.colors.border.default}`,
+                    borderRadius: "50%",
+                    background: isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
+                    color: tokens.colors.text.secondary,
+                    cursor: "pointer",
+                    transition: "all 0.15s ease"
+                  },
+                  children: /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                  ] })
+                }
+              ),
+              exportMenuOpen && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "menu",
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: "100%",
+                    marginTop: 4,
+                    minWidth: 120,
+                    padding: 4,
+                    background: tokens.colors.background.surface,
+                    border: `1px solid ${tokens.colors.border.default}`,
+                    borderRadius: tokens.borderRadius.md,
+                    boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
+                  },
+                  children: [
+                    exportImageFormats.map((f) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitem",
+                        onClick: () => handleExportFormat(f === "jpg" ? "jpeg" : f),
+                        style: {
+                          display: "block",
+                          width: "100%",
+                          padding: "8px 12px",
+                          border: "none",
+                          borderRadius: tokens.borderRadius.sm,
+                          background: "transparent",
+                          color: tokens.colors.text.primary,
+                          fontFamily: tokens.typography.fontFamily.primary,
+                          fontSize: tokens.typography.fontSize.sm,
+                          textAlign: "left",
+                          cursor: "pointer"
+                        },
+                        children: f.toUpperCase()
+                      },
+                      f
+                    )),
+                    hasCsv && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitem",
+                        onClick: () => handleExportFormat("csv"),
+                        style: {
+                          display: "block",
+                          width: "100%",
+                          padding: "8px 12px",
+                          border: "none",
+                          borderRadius: tokens.borderRadius.sm,
+                          background: "transparent",
+                          color: tokens.colors.text.primary,
+                          fontFamily: tokens.typography.fontFamily.primary,
+                          fontSize: tokens.typography.fontSize.sm,
+                          textAlign: "left",
+                          cursor: "pointer"
+                        },
+                        children: "CSV"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+));
+export {
+  AstroChart
+};
+//# sourceMappingURL=AstroChart.js.map