@epilot/spark-ui 0.18.2 → 0.20.0

package/dist/components/power-history.cjs

@@ -1,114 +0,0 @@
-"use client";
-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");
-const require_hooks_use_container_width = require("../hooks/use-container-width.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

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

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

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

@@ -1,114 +0,0 @@
-"use client";
-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 { useContainerWidth } from "../hooks/use-container-width.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

@@ -1 +0,0 @@
-{"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"}