@sproutsocial/seeds-react-data-viz 0.19.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/bar/index.d.mts +20 -4
  2. package/dist/bar/index.d.ts +20 -4
  3. package/dist/bar/index.js +56 -24
  4. package/dist/bar/index.js.map +1 -1
  5. package/dist/charts.css +583 -0
  6. package/dist/{chunk-DLO4WZLT.js → chunk-27M4FDNK.js} +14 -14
  7. package/dist/chunk-27M4FDNK.js.map +1 -0
  8. package/dist/chunk-46L4YBLC.js +544 -0
  9. package/dist/chunk-46L4YBLC.js.map +1 -0
  10. package/dist/{chunk-4IOYAUAK.js → chunk-XYE6O77Z.js} +3 -3
  11. package/dist/{chunk-4IOYAUAK.js.map → chunk-XYE6O77Z.js.map} +1 -1
  12. package/dist/donut/index.d.mts +16 -5
  13. package/dist/donut/index.d.ts +16 -5
  14. package/dist/donut/index.js +22 -16
  15. package/dist/donut/index.js.map +1 -1
  16. package/dist/esm/bar/index.js +44 -12
  17. package/dist/esm/bar/index.js.map +1 -1
  18. package/dist/esm/{chunk-J5QE7VCW.js → chunk-KMFRRUTY.js} +2 -2
  19. package/dist/esm/{chunk-U6ZOSXK7.js → chunk-QSSYSKRP.js} +2 -2
  20. package/dist/esm/chunk-QSSYSKRP.js.map +1 -0
  21. package/dist/esm/chunk-XEKQTAUH.js +544 -0
  22. package/dist/esm/chunk-XEKQTAUH.js.map +1 -0
  23. package/dist/esm/donut/index.js +19 -13
  24. package/dist/esm/donut/index.js.map +1 -1
  25. package/dist/esm/index.js +536 -134
  26. package/dist/esm/index.js.map +1 -1
  27. package/dist/esm/line-area/index.js +36 -13
  28. package/dist/esm/line-area/index.js.map +1 -1
  29. package/dist/esm/sparkline/index.js +2 -2
  30. package/dist/index.js +497 -95
  31. package/dist/index.js.map +1 -1
  32. package/dist/interactions-DoWoL7bu.d.mts +29 -0
  33. package/dist/interactions-DoWoL7bu.d.ts +29 -0
  34. package/dist/line-area/index.d.mts +17 -4
  35. package/dist/line-area/index.d.ts +17 -4
  36. package/dist/line-area/index.js +40 -17
  37. package/dist/line-area/index.js.map +1 -1
  38. package/dist/sparkline/index.js +4 -4
  39. package/package.json +16 -11
  40. package/dist/chunk-DLO4WZLT.js.map +0 -1
  41. package/dist/chunk-WEKDYQ4T.js +0 -968
  42. package/dist/chunk-WEKDYQ4T.js.map +0 -1
  43. package/dist/esm/chunk-U6ZOSXK7.js.map +0 -1
  44. package/dist/esm/chunk-Z4LOM4OZ.js +0 -968
  45. package/dist/esm/chunk-Z4LOM4OZ.js.map +0 -1
  46. /package/dist/esm/{chunk-J5QE7VCW.js.map → chunk-KMFRRUTY.js.map} +0 -0
