@sentropic/design-system-svelte 0.34.0 → 0.34.20

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.
Files changed (98) hide show
  1. package/dist/AppHeader.svelte +159 -1
  2. package/dist/AppHeader.svelte.d.ts +18 -1
  3. package/dist/AppHeader.svelte.d.ts.map +1 -1
  4. package/dist/ArcDiagramChart.svelte +380 -0
  5. package/dist/ArcDiagramChart.svelte.d.ts +43 -0
  6. package/dist/ArcDiagramChart.svelte.d.ts.map +1 -0
  7. package/dist/AreaRangeChart.svelte +487 -0
  8. package/dist/AreaRangeChart.svelte.d.ts +38 -0
  9. package/dist/AreaRangeChart.svelte.d.ts.map +1 -0
  10. package/dist/AreaSplineRangeChart.svelte +478 -0
  11. package/dist/AreaSplineRangeChart.svelte.d.ts +37 -0
  12. package/dist/AreaSplineRangeChart.svelte.d.ts.map +1 -0
  13. package/dist/BellCurveChart.svelte +487 -0
  14. package/dist/BellCurveChart.svelte.d.ts +40 -0
  15. package/dist/BellCurveChart.svelte.d.ts.map +1 -0
  16. package/dist/Calendar.svelte +11 -0
  17. package/dist/ChatThread.svelte +32 -1
  18. package/dist/ChatThread.svelte.d.ts +14 -0
  19. package/dist/ChatThread.svelte.d.ts.map +1 -1
  20. package/dist/ColumnPyramidChart.svelte +332 -0
  21. package/dist/ColumnPyramidChart.svelte.d.ts +35 -0
  22. package/dist/ColumnPyramidChart.svelte.d.ts.map +1 -0
  23. package/dist/ColumnRangeChart.svelte +432 -0
  24. package/dist/ColumnRangeChart.svelte.d.ts +42 -0
  25. package/dist/ColumnRangeChart.svelte.d.ts.map +1 -0
  26. package/dist/Combobox.svelte +3 -0
  27. package/dist/ContentSwitcher.svelte +1 -1
  28. package/dist/DataTable.svelte.d.ts +1 -1
  29. package/dist/DatePicker.svelte +3 -0
  30. package/dist/DependencyWheelChart.svelte +413 -0
  31. package/dist/DependencyWheelChart.svelte.d.ts +42 -0
  32. package/dist/DependencyWheelChart.svelte.d.ts.map +1 -0
  33. package/dist/DumbbellChart.svelte +403 -0
  34. package/dist/DumbbellChart.svelte.d.ts +44 -0
  35. package/dist/DumbbellChart.svelte.d.ts.map +1 -0
  36. package/dist/ErrorBarChart.svelte +428 -0
  37. package/dist/ErrorBarChart.svelte.d.ts +40 -0
  38. package/dist/ErrorBarChart.svelte.d.ts.map +1 -0
  39. package/dist/GanttChart.svelte +410 -0
  40. package/dist/GanttChart.svelte.d.ts +39 -0
  41. package/dist/GanttChart.svelte.d.ts.map +1 -0
  42. package/dist/HLCChart.svelte +330 -0
  43. package/dist/HLCChart.svelte.d.ts +32 -0
  44. package/dist/HLCChart.svelte.d.ts.map +1 -0
  45. package/dist/HeikinAshiChart.svelte +365 -0
  46. package/dist/HeikinAshiChart.svelte.d.ts +37 -0
  47. package/dist/HeikinAshiChart.svelte.d.ts.map +1 -0
  48. package/dist/HollowCandlestickChart.svelte +357 -0
  49. package/dist/HollowCandlestickChart.svelte.d.ts +34 -0
  50. package/dist/HollowCandlestickChart.svelte.d.ts.map +1 -0
  51. package/dist/Input.svelte +3 -0
  52. package/dist/ItemChart.svelte +389 -0
  53. package/dist/ItemChart.svelte.d.ts +67 -0
  54. package/dist/ItemChart.svelte.d.ts.map +1 -0
  55. package/dist/LollipopChart.svelte +1 -1
  56. package/dist/MultiSelect.svelte +3 -0
  57. package/dist/NumberInput.svelte +3 -0
  58. package/dist/OHLCChart.svelte +343 -0
  59. package/dist/OHLCChart.svelte.d.ts +33 -0
  60. package/dist/OHLCChart.svelte.d.ts.map +1 -0
  61. package/dist/OrganizationChart.svelte +284 -0
  62. package/dist/OrganizationChart.svelte.d.ts +19 -0
  63. package/dist/OrganizationChart.svelte.d.ts.map +1 -0
  64. package/dist/PasswordInput.svelte +3 -0
  65. package/dist/PolygonChart.svelte +189 -0
  66. package/dist/PolygonChart.svelte.d.ts +17 -0
  67. package/dist/PolygonChart.svelte.d.ts.map +1 -0
  68. package/dist/Search.svelte +7 -5
  69. package/dist/Select.svelte +3 -0
  70. package/dist/StreamgraphChart.svelte +283 -0
  71. package/dist/StreamgraphChart.svelte.d.ts +23 -0
  72. package/dist/StreamgraphChart.svelte.d.ts.map +1 -0
  73. package/dist/StreamingMessage.svelte +44 -2
  74. package/dist/StreamingMessage.svelte.d.ts +18 -1
  75. package/dist/StreamingMessage.svelte.d.ts.map +1 -1
  76. package/dist/TileMapChart.svelte +314 -0
  77. package/dist/TileMapChart.svelte.d.ts +45 -0
  78. package/dist/TileMapChart.svelte.d.ts.map +1 -0
  79. package/dist/TimePicker.svelte +3 -0
  80. package/dist/TimelineChart.svelte +362 -0
  81. package/dist/TimelineChart.svelte.d.ts +22 -0
  82. package/dist/TimelineChart.svelte.d.ts.map +1 -0
  83. package/dist/TreegraphChart.svelte +281 -0
  84. package/dist/TreegraphChart.svelte.d.ts +19 -0
  85. package/dist/TreegraphChart.svelte.d.ts.map +1 -0
  86. package/dist/VariablePieChart.svelte +313 -0
  87. package/dist/VariablePieChart.svelte.d.ts +52 -0
  88. package/dist/VariablePieChart.svelte.d.ts.map +1 -0
  89. package/dist/VennChart.svelte +348 -0
  90. package/dist/VennChart.svelte.d.ts +72 -0
  91. package/dist/VennChart.svelte.d.ts.map +1 -0
  92. package/dist/WordCloudChart.svelte +279 -0
  93. package/dist/WordCloudChart.svelte.d.ts +18 -0
  94. package/dist/WordCloudChart.svelte.d.ts.map +1 -0
  95. package/dist/index.d.ts +48 -0
  96. package/dist/index.d.ts.map +1 -1
  97. package/dist/index.js +24 -0
  98. package/package.json +5 -3
