@manta-eu/react 0.1.7 → 0.1.8

package/README.md

@@ -2,6 +2,8 @@
 
 React components and design system for Manta apps, including the copilot chat.
 
+Documentation: [developers.manta.eu](https://developers.manta.eu)
+
 ## Adding the copilot to a React app
 
 Five steps, end to end. Steps 1–3 are setup you do once; step 4 generates the types your app queries

package/dist/components/chart/AreaChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/AreaChart.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAwD9C"}
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/AreaChart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,iBAAiB,CAAC;AAIlE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA+D9C"}

package/dist/components/chart/AreaChart.js

@@ -3,14 +3,12 @@ import { isPresent } from "@manta-eu/lib/present";
 import { useId } from "react";
 import { Area, AreaChart as RechartsAreaChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
 import { renderAnnotations, valueLabelProps } from "./annotations.js";
-import { ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { chartColorAt } from "./chart-colors.js";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { ChartFrame } from "./ChartFrame.js";
+import { hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats } from "./series.js";
 export function AreaChart(props) {
     const { data } = props;
     const gradientId = useId();
-    const config = {
-        y: { label: data.yAxisLabel ?? "Value", color: chartColorAt(0) },
-    };
-    return (_jsx(ChartFrame, { config: config, title: data.title, height: data.height, children: _jsxs(RechartsAreaChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-y)", stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: "var(--color-y)", stopOpacity: 0 })] }) }), _jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 3" }), _jsx(XAxis, { dataKey: "x", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Area, { dataKey: "y", type: "monotone", stroke: "var(--color-y)", fill: `url(#${gradientId})`, strokeWidth: 2, dot: data.data.length === 1 ? { r: 3, fill: "var(--color-card)" } : false, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: "y" }) : null }), renderAnnotations(data.annotations, { y: data.data.map((point) => point.y) })] }) }));
+    const series = data.series ?? [{ key: "y", label: data.yAxisLabel ?? "Value" }];
+    return (_jsx(ChartFrame, { config: seriesConfig(series), title: data.title, height: data.height, children: _jsxs(RechartsAreaChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx("defs", { children: series.map((item) => (_jsxs("linearGradient", { id: `${gradientId}-${item.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: seriesColor(series, item), stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: seriesColor(series, item), stopOpacity: 0 })] }, item.key))) }), _jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 3" }), _jsx(XAxis, { dataKey: "x", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), hasRightAxis(series) ? _jsx(YAxis, { ...rightAxisProps(data.rightAxisLabel) }) : null, _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), series.length > 1 ? _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }) : null, series.map((item) => (_jsx(Area, { dataKey: item.key, ...seriesAxisProps(item), stackId: data.stacked ? (item.axis ?? "left") : undefined, type: "monotone", stroke: seriesColor(series, item), fill: `url(#${gradientId}-${item.key})`, strokeWidth: 2, dot: data.data.length === 1 ? { r: 3, fill: "var(--color-card)" } : false, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: item.key }) : null }, item.key))), renderAnnotations(data.annotations, seriesStats(data.data, series, data.stacked))] }) }));
 }

package/dist/components/chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/BarChart.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAyC5C"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/BarChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAYjE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAqD5C"}

package/dist/components/chart/BarChart.js

@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isPresent } from "@manta-eu/lib/present";
 import { Bar, BarChart as RechartsBarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
 import { renderAnnotations, valueLabelProps } from "./annotations.js";
-import { ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { chartColorAt } from "./chart-colors.js";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { ChartFrame } from "./ChartFrame.js";
+import { barRadius, hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats, } from "./series.js";
 export function BarChart(props) {
     const { data } = props;
-    const config = {
-        value: { label: data.yAxisLabel ?? "Value", color: chartColorAt(0) },
-    };
-    return (_jsx(ChartFrame, { config: config, title: data.title, height: data.height, children: _jsxs(RechartsBarChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "name", tickLine: false, axisLine: true, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: "value", fill: "var(--color-value)", radius: [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: "value" }) : null }), renderAnnotations(data.annotations, { y: data.data.map((point) => point.value) })] }) }));
+    const series = data.series ?? [{ key: "value", label: data.yAxisLabel ?? "Value" }];
+    const stacked = data.stacked ?? false;
+    return (_jsx(ChartFrame, { config: seriesConfig(series), title: data.title, height: data.height, children: _jsxs(RechartsBarChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "name", tickLine: false, axisLine: true, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), hasRightAxis(series) ? _jsx(YAxis, { ...rightAxisProps(data.rightAxisLabel) }) : null, _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), series.length > 1 ? _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }) : null, series.map((item) => (_jsx(Bar, { dataKey: item.key, ...seriesAxisProps(item), stackId: stacked ? (item.axis ?? "left") : undefined, fill: seriesColor(series, item), radius: barRadius(series, item, stacked), maxBarSize: 40, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: item.key }) : null }, item.key))), renderAnnotations(data.annotations, seriesStats(data.data, series, stacked))] }) }));
 }