@@ -0,0 +1,583 @@
1
+ /**
2
+ * Seeds Design System - Combined V2 Chart CSS
3
+ * Auto-generated — do not edit directly.
4
+ *
5
+ * Import once to style all v2 charts instead of importing each chart
6
+ * family's CSS file separately:
7
+ *
8
+ * import "@sproutsocial/seeds-react-data-viz/charts.css";
9
+ *
10
+ * @see https://github.com/sproutsocial/seeds
11
+ */
12
+
13
+ /**
14
+ * Seeds v2 chart styles — shared foundation.
15
+ *
16
+ * This is the genuinely-shared layer of the v2 chart styling migration: the
17
+ * .seeds-chart base rules, the per-series color fallback mechanism, the
18
+ * clickable-cursor rules, and the global (unscoped) tooltip overrides. It is a
19
+ * static port of the shared pieces of src/styles/chartStyles.ts
20
+ * (baseChartStyles + GlobalChartStyleOverrides), following the sparkline.css
21
+ * pattern. Consumers import this once:
22
+ *
23
+ * import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
24
+ *
25
+ * Two kinds of layer live here. (1) The .seeds-chart base above. (2) The shared
26
+ * cross-family .seeds-chart-time-series layer below — used by every v2
27
+ * time-series family (bar, line-area), so it lives here once rather than being
28
+ * duplicated in each family .css. Truly per-family classes do NOT live here:
29
+ * each chart family (CE-170 bar, CE-165 line-area, CE-166 donut) owns and ships
30
+ * its own .css file with its .seeds-chart-<family> rules (e.g. .seeds-chart-bar
31
+ * hover-dimming) and passes its own class chain into getChartContainerProps — so
32
+ * those PRs never collide on this file.
33
+ *
34
+ * Theme values reference the DS's already-emitted global CSS variables directly
35
+ * (var(--color-*) / var(--font-*)) — the same surface other Seeds component CSS
36
+ * uses — so light/dark follows the theme stylesheet with zero inline JS. The
37
+ * dynamic per-chart pieces set inline by getChartContainerProps
38
+ * (src/charts/shared/chartContainer.ts) are the shared container mechanism the
39
+ * family files build on:
40
+ *
41
+ * Explicit per-series color override -> var(--highcharts-color-N) (set inline)
42
+ * $hasOnClick -> [data-has-on-click] attribute
43
+ * $patterns -> [data-dashed-series~="N"] attribute
44
+ *
45
+ * .seeds-chart sets --highcharts-color-N to the DS data-viz palette variable
46
+ * (var(--color-dataviz-list-N), emitted by @sproutsocial/seeds-react-theme's
47
+ * theme.css/theme-all.css — light/dark scoped, since the two modes pick
48
+ * different underlying swatches per index) as its default. An explicit
49
+ * per-series override is inlined by getChartContainerProps directly on the
50
+ * same element, which — same property, same element — wins over this class
51
+ * rule regardless of specificity, so the override still takes precedence.
52
+ * Defining the custom property itself (rather than only referencing the DS
53
+ * variable inside a var() fallback on fill/stroke) matters here: Highcharts
54
+ * ships its own default .highcharts-color-N colors (imported via
55
+ * highcharts/css/highcharts.css), and when var(--highcharts-color-N, ...)
56
+ * fails to resolve at all, the declaration is invalid at computed-value time
57
+ * and the cascade falls through to Highcharts' own default — silently
58
+ * dropping to Highcharts' palette instead of the DS one. The enumeration runs
59
+ * 0..19, matching the 20-entry DATAVIZ_COLORS_LIST / --color-dataviz-list-0..19.
60
+ * Series beyond 20 with an explicit color get no static selector — the same
61
+ * behaviour as the old JS fallback returning undefined.
62
+ *
63
+ * This file is additive: chartStyles.ts still serves v1 (and the not-yet-
64
+ * migrated v2 wrappers). The duplication is deliberate and temporary.
65
+ */
66
+
67
+ /* =========================================================================
68
+ * baseChartStyles -> .seeds-chart
69
+ * ========================================================================= */
70
+
71
+ .seeds-chart {
72
+ --highcharts-background-color: var(--color-container-bg-base);
73
+
74
+ --highcharts-color-0: var(--color-dataviz-list-0);
75
+ --highcharts-color-1: var(--color-dataviz-list-1);
76
+ --highcharts-color-2: var(--color-dataviz-list-2);
77
+ --highcharts-color-3: var(--color-dataviz-list-3);
78
+ --highcharts-color-4: var(--color-dataviz-list-4);
79
+ --highcharts-color-5: var(--color-dataviz-list-5);
80
+ --highcharts-color-6: var(--color-dataviz-list-6);
81
+ --highcharts-color-7: var(--color-dataviz-list-7);
82
+ --highcharts-color-8: var(--color-dataviz-list-8);
83
+ --highcharts-color-9: var(--color-dataviz-list-9);
84
+ --highcharts-color-10: var(--color-dataviz-list-10);
85
+ --highcharts-color-11: var(--color-dataviz-list-11);
86
+ --highcharts-color-12: var(--color-dataviz-list-12);
87
+ --highcharts-color-13: var(--color-dataviz-list-13);
88
+ --highcharts-color-14: var(--color-dataviz-list-14);
89
+ --highcharts-color-15: var(--color-dataviz-list-15);
90
+ --highcharts-color-16: var(--color-dataviz-list-16);
91
+ --highcharts-color-17: var(--color-dataviz-list-17);
92
+ --highcharts-color-18: var(--color-dataviz-list-18);
93
+ --highcharts-color-19: var(--color-dataviz-list-19);
94
+ }
95
+
96
+ /* set overall chart background color */
97
+ .seeds-chart .highcharts-background {
98
+ fill: var(--color-container-bg-base);
99
+ }
100
+
101
+ .seeds-chart g.highcharts-annotation-label {
102
+ display: none;
103
+ }
104
+
105
+ .seeds-chart div.highcharts-annotation-label {
106
+ top: 0 !important;
107
+ transform: translateX(-50%); /* centers the label on the targeted axis point */
108
+ pointer-events: none; /* prevents tooltip hover from being interrupted by this element since it renders after on the dom */
109
+ }
110
+
111
+ /* map colors to custom assigned colors or fall back to the default data viz
112
+ rotation set on .seeds-chart above. Highcharts already accounts for 10
113
+ series; enumerate through 19 (DATAVIZ_COLORS_LIST / --color-dataviz-list-*
114
+ length). */
115
+ .seeds-chart .highcharts-color-0 {
116
+ color: var(--highcharts-color-0);
117
+ stroke: var(--highcharts-color-0);
118
+ fill: var(--highcharts-color-0);
119
+ }
120
+ .seeds-chart .highcharts-color-1 {
121
+ color: var(--highcharts-color-1);
122
+ stroke: var(--highcharts-color-1);
123
+ fill: var(--highcharts-color-1);
124
+ }
125
+ .seeds-chart .highcharts-color-2 {
126
+ color: var(--highcharts-color-2);
127
+ stroke: var(--highcharts-color-2);
128
+ fill: var(--highcharts-color-2);
129
+ }
130
+ .seeds-chart .highcharts-color-3 {
131
+ color: var(--highcharts-color-3);
132
+ stroke: var(--highcharts-color-3);
133
+ fill: var(--highcharts-color-3);
134
+ }
135
+ .seeds-chart .highcharts-color-4 {
136
+ color: var(--highcharts-color-4);
137
+ stroke: var(--highcharts-color-4);
138
+ fill: var(--highcharts-color-4);
139
+ }
140
+ .seeds-chart .highcharts-color-5 {
141
+ color: var(--highcharts-color-5);
142
+ stroke: var(--highcharts-color-5);
143
+ fill: var(--highcharts-color-5);
144
+ }
145
+ .seeds-chart .highcharts-color-6 {
146
+ color: var(--highcharts-color-6);
147
+ stroke: var(--highcharts-color-6);
148
+ fill: var(--highcharts-color-6);
149
+ }
150
+ .seeds-chart .highcharts-color-7 {
151
+ color: var(--highcharts-color-7);
152
+ stroke: var(--highcharts-color-7);
153
+ fill: var(--highcharts-color-7);
154
+ }
155
+ .seeds-chart .highcharts-color-8 {
156
+ color: var(--highcharts-color-8);
157
+ stroke: var(--highcharts-color-8);
158
+ fill: var(--highcharts-color-8);
159
+ }
160
+ .seeds-chart .highcharts-color-9 {
161
+ color: var(--highcharts-color-9);
162
+ stroke: var(--highcharts-color-9);
163
+ fill: var(--highcharts-color-9);
164
+ }
165
+ .seeds-chart .highcharts-color-10 {
166
+ color: var(--highcharts-color-10);
167
+ stroke: var(--highcharts-color-10);
168
+ fill: var(--highcharts-color-10);
169
+ }
170
+ .seeds-chart .highcharts-color-11 {
171
+ color: var(--highcharts-color-11);
172
+ stroke: var(--highcharts-color-11);
173
+ fill: var(--highcharts-color-11);
174
+ }
175
+ .seeds-chart .highcharts-color-12 {
176
+ color: var(--highcharts-color-12);
177
+ stroke: var(--highcharts-color-12);
178
+ fill: var(--highcharts-color-12);
179
+ }
180
+ .seeds-chart .highcharts-color-13 {
181
+ color: var(--highcharts-color-13);
182
+ stroke: var(--highcharts-color-13);
183
+ fill: var(--highcharts-color-13);
184
+ }
185
+ .seeds-chart .highcharts-color-14 {
186
+ color: var(--highcharts-color-14);
187
+ stroke: var(--highcharts-color-14);
188
+ fill: var(--highcharts-color-14);
189
+ }
190
+ .seeds-chart .highcharts-color-15 {
191
+ color: var(--highcharts-color-15);
192
+ stroke: var(--highcharts-color-15);
193
+ fill: var(--highcharts-color-15);
194
+ }
195
+ .seeds-chart .highcharts-color-16 {
196
+ color: var(--highcharts-color-16);
197
+ stroke: var(--highcharts-color-16);
198
+ fill: var(--highcharts-color-16);
199
+ }
200
+ .seeds-chart .highcharts-color-17 {
201
+ color: var(--highcharts-color-17);
202
+ stroke: var(--highcharts-color-17);
203
+ fill: var(--highcharts-color-17);
204
+ }
205
+ .seeds-chart .highcharts-color-18 {
206
+ color: var(--highcharts-color-18);
207
+ stroke: var(--highcharts-color-18);
208
+ fill: var(--highcharts-color-18);
209
+ }
210
+ .seeds-chart .highcharts-color-19 {
211
+ color: var(--highcharts-color-19);
212
+ stroke: var(--highcharts-color-19);
213
+ fill: var(--highcharts-color-19);
214
+ }
215
+
216
+ /* =========================================================================
217
+ * $hasOnClick -> [data-has-on-click]
218
+ * ========================================================================= */
219
+
220
+ /* apply cursor pointer when click functionality is turned on */
221
+ .seeds-chart[data-has-on-click] .highcharts-series,
222
+ .seeds-chart[data-has-on-click] .highcharts-point {
223
+ cursor: pointer;
224
+ }
225
+ .seeds-chart[data-has-on-click] .highcharts-plot-background,
226
+ .seeds-chart[data-has-on-click] .highcharts-crosshair,
227
+ .seeds-chart[data-has-on-click] .highcharts-grid-line {
228
+ fill: transparent;
229
+ cursor: pointer;
230
+ }
231
+
232
+ /* =========================================================================
233
+ * GlobalChartStyleOverrides -> global (unscoped) rules
234
+ *
235
+ * These can't override Highcharts defaults when scoped, so they stay global.
236
+ * ========================================================================= */
237
+
238
+ .highcharts-tooltip-container {
239
+ z-index: 7 !important;
240
+ }
241
+ .highcharts-tooltip-box {
242
+ fill: transparent !important;
243
+ }
244
+
245
+ /* =========================================================================
246
+ * ChartRenderer legend wrapper spacing (shared across all v2 families)
247
+ * ========================================================================= */
248
+
249
+ /* legend wrapper top margin — replaces the former Box mt={350} / mt-350 utility */
250
+ .seeds-chart-legend {
251
+ margin-top: var(--space-350);
252
+ }
253
+
254
+ /* =========================================================================
255
+ * shared cross-family time-series layer -> .seeds-chart-time-series
256
+ *
257
+ * Used by every v2 time-series family (bar, line-area); lives here rather than
258
+ * in a family .css so families reuse rather than duplicate it. crosshair,
259
+ * grid/axis lines, ticks, the zero line, the hover opacity guard, and the v2
260
+ * SVG axis-label typography (v2 renders styledMode SVG text/tspan, not v1 HTML
261
+ * spans — so these are the axisLabelV2Styles rules, not v1's).
262
+ * ========================================================================= */
263
+
264
+ /* vertical crosshair */
265
+ .seeds-chart-time-series .highcharts-crosshair {
266
+ stroke: var(--color-container-border-decorative-neutral);
267
+ stroke-width: 1;
268
+ }
269
+
270
+ /* axis and gridlines */
271
+ .seeds-chart-time-series .highcharts-grid-line,
272
+ .seeds-chart-time-series .highcharts-axis-line {
273
+ stroke: var(--color-container-border-base);
274
+ }
275
+
276
+ .seeds-chart-time-series .highcharts-tick {
277
+ stroke: none;
278
+ }
279
+
280
+ /* don't drop opacity when another series is hovered */
281
+ .seeds-chart-time-series .highcharts-series-inactive {
282
+ opacity: 1;
283
+ }
284
+
285
+ .seeds-chart-time-series path.highcharts-plot-line.y-axis-zero-line {
286
+ stroke: var(--color-container-border-decorative-neutral);
287
+ }
288
+
289
+ /* v2 SVG axis labels (styledMode, useHTML: false). fill is the SVG text color;
290
+ color has no effect. */
291
+ .seeds-chart-time-series .highcharts-xaxis-labels text,
292
+ .seeds-chart-time-series .highcharts-yaxis-labels text {
293
+ font-family: var(--font-family);
294
+ font-size: var(--font-size-100);
295
+ line-height: var(--line-height-100);
296
+ font-weight: var(--font-weight-normal);
297
+ fill: var(--color-text-subtext);
298
+ }
299
+
300
+ /* two-line stacked datetime label: the boundary token is an
301
+ hc-axis-label-secondary tspan on a second line, rendered semibold */
302
+ .seeds-chart-time-series
303
+ .highcharts-xaxis-labels
304
+ text
305
+ tspan.hc-axis-label-secondary {
306
+ font-weight: var(--font-weight-semibold);
307
+ }
308
+
309
+ /**
310
+ * Seeds BarChart per-family styles.
311
+ *
312
+ * Consumers import this alongside the shared foundation stylesheet:
313
+ *
314
+ * import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
315
+ * import "@sproutsocial/seeds-react-data-viz/bar.css";
316
+ *
317
+ * chart-styles.css owns the shared .seeds-chart layer (background,
318
+ * annotation-label rules, the per-series .highcharts-color-0..19 palette
319
+ * fallback, the [data-has-on-click] cursor rules, the global tooltip overrides,
320
+ * and the .seeds-chart-legend spacing) AND the shared cross-family
321
+ * .seeds-chart-time-series layer (crosshair, grid/axis lines, ticks, zero line,
322
+ * hover opacity guard, and the v2 SVG axis-label typography) that line-area also
323
+ * uses. This file owns ONLY the truly bar-specific .seeds-chart-bar block — it
324
+ * deliberately does not repeat anything chart-styles.css already ships.
325
+ *
326
+ * Static theme values reference the DS token CSS variables directly
327
+ * (var(--color-*)) — the same tokens every other Seeds component CSS uses,
328
+ * emitted by seeds-react-theme and provided at runtime by the theme provider —
329
+ * so light/dark follows automatically. Ported from the v1 bar hover-dimming
330
+ * block; v1 chartStyles.ts stays in place for the v1 wrappers.
331
+ */
332
+
333
+ /* =========================================================================
334
+ * bar family -> .seeds-chart-bar
335
+ *
336
+ * hover-dimming: when the chart container is hovered, dim all bars, then
337
+ * restore opacity for the hovered bar(s) — flagged with the bar-point-hover
338
+ * class by the adapter — so the non-hovered bars fade out.
339
+ * ========================================================================= */
340
+
341
+ .seeds-chart-bar .highcharts-container:hover .highcharts-point {
342
+ fill-opacity: 0.3;
343
+ }
344
+
345
+ .seeds-chart-bar .highcharts-point.bar-point-hover {
346
+ fill-opacity: 1 !important;
347
+ }
348
+
349
+ /**
350
+ * Seeds LineAreaChart per-family styles.
351
+ *
352
+ * Consumers import this alongside the shared foundation stylesheet:
353
+ *
354
+ * import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
355
+ * import "@sproutsocial/seeds-react-data-viz/line-area.css";
356
+ *
357
+ * chart-styles.css owns the shared .seeds-chart layer (background,
358
+ * annotation-label rules, the per-series .highcharts-color-0..19 palette
359
+ * fallback, the [data-has-on-click] cursor rules, the global tooltip overrides,
360
+ * and the .seeds-chart-legend spacing) AND the shared cross-family
361
+ * .seeds-chart-time-series layer (crosshair, grid/axis lines, ticks, zero line,
362
+ * hover opacity guard, and the v2 SVG axis-label typography) that bar also uses.
363
+ * This file owns ONLY the line/area-specific .seeds-chart-line and
364
+ * .seeds-chart-area blocks — it deliberately does not repeat anything
365
+ * chart-styles.css already ships.
366
+ *
367
+ * Static theme values reference the DS token CSS variables directly
368
+ * (var(--color-*)) — the same tokens every other Seeds component CSS uses,
369
+ * emitted by seeds-react-theme and provided at runtime by the theme provider —
370
+ * so light/dark follows automatically. Ported from the v1 styled-components
371
+ * lineChartStyles / areaChartStyles in src/styles/chartStyles.ts (which stays,
372
+ * still serving v1).
373
+ */
374
+
375
+ /* =========================================================================
376
+ * lineChartStyles -> .seeds-chart-line
377
+ * ========================================================================= */
378
+
379
+ .seeds-chart-line .highcharts-graph {
380
+ stroke-width: 3;
381
+ }
382
+
383
+ /* Dashed series. v1 set stroke-dasharray per index when patterns[i] === "dashed";
384
+ the container now emits data-dashed-series="<space-separated indices>", so a
385
+ [data-dashed-series~="N"] match dashes .highcharts-series-N. Highcharts accounts
386
+ for 10 series; enumerate 0..19 to match the 20-entry DATAVIZ palette. */
387
+ .seeds-chart-line[data-dashed-series~="0"] .highcharts-series-0 {
388
+ stroke-dasharray: 2 8;
389
+ }
390
+ .seeds-chart-line[data-dashed-series~="1"] .highcharts-series-1 {
391
+ stroke-dasharray: 2 8;
392
+ }
393
+ .seeds-chart-line[data-dashed-series~="2"] .highcharts-series-2 {
394
+ stroke-dasharray: 2 8;
395
+ }
396
+ .seeds-chart-line[data-dashed-series~="3"] .highcharts-series-3 {
397
+ stroke-dasharray: 2 8;
398
+ }
399
+ .seeds-chart-line[data-dashed-series~="4"] .highcharts-series-4 {
400
+ stroke-dasharray: 2 8;
401
+ }
402
+ .seeds-chart-line[data-dashed-series~="5"] .highcharts-series-5 {
403
+ stroke-dasharray: 2 8;
404
+ }
405
+ .seeds-chart-line[data-dashed-series~="6"] .highcharts-series-6 {
406
+ stroke-dasharray: 2 8;
407
+ }
408
+ .seeds-chart-line[data-dashed-series~="7"] .highcharts-series-7 {
409
+ stroke-dasharray: 2 8;
410
+ }
411
+ .seeds-chart-line[data-dashed-series~="8"] .highcharts-series-8 {
412
+ stroke-dasharray: 2 8;
413
+ }
414
+ .seeds-chart-line[data-dashed-series~="9"] .highcharts-series-9 {
415
+ stroke-dasharray: 2 8;
416
+ }
417
+ .seeds-chart-line[data-dashed-series~="10"] .highcharts-series-10 {
418
+ stroke-dasharray: 2 8;
419
+ }
420
+ .seeds-chart-line[data-dashed-series~="11"] .highcharts-series-11 {
421
+ stroke-dasharray: 2 8;
422
+ }
423
+ .seeds-chart-line[data-dashed-series~="12"] .highcharts-series-12 {
424
+ stroke-dasharray: 2 8;
425
+ }
426
+ .seeds-chart-line[data-dashed-series~="13"] .highcharts-series-13 {
427
+ stroke-dasharray: 2 8;
428
+ }
429
+ .seeds-chart-line[data-dashed-series~="14"] .highcharts-series-14 {
430
+ stroke-dasharray: 2 8;
431
+ }
432
+ .seeds-chart-line[data-dashed-series~="15"] .highcharts-series-15 {
433
+ stroke-dasharray: 2 8;
434
+ }
435
+ .seeds-chart-line[data-dashed-series~="16"] .highcharts-series-16 {
436
+ stroke-dasharray: 2 8;
437
+ }
438
+ .seeds-chart-line[data-dashed-series~="17"] .highcharts-series-17 {
439
+ stroke-dasharray: 2 8;
440
+ }
441
+ .seeds-chart-line[data-dashed-series~="18"] .highcharts-series-18 {
442
+ stroke-dasharray: 2 8;
443
+ }
444
+ .seeds-chart-line[data-dashed-series~="19"] .highcharts-series-19 {
445
+ stroke-dasharray: 2 8;
446
+ }
447
+
448
+ /* =========================================================================
449
+ * areaChartStyles -> .seeds-chart-area
450
+ * ========================================================================= */
451
+
452
+ /* no stroke for the line part of each area */
453
+ .seeds-chart-area .highcharts-graph {
454
+ stroke-width: 0;
455
+ }
456
+
457
+ /* fill areas to full opacity */
458
+ .seeds-chart-area .highcharts-area {
459
+ fill-opacity: 1;
460
+ }
461
+
462
+ /**
463
+ * Seeds DonutChart family styles.
464
+ *
465
+ * The donut-specific layer on top of the shared `chart-styles.css` foundation
466
+ * (CE-164). The base rules — the per-series color custom-property fill (default
467
+ * `--highcharts-color-N` resolves to the DS data-viz palette, light/dark-correct;
468
+ * an explicit consumer color overrides it), the chart background, annotation
469
+ * labels, and the clickable-cursor rules — live in `chart-styles.css` and are
470
+ * shared across every v2 family. This file adds only the pie rules unique to
471
+ * the donut, scoped under `.seeds-chart-donut`.
472
+ *
473
+ * Consumers import BOTH stylesheets once (the component never self-imports):
474
+ *
475
+ * import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
476
+ * import "@sproutsocial/seeds-react-data-viz/donut.css";
477
+ *
478
+ * These rules are ported verbatim from the former `donutChartStyles`
479
+ * (chartStyles.ts) and the inline point-inactive block, so the output stays
480
+ * pixel-identical. (v1 still consumes those styled-components blocks — do not
481
+ * remove them.)
482
+ */
483
+
484
+ /* Remove 250ms fade in/out when hovering over different donut chart slices. */
485
+ .seeds-chart-donut .highcharts-point {
486
+ transition: opacity 0s;
487
+ }
488
+
489
+ /* Remove stroke on donut slices. */
490
+ .seeds-chart-donut .highcharts-pie-series .highcharts-point {
491
+ stroke: none;
492
+ }
493
+
494
+ /* Don't reduce opacity when hovering (ported verbatim — fill-opacity: none is
495
+ an invalid value and effectively a no-op, kept for pixel-identical parity). */
496
+ .seeds-chart-donut .highcharts-point-hover {
497
+ fill-opacity: none;
498
+ }
499
+
500
+ /* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to all pie
501
+ points except the hovered one. In styledMode, opacity is CSS-only
502
+ (JS plotOptions.states.inactive.opacity is ignored). */
503
+ .seeds-chart-donut .highcharts-pie-series .highcharts-point-inactive {
504
+ opacity: 0.3;
505
+ transition: opacity 0s;
506
+ }
507
+
508
+ /**
509
+ * Seeds SparklineChart styles.
510
+ *
511
+ * Unlike the other seeds-react-data-viz charts (which inject styles at runtime
512
+ * via styled-components), SparklineChart ships its styling as this plain CSS
513
+ * file. Consumers must import it once:
514
+ *
515
+ * import "@sproutsocial/seeds-react-data-viz/sparkline.css";
516
+ *
517
+ * The single trend color is provided by the component as the
518
+ * `--seeds-sparkline-color` custom property (set inline from the JS theme, so it
519
+ * follows light/dark without depending on the theme CSS-variable stylesheet).
520
+ * Size the chart by passing Tailwind utilities (or any class names) via
521
+ * `className` — the defaults below are overridable.
522
+ */
523
+
524
+ .seeds-sparkline {
525
+ /* Compact inline micro-chart by default (matching the Highcharts sparkline
526
+ demo). Reach for the line/bar chart families when a full-size chart is
527
+ needed; override these with `className` for anything in between. */
528
+ display: inline-block;
529
+ width: 120px;
530
+ height: 24px;
531
+ vertical-align: middle;
532
+ /* Safety net: a chart that mis-measures its container never spills past the
533
+ sized wrapper. */
534
+ overflow: hidden;
535
+ }
536
+
537
+ /* highcharts-react-official renders the chart into a bare <div> with no
538
+ intrinsic size, and Highcharts measures that element to size the chart. Left
539
+ at its default `height: auto` the measured height collapses to 0, so
540
+ Highcharts falls back to its built-in 400px default and overflows the
541
+ wrapper. Force the render container (and the chart's own inner container +
542
+ root svg) to fill the sized `.seeds-sparkline` wrapper so Highcharts measures
543
+ a concrete height instead. */
544
+ .seeds-sparkline > div,
545
+ .seeds-sparkline .highcharts-container,
546
+ .seeds-sparkline .highcharts-root {
547
+ width: 100%;
548
+ height: 100%;
549
+ }
550
+
551
+ /* A sparkline is a decorative overlay — no chart/plot background or border, so
552
+ it sits transparently on any surface. */
553
+ .seeds-sparkline .highcharts-background,
554
+ .seeds-sparkline .highcharts-plot-background {
555
+ fill: transparent;
556
+ }
557
+
558
+ .seeds-sparkline .highcharts-plot-border,
559
+ .seeds-sparkline .highcharts-plot-line {
560
+ stroke: none;
561
+ }
562
+
563
+ /* Highcharts renders in styledMode, so fills/strokes come from CSS. Everything
564
+ in a sparkline is the one trend color. Rounded joins/caps give the line a
565
+ slightly smoother, softer read. */
566
+ .seeds-sparkline .highcharts-graph {
567
+ stroke: var(--seeds-sparkline-color);
568
+ stroke-width: 2px;
569
+ stroke-linejoin: round;
570
+ stroke-linecap: round;
571
+ }
572
+
573
+ /* Bars/points carry no border — the fill alone is the trend color. */
574
+ .seeds-sparkline .highcharts-point {
575
+ fill: var(--seeds-sparkline-color);
576
+ stroke: none;
577
+ stroke-width: 0;
578
+ }
579
+
580
+ /* Decorative micro-chart: no data-point markers on the line. */
581
+ .seeds-sparkline .highcharts-markers {
582
+ display: none;
583
+ }
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- var _chunkWEKDYQ4Tjs = require('./chunk-WEKDYQ4T.js');
13
+ var _chunk46L4YBLCjs = require('./chunk-46L4YBLC.js');
14
14
 
