@adminiumjs/charts 0.1.0-rc.1
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/LICENSE +661 -0
- package/dist/components/AnomalyChart.d.ts +30 -0
- package/dist/components/AnomalyChart.d.ts.map +1 -0
- package/dist/components/AnomalyChart.js +32 -0
- package/dist/components/AnomalyChart.js.map +1 -0
- package/dist/components/BarChart.d.ts +33 -0
- package/dist/components/BarChart.d.ts.map +1 -0
- package/dist/components/BarChart.js +40 -0
- package/dist/components/BarChart.js.map +1 -0
- package/dist/components/BoxPlotChart.d.ts +23 -0
- package/dist/components/BoxPlotChart.d.ts.map +1 -0
- package/dist/components/BoxPlotChart.js +24 -0
- package/dist/components/BoxPlotChart.js.map +1 -0
- package/dist/components/BulletChart.d.ts +27 -0
- package/dist/components/BulletChart.d.ts.map +1 -0
- package/dist/components/BulletChart.js +24 -0
- package/dist/components/BulletChart.js.map +1 -0
- package/dist/components/BumpChart.d.ts +27 -0
- package/dist/components/BumpChart.d.ts.map +1 -0
- package/dist/components/BumpChart.js +17 -0
- package/dist/components/BumpChart.js.map +1 -0
- package/dist/components/CandlestickChart.d.ts +26 -0
- package/dist/components/CandlestickChart.d.ts.map +1 -0
- package/dist/components/CandlestickChart.js +22 -0
- package/dist/components/CandlestickChart.js.map +1 -0
- package/dist/components/ChartSurface.d.ts +52 -0
- package/dist/components/ChartSurface.d.ts.map +1 -0
- package/dist/components/ChartSurface.js +15 -0
- package/dist/components/ChartSurface.js.map +1 -0
- package/dist/components/Chord.d.ts +30 -0
- package/dist/components/Chord.d.ts.map +1 -0
- package/dist/components/Chord.js +14 -0
- package/dist/components/Chord.js.map +1 -0
- package/dist/components/ChoroplethGridChart.d.ts +32 -0
- package/dist/components/ChoroplethGridChart.d.ts.map +1 -0
- package/dist/components/ChoroplethGridChart.js +15 -0
- package/dist/components/ChoroplethGridChart.js.map +1 -0
- package/dist/components/CohortMatrixChart.d.ts +30 -0
- package/dist/components/CohortMatrixChart.d.ts.map +1 -0
- package/dist/components/CohortMatrixChart.js +13 -0
- package/dist/components/CohortMatrixChart.js.map +1 -0
- package/dist/components/CorrelationMatrixChart.d.ts +24 -0
- package/dist/components/CorrelationMatrixChart.d.ts.map +1 -0
- package/dist/components/CorrelationMatrixChart.js +29 -0
- package/dist/components/CorrelationMatrixChart.js.map +1 -0
- package/dist/components/DonutChart.d.ts +31 -0
- package/dist/components/DonutChart.d.ts.map +1 -0
- package/dist/components/DonutChart.js +19 -0
- package/dist/components/DonutChart.js.map +1 -0
- package/dist/components/ForecastChart.d.ts +37 -0
- package/dist/components/ForecastChart.d.ts.map +1 -0
- package/dist/components/ForecastChart.js +39 -0
- package/dist/components/ForecastChart.js.map +1 -0
- package/dist/components/Funnel.d.ts +27 -0
- package/dist/components/Funnel.d.ts.map +1 -0
- package/dist/components/Funnel.js +25 -0
- package/dist/components/Funnel.js.map +1 -0
- package/dist/components/HeatCalendarChart.d.ts +39 -0
- package/dist/components/HeatCalendarChart.d.ts.map +1 -0
- package/dist/components/HeatCalendarChart.js +37 -0
- package/dist/components/HeatCalendarChart.js.map +1 -0
- package/dist/components/HeatMonthChart.d.ts +30 -0
- package/dist/components/HeatMonthChart.d.ts.map +1 -0
- package/dist/components/HeatMonthChart.js +14 -0
- package/dist/components/HeatMonthChart.js.map +1 -0
- package/dist/components/HexbinChart.d.ts +22 -0
- package/dist/components/HexbinChart.d.ts.map +1 -0
- package/dist/components/HexbinChart.js +31 -0
- package/dist/components/HexbinChart.js.map +1 -0
- package/dist/components/LineAreaChart.d.ts +26 -0
- package/dist/components/LineAreaChart.d.ts.map +1 -0
- package/dist/components/LineAreaChart.js +62 -0
- package/dist/components/LineAreaChart.js.map +1 -0
- package/dist/components/MarimekkoChart.d.ts +24 -0
- package/dist/components/MarimekkoChart.d.ts.map +1 -0
- package/dist/components/MarimekkoChart.js +20 -0
- package/dist/components/MarimekkoChart.js.map +1 -0
- package/dist/components/MultiLineChart.d.ts +36 -0
- package/dist/components/MultiLineChart.d.ts.map +1 -0
- package/dist/components/MultiLineChart.js +62 -0
- package/dist/components/MultiLineChart.js.map +1 -0
- package/dist/components/ParallelCoordinatesChart.d.ts +22 -0
- package/dist/components/ParallelCoordinatesChart.d.ts.map +1 -0
- package/dist/components/ParallelCoordinatesChart.js +16 -0
- package/dist/components/ParallelCoordinatesChart.js.map +1 -0
- package/dist/components/ParetoChart.d.ts +26 -0
- package/dist/components/ParetoChart.d.ts.map +1 -0
- package/dist/components/ParetoChart.js +26 -0
- package/dist/components/ParetoChart.js.map +1 -0
- package/dist/components/Radar.d.ts +27 -0
- package/dist/components/Radar.d.ts.map +1 -0
- package/dist/components/Radar.js +19 -0
- package/dist/components/Radar.js.map +1 -0
- package/dist/components/RadialBar.d.ts +25 -0
- package/dist/components/RadialBar.d.ts.map +1 -0
- package/dist/components/RadialBar.js +12 -0
- package/dist/components/RadialBar.js.map +1 -0
- package/dist/components/RankingBars.d.ts +27 -0
- package/dist/components/RankingBars.d.ts.map +1 -0
- package/dist/components/RankingBars.js +25 -0
- package/dist/components/RankingBars.js.map +1 -0
- package/dist/components/RidgelineChart.d.ts +23 -0
- package/dist/components/RidgelineChart.d.ts.map +1 -0
- package/dist/components/RidgelineChart.js +20 -0
- package/dist/components/RidgelineChart.js.map +1 -0
- package/dist/components/SankeyChart.d.ts +29 -0
- package/dist/components/SankeyChart.d.ts.map +1 -0
- package/dist/components/SankeyChart.js +21 -0
- package/dist/components/SankeyChart.js.map +1 -0
- package/dist/components/ScatterBubbleChart.d.ts +26 -0
- package/dist/components/ScatterBubbleChart.d.ts.map +1 -0
- package/dist/components/ScatterBubbleChart.js +31 -0
- package/dist/components/ScatterBubbleChart.js.map +1 -0
- package/dist/components/SlopeChart.d.ts +28 -0
- package/dist/components/SlopeChart.d.ts.map +1 -0
- package/dist/components/SlopeChart.js +18 -0
- package/dist/components/SlopeChart.js.map +1 -0
- package/dist/components/Sparkline.d.ts +15 -0
- package/dist/components/Sparkline.d.ts.map +1 -0
- package/dist/components/Sparkline.js +27 -0
- package/dist/components/Sparkline.js.map +1 -0
- package/dist/components/StackedBar100.d.ts +30 -0
- package/dist/components/StackedBar100.d.ts.map +1 -0
- package/dist/components/StackedBar100.js +21 -0
- package/dist/components/StackedBar100.js.map +1 -0
- package/dist/components/StreamChart.d.ts +23 -0
- package/dist/components/StreamChart.d.ts.map +1 -0
- package/dist/components/StreamChart.js +56 -0
- package/dist/components/StreamChart.js.map +1 -0
- package/dist/components/Sunburst.d.ts +24 -0
- package/dist/components/Sunburst.d.ts.map +1 -0
- package/dist/components/Sunburst.js +13 -0
- package/dist/components/Sunburst.js.map +1 -0
- package/dist/components/TimelineLanesChart.d.ts +25 -0
- package/dist/components/TimelineLanesChart.d.ts.map +1 -0
- package/dist/components/TimelineLanesChart.js +41 -0
- package/dist/components/TimelineLanesChart.js.map +1 -0
- package/dist/components/Treemap.d.ts +28 -0
- package/dist/components/Treemap.d.ts.map +1 -0
- package/dist/components/Treemap.js +22 -0
- package/dist/components/Treemap.js.map +1 -0
- package/dist/components/ViolinChart.d.ts +22 -0
- package/dist/components/ViolinChart.d.ts.map +1 -0
- package/dist/components/ViolinChart.js +21 -0
- package/dist/components/ViolinChart.js.map +1 -0
- package/dist/components/WaterfallChart.d.ts +23 -0
- package/dist/components/WaterfallChart.d.ts.map +1 -0
- package/dist/components/WaterfallChart.js +29 -0
- package/dist/components/WaterfallChart.js.map +1 -0
- package/dist/components/WordCloud.d.ts +24 -0
- package/dist/components/WordCloud.d.ts.map +1 -0
- package/dist/components/WordCloud.js +22 -0
- package/dist/components/WordCloud.js.map +1 -0
- package/dist/demo/barsRanking.d.ts +26 -0
- package/dist/demo/barsRanking.d.ts.map +1 -0
- package/dist/demo/barsRanking.js +80 -0
- package/dist/demo/barsRanking.js.map +1 -0
- package/dist/demo/generators.d.ts +44 -0
- package/dist/demo/generators.d.ts.map +1 -0
- package/dist/demo/generators.js +72 -0
- package/dist/demo/generators.js.map +1 -0
- package/dist/demo/mulberry32.d.ts +10 -0
- package/dist/demo/mulberry32.d.ts.map +1 -0
- package/dist/demo/mulberry32.js +26 -0
- package/dist/demo/mulberry32.js.map +1 -0
- package/dist/geometry/anomaly.d.ts +22 -0
- package/dist/geometry/anomaly.d.ts.map +1 -0
- package/dist/geometry/anomaly.js +52 -0
- package/dist/geometry/anomaly.js.map +1 -0
- package/dist/geometry/bars.d.ts +46 -0
- package/dist/geometry/bars.d.ts.map +1 -0
- package/dist/geometry/bars.js +68 -0
- package/dist/geometry/bars.js.map +1 -0
- package/dist/geometry/bullet.d.ts +53 -0
- package/dist/geometry/bullet.d.ts.map +1 -0
- package/dist/geometry/bullet.js +67 -0
- package/dist/geometry/bullet.js.map +1 -0
- package/dist/geometry/bump.d.ts +42 -0
- package/dist/geometry/bump.d.ts.map +1 -0
- package/dist/geometry/bump.js +29 -0
- package/dist/geometry/bump.js.map +1 -0
- package/dist/geometry/candles.d.ts +39 -0
- package/dist/geometry/candles.d.ts.map +1 -0
- package/dist/geometry/candles.js +42 -0
- package/dist/geometry/candles.js.map +1 -0
- package/dist/geometry/chord.d.ts +53 -0
- package/dist/geometry/chord.d.ts.map +1 -0
- package/dist/geometry/chord.js +111 -0
- package/dist/geometry/chord.js.map +1 -0
- package/dist/geometry/choropleth.d.ts +58 -0
- package/dist/geometry/choropleth.d.ts.map +1 -0
- package/dist/geometry/choropleth.js +101 -0
- package/dist/geometry/choropleth.js.map +1 -0
- package/dist/geometry/cohort.d.ts +54 -0
- package/dist/geometry/cohort.d.ts.map +1 -0
- package/dist/geometry/cohort.js +70 -0
- package/dist/geometry/cohort.js.map +1 -0
- package/dist/geometry/correlation.d.ts +138 -0
- package/dist/geometry/correlation.d.ts.map +1 -0
- package/dist/geometry/correlation.js +161 -0
- package/dist/geometry/correlation.js.map +1 -0
- package/dist/geometry/distribution.d.ts +115 -0
- package/dist/geometry/distribution.d.ts.map +1 -0
- package/dist/geometry/distribution.js +131 -0
- package/dist/geometry/distribution.js.map +1 -0
- package/dist/geometry/donut.d.ts +37 -0
- package/dist/geometry/donut.d.ts.map +1 -0
- package/dist/geometry/donut.js +46 -0
- package/dist/geometry/donut.js.map +1 -0
- package/dist/geometry/forecast.d.ts +30 -0
- package/dist/geometry/forecast.d.ts.map +1 -0
- package/dist/geometry/forecast.js +75 -0
- package/dist/geometry/forecast.js.map +1 -0
- package/dist/geometry/funnel.d.ts +37 -0
- package/dist/geometry/funnel.d.ts.map +1 -0
- package/dist/geometry/funnel.js +42 -0
- package/dist/geometry/funnel.js.map +1 -0
- package/dist/geometry/heat.d.ts +34 -0
- package/dist/geometry/heat.d.ts.map +1 -0
- package/dist/geometry/heat.js +50 -0
- package/dist/geometry/heat.js.map +1 -0
- package/dist/geometry/heatCalendar.d.ts +43 -0
- package/dist/geometry/heatCalendar.d.ts.map +1 -0
- package/dist/geometry/heatCalendar.js +82 -0
- package/dist/geometry/heatCalendar.js.map +1 -0
- package/dist/geometry/heatMonth.d.ts +47 -0
- package/dist/geometry/heatMonth.d.ts.map +1 -0
- package/dist/geometry/heatMonth.js +72 -0
- package/dist/geometry/heatMonth.js.map +1 -0
- package/dist/geometry/lineArea.d.ts +17 -0
- package/dist/geometry/lineArea.d.ts.map +1 -0
- package/dist/geometry/lineArea.js +37 -0
- package/dist/geometry/lineArea.js.map +1 -0
- package/dist/geometry/marimekko.d.ts +43 -0
- package/dist/geometry/marimekko.d.ts.map +1 -0
- package/dist/geometry/marimekko.js +45 -0
- package/dist/geometry/marimekko.js.map +1 -0
- package/dist/geometry/multiLine.d.ts +19 -0
- package/dist/geometry/multiLine.d.ts.map +1 -0
- package/dist/geometry/multiLine.js +25 -0
- package/dist/geometry/multiLine.js.map +1 -0
- package/dist/geometry/pareto.d.ts +44 -0
- package/dist/geometry/pareto.d.ts.map +1 -0
- package/dist/geometry/pareto.js +65 -0
- package/dist/geometry/pareto.js.map +1 -0
- package/dist/geometry/radar.d.ts +60 -0
- package/dist/geometry/radar.d.ts.map +1 -0
- package/dist/geometry/radar.js +67 -0
- package/dist/geometry/radar.js.map +1 -0
- package/dist/geometry/radialBar.d.ts +31 -0
- package/dist/geometry/radialBar.d.ts.map +1 -0
- package/dist/geometry/radialBar.js +53 -0
- package/dist/geometry/radialBar.js.map +1 -0
- package/dist/geometry/ranking.d.ts +48 -0
- package/dist/geometry/ranking.d.ts.map +1 -0
- package/dist/geometry/ranking.js +42 -0
- package/dist/geometry/ranking.js.map +1 -0
- package/dist/geometry/sankey.d.ts +60 -0
- package/dist/geometry/sankey.d.ts.map +1 -0
- package/dist/geometry/sankey.js +130 -0
- package/dist/geometry/sankey.js.map +1 -0
- package/dist/geometry/scales.d.ts +14 -0
- package/dist/geometry/scales.d.ts.map +1 -0
- package/dist/geometry/scales.js +33 -0
- package/dist/geometry/scales.js.map +1 -0
- package/dist/geometry/slope.d.ts +34 -0
- package/dist/geometry/slope.d.ts.map +1 -0
- package/dist/geometry/slope.js +44 -0
- package/dist/geometry/slope.js.map +1 -0
- package/dist/geometry/sparkline.d.ts +20 -0
- package/dist/geometry/sparkline.d.ts.map +1 -0
- package/dist/geometry/sparkline.js +43 -0
- package/dist/geometry/sparkline.js.map +1 -0
- package/dist/geometry/stacked100.d.ts +33 -0
- package/dist/geometry/stacked100.d.ts.map +1 -0
- package/dist/geometry/stacked100.js +34 -0
- package/dist/geometry/stacked100.js.map +1 -0
- package/dist/geometry/streamStack.d.ts +32 -0
- package/dist/geometry/streamStack.d.ts.map +1 -0
- package/dist/geometry/streamStack.js +56 -0
- package/dist/geometry/streamStack.js.map +1 -0
- package/dist/geometry/sunburst.d.ts +37 -0
- package/dist/geometry/sunburst.d.ts.map +1 -0
- package/dist/geometry/sunburst.js +84 -0
- package/dist/geometry/sunburst.js.map +1 -0
- package/dist/geometry/timelineLanes.d.ts +46 -0
- package/dist/geometry/timelineLanes.d.ts.map +1 -0
- package/dist/geometry/timelineLanes.js +52 -0
- package/dist/geometry/timelineLanes.js.map +1 -0
- package/dist/geometry/treemap.d.ts +42 -0
- package/dist/geometry/treemap.d.ts.map +1 -0
- package/dist/geometry/treemap.js +134 -0
- package/dist/geometry/treemap.js.map +1 -0
- package/dist/geometry/waterfall.d.ts +40 -0
- package/dist/geometry/waterfall.d.ts.map +1 -0
- package/dist/geometry/waterfall.js +80 -0
- package/dist/geometry/waterfall.js.map +1 -0
- package/dist/geometry/wordcloud.d.ts +46 -0
- package/dist/geometry/wordcloud.d.ts.map +1 -0
- package/dist/geometry/wordcloud.js +79 -0
- package/dist/geometry/wordcloud.js.map +1 -0
- package/dist/hooks/useChartSize.d.ts +6 -0
- package/dist/hooks/useChartSize.d.ts.map +1 -0
- package/dist/hooks/useChartSize.js +32 -0
- package/dist/hooks/useChartSize.js.map +1 -0
- package/dist/hooks/useMountAnimation.d.ts +4 -0
- package/dist/hooks/useMountAnimation.d.ts.map +1 -0
- package/dist/hooks/useMountAnimation.js +40 -0
- package/dist/hooks/useMountAnimation.js.map +1 -0
- package/dist/hooks/useRtl.d.ts +7 -0
- package/dist/hooks/useRtl.d.ts.map +1 -0
- package/dist/hooks/useRtl.js +18 -0
- package/dist/hooks/useRtl.js.map +1 -0
- package/dist/index.d.ts +110 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +79 -0
- package/dist/index.js.map +1 -0
- package/dist/utils/format.d.ts +5 -0
- package/dist/utils/format.d.ts.map +1 -0
- package/dist/utils/format.js +24 -0
- package/dist/utils/format.js.map +1 -0
- package/dist/utils/stats.d.ts +23 -0
- package/dist/utils/stats.d.ts.map +1 -0
- package/dist/utils/stats.js +82 -0
- package/dist/utils/stats.js.map +1 -0
- package/package.json +36 -0
- package/src/styles.css +205 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-anomaly` primitive (research/widget-registry.md §2): actual line over
|
|
3
|
+
* an expected-range band + dashed expected line + halo dots on anomalies. A
|
|
4
|
+
* time axis (never mirrors, 04 §7.4). The expected band + anomaly flags are
|
|
5
|
+
* computed by the pure `anomalyModel` (z-score). Colors from the viz palette
|
|
6
|
+
* and the danger token only.
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
10
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
11
|
+
export interface AnomalyPoint {
|
|
12
|
+
x: Date;
|
|
13
|
+
y: number;
|
|
14
|
+
}
|
|
15
|
+
export interface AnomalyChartProps {
|
|
16
|
+
points: readonly AnomalyPoint[];
|
|
17
|
+
labels: ChartLabels;
|
|
18
|
+
height?: number;
|
|
19
|
+
/** z-score threshold for flagging anomalies (default 2). */
|
|
20
|
+
sensitivity?: number;
|
|
21
|
+
/** Centered moving-average window for the expected line (default 7). */
|
|
22
|
+
window?: number;
|
|
23
|
+
showAxis?: boolean;
|
|
24
|
+
formatY?: (y: number) => string;
|
|
25
|
+
dir?: ChartDir;
|
|
26
|
+
a11yFallback?: ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function AnomalyChart({ points, labels, height, sensitivity, window, showAxis, formatY, dir, a11yFallback, className, }: AnomalyChartProps): import("react").JSX.Element;
|
|
30
|
+
//# sourceMappingURL=AnomalyChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnomalyChart.d.ts","sourceRoot":"","sources":["../../src/components/AnomalyChart.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,IAAI,CAAC;IACR,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAe,EACf,MAAU,EACV,QAAe,EACf,OAAuB,EACvB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BA4FnB"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { anomalyModel } from '../geometry/anomaly.js';
|
|
3
|
+
import { confidenceBandPath } from '../geometry/forecast.js';
|
|
4
|
+
import { linePath } from '../geometry/lineArea.js';
|
|
5
|
+
import { linearYScale, timeScale } from '../geometry/scales.js';
|
|
6
|
+
import { extent, niceTicks } from '../utils/stats.js';
|
|
7
|
+
import { formatCompact } from '../utils/format.js';
|
|
8
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
9
|
+
export function AnomalyChart({ points, labels, height = 220, sensitivity = 2, window = 7, showAxis = true, formatY = formatCompact, dir, a11yFallback, className, }) {
|
|
10
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: 10, bottom: showAxis ? 22 : 8, left: showAxis ? 38 : 6, right: 10 }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
11
|
+
if (points.length === 0 || innerWidth <= 0 || innerHeight <= 0)
|
|
12
|
+
return null;
|
|
13
|
+
const dates = points.map((p) => p.x.getTime());
|
|
14
|
+
const [loT, hiT] = extent(dates) ?? [0, 1];
|
|
15
|
+
const xScale = timeScale([new Date(loT), new Date(hiT)], innerWidth);
|
|
16
|
+
const values = points.map((p) => p.y);
|
|
17
|
+
const model = anomalyModel(values, sensitivity, window);
|
|
18
|
+
const ys = [...values, ...model.lo, ...model.hi];
|
|
19
|
+
const [minY, maxY] = extent(ys) ?? [0, 1];
|
|
20
|
+
const yTicks = niceTicks(Math.min(0, minY), Math.max(1, maxY), 3);
|
|
21
|
+
const yScale = linearYScale([yTicks[0] ?? 0, yTicks.at(-1) ?? 1], innerHeight);
|
|
22
|
+
const xAt = (i) => xScale(points[i].x);
|
|
23
|
+
const upper = points.map((_, i) => ({ x: xAt(i), y: yScale(model.hi[i] ?? 0) }));
|
|
24
|
+
const lower = points.map((_, i) => ({ x: xAt(i), y: yScale(model.lo[i] ?? 0) }));
|
|
25
|
+
const bandPath = confidenceBandPath(upper, lower);
|
|
26
|
+
const midLine = linePath(points.map((_, i) => ({ x: xAt(i), y: yScale(model.mid[i] ?? 0) })), true);
|
|
27
|
+
const actualLine = linePath(points.map((p, i) => ({ x: xAt(i), y: yScale(p.y) })), false);
|
|
28
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [showAxis &&
|
|
29
|
+
yTicks.map((tick) => (_jsxs("g", { children: [_jsx("line", { className: "adm-chart-gridline", x1: 0, x2: innerWidth, y1: yScale(tick), y2: yScale(tick) }), _jsx("text", { className: "adm-chart-axis-label adm-chart-num", x: rtl ? innerWidth + 6 : -6, y: yScale(tick) + 3, textAnchor: rtl ? 'start' : 'end', children: formatY(tick) })] }, tick))), bandPath !== null && (_jsx("path", { d: bandPath, fill: "var(--viz-1)", fillOpacity: 0.12, stroke: "none", "data-band": "expected" })), midLine !== null && (_jsx("path", { d: midLine, fill: "none", stroke: "var(--fg-subtle)", strokeWidth: 1.5, strokeDasharray: "4 4", "data-series": "expected" })), actualLine !== null && (_jsx("path", { d: actualLine, fill: "none", stroke: "var(--viz-1)", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "data-series": "actual" })), model.anomalies.map((i) => (_jsxs("g", { "data-anomaly": i, children: [_jsx("circle", { cx: xAt(i), cy: yScale(values[i] ?? 0), r: 7, fill: "var(--danger)", fillOpacity: 0.22 }), _jsx("circle", { cx: xAt(i), cy: yScale(values[i] ?? 0), r: 3.5, fill: "var(--danger)", stroke: "var(--surface)", strokeWidth: 1.5 })] }, `anomaly-${i}`)))] }));
|
|
30
|
+
} }));
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=AnomalyChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnomalyChart.js","sourceRoot":"","sources":["../../src/components/AnomalyChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-bar` primitive (research/widget-registry.md §2): categorical columns
|
|
3
|
+
* with highlight max|current|none, grouped 2-series mode, RTL category
|
|
4
|
+
* mirroring (band-scale range flip), nb-grow-style mount animation.
|
|
5
|
+
*/
|
|
6
|
+
import type { ReactNode } from 'react';
|
|
7
|
+
import type { HighlightMode } from '../geometry/bars.js';
|
|
8
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
9
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
10
|
+
export interface BarSeries {
|
|
11
|
+
name: string;
|
|
12
|
+
values: readonly number[];
|
|
13
|
+
}
|
|
14
|
+
export interface BarChartProps {
|
|
15
|
+
categories: readonly string[];
|
|
16
|
+
/** 1 series = plain columns; 2 series = grouped mode. */
|
|
17
|
+
series: readonly BarSeries[];
|
|
18
|
+
labels: ChartLabels;
|
|
19
|
+
/** Ignored in grouped mode. Default 'max'. */
|
|
20
|
+
highlight?: HighlightMode;
|
|
21
|
+
height?: number;
|
|
22
|
+
/** Show y gridlines + tick labels (default true). */
|
|
23
|
+
showAxis?: boolean;
|
|
24
|
+
/** Show category labels under the columns (default true). */
|
|
25
|
+
showCategoryLabels?: boolean;
|
|
26
|
+
barRadius?: number;
|
|
27
|
+
formatY?: (y: number) => string;
|
|
28
|
+
dir?: ChartDir;
|
|
29
|
+
a11yFallback?: ReactNode;
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
export declare function BarChart({ categories, series, labels, highlight, height, showAxis, showCategoryLabels, barRadius, formatY, dir, a11yFallback, className, }: BarChartProps): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=BarChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/components/BarChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,yDAAyD;IACzD,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,MAAM,EACN,MAAM,EACN,SAAiB,EACjB,MAAY,EACZ,QAAe,EACf,kBAAyB,EACzB,SAAa,EACb,OAAuB,EACvB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,aAAa,+BAgGf"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { highlightIndex, layoutBars } from '../geometry/bars.js';
|
|
3
|
+
import { formatCompact } from '../utils/format.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
/** Series color assignment: grouped mode viz-1/viz-2; single series uses the
|
|
6
|
+
* accent ramp with the highlighted column at full accent. */
|
|
7
|
+
const GROUPED_FILLS = ['var(--viz-1)', 'var(--viz-2)'];
|
|
8
|
+
export function BarChart({ categories, series, labels, highlight = 'max', height = 220, showAxis = true, showCategoryLabels = true, barRadius = 3, formatY = formatCompact, dir, a11yFallback, className, }) {
|
|
9
|
+
const axisPad = {
|
|
10
|
+
top: 8,
|
|
11
|
+
bottom: showCategoryLabels ? 22 : 6,
|
|
12
|
+
near: showAxis ? 38 : 6,
|
|
13
|
+
far: 8,
|
|
14
|
+
};
|
|
15
|
+
const grouped = series.length > 1;
|
|
16
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: axisPad.top, bottom: axisPad.bottom, left: axisPad.near, right: axisPad.far }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
17
|
+
if (categories.length === 0 || series.length === 0 || innerWidth <= 0 || innerHeight <= 0) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
const layout = layoutBars({
|
|
21
|
+
categories,
|
|
22
|
+
series: series.map((s) => s.values),
|
|
23
|
+
width: innerWidth,
|
|
24
|
+
height: innerHeight,
|
|
25
|
+
rtl,
|
|
26
|
+
});
|
|
27
|
+
const highlighted = grouped ? -1 : highlightIndex([...(series[0]?.values ?? [])], highlight);
|
|
28
|
+
return (_jsxs("g", { children: [showAxis &&
|
|
29
|
+
layout.yTicks.map((tick) => (_jsxs("g", { children: [_jsx("line", { className: "adm-chart-gridline", x1: 0, x2: innerWidth, y1: layout.yFor(tick), y2: layout.yFor(tick) }), _jsx("text", { className: "adm-chart-axis-label adm-chart-num", x: rtl ? innerWidth + 6 : -6, y: layout.yFor(tick) + 3, textAnchor: rtl ? 'start' : 'end', children: formatY(tick) })] }, tick))), layout.bars.map((bar) => {
|
|
30
|
+
const fill = grouped
|
|
31
|
+
? GROUPED_FILLS[bar.seriesIndex % 2]
|
|
32
|
+
: bar.categoryIndex === highlighted
|
|
33
|
+
? 'var(--accent)'
|
|
34
|
+
: 'var(--viz-ramp-3)';
|
|
35
|
+
return (_jsx("rect", { className: "adm-chart-grow", style: { '--adm-grow': mounted ? '1' : '0', '--adm-stagger': `${bar.categoryIndex * 80}ms` }, x: bar.x, y: bar.y, width: bar.width, height: bar.height, rx: barRadius, fill: fill, "data-category-index": bar.categoryIndex, "data-series-index": bar.seriesIndex, "data-highlighted": bar.categoryIndex === highlighted ? '' : undefined }, `${bar.categoryIndex}-${bar.seriesIndex}`));
|
|
36
|
+
}), showCategoryLabels &&
|
|
37
|
+
layout.categoryCenters.map((center) => (_jsx("text", { className: "adm-chart-axis-label", x: center.x, y: innerHeight + 15, textAnchor: "middle", children: center.label }, center.label)))] }));
|
|
38
|
+
} }));
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=BarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../src/components/BarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-boxplot` primitive (research/widget-registry.md §2): whisker/box/median
|
|
3
|
+
* per category with a y-axis tick scale. Categorical x mirrors in RTL (band
|
|
4
|
+
* range flip); the value axis stays pixel-down. Token-only colors; fade-in on
|
|
5
|
+
* mount with the reduced-motion fallback baked into `useMountAnimation`.
|
|
6
|
+
*/
|
|
7
|
+
import type { ReactNode } from 'react';
|
|
8
|
+
import type { BoxplotGroupInput } from '../geometry/distribution.js';
|
|
9
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
10
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
11
|
+
export interface BoxPlotChartProps {
|
|
12
|
+
groups: readonly BoxplotGroupInput[];
|
|
13
|
+
labels: ChartLabels;
|
|
14
|
+
height?: number;
|
|
15
|
+
showAxis?: boolean;
|
|
16
|
+
showCategoryLabels?: boolean;
|
|
17
|
+
formatY?: (y: number) => string;
|
|
18
|
+
dir?: ChartDir;
|
|
19
|
+
a11yFallback?: ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function BoxPlotChart({ groups, labels, height, showAxis, showCategoryLabels, formatY, dir, a11yFallback, className, }: BoxPlotChartProps): import("react").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=BoxPlotChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BoxPlotChart.d.ts","sourceRoot":"","sources":["../../src/components/BoxPlotChart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACrC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,MAAY,EACZ,QAAe,EACf,kBAAyB,EACzB,OAAuB,EACvB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BA6GnB"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { boxplotLayout } from '../geometry/distribution.js';
|
|
3
|
+
import { formatCompact } from '../utils/format.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
export function BoxPlotChart({ groups, labels, height = 260, showAxis = true, showCategoryLabels = true, formatY = formatCompact, dir, a11yFallback, className, }) {
|
|
6
|
+
const pad = {
|
|
7
|
+
top: 8,
|
|
8
|
+
bottom: showCategoryLabels ? 22 : 6,
|
|
9
|
+
near: showAxis ? 40 : 6,
|
|
10
|
+
far: 10,
|
|
11
|
+
};
|
|
12
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: pad.top, bottom: pad.bottom, left: pad.near, right: pad.far }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
13
|
+
if (groups.length === 0 || innerWidth <= 0 || innerHeight <= 0)
|
|
14
|
+
return null;
|
|
15
|
+
const layout = boxplotLayout(groups, { width: innerWidth, height: innerHeight, rtl });
|
|
16
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [showAxis &&
|
|
17
|
+
layout.yTicks.map((tick) => (_jsxs("g", { children: [_jsx("line", { className: "adm-chart-gridline", x1: 0, x2: innerWidth, y1: layout.yFor(tick), y2: layout.yFor(tick) }), _jsx("text", { className: "adm-chart-axis-label adm-chart-num", x: rtl ? innerWidth + 6 : -6, y: layout.yFor(tick) + 3, textAnchor: rtl ? 'start' : 'end', children: formatY(tick) })] }, tick))), layout.boxes.map((box) => {
|
|
18
|
+
const capHalf = box.boxWidth / 2;
|
|
19
|
+
return (_jsxs("g", { "data-box": box.label, children: [_jsx("line", { x1: box.centerX, x2: box.centerX, y1: box.yMax, y2: box.yMin, stroke: "var(--viz-1)", strokeWidth: 1.5 }), _jsx("line", { x1: box.centerX - capHalf / 2, x2: box.centerX + capHalf / 2, y1: box.yMax, y2: box.yMax, stroke: "var(--viz-1)", strokeWidth: 1.5 }), _jsx("line", { x1: box.centerX - capHalf / 2, x2: box.centerX + capHalf / 2, y1: box.yMin, y2: box.yMin, stroke: "var(--viz-1)", strokeWidth: 1.5 }), _jsx("rect", { x: box.boxX, y: box.yQ3, width: box.boxWidth, height: Math.max(0, box.yQ1 - box.yQ3), rx: 2, fill: "var(--accent-area)", stroke: "var(--viz-1)", strokeWidth: 1.5, "data-box-rect": "" }), _jsx("line", { x1: box.boxX, x2: box.boxX + box.boxWidth, y1: box.yMed, y2: box.yMed, stroke: "var(--viz-1)", strokeWidth: 2, "data-median": "" })] }, box.label));
|
|
20
|
+
}), showCategoryLabels &&
|
|
21
|
+
layout.boxes.map((box) => (_jsx("text", { className: "adm-chart-axis-label", x: box.centerX, y: innerHeight + 15, textAnchor: "middle", children: box.label }, box.label)))] }));
|
|
22
|
+
} }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=BoxPlotChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BoxPlotChart.js","sourceRoot":"","sources":["../../src/components/BoxPlotChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-bullet` primitive (research/widget-registry.md §2): rows of qualitative
|
|
3
|
+
* bands + a measure bar + a target tick, with an inline-start label gutter and
|
|
4
|
+
* an inline-end value. Composed from ChartSurface + pure `layoutBullet` geometry
|
|
5
|
+
* (identical SVG in Node and browser). Colors resolve from viz/semantic tokens
|
|
6
|
+
* only; the horizontal value axis mirrors in RTL; entrance fades in on mount
|
|
7
|
+
* with a reduced-motion final-state fallback.
|
|
8
|
+
*/
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
import type { BulletInput } from '../geometry/bullet.js';
|
|
11
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
12
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
13
|
+
export interface BulletChartProps {
|
|
14
|
+
data: readonly BulletInput[];
|
|
15
|
+
labels: ChartLabels;
|
|
16
|
+
height?: number;
|
|
17
|
+
/** Inline-start label gutter width, px (default 92). */
|
|
18
|
+
labelGutter?: number;
|
|
19
|
+
/** Inline-end value gutter width, px (default 52). */
|
|
20
|
+
valueGutter?: number;
|
|
21
|
+
formatValue?: (value: number) => string;
|
|
22
|
+
dir?: ChartDir;
|
|
23
|
+
a11yFallback?: ReactNode;
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function BulletChart({ data, labels, height, labelGutter, valueGutter, formatValue, dir, a11yFallback, className, }: BulletChartProps): import("react").JSX.Element;
|
|
27
|
+
//# sourceMappingURL=BulletChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BulletChart.d.ts","sourceRoot":"","sources":["../../src/components/BulletChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,WAAW,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,WAAgB,EAChB,WAAgB,EAChB,WAA2B,EAC3B,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,gBAAgB,+BAsFlB"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { layoutBullet } from '../geometry/bullet.js';
|
|
3
|
+
import { formatCompact } from '../utils/format.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
/** Band level (0..1) → accent ramp token (ramp-1 lightest → ramp-3). */
|
|
6
|
+
function bandColor(level) {
|
|
7
|
+
return `var(--viz-ramp-${1 + Math.round(level * 2)})`;
|
|
8
|
+
}
|
|
9
|
+
export function BulletChart({ data, labels, height = 200, labelGutter = 92, valueGutter = 52, formatValue = formatCompact, dir, a11yFallback, className, }) {
|
|
10
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: 4, bottom: 4, left: 2, right: 2 }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
11
|
+
const trackWidth = Math.max(0, innerWidth - labelGutter - valueGutter);
|
|
12
|
+
if (data.length === 0 || trackWidth <= 0 || innerHeight <= 0)
|
|
13
|
+
return null;
|
|
14
|
+
const trackStart = rtl ? valueGutter : labelGutter;
|
|
15
|
+
const layout = layoutBullet(data, { width: trackWidth, height: innerHeight, rtl });
|
|
16
|
+
const labelEdge = rtl ? innerWidth : 0;
|
|
17
|
+
const valueEdge = rtl ? 0 : innerWidth;
|
|
18
|
+
return (_jsx("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: layout.rows.map((row) => {
|
|
19
|
+
const midY = row.rowY + layout.rowHeight / 2 + 3;
|
|
20
|
+
return (_jsxs("g", { "data-bullet-row": row.index, children: [row.bands.map((bandSeg) => (_jsx("rect", { x: trackStart + bandSeg.x, y: row.trackY, width: bandSeg.width, height: row.trackHeight, rx: 2, fill: bandColor(bandSeg.level), "data-band": bandSeg.index }, bandSeg.index))), _jsx("rect", { x: trackStart + row.measureX, y: row.measureY, width: row.measureWidth, height: row.measureHeight, rx: 1.5, fill: "var(--fg)", "data-measure": "" }), _jsx("rect", { x: trackStart + row.targetX - 1, y: row.trackY - 2, width: 2, height: row.trackHeight + 4, fill: "var(--danger)", "data-target": "" }), _jsx("text", { className: "adm-chart-axis-label", x: labelEdge, y: midY, textAnchor: rtl ? 'end' : 'start', children: row.label }), _jsx("text", { className: "adm-chart-num", x: valueEdge, y: midY, textAnchor: rtl ? 'start' : 'end', fontSize: 11, fontWeight: 700, fill: "var(--fg)", children: formatValue(row.measure) })] }, row.label));
|
|
21
|
+
}) }));
|
|
22
|
+
} }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=BulletChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BulletChart.js","sourceRoot":"","sources":["../../src/components/BulletChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-bump` primitive (research/widget-registry.md §2): rank-over-time
|
|
3
|
+
* polylines with hollow dots and end labels (channel rank). Rank is an ordinal
|
|
4
|
+
* axis, so the period axis mirrors in RTL (04 §7.4 — rankings mirror) and end
|
|
5
|
+
* labels sit on the inline-end. Colors from the viz palette only.
|
|
6
|
+
*/
|
|
7
|
+
import type { ReactNode } from 'react';
|
|
8
|
+
import type { BumpSeries } from '../geometry/bump.js';
|
|
9
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
10
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
11
|
+
export interface BumpChartProps {
|
|
12
|
+
series: readonly BumpSeries[];
|
|
13
|
+
labels: ChartLabels;
|
|
14
|
+
/** Number of ordered periods (x buckets). */
|
|
15
|
+
periods: number;
|
|
16
|
+
/** Worst rank shown (y extent). */
|
|
17
|
+
maxRank: number;
|
|
18
|
+
/** Period axis tick labels (bottom); defaults to 1…periods. */
|
|
19
|
+
periodLabels?: readonly string[];
|
|
20
|
+
height?: number;
|
|
21
|
+
showEndLabels?: boolean;
|
|
22
|
+
dir?: ChartDir;
|
|
23
|
+
a11yFallback?: ReactNode;
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function BumpChart({ series, labels, periods, maxRank, periodLabels, height, showEndLabels, dir, a11yFallback, className, }: BumpChartProps): import("react").JSX.Element;
|
|
27
|
+
//# sourceMappingURL=BumpChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BumpChart.d.ts","sourceRoot":"","sources":["../../src/components/BumpChart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,OAAO,EACP,OAAO,EACP,YAAY,EACZ,MAAY,EACZ,aAAoB,EACpB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,+BAoGhB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { layoutBump } from '../geometry/bump.js';
|
|
3
|
+
import { multiSeriesPaths, seriesColorVar } from '../geometry/multiLine.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
const SIDE_PAD = 54;
|
|
6
|
+
export function BumpChart({ series, labels, periods, maxRank, periodLabels, height = 240, showEndLabels = true, dir, a11yFallback, className, }) {
|
|
7
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: 10, bottom: 22, left: SIDE_PAD, right: SIDE_PAD }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
8
|
+
if (series.length === 0 || periods <= 0 || maxRank <= 0 || innerWidth <= 0 || innerHeight <= 0) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
const layout = layoutBump(series, periods, maxRank, innerWidth, innerHeight, rtl);
|
|
12
|
+
const paths = multiSeriesPaths(layout.lines.map((l) => ({ key: l.key, label: l.label, points: l.points })), false);
|
|
13
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [Array.from({ length: maxRank }, (_, r) => (_jsx("line", { className: "adm-chart-gridline", x1: 0, x2: innerWidth, y1: layout.yForRank(r + 1), y2: layout.yForRank(r + 1) }, r))), Array.from({ length: periods }, (_, i) => (_jsx("text", { className: "adm-chart-axis-label", x: layout.xForPeriod(i), y: innerHeight + 15, textAnchor: "middle", children: periodLabels?.[i] ?? String(i + 1) }, `period-${i}`))), paths.map((sp, i) => sp.path === null ? null : (_jsx("path", { d: sp.path, fill: "none", stroke: seriesColorVar(i), strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "data-series": sp.key }, sp.key))), layout.lines.map((line, i) => line.points.map((point, j) => (_jsx("circle", { cx: point.x, cy: point.y, r: 3.5, fill: "var(--surface)", stroke: seriesColorVar(i), strokeWidth: 2, "data-series-dot": line.key }, `${line.key}-${j}`)))), showEndLabels &&
|
|
14
|
+
paths.map((sp, i) => sp.end === null ? null : (_jsx("text", { x: sp.end.x + (rtl ? -8 : 8), y: sp.end.y + 3, textAnchor: rtl ? 'end' : 'start', fontSize: 10, fontWeight: 600, fill: seriesColorVar(i), "data-series-label": sp.key, children: sp.label }, `${sp.key}-label`)))] }));
|
|
15
|
+
} }));
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=BumpChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BumpChart.js","sourceRoot":"","sources":["../../src/components/BumpChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-candlestick` primitive (research/widget-registry.md §2): OHLC candles
|
|
3
|
+
* colored pos/danger, a dashed last-price line and an optional "live" pill.
|
|
4
|
+
* The price axis is an LTR island — candles never mirror and the price scale
|
|
5
|
+
* sits at the inline-end regardless of page direction (04 §7.4 exceptions).
|
|
6
|
+
* Colors from the pos/danger tokens and neutrals only.
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { Candle } from '../geometry/candles.js';
|
|
10
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
11
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
12
|
+
export interface CandlestickChartProps {
|
|
13
|
+
candles: readonly Candle[];
|
|
14
|
+
labels: ChartLabels;
|
|
15
|
+
height?: number;
|
|
16
|
+
showAxis?: boolean;
|
|
17
|
+
/** Render the "live" pill in the corner (default false). */
|
|
18
|
+
livePill?: boolean;
|
|
19
|
+
livePillLabel?: string;
|
|
20
|
+
formatPrice?: (value: number) => string;
|
|
21
|
+
dir?: ChartDir;
|
|
22
|
+
a11yFallback?: ReactNode;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare function CandlestickChart({ candles, labels, height, showAxis, livePill, livePillLabel, formatPrice, dir, a11yFallback, className, }: CandlestickChartProps): import("react").JSX.Element;
|
|
26
|
+
//# sourceMappingURL=CandlestickChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CandlestickChart.d.ts","sourceRoot":"","sources":["../../src/components/CandlestickChart.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,MAAM,EACN,MAAY,EACZ,QAAe,EACf,QAAgB,EAChB,aAAsB,EACtB,WAA2B,EAC3B,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,qBAAqB,+BA4FvB"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { layoutCandles } from '../geometry/candles.js';
|
|
3
|
+
import { formatCompact } from '../utils/format.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
export function CandlestickChart({ candles, labels, height = 260, showAxis = true, livePill = false, livePillLabel = 'Live', formatPrice = formatCompact, dir, a11yFallback, className, }) {
|
|
6
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}),
|
|
7
|
+
// Price axis pinned to the right (LTR-island convention), so pad right.
|
|
8
|
+
padding: { top: 10, bottom: 8, left: 6, right: showAxis ? 44 : 8 }, children: ({ innerWidth, innerHeight, mounted }) => {
|
|
9
|
+
if (candles.length === 0 || innerWidth <= 0 || innerHeight <= 0)
|
|
10
|
+
return null;
|
|
11
|
+
const layout = layoutCandles(candles, innerWidth, innerHeight);
|
|
12
|
+
const last = candles.at(-1);
|
|
13
|
+
const lastY = layout.yFor(last.c);
|
|
14
|
+
const lastUp = last.c >= last.o;
|
|
15
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [showAxis &&
|
|
16
|
+
layout.yTicks.map((tick) => (_jsxs("g", { children: [_jsx("line", { className: "adm-chart-gridline", x1: 0, x2: innerWidth, y1: layout.yFor(tick), y2: layout.yFor(tick) }), _jsx("text", { className: "adm-chart-axis-label adm-chart-num", x: innerWidth + 6, y: layout.yFor(tick) + 3, textAnchor: "start", children: formatPrice(tick) })] }, tick))), layout.rects.map((rect) => {
|
|
17
|
+
const tone = rect.up ? 'var(--pos)' : 'var(--danger)';
|
|
18
|
+
return (_jsxs("g", { "data-candle": rect.index, "data-dir": rect.up ? 'up' : 'down', children: [_jsx("line", { x1: rect.centerX, x2: rect.centerX, y1: rect.highY, y2: rect.lowY, stroke: tone, strokeWidth: 1.25 }), _jsx("rect", { x: rect.x, y: rect.bodyY, width: rect.width, height: rect.bodyHeight, fill: tone, "data-body": "" })] }, rect.index));
|
|
19
|
+
}), _jsx("line", { x1: 0, x2: innerWidth, y1: lastY, y2: lastY, stroke: lastUp ? 'var(--pos)' : 'var(--danger)', strokeWidth: 1, strokeDasharray: "3 3", "data-last-price": "" }), showAxis && (_jsx("text", { x: innerWidth + 6, y: lastY + 3, textAnchor: "start", fontSize: 10, fontWeight: 700, fill: lastUp ? 'var(--pos)' : 'var(--danger)', "data-last-price-label": "", children: formatPrice(last.c) })), livePill && (_jsxs("g", { "data-live-pill": "", transform: "translate(4, 2)", children: [_jsx("rect", { x: 0, y: 0, width: 44, height: 16, rx: 8, fill: "var(--pos-soft)" }), _jsx("circle", { cx: 11, cy: 8, r: 3, fill: "var(--pos)" }), _jsx("text", { x: 19, y: 11, fontSize: 9, fontWeight: 700, fill: "var(--pos)", children: livePillLabel })] }))] }));
|
|
20
|
+
} }));
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=CandlestickChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CandlestickChart.js","sourceRoot":"","sources":["../../src/components/CandlestickChart.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAiBjD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,MAAM,EACN,MAAM,GAAG,GAAG,EACZ,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,MAAM,EACtB,WAAW,GAAG,aAAa,EAC3B,GAAG,EACH,YAAY,EACZ,SAAS,GACa;IACtB,OAAO,CACL,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,KACV,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAClC,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpD,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,wEAAwE;QACxE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,YAEjE,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE;YACxC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC;YAE7E,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;YAC/D,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAClC,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;YAEhC,OAAO,CACL,aAAG,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,aACvE,QAAQ;wBACP,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1B,wBACE,eAAM,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAC5G,eACE,SAAS,EAAC,oCAAoC,EAC9C,CAAC,EAAE,UAAU,GAAG,CAAC,EACjB,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EACxB,UAAU,EAAC,OAAO,YAEjB,WAAW,CAAC,IAAI,CAAC,GACb,KATD,IAAI,CAUR,CACL,CAAC,EAEH,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;wBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC;wBACtD,OAAO,CACL,4BAAiC,IAAI,CAAC,KAAK,cAAY,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,aAC5E,eAAM,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,GAAI,EAC5G,eACE,CAAC,EAAE,IAAI,CAAC,CAAC,EACT,CAAC,EAAE,IAAI,CAAC,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,IAAI,EAAE,IAAI,eACA,EAAE,GACZ,KATI,IAAI,CAAC,KAAK,CAUd,CACL,CAAC;oBACJ,CAAC,CAAC,EAGF,eACE,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,UAAU,EACd,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,KAAK,EACT,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAC/C,WAAW,EAAE,CAAC,EACd,eAAe,EAAC,KAAK,qBACL,EAAE,GAClB,EACD,QAAQ,IAAI,CACX,eACE,CAAC,EAAE,UAAU,GAAG,CAAC,EACjB,CAAC,EAAE,KAAK,GAAG,CAAC,EACZ,UAAU,EAAC,OAAO,EAClB,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,2BACvB,EAAE,YAEvB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,GACf,CACR,EAEA,QAAQ,IAAI,CACX,+BAAkB,EAAE,EAAC,SAAS,EAAC,iBAAiB,aAC9C,eAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAC,iBAAiB,GAAG,EACzE,iBAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,YAAY,GAAG,EACjD,eAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,YAAY,YAChE,aAAa,GACT,IACL,CACL,IACC,CACL,CAAC;QACJ,CAAC,GACY,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Responsive SVG viewport shared by every chart (workplan/04-widget-registry.md
|
|
3
|
+
* §7.2): ResizeObserver-driven width, fixed pixel height, padding model,
|
|
4
|
+
* direction context, mount-animation flag, a11y contract (role="img" +
|
|
5
|
+
* aria-label from `labels`, optional visually-hidden table fallback), and the
|
|
6
|
+
* `data-export-node` marker for the deferred raster-export hooks (§7.6).
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
10
|
+
export interface ChartLabels {
|
|
11
|
+
/** Required accessible name — becomes the SVG aria-label. */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Optional longer description — rendered as the SVG <desc>. */
|
|
14
|
+
description?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface ChartPadding {
|
|
17
|
+
top: number;
|
|
18
|
+
right: number;
|
|
19
|
+
bottom: number;
|
|
20
|
+
left: number;
|
|
21
|
+
}
|
|
22
|
+
export interface ChartRenderContext {
|
|
23
|
+
/** Full viewBox width (measured). */
|
|
24
|
+
width: number;
|
|
25
|
+
/** Full viewBox height. */
|
|
26
|
+
height: number;
|
|
27
|
+
/** Plot-area width (width minus horizontal padding). */
|
|
28
|
+
innerWidth: number;
|
|
29
|
+
/** Plot-area height. */
|
|
30
|
+
innerHeight: number;
|
|
31
|
+
rtl: boolean;
|
|
32
|
+
/** Mount-animation gate — false on the first committed frame, then true. */
|
|
33
|
+
mounted: boolean;
|
|
34
|
+
}
|
|
35
|
+
export interface ChartSurfaceProps {
|
|
36
|
+
labels: ChartLabels;
|
|
37
|
+
height: number;
|
|
38
|
+
children: (context: ChartRenderContext) => ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* Explicit direction. Defaults to the nearest ChartDirectionContext
|
|
41
|
+
* ('ltr'). Wave B widget wrappers bridge the i18n dir here.
|
|
42
|
+
*/
|
|
43
|
+
dir?: ChartDir;
|
|
44
|
+
padding?: Partial<ChartPadding>;
|
|
45
|
+
/** Width used before the first ResizeObserver measurement (and in SSR/tests). */
|
|
46
|
+
initialWidth?: number;
|
|
47
|
+
/** Accessible data-table fallback, rendered visually hidden next to the SVG. */
|
|
48
|
+
a11yFallback?: ReactNode;
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
export declare function ChartSurface({ labels, height, children, dir, padding, initialWidth, a11yFallback, className, }: ChartSurfaceProps): import("react").JSX.Element;
|
|
52
|
+
//# sourceMappingURL=ChartSurface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartSurface.d.ts","sourceRoot":"","sources":["../../src/components/ChartSurface.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,OAAO,CAAC;IACb,4EAA4E;IAC5E,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,SAAS,CAAC;IACrD;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,EACH,OAAO,EACP,YAAkB,EAClB,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BA8BnB"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMeasuredWidth } from '../hooks/useChartSize.js';
|
|
3
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
4
|
+
import { ChartDirectionContext, useChartDir } from '../hooks/useRtl.js';
|
|
5
|
+
const ZERO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
|
|
6
|
+
export function ChartSurface({ labels, height, children, dir, padding, initialWidth = 600, a11yFallback, className, }) {
|
|
7
|
+
const { ref, width } = useMeasuredWidth(initialWidth);
|
|
8
|
+
const resolvedDir = useChartDir(dir);
|
|
9
|
+
const mounted = useMountAnimation();
|
|
10
|
+
const pad = { ...ZERO_PADDING, ...padding };
|
|
11
|
+
const innerWidth = Math.max(0, width - pad.left - pad.right);
|
|
12
|
+
const innerHeight = Math.max(0, height - pad.top - pad.bottom);
|
|
13
|
+
return (_jsxs("div", { ref: ref, className: className === undefined ? 'adm-chart' : `adm-chart ${className}`, children: [_jsx(ChartDirectionContext.Provider, { value: resolvedDir, children: _jsxs("svg", { className: "adm-chart-svg", role: "img", "aria-label": labels.label, width: "100%", height: height, viewBox: `0 0 ${Math.max(1, width)} ${height}`, "data-export-node": "", children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), _jsx("g", { transform: `translate(${pad.left}, ${pad.top})`, children: children({ width, height, innerWidth, innerHeight, rtl: resolvedDir === 'rtl', mounted }) })] }) }), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=ChartSurface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartSurface.js","sourceRoot":"","sources":["../../src/components/ChartSurface.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAgDxE,MAAM,YAAY,GAAiB,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAE5E,MAAM,UAAU,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,EACH,OAAO,EACP,YAAY,GAAG,GAAG,EAClB,YAAY,EACZ,SAAS,GACS;IAClB,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAiB,YAAY,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IAEpC,MAAM,GAAG,GAAiB,EAAE,GAAG,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;IAE/D,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,aACxF,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAChD,eACE,SAAS,EAAC,eAAe,EACzB,IAAI,EAAC,KAAK,gBACE,MAAM,CAAC,KAAK,EACxB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,MAAM,EAAE,sBAC7B,EAAE,aAElB,MAAM,CAAC,WAAW,KAAK,SAAS,IAAI,yBAAO,MAAM,CAAC,WAAW,GAAQ,EACtE,YAAG,SAAS,EAAE,aAAa,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,YAC/C,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,KAAK,KAAK,EAAE,OAAO,EAAE,CAAC,GACxF,IACA,GACyB,EAChC,YAAY,KAAK,SAAS,IAAI,cAAK,SAAS,EAAC,cAAc,YAAE,YAAY,GAAO,IAC7E,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-chord` primitive (research/widget-registry.md §2): nodes on a ring
|
|
3
|
+
* sized by total pairwise volume, connected by quadratic-bezier ribbons whose
|
|
4
|
+
* opacity encodes pair weight, plus a legend of node dots. Node order steps
|
|
5
|
+
* clockwise (LTR) / CCW (RTL) to mirror per §7.4. Colors are tokens only;
|
|
6
|
+
* geometry is pure (04 §7.1).
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { ChordNodeInput } from '../geometry/chord.js';
|
|
10
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
11
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
12
|
+
export interface ChordLink {
|
|
13
|
+
from: string;
|
|
14
|
+
to: string;
|
|
15
|
+
weight: number;
|
|
16
|
+
}
|
|
17
|
+
export interface ChordChartProps {
|
|
18
|
+
nodes: readonly ChordNodeInput[];
|
|
19
|
+
links: readonly ChordLink[];
|
|
20
|
+
labels: ChartLabels;
|
|
21
|
+
/** Ring diameter in px (default 220). */
|
|
22
|
+
size?: number;
|
|
23
|
+
thickness?: number;
|
|
24
|
+
showLegend?: boolean;
|
|
25
|
+
dir?: ChartDir;
|
|
26
|
+
a11yFallback?: ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function Chord({ nodes, links, labels, size, thickness, showLegend, dir, a11yFallback, className, }: ChordChartProps): import("react").JSX.Element;
|
|
30
|
+
//# sourceMappingURL=Chord.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chord.d.ts","sourceRoot":"","sources":["../../src/components/Chord.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAU,EACV,SAAc,EACd,UAAiB,EACjB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,eAAe,+BAuDjB"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { adjacencyMatrix, chordLayout } from '../geometry/chord.js';
|
|
3
|
+
import { useChartDir } from '../hooks/useRtl.js';
|
|
4
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
5
|
+
export function Chord({ nodes, links, labels, size = 220, thickness = 12, showLegend = true, dir, a11yFallback, className, }) {
|
|
6
|
+
const resolvedDir = useChartDir(dir);
|
|
7
|
+
const mounted = useMountAnimation();
|
|
8
|
+
const rtl = resolvedDir === 'rtl';
|
|
9
|
+
const matrix = adjacencyMatrix(nodes.map((n) => n.id), links);
|
|
10
|
+
const layout = chordLayout(nodes, matrix, { size, thickness, rtl });
|
|
11
|
+
const maxWeight = layout.ribbons.reduce((m, r) => Math.max(m, r.weight), 0);
|
|
12
|
+
return (_jsxs("div", { className: className === undefined ? 'adm-donut' : `adm-donut ${className}`, ...(dir !== undefined ? { dir: resolvedDir } : {}), "data-export-node": "", children: [_jsxs("svg", { role: "img", "aria-label": labels.label, width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), _jsxs("g", { "data-chord": "", children: [layout.ribbons.map((ribbon, i) => (_jsx("path", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0', '--adm-stagger': `${i * 60}ms` }, d: ribbon.path, fill: "none", stroke: ribbon.colorVar, strokeWidth: maxWeight > 0 ? 1.5 + (ribbon.weight / maxWeight) * 5 : 2, strokeOpacity: 0.45, strokeLinecap: "round", "data-ribbon": `${ribbon.from}-${ribbon.to}` }, `${ribbon.from}-${ribbon.to}`))), layout.arcs.map((arc) => (_jsx("path", { d: arc.path, fill: arc.colorVar, "data-node": arc.id, transform: `translate(${layout.center.x}, ${layout.center.y})` }, arc.id)))] })] }), showLegend && (_jsx("ul", { className: "adm-donut-legend", children: layout.arcs.map((arc) => (_jsxs("li", { className: "adm-donut-legend-row", children: [_jsx("span", { className: "adm-donut-legend-dot", style: { '--adm-dot': arc.colorVar }, "aria-hidden": "true" }), _jsx("span", { children: arc.label }), _jsx("span", { className: "adm-donut-legend-value", children: Math.round(arc.total) })] }, arc.id))) })), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=Chord.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chord.js","sourceRoot":"","sources":["../../src/components/Chord.tsx"],"names":[],"mappings":"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"}
|