@zendir/ui 0.1.0

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

@@ -0,0 +1,488 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AstroChart } from "./AstroChart.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const STATUS_BORDER_COLORS = {
+  off: "#3c3e42",
+  standby: "#285766",
+  normal: "#005a00",
+  caution: "#645600",
+  serious: "#664618",
+  critical: "#661102"
+};
+const StatusShape = ({ status, size, color, borderColor, glow = true }) => {
+  const hasBorder = !!borderColor;
+  const strokeWidth = hasBorder ? 1 : 0;
+  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 4px ${color})` : void 0;
+  const renderShape = () => {
+    switch (status) {
+      case "off":
+        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: color, stroke: borderColor, strokeWidth });
+      case "standby":
+        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" });
+      case "normal":
+        return /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "6",
+            cy: "6",
+            r: hasBorder ? 4.5 : 5,
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "caution":
+        return /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: hasBorder ? 1.5 : 1,
+            y: hasBorder ? 1.5 : 1,
+            width: hasBorder ? 9 : 10,
+            height: hasBorder ? 9 : 10,
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "serious":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: "6,1 11,6 6,11 1,6",
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "critical":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: "6,11 1,2 11,2",
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 12 12",
+      width: size,
+      height: size,
+      style: { filter: glowFilter },
+      children: renderShape()
+    }
+  );
+};
+const STATE_COLORS = {
+  running: "#0d4d4d",
+  // Deep teal
+  safe: "#8b7355",
+  // Brown/gold
+  shutdown: "#1a1a1a"
+  // Near black
+};
+const MODE_COLORS = {
+  none: "#1a2332",
+  inertial: "#1e3a5f",
+  sun: "#8b7355",
+  nadir: "#2d5a4d",
+  velocity: "#2e4a7c",
+  ground: "#4a3d6e"
+};
+const EVENT_COLORS = {
+  scenario: "#ffffff",
+  operator: "#ff6b9d",
+  spacecraft: "#a78bfa",
+  ground: "#4ade80"
+};
+const ECLIPSE_COLOR = "rgba(10, 10, 15, 0.6)";
+function PowerOverviewChart(props) {
+  const {
+    data,
+    events = [],
+    title = "Power - Power Generated",
+    height = 300,
+    showBattery = false,
+    showLegend = false,
+    enableExport = true,
+    className,
+    compact = false,
+    showEventDots = true,
+    showStatus = true,
+    enableZoom = true
+  } = props;
+  const { tokens, mode } = useTheme();
+  const currentStatus = useMemo(() => {
+    if (!data || data.length === 0) return "off";
+    const latest = data[data.length - 1];
+    if (latest.state === "shutdown") return "critical";
+    if (latest.state === "safe") return "caution";
+    if (latest.eclipse) return "serious";
+    return "normal";
+  }, [data]);
+  const chartConfig = useMemo(() => {
+    if (!data || data.length === 0) {
+      return {
+        type: "line",
+        series: [],
+        height
+      };
+    }
+    const times = data.map((d) => typeof d.time === "number" ? d.time : d.time.getTime());
+    const minTime = Math.min(...times);
+    const maxTime = Math.max(...times);
+    const stateRegions = [];
+    let currentState = data[0].state;
+    let regionStart = minTime;
+    data.forEach((point, idx) => {
+      const pointTime = typeof point.time === "number" ? point.time : point.time.getTime();
+      if (point.state !== currentState || idx === data.length - 1) {
+        const regionEnd = idx === data.length - 1 ? maxTime : pointTime;
+        stateRegions.push([
+          {
+            xAxis: regionStart,
+            itemStyle: { color: STATE_COLORS[currentState] }
+          },
+          { xAxis: regionEnd }
+        ]);
+        regionStart = pointTime;
+        currentState = point.state;
+      }
+    });
+    const eclipseRegions = [];
+    let inEclipse = false;
+    let eclipseStart = minTime;
+    data.forEach((point, _idx) => {
+      const pointTime = typeof point.time === "number" ? point.time : point.time.getTime();
+      if (point.eclipse && !inEclipse) {
+        eclipseStart = pointTime;
+        inEclipse = true;
+      } else if (!point.eclipse && inEclipse) {
+        eclipseRegions.push([
+          {
+            xAxis: eclipseStart,
+            itemStyle: { color: ECLIPSE_COLOR }
+          },
+          { xAxis: pointTime }
+        ]);
+        inEclipse = false;
+      }
+    });
+    if (inEclipse) {
+      eclipseRegions.push([
+        {
+          xAxis: eclipseStart,
+          itemStyle: { color: ECLIPSE_COLOR }
+        },
+        { xAxis: maxTime }
+      ]);
+    }
+    const series = [
+      {
+        id: "power",
+        name: "Power (W)",
+        data: data.map((d) => ({
+          time: typeof d.time === "number" ? d.time : d.time.getTime(),
+          value: d.power
+        })),
+        color: "#ffffff",
+        lineStyle: { width: 2 },
+        areaStyle: { opacity: 0.3, color: "rgba(255, 255, 255, 0.2)" },
+        smooth: true,
+        yAxisIndex: 0
+      }
+    ];
+    if (showBattery) {
+      series.push({
+        id: "battery",
+        name: "Battery %",
+        data: data.map((d) => ({
+          time: typeof d.time === "number" ? d.time : d.time.getTime(),
+          value: d.battery ?? 0
+        })),
+        color: "#4ade80",
+        lineStyle: { width: 2, type: "dashed" },
+        smooth: true,
+        yAxisIndex: 1
+      });
+    }
+    const maxPower = Math.max(...data.map((d) => d.power), 100);
+    const eventDots = showEventDots ? events.map((event) => ({
+      coord: [
+        typeof event.time === "number" ? event.time : event.time.getTime(),
+        maxPower * 0.95
+      ],
+      name: event.label,
+      symbol: event.type === "scenario" ? "diamond" : "circle",
+      symbolSize: event.type === "scenario" ? 10 : 8,
+      itemStyle: {
+        color: EVENT_COLORS[event.type],
+        borderColor: tokens.colors.background.base,
+        borderWidth: 2,
+        shadowBlur: 4,
+        shadowColor: EVENT_COLORS[event.type]
+      },
+      label: {
+        show: false
+      },
+      emphasis: {
+        scale: true,
+        itemStyle: {
+          borderWidth: 3,
+          shadowBlur: 8
+        },
+        label: {
+          show: true,
+          fontSize: 12,
+          color: tokens.colors.text.primary,
+          backgroundColor: tokens.colors.background.surface,
+          borderColor: EVENT_COLORS[event.type],
+          borderWidth: 1,
+          padding: [6, 10],
+          borderRadius: 6,
+          formatter: `{b}`
+        }
+      }
+    })) : [];
+    const yAxisConfig = showBattery ? [
+      {
+        type: "value",
+        name: "Power (W)",
+        position: "left",
+        min: 0,
+        splitLine: { show: true }
+      },
+      {
+        type: "value",
+        name: "Battery %",
+        position: "right",
+        min: 0,
+        max: 100,
+        splitLine: { show: false }
+      }
+    ] : {
+      type: "value",
+      name: "Power (W)",
+      min: 0,
+      splitLine: { show: true }
+    };
+    return {
+      type: "area",
+      title,
+      subtitle: compact ? void 0 : `System states, operational modes, eclipse periods, and events`,
+      height,
+      series,
+      xAxis: {
+        type: "time",
+        showGrid: true,
+        splitLine: { show: true }
+      },
+      yAxis: yAxisConfig,
+      tooltip: {
+        enabled: true,
+        trigger: "axis",
+        crosshair: "both",
+        formatter: (params) => {
+          const param = Array.isArray(params) ? params[0] : params;
+          if (!param) return "";
+          const time = new Date(param.data[0]);
+          const dataPoint = data.find((d) => {
+            const t = typeof d.time === "number" ? d.time : d.time.getTime();
+            return t === param.data[0];
+          });
+          let html = `<div style="font-size: 13px; min-width: 220px; font-family: ${tokens.typography.fontFamily.primary};">`;
+          html += `<div style="font-weight: 600; margin-bottom: 10px; color: ${tokens.colors.text.primary}; font-size: 14px;">${time.toLocaleTimeString()}</div>`;
+          if (Array.isArray(params)) {
+            params.forEach((p) => {
+              const value = p.data[1];
+              const seriesName = p.seriesName;
+              const color = p.color;
+              html += `<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">`;
+              html += `<span style="width: 12px; height: 12px; background: ${color}; border-radius: 3px; box-shadow: 0 0 4px ${color};"></span>`;
+              html += `<span style="color: ${tokens.colors.text.secondary};">${seriesName}: <strong style="color: ${tokens.colors.text.primary};">${value.toFixed(1)}</strong></span>`;
+              html += `</div>`;
+            });
+          } else {
+            const value = param.data[1];
+            html += `<div style="margin-bottom: 6px; color: ${tokens.colors.text.secondary};">Power: <strong style="color: ${tokens.colors.text.primary};">${value.toFixed(1)} W</strong></div>`;
+          }
+          if (dataPoint) {
+            html += `<div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid ${tokens.colors.border.muted};">`;
+            html += `<div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 12px;">`;
+            html += `<span style="color: ${tokens.colors.text.muted};">STATE</span>`;
+            html += `<span style="color: ${STATE_COLORS[dataPoint.state]}; font-weight: 600;">${dataPoint.state.toUpperCase()}</span>`;
+            html += `<span style="color: ${tokens.colors.text.muted};">MODE</span>`;
+            html += `<span style="color: ${MODE_COLORS[dataPoint.mode]}; font-weight: 600;">${dataPoint.mode.toUpperCase()}</span>`;
+            if (dataPoint.battery !== void 0) {
+              html += `<span style="color: ${tokens.colors.text.muted};">BATTERY</span>`;
+              html += `<span style="color: ${tokens.colors.text.primary}; font-weight: 600;">${dataPoint.battery.toFixed(1)}%</span>`;
+            }
+            html += `</div>`;
+            if (dataPoint.eclipse) {
+              html += `<div style="color: ${tokens.colors.status.caution}; font-weight: 600; margin-top: 8px; font-size: 12px; display: flex; align-items: center; gap: 6px;">`;
+              html += `<span style="font-weight: 600;">ECLIPSE</span>`;
+              html += `</div>`;
+            }
+            html += `</div>`;
+          }
+          html += `</div>`;
+          return html;
+        }
+      },
+      legend: showLegend ? {
+        show: true,
+        position: "top",
+        orient: "horizontal"
+      } : { show: false },
+      zoom: enableZoom ? {
+        enabled: true,
+        type: "both",
+        axis: "x",
+        start: 0,
+        end: 100
+      } : void 0,
+      annotations: {
+        markAreas: {
+          data: [...stateRegions, ...eclipseRegions],
+          itemStyle: {
+            opacity: 1
+          }
+        },
+        markPoints: eventDots
+      },
+      export: enableExport ? {
+        enabled: true,
+        formats: ["png", "svg", "csv"],
+        getExportFileName: () => `zendir-power-overview-${Date.now()}`
+      } : void 0,
+      infoTooltip: compact ? void 0 : {
+        content: /* @__PURE__ */ jsxs("div", { style: { fontSize: "13px", lineHeight: "1.6" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: 500 }, children: "Interactive Power Timeline" }),
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "4px" }, children: "• Background colors show system states" }),
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "4px" }, children: "• Dark overlays indicate eclipse periods" }),
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "4px" }, children: "• Diamond markers show key events" }),
+          /* @__PURE__ */ jsx("div", { children: "• Scroll to zoom, drag to pan" })
+        ] })
+      },
+      className
+    };
+  }, [data, events, title, height, showBattery, showLegend, enableExport, className, compact, showEventDots, enableZoom, tokens]);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+    showStatus && /* @__PURE__ */ jsxs("div", { style: {
+      position: "absolute",
+      top: 10,
+      right: 60,
+      zIndex: 10,
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      padding: "6px 12px",
+      background: tokens.colors.background.surface,
+      border: `1px solid ${tokens.colors.border.default}`,
+      borderRadius: tokens.borderRadius.md,
+      fontSize: tokens.typography.fontSize.xs,
+      fontFamily: tokens.typography.fontFamily.primary
+    }, children: [
+      /* @__PURE__ */ jsx(
+        StatusShape,
+        {
+          status: currentStatus,
+          size: 10,
+          color: tokens.colors.status[currentStatus] || tokens.colors.status.off,
+          borderColor: mode === "light" ? STATUS_BORDER_COLORS[currentStatus] : void 0,
+          glow: mode !== "light"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: {
+        color: tokens.colors.text.primary,
+        fontWeight: 500,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px"
+      }, children: currentStatus })
+    ] }),
+    /* @__PURE__ */ jsx(AstroChart, { ...chartConfig })
+  ] });
+}
+function generateSamplePowerData(durationSeconds = 3600) {
+  const dataPoints = [];
+  const eventList = [];
+  const startTime = Date.now();
+  const interval = 10;
+  let currentState = "running";
+  let currentMode = "inertial";
+  let inEclipse = false;
+  for (let i = 0; i <= durationSeconds; i += interval) {
+    const time = startTime + i * 1e3;
+    if (i === 300) currentState = "safe";
+    if (i === 600) currentState = "running";
+    if (i === 1800) currentState = "shutdown";
+    if (i === 2100) currentState = "running";
+    if (i === 2400) currentState = "safe";
+    if (i === 2700) currentState = "running";
+    if (i === 200) currentMode = "sun";
+    if (i === 500) currentMode = "inertial";
+    if (i === 800) currentMode = "nadir";
+    if (i === 1100) currentMode = "velocity";
+    if (i === 1400) currentMode = "ground";
+    if (i === 1700) currentMode = "sun";
+    if (i === 2e3) currentMode = "inertial";
+    if (i === 2300) currentMode = "nadir";
+    if (i === 2600) currentMode = "velocity";
+    if (i === 2900) currentMode = "ground";
+    if (i === 3200) currentMode = "sun";
+    if (i >= 1700 && i <= 2100) inEclipse = true;
+    else if (i >= 2400 && i <= 2700) inEclipse = true;
+    else inEclipse = false;
+    let battery = 95;
+    if (inEclipse) {
+      battery = 95 - (i - 1700) % 400 * 0.1;
+    } else if (currentMode === "sun") {
+      battery = 70 + Math.sin(i * 0.01) * 15;
+    } else {
+      battery = 90 + Math.sin(i * 5e-3) * 5;
+    }
+    battery = Math.max(10, Math.min(100, battery));
+    let power = 0;
+    if (inEclipse) {
+      power = 0;
+    } else if (currentMode === "sun") {
+      power = 300 + Math.sin(i * 0.02) * 50;
+    } else if (currentMode === "ground" || currentMode === "nadir") {
+      power = 150 + Math.sin(i * 0.03) * 30;
+    } else {
+      power = 50 + Math.sin(i * 0.01) * 20;
+    }
+    if (currentState === "safe") power *= 0.3;
+    if (currentState === "shutdown") power = 0;
+    dataPoints.push({
+      time,
+      power,
+      battery,
+      state: currentState,
+      mode: currentMode,
+      eclipse: inEclipse
+    });
+  }
+  const eventTimes = [250, 420, 550, 900, 1300, 1650, 1850, 2200, 2500, 2800, 3100, 3400];
+  const eventTypes = ["scenario", "operator", "spacecraft", "ground"];
+  eventTimes.forEach((timeOffset, idx) => {
+    eventList.push({
+      time: startTime + timeOffset * 1e3,
+      type: eventTypes[idx % eventTypes.length],
+      label: `Event ${idx + 1}`
+    });
+  });
+  return { data: dataPoints, events: eventList };
+}
+export {
+  PowerOverviewChart,
+  generateSamplePowerData
+};
+//# sourceMappingURL=PowerOverviewChart.js.map