15
15
  // src/charts/shared/chartBase.tsx
16
16
  var _highcharts = require('highcharts'); var _highcharts2 = _interopRequireDefault(_highcharts);
@@ -194,11 +194,11 @@ function AnnotationHeader({
194
194
  const hasIconOrTitle = Boolean(icon || title);
195
195
  if (!hasIconOrTitle && !description) return null;
196
196
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
197
- hasIconOrTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
197
+ hasIconOrTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
198
198
  icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: icon, size: "mini", color: "icon.base" }) : null,
199
199
  title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontSize: 200, children: title }) : null
200
200
  ] }) }) : null,
201
- description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
201
+ description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
202
202
  ] });
203
203
  }
204
204
  function DefaultChartTooltip({
@@ -216,7 +216,7 @@ function DefaultChartTooltip({
216
216
  const rows = data.map((d) => {
217
217
  const formattedValue = d.value == null ? _nullishCoalesce(invalidNumberLabel, () => ( "\u2014")) : valueFormatter({ ...valueFormat, value: d.value, abbreviate: false });
218
218
  const nameCell = {
219
- content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${d.name}: `, children: d.name }) })
219
+ content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${d.name}: `, children: d.name }) })
220
220
  };
221
221
  return {
222
222
  cells: [
@@ -255,7 +255,7 @@ function DefaultChartTooltip({
255
255
  ]
256
256
  }
257
257
  ] : [];
258
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltip, { children: [
258
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk46L4YBLCjs.ChartTooltip, { children: [
259
259
  annotation ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
260
260
  AnnotationHeader,
261
261
  {
@@ -264,14 +264,14 @@ function DefaultChartTooltip({
264
264
  description: annotation.description
265
265
  }
266
266
  ) : null,
267
- hideTitle ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTitle, { children: formatTitle(position, timezone) }),
267
+ hideTitle ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipTitle, { children: formatTitle(position, timezone) }),
268
268
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
269
- _chunkWEKDYQ4Tjs.ChartTooltipTable,
269
+ _chunk46L4YBLCjs.ChartTooltipTable,
270
270
  {
271
271
  rows: [...rows, ...totalRow]
272
272
  }
273
273
  ),
274
- hasOnClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
274
+ hasOnClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
275
275
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
276
276
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
277
277
  ] }) : tooltipClickLabel }) : null
