@zendir/ui 0.1.8 → 0.1.10

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

@@ -1,1405 +0,0 @@
-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