@epilot/spark-ui 0.10.0

package/dist/components/power-history.cjs

@@ -0,0 +1,114 @@
+"use client";
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_series_legend = require("./series-legend.cjs");
+const require_components_typography = require("./typography.cjs");
+const require_components_line_chart = require("./line-chart.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/power-history.tsx
+/** Visual config (colors/classes) per series, independent of labels. */
+const SERIES_STYLE = [
+	{
+		id: "production",
+		color: "var(--orange-a9)",
+		strokeClass: "stroke-orange-a9"
+	},
+	{
+		id: "feedin",
+		color: "var(--green-a9)",
+		strokeClass: "stroke-green-a9"
+	},
+	{
+		id: "grid",
+		color: "var(--blue-11)",
+		strokeClass: "stroke-blue-11"
+	},
+	{
+		id: "consumption",
+		color: "var(--neutral-a7)",
+		strokeClass: "stroke-gray-a7"
+	}
+];
+function PowerHistory({ solar, consumption, feedIn, grid, formatDate, title = "Power history", seriesLabels }) {
+	const [chartContainerRef, chartWidth] = require_hooks_use_container_width.useContainerWidth();
+	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const toggleSeries = (0, react.useCallback)((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const dataById = (0, react.useMemo)(() => ({
+		production: solar,
+		feedin: feedIn,
+		grid,
+		consumption
+	}), [
+		consumption,
+		feedIn,
+		grid,
+		solar
+	]);
+	const labelById = (0, react.useMemo)(() => ({
+		production: seriesLabels?.production ?? "Production",
+		feedin: seriesLabels?.feedIn ?? "Feed in",
+		grid: seriesLabels?.grid ?? "Grid",
+		consumption: seriesLabels?.consumption ?? "Consumption"
+	}), [seriesLabels]);
+	const legendItems = (0, react.useMemo)(() => SERIES_STYLE.map((entry) => ({
+		id: entry.id,
+		label: labelById[entry.id],
+		color: entry.color
+	})), [labelById]);
+	const visibleSeries = (0, react.useMemo)(() => SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map((entry) => ({
+		id: entry.id,
+		data: dataById[entry.id],
+		curve: "monotone",
+		className: entry.strokeClass
+	})), [dataById, hiddenSeries]);
+	if (solar.every((s) => s.value === 0) && consumption.every((c) => c.value === 0) && feedIn.every((f) => f.value === 0) && grid.every((g) => g.value === 0)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center justify-between",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_series_legend.SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: chartContainerRef,
+				className: "w-full",
+				style: { minHeight: 200 },
+				children: chartWidth > 0 && visibleSeries.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_line_chart.LineChart, {
+					width: chartWidth,
+					height: 200,
+					margin: {
+						top: 8,
+						right: 8,
+						bottom: 28,
+						left: 8
+					},
+					series: visibleSeries,
+					showGrid: true,
+					showTooltip: true,
+					xTickCount: 5,
+					yTickCount: 4,
+					formatDate,
+					formatValue: (v) => `${require_utils_format.oneDecimalFormat.format(v / 1e3)} kW`
+				})
+			})
+		]
+	});
+}
+//#endregion
+module.exports = PowerHistory;
+
+//# sourceMappingURL=power-history.cjs.map