package/dist/components/chart/ComposedChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/ComposedChart.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA6DtD"}
+{"version":3,"file":"ComposedChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/ComposedChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,iBAAiB,CAAC;AAa9E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA+EtD"}

package/dist/components/chart/ComposedChart.js

@@ -3,15 +3,23 @@ import { isPresent } from "@manta-eu/lib/present";
 import { Bar, CartesianGrid, LabelList, ComposedChart as RechartsComposedChart, Line, XAxis, YAxis } from "recharts";
 import { renderAnnotations, valueLabelProps } from "./annotations.js";
 import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { chartColorAt } from "./chart-colors.js";
 import { ChartFrame } from "./ChartFrame.js";
+import { barRadius, hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats, seriesValues, } from "./series.js";
 export function ComposedChart(props) {
     const { data } = props;
-    const config = {
-        barValue: { label: data.barLabel ?? "Bar", color: chartColorAt(0) },
-        lineValue: { label: data.lineLabel ?? "Line", color: chartColorAt(1) },
+    const series = data.series ?? [
+        { key: "barValue", kind: "bar", label: data.barLabel ?? "Bar" },
+        { key: "lineValue", kind: "line", label: data.lineLabel ?? "Line" },
+    ];
+    const bars = series.filter((item) => item.kind === "bar");
+    const lines = series.filter((item) => item.kind === "line");
+    const stacked = data.stacked ?? false;
+    const [firstBar] = bars;
+    const [firstLine] = lines;
+    const stats = {
+        ...seriesStats(data.data, series, stacked),
+        bar: firstBar === undefined ? undefined : seriesValues(data.data, firstBar.key),
+        line: firstLine === undefined ? undefined : seriesValues(data.data, firstLine.key),
     };
-    const barValues = data.data.map((point) => point.barValue);
-    const lineValues = data.data.map((point) => point.lineValue);
-    return (_jsx(ChartFrame, { config: config, title: data.title, height: data.height, children: _jsxs(RechartsComposedChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "name", tickLine: false, axisLine: true, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Bar, { dataKey: "barValue", fill: "var(--color-barValue)", radius: [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: "barValue" }) : null }), _jsx(Line, { dataKey: "lineValue", type: "linear", stroke: "var(--color-lineValue)", strokeWidth: 2, dot: { r: 3, fill: "var(--color-card)" }, activeDot: { r: 5 }, isAnimationActive: false }), renderAnnotations(data.annotations, { y: barValues, bar: barValues, line: lineValues })] }) }));
+    return (_jsx(ChartFrame, { config: seriesConfig(series), title: data.title, height: data.height, children: _jsxs(RechartsComposedChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "name", tickLine: false, axisLine: true, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), hasRightAxis(series) ? _jsx(YAxis, { ...rightAxisProps(data.rightAxisLabel) }) : null, _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), bars.map((item) => (_jsx(Bar, { dataKey: item.key, ...seriesAxisProps(item), stackId: stacked ? (item.axis ?? "left") : undefined, fill: seriesColor(series, item), radius: barRadius(bars, item, stacked), maxBarSize: 40, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: item.key }) : null }, item.key))), lines.map((item) => (_jsx(Line, { dataKey: item.key, ...seriesAxisProps(item), type: "linear", stroke: seriesColor(series, item), strokeWidth: 2, dot: { r: 3, fill: "var(--color-card)" }, activeDot: { r: 5 }, isAnimationActive: false }, item.key))), renderAnnotations(data.annotations, stats)] }) }));
 }

package/dist/components/chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/LineChart.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAiD9C"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/LineChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIlE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAqD9C"}

package/dist/components/chart/LineChart.js

@@ -2,13 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isPresent } from "@manta-eu/lib/present";
 import { CartesianGrid, LabelList, Line, LineChart as RechartsLineChart, XAxis, YAxis } from "recharts";
 import { renderAnnotations, valueLabelProps } from "./annotations.js";
