@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,488 +1,505 @@
-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"
+import { AstroChart } from "./AstroChart.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/charts/unified/PowerOverviewChart.tsx
+/**
+* Power Overview Chart - Combined Timeline Visualization
+*
+* Award-winning UX combining:
+* - Power generation timeline
+* - State regions (Running, Safe, Shutdown)
+* - Mode indicators (Inertial, Sun, Nadir, Velocity, Ground)
+* - Eclipse periods
+* - Event markers with dots on timeline
+* - Interactive tooltips
+* - Status indicators
+*
+* @module @zendir/ui/charts/PowerOverviewChart
+*/
+var 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()
-    }
-  );
+var 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
+var STATE_COLORS = {
+	running: "#0d4d4d",
+	safe: "#8b7355",
+	shutdown: "#1a1a1a"
 };
-const MODE_COLORS = {
-  none: "#1a2332",
-  inertial: "#1e3a5f",
-  sun: "#8b7355",
-  nadir: "#2d5a4d",
-  velocity: "#2e4a7c",
-  ground: "#4a3d6e"
+var 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"
+var EVENT_COLORS = {
+	scenario: "#ffffff",
+	operator: "#ff6b9d",
+	spacecraft: "#a78bfa",
+	ground: "#4ade80"
 };
-const ECLIPSE_COLOR = "rgba(10, 10, 15, 0.6)";
+var 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 })
-  ] });
+	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: .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 * .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}`
+				}
+			}
+		})) : [];
+		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: 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 }
+			},
+			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) => {
+						return (typeof d.time === "number" ? d.time : d.time.getTime()) === 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 };
+	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 * .1;
+		else if (currentMode === "sun") battery = 70 + Math.sin(i * .01) * 15;
+		else battery = 90 + Math.sin(i * .005) * 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 * .02) * 50;
+		else if (currentMode === "ground" || currentMode === "nadir") power = 150 + Math.sin(i * .03) * 30;
+		else power = 50 + Math.sin(i * .01) * 20;
+		if (currentState === "safe") power *= .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
+//#endregion
+export { PowerOverviewChart, PowerOverviewChart as default, generateSamplePowerData };
+
+//# sourceMappingURL=PowerOverviewChart.js.map