package/dist/components/power-history.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"power-history.cjs","names":["useContainerWidth","SectionTitle","SeriesLegend","LineChart","kwFormat"],"sources":["../../src/components/power-history.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport { useContainerWidth } from '../hooks/use-container-width'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { oneDecimalFormat as kwFormat } from '../utils/format'\nimport { LineChart } from './line-chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\ninterface PowerHistorySeries {\n  id: string\n  label: string\n  /** CSS color value (e.g. `var(--orange-a9)`). */\n  color: string\n  /** Tailwind stroke class applied to the line (e.g. `stroke-orange-a9`). */\n  strokeClass: string\n  data: { date: Date; value: number }[]\n}\n\n/** Visual config (colors/classes) per series, independent of labels. */\nconst SERIES_STYLE: ReadonlyArray<\n  Pick<PowerHistorySeries, 'id' | 'color' | 'strokeClass'>\n> = [\n  {\n    id: 'production',\n    color: 'var(--orange-a9)',\n    strokeClass: 'stroke-orange-a9',\n  },\n  {\n    id: 'feedin',\n    color: 'var(--green-a9)',\n    strokeClass: 'stroke-green-a9',\n  },\n  {\n    id: 'grid',\n    color: 'var(--blue-11)',\n    strokeClass: 'stroke-blue-11',\n  },\n  {\n    id: 'consumption',\n    color: 'var(--neutral-a7)',\n    strokeClass: 'stroke-gray-a7',\n  },\n]\n\ninterface PowerHistorySeriesLabels {\n  production?: React.ReactNode\n  feedIn?: React.ReactNode\n  grid?: React.ReactNode\n  consumption?: React.ReactNode\n}\n\nexport default function PowerHistory({\n  solar,\n  consumption,\n  feedIn,\n  grid,\n  formatDate,\n  title = 'Power history',\n  seriesLabels,\n}: {\n  solar: { date: Date; value: number }[]\n  consumption: { date: Date; value: number }[]\n  feedIn: { date: Date; value: number }[]\n  grid: { date: Date; value: number }[]\n  formatDate: (date: Date) => string\n  /** Override the section title. Defaults to `\"Power history\"`. */\n  title?: React.ReactNode\n  /** Override the legend labels for each series. Each defaults to its English name. */\n  seriesLabels?: PowerHistorySeriesLabels\n}) {\n  const [chartContainerRef, chartWidth] = useContainerWidth<HTMLDivElement>()\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const dataById = useMemo(\n    () => ({\n      production: solar,\n      feedin: feedIn,\n      grid,\n      consumption,\n    }),\n    [consumption, feedIn, grid, solar],\n  )\n\n  const labelById = useMemo<Record<string, React.ReactNode>>(\n    () => ({\n      production: seriesLabels?.production ?? 'Production',\n      feedin: seriesLabels?.feedIn ?? 'Feed in',\n      grid: seriesLabels?.grid ?? 'Grid',\n      consumption: seriesLabels?.consumption ?? 'Consumption',\n    }),\n    [seriesLabels],\n  )\n\n  const legendItems: SeriesLegendItem[] = useMemo(\n    () =>\n      SERIES_STYLE.map((entry) => ({\n        id: entry.id,\n        label: labelById[entry.id] as string,\n        color: entry.color,\n      })),\n    [labelById],\n  )\n\n  const visibleSeries = useMemo(\n    () =>\n      SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map(\n        (entry) => ({\n          id: entry.id,\n          data: dataById[entry.id as keyof typeof dataById],\n          curve: 'monotone' as const,\n          className: entry.strokeClass,\n        }),\n      ),\n    [dataById, hiddenSeries],\n  )\n\n  const dataEmpty =\n    solar.every((s) => s.value === 0) &&\n    consumption.every((c) => c.value === 0) &&\n    feedIn.every((f) => f.value === 0) &&\n    grid.every((g) => g.value === 0)\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n\n      <div\n        ref={chartContainerRef}\n        className=\"w-full\"\n        style={{ minHeight: 200 }}\n      >\n        {chartWidth > 0 && visibleSeries.length > 0 && (\n          <LineChart\n            width={chartWidth}\n            height={200}\n            margin={{ top: 8, right: 8, bottom: 28, left: 8 }}\n            series={visibleSeries}\n            showGrid\n            showTooltip\n            xTickCount={5}\n            yTickCount={4}\n            formatDate={formatDate}\n            formatValue={(v) => `${kwFormat.format(v / 1000)}${NARROW_NBSP}kW`}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,eAEF;CACF;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;AACF;AASA,SAAwB,aAAa,EACnC,OACA,aACA,QACA,MACA,YACA,QAAQ,iBACR,gBAWC;CACD,MAAM,CAAC,mBAAmB,cAAcA,kCAAAA,kBAAkC;CAC1E,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,gCACb,IAAI,IAAI,CAChB;CAEA,MAAM,gBAAA,GAAA,MAAA,cAA4B,OAAe;EAC/C,iBAAiB,SAAS;GACxB,MAAM,OAAO,IAAI,IAAI,IAAI;GACzB,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;QAEd,KAAK,IAAI,EAAE;GAEb,OAAO;EACT,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,YAAA,GAAA,MAAA,gBACG;EACL,YAAY;EACZ,QAAQ;EACR;EACA;CACF,IACA;EAAC;EAAa;EAAQ;EAAM;CAAK,CACnC;CAEA,MAAM,aAAA,GAAA,MAAA,gBACG;EACL,YAAY,cAAc,cAAc;EACxC,QAAQ,cAAc,UAAU;EAChC,MAAM,cAAc,QAAQ;EAC5B,aAAa,cAAc,eAAe;CAC5C,IACA,CAAC,YAAY,CACf;CAEA,MAAM,eAAA,GAAA,MAAA,eAEF,aAAa,KAAK,WAAW;EAC3B,IAAI,MAAM;EACV,OAAO,UAAU,MAAM;EACvB,OAAO,MAAM;CACf,EAAE,GACJ,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAA,GAAA,MAAA,eAEF,aAAa,QAAQ,UAAU,CAAC,aAAa,IAAI,MAAM,EAAE,CAAC,EAAE,KACzD,WAAW;EACV,IAAI,MAAM;EACV,MAAM,SAAS,MAAM;EACrB,OAAO;EACP,WAAW,MAAM;CACnB,EACF,GACF,CAAC,UAAU,YAAY,CACzB;CAQA,IALE,MAAM,OAAO,MAAM,EAAE,UAAU,CAAC,KAChC,YAAY,OAAO,MAAM,EAAE,UAAU,CAAC,KACtC,OAAO,OAAO,MAAM,EAAE,UAAU,CAAC,KACjC,KAAK,OAAO,MAAM,EAAE,UAAU,CAAC,GAElB,OAAO;CAEtB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,cAAD,EAAA,UAAe,MAAoB,CAAA;GAChC,CAAA;GAEL,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,cAAD;IACE,OAAO;IACP,WAAW;IACX,UAAU;GACX,CAAA;GAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO,EAAE,WAAW,IAAI;cAEvB,aAAa,KAAK,cAAc,SAAS,KACxC,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;KACE,OAAO;KACP,QAAQ;KACR,QAAQ;MAAE,KAAK;MAAG,OAAO;MAAG,QAAQ;MAAI,MAAM;KAAE;KAChD,QAAQ;KACR,UAAA;KACA,aAAA;KACA,YAAY;KACZ,YAAY;KACA;KACZ,cAAc,MAAM,GAAGC,qBAAAA,iBAAS,OAAO,IAAI,GAAI;IAChD,CAAA;GAEA,CAAA;EACF;;AAET"}