-import { ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { chartColorAt } from "./chart-colors.js";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { ChartFrame } from "./ChartFrame.js";
+import { hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats } from "./series.js";
 export function LineChart(props) {
     const { data } = props;
-    const config = {
-        y: { label: data.yAxisLabel ?? "Value", color: chartColorAt(0) },
-    };
-    return (_jsx(ChartFrame, { config: config, title: data.title, height: data.height, children: _jsxs(RechartsLineChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 3" }), _jsx(XAxis, { dataKey: "x", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Line, { dataKey: "y", type: "linear", stroke: "var(--color-y)", strokeWidth: 2, dot: { r: 3, fill: "var(--color-card)" }, activeDot: { r: 5 }, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: "y" }) : null }), renderAnnotations(data.annotations, { y: data.data.map((point) => point.y) })] }) }));
+    const series = data.series ?? [{ key: "y", label: data.yAxisLabel ?? "Value" }];
+    return (_jsx(ChartFrame, { config: seriesConfig(series), title: data.title, height: data.height, children: _jsxs(RechartsLineChart, { accessibilityLayer: true, data: data.data, margin: { top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 3" }), _jsx(XAxis, { dataKey: "x", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, label: isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined }), _jsx(YAxis, { tickLine: false, axisLine: false, width: isPresent(data.yAxisLabel) ? 56 : 44, label: isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined }), hasRightAxis(series) ? _jsx(YAxis, { ...rightAxisProps(data.rightAxisLabel) }) : null, _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), series.length > 1 ? _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }) : null, series.map((item) => (_jsx(Line, { dataKey: item.key, ...seriesAxisProps(item), type: "linear", stroke: seriesColor(series, item), strokeWidth: 2, dot: { r: 3, fill: "var(--color-card)" }, activeDot: { r: 5 }, isAnimationActive: false, children: data.showValueLabels ? _jsx(LabelList, { ...valueLabelProps, dataKey: item.key }) : null }, item.key))), renderAnnotations(data.annotations, seriesStats(data.data, series))] }) }));
 }

package/dist/components/chart/annotations.d.ts

@@ -14,6 +14,10 @@ export type StatContext = {
     y?: number[];
     bar?: number[];
     line?: number[];
+    series?: Record<string, {
+        values: number[];
+        yAxisId?: string;
+    }>;
 };
 export declare function renderAnnotations(annotations?: Annotation[], stats?: StatContext): ReactElement[];
 //# sourceMappingURL=annotations.d.ts.map

package/dist/components/chart/annotations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../../src/components/chart/annotations.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,UAAU,EAAkC,MAAM,iBAAiB,CAAC;AAclF,eAAO,MAAM,eAAe;;;;;;;;CAAuF,CAAC;AAoBpH,MAAM,MAAM,WAAW,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AA0D1F,wBAAgB,iBAAiB,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,CAOjG"}
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../../src/components/chart/annotations.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,UAAU,EAAkC,MAAM,iBAAiB,CAAC;AAclF,eAAO,MAAM,eAAe;;;;;;;;CAAuF,CAAC;AAoBpH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IACb,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjE,CAAC;AAiEF,wBAAgB,iBAAiB,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,CAOjG"}

package/dist/components/chart/annotations.js

@@ -57,6 +57,13 @@ function percentile(values, p) {
 }
 function resolveStatSource(annotation, stats) {
     if (isPresent(annotation.series)) {
+        const named = stats?.series?.[annotation.series];
+        if (named !== undefined && isPresent(named.values)) {
+            return { axis: "y", values: named.values, yAxisId: named.yAxisId };
+        }
+        if (annotation.series !== "bar" && annotation.series !== "line") {
+            return undefined;
+        }
         const seriesValues = annotation.series === "bar" ? stats?.bar : stats?.line;
         if (isPresent(seriesValues)) {
             return { axis: "y", values: seriesValues };
@@ -82,9 +89,9 @@ export function renderAnnotations(annotations, stats) {
         .filter((element) => element !== null);
 }
 function referenceLine(args) {
-    const { key, axis, value, label, labelPosition, stroke, dash } = args;
+    const { key, axis, value, label, labelPosition, stroke, dash, yAxisId } = args;
     const position = axis === "y" ? { y: value } : { x: value };
-    return (_jsx(ReferenceLine, { ...position, stroke: stroke, strokeDasharray: dash ?? "6 4", strokeWidth: 1.5, ifOverflow: "extendDomain", label: isPresent(label) ? annotationLabel(label, labelPosition, stroke) : undefined }, key));
+    return (_jsx(ReferenceLine, { ...position, ...(yAxisId === undefined ? {} : { yAxisId }), stroke: stroke, strokeDasharray: dash ?? "6 4", strokeWidth: 1.5, ifOverflow: "extendDomain", label: isPresent(label) ? annotationLabel(label, labelPosition, stroke) : undefined }, key));
 }
 function renderAnnotation(annotation, index, stats) {
     const key = `annotation-${index}`;
@@ -115,6 +122,7 @@ function renderAnnotation(annotation, index, stats) {
             labelPosition: source.axis === "y" ? "insideBottomRight" : "insideBottom",
             stroke: resolveColor(annotationDefaultColor, line.tone, line.color),
             dash: line.strokeDasharray,
+            yAxisId: source.yAxisId,
         });
     })
         .with({ kind: "reference-area" }, (area) => {