@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,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-choropleth-grid` primitive (research/widget-registry.md §2): a US
|
|
3
|
+
* tilegram (49 state tiles) or compact region grid, tinted by the active metric,
|
|
4
|
+
* label text flipping on dark tiles, a low→high legend + per-tile tooltips.
|
|
5
|
+
* Token-only colors, mount fade with reduced-motion fallback, `data-export-node`
|
|
6
|
+
* raster marker. The tilegram is a geographic LTR island; the `grid` layout
|
|
7
|
+
* mirrors columns in RTL (04 §7.4).
|
|
8
|
+
*/
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
import type { ChoroplethLayoutKind, RegionPoint } from '../geometry/choropleth.js';
|
|
11
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
12
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
13
|
+
export interface ChoroplethGridChartProps {
|
|
14
|
+
points: readonly RegionPoint[];
|
|
15
|
+
/** Value key read from each point's `values` map. */
|
|
16
|
+
metric: string;
|
|
17
|
+
labels: ChartLabels;
|
|
18
|
+
layout?: ChoroplethLayoutKind;
|
|
19
|
+
columns?: number;
|
|
20
|
+
levels?: number;
|
|
21
|
+
cellSize?: number;
|
|
22
|
+
legendLabels?: {
|
|
23
|
+
low: string;
|
|
24
|
+
high: string;
|
|
25
|
+
};
|
|
26
|
+
format?: (value: number) => string;
|
|
27
|
+
dir?: ChartDir;
|
|
28
|
+
a11yFallback?: ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
export declare function ChoroplethGridChart({ points, metric, labels, layout, columns, levels, cellSize, legendLabels, format, dir, a11yFallback, className, }: ChoroplethGridChartProps): import("react").JSX.Element;
|
|
32
|
+
//# sourceMappingURL=ChoroplethGridChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChoroplethGridChart.d.ts","sourceRoot":"","sources":["../../src/components/ChoroplethGridChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAsB,EACtB,OAAW,EACX,MAAU,EACV,QAAa,EACb,YAA2C,EAC3C,MAAe,EACf,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,wBAAwB,+BAiF1B"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { choroplethLayout } from '../geometry/choropleth.js';
|
|
3
|
+
import { rampColorVar } from '../geometry/heat.js';
|
|
4
|
+
import { useChartDir } from '../hooks/useRtl.js';
|
|
5
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
6
|
+
export function ChoroplethGridChart({ points, metric, labels, layout = 'us-tilegram', columns = 6, levels = 5, cellSize = 34, legendLabels = { low: 'Low', high: 'High' }, format = String, dir, a11yFallback, className, }) {
|
|
7
|
+
const resolvedDir = useChartDir(dir);
|
|
8
|
+
const mounted = useMountAnimation();
|
|
9
|
+
const rtl = resolvedDir === 'rtl';
|
|
10
|
+
const geo = choroplethLayout(points, { metric, layout, columns, levels, cellSize, rtl });
|
|
11
|
+
const legendHeight = 24;
|
|
12
|
+
const svgHeight = geo.height + legendHeight;
|
|
13
|
+
return (_jsxs("div", { className: className === undefined ? 'adm-choropleth' : `adm-choropleth ${className}`, ...(dir !== undefined ? { dir: resolvedDir } : {}), children: [_jsxs("svg", { role: "img", "aria-label": labels.label, width: geo.width, height: svgHeight, viewBox: `0 0 ${Math.max(1, geo.width)} ${Math.max(1, svgHeight)}`, "data-export-node": "", children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), _jsx("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: geo.tiles.map((tile) => (_jsxs("g", { children: [_jsx("rect", { x: tile.x, y: tile.y, width: tile.size, height: tile.size, rx: 4, fill: tile.colorVar, stroke: "var(--border)", strokeWidth: 1, "data-region-tile": tile.code, "data-level": tile.level, children: _jsx("title", { children: `${tile.name}: ${format(tile.value)}` }) }), _jsx("text", { className: "adm-chart-num", x: tile.x + tile.size / 2, y: tile.y + tile.size / 2 + 3, textAnchor: "middle", fontSize: 9, fontWeight: 700, fill: tile.textLight ? 'var(--accent-fg)' : 'var(--fg-muted)', children: tile.code })] }, `${tile.code}-${tile.row}-${tile.col}`))) }), _jsxs("g", { transform: `translate(0, ${geo.height + 8})`, children: [_jsx("text", { className: "adm-chart-axis-label", x: 0, y: 11, textAnchor: "start", children: legendLabels.low }), Array.from({ length: levels }, (_, level) => (_jsx("rect", { x: 30 + level * 16, y: 2, width: 14, height: 12, rx: 2, fill: rampColorVar(level, levels) }, `lg${level}`))), _jsx("text", { className: "adm-chart-axis-label", x: 30 + levels * 16 + 4, y: 11, textAnchor: "start", children: legendLabels.high })] })] }), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=ChoroplethGridChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChoroplethGridChart.js","sourceRoot":"","sources":["../../src/components/ChoroplethGridChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-cohort-matrix` primitive (research/widget-registry.md §2): cohort rows
|
|
3
|
+
* × period columns, accent-alpha cells, triangular nulls transparent, in-cell
|
|
4
|
+
* value labels that flip to the on-accent color past ~55%. Fixed cell geometry
|
|
5
|
+
* with an intrinsic size (the widget wrapper adds horizontal scroll) — the
|
|
6
|
+
* DonutChart precedent for non-responsive charts. Token-only colors, mount fade
|
|
7
|
+
* with a reduced-motion final-state fallback, `data-export-node` raster marker.
|
|
8
|
+
*/
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
11
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
12
|
+
export interface CohortMatrixChartProps {
|
|
13
|
+
rowKeys: readonly string[];
|
|
14
|
+
colKeys: readonly string[];
|
|
15
|
+
/** cells[row][col]; null renders a triangular gap. */
|
|
16
|
+
cells: readonly (readonly (number | null)[])[];
|
|
17
|
+
labels: ChartLabels;
|
|
18
|
+
cellSize?: number;
|
|
19
|
+
/** Value at/above which the label flips to the on-accent color (default 55). */
|
|
20
|
+
flipThreshold?: number;
|
|
21
|
+
/** Value mapped to the darkest ramp step (default 100, i.e. a percent scale). */
|
|
22
|
+
maxValue?: number;
|
|
23
|
+
/** Format a non-null cell value for its label + tooltip (default `${v}%`). */
|
|
24
|
+
format?: (value: number) => string;
|
|
25
|
+
dir?: ChartDir;
|
|
26
|
+
a11yFallback?: ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function CohortMatrixChart({ rowKeys, colKeys, cells, labels, cellSize, flipThreshold, maxValue, format, dir, a11yFallback, className, }: CohortMatrixChartProps): import("react").JSX.Element;
|
|
30
|
+
//# sourceMappingURL=CohortMatrixChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CohortMatrixChart.d.ts","sourceRoot":"","sources":["../../src/components/CohortMatrixChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,sDAAsD;IACtD,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IAC/C,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAa,EACb,aAAkB,EAClB,QAAc,EACd,MAAsB,EACtB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,sBAAsB,+BAmFxB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cohortLayout } from '../geometry/cohort.js';
|
|
3
|
+
import { useChartDir } from '../hooks/useRtl.js';
|
|
4
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
5
|
+
const defaultFormat = (value) => `${Math.round(value)}%`;
|
|
6
|
+
export function CohortMatrixChart({ rowKeys, colKeys, cells, labels, cellSize = 40, flipThreshold = 55, maxValue = 100, format = defaultFormat, dir, a11yFallback, className, }) {
|
|
7
|
+
const resolvedDir = useChartDir(dir);
|
|
8
|
+
const mounted = useMountAnimation();
|
|
9
|
+
const rtl = resolvedDir === 'rtl';
|
|
10
|
+
const layout = cohortLayout(rowKeys, colKeys, cells, { cellSize, flipThreshold, maxValue, rtl });
|
|
11
|
+
return (_jsxs("div", { className: className === undefined ? 'adm-cohort' : `adm-cohort ${className}`, ...(dir !== undefined ? { dir: resolvedDir } : {}), children: [_jsxs("svg", { role: "img", "aria-label": labels.label, width: layout.width, height: layout.height, viewBox: `0 0 ${Math.max(1, layout.width)} ${Math.max(1, layout.height)}`, "data-export-node": "", children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), layout.colLabels.map((col) => (_jsx("text", { className: "adm-chart-axis-label", x: col.pos, y: 12, textAnchor: "middle", children: col.label }, `c${col.index}`))), layout.rowLabels.map((row) => (_jsx("text", { className: "adm-chart-axis-label", x: layout.rowLabelX, y: row.pos + 3, textAnchor: layout.rowLabelAnchor, children: row.label }, `r${row.index}`))), _jsx("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: layout.cells.map((cell) => (_jsxs("g", { children: [_jsx("rect", { x: cell.x, y: cell.y, width: cell.size, height: cell.size, rx: 4, fill: cell.colorVar, "data-cohort-cell": "", "data-gap": cell.value === null ? '' : undefined, children: cell.value !== null && (_jsx("title", { children: `${rowKeys[cell.row] ?? ''} · ${colKeys[cell.col] ?? ''}: ${format(cell.value)}` })) }), cell.value !== null && cell.size >= 24 && (_jsx("text", { className: "adm-chart-num", x: cell.x + cell.size / 2, y: cell.y + cell.size / 2 + 3, textAnchor: "middle", fontSize: 10, fontWeight: 600, fill: cell.textLight ? 'var(--accent-fg)' : 'var(--fg)', children: format(cell.value) }))] }, `${cell.row}-${cell.col}`))) })] }), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=CohortMatrixChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CohortMatrixChart.js","sourceRoot":"","sources":["../../src/components/CohortMatrixChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-correlation-matrix` primitive (research/widget-registry.md §2): n×n grid
|
|
3
|
+
* of Pearson r, accent for positive / danger for negative, fill opacity by |r|,
|
|
4
|
+
* mono values that flip to the accent foreground past a strong threshold.
|
|
5
|
+
* Column order mirrors in RTL. Fade-in on mount.
|
|
6
|
+
*/
|
|
7
|
+
import type { ReactNode } from 'react';
|
|
8
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
9
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
10
|
+
export interface CorrelationMatrixChartProps {
|
|
11
|
+
/** Square correlation grid: cells[row][col] ∈ [-1, 1] (null = blank). */
|
|
12
|
+
cells: readonly (readonly (number | null)[])[];
|
|
13
|
+
columns: readonly string[];
|
|
14
|
+
labels: ChartLabels;
|
|
15
|
+
height?: number;
|
|
16
|
+
showLabels?: boolean;
|
|
17
|
+
/** |r| above which cell text uses the accent foreground (default 0.55). */
|
|
18
|
+
strongThreshold?: number;
|
|
19
|
+
dir?: ChartDir;
|
|
20
|
+
a11yFallback?: ReactNode;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
export declare function CorrelationMatrixChart({ cells, columns, labels, height, showLabels, strongThreshold, dir, a11yFallback, className, }: CorrelationMatrixChartProps): import("react").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=CorrelationMatrixChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CorrelationMatrixChart.d.ts","sourceRoot":"","sources":["../../src/components/CorrelationMatrixChart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,2BAA2B;IAC1C,yEAAyE;IACzE,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IAC/C,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAY,EACZ,UAAiB,EACjB,eAAsB,EACtB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,2BAA2B,+BAuF7B"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { matrixGridLayout } from '../geometry/correlation.js';
|
|
3
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
4
|
+
function formatR(value) {
|
|
5
|
+
const fixed = value.toFixed(2);
|
|
6
|
+
return fixed === '-0.00' ? '0.00' : fixed;
|
|
7
|
+
}
|
|
8
|
+
export function CorrelationMatrixChart({ cells, columns, labels, height = 260, showLabels = true, strongThreshold = 0.55, dir, a11yFallback, className, }) {
|
|
9
|
+
const rows = cells.length;
|
|
10
|
+
const cols = columns.length;
|
|
11
|
+
const pad = { top: showLabels ? 18 : 6, bottom: 6, near: showLabels ? 68 : 6, far: 8 };
|
|
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 (rows === 0 || cols === 0 || innerWidth <= 0 || innerHeight <= 0)
|
|
14
|
+
return null;
|
|
15
|
+
const layout = matrixGridLayout({ rows, cols, width: innerWidth, height: innerHeight, rtl });
|
|
16
|
+
const showText = layout.cellW >= 26 && layout.cellH >= 18;
|
|
17
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [layout.cells.map((cell) => {
|
|
18
|
+
const r = cells[cell.row]?.[cell.col];
|
|
19
|
+
if (typeof r !== 'number')
|
|
20
|
+
return null;
|
|
21
|
+
const magnitude = Math.min(1, Math.abs(r));
|
|
22
|
+
const strong = magnitude >= strongThreshold;
|
|
23
|
+
return (_jsxs("g", { "data-cell-row": cell.row, "data-cell-col": cell.col, children: [_jsx("rect", { x: cell.x, y: cell.y, width: cell.w, height: cell.h, rx: 3, fill: r >= 0 ? 'var(--accent)' : 'var(--danger)', fillOpacity: 0.12 + magnitude * 0.88, "data-sign": r >= 0 ? 'pos' : 'neg' }), showText && (_jsx("text", { className: "adm-chart-num", x: cell.x + cell.w / 2, y: cell.y + cell.h / 2 + 3, textAnchor: "middle", fontSize: 10, fontWeight: 600, fill: strong ? 'var(--accent-fg)' : 'var(--fg-muted)', children: formatR(r) }))] }, `${cell.row}-${cell.col}`));
|
|
24
|
+
}), showLabels &&
|
|
25
|
+
columns.map((label, col) => (_jsx("text", { className: "adm-chart-axis-label", x: layout.colX(col) + layout.cellW / 2, y: -6, textAnchor: "middle", children: label }, `col-${label}`))), showLabels &&
|
|
26
|
+
columns.map((label, row) => row < rows ? (_jsx("text", { className: "adm-chart-axis-label", x: rtl ? innerWidth + 6 : -6, y: layout.rowY(row) + layout.cellH / 2 + 3, textAnchor: rtl ? 'start' : 'end', children: label }, `row-${label}`)) : null)] }));
|
|
27
|
+
} }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=CorrelationMatrixChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CorrelationMatrixChart.js","sourceRoot":"","sources":["../../src/components/CorrelationMatrixChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-donut` primitive (research/widget-registry.md §2): SVG arcs via
|
|
3
|
+
* d3-shape, inner total slot, legend rows (color dot, label, mono value),
|
|
4
|
+
* maxSlices + "other" bucket. Rotation stays clockwise in RTL; the legend and
|
|
5
|
+
* center layout mirror via flex + logical properties (10-i18n-theming.md §5.5).
|
|
6
|
+
*/
|
|
7
|
+
import type { ReactNode } from 'react';
|
|
8
|
+
import type { DonutSliceInput } from '../geometry/donut.js';
|
|
9
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
10
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
11
|
+
export interface DonutChartProps {
|
|
12
|
+
data: readonly DonutSliceInput[];
|
|
13
|
+
labels: ChartLabels;
|
|
14
|
+
/** Slices beyond this collapse into a trailing "other" bucket (default 5). */
|
|
15
|
+
maxSlices?: number;
|
|
16
|
+
otherLabel?: string;
|
|
17
|
+
/** Caption under the center total (e.g. "Total"). */
|
|
18
|
+
centerLabel?: string;
|
|
19
|
+
/** Override the auto center value (defaults to the formatted total). */
|
|
20
|
+
centerValue?: string;
|
|
21
|
+
/** Ring diameter in px (default 160). */
|
|
22
|
+
size?: number;
|
|
23
|
+
thickness?: number;
|
|
24
|
+
showLegend?: boolean;
|
|
25
|
+
format?: (value: number) => string;
|
|
26
|
+
dir?: ChartDir;
|
|
27
|
+
a11yFallback?: ReactNode;
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
export declare function DonutChart({ data, labels, maxSlices, otherLabel, centerLabel, centerValue, size, thickness, showLegend, format, dir, a11yFallback, className, }: DonutChartProps): import("react").JSX.Element;
|
|
31
|
+
//# sourceMappingURL=DonutChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../src/components/DonutChart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,MAAM,EAAE,WAAW,CAAC;IACpB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,SAAa,EACb,UAAoB,EACpB,WAAW,EACX,WAAW,EACX,IAAU,EACV,SAAc,EACd,UAAiB,EACjB,MAAsB,EACtB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,eAAe,+BAiEjB"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { donutArcs } from '../geometry/donut.js';
|
|
3
|
+
import { useChartDir } from '../hooks/useRtl.js';
|
|
4
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
5
|
+
import { formatCompact } from '../utils/format.js';
|
|
6
|
+
export function DonutChart({ data, labels, maxSlices = 5, otherLabel = 'Other', centerLabel, centerValue, size = 160, thickness = 20, showLegend = true, format = formatCompact, dir, a11yFallback, className, }) {
|
|
7
|
+
const resolvedDir = useChartDir(dir);
|
|
8
|
+
const mounted = useMountAnimation();
|
|
9
|
+
const arcs = donutArcs(data, {
|
|
10
|
+
outerRadius: size / 2,
|
|
11
|
+
thickness,
|
|
12
|
+
maxSlices,
|
|
13
|
+
otherLabel,
|
|
14
|
+
});
|
|
15
|
+
const total = data.reduce((sum, s) => sum + Math.max(0, s.value), 0);
|
|
16
|
+
const shownCenterValue = centerValue ?? format(total);
|
|
17
|
+
return (_jsxs("div", { className: className === undefined ? 'adm-donut' : `adm-donut ${className}`, ...(dir !== undefined ? { dir: resolvedDir } : {}), children: [_jsxs("svg", { role: "img", "aria-label": labels.label, width: size, height: size, viewBox: `0 0 ${size} ${size}`, "data-export-node": "", children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), _jsxs("g", { transform: `translate(${size / 2}, ${size / 2})`, children: [arcs.map((slice, i) => (_jsx("path", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0', '--adm-stagger': `${i * 80}ms` }, d: slice.path, fill: slice.colorVar, "data-slice": slice.label, "data-other": slice.isOther ? '' : undefined }, slice.label))), _jsx("text", { className: "adm-donut-center-value", textAnchor: "middle", dy: centerLabel !== undefined ? '0.1em' : '0.35em', children: shownCenterValue }), centerLabel !== undefined && (_jsx("text", { className: "adm-donut-center-label", textAnchor: "middle", dy: "1.6em", children: centerLabel }))] })] }), showLegend && (_jsx("ul", { className: "adm-donut-legend", children: arcs.map((slice) => (_jsxs("li", { className: "adm-donut-legend-row", children: [_jsx("span", { className: "adm-donut-legend-dot", style: { '--adm-dot': slice.colorVar }, "aria-hidden": "true" }), _jsx("span", { children: slice.label }), _jsx("span", { className: "adm-donut-legend-value", children: format(slice.value) })] }, slice.label))) })), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=DonutChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart.js","sourceRoot":"","sources":["../../src/components/DonutChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-forecast` primitive (research/widget-registry.md §2): history line +
|
|
3
|
+
* dashed forecast + widening confidence polygon + "now" divider + projected
|
|
4
|
+
* footer legend. A time axis, so it never mirrors (04 §7.4 LTR island); the
|
|
5
|
+
* footer legend follows reading direction. Colors from the viz palette only.
|
|
6
|
+
*/
|
|
7
|
+
import type { ReactNode } from 'react';
|
|
8
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
9
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
10
|
+
export interface ForecastPoint {
|
|
11
|
+
x: Date;
|
|
12
|
+
y: number;
|
|
13
|
+
}
|
|
14
|
+
export interface ForecastBandPoint {
|
|
15
|
+
lo: number;
|
|
16
|
+
hi: number;
|
|
17
|
+
}
|
|
18
|
+
export interface ForecastChartProps {
|
|
19
|
+
history: readonly ForecastPoint[];
|
|
20
|
+
forecast: readonly ForecastPoint[];
|
|
21
|
+
/** Confidence edges aligned 1:1 to `forecast`. */
|
|
22
|
+
band: readonly ForecastBandPoint[];
|
|
23
|
+
labels: ChartLabels;
|
|
24
|
+
height?: number;
|
|
25
|
+
showAxis?: boolean;
|
|
26
|
+
/** Divider caption (default "Now"). */
|
|
27
|
+
nowLabel?: string;
|
|
28
|
+
/** Footer legend caption for the projection (default "Forecast"). */
|
|
29
|
+
forecastLabel?: string;
|
|
30
|
+
actualLabel?: string;
|
|
31
|
+
formatY?: (y: number) => string;
|
|
32
|
+
dir?: ChartDir;
|
|
33
|
+
a11yFallback?: ReactNode;
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
export declare function ForecastChart({ history, forecast, band, labels, height, showAxis, nowLabel, forecastLabel, actualLabel, formatY, dir, a11yFallback, className, }: ForecastChartProps): import("react").JSX.Element;
|
|
37
|
+
//# sourceMappingURL=ForecastChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ForecastChart.d.ts","sourceRoot":"","sources":["../../src/components/ForecastChart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,IAAI,CAAC;IACR,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,kDAAkD;IAClD,IAAI,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACnC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAY,EACZ,QAAe,EACf,QAAgB,EAChB,aAA0B,EAC1B,WAAsB,EACtB,OAAuB,EACvB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,+BA0JpB"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { confidenceBandPath } from '../geometry/forecast.js';
|
|
3
|
+
import { linePath } from '../geometry/lineArea.js';
|
|
4
|
+
import { linearYScale, timeScale } from '../geometry/scales.js';
|
|
5
|
+
import { extent, niceTicks } from '../utils/stats.js';
|
|
6
|
+
import { formatCompact } from '../utils/format.js';
|
|
7
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
8
|
+
export function ForecastChart({ history, forecast, band, labels, height = 260, showAxis = true, nowLabel = 'Now', forecastLabel = 'Forecast', actualLabel = 'Actual', formatY = formatCompact, dir, a11yFallback, className, }) {
|
|
9
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: 10, bottom: showAxis ? 24 : 8, left: showAxis ? 38 : 6, right: 10 }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
10
|
+
if (history.length === 0 || innerWidth <= 0 || innerHeight <= 0)
|
|
11
|
+
return null;
|
|
12
|
+
const allDates = [...history, ...forecast].map((p) => p.x.getTime());
|
|
13
|
+
const [loT, hiT] = extent(allDates) ?? [0, 1];
|
|
14
|
+
const xScale = timeScale([new Date(loT), new Date(hiT)], innerWidth);
|
|
15
|
+
const ys = [
|
|
16
|
+
...history.map((p) => p.y),
|
|
17
|
+
...forecast.map((p) => p.y),
|
|
18
|
+
...band.map((b) => b.lo),
|
|
19
|
+
...band.map((b) => b.hi),
|
|
20
|
+
];
|
|
21
|
+
const [minY, maxY] = extent(ys) ?? [0, 1];
|
|
22
|
+
const yTicks = niceTicks(Math.min(0, minY), Math.max(1, maxY), 3);
|
|
23
|
+
const yScale = linearYScale([yTicks[0] ?? 0, yTicks.at(-1) ?? 1], innerHeight);
|
|
24
|
+
const now = history.at(-1);
|
|
25
|
+
const nowX = xScale(now.x);
|
|
26
|
+
const nowPix = { x: nowX, y: yScale(now.y) };
|
|
27
|
+
const historyPix = history.map((p) => ({ x: xScale(p.x), y: yScale(p.y) }));
|
|
28
|
+
const forecastPix = forecast.map((p) => ({ x: xScale(p.x), y: yScale(p.y) }));
|
|
29
|
+
const upper = [nowPix, ...forecast.map((p, i) => ({ x: xScale(p.x), y: yScale(band[i]?.hi ?? p.y) }))];
|
|
30
|
+
const lower = [nowPix, ...forecast.map((p, i) => ({ x: xScale(p.x), y: yScale(band[i]?.lo ?? p.y) }))];
|
|
31
|
+
const historyLine = linePath(historyPix, true);
|
|
32
|
+
const forecastLine = linePath([nowPix, ...forecastPix], true);
|
|
33
|
+
const bandPath = confidenceBandPath(upper, lower);
|
|
34
|
+
const legendStart = rtl ? innerWidth : 0;
|
|
35
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: [showAxis &&
|
|
36
|
+
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.15, stroke: "none", "data-band": "confidence" })), _jsx("line", { x1: nowX, x2: nowX, y1: 0, y2: innerHeight, stroke: "var(--border-strong)", strokeWidth: 1, strokeDasharray: "3 3", "data-now-divider": "" }), _jsx("text", { x: nowX + (rtl ? -4 : 4), y: 10, textAnchor: rtl ? 'end' : 'start', fontSize: 9.5, fontWeight: 600, fill: "var(--fg-subtle)", "data-now-label": "", children: nowLabel }), forecastLine !== null && (_jsx("path", { d: forecastLine, fill: "none", stroke: "var(--viz-1)", strokeWidth: 2, strokeDasharray: "5 4", strokeLinecap: "round", "data-series": "forecast" })), historyLine !== null && (_jsx("path", { d: historyLine, fill: "none", stroke: "var(--viz-1)", strokeWidth: 2, strokeLinecap: "round", "data-series": "history" })), _jsx("circle", { cx: nowPix.x, cy: nowPix.y, r: 3, fill: "var(--viz-1)", stroke: "var(--surface)", strokeWidth: 1.5 }), _jsxs("g", { "data-footer-legend": "", transform: `translate(0, ${innerHeight + (showAxis ? 16 : 4)})`, children: [_jsx("line", { x1: rtl ? legendStart : legendStart, x2: rtl ? legendStart - 16 : legendStart + 16, y1: 0, y2: 0, stroke: "var(--viz-1)", strokeWidth: 2 }), _jsx("text", { x: rtl ? legendStart - 20 : legendStart + 20, y: 3, textAnchor: rtl ? 'end' : 'start', fontSize: 9.5, fontWeight: 600, fill: "var(--fg-muted)", children: actualLabel }), _jsx("line", { x1: rtl ? legendStart - 96 : legendStart + 96, x2: rtl ? legendStart - 112 : legendStart + 112, y1: 0, y2: 0, stroke: "var(--viz-1)", strokeWidth: 2, strokeDasharray: "4 3" }), _jsx("text", { x: rtl ? legendStart - 116 : legendStart + 116, y: 3, textAnchor: rtl ? 'end' : 'start', fontSize: 9.5, fontWeight: 600, fill: "var(--fg-muted)", children: forecastLabel })] })] }));
|
|
37
|
+
} }));
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=ForecastChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ForecastChart.js","sourceRoot":"","sources":["../../src/components/ForecastChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-funnel` primitive (research/widget-registry.md §2): ordered shrinking
|
|
3
|
+
* stages in two layouts — `horizontal` (start-aligned bars) and `stepped`
|
|
4
|
+
* (centered bars with "N% continue" step rows) — plus an overall-conversion
|
|
5
|
+
* footer. Bars mirror in RTL (categorical part-to-whole, §7.4); the fading
|
|
6
|
+
* accent-alpha ramp keeps in-bar labels readable in both themes. Tokens only.
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { FunnelStageInput } from '../geometry/funnel.js';
|
|
10
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
11
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
12
|
+
export interface FunnelChartProps {
|
|
13
|
+
data: readonly FunnelStageInput[];
|
|
14
|
+
labels: ChartLabels;
|
|
15
|
+
variant?: 'horizontal' | 'stepped';
|
|
16
|
+
/** Show the per-step "N% continue" retention between stages. */
|
|
17
|
+
showStepConversion?: boolean;
|
|
18
|
+
/** Show the overall first→last conversion footer. */
|
|
19
|
+
overallFooter?: boolean;
|
|
20
|
+
height?: number;
|
|
21
|
+
format?: (value: number) => string;
|
|
22
|
+
dir?: ChartDir;
|
|
23
|
+
a11yFallback?: ReactNode;
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function Funnel({ data, labels, variant, showStepConversion, overallFooter, height, format, dir, a11yFallback, className, }: FunnelChartProps): import("react").JSX.Element;
|
|
27
|
+
//# sourceMappingURL=Funnel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Funnel.d.ts","sourceRoot":"","sources":["../../src/components/Funnel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,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,gBAAgB,EAAE,CAAC;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,OAAmB,EACnB,kBAAyB,EACzB,aAAoB,EACpB,MAAY,EACZ,MAAsB,EACtB,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,gBAAgB,+BAoFlB"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { funnelLayout } from '../geometry/funnel.js';
|
|
3
|
+
import { formatCompact } from '../utils/format.js';
|
|
4
|
+
import { ChartSurface } from './ChartSurface.js';
|
|
5
|
+
export function Funnel({ data, labels, variant = 'stepped', showStepConversion = true, overallFooter = true, height = 240, format = formatCompact, dir, a11yFallback, className, }) {
|
|
6
|
+
return (_jsx(ChartSurface, { labels: labels, height: height, ...(dir !== undefined ? { dir } : {}), ...(a11yFallback !== undefined ? { a11yFallback } : {}), ...(className !== undefined ? { className } : {}), padding: { top: 2, right: 2, bottom: overallFooter ? 24 : 2, left: 2 }, children: ({ innerWidth, innerHeight, rtl, mounted }) => {
|
|
7
|
+
if (innerWidth <= 0 || innerHeight <= 0)
|
|
8
|
+
return null;
|
|
9
|
+
const { stages, overallConversion } = funnelLayout(data);
|
|
10
|
+
if (stages.length === 0)
|
|
11
|
+
return null;
|
|
12
|
+
const rowHeight = innerHeight / stages.length;
|
|
13
|
+
const barHeight = Math.max(6, rowHeight * (showStepConversion ? 0.54 : 0.72));
|
|
14
|
+
return (_jsxs("g", { "data-funnel": "", children: [stages.map((stage, i) => {
|
|
15
|
+
const barWidth = stage.widthFrac * innerWidth;
|
|
16
|
+
const startX = variant === 'stepped' ? stage.offsetFrac * innerWidth : 0;
|
|
17
|
+
const x = rtl ? innerWidth - startX - barWidth : startX;
|
|
18
|
+
const y = i * rowHeight + (rowHeight - barHeight) / 2;
|
|
19
|
+
const textX = rtl ? innerWidth - 8 : 8;
|
|
20
|
+
const anchor = rtl ? 'end' : 'start';
|
|
21
|
+
return (_jsxs("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0', '--adm-stagger': `${i * 70}ms` }, "data-stage": stage.label, children: [_jsx("rect", { x: x, y: y, width: Math.max(0, barWidth), height: barHeight, rx: 4, fill: stage.colorVar }), _jsx("text", { className: "adm-chart-axis-label", x: textX, y: y + barHeight / 2 - 3, textAnchor: anchor, dominantBaseline: "middle", children: stage.label }), _jsx("text", { className: "adm-chart-axis-label adm-chart-num", x: textX, y: y + barHeight / 2 + 10, textAnchor: anchor, dominantBaseline: "middle", children: `${format(stage.value)} · ${Math.round(stage.overallPct)}%` }), showStepConversion && i > 0 && (_jsx("text", { className: "adm-chart-axis-label", x: innerWidth / 2, y: i * rowHeight, textAnchor: "middle", dominantBaseline: "middle", "data-step-conversion": "", children: `${Math.round(stage.stepPct)}% continue` }))] }, stage.label));
|
|
22
|
+
}), overallFooter && (_jsx("text", { className: "adm-chart-tooltip-value", x: innerWidth / 2, y: innerHeight + 16, textAnchor: "middle", "data-overall-conversion": "", children: `${Math.round(overallConversion)}% overall` }))] }));
|
|
23
|
+
} }));
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=Funnel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Funnel.js","sourceRoot":"","sources":["../../src/components/Funnel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-heatmap-calendar` primitive (research/widget-registry.md §2): GitHub-
|
|
3
|
+
* style week×day contribution grid with intensity levels, month markers, a
|
|
4
|
+
* weekday gutter, a less→more legend and per-day native tooltips. Intrinsic cell
|
|
5
|
+
* geometry (the widget wrapper adds horizontal scroll, annex "horizontal
|
|
6
|
+
* scroll"). Token-only colors, mount fade with reduced-motion fallback,
|
|
7
|
+
* `data-export-node` raster marker. Week columns run right→left in RTL (04 §7.4).
|
|
8
|
+
*/
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
import type { HeatPoint } from '../geometry/heatCalendar.js';
|
|
11
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
12
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
13
|
+
export interface HeatCalendarChartProps {
|
|
14
|
+
points: readonly HeatPoint[];
|
|
15
|
+
labels: ChartLabels;
|
|
16
|
+
weeks?: number;
|
|
17
|
+
/** First weekday of the column, 0=Sun..6=Sat (locale-aware). Default 0. */
|
|
18
|
+
startWeekday?: number;
|
|
19
|
+
/** Intensity levels incl. 0 (default 5). */
|
|
20
|
+
levels?: number;
|
|
21
|
+
cellSize?: number;
|
|
22
|
+
/** Weekday short labels indexed 0=Sun..6=Sat. */
|
|
23
|
+
weekdayLabels?: readonly string[];
|
|
24
|
+
/** Month short labels indexed 0=Jan..11=Dec. */
|
|
25
|
+
monthLabels?: readonly string[];
|
|
26
|
+
legendLabels?: {
|
|
27
|
+
less: string;
|
|
28
|
+
more: string;
|
|
29
|
+
};
|
|
30
|
+
/** Format the tooltip count (default `${v}`). */
|
|
31
|
+
format?: (value: number) => string;
|
|
32
|
+
/** Format the tooltip date (default ISO key). */
|
|
33
|
+
formatDate?: (date: Date) => string;
|
|
34
|
+
dir?: ChartDir;
|
|
35
|
+
a11yFallback?: ReactNode;
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare function HeatCalendarChart({ points, labels, weeks, startWeekday, levels, cellSize, weekdayLabels, monthLabels, legendLabels, format, formatDate, dir, a11yFallback, className, }: HeatCalendarChartProps): import("react").JSX.Element;
|
|
39
|
+
//# sourceMappingURL=HeatCalendarChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatCalendarChart.d.ts","sourceRoot":"","sources":["../../src/components/HeatCalendarChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMrD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,iDAAiD;IACjD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,KAAU,EACV,YAAgB,EAChB,MAAU,EACV,QAAa,EACb,aAAgC,EAChC,WAA4B,EAC5B,YAA6C,EAC7C,MAAe,EACf,UAAU,EACV,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,sBAAsB,+BAmHxB"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { heatCalendarLayout } from '../geometry/heatCalendar.js';
|
|
3
|
+
import { rampColorVar } from '../geometry/heat.js';
|
|
4
|
+
import { useChartDir } from '../hooks/useRtl.js';
|
|
5
|
+
import { useMountAnimation } from '../hooks/useMountAnimation.js';
|
|
6
|
+
/** Sun..Sat short weekday labels — English defaults, overridable per locale. */
|
|
7
|
+
const DEFAULT_WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
8
|
+
const DEFAULT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
9
|
+
export function HeatCalendarChart({ points, labels, weeks = 53, startWeekday = 0, levels = 5, cellSize = 12, weekdayLabels = DEFAULT_WEEKDAYS, monthLabels = DEFAULT_MONTHS, legendLabels = { less: 'Less', more: 'More' }, format = String, formatDate, dir, a11yFallback, className, }) {
|
|
10
|
+
const resolvedDir = useChartDir(dir);
|
|
11
|
+
const mounted = useMountAnimation();
|
|
12
|
+
const rtl = resolvedDir === 'rtl';
|
|
13
|
+
const gap = 3;
|
|
14
|
+
const layout = heatCalendarLayout(points, { weeks, startWeekday, cellSize, gap, levels, rtl });
|
|
15
|
+
const monthHeader = 16;
|
|
16
|
+
const gutter = 30;
|
|
17
|
+
const legendHeight = 22;
|
|
18
|
+
const gridX = rtl ? 0 : gutter;
|
|
19
|
+
const svgWidth = gutter + layout.width;
|
|
20
|
+
const svgHeight = monthHeader + layout.height + legendHeight;
|
|
21
|
+
// Month markers at each column where the month changes (data order oldest→newest).
|
|
22
|
+
const monthMarks = [];
|
|
23
|
+
let prevMonth = -1;
|
|
24
|
+
for (let col = 0; col < layout.weeks; col += 1) {
|
|
25
|
+
const cell = layout.days.find((d) => d.weekIndex === col);
|
|
26
|
+
if (cell === undefined)
|
|
27
|
+
continue;
|
|
28
|
+
const month = cell.date.getUTCMonth();
|
|
29
|
+
if (month !== prevMonth) {
|
|
30
|
+
monthMarks.push({ x: cell.x, label: monthLabels[month] ?? '' });
|
|
31
|
+
prevMonth = month;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
const dateLabel = (date) => (formatDate ? formatDate(date) : date.toISOString().slice(0, 10));
|
|
35
|
+
return (_jsxs("div", { className: className === undefined ? 'adm-heatcal' : `adm-heatcal ${className}`, ...(dir !== undefined ? { dir: resolvedDir } : {}), children: [_jsxs("svg", { role: "img", "aria-label": labels.label, width: svgWidth, height: svgHeight, viewBox: `0 0 ${Math.max(1, svgWidth)} ${Math.max(1, svgHeight)}`, "data-export-node": "", children: [labels.description !== undefined && _jsx("desc", { children: labels.description }), layout.weekdayRows.map((weekday, row) => row % 2 === 1 ? (_jsx("text", { className: "adm-chart-axis-label", x: rtl ? layout.width + 6 : gutter - 6, y: monthHeader + row * (cellSize + gap) + cellSize, textAnchor: rtl ? 'start' : 'end', children: weekdayLabels[weekday] ?? '' }, `wd${row}`)) : null), _jsxs("g", { transform: `translate(${gridX}, ${monthHeader})`, children: [monthMarks.map((mark, i) => (_jsx("text", { className: "adm-chart-axis-label", x: mark.x, y: -4, textAnchor: "start", children: mark.label }, `m${i}`))), _jsx("g", { className: "adm-chart-fade", style: { '--adm-fade': mounted ? '1' : '0' }, children: layout.days.map((day) => (_jsx("rect", { x: day.x, y: day.y, width: day.size, height: day.size, rx: 2, fill: rampColorVar(day.level, levels), "data-heat-cell": "", "data-level": day.level, children: _jsx("title", { children: `${dateLabel(day.date)}: ${format(day.value)}` }) }, day.key))) })] }), _jsxs("g", { transform: `translate(${gridX}, ${monthHeader + layout.height + 8})`, children: [_jsx("text", { className: "adm-chart-axis-label", x: 0, y: 9, textAnchor: "start", children: legendLabels.less }), Array.from({ length: levels }, (_, level) => (_jsx("rect", { x: 26 + level * (cellSize + 2), y: 0, width: cellSize, height: cellSize, rx: 2, fill: rampColorVar(level, levels) }, `lg${level}`))), _jsx("text", { className: "adm-chart-axis-label", x: 26 + levels * (cellSize + 2) + 4, y: 9, textAnchor: "start", children: legendLabels.more })] })] }), a11yFallback !== undefined && _jsx("div", { className: "adm-chart-sr", children: a11yFallback })] }));
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=HeatCalendarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatCalendarChart.js","sourceRoot":"","sources":["../../src/components/HeatCalendarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `chart-heat-month` primitive (research/widget-registry.md §2): a 7-column
|
|
3
|
+
* month grid with day numbers and up to 5 intensity levels + a day-of-week
|
|
4
|
+
* header. Intrinsic cell geometry (DonutChart precedent). Token-only colors,
|
|
5
|
+
* mount fade with reduced-motion fallback, `data-export-node` raster marker.
|
|
6
|
+
* Day-of-week columns mirror in RTL (04 §7.4).
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactNode } from 'react';
|
|
9
|
+
import type { HeatMonthPoint } from '../geometry/heatMonth.js';
|
|
10
|
+
import type { ChartDir } from '../hooks/useRtl.js';
|
|
11
|
+
import type { ChartLabels } from './ChartSurface.js';
|
|
12
|
+
export interface HeatMonthChartProps {
|
|
13
|
+
year: number;
|
|
14
|
+
/** 0-based month. */
|
|
15
|
+
month: number;
|
|
16
|
+
points: readonly HeatMonthPoint[];
|
|
17
|
+
labels: ChartLabels;
|
|
18
|
+
/** First weekday of the row, 0=Sun..6=Sat (locale-aware). Default 0. */
|
|
19
|
+
startWeekday?: number;
|
|
20
|
+
levels?: number;
|
|
21
|
+
cellSize?: number;
|
|
22
|
+
/** Weekday short labels indexed 0=Sun..6=Sat. */
|
|
23
|
+
weekdayLabels?: readonly string[];
|
|
24
|
+
format?: (value: number) => string;
|
|
25
|
+
dir?: ChartDir;
|
|
26
|
+
a11yFallback?: ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function HeatMonthChart({ year, month, points, labels, startWeekday, levels, cellSize, weekdayLabels, format, dir, a11yFallback, className, }: HeatMonthChartProps): import("react").JSX.Element;
|
|
30
|
+
//# sourceMappingURL=HeatMonthChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatMonthChart.d.ts","sourceRoot":"","sources":["../../src/components/HeatMonthChart.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,cAAc,EAAE,CAAC;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAgB,EAChB,MAAU,EACV,QAAa,EACb,aAAgC,EAChC,MAAe,EACf,GAAG,EACH,YAAY,EACZ,SAAS,GACV,EAAE,mBAAmB,+BAwErB"}
|