@@ -287,7 +287,7 @@ var SeriesLegend = _react.memo.call(void 0, function SeriesLegend2({
287
287
  }) {
288
288
  const labels = items.map((item) => ({
289
289
  content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
290
- _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon,
290
+ _chunk46L4YBLCjs.ChartLegendLabelContentWithIcon,
291
291
  {
292
292
  icon: item.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: item.icon, fixedWidth: true, "aria-hidden": true }) : void 0,
293
293
  children: item.name
@@ -295,7 +295,7 @@ var SeriesLegend = _react.memo.call(void 0, function SeriesLegend2({
295
295
  ),
296
296
  color: item.color
297
297
  }));
298
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegend, { legendLabels: labels });
298
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegend, { legendLabels: labels });
299
299
  });
300
300
 
301
301
  // src/charts/shared/chartExport.ts
@@ -540,7 +540,7 @@ function ChartRenderer({
540
540
  const chartWithAnnotations = chart;
541
541
  const hasRenderedAnnotations = !!_optionalChain([chartWithAnnotations, 'optionalAccess', _16 => _16.annotations, 'optionalAccess', _17 => _17.length]) && !!_optionalChain([annotationLookup, 'optionalAccess', _18 => _18.size]) && plotHeight > 0;
542
542
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
543
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides, {}),
543
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.GlobalChartStyleOverrides, {}),
544
544
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
545
545
  _highchartsreactofficial.HighchartsReact,