package/dist/components/power-history.d.cts

@@ -0,0 +1,40 @@
+"use client";
+
+//#region src/components/power-history.d.ts
+interface PowerHistorySeriesLabels {
+  production?: React.ReactNode;
+  feedIn?: React.ReactNode;
+  grid?: React.ReactNode;
+  consumption?: React.ReactNode;
+}
+declare function PowerHistory({
+  solar,
+  consumption,
+  feedIn,
+  grid,
+  formatDate,
+  title,
+  seriesLabels
+}: {
+  solar: {
+    date: Date;
+    value: number;
+  }[];
+  consumption: {
+    date: Date;
+    value: number;
+  }[];
+  feedIn: {
+    date: Date;
+    value: number;
+  }[];
+  grid: {
+    date: Date;
+    value: number;
+  }[];
+  formatDate: (date: Date) => string; /** Override the section title. Defaults to `"Power history"`. */
+  title?: React.ReactNode; /** Override the legend labels for each series. Each defaults to its English name. */
+  seriesLabels?: PowerHistorySeriesLabels;
+}): import("react/jsx-runtime").JSX.Element | null;
+export = PowerHistory;
+//# sourceMappingURL=power-history.d.cts.map

package/dist/components/power-history.d.ts

@@ -0,0 +1,41 @@
+"use client";
+
+//#region src/components/power-history.d.ts
+interface PowerHistorySeriesLabels {
+  production?: React.ReactNode;
+  feedIn?: React.ReactNode;
+  grid?: React.ReactNode;
+  consumption?: React.ReactNode;
+}
+declare function PowerHistory({
+  solar,
+  consumption,
+  feedIn,
+  grid,
+  formatDate,
+  title,
+  seriesLabels
+}: {
+  solar: {
+    date: Date;
+    value: number;
+  }[];
+  consumption: {
+    date: Date;
+    value: number;
+  }[];
+  feedIn: {
+    date: Date;
+    value: number;
+  }[];
+  grid: {
+    date: Date;
+    value: number;
+  }[];
+  formatDate: (date: Date) => string; /** Override the section title. Defaults to `"Power history"`. */
+  title?: React.ReactNode; /** Override the legend labels for each series. Each defaults to its English name. */
+  seriesLabels?: PowerHistorySeriesLabels;
+}): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { PowerHistory as default };
+//# sourceMappingURL=power-history.d.ts.map

