@zendir/ui 0.1.8 → 0.1.9

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 (79) hide show
  1. package/dist/index.js +0 -137
  2. package/dist/index.js.map +1 -1
  3. package/dist/react/context/DisplaySettingsContext.js +0 -12
  4. package/dist/react/context/DisplaySettingsContext.js.map +1 -1
  5. package/dist/react/index.d.ts +0 -30
  6. package/dist/react/utils/index.js +0 -8
  7. package/dist/react/utils/index.js.map +1 -1
  8. package/dist/react.js +0 -137
  9. package/dist/react.js.map +1 -1
  10. package/package.json +1 -1
  11. package/dist/react/3d/EarthViewer.js +0 -836
  12. package/dist/react/3d/EarthViewer.js.map +0 -1
  13. package/dist/react/3d/SolarSystemViewer.js +0 -372
  14. package/dist/react/3d/SolarSystemViewer.js.map +0 -1
  15. package/dist/react/3d/ZenSpace3D.js +0 -1253
  16. package/dist/react/3d/ZenSpace3D.js.map +0 -1
  17. package/dist/react/3d/ZenSpace3DCesium.js +0 -186
  18. package/dist/react/3d/ZenSpace3DCesium.js.map +0 -1
  19. package/dist/react/3d/ZenSpace3DShaders.js +0 -94
  20. package/dist/react/3d/ZenSpace3DShaders.js.map +0 -1
  21. package/dist/react/3d/ZenSpace3DUtils.js +0 -213
  22. package/dist/react/3d/ZenSpace3DUtils.js.map +0 -1
  23. package/dist/react/3d/threeLoader.js +0 -18
  24. package/dist/react/3d/threeLoader.js.map +0 -1
  25. package/dist/react/cards/AccessCard.js +0 -410
  26. package/dist/react/cards/AccessCard.js.map +0 -1
  27. package/dist/react/cards/OrbitCard.js +0 -372
  28. package/dist/react/cards/OrbitCard.js.map +0 -1
  29. package/dist/react/cards/SpacecraftCard.js +0 -941
  30. package/dist/react/cards/SpacecraftCard.js.map +0 -1
  31. package/dist/react/cards/TelemetryCard.js +0 -742
  32. package/dist/react/cards/TelemetryCard.js.map +0 -1
  33. package/dist/react/cards/TelemetryStreamCard.js +0 -309
  34. package/dist/react/cards/TelemetryStreamCard.js.map +0 -1
  35. package/dist/react/charts/GroundTrackMap.js +0 -1123
  36. package/dist/react/charts/GroundTrackMap.js.map +0 -1
  37. package/dist/react/charts/GroundTrackMapLeaflet.js +0 -571
  38. package/dist/react/charts/GroundTrackMapLeaflet.js.map +0 -1
  39. package/dist/react/charts/groundTrackMapLeafletTiles.js +0 -11
  40. package/dist/react/charts/groundTrackMapLeafletTiles.js.map +0 -1
  41. package/dist/react/charts/groundTrackMapLeafletUtils.js +0 -109
  42. package/dist/react/charts/groundTrackMapLeafletUtils.js.map +0 -1
  43. package/dist/react/charts/unified/AstroChart.js +0 -1405
  44. package/dist/react/charts/unified/AstroChart.js.map +0 -1
  45. package/dist/react/charts/unified/PowerOverviewChart.js +0 -488
  46. package/dist/react/charts/unified/PowerOverviewChart.js.map +0 -1
  47. package/dist/react/charts/unified/domain.js +0 -3168
  48. package/dist/react/charts/unified/domain.js.map +0 -1
  49. package/dist/react/charts/unified/generators.js +0 -518
  50. package/dist/react/charts/unified/generators.js.map +0 -1
  51. package/dist/react/charts/unified/presets.js +0 -999
  52. package/dist/react/charts/unified/presets.js.map +0 -1
  53. package/dist/react/charts/unified/sync.js +0 -219
  54. package/dist/react/charts/unified/sync.js.map +0 -1
  55. package/dist/react/charts/unified/theme.js +0 -562
  56. package/dist/react/charts/unified/theme.js.map +0 -1
  57. package/dist/react/charts/unified/useChartStream.js +0 -226
  58. package/dist/react/charts/unified/useChartStream.js.map +0 -1
  59. package/dist/react/visualizations/EclipseTimerCard.js +0 -250
  60. package/dist/react/visualizations/EclipseTimerCard.js.map +0 -1
  61. package/dist/react/visualizations/LinkBudgetCard.js +0 -444
  62. package/dist/react/visualizations/LinkBudgetCard.js.map +0 -1
  63. package/dist/react/visualizations/NavBallCard.js +0 -243
  64. package/dist/react/visualizations/NavBallCard.js.map +0 -1
  65. package/dist/react/visualizations/PropulsionCard.js +0 -298
  66. package/dist/react/visualizations/PropulsionCard.js.map +0 -1
  67. package/dist/react/visualizations/SensorFootprintCard.js +0 -326
  68. package/dist/react/visualizations/SensorFootprintCard.js.map +0 -1
  69. package/dist/react/visualizations/ThermalHeatmapCard.js +0 -372
  70. package/dist/react/visualizations/ThermalHeatmapCard.js.map +0 -1
  71. package/dist/shaders/atmosphere.frag.js +0 -5
  72. package/dist/shaders/atmosphere.frag.js.map +0 -1
  73. package/dist/shaders/atmosphere.vert.js +0 -5
  74. package/dist/shaders/atmosphere.vert.js.map +0 -1
  75. package/dist/shaders/stars.frag.js +0 -5
  76. package/dist/shaders/stars.frag.js.map +0 -1
  77. package/dist/shaders/stars.vert.js +0 -5
  78. package/dist/shaders/stars.vert.js.map +0 -1
  79. package/dist/style.css +0 -143