546
546
  {
@@ -559,7 +559,7 @@ function ChartRenderer({
559
559
  }
560
560
  ) : null,
561
561
  chart ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
562
- _chunkWEKDYQ4Tjs.ChartTooltipPortal,
562
+ _chunk46L4YBLCjs.ChartTooltipPortal,
563
563
  {
564
564
  chart,
565
565
  renderContent: (context) => {
@@ -575,7 +575,7 @@ function ChartRenderer({
575
575
  ] : (
576
576
  // Drop v1's `readonly` array wrapper and `icon` field at the seam —
577
577
  // the v2 surface is mutable and doesn't expose row-level icons.
578
- _chunkWEKDYQ4Tjs.transformTimeSeriesTooltipData.call(void 0, {
578
+ _chunk46L4YBLCjs.transformTimeSeriesTooltipData.call(void 0, {
579
579
  context,
580
580
  data: series.map((s, i) => ({
581
581
  name: s.name,
@@ -664,4 +664,4 @@ function buildBaseChartOptions({
664
664
 
665
665
 
666
666
  exports.valueFormatter = valueFormatter; exports.useSeedsChartSetup = useSeedsChartSetup; exports.ChartRenderer = ChartRenderer; exports.buildBaseChartOptions = buildBaseChartOptions;
667
- //# sourceMappingURL=chunk-DLO4WZLT.js.map
667
+ //# sourceMappingURL=chunk-27M4FDNK.js.map