package/dist/components/power-history.js

@@ -0,0 +1,114 @@
+"use client";
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import "../utils/chars.js";
+import { oneDecimalFormat } from "../utils/format.js";
+import { SeriesLegend } from "./series-legend.js";
+import { SectionTitle } from "./typography.js";
+import { LineChart } from "./line-chart.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/power-history.tsx
+/** Visual config (colors/classes) per series, independent of labels. */
+const SERIES_STYLE = [
+	{
+		id: "production",
+		color: "var(--orange-a9)",
+		strokeClass: "stroke-orange-a9"
+	},
+	{
+		id: "feedin",
+		color: "var(--green-a9)",
+		strokeClass: "stroke-green-a9"
+	},
+	{
+		id: "grid",
+		color: "var(--blue-11)",
+		strokeClass: "stroke-blue-11"
+	},
+	{
+		id: "consumption",
+		color: "var(--neutral-a7)",
+		strokeClass: "stroke-gray-a7"
+	}
+];
+function PowerHistory({ solar, consumption, feedIn, grid, formatDate, title = "Power history", seriesLabels }) {
+	const [chartContainerRef, chartWidth] = useContainerWidth();
+	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Set());
+	const toggleSeries = useCallback((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const dataById = useMemo(() => ({
+		production: solar,
+		feedin: feedIn,
+		grid,
+		consumption
+	}), [
+		consumption,
+		feedIn,
+		grid,
+		solar
+	]);
+	const labelById = useMemo(() => ({
+		production: seriesLabels?.production ?? "Production",
+		feedin: seriesLabels?.feedIn ?? "Feed in",
+		grid: seriesLabels?.grid ?? "Grid",
+		consumption: seriesLabels?.consumption ?? "Consumption"
+	}), [seriesLabels]);
+	const legendItems = useMemo(() => SERIES_STYLE.map((entry) => ({
+		id: entry.id,
+		label: labelById[entry.id],
+		color: entry.color
+	})), [labelById]);
+	const visibleSeries = useMemo(() => SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map((entry) => ({
+		id: entry.id,
+		data: dataById[entry.id],
+		curve: "monotone",
+		className: entry.strokeClass
+	})), [dataById, hiddenSeries]);
+	if (solar.every((s) => s.value === 0) && consumption.every((c) => c.value === 0) && feedIn.every((f) => f.value === 0) && grid.every((g) => g.value === 0)) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between",
+				children: /* @__PURE__ */ jsx(SectionTitle, { children: title })
+			}),
+			/* @__PURE__ */ jsx(SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: chartContainerRef,
+				className: "w-full",
+				style: { minHeight: 200 },
+				children: chartWidth > 0 && visibleSeries.length > 0 && /* @__PURE__ */ jsx(LineChart, {
+					width: chartWidth,
+					height: 200,
+					margin: {
+						top: 8,
+						right: 8,
+						bottom: 28,
+						left: 8
+					},
+					series: visibleSeries,
+					showGrid: true,
+					showTooltip: true,
+					xTickCount: 5,
+					yTickCount: 4,
+					formatDate,
+					formatValue: (v) => `${oneDecimalFormat.format(v / 1e3)} kW`
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { PowerHistory as default };
+
+//# sourceMappingURL=power-history.js.map

package/dist/components/power-history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"power-history.js","names":["kwFormat"],"sources":["../../src/components/power-history.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport { useContainerWidth } from '../hooks/use-container-width'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { oneDecimalFormat as kwFormat } from '../utils/format'\nimport { LineChart } from './line-chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\ninterface PowerHistorySeries {\n  id: string\n  label: string\n  /** CSS color value (e.g. `var(--orange-a9)`). */\n  color: string\n  /** Tailwind stroke class applied to the line (e.g. `stroke-orange-a9`). */\n  strokeClass: string\n  data: { date: Date; value: number }[]\n}\n\n/** Visual config (colors/classes) per series, independent of labels. */\nconst SERIES_STYLE: ReadonlyArray<\n  Pick<PowerHistorySeries, 'id' | 'color' | 'strokeClass'>\n> = [\n  {\n    id: 'production',\n    color: 'var(--orange-a9)',\n    strokeClass: 'stroke-orange-a9',\n  },\n  {\n    id: 'feedin',\n    color: 'var(--green-a9)',\n    strokeClass: 'stroke-green-a9',\n  },\n  {\n    id: 'grid',\n    color: 'var(--blue-11)',\n    strokeClass: 'stroke-blue-11',\n  },\n  {\n    id: 'consumption',\n    color: 'var(--neutral-a7)',\n    strokeClass: 'stroke-gray-a7',\n  },\n]\n\ninterface PowerHistorySeriesLabels {\n  production?: React.ReactNode\n  feedIn?: React.ReactNode\n  grid?: React.ReactNode\n  consumption?: React.ReactNode\n}\n\nexport default function PowerHistory({\n  solar,\n  consumption,\n  feedIn,\n  grid,\n  formatDate,\n  title = 'Power history',\n  seriesLabels,\n}: {\n  solar: { date: Date; value: number }[]\n  consumption: { date: Date; value: number }[]\n  feedIn: { date: Date; value: number }[]\n  grid: { date: Date; value: number }[]\n  formatDate: (date: Date) => string\n  /** Override the section title. Defaults to `\"Power history\"`. */\n  title?: React.ReactNode\n  /** Override the legend labels for each series. Each defaults to its English name. */\n  seriesLabels?: PowerHistorySeriesLabels\n}) {\n  const [chartContainerRef, chartWidth] = useContainerWidth<HTMLDivElement>()\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const dataById = useMemo(\n    () => ({\n      production: solar,\n      feedin: feedIn,\n      grid,\n      consumption,\n    }),\n    [consumption, feedIn, grid, solar],\n  )\n\n  const labelById = useMemo<Record<string, React.ReactNode>>(\n    () => ({\n      production: seriesLabels?.production ?? 'Production',\n      feedin: seriesLabels?.feedIn ?? 'Feed in',\n      grid: seriesLabels?.grid ?? 'Grid',\n      consumption: seriesLabels?.consumption ?? 'Consumption',\n    }),\n    [seriesLabels],\n  )\n\n  const legendItems: SeriesLegendItem[] = useMemo(\n    () =>\n      SERIES_STYLE.map((entry) => ({\n        id: entry.id,\n        label: labelById[entry.id] as string,\n        color: entry.color,\n      })),\n    [labelById],\n  )\n\n  const visibleSeries = useMemo(\n    () =>\n      SERIES_STYLE.filter((entry) => !hiddenSeries.has(entry.id)).map(\n        (entry) => ({\n          id: entry.id,\n          data: dataById[entry.id as keyof typeof dataById],\n          curve: 'monotone' as const,\n          className: entry.strokeClass,\n        }),\n      ),\n    [dataById, hiddenSeries],\n  )\n\n  const dataEmpty =\n    solar.every((s) => s.value === 0) &&\n    consumption.every((c) => c.value === 0) &&\n    feedIn.every((f) => f.value === 0) &&\n    grid.every((g) => g.value === 0)\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n\n      <div\n        ref={chartContainerRef}\n        className=\"w-full\"\n        style={{ minHeight: 200 }}\n      >\n        {chartWidth > 0 && visibleSeries.length > 0 && (\n          <LineChart\n            width={chartWidth}\n            height={200}\n            margin={{ top: 8, right: 8, bottom: 28, left: 8 }}\n            series={visibleSeries}\n            showGrid\n            showTooltip\n            xTickCount={5}\n            yTickCount={4}\n            formatDate={formatDate}\n            formatValue={(v) => `${kwFormat.format(v / 1000)}${NARROW_NBSP}kW`}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,eAEF;CACF;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;CACA;EACE,IAAI;EACJ,OAAO;EACP,aAAa;CACf;AACF;AASA,SAAwB,aAAa,EACnC,OACA,aACA,QACA,MACA,YACA,QAAQ,iBACR,gBAWC;CACD,MAAM,CAAC,mBAAmB,cAAc,kBAAkC;CAC1E,MAAM,CAAC,cAAc,mBAAmB,+BAChC,IAAI,IAAI,CAChB;CAEA,MAAM,eAAe,aAAa,OAAe;EAC/C,iBAAiB,SAAS;GACxB,MAAM,OAAO,IAAI,IAAI,IAAI;GACzB,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;QAEd,KAAK,IAAI,EAAE;GAEb,OAAO;EACT,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,eACR;EACL,YAAY;EACZ,QAAQ;EACR;EACA;CACF,IACA;EAAC;EAAa;EAAQ;EAAM;CAAK,CACnC;CAEA,MAAM,YAAY,eACT;EACL,YAAY,cAAc,cAAc;EACxC,QAAQ,cAAc,UAAU;EAChC,MAAM,cAAc,QAAQ;EAC5B,aAAa,cAAc,eAAe;CAC5C,IACA,CAAC,YAAY,CACf;CAEA,MAAM,cAAkC,cAEpC,aAAa,KAAK,WAAW;EAC3B,IAAI,MAAM;EACV,OAAO,UAAU,MAAM;EACvB,OAAO,MAAM;CACf,EAAE,GACJ,CAAC,SAAS,CACZ;CAEA,MAAM,gBAAgB,cAElB,aAAa,QAAQ,UAAU,CAAC,aAAa,IAAI,MAAM,EAAE,CAAC,EAAE,KACzD,WAAW;EACV,IAAI,MAAM;EACV,MAAM,SAAS,MAAM;EACrB,OAAO;EACP,WAAW,MAAM;CACnB,EACF,GACF,CAAC,UAAU,YAAY,CACzB;CAQA,IALE,MAAM,OAAO,MAAM,EAAE,UAAU,CAAC,KAChC,YAAY,OAAO,MAAM,EAAE,UAAU,CAAC,KACtC,OAAO,OAAO,MAAM,EAAE,UAAU,CAAC,KACjC,KAAK,OAAO,MAAM,EAAE,UAAU,CAAC,GAElB,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,cAAD,EAAA,UAAe,MAAoB,CAAA;GAChC,CAAA;GAEL,oBAAC,cAAD;IACE,OAAO;IACP,WAAW;IACX,UAAU;GACX,CAAA;GAED,oBAAC,OAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO,EAAE,WAAW,IAAI;cAEvB,aAAa,KAAK,cAAc,SAAS,KACxC,oBAAC,WAAD;KACE,OAAO;KACP,QAAQ;KACR,QAAQ;MAAE,KAAK;MAAG,OAAO;MAAG,QAAQ;MAAI,MAAM;KAAE;KAChD,QAAQ;KACR,UAAA;KACA,aAAA;KACA,YAAY;KACZ,YAAY;KACA;KACZ,cAAc,MAAM,GAAGA,iBAAS,OAAO,IAAI,GAAI;IAChD,CAAA;GAEA,CAAA;EACF;;AAET"}