@@ -38,13 +38,30 @@ export type StreamingMessageEvent = {
38
38
  messageId?: string;
39
39
  };
40
40
  export type StreamingMessageMode = "live" | "passive";
41
+ /**
42
+ * Simple data-driven event shape (cross-framework parity with React/Vue
43
+ * ports). Distinguished from the rich event-stream shape by the absence of a
44
+ * `type` discriminant.
45
+ */
46
+ export type StreamingMessageSimpleEvent = {
47
+ id: string;
48
+ label: string;
49
+ text?: string;
50
+ status?: ChatMessageStatus;
51
+ };
41
52
  type StreamingMessageProps = Omit<HTMLAttributes<HTMLElement>, "class" | "children" | "role"> & {
42
53
  role?: ChatMessageRole;
43
54
  status?: ChatMessageStatus;
44
55
  streamId?: string;
45
56
  initialEvents?: StreamingMessageEvent[];
46
- events?: StreamingMessageEvent[];
57
+ events?: StreamingMessageEvent[] | StreamingMessageSimpleEvent[];
47
58
  finalContent?: string;
59
+ /**
60
+ * Plain message body (cross-framework parity with React/Vue ports). When
61
+ * provided, it is used as the rendered content (equivalent to
62
+ * `finalContent`). The canonical event-stream API still works.
63
+ */
64
+ text?: string;
48
65
  mode?: StreamingMessageMode;
49
66
  placeholder?: string;
50
67
  showTrail?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"StreamingMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamingMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAoB,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC9D;IAAE,IAAI,EAAE,qBAAqB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAClF;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAQtD,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgMJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"StreamingMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamingMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAoB,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC9D;IAAE,IAAI,EAAE,qBAAqB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAClF;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD;;;;GAIG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAQF,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,qBAAqB,EAAE,GAAG,2BAA2B,EAAE,CAAC;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyNJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,314 @@
1
+ <script lang="ts" module>
2
+ /**
3
+ * TileMapChart (carte en tuiles / cartogramme « tilemap ») - API canonique
4
+ * (référence Svelte, React/Vue doivent s'aligner).
5
+ *
6
+ * Grille de tuiles carrées posées à des coordonnées (col, row) EXPLICITES
7
+ * (pas une matrice dense : chaque entrée porte sa propre cellule). La couleur
8
+ * de chaque tuile suit une échelle séquentielle de la valeur min→max, reprise
9
+ * de l'approche HeatmapChart (8 tons catégoriels data-categoryN). Un libellé
10
+ * court est posé au centre de chaque tuile. Une légende de gradient affiche le
11
+ * sens min→max.
12
+ *
13
+ * Props obligatoires :
14
+ * data TileMapChartTile[] - {label, col, row, value}
15
+ * label string - aria-label du graphique (role=img)
16
+ *
17
+ * Props optionnelles :
18
+ * width number (défaut 480) - largeur du viewBox en px
19
+ * height number (défaut 360) - hauteur du viewBox en px
20
+ * class string - classe CSS supplémentaire
21
+ *
22
+ * Taille des tuiles : auto selon (colMax, rowMax). Chaque tuile est carrée ;
23
+ * le côté est le minimum entre la largeur disponible / nb colonnes et la
24
+ * hauteur disponible / nb lignes, pour ne jamais déborder.
25
+ *
26
+ * NaN/non-fini : les tuiles dont value est non-finie sont exclues du calcul
27
+ * min/max ET du rendu (Number.isFinite). Une tuile dont col/row est non-fini
28
+ * est ignorée. Tableau vide ou tout-NaN → rendu vide sans crash.
29
+ */
30
+ export type TileMapChartTile = {
31
+ label: string;
32
+ col: number;
33
+ row: number;
34
+ value: number;
35
+ };
36
+ </script>
37
+
38
+ <script lang="ts">
39
+ import ChartDataList from "./ChartDataList.svelte";
40
+
41
+ type TileMapChartProps = {
42
+ data: TileMapChartTile[];
43
+ label: string;
44
+ width?: number;
45
+ height?: number;
46
+ class?: string;
47
+ };
48
+
49
+ let {
50
+ data = [],
51
+ label,
52
+ width = 480,
53
+ height = 360,
54
+ class: className
55
+ }: TileMapChartProps = $props();
56
+
57
+ const MARGIN = { top: 16, right: 16, bottom: 44, left: 16 };
58
+ const TONES = [
59
+ "category1",
60
+ "category2",
61
+ "category3",
62
+ "category4",
63
+ "category5",
64
+ "category6",
65
+ "category7",
66
+ "category8"
67
+ ] as const;
68
+ const GAP = 4;
69
+
70
+ function toneForValue(value: number, min: number, max: number): (typeof TONES)[number] {
71
+ if (!Number.isFinite(value) || max <= min) return "category1";
72
+ const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(((value - min) / (max - min)) * TONES.length)));
73
+ return TONES[index];
74
+ }
75
+
76
+ function formatNumber(value: number): string {
77
+ if (!Number.isFinite(value)) return "0";
78
+ if (Number.isInteger(value)) return String(value);
79
+ return value.toFixed(2).replace(/\.?0+$/, "");
80
+ }
81
+
82
+ let hoveredIndex: number | null = $state(null);
83
+
84
+ const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
85
+ const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
86
+
87
+ const valid = $derived(
88
+ data.filter(
89
+ (tile) => Number.isFinite(tile.col) && Number.isFinite(tile.row) && Number.isFinite(tile.value)
90
+ )
91
+ );
92
+
93
+ const tiles = $derived.by(() => {
94
+ if (valid.length === 0) return [];
95
+
96
+ const cols = Math.max(...valid.map((t) => t.col)) + 1;
97
+ const rows = Math.max(...valid.map((t) => t.row)) + 1;
98
+ const values = valid.map((t) => t.value);
99
+ const min = Math.min(...values);
100
+ const max = Math.max(...values);
101
+
102
+ // tuile carrée, dimensionnée pour tenir dans le plot
103
+ const side = Math.max(Math.min(plotWidth / cols, plotHeight / rows) - GAP, 1);
104
+ // centre la grille dans la zone de plot
105
+ const gridW = cols * (side + GAP) - GAP;
106
+ const gridH = rows * (side + GAP) - GAP;
107
+ const offsetX = MARGIN.left + Math.max((plotWidth - gridW) / 2, 0);
108
+ const offsetY = MARGIN.top + Math.max((plotHeight - gridH) / 2, 0);
109
+
110
+ return valid.map((tile, index) => {
111
+ const x = offsetX + tile.col * (side + GAP);
112
+ const y = offsetY + tile.row * (side + GAP);
113
+ return {
114
+ tile,
115
+ index,
116
+ tone: toneForValue(tile.value, min, max),
117
+ x,
118
+ y,
119
+ side,
120
+ cx: x + side / 2,
121
+ cy: y + side / 2
122
+ };
123
+ });
124
+ });
125
+
126
+ const dataValueItems = $derived(valid.map((tile) => `${tile.label}: ${formatNumber(tile.value)}`));
127
+
128
+ function handleVisualPointerMove(event: PointerEvent) {
129
+ const target = event.target;
130
+ if (!(target instanceof Element)) {
131
+ hoveredIndex = null;
132
+ return;
133
+ }
134
+ const index = Number(target.getAttribute("data-chart-index"));
135
+ hoveredIndex = Number.isInteger(index) ? index : null;
136
+ }
137
+
138
+ const classes = () => ["st-tileMapChart", className].filter(Boolean).join(" ");
139
+ </script>
140
+
141
+ <div class={classes()}>
142
+ <div
143
+ class="st-tileMapChart__visual"
144
+ role="img"
145
+ aria-label={label}
146
+ onpointermove={handleVisualPointerMove}
147
+ onpointerleave={() => (hoveredIndex = null)}
148
+ >
149
+ <svg
150
+ viewBox="0 0 {width} {height}"
151
+ preserveAspectRatio="xMidYMid meet"
152
+ width="100%"
153
+ height="100%"
154
+ focusable="false"
155
+ aria-hidden="true"
156
+ >
157
+ {#each tiles as tile, i (`${tile.tile.label}-${i}`)}
158
+ <g>
159
+ <rect
160
+ class="st-tileMapChart__tile st-tileMapChart__tile--{tile.tone}"
161
+ class:st-tileMapChart__tile--dim={hoveredIndex !== null && hoveredIndex !== i}
162
+ x={tile.x}
163
+ y={tile.y}
164
+ width={tile.side}
165
+ height={tile.side}
166
+ rx="3"
167
+ data-chart-index={i}
168
+ />
169
+ {#if tile.side > 18}
170
+ <text
171
+ class="st-tileMapChart__tileLabel"
172
+ x={tile.cx}
173
+ y={tile.cy}
174
+ text-anchor="middle"
175
+ dominant-baseline="middle"
176
+ pointer-events="none"
177
+ >
178
+ {tile.tile.label}
179
+ </text>
180
+ {/if}
181
+ </g>
182
+ {/each}
183
+ </svg>
184
+ </div>
185
+
186
+ <ChartDataList {label} items={dataValueItems} />
187
+
188
+ {#if hoveredIndex !== null && tiles[hoveredIndex]}
189
+ {@const tile = tiles[hoveredIndex]}
190
+ <div
191
+ class="st-tileMapChart__tooltip"
192
+ role="presentation"
193
+ style="left: {(tile.cx / width) * 100}%; top: {(tile.cy / height) * 100}%"
194
+ >
195
+ <span class="st-tileMapChart__tooltipLabel">{tile.tile.label}</span>
196
+ <span class="st-tileMapChart__tooltipValue">{formatNumber(tile.tile.value)}</span>
197
+ </div>
198
+ {/if}
199
+
200
+ <div class="st-tileMapChart__legend" aria-hidden="true">
201
+ <span class="st-tileMapChart__legendText">Low</span>
202
+ <span class="st-tileMapChart__legendRamp">
203
+ {#each TONES as tone (tone)}
204
+ <span class="st-tileMapChart__legendSwatch st-tileMapChart__legendSwatch--{tone}"></span>
205
+ {/each}
206
+ </span>
207
+ <span class="st-tileMapChart__legendText">High</span>
208
+ </div>
209
+ </div>
210
+
211
+ <style>
212
+ .st-tileMapChart {
213
+ color: var(--st-semantic-text-secondary);
214
+ display: block;
215
+ font-family: inherit;
216
+ max-width: 100%;
217
+ position: relative;
218
+ width: 100%;
219
+ }
220
+
221
+ .st-tileMapChart svg,
222
+ .st-tileMapChart__visual {
223
+ display: block;
224
+ overflow: visible;
225
+ }
226
+
227
+ .st-tileMapChart__tile {
228
+ cursor: pointer;
229
+ stroke: var(--st-semantic-surface-default, Canvas);
230
+ stroke-width: 1;
231
+ transition: opacity 120ms ease;
232
+ }
233
+
234
+ .st-tileMapChart__tile--dim {
235
+ opacity: 0.4;
236
+ }
237
+
238
+ @media (prefers-reduced-motion: reduce) {
239
+ .st-tileMapChart__tile {
240
+ transition: none;
241
+ }
242
+ }
243
+
244
+ .st-tileMapChart__tile--category1,
245
+ .st-tileMapChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
246
+ .st-tileMapChart__tile--category2,
247
+ .st-tileMapChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
248
+ .st-tileMapChart__tile--category3,
249
+ .st-tileMapChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
250
+ .st-tileMapChart__tile--category4,
251
+ .st-tileMapChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
252
+ .st-tileMapChart__tile--category5,
253
+ .st-tileMapChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
254
+ .st-tileMapChart__tile--category6,
255
+ .st-tileMapChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
256
+ .st-tileMapChart__tile--category7,
257
+ .st-tileMapChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
258
+ .st-tileMapChart__tile--category8,
259
+ .st-tileMapChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }
260
+
261
+ .st-tileMapChart__tileLabel {
262
+ fill: var(--st-semantic-text-inverse);
263
+ font-size: 0.6875rem;
264
+ font-weight: 600;
265
+ }
266
+
267
+ .st-tileMapChart__legend {
268
+ align-items: center;
269
+ display: flex;
270
+ gap: var(--st-spacing-2, 0.5rem);
271
+ margin-top: var(--st-spacing-2, 0.5rem);
272
+ }
273
+
274
+ .st-tileMapChart__legendRamp {
275
+ display: inline-grid;
276
+ grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
277
+ min-width: 8rem;
278
+ }
279
+
280
+ .st-tileMapChart__legendSwatch {
281
+ display: block;
282
+ height: 0.5rem;
283
+ }
284
+
285
+ .st-tileMapChart__legendText {
286
+ color: var(--st-semantic-text-secondary);
287
+ font-size: 0.75rem;
288
+ }
289
+
290
+ .st-tileMapChart__tooltip {
291
+ background: var(--st-semantic-surface-inverse);
292
+ border-radius: var(--st-radius-sm, 0.25rem);
293
+ color: var(--st-semantic-text-inverse);
294
+ display: inline-flex;
295
+ flex-direction: column;
296
+ font-size: 0.75rem;
297
+ gap: 0.125rem;
298
+ line-height: 1.2;
299
+ padding: 0.375rem 0.5rem;
300
+ pointer-events: none;
301
+ position: absolute;
302
+ transform: translate(-50%, -115%);
303
+ white-space: nowrap;
304
+ z-index: 1;
305
+ }
306
+
307
+ .st-tileMapChart__tooltipLabel {
308
+ font-weight: 600;
309
+ }
310
+
311
+ .st-tileMapChart__tooltipValue {
312
+ opacity: 0.85;
313
+ }
314
+ </style>
@@ -0,0 +1,45 @@
1
+ /**
2
+ * TileMapChart (carte en tuiles / cartogramme « tilemap ») - API canonique
3
+ * (référence Svelte, React/Vue doivent s'aligner).
4
+ *
5
+ * Grille de tuiles carrées posées à des coordonnées (col, row) EXPLICITES
6
+ * (pas une matrice dense : chaque entrée porte sa propre cellule). La couleur
7
+ * de chaque tuile suit une échelle séquentielle de la valeur min→max, reprise
8
+ * de l'approche HeatmapChart (8 tons catégoriels data-categoryN). Un libellé
9
+ * court est posé au centre de chaque tuile. Une légende de gradient affiche le
10
+ * sens min→max.
11
+ *
12
+ * Props obligatoires :
13
+ * data TileMapChartTile[] - {label, col, row, value}
14
+ * label string - aria-label du graphique (role=img)
15
+ *
16
+ * Props optionnelles :
17
+ * width number (défaut 480) - largeur du viewBox en px
18
+ * height number (défaut 360) - hauteur du viewBox en px
19
+ * class string - classe CSS supplémentaire
20
+ *
21
+ * Taille des tuiles : auto selon (colMax, rowMax). Chaque tuile est carrée ;
22
+ * le côté est le minimum entre la largeur disponible / nb colonnes et la
23
+ * hauteur disponible / nb lignes, pour ne jamais déborder.
24
+ *
25
+ * NaN/non-fini : les tuiles dont value est non-finie sont exclues du calcul
26
+ * min/max ET du rendu (Number.isFinite). Une tuile dont col/row est non-fini
27
+ * est ignorée. Tableau vide ou tout-NaN → rendu vide sans crash.
28
+ */
29
+ export type TileMapChartTile = {
30
+ label: string;
31
+ col: number;
32
+ row: number;
33
+ value: number;
34
+ };
35
+ type TileMapChartProps = {
36
+ data: TileMapChartTile[];
37
+ label: string;
38
+ width?: number;
39
+ height?: number;
40
+ class?: string;
41
+ };
42
+ declare const TileMapChart: import("svelte").Component<TileMapChartProps, {}, "">;
43
+ type TileMapChart = ReturnType<typeof TileMapChart>;
44
+ export default TileMapChart;
45
+ //# sourceMappingURL=TileMapChart.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TileMapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TileMapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4IJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
@@ -375,14 +375,17 @@
375
375
 
376
376
  .st-timepicker--sm {
377
377
  min-height: var(--st-component-control-smHeight, 2rem);
378
+ font-size: 0.8125rem;
378
379
  }
379
380
 
380
381
  .st-timepicker--md {
381
382
  min-height: var(--st-component-control-mdHeight, 2.5rem);
383
+ font-size: 0.875rem;
382
384
  }
383
385
 
384
386
  .st-timepicker--lg {
385
387
  min-height: var(--st-component-control-lgHeight, 3rem);
388
+ font-size: 1rem;
386
389
  }
387
390
 
388
391
  .st-timepicker:hover:not(:has(input:disabled)) {