package/dist/react/charts/unified/PowerOverviewChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerOverviewChart.js","sources":["../../../../src/react/charts/unified/PowerOverviewChart.tsx"],"sourcesContent":["/**\n * Power Overview Chart - Combined Timeline Visualization\n * \n * Award-winning UX combining:\n * - Power generation timeline\n * - State regions (Running, Safe, Shutdown)\n * - Mode indicators (Inertial, Sun, Nadir, Velocity, Ground)\n * - Eclipse periods\n * - Event markers with dots on timeline\n * - Interactive tooltips\n * - Status indicators\n * \n * @module @zendir/ui/charts/PowerOverviewChart\n */\n\nimport React, { useMemo } from 'react';\nimport { AstroChart } from './AstroChart';\nimport type { AstroChartProps, ChartStatus } from './types';\nimport { useTheme } from '../../theme';\n\n// =============================================================================\n// Status Shape SVGs - Astro UX compliant (color + shape for accessibility)\n// =============================================================================\n\nconst STATUS_BORDER_COLORS: Record<ChartStatus, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\ninterface StatusShapeProps {\n  status: ChartStatus;\n  size: number;\n  color: string;\n  borderColor?: string;\n  glow?: boolean;\n}\n\nconst StatusShape = ({ status, size, color, borderColor, glow = true }: StatusShapeProps): React.ReactElement => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1 : 0;\n  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 4px ${color})` : undefined;\n  \n  const renderShape = () => {\n    switch (status) {\n      case 'off':\n        return <circle cx=\"6\" cy=\"6\" r={hasBorder ? 2.5 : 3} fill={color} stroke={borderColor} strokeWidth={strokeWidth} />;\n      case 'standby':\n        return <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />;\n      case 'normal':\n        return (\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r={hasBorder ? 4.5 : 5}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'caution':\n        return (\n          <rect\n            x={hasBorder ? 1.5 : 1}\n            y={hasBorder ? 1.5 : 1}\n            width={hasBorder ? 9 : 10}\n            height={hasBorder ? 9 : 10}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'serious':\n        return (\n          <polygon\n            points=\"6,1 11,6 6,11 1,6\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'critical':\n        return (\n          <polygon\n            points=\"6,11 1,2 11,2\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      default:\n        return null;\n    }\n  };\n  \n  return (\n    <svg \n      viewBox=\"0 0 12 12\" \n      width={size} \n      height={size}\n      style={{ filter: glowFilter }}\n    >\n      {renderShape()}\n    </svg>\n  );\n};\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type PowerState = 'running' | 'safe' | 'shutdown';\nexport type OperationalMode = 'none' | 'inertial' | 'sun' | 'nadir' | 'velocity' | 'ground';\nexport type EventType = 'scenario' | 'operator' | 'spacecraft' | 'ground';\n\nexport interface PowerTimelinePoint {\n  /** Timestamp (Unix ms or Date) */\n  time: number | Date;\n  /** Power generated (W) */\n  power: number;\n  /** Battery percentage (0-100) */\n  battery?: number;\n  /** System state */\n  state: PowerState;\n  /** Operational mode */\n  mode: OperationalMode;\n  /** Eclipse flag */\n  eclipse?: boolean;\n}\n\nexport interface PowerEvent {\n  /** Event timestamp */\n  time: number | Date;\n  /** Event type */\n  type: EventType;\n  /** Event label */\n  label: string;\n  /** Optional metadata */\n  meta?: Record<string, unknown>;\n}\n\nexport interface PowerOverviewChartProps {\n  /** Timeline data points */\n  data: PowerTimelinePoint[];\n  /** Event markers */\n  events?: PowerEvent[];\n  /** Chart title */\n  title?: string;\n  /** Chart height */\n  height?: number | string;\n  /** Show battery as secondary series */\n  showBattery?: boolean;\n  /** Show legend */\n  showLegend?: boolean;\n  /** Enable export */\n  enableExport?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Compact mode */\n  compact?: boolean;\n  /** Show event dots on timeline */\n  showEventDots?: boolean;\n  /** Show status indicator */\n  showStatus?: boolean;\n  /** Enable zoom controls */\n  enableZoom?: boolean;\n}\n\n// =============================================================================\n// Color Schemes\n// =============================================================================\n\nconst STATE_COLORS: Record<PowerState, string> = {\n  running: '#0d4d4d',      // Deep teal\n  safe: '#8b7355',         // Brown/gold\n  shutdown: '#1a1a1a',     // Near black\n};\n\nconst MODE_COLORS: Record<OperationalMode, string> = {\n  none: '#1a2332',\n  inertial: '#1e3a5f',\n  sun: '#8b7355',\n  nadir: '#2d5a4d',\n  velocity: '#2e4a7c',\n  ground: '#4a3d6e',\n};\n\nconst EVENT_COLORS: Record<EventType, string> = {\n  scenario: '#ffffff',\n  operator: '#ff6b9d',\n  spacecraft: '#a78bfa',\n  ground: '#4ade80',\n};\n\nconst ECLIPSE_COLOR = 'rgba(10, 10, 15, 0.6)';\n\n// =============================================================================\n// PowerOverviewChart Component\n// =============================================================================\n\nexport function PowerOverviewChart(props: PowerOverviewChartProps) {\n  const {\n    data,\n    events = [],\n    title = 'Power - Power Generated',\n    height = 300,\n    showBattery = false,\n    showLegend = false,\n    enableExport = true,\n    className,\n    compact = false,\n    showEventDots = true,\n    showStatus = true,\n    enableZoom = true,\n  } = props;\n\n  const { tokens, mode } = useTheme();\n\n  // Calculate current status from latest data\n  const currentStatus = useMemo(() => {\n    if (!data || data.length === 0) return 'off';\n    const latest = data[data.length - 1];\n    if (latest.state === 'shutdown') return 'critical';\n    if (latest.state === 'safe') return 'caution';\n    if (latest.eclipse) return 'serious';\n    return 'normal';\n  }, [data]);\n\n  const chartConfig = useMemo<AstroChartProps>(() => {\n    if (!data || data.length === 0) {\n      return {\n        type: 'line',\n        series: [],\n        height,\n      };\n    }\n\n    // Extract time range\n    const times = data.map(d => typeof d.time === 'number' ? d.time : d.time.getTime());\n    const minTime = Math.min(...times);\n    const maxTime = Math.max(...times);\n\n    // Build state regions with proper colors\n    const stateRegions: Array<[{ xAxis: number; itemStyle?: { color: string } }, { xAxis: number }]> = [];\n    let currentState = data[0].state;\n    let regionStart = minTime;\n\n    data.forEach((point, idx) => {\n      const pointTime = typeof point.time === 'number' ? point.time : point.time.getTime();\n      \n      if (point.state !== currentState || idx === data.length - 1) {\n        const regionEnd = idx === data.length - 1 ? maxTime : pointTime;\n        stateRegions.push([\n          { \n            xAxis: regionStart,\n            itemStyle: { color: STATE_COLORS[currentState] }\n          },\n          { xAxis: regionEnd }\n        ]);\n        regionStart = pointTime;\n        currentState = point.state;\n      }\n    });\n\n    // Build eclipse regions (overlay on top of state regions)\n    const eclipseRegions: Array<[{ xAxis: number; itemStyle?: { color: string } }, { xAxis: number }]> = [];\n    let inEclipse = false;\n    let eclipseStart = minTime;\n\n    data.forEach((point, _idx) => {\n      const pointTime = typeof point.time === 'number' ? point.time : point.time.getTime();\n      \n      if (point.eclipse && !inEclipse) {\n        eclipseStart = pointTime;\n        inEclipse = true;\n      } else if (!point.eclipse && inEclipse) {\n        eclipseRegions.push([\n          { \n            xAxis: eclipseStart,\n            itemStyle: { color: ECLIPSE_COLOR }\n          },\n          { xAxis: pointTime }\n        ]);\n        inEclipse = false;\n      }\n    });\n\n    // If still in eclipse at the end\n    if (inEclipse) {\n      eclipseRegions.push([\n        { \n          xAxis: eclipseStart,\n          itemStyle: { color: ECLIPSE_COLOR }\n        },\n        { xAxis: maxTime }\n      ]);\n    }\n\n    // Build series\n    const series: AstroChartProps['series'] = [\n      {\n        id: 'power',\n        name: 'Power (W)',\n        data: data.map(d => ({\n          time: typeof d.time === 'number' ? d.time : d.time.getTime(),\n          value: d.power,\n        })),\n        color: '#ffffff',\n        lineStyle: { width: 2 },\n        areaStyle: { opacity: 0.3, color: 'rgba(255, 255, 255, 0.2)' },\n        smooth: true,\n        yAxisIndex: 0,\n      },\n    ];\n\n    if (showBattery) {\n      series.push({\n        id: 'battery',\n        name: 'Battery %',\n        data: data.map(d => ({\n          time: typeof d.time === 'number' ? d.time : d.time.getTime(),\n          value: d.battery ?? 0,\n        })),\n        color: '#4ade80',\n        lineStyle: { width: 2, type: 'dashed' },\n        smooth: true,\n        yAxisIndex: 1,\n      });\n    }\n\n    // Event markers - use dots for timeline, diamonds for emphasis\n    const maxPower = Math.max(...data.map(d => d.power), 100);\n    \n    // Event dots positioned just above the chart area\n    const eventDots = showEventDots ? events.map(event => ({\n      coord: [\n        typeof event.time === 'number' ? event.time : event.time.getTime(),\n        maxPower * 0.95\n      ] as [number, number],\n      name: event.label,\n      symbol: event.type === 'scenario' ? 'diamond' : 'circle',\n      symbolSize: event.type === 'scenario' ? 10 : 8,\n      itemStyle: {\n        color: EVENT_COLORS[event.type],\n        borderColor: tokens.colors.background.base,\n        borderWidth: 2,\n        shadowBlur: 4,\n        shadowColor: EVENT_COLORS[event.type],\n      },\n      label: {\n        show: false,\n      },\n      emphasis: {\n        scale: true,\n        itemStyle: {\n          borderWidth: 3,\n          shadowBlur: 8,\n        },\n        label: {\n          show: true,\n          fontSize: 12,\n          color: tokens.colors.text.primary,\n          backgroundColor: tokens.colors.background.surface,\n          borderColor: EVENT_COLORS[event.type],\n          borderWidth: 1,\n          padding: [6, 10],\n          borderRadius: 6,\n          formatter: `{b}`,\n        },\n      },\n    })) : [];\n\n    // Dual axis config\n    const yAxisConfig: AstroChartProps['yAxis'] = showBattery ? [\n      {\n        type: 'value',\n        name: 'Power (W)',\n        position: 'left',\n        min: 0,\n        splitLine: { show: true },\n      },\n      {\n        type: 'value',\n        name: 'Battery %',\n        position: 'right',\n        min: 0,\n        max: 100,\n        splitLine: { show: false },\n      },\n    ] : {\n      type: 'value',\n      name: 'Power (W)',\n      min: 0,\n      splitLine: { show: true },\n    };\n\n    return {\n      type: 'area',\n      title,\n      subtitle: compact ? undefined : `System states, operational modes, eclipse periods, and events`,\n      height,\n      series,\n      xAxis: {\n        type: 'time',\n        showGrid: true,\n        splitLine: { show: true },\n      },\n      yAxis: yAxisConfig,\n      tooltip: {\n        enabled: true,\n        trigger: 'axis',\n        crosshair: 'both',\n        formatter: (params: any) => {\n          const param = Array.isArray(params) ? params[0] : params;\n          if (!param) return '';\n          \n          const time = new Date(param.data[0]);\n          const dataPoint = data.find(d => {\n            const t = typeof d.time === 'number' ? d.time : d.time.getTime();\n            return t === param.data[0];\n          });\n          \n          let html = `<div style=\"font-size: 13px; min-width: 220px; font-family: ${tokens.typography.fontFamily.primary};\">`;\n          html += `<div style=\"font-weight: 600; margin-bottom: 10px; color: ${tokens.colors.text.primary}; font-size: 14px;\">${time.toLocaleTimeString()}</div>`;\n          \n          // Power values\n          if (Array.isArray(params)) {\n            params.forEach((p: any) => {\n              const value = p.data[1];\n              const seriesName = p.seriesName;\n              const color = p.color;\n              html += `<div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 6px;\">`;\n              html += `<span style=\"width: 12px; height: 12px; background: ${color}; border-radius: 3px; box-shadow: 0 0 4px ${color};\"></span>`;\n              html += `<span style=\"color: ${tokens.colors.text.secondary};\">${seriesName}: <strong style=\"color: ${tokens.colors.text.primary};\">${value.toFixed(1)}</strong></span>`;\n              html += `</div>`;\n            });\n          } else {\n            const value = param.data[1];\n            html += `<div style=\"margin-bottom: 6px; color: ${tokens.colors.text.secondary};\">Power: <strong style=\"color: ${tokens.colors.text.primary};\">${value.toFixed(1)} W</strong></div>`;\n          }\n          \n          // System info\n          if (dataPoint) {\n            html += `<div style=\"margin-top: 10px; padding-top: 10px; border-top: 1px solid ${tokens.colors.border.muted};\">`;\n            html += `<div style=\"display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 12px;\">`;\n            html += `<span style=\"color: ${tokens.colors.text.muted};\">STATE</span>`;\n            html += `<span style=\"color: ${STATE_COLORS[dataPoint.state]}; font-weight: 600;\">${dataPoint.state.toUpperCase()}</span>`;\n            html += `<span style=\"color: ${tokens.colors.text.muted};\">MODE</span>`;\n            html += `<span style=\"color: ${MODE_COLORS[dataPoint.mode]}; font-weight: 600;\">${dataPoint.mode.toUpperCase()}</span>`;\n            if (dataPoint.battery !== undefined) {\n              html += `<span style=\"color: ${tokens.colors.text.muted};\">BATTERY</span>`;\n              html += `<span style=\"color: ${tokens.colors.text.primary}; font-weight: 600;\">${dataPoint.battery.toFixed(1)}%</span>`;\n            }\n            html += `</div>`;\n            if (dataPoint.eclipse) {\n              html += `<div style=\"color: ${tokens.colors.status.caution}; font-weight: 600; margin-top: 8px; font-size: 12px; display: flex; align-items: center; gap: 6px;\">`;\n              html += `<span style=\"font-weight: 600;\">ECLIPSE</span>`;\n              html += `</div>`;\n            }\n            html += `</div>`;\n          }\n          \n          html += `</div>`;\n          return html;\n        },\n      },\n      legend: showLegend ? {\n        show: true,\n        position: 'top',\n        orient: 'horizontal',\n      } : { show: false },\n      zoom: enableZoom ? {\n        enabled: true,\n        type: 'both',\n        axis: 'x',\n        start: 0,\n        end: 100,\n      } : undefined,\n      annotations: {\n        markAreas: {\n          data: [...stateRegions, ...eclipseRegions],\n          itemStyle: {\n            opacity: 1,\n          },\n        },\n        markPoints: eventDots,\n      },\n      export: enableExport ? {\n        enabled: true,\n        formats: ['png', 'svg', 'csv'],\n        getExportFileName: () => `zendir-power-overview-${Date.now()}`,\n      } : undefined,\n      infoTooltip: compact ? undefined : {\n        content: (\n          <div style={{ fontSize: '13px', lineHeight: '1.6' }}>\n            <div style={{ marginBottom: '8px', fontWeight: 500 }}>Interactive Power Timeline</div>\n            <div style={{ marginBottom: '4px' }}>• Background colors show system states</div>\n            <div style={{ marginBottom: '4px' }}>• Dark overlays indicate eclipse periods</div>\n            <div style={{ marginBottom: '4px' }}>• Diamond markers show key events</div>\n            <div>• Scroll to zoom, drag to pan</div>\n          </div>\n        ),\n      },\n      className,\n    };\n  }, [data, events, title, height, showBattery, showLegend, enableExport, className, compact, showEventDots, enableZoom, tokens]);\n\n  return (\n    <div style={{ position: 'relative', width: '100%' }}>\n      {showStatus && (\n        <div style={{\n          position: 'absolute',\n          top: 10,\n          right: 60,\n          zIndex: 10,\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          padding: '6px 12px',\n          background: tokens.colors.background.surface,\n          border: `1px solid ${tokens.colors.border.default}`,\n          borderRadius: tokens.borderRadius.md,\n          fontSize: tokens.typography.fontSize.xs,\n          fontFamily: tokens.typography.fontFamily.primary,\n        }}>\n          <StatusShape\n            status={currentStatus}\n            size={10}\n            color={tokens.colors.status[currentStatus] || tokens.colors.status.off}\n            borderColor={mode === 'light' ? STATUS_BORDER_COLORS[currentStatus] : undefined}\n            glow={mode !== 'light'}\n          />\n          <span style={{ \n            color: tokens.colors.text.primary,\n            fontWeight: 500,\n            textTransform: 'uppercase',\n            letterSpacing: '0.5px',\n          }}>\n            {currentStatus}\n          </span>\n        </div>\n      )}\n      <AstroChart {...chartConfig} />\n    </div>\n  );\n}\n\n// =============================================================================\n// Sample Data Generator\n// =============================================================================\n\nexport function generateSamplePowerData(durationSeconds = 3600): {\n  data: PowerTimelinePoint[];\n  events: PowerEvent[];\n} {\n  const dataPoints: PowerTimelinePoint[] = [];\n  const eventList: PowerEvent[] = [];\n  \n  const startTime = Date.now();\n  const interval = 10;\n  \n  let currentState: PowerState = 'running';\n  let currentMode: OperationalMode = 'inertial';\n  let inEclipse = false;\n  \n  for (let i = 0; i <= durationSeconds; i += interval) {\n    const time = startTime + i * 1000;\n    \n    // State transitions\n    if (i === 300) currentState = 'safe';\n    if (i === 600) currentState = 'running';\n    if (i === 1800) currentState = 'shutdown';\n    if (i === 2100) currentState = 'running';\n    if (i === 2400) currentState = 'safe';\n    if (i === 2700) currentState = 'running';\n    \n    // Mode transitions\n    if (i === 200) currentMode = 'sun';\n    if (i === 500) currentMode = 'inertial';\n    if (i === 800) currentMode = 'nadir';\n    if (i === 1100) currentMode = 'velocity';\n    if (i === 1400) currentMode = 'ground';\n    if (i === 1700) currentMode = 'sun';\n    if (i === 2000) currentMode = 'inertial';\n    if (i === 2300) currentMode = 'nadir';\n    if (i === 2600) currentMode = 'velocity';\n    if (i === 2900) currentMode = 'ground';\n    if (i === 3200) currentMode = 'sun';\n    \n    // Eclipse periods\n    if (i >= 1700 && i <= 2100) inEclipse = true;\n    else if (i >= 2400 && i <= 2700) inEclipse = true;\n    else inEclipse = false;\n    \n    // Battery\n    let battery = 95;\n    if (inEclipse) {\n      battery = 95 - ((i - 1700) % 400) * 0.1;\n    } else if (currentMode === 'sun') {\n      battery = 70 + Math.sin(i * 0.01) * 15;\n    } else {\n      battery = 90 + Math.sin(i * 0.005) * 5;\n    }\n    battery = Math.max(10, Math.min(100, battery));\n    \n    // Power\n    let power = 0;\n    if (inEclipse) {\n      power = 0;\n    } else if (currentMode === 'sun') {\n      power = 300 + Math.sin(i * 0.02) * 50;\n    } else if (currentMode === 'ground' || currentMode === 'nadir') {\n      power = 150 + Math.sin(i * 0.03) * 30;\n    } else {\n      power = 50 + Math.sin(i * 0.01) * 20;\n    }\n    \n    if (currentState === 'safe') power *= 0.3;\n    if (currentState === 'shutdown') power = 0;\n    \n    dataPoints.push({\n      time,\n      power,\n      battery,\n      state: currentState,\n      mode: currentMode,\n      eclipse: inEclipse,\n    });\n  }\n  \n  // Events\n  const eventTimes = [250, 420, 550, 900, 1300, 1650, 1850, 2200, 2500, 2800, 3100, 3400];\n  const eventTypes: EventType[] = ['scenario', 'operator', 'spacecraft', 'ground'];\n  \n  eventTimes.forEach((timeOffset, idx) => {\n    eventList.push({\n      time: startTime + timeOffset * 1000,\n      type: eventTypes[idx % eventTypes.length],\n      label: `Event ${idx + 1}`,\n    });\n  });\n  \n  return { data: dataPoints, events: eventList };\n}\n\nexport default PowerOverviewChart;\n"],"names":[],"mappings":"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"}