@@ -1,999 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { memo, forwardRef } from "react";
3
- import { AstroChart } from "./AstroChart.js";
4
- import { ASTRO_DATA_VIZ_COLORS } from "./theme.js";
5
- import { useTheme } from "../../theme/ThemeProvider.js";
6
- const SOFT_STATUS_COLORS = {
7
- normal: "#6ed86e",
8
- caution: "#ffd54f",
9
- critical: "#e57373"
10
- };
11
- const LineChart = memo(forwardRef(
12
- function LineChart2({ smooth = true, showPoints = false, showArea = false, series = [], ...props }, ref) {
13
- const transformedSeries = series.map((s) => ({
14
- ...s,
15
- type: showArea ? "area" : "line",
16
- smooth,
17
- symbol: showPoints ? { type: "circle", size: 6 } : { type: "none" }
18
- }));
19
- return /* @__PURE__ */ jsx(
20
- AstroChart,
21
- {
22
- ref,
23
- type: showArea ? "area" : "line",
24
- series: transformedSeries,
25
- tooltip: { trigger: "axis", crosshair: "x" },
26
- ...props
27
- }
28
- );
29
- }
30
- ));
31
- const AreaChart = memo(forwardRef(
32
- function AreaChart2({ stacked = false, smooth = true, series = [], ...props }, ref) {
33
- const transformedSeries = series.map((s, _i) => ({
34
- ...s,
35
- type: "area",
36
- smooth,
37
- stack: stacked ? "total" : void 0,
38
- areaStyle: { opacity: stacked ? 0.8 : 0.3 }
39
- }));
40
- return /* @__PURE__ */ jsx(
41
- AstroChart,
42
- {
43
- ref,
44
- type: "area",
45
- series: transformedSeries,
46
- tooltip: { trigger: "axis", crosshair: "x" },
47
- ...props
48
- }
49
- );
50
- }
51
- ));
52
- const BarChart = memo(forwardRef(
53
- function BarChart2({ stacked = false, horizontal = false, series = [], xAxis, yAxis, ...props }, ref) {
54
- const transformedSeries = series.map((s) => ({
55
- ...s,
56
- type: "bar",
57
- stack: stacked ? "total" : void 0
58
- }));
59
- const finalXAxis = horizontal ? { type: "value", ...yAxis } : { type: "category", ...xAxis };
60
- const finalYAxis = horizontal ? { type: "category", ...xAxis } : { type: "value", ...yAxis };
61
- return /* @__PURE__ */ jsx(
62
- AstroChart,
63
- {
64
- ref,
65
- type: "bar",
66
- series: transformedSeries,
67
- xAxis: finalXAxis,
68
- yAxis: finalYAxis,
69
- tooltip: { trigger: "axis" },
70
- ...props
71
- }
72
- );
73
- }
74
- ));
75
- const ScatterChart = memo(forwardRef(
76
- function ScatterChart2({ symbolSize = 10, series = [], ...props }, ref) {
77
- const transformedSeries = series.map((s) => ({
78
- ...s,
79
- type: "scatter",
80
- symbol: {
81
- type: "circle",
82
- size: typeof symbolSize === "number" ? symbolSize : 10
83
- }
84
- }));
85
- return /* @__PURE__ */ jsx(
86
- AstroChart,
87
- {
88
- ref,
89
- type: "scatter",
90
- series: transformedSeries,
91
- tooltip: { trigger: "item" },
92
- xAxis: { type: "value" },
93
- yAxis: { type: "value" },
94
- ...props
95
- }
96
- );
97
- }
98
- ));
99
- const PieChart = memo(forwardRef(
100
- function PieChart2({
101
- donut = false,
102
- innerRadius = "40%",
103
- outerRadius = "70%",
104
- showLabels = true,
105
- series = [],
106
- ...props
107
- }, ref) {
108
- const transformedSeries = series.map((s) => ({
109
- ...s,
110
- type: donut ? "donut" : "pie"
111
- }));
112
- return /* @__PURE__ */ jsx(
113
- AstroChart,
114
- {
115
- ref,
116
- type: donut ? "donut" : "pie",
117
- series: transformedSeries,
118
- tooltip: { trigger: "item" },
119
- echartsOptions: {
120
- series: [{
121
- radius: donut ? [innerRadius, outerRadius] : outerRadius,
122
- label: {
123
- show: showLabels,
124
- formatter: "{b}: {d}%"
125
- }
126
- }]
127
- },
128
- ...props
129
- }
130
- );
131
- }
132
- ));
133
- const DonutChart = memo(forwardRef(
134
- function DonutChart2(props, ref) {
135
- return /* @__PURE__ */ jsx(PieChart, { ref, donut: true, ...props });
136
- }
137
- ));
138
- const GaugeChart = memo(forwardRef(
139
- function GaugeChart2({
140
- value,
141
- min = 0,
142
- max = 100,
143
- unit = "%",
144
- label,
145
- thresholds,
146
- progress = true,
147
- showPointer = true,
148
- width = 220,
149
- height = 220,
150
- ...props
151
- }, ref) {
152
- var _a;
153
- const { tokens } = useTheme();
154
- const range = max - min;
155
- const safeRange = range === 0 ? 1 : range;
156
- const clampedValue = Math.max(min, Math.min(max, value));
157
- const widthPx = typeof width === "number" ? width : typeof height === "number" ? height : 220;
158
- const heightPx = typeof height === "number" ? height : 220;
159
- const gaugeSize = Math.max(120, Math.min(widthPx, heightPx));
160
- const compactGauge = gaugeSize < 170;
161
- const arcWidth = Math.max(8, Math.round(gaugeSize * 0.07));
162
- const valueFontSize = Math.max(16, Math.round(gaugeSize * 0.15));
163
- const labelFontSize = Math.max(10, Math.round(gaugeSize * 0.07));
164
- const unitSuffix = (unit == null ? void 0 : unit.trim()) ?? "";
165
- const longUnit = unitSuffix.length > 4;
166
- const series = [{
167
- id: "gauge",
168
- name: label || "Value",
169
- type: "gauge",
170
- data: [{ x: 0, y: clampedValue }]
171
- }];
172
- const normalizedThresholds = [...thresholds ?? []].filter((t) => Number.isFinite(t.value)).sort((a, b) => a.value - b.value);
173
- const colorStops = normalizedThresholds.map((t) => [
174
- Math.max(0, Math.min(1, (t.value - min) / safeRange)),
175
- t.color
176
- ]);
177
- if (colorStops.length === 0) {
178
- colorStops.push(
179
- [0.3, SOFT_STATUS_COLORS.normal],
180
- [0.7, SOFT_STATUS_COLORS.caution],
181
- [1, SOFT_STATUS_COLORS.critical]
182
- );
183
- } else if (colorStops[colorStops.length - 1][0] < 1) {
184
- colorStops.push([1, colorStops[colorStops.length - 1][1]]);
185
- }
186
- const activeColor = ((_a = [...colorStops].reverse().find(([stop]) => stop <= (clampedValue - min) / safeRange)) == null ? void 0 : _a[1]) ?? SOFT_STATUS_COLORS.normal;
187
- return /* @__PURE__ */ jsx(
188
- AstroChart,
189
- {
190
- ref,
191
- type: "gauge",
192
- series,
193
- width,
194
- height,
195
- echartsOptions: {
196
- series: [{
197
- type: "gauge",
198
- min,
199
- max,
200
- progress: {
201
- show: progress,
202
- width: arcWidth,
203
- roundCap: true
204
- },
205
- axisLine: {
206
- lineStyle: {
207
- width: arcWidth,
208
- color: colorStops
209
- }
210
- },
211
- axisTick: { show: false },
212
- splitLine: { show: false },
213
- axisLabel: { show: false },
214
- pointer: {
215
- show: showPointer,
216
- length: compactGauge ? "56%" : "60%",
217
- width: Math.max(3, Math.round(arcWidth * 0.38))
218
- },
219
- title: {
220
- show: !!label,
221
- offsetCenter: [0, compactGauge ? "73%" : "78%"],
222
- fontSize: labelFontSize,
223
- color: tokens.colors.text.secondary
224
- },
225
- detail: {
226
- valueAnimation: true,
227
- formatter: (currentValue) => {
228
- const rounded = Math.round(currentValue);
229
- if (!unitSuffix) return `${rounded}`;
230
- if (longUnit) return `${rounded}
231
- {unit|${unitSuffix}}`;
232
- return `${rounded}${unitSuffix}`;
233
- },
234
- rich: {
235
- unit: {
236
- color: tokens.colors.text.secondary,
237
- fontSize: Math.max(10, Math.round(valueFontSize * 0.48)),
238
- fontWeight: 500,
239
- lineHeight: Math.round(valueFontSize * 0.78)
240
- }
241
- },
242
- lineHeight: Math.round(valueFontSize * 1.05),
243
- fontSize: valueFontSize,
244
- fontWeight: 700,
245
- offsetCenter: [0, compactGauge ? "10%" : "14%"],
246
- color: activeColor
247
- },
248
- data: [{ value: clampedValue, name: label }]
249
- }]
250
- },
251
- ...props
252
- }
253
- );
254
- }
255
- ));
256
- const RadarChart = memo(forwardRef(
257
- function RadarChart2({ indicators, areaStyle = true, series = [], ...props }, ref) {
258
- const extractValues = (data) => {
259
- if (!data || data.length === 0) return [];
260
- const first = data[0];
261
- if (typeof first === "number") return data;
262
- if (typeof first === "object" && first !== null && "y" in first) {
263
- return data.map((d) => d.y);
264
- }
265
- return [];
266
- };
267
- return /* @__PURE__ */ jsx(
268
- AstroChart,
269
- {
270
- ref,
271
- type: "radar",
272
- series: [],
273
- tooltip: { trigger: "item" },
274
- echartsOptions: {
275
- radar: {
276
- indicator: indicators,
277
- shape: "polygon"
278
- },
279
- series: series.map((s) => ({
280
- type: "radar",
281
- name: s.name,
282
- data: [{
283
- value: extractValues(s.data),
284
- name: s.name
285
- }],
286
- areaStyle: areaStyle ? { opacity: 0.3 } : void 0
287
- }))
288
- },
289
- ...props
290
- }
291
- );
292
- }
293
- ));
294
- const HeatmapChart = memo(forwardRef(
295
- function HeatmapChart2({
296
- xCategories,
297
- yCategories,
298
- valueRange = [0, 100],
299
- showLabels = true,
300
- series = [],
301
- ...props
302
- }, ref) {
303
- var _a;
304
- const heatmapData = (_a = series[0]) == null ? void 0 : _a.data;
305
- return /* @__PURE__ */ jsx(
306
- AstroChart,
307
- {
308
- ref,
309
- type: "heatmap",
310
- series,
311
- xAxis: { type: "category" },
312
- yAxis: { type: "category" },
313
- tooltip: { trigger: "item" },
314
- echartsOptions: {
315
- xAxis: { data: xCategories },
316
- yAxis: { data: yCategories },
317
- visualMap: {
318
- min: valueRange[0],
319
- max: valueRange[1],
320
- calculable: true,
321
- orient: "horizontal",
322
- left: "center",
323
- bottom: "5%"
324
- },
325
- series: [{
326
- type: "heatmap",
327
- data: heatmapData,
328
- label: {
329
- show: showLabels
330
- },
331
- emphasis: {
332
- itemStyle: {
333
- shadowBlur: 10,
334
- shadowColor: "rgba(0, 0, 0, 0.5)"
335
- }
336
- }
337
- }]
338
- },
339
- ...props
340
- }
341
- );
342
- }
343
- ));
344
- const TimeSeriesChart = memo(forwardRef(
345
- function TimeSeriesChart2({
346
- timeWindow,
347
- maxPoints = 1e3,
348
- autoScroll = true,
349
- showCurrentValues: _showCurrentValues = true,
350
- series = [],
351
- ...props
352
- }, ref) {
353
- const xAxis = {
354
- type: "time",
355
- ...timeWindow ? {
356
- min: "dataMin",
357
- max: "dataMax"
358
- } : {}
359
- };
360
- return /* @__PURE__ */ jsx(
361
- AstroChart,
362
- {
363
- ref,
364
- type: "line",
365
- series: series.map((s) => ({
366
- ...s,
367
- smooth: true,
368
- symbol: { type: "none" }
369
- })),
370
- xAxis,
371
- tooltip: {
372
- trigger: "axis",
373
- crosshair: "x"
374
- },
375
- zoom: autoScroll ? void 0 : {
376
- enabled: true,
377
- type: "both",
378
- axis: "x"
379
- },
380
- realTime: {
381
- enabled: true,
382
- maxPoints,
383
- timeWindow,
384
- shift: autoScroll
385
- },
386
- ...props
387
- }
388
- );
389
- }
390
- ));
391
- const DualAxisChart = memo(forwardRef(
392
- function DualAxisChart2({ leftAxis, rightAxis, series = [], ...props }, ref) {
393
- const transformedSeries = series.map((s, i) => ({
394
- ...s,
395
- yAxisIndex: s.yAxisIndex ?? i % 2
396
- // Alternate by default
397
- }));
398
- return /* @__PURE__ */ jsx(
399
- AstroChart,
400
- {
401
- ref,
402
- type: "line",
403
- series: transformedSeries,
404
- yAxis: [
405
- { position: "left", ...leftAxis },
406
- { position: "right", ...rightAxis }
407
- ],
408
- tooltip: { trigger: "axis", crosshair: "x" },
409
- ...props
410
- }
411
- );
412
- }
413
- ));
414
- const StackedAreaChart = memo(forwardRef(
415
- function StackedAreaChart2(props, ref) {
416
- return /* @__PURE__ */ jsx(AreaChart, { ref, stacked: true, ...props });
417
- }
418
- ));
419
- const StackedBarChart = memo(forwardRef(
420
- function StackedBarChart2(props, ref) {
421
- return /* @__PURE__ */ jsx(BarChart, { ref, stacked: true, ...props });
422
- }
423
- ));
424
- const BubbleChart = memo(forwardRef(
425
- function BubbleChart2({
426
- minSize = 10,
427
- maxSize = 60,
428
- showSizeLegend = true,
429
- series = [],
430
- ...props
431
- }, ref) {
432
- const transformedSeries = series.map((s) => ({
433
- ...s,
434
- type: "scatter"
435
- }));
436
- return /* @__PURE__ */ jsx(
437
- AstroChart,
438
- {
439
- ref,
440
- type: "scatter",
441
- series: transformedSeries,
442
- tooltip: { trigger: "item" },
443
- echartsOptions: {
444
- series: series.map((s, _idx) => {
445
- const data = s.data;
446
- return {
447
- type: "scatter",
448
- name: s.name,
449
- data: data.map((d) => {
450
- if (Array.isArray(d)) return d;
451
- return [d.x, d.y, d.size ?? 10];
452
- }),
453
- symbolSize: (val) => {
454
- const size = val[2] ?? minSize;
455
- return Math.max(minSize, Math.min(maxSize, size));
456
- }
457
- };
458
- }),
459
- visualMap: showSizeLegend ? {
460
- show: true,
461
- dimension: 2,
462
- min: 0,
463
- max: 100,
464
- inRange: { symbolSize: [minSize, maxSize] },
465
- right: 10,
466
- top: "center"
467
- } : void 0
468
- },
469
- ...props
470
- }
471
- );
472
- }
473
- ));
474
- const HistogramChart = memo(forwardRef(
475
- function HistogramChart2({
476
- bins: _bins = 20,
477
- showCurve: _showCurve = false,
478
- series = [],
479
- xAxis,
480
- ...props
481
- }, ref) {
482
- const transformedSeries = series.map((s) => ({
483
- ...s,
484
- type: "bar"
485
- }));
486
- return /* @__PURE__ */ jsx(
487
- AstroChart,
488
- {
489
- ref,
490
- type: "bar",
491
- series: transformedSeries,
492
- xAxis: { type: "category", ...xAxis },
493
- yAxis: { type: "value", name: "Frequency" },
494
- tooltip: { trigger: "axis" },
495
- echartsOptions: {
496
- series: series.map((s) => ({
497
- type: "bar",
498
- name: s.name,
499
- data: s.data,
500
- barWidth: "90%",
501
- itemStyle: { borderRadius: [2, 2, 0, 0] }
502
- }))
503
- },
504
- ...props
505
- }
506
- );
507
- }
508
- ));
509
- const SankeyChart = memo(forwardRef(
510
- function SankeyChart2({
511
- nodes = [],
512
- links = [],
513
- orient = "horizontal",
514
- ...props
515
- }, ref) {
516
- const { tokens } = useTheme();
517
- return /* @__PURE__ */ jsx(
518
- AstroChart,
519
- {
520
- ref,
521
- type: "sankey",
522
- series: [],
523
- echartsOptions: {
524
- tooltip: {
525
- trigger: "item",
526
- triggerOn: "mousemove"
527
- },
528
- series: [{
529
- type: "sankey",
530
- orient,
531
- layoutIterations: 32,
532
- emphasis: { focus: "adjacency" },
533
- nodeAlign: "justify",
534
- lineStyle: { color: "gradient", curveness: 0.5 },
535
- data: nodes,
536
- links,
537
- label: {
538
- color: tokens.colors.text.primary,
539
- fontSize: 12
540
- }
541
- }]
542
- },
543
- ...props
544
- }
545
- );
546
- }
547
- ));
548
- const TreemapChart = memo(forwardRef(
549
- function TreemapChart2({
550
- data = [],
551
- showBreadcrumb = true,
552
- leafDepth = 2,
553
- ...props
554
- }, ref) {
555
- const { tokens } = useTheme();
556
- return /* @__PURE__ */ jsx(
557
- AstroChart,
558
- {
559
- ref,
560
- type: "treemap",
561
- series: [],
562
- echartsOptions: {
563
- tooltip: {
564
- formatter: (info) => {
565
- const value = info.value;
566
- const name = info.name;
567
- return `${name}: ${typeof value === "number" ? value.toLocaleString() : value}`;
568
- }
569
- },
570
- series: [{
571
- type: "treemap",
572
- data,
573
- leafDepth,
574
- roam: false,
575
- // AstroUXDS compliant breadcrumb navigation
576
- breadcrumb: {
577
- show: showBreadcrumb,
578
- bottom: 10,
579
- itemStyle: { color: "rgba(100, 116, 139, 0.6)" }
580
- // Subtle grey
581
- },
582
- label: {
583
- show: true,
584
- formatter: "{b}",
585
- color: tokens.colors.text.primary,
586
- fontSize: 12
587
- },
588
- upperLabel: {
589
- show: true,
590
- height: 30,
591
- color: tokens.colors.text.secondary
592
- },
593
- // AstroUXDS compliant borders - subtle grey
594
- itemStyle: {
595
- borderColor: "rgba(100, 116, 139, 0.2)",
596
- borderWidth: 2,
597
- gapWidth: 2
598
- },
599
- levels: [
600
- {
601
- itemStyle: { borderColor: "rgba(100, 116, 139, 0.3)", borderWidth: 4, gapWidth: 4 },
602
- upperLabel: { show: false }
603
- },
604
- {
605
- itemStyle: { borderColor: "rgba(100, 116, 139, 0.25)", borderWidth: 2, gapWidth: 2 },
606
- emphasis: { itemStyle: { borderColor: ASTRO_DATA_VIZ_COLORS.mixed[0] } }
607
- // Zendir Electric on hover
608
- },
609
- {
610
- colorSaturation: [0.35, 0.5],
611
- itemStyle: { borderColor: "rgba(62, 60, 255, 0.3)", borderWidth: 1 }
612
- // Zendir Electric subtle
613
- }
614
- ]
615
- }]
616
- },
617
- ...props
618
- }
619
- );
620
- }
621
- ));
622
- const SunburstChart = memo(forwardRef(
623
- function SunburstChart2({
624
- data = [],
625
- innerRadius = "15%",
626
- outerRadius = "80%",
627
- ...props
628
- }, ref) {
629
- const { tokens } = useTheme();
630
- return /* @__PURE__ */ jsx(
631
- AstroChart,
632
- {
633
- ref,
634
- type: "sunburst",
635
- series: [],
636
- echartsOptions: {
637
- tooltip: {
638
- trigger: "item"
639
- },
640
- // Zendir-branded sunburst visualization
641
- series: [{
642
- type: "sunburst",
643
- data,
644
- radius: [innerRadius, outerRadius],
645
- emphasis: { focus: "ancestor" },
646
- label: {
647
- rotate: "radial",
648
- color: tokens.colors.text.secondary,
649
- fontSize: 11
650
- },
651
- itemStyle: {
652
- borderRadius: 4,
653
- borderWidth: 2,
654
- borderColor: "rgba(62, 60, 255, 0.25)"
655
- // Zendir Electric subtle border
656
- },
657
- levels: [
658
- {},
659
- { r0: "15%", r: "40%", label: { rotate: "tangential" } },
660
- { r0: "40%", r: "65%" },
661
- { r0: "65%", r: "80%", label: { position: "outside", fontSize: 10 } }
662
- ]
663
- }]
664
- },
665
- ...props
666
- }
667
- );
668
- }
669
- ));
670
- const ParallelChart = memo(forwardRef(
671
- function ParallelChart2({
672
- axes = [],
673
- data = [],
674
- lineStyle = { opacity: 0.5, width: 1.5 },
675
- ...props
676
- }, ref) {
677
- const { tokens } = useTheme();
678
- return /* @__PURE__ */ jsx(
679
- AstroChart,
680
- {
681
- ref,
682
- type: "line",
683
- series: [],
684
- echartsOptions: {
685
- parallelAxis: axes.map((axis) => ({
686
- dim: axis.dim,
687
- name: axis.name,
688
- min: axis.min,
689
- max: axis.max,
690
- type: axis.type || "value",
691
- data: axis.data,
692
- nameTextStyle: { color: tokens.colors.text.secondary },
693
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
694
- axisTick: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
695
- axisLabel: { color: tokens.colors.text.tertiary }
696
- })),
697
- parallel: {
698
- left: 60,
699
- right: 60,
700
- bottom: 60,
701
- top: 60,
702
- parallelAxisDefault: {
703
- type: "value",
704
- nameLocation: "end",
705
- nameGap: 20,
706
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
707
- axisTick: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
708
- splitLine: { show: false },
709
- axisLabel: { color: tokens.colors.text.tertiary }
710
- }
711
- },
712
- series: [{
713
- type: "parallel",
714
- lineStyle: {
715
- ...lineStyle,
716
- color: ASTRO_DATA_VIZ_COLORS.mixed[0]
717
- // Zendir Electric
718
- },
719
- data: data.map((row) => ({ value: row })),
720
- emphasis: {
721
- lineStyle: { width: 3, opacity: 1 }
722
- }
723
- }]
724
- },
725
- ...props
726
- }
727
- );
728
- }
729
- ));
730
- const CandlestickChart = memo(forwardRef(
731
- function CandlestickChart2({
732
- data = [],
733
- showVolume: _showVolume = false,
734
- ...props
735
- }, ref) {
736
- const { tokens } = useTheme();
737
- const categoryData = data.map((d) => d.time);
738
- const ohlcData = data.map((d) => [d.open, d.close, d.low, d.high]);
739
- return /* @__PURE__ */ jsx(
740
- AstroChart,
741
- {
742
- ref,
743
- type: "candlestick",
744
- series: [],
745
- echartsOptions: {
746
- tooltip: {
747
- trigger: "axis",
748
- axisPointer: { type: "cross" }
749
- },
750
- xAxis: {
751
- type: "category",
752
- data: categoryData,
753
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
754
- axisLabel: { color: tokens.colors.text.secondary }
755
- },
756
- yAxis: {
757
- type: "value",
758
- scale: true,
759
- splitLine: { lineStyle: { color: "rgba(100, 116, 139, 0.15)" } },
760
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
761
- axisLabel: { color: tokens.colors.text.secondary }
762
- },
763
- series: [{
764
- type: "candlestick",
765
- data: ohlcData,
766
- itemStyle: {
767
- color: SOFT_STATUS_COLORS.normal,
768
- // AstroUXDS green (up/bullish)
769
- color0: SOFT_STATUS_COLORS.critical,
770
- // AstroUXDS red (down/bearish)
771
- borderColor: SOFT_STATUS_COLORS.normal,
772
- borderColor0: SOFT_STATUS_COLORS.critical
773
- }
774
- }],
775
- dataZoom: [
776
- { type: "inside", start: 0, end: 100 },
777
- { show: true, type: "slider", bottom: 10 }
778
- ]
779
- },
780
- ...props
781
- }
782
- );
783
- }
784
- ));
785
- const GraphChart = memo(forwardRef(
786
- function GraphChart2({
787
- nodes = [],
788
- links = [],
789
- categories = [],
790
- layout = "force",
791
- ...props
792
- }, ref) {
793
- const { tokens } = useTheme();
794
- return /* @__PURE__ */ jsx(
795
- AstroChart,
796
- {
797
- ref,
798
- type: "scatter",
799
- series: [],
800
- echartsOptions: {
801
- tooltip: {},
802
- legend: categories.length > 0 ? {
803
- data: categories.map((c) => c.name),
804
- textStyle: { color: tokens.colors.text.primary }
805
- } : void 0,
806
- series: [{
807
- type: "graph",
808
- layout,
809
- data: nodes.map((n) => ({
810
- ...n,
811
- symbolSize: n.symbolSize || 30
812
- })),
813
- links,
814
- categories,
815
- roam: true,
816
- label: {
817
- show: true,
818
- position: "right",
819
- formatter: "{b}",
820
- color: tokens.colors.text.primary,
821
- fontSize: 11
822
- },
823
- lineStyle: {
824
- color: "source",
825
- curveness: 0.3,
826
- opacity: 0.6
827
- },
828
- emphasis: {
829
- focus: "adjacency",
830
- lineStyle: { width: 3 }
831
- },
832
- force: layout === "force" ? {
833
- repulsion: 200,
834
- edgeLength: [50, 150],
835
- gravity: 0.1
836
- } : void 0
837
- }]
838
- },
839
- ...props
840
- }
841
- );
842
- }
843
- ));
844
- function calculateBoxplotStats(values) {
845
- const sorted = [...values].sort((a, b) => a - b);
846
- const n = sorted.length;
847
- const min = sorted[0];
848
- const max = sorted[n - 1];
849
- const median = n % 2 === 0 ? (sorted[n / 2 - 1] + sorted[n / 2]) / 2 : sorted[Math.floor(n / 2)];
850
- const q1Index = Math.floor(n * 0.25);
851
- const q3Index = Math.floor(n * 0.75);
852
- const q1 = sorted[q1Index];
853
- const q3 = sorted[q3Index];
854
- const iqr = q3 - q1;
855
- const lowerWhisker = Math.max(min, q1 - 1.5 * iqr);
856
- const upperWhisker = Math.min(max, q3 + 1.5 * iqr);
857
- return [lowerWhisker, q1, median, q3, upperWhisker];
858
- }
859
- memo(forwardRef(
860
- function BoxPlotChart2({
861
- data = [],
862
- showOutliers = true,
863
- colors,
864
- horizontal = false,
865
- ...props
866
- }, ref) {
867
- const { tokens } = useTheme();
868
- const categories = data.map((d) => d.name);
869
- const boxplotData = data.map((d, index) => {
870
- const stats = calculateBoxplotStats(d.values);
871
- return {
872
- value: stats,
873
- itemStyle: (colors == null ? void 0 : colors[index]) ? {
874
- color: colors[index],
875
- borderColor: colors[index]
876
- } : void 0
877
- };
878
- });
879
- const outliers = [];
880
- if (showOutliers) {
881
- data.forEach((d, catIndex) => {
882
- const sorted = [...d.values].sort((a, b) => a - b);
883
- const n = sorted.length;
884
- const q1Index = Math.floor(n * 0.25);
885
- const q3Index = Math.floor(n * 0.75);
886
- const q1 = sorted[q1Index];
887
- const q3 = sorted[q3Index];
888
- const iqr = q3 - q1;
889
- const lowerBound = q1 - 1.5 * iqr;
890
- const upperBound = q3 + 1.5 * iqr;
891
- d.values.forEach((v) => {
892
- if (v < lowerBound || v > upperBound) {
893
- outliers.push([catIndex, v]);
894
- }
895
- });
896
- });
897
- }
898
- const categoryAxis = {
899
- type: "category",
900
- data: categories,
901
- boundaryGap: true,
902
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
903
- axisLabel: { color: tokens.colors.text.secondary, fontSize: 12 },
904
- splitArea: { show: false }
905
- };
906
- const valueAxis = {
907
- type: "value",
908
- splitLine: { lineStyle: { color: "rgba(100, 116, 139, 0.15)" } },
909
- axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
910
- axisLabel: { color: tokens.colors.text.secondary }
911
- };
912
- return /* @__PURE__ */ jsx(
913
- AstroChart,
914
- {
915
- ref,
916
- type: "boxplot",
917
- series: [],
918
- echartsOptions: {
919
- tooltip: {
920
- trigger: "item",
921
- axisPointer: { type: "shadow" },
922
- formatter: (params) => {
923
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
924
- if (params.seriesType === "boxplot") {
925
- const value = params.value;
926
- return `
927
- <div style="font-weight: 600; margin-bottom: 4px;">${params.name}</div>
928
- <div>Upper: ${((_a = value[5]) == null ? void 0 : _a.toFixed(1)) ?? ((_b = value[4]) == null ? void 0 : _b.toFixed(1))}</div>
929
- <div>Q3: ${((_c = value[4]) == null ? void 0 : _c.toFixed(1)) ?? ((_d = value[3]) == null ? void 0 : _d.toFixed(1))}</div>
930
- <div>Median: ${((_e = value[3]) == null ? void 0 : _e.toFixed(1)) ?? ((_f = value[2]) == null ? void 0 : _f.toFixed(1))}</div>
931
- <div>Q1: ${((_g = value[2]) == null ? void 0 : _g.toFixed(1)) ?? ((_h = value[1]) == null ? void 0 : _h.toFixed(1))}</div>
932
- <div>Lower: ${((_i = value[1]) == null ? void 0 : _i.toFixed(1)) ?? ((_j = value[0]) == null ? void 0 : _j.toFixed(1))}</div>
933
- `;
934
- }
935
- return `Outlier: ${params.value[1]}`;
936
- }
937
- },
938
- grid: {
939
- left: "10%",
940
- right: "10%",
941
- bottom: "15%",
942
- top: "15%"
943
- },
944
- xAxis: horizontal ? valueAxis : categoryAxis,
945
- yAxis: horizontal ? categoryAxis : valueAxis,
946
- series: [
947
- {
948
- name: "boxplot",
949
- type: "boxplot",
950
- data: boxplotData,
951
- itemStyle: {
952
- borderWidth: 2
953
- },
954
- emphasis: {
955
- itemStyle: {
956
- borderWidth: 3
957
- }
958
- }
959
- },
960
- ...showOutliers && outliers.length > 0 ? [{
961
- name: "outlier",
962
- type: "scatter",
963
- data: outliers,
964
- symbolSize: 8,
965
- itemStyle: {
966
- color: SOFT_STATUS_COLORS.caution
967
- }
968
- }] : []
969
- ]
970
- },
971
- ...props
972
- }
973
- );
974
- }
975
- ));
976
- export {
977
- AreaChart,
978
- BarChart,
979
- BubbleChart,
980
- CandlestickChart,
981
- DonutChart,
982
- DualAxisChart,
983
- GaugeChart,
984
- GraphChart,
985
- HeatmapChart,
986
- HistogramChart,
987
- LineChart,
988
- ParallelChart,
989
- PieChart,
990
- RadarChart,
991
- SankeyChart,
992
- ScatterChart,
993
- StackedAreaChart,
994
- StackedBarChart,
995
- SunburstChart,
996
- TimeSeriesChart,
997
- TreemapChart
998
- };
999
- //# sourceMappingURL=presets.js.map