@epilot/spark-ui 1.0.0-alpha.3 → 1.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/attachment.d.cts +1 -1
- package/dist/components/attachment.d.ts +1 -1
- package/dist/components/bar-chart.cjs +48 -47
- package/dist/components/bar-chart.cjs.map +1 -1
- package/dist/components/bar-chart.d.cts +7 -2
- package/dist/components/bar-chart.d.ts +7 -2
- package/dist/components/bar-chart.js +48 -47
- package/dist/components/bar-chart.js.map +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.cjs +1 -1
- package/dist/components/button.cjs.map +1 -1
- package/dist/components/button.d.cts +8 -0
- package/dist/components/button.d.ts +8 -0
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/callout.d.cts +1 -1
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/energy-bar-chart.cjs +2 -1
- package/dist/components/energy-bar-chart.cjs.map +1 -1
- package/dist/components/energy-bar-chart.js +2 -1
- package/dist/components/energy-bar-chart.js.map +1 -1
- package/dist/components/energy-history-chart.cjs +14 -6
- package/dist/components/energy-history-chart.cjs.map +1 -1
- package/dist/components/energy-history-chart.d.cts +11 -3
- package/dist/components/energy-history-chart.d.ts +11 -3
- package/dist/components/energy-history-chart.js +14 -6
- package/dist/components/energy-history-chart.js.map +1 -1
- package/dist/components/field.cjs +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input-group.cjs +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/line-chart.cjs +55 -15
- package/dist/components/line-chart.cjs.map +1 -1
- package/dist/components/line-chart.d.cts +7 -0
- package/dist/components/line-chart.d.ts +7 -0
- package/dist/components/line-chart.js +55 -15
- package/dist/components/line-chart.js.map +1 -1
- package/dist/components/power-history-chart.cjs +14 -37
- package/dist/components/power-history-chart.cjs.map +1 -1
- package/dist/components/power-history-chart.d.cts +10 -1
- package/dist/components/power-history-chart.d.ts +10 -1
- package/dist/components/power-history-chart.js +15 -38
- package/dist/components/power-history-chart.js.map +1 -1
- package/dist/components/sankey-chart.cjs +8 -41
- package/dist/components/sankey-chart.cjs.map +1 -1
- package/dist/components/sankey-chart.d.cts +8 -0
- package/dist/components/sankey-chart.d.ts +8 -0
- package/dist/components/sankey-chart.js +8 -41
- package/dist/components/sankey-chart.js.map +1 -1
- package/dist/components/segmented-control.cjs +44 -0
- package/dist/components/segmented-control.cjs.map +1 -0
- package/dist/components/segmented-control.d.cts +33 -0
- package/dist/components/segmented-control.d.ts +33 -0
- package/dist/components/segmented-control.js +40 -0
- package/dist/components/segmented-control.js.map +1 -0
- package/dist/components/separator.cjs +1 -1
- package/dist/components/separator.cjs.map +1 -1
- package/dist/components/separator.js +1 -1
- package/dist/components/separator.js.map +1 -1
- package/dist/components/solar-forecast-chart.cjs +4 -3
- package/dist/components/solar-forecast-chart.cjs.map +1 -1
- package/dist/components/solar-forecast-chart.d.cts +4 -1
- package/dist/components/solar-forecast-chart.d.ts +4 -1
- package/dist/components/solar-forecast-chart.js +4 -3
- package/dist/components/solar-forecast-chart.js.map +1 -1
- package/dist/components/theme.cjs +1 -1
- package/dist/components/theme.js +1 -1
- package/dist/components/tooltip.cjs +1 -1
- package/dist/components/tooltip.cjs.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/styles/index.css +37 -0
- package/dist/styles/spark-default.css +45 -40
- package/dist/styles/theme.css +78 -0
- package/dist/{theme-B3WtiByA.js → theme-C19BbKfO.js} +2 -2
- package/dist/theme-C19BbKfO.js.map +1 -0
- package/dist/{theme-C9_OSe0S.cjs → theme-CfFWrMEF.cjs} +2 -2
- package/dist/theme-CfFWrMEF.cjs.map +1 -0
- package/dist/utils/build-sankey-nodes.cjs +16 -3
- package/dist/utils/build-sankey-nodes.cjs.map +1 -1
- package/dist/utils/build-sankey-nodes.js +16 -3
- package/dist/utils/build-sankey-nodes.js.map +1 -1
- package/dist/utils/chart-scale.cjs +43 -0
- package/dist/utils/chart-scale.cjs.map +1 -0
- package/dist/utils/chart-scale.d.cts +22 -0
- package/dist/utils/chart-scale.d.ts +22 -0
- package/dist/utils/chart-scale.js +41 -0
- package/dist/utils/chart-scale.js.map +1 -0
- package/package.json +1 -1
- package/dist/theme-B3WtiByA.js.map +0 -1
- package/dist/theme-C9_OSe0S.cjs.map +0 -1
|
@@ -9,24 +9,26 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
9
9
|
/**
|
|
10
10
|
* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
|
|
11
11
|
* (blue) energy sources stacked per bucket, the total height being the energy
|
|
12
|
-
* consumed.
|
|
12
|
+
* consumed. Grid feed-in (translucent blue) dips below the baseline as an
|
|
13
|
+
* export. For cumulative energy (week/month/year views). Thin wrapper over the
|
|
13
14
|
* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
|
|
14
15
|
*/
|
|
15
|
-
function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
|
|
16
|
+
function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
|
|
16
17
|
const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
|
|
18
|
+
const omitted = new Set(omitSeries);
|
|
17
19
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_energy_bar_chart.EnergyBarChart, {
|
|
18
20
|
data,
|
|
19
21
|
series: [
|
|
20
22
|
{
|
|
21
23
|
key: "solar",
|
|
22
24
|
label: labels.solar,
|
|
23
|
-
color: "var(--orange-
|
|
25
|
+
color: "var(--orange-9)",
|
|
24
26
|
getValue: (d) => d.solar
|
|
25
27
|
},
|
|
26
28
|
{
|
|
27
29
|
key: "battery",
|
|
28
30
|
label: labels.battery,
|
|
29
|
-
color: "var(--green-
|
|
31
|
+
color: "var(--green-9)",
|
|
30
32
|
getValue: (d) => d.battery
|
|
31
33
|
},
|
|
32
34
|
{
|
|
@@ -34,8 +36,14 @@ function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels
|
|
|
34
36
|
label: labels.grid,
|
|
35
37
|
color: "var(--blue-9)",
|
|
36
38
|
getValue: (d) => d.grid
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
+
},
|
|
40
|
+
...labels.gridFeedIn !== void 0 ? [{
|
|
41
|
+
key: "gridFeedIn",
|
|
42
|
+
label: labels.gridFeedIn,
|
|
43
|
+
color: "var(--blue-7)",
|
|
44
|
+
getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
|
|
45
|
+
}] : []
|
|
46
|
+
].filter((s) => !omitted.has(s.key)),
|
|
39
47
|
getCategory: (d) => d.bucket,
|
|
40
48
|
title,
|
|
41
49
|
yAxisUnit: unit,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n /** Bucket label/id (e.g. weekday, day-of-month, month). */\n bucket: string\n /** Solar used on-site (kWh, ≥ 0). */\n solar: number\n /** Battery discharged (kWh, ≥ 0). */\n battery: number\n /** Grid imported (kWh, ≥ 0). */\n grid: number\n}\n\nexport interface EnergyHistoryChartProps {\n data: EnergyHistoryDatum[]\n /** Axis/tooltip unit, e.g. \"kWh\". */\n unit: string\n formatValue?: (value: number) => string\n /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n formatBucketLabel?: (bucket: string) => string\n labels: {\n solar: string\n battery: string\n grid: string\n }\n /** Bucket to mark with the current-period dashed line. */\n highlightedBucket?: string\n showHighlightLine?: boolean\n title?: string\n className?: string\n height?: number\n /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n categoryTicks?: string[]\n}\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n data,\n unit,\n formatValue,\n formatBucketLabel,\n labels,\n highlightedBucket,\n showHighlightLine,\n title,\n className,\n height = 260,\n categoryTicks,\n}: EnergyHistoryChartProps) {\n const fmtValue = (value: number) =>\n formatValue\n ? formatValue(value)\n : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n const
|
|
1
|
+
{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n /** Bucket label/id (e.g. weekday, day-of-month, month). */\n bucket: string\n /** Solar used on-site (kWh, ≥ 0). */\n solar: number\n /** Battery discharged (kWh, ≥ 0). */\n battery: number\n /** Grid imported (kWh, ≥ 0). */\n grid: number\n /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n data: EnergyHistoryDatum[]\n /** Axis/tooltip unit, e.g. \"kWh\". */\n unit: string\n formatValue?: (value: number) => string\n /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n formatBucketLabel?: (bucket: string) => string\n labels: {\n solar: string\n battery: string\n grid: string\n /** Optional; when set, grid feed-in is drawn below the baseline. */\n gridFeedIn?: string\n }\n /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n omitSeries?: readonly EnergyHistorySeriesKey[]\n /** Bucket to mark with the current-period dashed line. */\n highlightedBucket?: string\n showHighlightLine?: boolean\n title?: string\n className?: string\n height?: number\n /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n data,\n unit,\n formatValue,\n formatBucketLabel,\n labels,\n omitSeries,\n highlightedBucket,\n showHighlightLine,\n title,\n className,\n height = 260,\n categoryTicks,\n}: EnergyHistoryChartProps) {\n const fmtValue = (value: number) =>\n formatValue\n ? formatValue(value)\n : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n {\n key: 'solar',\n label: labels.solar,\n color: 'var(--orange-9)',\n getValue: (d) => d.solar,\n },\n {\n key: 'battery',\n label: labels.battery,\n color: 'var(--green-9)',\n getValue: (d) => d.battery,\n },\n {\n key: 'grid',\n label: labels.grid,\n color: 'var(--blue-9)',\n getValue: (d) => d.grid,\n },\n ...(labels.gridFeedIn !== undefined\n ? [\n {\n key: 'gridFeedIn',\n label: labels.gridFeedIn,\n color: 'var(--blue-7)',\n getValue: (d: EnergyHistoryDatum) =>\n -Math.max(0, d.gridFeedIn ?? 0),\n },\n ]\n : []),\n ]\n const series = allSeries.filter(\n (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n )\n\n return (\n <EnergyBarChart<EnergyHistoryDatum>\n data={data}\n series={series}\n getCategory={(d) => d.bucket}\n title={title}\n yAxisUnit={unit}\n height={height}\n className={className}\n formatValue={fmtValue}\n categoryTicks={categoryTicks}\n {...(formatBucketLabel && {\n formatTooltipCategory: (category: string | number) =>\n formatBucketLabel(String(category)),\n })}\n totalSuffix={unit}\n totalFormat={{ maximumFractionDigits: 2 }}\n {...(highlightedBucket !== undefined && {\n highlightedCategory: highlightedBucket,\n })}\n {...(showHighlightLine !== undefined && { showHighlightLine })}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,qBAAAA,iBAAY,OAAO,MAAM,IAAiB;CAEnD,MAAM,UAAU,IAAI,IAA4B,WAAW;AAoC3D,QACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,EAAE;IAClC,CACF,GACD,EAAE;GAEgB,CAAC,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,IAA8B,CAMpC;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}
|
|
@@ -12,6 +12,8 @@ interface EnergyHistoryDatum {
|
|
|
12
12
|
battery: number;
|
|
13
13
|
/** Grid imported (kWh, ≥ 0). */
|
|
14
14
|
grid: number;
|
|
15
|
+
/** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
|
|
16
|
+
gridFeedIn?: number;
|
|
15
17
|
}
|
|
16
18
|
interface EnergyHistoryChartProps {
|
|
17
19
|
data: EnergyHistoryDatum[];
|
|
@@ -23,8 +25,11 @@ interface EnergyHistoryChartProps {
|
|
|
23
25
|
labels: {
|
|
24
26
|
solar: string;
|
|
25
27
|
battery: string;
|
|
26
|
-
grid: string;
|
|
28
|
+
grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
|
|
29
|
+
gridFeedIn?: string;
|
|
27
30
|
};
|
|
31
|
+
/** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
|
|
32
|
+
omitSeries?: readonly EnergyHistorySeriesKey[];
|
|
28
33
|
/** Bucket to mark with the current-period dashed line. */
|
|
29
34
|
highlightedBucket?: string;
|
|
30
35
|
showHighlightLine?: boolean;
|
|
@@ -34,10 +39,12 @@ interface EnergyHistoryChartProps {
|
|
|
34
39
|
/** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
|
|
35
40
|
categoryTicks?: string[];
|
|
36
41
|
}
|
|
42
|
+
type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
|
|
37
43
|
/**
|
|
38
44
|
* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
|
|
39
45
|
* (blue) energy sources stacked per bucket, the total height being the energy
|
|
40
|
-
* consumed.
|
|
46
|
+
* consumed. Grid feed-in (translucent blue) dips below the baseline as an
|
|
47
|
+
* export. For cumulative energy (week/month/year views). Thin wrapper over the
|
|
41
48
|
* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
|
|
42
49
|
*/
|
|
43
50
|
declare function EnergyHistoryChart({
|
|
@@ -46,6 +53,7 @@ declare function EnergyHistoryChart({
|
|
|
46
53
|
formatValue,
|
|
47
54
|
formatBucketLabel,
|
|
48
55
|
labels,
|
|
56
|
+
omitSeries,
|
|
49
57
|
highlightedBucket,
|
|
50
58
|
showHighlightLine,
|
|
51
59
|
title,
|
|
@@ -54,5 +62,5 @@ declare function EnergyHistoryChart({
|
|
|
54
62
|
categoryTicks
|
|
55
63
|
}: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
|
|
56
64
|
//#endregion
|
|
57
|
-
export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum };
|
|
65
|
+
export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
|
|
58
66
|
//# sourceMappingURL=energy-history-chart.d.cts.map
|
|
@@ -12,6 +12,8 @@ interface EnergyHistoryDatum {
|
|
|
12
12
|
battery: number;
|
|
13
13
|
/** Grid imported (kWh, ≥ 0). */
|
|
14
14
|
grid: number;
|
|
15
|
+
/** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
|
|
16
|
+
gridFeedIn?: number;
|
|
15
17
|
}
|
|
16
18
|
interface EnergyHistoryChartProps {
|
|
17
19
|
data: EnergyHistoryDatum[];
|
|
@@ -23,8 +25,11 @@ interface EnergyHistoryChartProps {
|
|
|
23
25
|
labels: {
|
|
24
26
|
solar: string;
|
|
25
27
|
battery: string;
|
|
26
|
-
grid: string;
|
|
28
|
+
grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
|
|
29
|
+
gridFeedIn?: string;
|
|
27
30
|
};
|
|
31
|
+
/** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
|
|
32
|
+
omitSeries?: readonly EnergyHistorySeriesKey[];
|
|
28
33
|
/** Bucket to mark with the current-period dashed line. */
|
|
29
34
|
highlightedBucket?: string;
|
|
30
35
|
showHighlightLine?: boolean;
|
|
@@ -34,10 +39,12 @@ interface EnergyHistoryChartProps {
|
|
|
34
39
|
/** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
|
|
35
40
|
categoryTicks?: string[];
|
|
36
41
|
}
|
|
42
|
+
type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
|
|
37
43
|
/**
|
|
38
44
|
* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
|
|
39
45
|
* (blue) energy sources stacked per bucket, the total height being the energy
|
|
40
|
-
* consumed.
|
|
46
|
+
* consumed. Grid feed-in (translucent blue) dips below the baseline as an
|
|
47
|
+
* export. For cumulative energy (week/month/year views). Thin wrapper over the
|
|
41
48
|
* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
|
|
42
49
|
*/
|
|
43
50
|
declare function EnergyHistoryChart({
|
|
@@ -46,6 +53,7 @@ declare function EnergyHistoryChart({
|
|
|
46
53
|
formatValue,
|
|
47
54
|
formatBucketLabel,
|
|
48
55
|
labels,
|
|
56
|
+
omitSeries,
|
|
49
57
|
highlightedBucket,
|
|
50
58
|
showHighlightLine,
|
|
51
59
|
title,
|
|
@@ -54,5 +62,5 @@ declare function EnergyHistoryChart({
|
|
|
54
62
|
categoryTicks
|
|
55
63
|
}: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
|
|
56
64
|
//#endregion
|
|
57
|
-
export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum };
|
|
65
|
+
export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
|
|
58
66
|
//# sourceMappingURL=energy-history-chart.d.ts.map
|
|
@@ -7,24 +7,26 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
/**
|
|
8
8
|
* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
|
|
9
9
|
* (blue) energy sources stacked per bucket, the total height being the energy
|
|
10
|
-
* consumed.
|
|
10
|
+
* consumed. Grid feed-in (translucent blue) dips below the baseline as an
|
|
11
|
+
* export. For cumulative energy (week/month/year views). Thin wrapper over the
|
|
11
12
|
* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
|
|
12
13
|
*/
|
|
13
|
-
function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
|
|
14
|
+
function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
|
|
14
15
|
const fmtValue = (value) => formatValue ? formatValue(value) : `${twoDecimalFormat.format(value)} ${unit}`;
|
|
16
|
+
const omitted = new Set(omitSeries);
|
|
15
17
|
return /* @__PURE__ */ jsx(EnergyBarChart, {
|
|
16
18
|
data,
|
|
17
19
|
series: [
|
|
18
20
|
{
|
|
19
21
|
key: "solar",
|
|
20
22
|
label: labels.solar,
|
|
21
|
-
color: "var(--orange-
|
|
23
|
+
color: "var(--orange-9)",
|
|
22
24
|
getValue: (d) => d.solar
|
|
23
25
|
},
|
|
24
26
|
{
|
|
25
27
|
key: "battery",
|
|
26
28
|
label: labels.battery,
|
|
27
|
-
color: "var(--green-
|
|
29
|
+
color: "var(--green-9)",
|
|
28
30
|
getValue: (d) => d.battery
|
|
29
31
|
},
|
|
30
32
|
{
|
|
@@ -32,8 +34,14 @@ function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels
|
|
|
32
34
|
label: labels.grid,
|
|
33
35
|
color: "var(--blue-9)",
|
|
34
36
|
getValue: (d) => d.grid
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
+
},
|
|
38
|
+
...labels.gridFeedIn !== void 0 ? [{
|
|
39
|
+
key: "gridFeedIn",
|
|
40
|
+
label: labels.gridFeedIn,
|
|
41
|
+
color: "var(--blue-7)",
|
|
42
|
+
getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
|
|
43
|
+
}] : []
|
|
44
|
+
].filter((s) => !omitted.has(s.key)),
|
|
37
45
|
getCategory: (d) => d.bucket,
|
|
38
46
|
title,
|
|
39
47
|
yAxisUnit: unit,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n /** Bucket label/id (e.g. weekday, day-of-month, month). */\n bucket: string\n /** Solar used on-site (kWh, ≥ 0). */\n solar: number\n /** Battery discharged (kWh, ≥ 0). */\n battery: number\n /** Grid imported (kWh, ≥ 0). */\n grid: number\n}\n\nexport interface EnergyHistoryChartProps {\n data: EnergyHistoryDatum[]\n /** Axis/tooltip unit, e.g. \"kWh\". */\n unit: string\n formatValue?: (value: number) => string\n /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n formatBucketLabel?: (bucket: string) => string\n labels: {\n solar: string\n battery: string\n grid: string\n }\n /** Bucket to mark with the current-period dashed line. */\n highlightedBucket?: string\n showHighlightLine?: boolean\n title?: string\n className?: string\n height?: number\n /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n categoryTicks?: string[]\n}\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n data,\n unit,\n formatValue,\n formatBucketLabel,\n labels,\n highlightedBucket,\n showHighlightLine,\n title,\n className,\n height = 260,\n categoryTicks,\n}: EnergyHistoryChartProps) {\n const fmtValue = (value: number) =>\n formatValue\n ? formatValue(value)\n : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n const
|
|
1
|
+
{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n /** Bucket label/id (e.g. weekday, day-of-month, month). */\n bucket: string\n /** Solar used on-site (kWh, ≥ 0). */\n solar: number\n /** Battery discharged (kWh, ≥ 0). */\n battery: number\n /** Grid imported (kWh, ≥ 0). */\n grid: number\n /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n data: EnergyHistoryDatum[]\n /** Axis/tooltip unit, e.g. \"kWh\". */\n unit: string\n formatValue?: (value: number) => string\n /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n formatBucketLabel?: (bucket: string) => string\n labels: {\n solar: string\n battery: string\n grid: string\n /** Optional; when set, grid feed-in is drawn below the baseline. */\n gridFeedIn?: string\n }\n /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n omitSeries?: readonly EnergyHistorySeriesKey[]\n /** Bucket to mark with the current-period dashed line. */\n highlightedBucket?: string\n showHighlightLine?: boolean\n title?: string\n className?: string\n height?: number\n /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n data,\n unit,\n formatValue,\n formatBucketLabel,\n labels,\n omitSeries,\n highlightedBucket,\n showHighlightLine,\n title,\n className,\n height = 260,\n categoryTicks,\n}: EnergyHistoryChartProps) {\n const fmtValue = (value: number) =>\n formatValue\n ? formatValue(value)\n : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n {\n key: 'solar',\n label: labels.solar,\n color: 'var(--orange-9)',\n getValue: (d) => d.solar,\n },\n {\n key: 'battery',\n label: labels.battery,\n color: 'var(--green-9)',\n getValue: (d) => d.battery,\n },\n {\n key: 'grid',\n label: labels.grid,\n color: 'var(--blue-9)',\n getValue: (d) => d.grid,\n },\n ...(labels.gridFeedIn !== undefined\n ? [\n {\n key: 'gridFeedIn',\n label: labels.gridFeedIn,\n color: 'var(--blue-7)',\n getValue: (d: EnergyHistoryDatum) =>\n -Math.max(0, d.gridFeedIn ?? 0),\n },\n ]\n : []),\n ]\n const series = allSeries.filter(\n (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n )\n\n return (\n <EnergyBarChart<EnergyHistoryDatum>\n data={data}\n series={series}\n getCategory={(d) => d.bucket}\n title={title}\n yAxisUnit={unit}\n height={height}\n className={className}\n formatValue={fmtValue}\n categoryTicks={categoryTicks}\n {...(formatBucketLabel && {\n formatTooltipCategory: (category: string | number) =>\n formatBucketLabel(String(category)),\n })}\n totalSuffix={unit}\n totalFormat={{ maximumFractionDigits: 2 }}\n {...(highlightedBucket !== undefined && {\n highlightedCategory: highlightedBucket,\n })}\n {...(showHighlightLine !== undefined && { showHighlightLine })}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,iBAAY,OAAO,MAAM,IAAiB;CAEnD,MAAM,UAAU,IAAI,IAA4B,WAAW;AAoC3D,QACE,oBAAC,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,EAAE;IAClC,CACF,GACD,EAAE;GAEgB,CAAC,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,IAA8B,CAMpC;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const require_chunk = require("../chunk-aJGBMT86.cjs");
|
|
5
5
|
const require_components_separator = require("./separator.cjs");
|
|
6
|
-
const require_theme = require("../theme-
|
|
6
|
+
const require_theme = require("../theme-CfFWrMEF.cjs");
|
|
7
7
|
let react = require("react");
|
|
8
8
|
react = require_chunk.__toESM(react);
|
|
9
9
|
let react_jsx_runtime = require("react/jsx-runtime");
|
package/dist/components/field.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { cn } from "../utils/cn.js";
|
|
4
4
|
import { Separator } from "./separator.js";
|
|
5
|
-
import { n as useTheme } from "../theme-
|
|
5
|
+
import { n as useTheme } from "../theme-C19BbKfO.js";
|
|
6
6
|
import * as React$1 from "react";
|
|
7
7
|
import { useId } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const require_chunk = require("../chunk-aJGBMT86.cjs");
|
|
5
|
-
const require_theme = require("../theme-
|
|
5
|
+
const require_theme = require("../theme-CfFWrMEF.cjs");
|
|
6
6
|
const require_components_field = require("./field.cjs");
|
|
7
7
|
const require_components_input = require("./input.cjs");
|
|
8
8
|
let react = require("react");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
3
|
import { cn } from "../utils/cn.js";
|
|
4
|
-
import { n as useTheme } from "../theme-
|
|
4
|
+
import { n as useTheme } from "../theme-C19BbKfO.js";
|
|
5
5
|
import { useFieldContext } from "./field.js";
|
|
6
6
|
import { Input } from "./input.js";
|
|
7
7
|
import "react";
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_chunk = require("../chunk-aJGBMT86.cjs");
|
|
4
4
|
const require_utils_format = require("../utils/format.cjs");
|
|
5
|
+
const require_utils_chart_scale = require("../utils/chart-scale.cjs");
|
|
5
6
|
const require_components_chart = require("./chart.cjs");
|
|
6
7
|
let react = require("react");
|
|
7
8
|
react = require_chunk.__toESM(react);
|
|
@@ -91,7 +92,7 @@ const LEGEND_COLORS = [
|
|
|
91
92
|
"var(--orange-9)",
|
|
92
93
|
"var(--red-9)"
|
|
93
94
|
];
|
|
94
|
-
const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yDomain, referenceLines, topContent }) => {
|
|
95
|
+
const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defaultCurve = "monotone", showGrid = true, showTooltip: enableTooltip = true, className, xTickCount = 5, yTickCount = 4, formatDate = defaultFormatDate, formatTooltipDate, formatValue = defaultFormatValue, yAxisUnit, yDomain, referenceLines, topContent }) => {
|
|
95
96
|
const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = (0, _visx_tooltip.useTooltip)();
|
|
96
97
|
const innerWidth = Math.max(0, width - margin.left - margin.right);
|
|
97
98
|
const innerHeight = Math.max(0, height - margin.top - margin.bottom);
|
|
@@ -100,17 +101,28 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
|
|
|
100
101
|
range: [0, innerWidth],
|
|
101
102
|
domain: (0, _visx_vendor_d3_array.extent)(allData, (d) => d.date)
|
|
102
103
|
}), [allData, innerWidth]);
|
|
104
|
+
const yAxisScale = (0, react.useMemo)(() => {
|
|
105
|
+
if (yAxisUnit === void 0) return null;
|
|
106
|
+
let min = 0;
|
|
107
|
+
let max = 0;
|
|
108
|
+
for (const d of allData) {
|
|
109
|
+
if (d.value < min) min = d.value;
|
|
110
|
+
if (d.value > max) max = d.value;
|
|
111
|
+
}
|
|
112
|
+
return require_utils_chart_scale.buildYAxisScale(min, max);
|
|
113
|
+
}, [allData, yAxisUnit]);
|
|
103
114
|
const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
|
|
104
115
|
range: [innerHeight, 0],
|
|
105
|
-
domain: yDomain ?? computeYDomain(allData),
|
|
106
|
-
nice: !yDomain
|
|
116
|
+
domain: yDomain ?? (yAxisScale ? [yAxisScale.min, yAxisScale.max] : computeYDomain(allData)),
|
|
117
|
+
nice: !yDomain && !yAxisScale
|
|
107
118
|
}), [
|
|
108
119
|
allData,
|
|
109
120
|
innerHeight,
|
|
110
|
-
yDomain
|
|
121
|
+
yDomain,
|
|
122
|
+
yAxisScale
|
|
111
123
|
]);
|
|
112
124
|
const xTicks = xScale.ticks(xTickCount);
|
|
113
|
-
const yTicks = yScale.ticks(yTickCount);
|
|
125
|
+
const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount);
|
|
114
126
|
const handleTooltip = (0, react.useCallback)((event) => {
|
|
115
127
|
if (!enableTooltip) return;
|
|
116
128
|
const point = (0, _visx_event.localPoint)(event);
|
|
@@ -211,22 +223,50 @@ const LineChart = ({ series, width, height, margin = DEFAULT_MARGIN, curve: defa
|
|
|
211
223
|
}, ref.key);
|
|
212
224
|
}),
|
|
213
225
|
xTicks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
214
|
-
className: "fill-slate-a11 text-xs",
|
|
215
226
|
dy: "1em",
|
|
227
|
+
fill: "var(--gray-a11)",
|
|
228
|
+
fontSize: 10,
|
|
216
229
|
textAnchor: "middle",
|
|
217
230
|
x: xScale(tick),
|
|
218
231
|
y: innerHeight + 8,
|
|
219
232
|
children: formatDate(tick)
|
|
220
233
|
}, `x-${tick.valueOf()}`)),
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
234
|
+
yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
235
|
+
stroke: "var(--gray-a6)",
|
|
236
|
+
strokeWidth: 1,
|
|
237
|
+
x1: 0,
|
|
238
|
+
x2: 0,
|
|
239
|
+
y1: 0,
|
|
240
|
+
y2: innerHeight
|
|
241
|
+
}),
|
|
242
|
+
yTicks.map((tick) => {
|
|
243
|
+
const y = yScale(tick);
|
|
244
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
245
|
+
stroke: "var(--gray-a8)",
|
|
246
|
+
strokeWidth: 1,
|
|
247
|
+
x1: -4,
|
|
248
|
+
x2: 0,
|
|
249
|
+
y1: y,
|
|
250
|
+
y2: y
|
|
251
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
252
|
+
dy: "0.32em",
|
|
253
|
+
fill: "var(--gray-a11)",
|
|
254
|
+
fontSize: 10,
|
|
255
|
+
textAnchor: "end",
|
|
256
|
+
x: yAxisUnit !== void 0 ? -7 : -4,
|
|
257
|
+
y,
|
|
258
|
+
children: yAxisUnit !== void 0 ? require_utils_chart_scale.formatYAxisTick(tick) : formatValue(tick)
|
|
259
|
+
})] }, `y-${tick}`);
|
|
260
|
+
}),
|
|
261
|
+
yAxisUnit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
262
|
+
fill: "var(--gray-a11)",
|
|
263
|
+
fontSize: 10,
|
|
264
|
+
fontWeight: 600,
|
|
265
|
+
textAnchor: "start",
|
|
266
|
+
x: -margin.left,
|
|
267
|
+
y: -6,
|
|
268
|
+
children: yAxisUnit
|
|
269
|
+
}),
|
|
230
270
|
series.map((s, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
|
|
231
271
|
className: (0, cnfast.cn)(LINE_COLORS[i % LINE_COLORS.length], s.className),
|
|
232
272
|
curve: resolveCurve(s.curve ?? defaultCurve),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-chart.cjs","names":["curveMonotoneX","curveStep","curveStepAfter","curveStepBefore","curveLinear","localeNumberFormat","useMeasuredSize","clampTooltipPosition","Group","LinePath","ChartTooltipCard"],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n curveLinear,\n curveMonotoneX,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n ChartTooltipCard,\n type ChartTooltipRow,\n clampTooltipPosition,\n useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n date: Date\n value: number\n}\n\nexport type LineChartCurve =\n | 'monotone'\n | 'step'\n | 'step-after'\n | 'step-before'\n | 'linear'\n\nexport interface LineChartSeries {\n id: string\n data: LineChartDatum[]\n /** Label shown in the hover tooltip. Defaults to `id`. */\n label?: React.ReactNode\n className?: string\n /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n curve?: LineChartCurve\n /** Render as a dashed line */\n dashed?: boolean\n /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n dashPattern?: string\n}\n\nexport interface LineChartProps {\n series: LineChartSeries[]\n width: number\n height: number\n margin?: { top: number; right: number; bottom: number; left: number }\n /** Default curve for all series. Default: 'monotone' */\n curve?: LineChartCurve\n showGrid?: boolean\n showTooltip?: boolean\n className?: string\n xTickCount?: number\n yTickCount?: number\n /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n yDomain?: [number, number]\n /** Formats the x-axis tick labels. */\n formatDate?: (date: Date) => string\n /** Formats the tooltip title. Defaults to `formatDate`. */\n formatTooltipDate?: (date: Date) => string\n formatValue?: (value: number) => string\n /**\n * Vertical reference markers positioned on the time axis (e.g. sunrise /\n * sunset). Each renders a dashed line across the plot with an optional label.\n */\n referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n /**\n * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n * weather icon). Positioned by the same time scale as the series, so it lines\n * up with the curve below it.\n */\n topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n monotone: curveMonotoneX,\n step: curveStep,\n 'step-after': curveStepAfter,\n 'step-before': curveStepBefore,\n linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n const first = data[0]\n const last = data[data.length - 1]\n if (!first || !last) return false\n const t = date.valueOf()\n return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n let min = 0\n let max = 0\n for (const d of data) {\n if (d.value < min) min = d.value\n if (d.value > max) max = d.value\n }\n if (min === max) return [min, min + 1]\n return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n data: LineChartDatum[],\n date: Date,\n): LineChartDatum | undefined {\n if (data.length === 0) return undefined\n const index = bisectDate(data, date, 1)\n const d0 = data[index - 1]\n const d1 = data[index]\n if (!d0) return d1\n if (!d1) return d0\n return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n ? d1\n : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n 'stroke-spark-9',\n 'stroke-green-9',\n 'stroke-blue-9',\n 'stroke-orange-9',\n 'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n 'fill-spark-9',\n 'fill-green-9',\n 'fill-blue-9',\n 'fill-orange-9',\n 'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n 'var(--spark-9)',\n 'var(--green-9)',\n 'var(--blue-9)',\n 'var(--orange-9)',\n 'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n series,\n width,\n height,\n margin = DEFAULT_MARGIN,\n curve: defaultCurve = 'monotone',\n showGrid = true,\n showTooltip: enableTooltip = true,\n className,\n xTickCount = 5,\n yTickCount = 4,\n formatDate = defaultFormatDate,\n formatTooltipDate,\n formatValue = defaultFormatValue,\n yDomain,\n referenceLines,\n topContent,\n}) => {\n const {\n showTooltip,\n hideTooltip,\n tooltipData,\n tooltipLeft,\n tooltipTop,\n tooltipOpen,\n } = useTooltip<{ date: Date }>()\n\n const innerWidth = Math.max(0, width - margin.left - margin.right)\n const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n const xScale = useMemo(\n () =>\n scaleTime({\n range: [0, innerWidth],\n domain: extent(allData, (d) => d.date) as [Date, Date],\n }),\n [allData, innerWidth],\n )\n\n const yScale = useMemo(\n () =>\n scaleLinear({\n range: [innerHeight, 0],\n domain: yDomain ?? computeYDomain(allData),\n nice: !yDomain,\n }),\n [allData, innerHeight, yDomain],\n )\n\n const xTicks = xScale.ticks(xTickCount)\n const yTicks = yScale.ticks(yTickCount)\n\n const handleTooltip = useCallback(\n (\n event:\n | React.TouchEvent<SVGRectElement>\n | React.MouseEvent<SVGRectElement>,\n ) => {\n if (!enableTooltip) return\n\n const point = localPoint(event)\n if (!point) return\n\n const x0 = xScale.invert(point.x - margin.left)\n\n // Snap to the data point closest to the cursor across all series, so the\n // cursor line + tooltip line up with real values.\n let anchorDate: Date | null = null\n let bestDistance = Infinity\n for (const s of series) {\n const d = nearestDatum(s.data, x0)\n if (!d) continue\n const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n if (distance < bestDistance) {\n bestDistance = distance\n anchorDate = d.date\n }\n }\n\n if (!anchorDate) return\n\n showTooltip({\n tooltipData: { date: anchorDate },\n tooltipLeft: xScale(anchorDate) + margin.left,\n tooltipTop: margin.top,\n })\n },\n [enableTooltip, margin, series, showTooltip, xScale],\n )\n\n const tooltipRows: ChartTooltipRow[] = tooltipData\n ? series.flatMap((s, i) => {\n const d = nearestDatum(s.data, tooltipData.date)\n if (!d || !withinDomain(s.data, tooltipData.date)) return []\n return [\n {\n key: s.id,\n label: s.label ?? s.id,\n color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n value: formatValue(d.value),\n },\n ]\n })\n : []\n\n const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n const tooltipPos = clampTooltipPosition({\n anchorX: tooltipLeft ?? 0,\n anchorY: tooltipTop ?? margin.top,\n width,\n height,\n tipWidth: tooltipSize.width,\n tipHeight: tooltipSize.height,\n placement: 'beside',\n })\n\n if (width < 10 || height < 10) return null\n\n return (\n <div className={cn('relative', className)}>\n <svg className=\"block\" height={height} width={width}>\n <Group left={margin.left} top={margin.top}>\n {/* Grid lines */}\n {showGrid &&\n yTicks.map((tick) => (\n <line\n className=\"stroke-slate-a4\"\n key={`grid-y-${tick}`}\n strokeDasharray=\"4,4\"\n x1={0}\n x2={innerWidth}\n y1={yScale(tick)}\n y2={yScale(tick)}\n />\n ))}\n\n {/* X axis */}\n <line\n className=\"stroke-slate-a6\"\n x1={0}\n x2={innerWidth}\n y1={innerHeight}\n y2={innerHeight}\n />\n\n {/* Reference markers (e.g. sunrise / sunset) */}\n {referenceLines?.map((ref) => {\n const x = xScale(ref.date)\n if (!Number.isFinite(x)) return null\n // Sit the label beside the line, on whichever side keeps it in\n // frame: right of a left-half marker, left of a right-half one.\n const anchorEnd = x > innerWidth / 2\n return (\n <g key={ref.key} pointerEvents=\"none\">\n <line\n className=\"stroke-orange-8\"\n strokeDasharray=\"3,3\"\n x1={x}\n x2={x}\n y1={0}\n y2={innerHeight}\n />\n {ref.label != null && (\n <text\n className=\"fill-orange-11 text-[10px]\"\n dy=\"0.9em\"\n textAnchor={anchorEnd ? 'end' : 'start'}\n x={x + (anchorEnd ? -4 : 4)}\n y={0}\n >\n {ref.label}\n </text>\n )}\n </g>\n )\n })}\n\n {/* X axis labels */}\n {xTicks.map((tick) => (\n <text\n className=\"fill-slate-a11 text-xs\"\n dy=\"1em\"\n key={`x-${tick.valueOf()}`}\n textAnchor=\"middle\"\n x={xScale(tick)}\n y={innerHeight + 8}\n >\n {formatDate(tick)}\n </text>\n ))}\n\n {/* Y axis labels */}\n {yTicks.map((tick) => (\n <text\n className=\"fill-slate-a11 text-xs\"\n dx=\"-0.5em\"\n dy=\"0.32em\"\n key={`y-${tick}`}\n textAnchor=\"end\"\n x={-4}\n y={yScale(tick)}\n >\n {formatValue(tick)}\n </text>\n ))}\n\n {/* Lines */}\n {series.map((s, i) => (\n <LinePath\n className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n curve={resolveCurve(s.curve ?? defaultCurve)}\n data={s.data}\n fill=\"none\"\n key={s.id}\n strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n strokeWidth={2}\n x={(d) => xScale(d.date)}\n y={(d) => yScale(d.value)}\n />\n ))}\n\n {/* Tooltip hover target */}\n {enableTooltip && (\n <rect\n fill=\"transparent\"\n height={innerHeight}\n onMouseLeave={hideTooltip}\n onMouseMove={handleTooltip}\n onTouchEnd={hideTooltip}\n onTouchMove={handleTooltip}\n width={innerWidth}\n x={0}\n y={0}\n />\n )}\n\n {/* Cursor line + a dot per series */}\n {tooltipOpen && tooltipData && (\n <>\n <line\n className=\"stroke-slate-a6\"\n pointerEvents=\"none\"\n strokeDasharray=\"4,4\"\n x1={xScale(tooltipData.date)}\n x2={xScale(tooltipData.date)}\n y1={0}\n y2={innerHeight}\n />\n {series.map((s, i) => {\n const d = nearestDatum(s.data, tooltipData.date)\n if (!d || !withinDomain(s.data, tooltipData.date)) return null\n return (\n <circle\n key={s.id}\n className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n cx={xScale(d.date)}\n cy={yScale(d.value)}\n pointerEvents=\"none\"\n r={4}\n stroke=\"white\"\n strokeWidth={2}\n />\n )\n })}\n </>\n )}\n </Group>\n </svg>\n\n {topContent && topContent.length > 0 && (\n <div className=\"pointer-events-none absolute inset-0\">\n {topContent.map((item) => {\n const x = xScale(item.date)\n if (!Number.isFinite(x)) return null\n return (\n <div\n key={item.key}\n className=\"absolute -translate-x-1/2\"\n style={{ left: margin.left + x, top: 0 }}\n >\n {item.content}\n </div>\n )\n })}\n </div>\n )}\n\n <div\n ref={tooltipRef}\n className=\"pointer-events-none absolute z-10\"\n style={{\n left: tooltipPos.left,\n top: tooltipPos.top,\n opacity: tooltipOpen && tooltipData ? 1 : 0,\n transition:\n 'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n }}\n >\n {tooltipData && (\n <ChartTooltipCard\n label={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n rows={tooltipRows}\n />\n )}\n </div>\n </div>\n )\n}\n\nexport { LineChart }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"line-chart.cjs","names":["curveMonotoneX","curveStep","curveStepAfter","curveStepBefore","curveLinear","localeNumberFormat","buildYAxisScale","useMeasuredSize","clampTooltipPosition","Group","formatYAxisTick","LinePath","ChartTooltipCard"],"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import {\n curveLinear,\n curveMonotoneX,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n} from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { Group } from '@visx/group'\nimport { scaleLinear, scaleTime } from '@visx/scale'\nimport { LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector, extent } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useMemo } from 'react'\nimport { buildYAxisScale, formatYAxisTick } from '../utils/chart-scale'\nimport { cn } from '../utils/cn'\nimport { localeNumberFormat } from '../utils/format'\nimport {\n ChartTooltipCard,\n type ChartTooltipRow,\n clampTooltipPosition,\n useMeasuredSize,\n} from './chart'\n\nexport interface LineChartDatum {\n date: Date\n value: number\n}\n\nexport type LineChartCurve =\n | 'monotone'\n | 'step'\n | 'step-after'\n | 'step-before'\n | 'linear'\n\nexport interface LineChartSeries {\n id: string\n data: LineChartDatum[]\n /** Label shown in the hover tooltip. Defaults to `id`. */\n label?: React.ReactNode\n className?: string\n /** Curve interpolation type. Default: inherits from LineChartProps.curve */\n curve?: LineChartCurve\n /** Render as a dashed line */\n dashed?: boolean\n /** Custom dash pattern (e.g. \"8,4\" or \"4,2,1,2\"). Only applies when dashed is true. */\n dashPattern?: string\n}\n\nexport interface LineChartProps {\n series: LineChartSeries[]\n width: number\n height: number\n margin?: { top: number; right: number; bottom: number; left: number }\n /** Default curve for all series. Default: 'monotone' */\n curve?: LineChartCurve\n showGrid?: boolean\n showTooltip?: boolean\n className?: string\n xTickCount?: number\n yTickCount?: number\n /** Fixes the y-axis to an explicit `[min, max]`. Defaults to the data extent. */\n yDomain?: [number, number]\n /** Formats the x-axis tick labels. */\n formatDate?: (date: Date) => string\n /** Formats the tooltip title. Defaults to `formatDate`. */\n formatTooltipDate?: (date: Date) => string\n formatValue?: (value: number) => string\n /**\n * Unit shown once at the top of the y-axis (e.g. \"kW\"). When set, y-axis tick\n * labels render as plain numbers (matching BarChart / PowerHistoryChart)\n * instead of repeating `formatValue` on every tick. `formatValue` still feeds\n * the tooltip. Omit to keep the per-tick `formatValue` labels.\n */\n yAxisUnit?: string\n /**\n * Vertical reference markers positioned on the time axis (e.g. sunrise /\n * sunset). Each renders a dashed line across the plot with an optional label.\n */\n referenceLines?: Array<{ key: string; date: Date; label?: React.ReactNode }>\n /**\n * HTML content pinned to the top of the plot at a given time (e.g. an hourly\n * weather icon). Positioned by the same time scale as the series, so it lines\n * up with the curve below it.\n */\n topContent?: Array<{ key: string; date: Date; content: React.ReactNode }>\n}\n\nconst DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 }\n\nconst CURVE_MAP = {\n monotone: curveMonotoneX,\n step: curveStep,\n 'step-after': curveStepAfter,\n 'step-before': curveStepBefore,\n linear: curveLinear,\n} as const\n\nconst resolveCurve = (type: LineChartCurve) => CURVE_MAP[type]\n\nconst dateBisector = bisector<LineChartDatum, Date>((d) => d.date)\nconst bisectDate = (data: LineChartDatum[], x: Date, lo?: number) =>\n dateBisector.left(data, x, lo)\n\n/** Whether `date` falls within a series' own x-range (data is sorted ascending). */\nfunction withinDomain(data: LineChartDatum[], date: Date): boolean {\n const first = data[0]\n const last = data[data.length - 1]\n if (!first || !last) return false\n const t = date.valueOf()\n return t >= first.date.valueOf() && t <= last.date.valueOf()\n}\n\n/**\n * y-domain padded 10% beyond the data extent. The baseline is pinned to 0 so\n * all-positive series render from the axis up; a series that dips below 0\n * (signed grid / battery power) extends the domain downward to keep the zero\n * crossing visible.\n */\nfunction computeYDomain(data: LineChartDatum[]): [number, number] {\n let min = 0\n let max = 0\n for (const d of data) {\n if (d.value < min) min = d.value\n if (d.value > max) max = d.value\n }\n if (min === max) return [min, min + 1]\n return [min * 1.1, max * 1.1]\n}\n\nfunction nearestDatum(\n data: LineChartDatum[],\n date: Date,\n): LineChartDatum | undefined {\n if (data.length === 0) return undefined\n const index = bisectDate(data, date, 1)\n const d0 = data[index - 1]\n const d1 = data[index]\n if (!d0) return d1\n if (!d1) return d0\n return date.valueOf() - d0.date.valueOf() > d1.date.valueOf() - date.valueOf()\n ? d1\n : d0\n}\n\nconst defaultFormatDate = (date: Date) =>\n date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n\nconst defaultValueFormat = localeNumberFormat()\nconst defaultFormatValue = (value: number) => defaultValueFormat.format(value)\n\nconst LINE_COLORS = [\n 'stroke-spark-9',\n 'stroke-green-9',\n 'stroke-blue-9',\n 'stroke-orange-9',\n 'stroke-red-9',\n]\n\nconst DOT_COLORS = [\n 'fill-spark-9',\n 'fill-green-9',\n 'fill-blue-9',\n 'fill-orange-9',\n 'fill-red-9',\n]\n\n// CSS-var colours matching LINE_COLORS, used for the tooltip legend dots.\nconst LEGEND_COLORS = [\n 'var(--spark-9)',\n 'var(--green-9)',\n 'var(--blue-9)',\n 'var(--orange-9)',\n 'var(--red-9)',\n]\n\nconst LineChart: React.FC<LineChartProps> = ({\n series,\n width,\n height,\n margin = DEFAULT_MARGIN,\n curve: defaultCurve = 'monotone',\n showGrid = true,\n showTooltip: enableTooltip = true,\n className,\n xTickCount = 5,\n yTickCount = 4,\n formatDate = defaultFormatDate,\n formatTooltipDate,\n formatValue = defaultFormatValue,\n yAxisUnit,\n yDomain,\n referenceLines,\n topContent,\n}) => {\n const {\n showTooltip,\n hideTooltip,\n tooltipData,\n tooltipLeft,\n tooltipTop,\n tooltipOpen,\n } = useTooltip<{ date: Date }>()\n\n const innerWidth = Math.max(0, width - margin.left - margin.right)\n const innerHeight = Math.max(0, height - margin.top - margin.bottom)\n\n const allData = useMemo(() => series.flatMap((s) => s.data), [series])\n\n const xScale = useMemo(\n () =>\n scaleTime({\n range: [0, innerWidth],\n domain: extent(allData, (d) => d.date) as [Date, Date],\n }),\n [allData, innerWidth],\n )\n\n // With a unit, the y-axis is generated by the shared scale util (nice ticks\n // + rounded bounds) so it matches BarChart / PowerHistoryChart exactly.\n const yAxisScale = useMemo(() => {\n if (yAxisUnit === undefined) return null\n let min = 0\n let max = 0\n for (const d of allData) {\n if (d.value < min) min = d.value\n if (d.value > max) max = d.value\n }\n return buildYAxisScale(min, max)\n }, [allData, yAxisUnit])\n\n const yScale = useMemo(\n () =>\n scaleLinear({\n range: [innerHeight, 0],\n domain:\n yDomain ??\n (yAxisScale\n ? [yAxisScale.min, yAxisScale.max]\n : computeYDomain(allData)),\n nice: !yDomain && !yAxisScale,\n }),\n [allData, innerHeight, yDomain, yAxisScale],\n )\n\n const xTicks = xScale.ticks(xTickCount)\n const yTicks = yAxisScale ? yAxisScale.ticks : yScale.ticks(yTickCount)\n\n const handleTooltip = useCallback(\n (\n event:\n | React.TouchEvent<SVGRectElement>\n | React.MouseEvent<SVGRectElement>,\n ) => {\n if (!enableTooltip) return\n\n const point = localPoint(event)\n if (!point) return\n\n const x0 = xScale.invert(point.x - margin.left)\n\n // Snap to the data point closest to the cursor across all series, so the\n // cursor line + tooltip line up with real values.\n let anchorDate: Date | null = null\n let bestDistance = Infinity\n for (const s of series) {\n const d = nearestDatum(s.data, x0)\n if (!d) continue\n const distance = Math.abs(d.date.valueOf() - x0.valueOf())\n if (distance < bestDistance) {\n bestDistance = distance\n anchorDate = d.date\n }\n }\n\n if (!anchorDate) return\n\n showTooltip({\n tooltipData: { date: anchorDate },\n tooltipLeft: xScale(anchorDate) + margin.left,\n tooltipTop: margin.top,\n })\n },\n [enableTooltip, margin, series, showTooltip, xScale],\n )\n\n const tooltipRows: ChartTooltipRow[] = tooltipData\n ? series.flatMap((s, i) => {\n const d = nearestDatum(s.data, tooltipData.date)\n if (!d || !withinDomain(s.data, tooltipData.date)) return []\n return [\n {\n key: s.id,\n label: s.label ?? s.id,\n color: LEGEND_COLORS[i % LEGEND_COLORS.length] as string,\n value: formatValue(d.value),\n },\n ]\n })\n : []\n\n const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n const tooltipPos = clampTooltipPosition({\n anchorX: tooltipLeft ?? 0,\n anchorY: tooltipTop ?? margin.top,\n width,\n height,\n tipWidth: tooltipSize.width,\n tipHeight: tooltipSize.height,\n placement: 'beside',\n })\n\n if (width < 10 || height < 10) return null\n\n return (\n <div className={cn('relative', className)}>\n <svg className=\"block\" height={height} width={width}>\n <Group left={margin.left} top={margin.top}>\n {/* Grid lines */}\n {showGrid &&\n yTicks.map((tick) => (\n <line\n className=\"stroke-slate-a4\"\n key={`grid-y-${tick}`}\n strokeDasharray=\"4,4\"\n x1={0}\n x2={innerWidth}\n y1={yScale(tick)}\n y2={yScale(tick)}\n />\n ))}\n\n {/* X axis */}\n <line\n className=\"stroke-slate-a6\"\n x1={0}\n x2={innerWidth}\n y1={innerHeight}\n y2={innerHeight}\n />\n\n {/* Reference markers (e.g. sunrise / sunset) */}\n {referenceLines?.map((ref) => {\n const x = xScale(ref.date)\n if (!Number.isFinite(x)) return null\n // Sit the label beside the line, on whichever side keeps it in\n // frame: right of a left-half marker, left of a right-half one.\n const anchorEnd = x > innerWidth / 2\n return (\n <g key={ref.key} pointerEvents=\"none\">\n <line\n className=\"stroke-orange-8\"\n strokeDasharray=\"3,3\"\n x1={x}\n x2={x}\n y1={0}\n y2={innerHeight}\n />\n {ref.label != null && (\n <text\n className=\"fill-orange-11 text-[10px]\"\n dy=\"0.9em\"\n textAnchor={anchorEnd ? 'end' : 'start'}\n x={x + (anchorEnd ? -4 : 4)}\n y={0}\n >\n {ref.label}\n </text>\n )}\n </g>\n )\n })}\n\n {/* X axis labels */}\n {xTicks.map((tick) => (\n <text\n dy=\"1em\"\n fill=\"var(--gray-a11)\"\n fontSize={10}\n key={`x-${tick.valueOf()}`}\n textAnchor=\"middle\"\n x={xScale(tick)}\n y={innerHeight + 8}\n >\n {formatDate(tick)}\n </text>\n ))}\n\n {/* Y axis. With `yAxisUnit`, matches BarChart: a vertical axis line,\n short tick marks, plain numeric ticks, and the unit as a bold\n top-left header (top tick hidden). Without it, ticks repeat\n `formatValue` and no axis line/marks are drawn. */}\n {yAxisUnit !== undefined && (\n <line\n stroke=\"var(--gray-a6)\"\n strokeWidth={1}\n x1={0}\n x2={0}\n y1={0}\n y2={innerHeight}\n />\n )}\n {yTicks.map((tick) => {\n const y = yScale(tick)\n return (\n <g key={`y-${tick}`}>\n {yAxisUnit !== undefined && (\n <line\n stroke=\"var(--gray-a8)\"\n strokeWidth={1}\n x1={-4}\n x2={0}\n y1={y}\n y2={y}\n />\n )}\n <text\n dy=\"0.32em\"\n fill=\"var(--gray-a11)\"\n fontSize={10}\n textAnchor=\"end\"\n x={yAxisUnit !== undefined ? -7 : -4}\n y={y}\n >\n {yAxisUnit !== undefined\n ? formatYAxisTick(tick)\n : formatValue(tick)}\n </text>\n </g>\n )\n })}\n {yAxisUnit !== undefined && (\n <text\n fill=\"var(--gray-a11)\"\n fontSize={10}\n fontWeight={600}\n textAnchor=\"start\"\n x={-margin.left}\n y={-6}\n >\n {yAxisUnit}\n </text>\n )}\n\n {/* Lines */}\n {series.map((s, i) => (\n <LinePath\n className={cn(LINE_COLORS[i % LINE_COLORS.length], s.className)}\n curve={resolveCurve(s.curve ?? defaultCurve)}\n data={s.data}\n fill=\"none\"\n key={s.id}\n strokeDasharray={s.dashed ? (s.dashPattern ?? '6,4') : undefined}\n strokeWidth={2}\n x={(d) => xScale(d.date)}\n y={(d) => yScale(d.value)}\n />\n ))}\n\n {/* Tooltip hover target */}\n {enableTooltip && (\n <rect\n fill=\"transparent\"\n height={innerHeight}\n onMouseLeave={hideTooltip}\n onMouseMove={handleTooltip}\n onTouchEnd={hideTooltip}\n onTouchMove={handleTooltip}\n width={innerWidth}\n x={0}\n y={0}\n />\n )}\n\n {/* Cursor line + a dot per series */}\n {tooltipOpen && tooltipData && (\n <>\n <line\n className=\"stroke-slate-a6\"\n pointerEvents=\"none\"\n strokeDasharray=\"4,4\"\n x1={xScale(tooltipData.date)}\n x2={xScale(tooltipData.date)}\n y1={0}\n y2={innerHeight}\n />\n {series.map((s, i) => {\n const d = nearestDatum(s.data, tooltipData.date)\n if (!d || !withinDomain(s.data, tooltipData.date)) return null\n return (\n <circle\n key={s.id}\n className={cn(DOT_COLORS[i % DOT_COLORS.length])}\n cx={xScale(d.date)}\n cy={yScale(d.value)}\n pointerEvents=\"none\"\n r={4}\n stroke=\"white\"\n strokeWidth={2}\n />\n )\n })}\n </>\n )}\n </Group>\n </svg>\n\n {topContent && topContent.length > 0 && (\n <div className=\"pointer-events-none absolute inset-0\">\n {topContent.map((item) => {\n const x = xScale(item.date)\n if (!Number.isFinite(x)) return null\n return (\n <div\n key={item.key}\n className=\"absolute -translate-x-1/2\"\n style={{ left: margin.left + x, top: 0 }}\n >\n {item.content}\n </div>\n )\n })}\n </div>\n )}\n\n <div\n ref={tooltipRef}\n className=\"pointer-events-none absolute z-10\"\n style={{\n left: tooltipPos.left,\n top: tooltipPos.top,\n opacity: tooltipOpen && tooltipData ? 1 : 0,\n transition:\n 'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n }}\n >\n {tooltipData && (\n <ChartTooltipCard\n label={(formatTooltipDate ?? formatDate)(tooltipData.date)}\n rows={tooltipRows}\n />\n )}\n </div>\n </div>\n )\n}\n\nexport { LineChart }\n"],"mappings":"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"}
|
|
@@ -45,6 +45,13 @@ interface LineChartProps {
|
|
|
45
45
|
/** Formats the tooltip title. Defaults to `formatDate`. */
|
|
46
46
|
formatTooltipDate?: (date: Date) => string;
|
|
47
47
|
formatValue?: (value: number) => string;
|
|
48
|
+
/**
|
|
49
|
+
* Unit shown once at the top of the y-axis (e.g. "kW"). When set, y-axis tick
|
|
50
|
+
* labels render as plain numbers (matching BarChart / PowerHistoryChart)
|
|
51
|
+
* instead of repeating `formatValue` on every tick. `formatValue` still feeds
|
|
52
|
+
* the tooltip. Omit to keep the per-tick `formatValue` labels.
|
|
53
|
+
*/
|
|
54
|
+
yAxisUnit?: string;
|
|
48
55
|
/**
|
|
49
56
|
* Vertical reference markers positioned on the time axis (e.g. sunrise /
|
|
50
57
|
* sunset). Each renders a dashed line across the plot with an optional label.
|
|
@@ -45,6 +45,13 @@ interface LineChartProps {
|
|
|
45
45
|
/** Formats the tooltip title. Defaults to `formatDate`. */
|
|
46
46
|
formatTooltipDate?: (date: Date) => string;
|
|
47
47
|
formatValue?: (value: number) => string;
|
|
48
|
+
/**
|
|
49
|
+
* Unit shown once at the top of the y-axis (e.g. "kW"). When set, y-axis tick
|
|
50
|
+
* labels render as plain numbers (matching BarChart / PowerHistoryChart)
|
|
51
|
+
* instead of repeating `formatValue` on every tick. `formatValue` still feeds
|
|
52
|
+
* the tooltip. Omit to keep the per-tick `formatValue` labels.
|
|
53
|
+
*/
|
|
54
|
+
yAxisUnit?: string;
|
|
48
55
|
/**
|
|
49
56
|
* Vertical reference markers positioned on the time axis (e.g. sunrise /
|
|
50
57
|
* sunset). Each renders a dashed line across the plot with an optional label.
|