@acronis-platform/ui-react 0.58.0 → 0.60.0
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/ui/area-chart/area-chart.js +91 -63
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +104 -73
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/calendar/calendar.js +17 -15
- package/dist/components/ui/calendar/calendar.js.map +1 -1
- package/dist/components/ui/carousel-dialog/carousel-dialog.js +87 -0
- package/dist/components/ui/carousel-dialog/carousel-dialog.js.map +1 -0
- package/dist/components/ui/category-bar/category-bar.js +126 -0
- package/dist/components/ui/category-bar/category-bar.js.map +1 -0
- package/dist/components/ui/chart/chart-format.js +40 -0
- package/dist/components/ui/chart/chart-format.js.map +1 -0
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/composed-chart/composed-chart.js +91 -63
- package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
- package/dist/components/ui/confidence-cone/confidence-cone.js +113 -85
- package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
- package/dist/components/ui/dialog/dialog.js +29 -29
- package/dist/components/ui/dialog/dialog.js.map +1 -1
- package/dist/components/ui/dialog-footer-carousel/dialog-footer-carousel.js +57 -0
- package/dist/components/ui/dialog-footer-carousel/dialog-footer-carousel.js.map +1 -0
- package/dist/components/ui/dialog-footer-default/dialog-footer-default.js +1 -1
- package/dist/components/ui/dialog-footer-default/dialog-footer-default.js.map +1 -1
- package/dist/components/ui/dialog-welcome/dialog-welcome.js +272 -0
- package/dist/components/ui/dialog-welcome/dialog-welcome.js.map +1 -0
- package/dist/components/ui/histogram/histogram.js +89 -61
- package/dist/components/ui/histogram/histogram.js.map +1 -1
- package/dist/components/ui/input/input.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +120 -92
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/sankey-chart/sankey-chart.js +192 -0
- package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -0
- package/dist/components/ui/scatter-chart/scatter-chart.js +79 -51
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/toolbar/toolbar.js +82 -92
- package/dist/components/ui/toolbar/toolbar.js.map +1 -1
- package/dist/index.js +461 -439
- package/dist/index.js.map +1 -1
- package/dist/lib/breakpoints.js +9 -6
- package/dist/lib/breakpoints.js.map +1 -1
- package/dist/node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.6/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js +25 -0
- package/dist/node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.6/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js.map +1 -0
- package/dist/node_modules/.pnpm/embla-carousel-reactive-utils@8.6.0_embla-carousel@8.6.0/node_modules/embla-carousel-reactive-utils/esm/embla-carousel-reactive-utils.esm.js +36 -0
- package/dist/node_modules/.pnpm/embla-carousel-reactive-utils@8.6.0_embla-carousel@8.6.0/node_modules/embla-carousel-reactive-utils/esm/embla-carousel-reactive-utils.esm.js.map +1 -0
- package/dist/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/esm/embla-carousel.esm.js +1205 -0
- package/dist/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/esm/embla-carousel.esm.js.map +1 -0
- package/dist/react.js +461 -439
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/area-chart/area-chart.d.ts +2 -17
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +2 -17
- package/dist/src/components/ui/carousel-dialog/carousel-dialog.d.ts +28 -0
- package/dist/src/components/ui/carousel-dialog/index.d.ts +1 -0
- package/dist/src/components/ui/category-bar/category-bar.d.ts +51 -0
- package/dist/src/components/ui/category-bar/index.d.ts +1 -0
- package/dist/src/components/ui/chart/__tests__/chart-format.test.d.ts +1 -0
- package/dist/src/components/ui/chart/chart-format.d.ts +111 -0
- package/dist/src/components/ui/chart/chart.d.ts +2 -0
- package/dist/src/components/ui/chart/index.d.ts +3 -1
- package/dist/src/components/ui/composed-chart/composed-chart.d.ts +2 -17
- package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +2 -19
- package/dist/src/components/ui/dialog-footer-carousel/dialog-footer-carousel.d.ts +9 -0
- package/dist/src/components/ui/dialog-footer-carousel/index.d.ts +1 -0
- package/dist/src/components/ui/dialog-welcome/dialog-welcome.d.ts +54 -0
- package/dist/src/components/ui/dialog-welcome/dialog-welcome.docs.d.ts +55 -0
- package/dist/src/components/ui/dialog-welcome/index.d.ts +1 -0
- package/dist/src/components/ui/histogram/histogram.d.ts +2 -17
- package/dist/src/components/ui/line-chart/line-chart.d.ts +2 -17
- package/dist/src/components/ui/sankey-chart/index.d.ts +2 -0
- package/dist/src/components/ui/sankey-chart/sankey-chart.d.ts +69 -0
- package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +2 -17
- package/dist/src/index.d.ts +5 -0
- package/dist/ui-react.css +1 -1
- package/package.json +5 -4
|
@@ -1,98 +1,126 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import { ComposedChart as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { ChartContainer as
|
|
6
|
-
|
|
1
|
+
import { jsx as t, jsxs as M } from "react/jsx-runtime";
|
|
2
|
+
import * as W from "react";
|
|
3
|
+
import { ComposedChart as X, CartesianGrid as Y, XAxis as _, YAxis as q, Bar as E, Area as I, Line as J } from "recharts";
|
|
4
|
+
import { cn as O } from "../../../lib/utils.js";
|
|
5
|
+
import { ChartContainer as P, ChartTooltip as Q, ChartTooltipContent as R, ChartLegend as S, ChartLegendContent as U } from "../chart/chart.js";
|
|
6
|
+
import { resolveAxisDomain as V } from "../chart/chart-format.js";
|
|
7
|
+
const Z = W.forwardRef(
|
|
7
8
|
({
|
|
8
|
-
className:
|
|
9
|
-
config:
|
|
10
|
-
data:
|
|
11
|
-
series:
|
|
12
|
-
xKey:
|
|
13
|
-
xAxisLabel:
|
|
14
|
-
yAxisLabel:
|
|
15
|
-
yUnit:
|
|
16
|
-
curve:
|
|
17
|
-
barRadius:
|
|
9
|
+
className: s,
|
|
10
|
+
config: d,
|
|
11
|
+
data: m,
|
|
12
|
+
series: c,
|
|
13
|
+
xKey: f,
|
|
14
|
+
xAxisLabel: i,
|
|
15
|
+
yAxisLabel: a,
|
|
16
|
+
yUnit: h,
|
|
17
|
+
curve: l = "monotone",
|
|
18
|
+
barRadius: n = 4,
|
|
18
19
|
fillOpacity: p = 0.3,
|
|
19
20
|
showGrid: y = !0,
|
|
20
|
-
showTooltip:
|
|
21
|
+
showTooltip: u = !0,
|
|
21
22
|
showLegend: C = !0,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
showXAxis: k = !0,
|
|
24
|
+
showYAxis: v = !0,
|
|
25
|
+
xTickFormatter: g,
|
|
26
|
+
yTickFormatter: K,
|
|
27
|
+
xAxisAngle: o,
|
|
28
|
+
xAxisInterval: T,
|
|
29
|
+
yAxisTickCount: D,
|
|
30
|
+
yAxisDomain: L,
|
|
31
|
+
gridDashed: N,
|
|
32
|
+
gridHorizontal: j,
|
|
33
|
+
gridVertical: w,
|
|
34
|
+
tooltipContent: z,
|
|
35
|
+
...A
|
|
36
|
+
}, B) => {
|
|
37
|
+
const F = i ? { value: i, position: "insideBottom", offset: 0 } : void 0, $ = a ? {
|
|
38
|
+
value: a,
|
|
27
39
|
angle: -90,
|
|
28
40
|
position: "insideLeft",
|
|
29
41
|
style: { textAnchor: "middle" }
|
|
30
|
-
} : void 0;
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
-
|
|
42
|
+
} : void 0, G = V(L), H = i || o != null ? 30 + (o != null ? 20 : 0) + (i ? 18 : 0) : void 0;
|
|
43
|
+
return /* @__PURE__ */ t("div", { ref: B, className: O(s), ...A, children: /* @__PURE__ */ t(
|
|
44
|
+
P,
|
|
33
45
|
{
|
|
34
|
-
config:
|
|
46
|
+
config: d,
|
|
35
47
|
className: "size-full [&_.recharts-label]:fill-foreground",
|
|
36
|
-
children: /* @__PURE__ */
|
|
37
|
-
y && /* @__PURE__ */
|
|
38
|
-
|
|
39
|
-
N,
|
|
48
|
+
children: /* @__PURE__ */ M(X, { data: m, children: [
|
|
49
|
+
y && /* @__PURE__ */ t(
|
|
50
|
+
Y,
|
|
40
51
|
{
|
|
41
|
-
|
|
52
|
+
horizontal: j ?? !0,
|
|
53
|
+
vertical: w ?? !1,
|
|
54
|
+
strokeDasharray: N ? "3 3" : void 0
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
/* @__PURE__ */ t(
|
|
58
|
+
_,
|
|
59
|
+
{
|
|
60
|
+
dataKey: f,
|
|
42
61
|
type: "category",
|
|
62
|
+
hide: !k,
|
|
43
63
|
tickLine: !1,
|
|
44
64
|
axisLine: !1,
|
|
45
65
|
tickMargin: 8,
|
|
46
|
-
|
|
47
|
-
|
|
66
|
+
tickFormatter: g,
|
|
67
|
+
angle: o,
|
|
68
|
+
interval: T,
|
|
69
|
+
textAnchor: o != null ? o < 0 ? "end" : "start" : void 0,
|
|
70
|
+
height: H,
|
|
71
|
+
label: F
|
|
48
72
|
}
|
|
49
73
|
),
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
|
|
74
|
+
/* @__PURE__ */ t(
|
|
75
|
+
q,
|
|
52
76
|
{
|
|
53
77
|
type: "number",
|
|
78
|
+
hide: !v,
|
|
54
79
|
tickLine: !1,
|
|
55
80
|
axisLine: !1,
|
|
56
|
-
unit:
|
|
57
|
-
|
|
58
|
-
|
|
81
|
+
unit: h,
|
|
82
|
+
tickFormatter: K,
|
|
83
|
+
tickCount: D,
|
|
84
|
+
domain: G,
|
|
85
|
+
width: a ? 72 : void 0,
|
|
86
|
+
label: $
|
|
59
87
|
}
|
|
60
88
|
),
|
|
61
|
-
|
|
62
|
-
C && /* @__PURE__ */
|
|
63
|
-
|
|
64
|
-
const
|
|
65
|
-
return
|
|
66
|
-
|
|
89
|
+
u && /* @__PURE__ */ t(Q, { content: z ?? /* @__PURE__ */ t(R, {}) }),
|
|
90
|
+
C && /* @__PURE__ */ t(S, { content: /* @__PURE__ */ t(U, {}) }),
|
|
91
|
+
c.map((e) => {
|
|
92
|
+
const r = `var(--color-${e.key})`;
|
|
93
|
+
return e.type === "bar" ? /* @__PURE__ */ t(
|
|
94
|
+
E,
|
|
67
95
|
{
|
|
68
|
-
dataKey:
|
|
69
|
-
fill:
|
|
70
|
-
radius:
|
|
96
|
+
dataKey: e.key,
|
|
97
|
+
fill: r,
|
|
98
|
+
radius: n > 0 ? [n, n, 0, 0] : void 0,
|
|
71
99
|
isAnimationActive: !1
|
|
72
100
|
},
|
|
73
|
-
|
|
74
|
-
) :
|
|
75
|
-
|
|
101
|
+
e.key
|
|
102
|
+
) : e.type === "area" ? /* @__PURE__ */ t(
|
|
103
|
+
I,
|
|
76
104
|
{
|
|
77
|
-
type:
|
|
78
|
-
dataKey:
|
|
79
|
-
stroke:
|
|
80
|
-
fill:
|
|
105
|
+
type: l,
|
|
106
|
+
dataKey: e.key,
|
|
107
|
+
stroke: r,
|
|
108
|
+
fill: r,
|
|
81
109
|
fillOpacity: p,
|
|
82
110
|
isAnimationActive: !1
|
|
83
111
|
},
|
|
84
|
-
|
|
85
|
-
) : /* @__PURE__ */
|
|
86
|
-
|
|
112
|
+
e.key
|
|
113
|
+
) : /* @__PURE__ */ t(
|
|
114
|
+
J,
|
|
87
115
|
{
|
|
88
|
-
type:
|
|
89
|
-
dataKey:
|
|
90
|
-
stroke:
|
|
116
|
+
type: l,
|
|
117
|
+
dataKey: e.key,
|
|
118
|
+
stroke: r,
|
|
91
119
|
strokeWidth: 2,
|
|
92
120
|
dot: !1,
|
|
93
121
|
isAnimationActive: !1
|
|
94
122
|
},
|
|
95
|
-
|
|
123
|
+
e.key
|
|
96
124
|
);
|
|
97
125
|
})
|
|
98
126
|
] })
|
|
@@ -100,8 +128,8 @@ const _ = K.forwardRef(
|
|
|
100
128
|
) });
|
|
101
129
|
}
|
|
102
130
|
);
|
|
103
|
-
|
|
131
|
+
Z.displayName = "ComposedChart";
|
|
104
132
|
export {
|
|
105
|
-
|
|
133
|
+
Z as ComposedChart
|
|
106
134
|
};
|
|
107
135
|
//# sourceMappingURL=composed-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"composed-chart.js","sources":["../../../../src/components/ui/composed-chart/composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Area,\n Bar,\n CartesianGrid,\n ComposedChart as RechartsComposedChart,\n Line,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A composed\n// chart's defining trait is that each series picks its own render type\n// (bar / line / area) over one shared category axis — so, like ScatterChart,\n// there's no single visual \"mode\" to model as a CVA variant (the skill's\n// \"per-series type\"). The variation lives in the `series[].type` list instead.\nexport type ComposedSeriesType = 'bar' | 'line' | 'area';\n\nexport interface ComposedSeries {\n /** Column key to plot — must match a `config` entry; drives its `--color-<key>` paint. */\n key: string;\n /** How this series renders. */\n type: ComposedSeriesType;\n}\n\nexport interface ComposedChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'> {\n /** Row-per-category data. Each object holds `xKey` + one numeric field per series. */\n data: ReadonlyArray<Record<string, string | number>>;\n /**\n * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n * the shared `Chart` primitives). Turned into `--color-<key>` custom\n * properties. Colors are caller-supplied — reference an existing semantic\n * `--ui-*` token; there is no chart palette tier yet.\n */\n config: ChartConfig;\n /** Series to plot, each `{ key, type }` — one bar/line/area per entry. Each key must exist in `config` and every data row. */\n series: ComposedSeries[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Title rendered beneath the horizontal (X) axis. */\n xAxisLabel?: string;\n /** Title rendered beside the vertical (Y) axis (rotated). */\n yAxisLabel?: string;\n /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n yUnit?: string;\n /** Interpolation for the line and area series. */\n curve?: 'linear' | 'monotone' | 'step';\n /** Corner radius on the growing end of bar series. */\n barRadius?: number;\n /** Flat-fill opacity for area series. */\n fillOpacity?: number;\n showGrid?: boolean;\n showTooltip?: boolean;\n showLegend?: boolean;\n /**\n * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n * `indicator` — to customize formatting, per-series rows, or extra fields\n * without composing recharts yourself. Ignored when `showTooltip` is false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(\n (\n {\n className,\n config,\n data,\n series,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n curve = 'monotone',\n barRadius = 4,\n fillOpacity = 0.3,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsComposedChart data={data as readonly unknown[]}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n height={xAxisLabel ? 48 : undefined}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip && (\n <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n )}\n {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n {/* Rendered in the caller's `series` order — recharts paints children\n back-to-front, so later entries sit on top. Order them so thin\n marks (a line) come after the areas/bars they should overlay. */}\n {series.map((s) => {\n const color = `var(--color-${s.key})`;\n if (s.type === 'bar') {\n return (\n <Bar\n key={s.key}\n dataKey={s.key}\n fill={color}\n radius={\n barRadius > 0\n ? [barRadius, barRadius, 0, 0]\n : undefined\n }\n isAnimationActive={false}\n />\n );\n }\n if (s.type === 'area') {\n return (\n <Area\n key={s.key}\n type={curve}\n dataKey={s.key}\n stroke={color}\n fill={color}\n fillOpacity={fillOpacity}\n isAnimationActive={false}\n />\n );\n }\n return (\n <Line\n key={s.key}\n type={curve}\n dataKey={s.key}\n stroke={color}\n strokeWidth={2}\n dot={false}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsComposedChart>\n </ChartContainer>\n </div>\n );\n }\n);\nComposedChart.displayName = 'ComposedChart';\n\nexport { ComposedChart };\n"],"names":["ComposedChart","React","className","config","data","series","xKey","xAxisLabel","yAxisLabel","yUnit","curve","barRadius","fillOpacity","showGrid","showTooltip","showLegend","tooltipContent","props","ref","xAxisTitle","yAxisTitle","jsx","cn","ChartContainer","jsxs","RechartsComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","color","Bar","Area","Line"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"composed-chart.js","sources":["../../../../src/components/ui/composed-chart/composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Area,\n Bar,\n CartesianGrid,\n ComposedChart as RechartsComposedChart,\n Line,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAxisDomain,\n type ChartConfig,\n type CartesianChartProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A composed\n// chart's defining trait is that each series picks its own render type\n// (bar / line / area) over one shared category axis — so, like ScatterChart,\n// there's no single visual \"mode\" to model as a CVA variant (the skill's\n// \"per-series type\"). The variation lives in the `series[].type` list instead.\nexport type ComposedSeriesType = 'bar' | 'line' | 'area';\n\nexport interface ComposedSeries {\n /** Column key to plot — must match a `config` entry; drives its `--color-<key>` paint. */\n key: string;\n /** How this series renders. */\n type: ComposedSeriesType;\n}\n\nexport interface ComposedChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n CartesianChartProps {\n /** Row-per-category data. Each object holds `xKey` + one numeric field per series. */\n data: ReadonlyArray<Record<string, string | number>>;\n /**\n * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n * the shared `Chart` primitives). Turned into `--color-<key>` custom\n * properties. Colors are caller-supplied — reference an existing semantic\n * `--ui-*` token; there is no chart palette tier yet.\n */\n config: ChartConfig;\n /** Series to plot, each `{ key, type }` — one bar/line/area per entry. Each key must exist in `config` and every data row. */\n series: ComposedSeries[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Interpolation for the line and area series. */\n curve?: 'linear' | 'monotone' | 'step';\n /** Corner radius on the growing end of bar series. */\n barRadius?: number;\n /** Flat-fill opacity for area series. */\n fillOpacity?: number;\n showLegend?: boolean;\n}\n\nconst ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(\n (\n {\n className,\n config,\n data,\n series,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n curve = 'monotone',\n barRadius = 4,\n fillOpacity = 0.3,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n // Room for the X tick row: recharts' default 30, plus a rotated tick row\n // (+20) and/or the axis title (+18). Additive — both can be present at once,\n // which the old label-or-angle ternary under-allocated.\n const xAxisHeight =\n xAxisLabel || xAxisAngle != null\n ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n : undefined;\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsComposedChart data={data as readonly unknown[]}>\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={xTickFormatter}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={\n xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n }\n height={xAxisHeight}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip && (\n <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n )}\n {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n {/* Rendered in the caller's `series` order — recharts paints children\n back-to-front, so later entries sit on top. Order them so thin\n marks (a line) come after the areas/bars they should overlay. */}\n {series.map((s) => {\n const color = `var(--color-${s.key})`;\n if (s.type === 'bar') {\n return (\n <Bar\n key={s.key}\n dataKey={s.key}\n fill={color}\n radius={\n barRadius > 0\n ? [barRadius, barRadius, 0, 0]\n : undefined\n }\n isAnimationActive={false}\n />\n );\n }\n if (s.type === 'area') {\n return (\n <Area\n key={s.key}\n type={curve}\n dataKey={s.key}\n stroke={color}\n fill={color}\n fillOpacity={fillOpacity}\n isAnimationActive={false}\n />\n );\n }\n return (\n <Line\n key={s.key}\n type={curve}\n dataKey={s.key}\n stroke={color}\n strokeWidth={2}\n dot={false}\n isAnimationActive={false}\n />\n );\n })}\n </RechartsComposedChart>\n </ChartContainer>\n </div>\n );\n }\n);\nComposedChart.displayName = 'ComposedChart';\n\nexport { ComposedChart };\n"],"names":["ComposedChart","React","className","config","data","series","xKey","xAxisLabel","yAxisLabel","yUnit","curve","barRadius","fillOpacity","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","props","ref","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","jsx","cn","ChartContainer","jsxs","RechartsComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","color","Bar","Area","Line"],"mappings":"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"}
|
|
@@ -1,146 +1,174 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { ComposedChart as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { ChartContainer as
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as e, jsxs as U } from "react/jsx-runtime";
|
|
2
|
+
import * as f from "react";
|
|
3
|
+
import { ComposedChart as V, CartesianGrid as Z, XAxis as K, YAxis as W, ReferenceArea as ee, ReferenceLine as te, Area as b, Line as oe } from "recharts";
|
|
4
|
+
import { cn as ne } from "../../../lib/utils.js";
|
|
5
|
+
import { ChartContainer as re, ChartTooltip as N, ChartTooltipContent as ie, ChartLegend as ae, ChartLegendContent as le } from "../chart/chart.js";
|
|
6
|
+
import { resolveAxisDomain as ce } from "../chart/chart-format.js";
|
|
7
|
+
const m = "__cone";
|
|
8
|
+
function v(o) {
|
|
9
|
+
return o == null ? void 0 : o.filter((l) => l.dataKey !== m);
|
|
9
10
|
}
|
|
10
|
-
function
|
|
11
|
+
function se(o) {
|
|
11
12
|
return function(n) {
|
|
12
13
|
const r = {
|
|
13
14
|
...n,
|
|
14
|
-
payload:
|
|
15
|
+
payload: v(n.payload)
|
|
15
16
|
};
|
|
16
|
-
return typeof
|
|
17
|
-
|
|
17
|
+
return typeof o == "function" ? f.createElement(
|
|
18
|
+
o,
|
|
18
19
|
r
|
|
19
|
-
) :
|
|
20
|
+
) : f.cloneElement(o, r);
|
|
20
21
|
};
|
|
21
22
|
}
|
|
22
|
-
const
|
|
23
|
+
const fe = f.forwardRef(
|
|
23
24
|
({
|
|
24
|
-
className:
|
|
25
|
-
config:
|
|
25
|
+
className: o,
|
|
26
|
+
config: l,
|
|
26
27
|
data: n,
|
|
27
28
|
xKey: r,
|
|
28
29
|
actualKey: i,
|
|
29
30
|
forecastKey: p,
|
|
30
|
-
lowerKey:
|
|
31
|
-
upperKey:
|
|
32
|
-
xAxisLabel:
|
|
33
|
-
yAxisLabel:
|
|
34
|
-
yUnit:
|
|
35
|
-
strokeWidth:
|
|
36
|
-
showForecastRegion:
|
|
37
|
-
showGrid:
|
|
38
|
-
showTooltip:
|
|
39
|
-
showLegend:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
lowerKey: A,
|
|
32
|
+
upperKey: L,
|
|
33
|
+
xAxisLabel: c,
|
|
34
|
+
yAxisLabel: d,
|
|
35
|
+
yUnit: O,
|
|
36
|
+
strokeWidth: h = 2,
|
|
37
|
+
showForecastRegion: R = !0,
|
|
38
|
+
showGrid: _ = !0,
|
|
39
|
+
showTooltip: $ = !0,
|
|
40
|
+
showLegend: B = !0,
|
|
41
|
+
showXAxis: E = !0,
|
|
42
|
+
showYAxis: j = !0,
|
|
43
|
+
xTickFormatter: w,
|
|
44
|
+
yTickFormatter: z,
|
|
45
|
+
xAxisAngle: a,
|
|
46
|
+
xAxisInterval: F,
|
|
47
|
+
yAxisTickCount: M,
|
|
48
|
+
yAxisDomain: X,
|
|
49
|
+
gridDashed: Y,
|
|
50
|
+
gridHorizontal: x,
|
|
51
|
+
gridVertical: G,
|
|
52
|
+
tooltipContent: u,
|
|
53
|
+
...H
|
|
54
|
+
}, S) => {
|
|
55
|
+
var k, g;
|
|
56
|
+
const y = f.useMemo(
|
|
57
|
+
() => u ? se(u) : void 0,
|
|
58
|
+
[u]
|
|
59
|
+
), q = c ? { value: c, position: "insideBottom", offset: 0 } : void 0, I = d ? {
|
|
60
|
+
value: d,
|
|
49
61
|
angle: -90,
|
|
50
62
|
position: "insideLeft",
|
|
51
63
|
style: { textAnchor: "middle" }
|
|
52
|
-
} : void 0,
|
|
53
|
-
const
|
|
64
|
+
} : void 0, J = ce(X), P = c || a != null ? 30 + (a != null ? 20 : 0) + (c ? 18 : 0) : void 0, Q = n.map((t) => {
|
|
65
|
+
const D = t[A], T = t[L];
|
|
54
66
|
return {
|
|
55
|
-
...
|
|
56
|
-
[
|
|
67
|
+
...t,
|
|
68
|
+
[m]: typeof D == "number" && typeof T == "number" ? [D, T] : void 0
|
|
57
69
|
};
|
|
58
|
-
}),
|
|
59
|
-
return /* @__PURE__ */ e("div", { ref:
|
|
60
|
-
|
|
70
|
+
}), s = R ? (k = n.find((t) => typeof t[p] == "number")) == null ? void 0 : k[r] : void 0, C = (g = n[n.length - 1]) == null ? void 0 : g[r];
|
|
71
|
+
return /* @__PURE__ */ e("div", { ref: S, className: ne(o), ...H, children: /* @__PURE__ */ e(
|
|
72
|
+
re,
|
|
61
73
|
{
|
|
62
|
-
config:
|
|
74
|
+
config: l,
|
|
63
75
|
className: "size-full [&_.recharts-label]:fill-foreground",
|
|
64
|
-
children: /* @__PURE__ */
|
|
65
|
-
|
|
76
|
+
children: /* @__PURE__ */ U(V, { data: Q, children: [
|
|
77
|
+
_ && /* @__PURE__ */ e(
|
|
78
|
+
Z,
|
|
79
|
+
{
|
|
80
|
+
horizontal: x ?? !0,
|
|
81
|
+
vertical: G ?? !1,
|
|
82
|
+
strokeDasharray: Y ? "3 3" : void 0
|
|
83
|
+
}
|
|
84
|
+
),
|
|
66
85
|
/* @__PURE__ */ e(
|
|
67
|
-
|
|
86
|
+
K,
|
|
68
87
|
{
|
|
69
88
|
dataKey: r,
|
|
70
89
|
type: "category",
|
|
90
|
+
hide: !E,
|
|
71
91
|
tickLine: !1,
|
|
72
92
|
axisLine: !1,
|
|
73
93
|
tickMargin: 8,
|
|
74
|
-
|
|
75
|
-
|
|
94
|
+
tickFormatter: w,
|
|
95
|
+
angle: a,
|
|
96
|
+
interval: F,
|
|
97
|
+
textAnchor: a != null ? a < 0 ? "end" : "start" : void 0,
|
|
98
|
+
height: P,
|
|
99
|
+
label: q
|
|
76
100
|
}
|
|
77
101
|
),
|
|
78
102
|
/* @__PURE__ */ e(
|
|
79
|
-
|
|
103
|
+
W,
|
|
80
104
|
{
|
|
81
105
|
type: "number",
|
|
106
|
+
hide: !j,
|
|
82
107
|
tickLine: !1,
|
|
83
108
|
axisLine: !1,
|
|
84
|
-
unit:
|
|
85
|
-
|
|
86
|
-
|
|
109
|
+
unit: O,
|
|
110
|
+
tickFormatter: z,
|
|
111
|
+
tickCount: M,
|
|
112
|
+
domain: J,
|
|
113
|
+
width: d ? 72 : void 0,
|
|
114
|
+
label: I
|
|
87
115
|
}
|
|
88
116
|
),
|
|
89
|
-
|
|
90
|
-
|
|
117
|
+
s != null && C != null && /* @__PURE__ */ e(
|
|
118
|
+
ee,
|
|
91
119
|
{
|
|
92
|
-
x1:
|
|
93
|
-
x2:
|
|
120
|
+
x1: s,
|
|
121
|
+
x2: C,
|
|
94
122
|
fill: "var(--ui-background-surface-secondary)",
|
|
95
123
|
fillOpacity: 0.5,
|
|
96
124
|
ifOverflow: "extendDomain"
|
|
97
125
|
}
|
|
98
126
|
),
|
|
99
|
-
|
|
100
|
-
|
|
127
|
+
s != null && /* @__PURE__ */ e(
|
|
128
|
+
te,
|
|
101
129
|
{
|
|
102
|
-
x:
|
|
130
|
+
x: s,
|
|
103
131
|
stroke: "var(--ui-border-on-surface-border)",
|
|
104
132
|
strokeDasharray: "4 4"
|
|
105
133
|
}
|
|
106
134
|
),
|
|
107
|
-
|
|
135
|
+
$ && (y ? (
|
|
108
136
|
// Strips the synthetic band before the caller's tooltip sees it
|
|
109
137
|
// — the `__cone` series feeds the Area, not the tooltip.
|
|
110
|
-
/* @__PURE__ */ e(
|
|
138
|
+
/* @__PURE__ */ e(N, { content: y })
|
|
111
139
|
) : /* @__PURE__ */ e(
|
|
112
|
-
|
|
140
|
+
N,
|
|
113
141
|
{
|
|
114
|
-
content: (
|
|
115
|
-
|
|
142
|
+
content: (t) => /* @__PURE__ */ e(
|
|
143
|
+
ie,
|
|
116
144
|
{
|
|
117
|
-
active:
|
|
118
|
-
label:
|
|
119
|
-
payload:
|
|
120
|
-
|
|
145
|
+
active: t.active,
|
|
146
|
+
label: t.label,
|
|
147
|
+
payload: v(
|
|
148
|
+
t.payload
|
|
121
149
|
)
|
|
122
150
|
}
|
|
123
151
|
)
|
|
124
152
|
}
|
|
125
153
|
)),
|
|
126
|
-
|
|
127
|
-
|
|
154
|
+
B && /* @__PURE__ */ e(
|
|
155
|
+
ae,
|
|
128
156
|
{
|
|
129
|
-
content: (
|
|
130
|
-
|
|
157
|
+
content: (t) => /* @__PURE__ */ e(
|
|
158
|
+
le,
|
|
131
159
|
{
|
|
132
|
-
verticalAlign:
|
|
133
|
-
payload:
|
|
134
|
-
|
|
160
|
+
verticalAlign: t.verticalAlign,
|
|
161
|
+
payload: v(
|
|
162
|
+
t.payload
|
|
135
163
|
)
|
|
136
164
|
}
|
|
137
165
|
)
|
|
138
166
|
}
|
|
139
167
|
),
|
|
140
168
|
/* @__PURE__ */ e(
|
|
141
|
-
|
|
169
|
+
b,
|
|
142
170
|
{
|
|
143
|
-
dataKey:
|
|
171
|
+
dataKey: m,
|
|
144
172
|
type: "monotone",
|
|
145
173
|
stroke: "none",
|
|
146
174
|
fill: `var(--color-${i})`,
|
|
@@ -154,12 +182,12 @@ const V = c.forwardRef(
|
|
|
154
182
|
}
|
|
155
183
|
),
|
|
156
184
|
/* @__PURE__ */ e(
|
|
157
|
-
|
|
185
|
+
b,
|
|
158
186
|
{
|
|
159
187
|
dataKey: i,
|
|
160
188
|
type: "monotone",
|
|
161
189
|
stroke: `var(--color-${i})`,
|
|
162
|
-
strokeWidth:
|
|
190
|
+
strokeWidth: h,
|
|
163
191
|
fill: `var(--color-${i})`,
|
|
164
192
|
fillOpacity: 0.15,
|
|
165
193
|
dot: !1,
|
|
@@ -169,12 +197,12 @@ const V = c.forwardRef(
|
|
|
169
197
|
}
|
|
170
198
|
),
|
|
171
199
|
/* @__PURE__ */ e(
|
|
172
|
-
|
|
200
|
+
oe,
|
|
173
201
|
{
|
|
174
202
|
dataKey: p,
|
|
175
203
|
type: "monotone",
|
|
176
204
|
stroke: `var(--color-${i})`,
|
|
177
|
-
strokeWidth:
|
|
205
|
+
strokeWidth: h,
|
|
178
206
|
strokeDasharray: "5 5",
|
|
179
207
|
dot: !1,
|
|
180
208
|
connectNulls: !0,
|
|
@@ -186,10 +214,10 @@ const V = c.forwardRef(
|
|
|
186
214
|
) });
|
|
187
215
|
}
|
|
188
216
|
);
|
|
189
|
-
|
|
217
|
+
fe.displayName = "ConfidenceCone";
|
|
190
218
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
219
|
+
fe as ConfidenceCone,
|
|
220
|
+
se as createConeTooltip,
|
|
221
|
+
v as dropConeBand
|
|
194
222
|
};
|
|
195
223
|
//# sourceMappingURL=confidence-cone.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confidence-cone.js","sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n ReferenceArea,\n ReferenceLine,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// The band is a synthetic `[lower, upper]` range field per row that a recharts\n// <Area> shades; kept out of the tooltip/legend (see the filters below).\nconst BAND_KEY = '__cone';\n\n/**\n * Drop the synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so the\n * `__cone` band never surfaces regardless of which path renders.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n payload: readonly T[] | undefined\n): T[] | undefined {\n return payload?.filter((item) => item.dataKey !== BAND_KEY);\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n return function ConeTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropConeBand(props.payload),\n } as TooltipRenderProps;\n return typeof tooltipContent === 'function'\n ? React.createElement(\n tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n merged\n )\n : React.cloneElement(tooltipContent, merged);\n };\n}\n\nexport interface ConfidenceConeProps\n extends Omit<React.ComponentProps<'div'>, 'children'> {\n /**\n * Row-per-point data — the shared x dimension plus the actual / forecast /\n * bound fields. Rows are naturally sparse (a point has either an actual or a\n * forecast + bounds), so missing fields are allowed. Avoid a field named\n * `__cone` — it's reserved for the internal prediction-band series.\n */\n data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n /**\n * Per-series map of `label` / `color` for the actual + forecast lines\n * (imported from the shared `Chart` primitives). Colors are caller-supplied —\n * reference an existing semantic `--ui-*` token; there is no chart palette tier\n * yet. The cone band and the forecast line both reuse the actual series'\n * color — actual and forecast differ by line style, not hue.\n */\n config: ChartConfig;\n /** Category / time axis key (the shared dimension across rows). */\n xKey: string;\n /** Field for the known/actual values — drawn as a solid line with a filled area. */\n actualKey: string;\n /** Field for the projected values — drawn as a dashed line. */\n forecastKey: string;\n /** Field for the cone's lower bound. */\n lowerKey: string;\n /** Field for the cone's upper bound. */\n upperKey: string;\n /** Title rendered beneath the horizontal (X) axis. */\n xAxisLabel?: string;\n /** Title rendered beside the vertical (Y) axis (rotated). */\n yAxisLabel?: string;\n /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n yUnit?: string;\n /** Stroke width of the actual + forecast lines. */\n strokeWidth?: number;\n /**\n * Set off the forecast period from the actuals with a dashed divider at the\n * hand-off point (the first row with a forecast value) and a subtle shaded\n * band over the forecast region.\n */\n showForecastRegion?: boolean;\n showGrid?: boolean;\n showTooltip?: boolean;\n showLegend?: boolean;\n /**\n * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n * to customize the tooltip without composing recharts yourself. The synthetic\n * cone band is filtered out of the payload before your tooltip sees it, so a\n * `__cone` item never reaches your formatter. Ignored when `showTooltip` is\n * false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n (\n {\n className,\n config,\n data,\n xKey,\n actualKey,\n forecastKey,\n lowerKey,\n upperKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n strokeWidth = 2,\n showForecastRegion = true,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n // Memoized so recharts sees a stable content type across renders — a fresh\n // wrapper each render would remount the caller's tooltip and reset its state.\n const customTooltip = React.useMemo(\n () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n [tooltipContent]\n );\n\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n // Augment each row with the `[lower, upper]` band tuple the Area shades.\n // Rows missing a numeric bound are left un-coned (the band breaks there).\n const chartData = data.map((row) => {\n const lower = row[lowerKey];\n const upper = row[upperKey];\n return {\n ...row,\n [BAND_KEY]:\n typeof lower === 'number' && typeof upper === 'number'\n ? [lower, upper]\n : undefined,\n };\n });\n\n // The forecast begins at the first row carrying a forecast value; set that\n // region off from the actuals with a shaded band + a divider at the hand-off.\n const forecastStart = showForecastRegion\n ? data.find((row) => typeof row[forecastKey] === 'number')?.[xKey]\n : undefined;\n const lastX = data[data.length - 1]?.[xKey];\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <ComposedChart data={chartData as readonly unknown[]}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n height={xAxisLabel ? 48 : undefined}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {/* Set the forecast region off from the actuals (behind everything). */}\n {forecastStart != null && lastX != null && (\n <ReferenceArea\n x1={forecastStart}\n x2={lastX}\n fill=\"var(--ui-background-surface-secondary)\"\n fillOpacity={0.5}\n ifOverflow=\"extendDomain\"\n />\n )}\n {forecastStart != null && (\n <ReferenceLine\n x={forecastStart}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n )}\n {showTooltip &&\n (customTooltip ? (\n // Strips the synthetic band before the caller's tooltip sees it\n // — the `__cone` series feeds the Area, not the tooltip.\n <ChartTooltip content={customTooltip} />\n ) : (\n <ChartTooltip\n content={(tp) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n // The synthetic band feeds the Area, not the tooltip.\n payload={\n dropConeBand(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )}\n />\n ))}\n {showLegend && (\n <ChartLegend\n content={(lp) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n payload={\n dropConeBand(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )}\n />\n )}\n {/* The cone renders first so the lines draw on top. One color for the\n whole metric — actual and forecast differ by line style, not hue —\n so the cone + forecast line reuse the actual series' color. */}\n <Area\n dataKey={BAND_KEY}\n type=\"monotone\"\n stroke=\"none\"\n fill={`var(--color-${actualKey})`}\n fillOpacity={0.15}\n connectNulls={false}\n dot={false}\n activeDot={false}\n isAnimationActive={false}\n legendType=\"none\"\n tooltipType=\"none\"\n />\n <Area\n dataKey={actualKey}\n type=\"monotone\"\n stroke={`var(--color-${actualKey})`}\n strokeWidth={strokeWidth}\n fill={`var(--color-${actualKey})`}\n fillOpacity={0.15}\n dot={false}\n activeDot={false}\n connectNulls\n isAnimationActive={false}\n />\n <Line\n dataKey={forecastKey}\n type=\"monotone\"\n stroke={`var(--color-${actualKey})`}\n strokeWidth={strokeWidth}\n strokeDasharray=\"5 5\"\n dot={false}\n connectNulls\n isAnimationActive={false}\n />\n </ComposedChart>\n </ChartContainer>\n </div>\n );\n }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"names":["BAND_KEY","dropConeBand","payload","item","createConeTooltip","tooltipContent","props","merged","React","ConfidenceCone","className","config","data","xKey","actualKey","forecastKey","lowerKey","upperKey","xAxisLabel","yAxisLabel","yUnit","strokeWidth","showForecastRegion","showGrid","showTooltip","showLegend","ref","customTooltip","xAxisTitle","yAxisTitle","chartData","row","lower","upper","forecastStart","_a","lastX","_b","jsx","cn","ChartContainer","jsxs","ComposedChart","CartesianGrid","XAxis","YAxis","ReferenceArea","ReferenceLine","ChartTooltip","tp","ChartTooltipContent","ChartLegend","lp","ChartLegendContent","Area","Line"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"confidence-cone.js","sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n ReferenceArea,\n ReferenceLine,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAxisDomain,\n type ChartConfig,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// The band is a synthetic `[lower, upper]` range field per row that a recharts\n// <Area> shades; kept out of the tooltip/legend (see the filters below).\nconst BAND_KEY = '__cone';\n\n/**\n * Drop the synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so the\n * `__cone` band never surfaces regardless of which path renders.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n payload: readonly T[] | undefined\n): T[] | undefined {\n return payload?.filter((item) => item.dataKey !== BAND_KEY);\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n return function ConeTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropConeBand(props.payload),\n } as TooltipRenderProps;\n return typeof tooltipContent === 'function'\n ? React.createElement(\n tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n merged\n )\n : React.cloneElement(tooltipContent, merged);\n };\n}\n\nexport interface ConfidenceConeProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n CartesianChartProps {\n /**\n * Row-per-point data — the shared x dimension plus the actual / forecast /\n * bound fields. Rows are naturally sparse (a point has either an actual or a\n * forecast + bounds), so missing fields are allowed. Avoid a field named\n * `__cone` — it's reserved for the internal prediction-band series.\n */\n data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n /**\n * Per-series map of `label` / `color` for the actual + forecast lines\n * (imported from the shared `Chart` primitives). Colors are caller-supplied —\n * reference an existing semantic `--ui-*` token; there is no chart palette tier\n * yet. The cone band and the forecast line both reuse the actual series'\n * color — actual and forecast differ by line style, not hue.\n */\n config: ChartConfig;\n /** Category / time axis key (the shared dimension across rows). */\n xKey: string;\n /** Field for the known/actual values — drawn as a solid line with a filled area. */\n actualKey: string;\n /** Field for the projected values — drawn as a dashed line. */\n forecastKey: string;\n /** Field for the cone's lower bound. */\n lowerKey: string;\n /** Field for the cone's upper bound. */\n upperKey: string;\n /** Stroke width of the actual + forecast lines. */\n strokeWidth?: number;\n /**\n * Set off the forecast period from the actuals with a dashed divider at the\n * hand-off point (the first row with a forecast value) and a subtle shaded\n * band over the forecast region.\n */\n showForecastRegion?: boolean;\n showLegend?: boolean;\n}\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n (\n {\n className,\n config,\n data,\n xKey,\n actualKey,\n forecastKey,\n lowerKey,\n upperKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n strokeWidth = 2,\n showForecastRegion = true,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n // Memoized so recharts sees a stable content type across renders — a fresh\n // wrapper each render would remount the caller's tooltip and reset its state.\n const customTooltip = React.useMemo(\n () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n [tooltipContent]\n );\n\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n // Room for the X tick row: recharts' default 30, plus a rotated tick row\n // (+20) and/or the axis title (+18). Additive — both can be present at once,\n // which the old label-or-angle ternary under-allocated.\n const xAxisHeight =\n xAxisLabel || xAxisAngle != null\n ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n : undefined;\n\n // Augment each row with the `[lower, upper]` band tuple the Area shades.\n // Rows missing a numeric bound are left un-coned (the band breaks there).\n const chartData = data.map((row) => {\n const lower = row[lowerKey];\n const upper = row[upperKey];\n return {\n ...row,\n [BAND_KEY]:\n typeof lower === 'number' && typeof upper === 'number'\n ? [lower, upper]\n : undefined,\n };\n });\n\n // The forecast begins at the first row carrying a forecast value; set that\n // region off from the actuals with a shaded band + a divider at the hand-off.\n const forecastStart = showForecastRegion\n ? data.find((row) => typeof row[forecastKey] === 'number')?.[xKey]\n : undefined;\n const lastX = data[data.length - 1]?.[xKey];\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <ComposedChart data={chartData as readonly unknown[]}>\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={xTickFormatter}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={\n xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n }\n height={xAxisHeight}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {/* Set the forecast region off from the actuals (behind everything). */}\n {forecastStart != null && lastX != null && (\n <ReferenceArea\n x1={forecastStart}\n x2={lastX}\n fill=\"var(--ui-background-surface-secondary)\"\n fillOpacity={0.5}\n ifOverflow=\"extendDomain\"\n />\n )}\n {forecastStart != null && (\n <ReferenceLine\n x={forecastStart}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n )}\n {showTooltip &&\n (customTooltip ? (\n // Strips the synthetic band before the caller's tooltip sees it\n // — the `__cone` series feeds the Area, not the tooltip.\n <ChartTooltip content={customTooltip} />\n ) : (\n <ChartTooltip\n content={(tp) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n // The synthetic band feeds the Area, not the tooltip.\n payload={\n dropConeBand(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )}\n />\n ))}\n {showLegend && (\n <ChartLegend\n content={(lp) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n payload={\n dropConeBand(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )}\n />\n )}\n {/* The cone renders first so the lines draw on top. One color for the\n whole metric — actual and forecast differ by line style, not hue —\n so the cone + forecast line reuse the actual series' color. */}\n <Area\n dataKey={BAND_KEY}\n type=\"monotone\"\n stroke=\"none\"\n fill={`var(--color-${actualKey})`}\n fillOpacity={0.15}\n connectNulls={false}\n dot={false}\n activeDot={false}\n isAnimationActive={false}\n legendType=\"none\"\n tooltipType=\"none\"\n />\n <Area\n dataKey={actualKey}\n type=\"monotone\"\n stroke={`var(--color-${actualKey})`}\n strokeWidth={strokeWidth}\n fill={`var(--color-${actualKey})`}\n fillOpacity={0.15}\n dot={false}\n activeDot={false}\n connectNulls\n isAnimationActive={false}\n />\n <Line\n dataKey={forecastKey}\n type=\"monotone\"\n stroke={`var(--color-${actualKey})`}\n strokeWidth={strokeWidth}\n strokeDasharray=\"5 5\"\n dot={false}\n connectNulls\n isAnimationActive={false}\n />\n </ComposedChart>\n </ChartContainer>\n </div>\n );\n }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"names":["BAND_KEY","dropConeBand","payload","item","createConeTooltip","tooltipContent","props","merged","React","ConfidenceCone","className","config","data","xKey","actualKey","forecastKey","lowerKey","upperKey","xAxisLabel","yAxisLabel","yUnit","strokeWidth","showForecastRegion","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","ref","customTooltip","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","chartData","row","lower","upper","forecastStart","_a","lastX","_b","jsx","cn","ChartContainer","jsxs","ComposedChart","CartesianGrid","XAxis","YAxis","ReferenceArea","ReferenceLine","ChartTooltip","tp","ChartTooltipContent","ChartLegend","lp","ChartLegendContent","Area","Line"],"mappings":";;;;;;AAsCA,MAAMA,IAAW;AAQV,SAASC,EACdC,GACiB;AACjB,SAAOA,KAAA,gBAAAA,EAAS,OAAO,CAACC,MAASA,EAAK,YAAYH;AACpD;AAiBO,SAASI,GAAkBC,GAAoC;AACpE,SAAO,SAAqBC,GAA2B;AACrD,UAAMC,IAAS;AAAA,MACb,GAAGD;AAAA,MACH,SAASL,EAAaK,EAAM,OAAO;AAAA,IAAA;AAErC,WAAO,OAAOD,KAAmB,aAC7BG,EAAM;AAAA,MACJH;AAAA,MACAE;AAAA,IAAA,IAEFC,EAAM,aAAaH,GAAgBE,CAAM;AAAA,EAC/C;AACF;AAyCA,MAAME,KAAiBD,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAE;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,oBAAAC,IAAqB;AAAA,IACrB,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAA/B;AAAA,IACA,GAAGC;AAAA,EAAA,GAEL+B,MACG;;AAGH,UAAMC,IAAgB9B,EAAM;AAAA,MAC1B,MAAOH,IAAiBD,GAAkBC,CAAc,IAAI;AAAA,MAC5D,CAACA,CAAc;AAAA,IAAA,GAGXkC,IAAarB,IACf,EAAE,OAAOA,GAAY,UAAU,gBAAyB,QAAQ,EAAA,IAChE,QACEsB,IAAarB,IACf;AAAA,MACE,OAAOA;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAA;AAAA,IAAkB,IAEzC,QAEEsB,IAAUC,GAAkBT,CAAW,GAKvCU,IACJzB,KAAcY,KAAc,OACxB,MAAMA,KAAc,OAAO,KAAK,MAAMZ,IAAa,KAAK,KACxD,QAIA0B,IAAYhC,EAAK,IAAI,CAACiC,MAAQ;AAClC,YAAMC,IAAQD,EAAI7B,CAAQ,GACpB+B,IAAQF,EAAI5B,CAAQ;AAC1B,aAAO;AAAA,QACL,GAAG4B;AAAA,QACH,CAAC7C,CAAQ,GACP,OAAO8C,KAAU,YAAY,OAAOC,KAAU,WAC1C,CAACD,GAAOC,CAAK,IACb;AAAA,MAAA;AAAA,IAEV,CAAC,GAIKC,IAAgB1B,KAClB2B,IAAArC,EAAK,KAAK,CAACiC,MAAQ,OAAOA,EAAI9B,CAAW,KAAM,QAAQ,MAAvD,gBAAAkC,EAA2DpC,KAC3D,QACEqC,KAAQC,IAAAvC,EAAKA,EAAK,SAAS,CAAC,MAApB,gBAAAuC,EAAwBtC;AAEtC,WACE,gBAAAuC,EAAC,SAAI,KAAAf,GAAU,WAAWgB,GAAG3C,CAAS,GAAI,GAAGJ,GAC3C,UAAA,gBAAA8C;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAA3C;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAA4C,EAACC,GAAA,EAAc,MAAMZ,GAClB,UAAA;AAAA,UAAArB,KACC,gBAAA6B;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,YAAYtB,KAAkB;AAAA,cAC9B,UAAUC,KAAgB;AAAA,cAC1B,iBAAiBF,IAAa,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,UAG1C,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,SAAS7C;AAAA,cACT,MAAK;AAAA,cACL,MAAM,CAACa;AAAA,cACP,UAAU;AAAA,cACV,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,eAAeE;AAAA,cACf,OAAOE;AAAA,cACP,UAAUC;AAAA,cACV,YACED,KAAc,OAAQA,IAAa,IAAI,QAAQ,UAAW;AAAA,cAE5D,QAAQa;AAAA,cACR,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAET,gBAAAa;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM,CAAChC;AAAA,cACP,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAMP;AAAA,cACN,eAAeS;AAAA,cACf,WAAWG;AAAA,cACX,QAAQS;AAAA,cACR,OAAOtB,IAAa,KAAK;AAAA,cACzB,OAAOqB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGRQ,KAAiB,QAAQE,KAAS,QACjC,gBAAAE;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,IAAIZ;AAAA,cACJ,IAAIE;AAAA,cACJ,MAAK;AAAA,cACL,aAAa;AAAA,cACb,YAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAGdF,KAAiB,QAChB,gBAAAI;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,GAAGb;AAAA,cACH,QAAO;AAAA,cACP,iBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnBxB,MACEc;AAAA;AAAA;AAAA,YAGC,gBAAAc,EAACU,GAAA,EAAa,SAASxB,EAAA,CAAe;AAAA,cAEtC,gBAAAc;AAAA,YAACU;AAAA,YAAA;AAAA,cACC,SAAS,CAACC,MACR,gBAAAX;AAAA,gBAACY;AAAA,gBAAA;AAAA,kBACC,QAAQD,EAAG;AAAA,kBACX,OAAOA,EAAG;AAAA,kBAEV,SACE9D;AAAA,oBACE8D,EAAG;AAAA,kBAAA;AAAA,gBACL;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,UAIPtC,KACC,gBAAA2B;AAAA,YAACa;AAAA,YAAA;AAAA,cACC,SAAS,CAACC,MACR,gBAAAd;AAAA,gBAACe;AAAA,gBAAA;AAAA,kBACC,eAAeD,EAAG;AAAA,kBAClB,SACEjE;AAAA,oBACEiE,EAAG;AAAA,kBAAA;AAAA,gBACL;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,UAON,gBAAAd;AAAA,YAACgB;AAAA,YAAA;AAAA,cACC,SAASpE;AAAA,cACT,MAAK;AAAA,cACL,QAAO;AAAA,cACP,MAAM,eAAec,CAAS;AAAA,cAC9B,aAAa;AAAA,cACb,cAAc;AAAA,cACd,KAAK;AAAA,cACL,WAAW;AAAA,cACX,mBAAmB;AAAA,cACnB,YAAW;AAAA,cACX,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAsC;AAAA,YAACgB;AAAA,YAAA;AAAA,cACC,SAAStD;AAAA,cACT,MAAK;AAAA,cACL,QAAQ,eAAeA,CAAS;AAAA,cAChC,aAAAO;AAAA,cACA,MAAM,eAAeP,CAAS;AAAA,cAC9B,aAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,cACX,cAAY;AAAA,cACZ,mBAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,UAErB,gBAAAsC;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,SAAStD;AAAA,cACT,MAAK;AAAA,cACL,QAAQ,eAAeD,CAAS;AAAA,cAChC,aAAAO;AAAA,cACA,iBAAgB;AAAA,cAChB,KAAK;AAAA,cACL,cAAY;AAAA,cACZ,mBAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,QACrB,EAAA,CACF;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAZ,GAAe,cAAc;"}
|