@aquera/nile-visualization 1.8.0 → 1.9.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.
- package/dist/src/index.d.ts +1 -1
- package/dist/src/internal/highcharts-provider.d.ts +6 -0
- package/dist/src/internal/highcharts-provider.js +32 -0
- package/dist/src/internal/types/aq-config.type.d.ts +5 -0
- package/dist/src/nile-chart/index.d.ts +1 -1
- package/dist/src/nile-chart/nile-chart-config.d.ts +69 -1
- package/dist/src/nile-chart/nile-chart.css.d.ts +1 -0
- package/dist/src/nile-chart/nile-chart.css.js +175 -85
- package/dist/src/nile-chart/nile-chart.d.ts +25 -6
- package/dist/src/nile-chart/nile-chart.js +196 -55
- package/dist/src/nile-kpi-chart/nile-kpi-chart.css.js +47 -3
- package/dist/src/nile-kpi-chart/nile-kpi-chart.d.ts +29 -1
- package/dist/src/nile-kpi-chart/nile-kpi-chart.js +164 -9
- package/package.json +1 -1
|
@@ -1,9 +1,39 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
export const tooltipCss = `
|
|
3
|
+
.nile-chart-header-tooltip {
|
|
4
|
+
position: fixed;
|
|
5
|
+
display: none;
|
|
6
|
+
transform: translate(-50%, calc(-100% - 10px));
|
|
7
|
+
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
8
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
9
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
10
|
+
font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
|
|
11
|
+
font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
|
|
12
|
+
line-height: 1.4;
|
|
13
|
+
padding: 4px 10px;
|
|
14
|
+
border-radius: 6px;
|
|
15
|
+
border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
z-index: 2147483647;
|
|
19
|
+
box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
|
|
20
|
+
}
|
|
21
|
+
.nile-chart-header-tooltip::after {
|
|
22
|
+
content: '';
|
|
23
|
+
position: absolute;
|
|
24
|
+
top: 100%;
|
|
25
|
+
left: 50%;
|
|
26
|
+
transform: translateX(-50%);
|
|
27
|
+
border: 5px solid transparent;
|
|
28
|
+
border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
2
31
|
export const styles = css `
|
|
3
32
|
:host {
|
|
4
33
|
display: block;
|
|
5
34
|
width: 100%;
|
|
6
35
|
position: relative;
|
|
36
|
+
container-type: inline-size;
|
|
7
37
|
}
|
|
8
38
|
|
|
9
39
|
:host([hidden]) {
|
|
@@ -17,37 +47,37 @@ export const styles = css `
|
|
|
17
47
|
height: 100%;
|
|
18
48
|
}
|
|
19
49
|
|
|
20
|
-
:host([fit]) .chart-card {
|
|
50
|
+
:host([fit]) .nile-chart-card {
|
|
21
51
|
display: flex;
|
|
22
52
|
flex-direction: column;
|
|
23
53
|
height: 100%;
|
|
24
54
|
}
|
|
25
55
|
|
|
26
|
-
:host([fit]) .chart-wrapper {
|
|
56
|
+
:host([fit]) .nile-chart-wrapper {
|
|
27
57
|
flex: 1 1 auto;
|
|
28
58
|
min-height: 0;
|
|
29
59
|
}
|
|
30
60
|
|
|
31
|
-
:host([fit]) .chart-inner {
|
|
61
|
+
:host([fit]) .nile-chart-inner {
|
|
32
62
|
height: 100%;
|
|
33
63
|
}
|
|
34
64
|
|
|
35
65
|
/* ── Unified Card Container ── */
|
|
36
66
|
|
|
37
|
-
.chart-card {
|
|
67
|
+
.nile-chart-card {
|
|
38
68
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
39
69
|
border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
40
70
|
border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
|
|
41
71
|
box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
|
|
42
72
|
transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
|
|
43
73
|
}
|
|
44
|
-
.chart-card:hover {
|
|
74
|
+
.nile-chart-card:hover {
|
|
45
75
|
box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
|
|
46
76
|
}
|
|
47
77
|
|
|
48
78
|
/* ── Card Header ── */
|
|
49
79
|
|
|
50
|
-
.chart-header {
|
|
80
|
+
.nile-chart-header {
|
|
51
81
|
display: flex;
|
|
52
82
|
flex-direction: row;
|
|
53
83
|
align-items: center;
|
|
@@ -61,11 +91,11 @@ export const styles = css `
|
|
|
61
91
|
border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
|
|
62
92
|
}
|
|
63
93
|
|
|
64
|
-
.chart-header.chart-header--compact {
|
|
94
|
+
.nile-chart-header.nile-chart-header--compact {
|
|
65
95
|
padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
66
96
|
}
|
|
67
97
|
|
|
68
|
-
.chart-header-titles {
|
|
98
|
+
.nile-chart-header-titles {
|
|
69
99
|
display: flex;
|
|
70
100
|
flex-direction: column;
|
|
71
101
|
align-items: flex-start;
|
|
@@ -74,25 +104,54 @@ export const styles = css `
|
|
|
74
104
|
flex: 1 1 auto;
|
|
75
105
|
}
|
|
76
106
|
|
|
77
|
-
.chart-header-title {
|
|
107
|
+
.nile-chart-header-title {
|
|
78
108
|
margin: 0;
|
|
79
109
|
font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
|
|
80
110
|
font-size: var(--nile-type-scale-6, var(--ng-font-size-text-l));
|
|
81
|
-
|
|
111
|
+
font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
|
|
82
112
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
83
113
|
line-height: 1.3;
|
|
114
|
+
white-space: nowrap;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
text-overflow: ellipsis;
|
|
117
|
+
min-width: 0;
|
|
118
|
+
width: 100%;
|
|
84
119
|
}
|
|
85
120
|
|
|
86
|
-
.chart-header-subtitle {
|
|
121
|
+
.nile-chart-header-subtitle {
|
|
87
122
|
margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0 0;
|
|
88
123
|
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
89
124
|
font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
|
|
90
125
|
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
91
126
|
color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
|
|
92
127
|
line-height: 1.4;
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
text-overflow: ellipsis;
|
|
131
|
+
min-width: 0;
|
|
132
|
+
width: 100%;
|
|
93
133
|
}
|
|
94
134
|
|
|
95
|
-
|
|
135
|
+
@container (max-width: 400px) {
|
|
136
|
+
.nile-chart-header {
|
|
137
|
+
padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
138
|
+
}
|
|
139
|
+
.nile-chart-header.nile-chart-header--compact {
|
|
140
|
+
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@container (max-width: 280px) {
|
|
145
|
+
.nile-chart-header {
|
|
146
|
+
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
147
|
+
gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
|
|
148
|
+
}
|
|
149
|
+
.nile-chart-header.nile-chart-header--compact {
|
|
150
|
+
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.nile-chart-header-actions {
|
|
96
155
|
display: flex;
|
|
97
156
|
align-items: center;
|
|
98
157
|
gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
@@ -102,17 +161,41 @@ export const styles = css `
|
|
|
102
161
|
|
|
103
162
|
/* ── Card Body ── */
|
|
104
163
|
|
|
105
|
-
.chart-wrapper {
|
|
164
|
+
.nile-chart-wrapper {
|
|
106
165
|
position: relative;
|
|
107
166
|
}
|
|
108
167
|
|
|
109
|
-
.chart-inner {
|
|
168
|
+
.nile-chart-inner {
|
|
110
169
|
position: relative;
|
|
111
170
|
overflow: hidden;
|
|
112
171
|
border-radius: 0 0 var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl));
|
|
113
172
|
contain: layout style;
|
|
114
173
|
}
|
|
115
174
|
|
|
175
|
+
/* Grid: height applies to the whole card — header + grid together */
|
|
176
|
+
.nile-chart-card--grid {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.nile-chart-card--grid .nile-chart-wrapper {
|
|
182
|
+
flex: 1;
|
|
183
|
+
min-height: 0;
|
|
184
|
+
display: flex;
|
|
185
|
+
flex-direction: column;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.nile-chart-card--grid .nile-chart-inner {
|
|
189
|
+
flex: 1;
|
|
190
|
+
min-height: 0;
|
|
191
|
+
contain: none;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.nile-chart-card--grid nile-data-grid {
|
|
195
|
+
display: block;
|
|
196
|
+
height: 100%;
|
|
197
|
+
}
|
|
198
|
+
|
|
116
199
|
/* ── Default slot (custom chart body only — not named slots) ── */
|
|
117
200
|
slot:not([name])::slotted(*) {
|
|
118
201
|
display: block;
|
|
@@ -152,7 +235,7 @@ export const styles = css `
|
|
|
152
235
|
|
|
153
236
|
/* ── Summary Toggle ── */
|
|
154
237
|
|
|
155
|
-
.chart-toggle {
|
|
238
|
+
.nile-chart-toggle {
|
|
156
239
|
position: absolute;
|
|
157
240
|
bottom: 0;
|
|
158
241
|
left: 0;
|
|
@@ -177,25 +260,25 @@ export const styles = css `
|
|
|
177
260
|
pointer-events: none;
|
|
178
261
|
}
|
|
179
262
|
|
|
180
|
-
.chart-inner:hover .chart-toggle,
|
|
181
|
-
.chart-toggle[aria-expanded='true'] {
|
|
263
|
+
.nile-chart-inner:hover .nile-chart-toggle,
|
|
264
|
+
.nile-chart-toggle[aria-expanded='true'] {
|
|
182
265
|
opacity: 1;
|
|
183
266
|
pointer-events: auto;
|
|
184
267
|
}
|
|
185
268
|
|
|
186
|
-
.chart-toggle:hover {
|
|
269
|
+
.nile-chart-toggle:hover {
|
|
187
270
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
188
271
|
box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
|
|
189
272
|
}
|
|
190
273
|
|
|
191
|
-
.chart-toggle:focus-visible {
|
|
274
|
+
.nile-chart-toggle:focus-visible {
|
|
192
275
|
outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
|
|
193
276
|
outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
|
|
194
277
|
}
|
|
195
278
|
|
|
196
279
|
/* ── Summary Overlay ── */
|
|
197
280
|
|
|
198
|
-
.chart-overlay {
|
|
281
|
+
.nile-chart-overlay {
|
|
199
282
|
position: absolute;
|
|
200
283
|
left: 0;
|
|
201
284
|
right: 0;
|
|
@@ -211,29 +294,29 @@ export const styles = css `
|
|
|
211
294
|
padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
|
|
212
295
|
}
|
|
213
296
|
|
|
214
|
-
.chart-overlay[data-open] {
|
|
297
|
+
.nile-chart-overlay[data-open] {
|
|
215
298
|
transform: translateY(0);
|
|
216
299
|
}
|
|
217
300
|
|
|
218
|
-
.chart-content {
|
|
301
|
+
.nile-chart-content {
|
|
219
302
|
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
220
303
|
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
221
304
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
222
305
|
line-height: 1.6;
|
|
223
306
|
}
|
|
224
307
|
|
|
225
|
-
/* ──
|
|
308
|
+
/* ── Actions Menu (in header) ── */
|
|
226
309
|
|
|
227
|
-
.chart-menu-anchor {
|
|
310
|
+
.nile-chart-menu-anchor {
|
|
228
311
|
position: relative;
|
|
229
312
|
}
|
|
230
313
|
|
|
231
|
-
.chart-menu-trigger {
|
|
314
|
+
.nile-chart-menu-trigger {
|
|
232
315
|
display: flex;
|
|
233
316
|
align-items: center;
|
|
234
317
|
justify-content: center;
|
|
235
|
-
width: var(--nile-
|
|
236
|
-
height: var(--nile-
|
|
318
|
+
width: var(--nile-height-28px, var(--ng-height-28px));
|
|
319
|
+
height: var(--nile-height-28px, var(--ng-height-28px));
|
|
237
320
|
padding: 0;
|
|
238
321
|
border: none;
|
|
239
322
|
border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
|
|
@@ -243,17 +326,17 @@ export const styles = css `
|
|
|
243
326
|
transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
|
|
244
327
|
}
|
|
245
328
|
|
|
246
|
-
.chart-menu-trigger:hover {
|
|
329
|
+
.nile-chart-menu-trigger:hover {
|
|
247
330
|
background: transparent;
|
|
248
331
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
249
332
|
}
|
|
250
333
|
|
|
251
|
-
.chart-menu-trigger:focus-visible {
|
|
334
|
+
.nile-chart-menu-trigger:focus-visible {
|
|
252
335
|
outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
|
|
253
336
|
outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
|
|
254
337
|
}
|
|
255
338
|
|
|
256
|
-
.chart-menu-dropdown {
|
|
339
|
+
.nile-chart-menu-dropdown {
|
|
257
340
|
position: absolute;
|
|
258
341
|
top: 100%;
|
|
259
342
|
right: 0;
|
|
@@ -268,7 +351,7 @@ export const styles = css `
|
|
|
268
351
|
z-index: 10;
|
|
269
352
|
}
|
|
270
353
|
|
|
271
|
-
.chart-menu-item {
|
|
354
|
+
.nile-chart-menu-item {
|
|
272
355
|
display: block;
|
|
273
356
|
width: 100%;
|
|
274
357
|
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
|
|
@@ -283,59 +366,66 @@ export const styles = css `
|
|
|
283
366
|
transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
|
|
284
367
|
}
|
|
285
368
|
|
|
286
|
-
.chart-menu-item:hover {
|
|
287
|
-
background:
|
|
369
|
+
.nile-chart-menu-item:hover {
|
|
370
|
+
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
371
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
288
372
|
}
|
|
289
373
|
|
|
290
|
-
.chart-menu-item.active {
|
|
374
|
+
.nile-chart-menu-item.active {
|
|
291
375
|
color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
|
|
292
376
|
font-weight: 600;
|
|
293
377
|
}
|
|
294
378
|
|
|
295
|
-
.chart-menu-item:focus-visible {
|
|
379
|
+
.nile-chart-menu-item:focus-visible {
|
|
296
380
|
outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
|
|
297
381
|
outline-offset: calc(var(--nile-spacing-2px, var(--ng-outline-offset-2)) * -1);
|
|
298
382
|
}
|
|
299
383
|
|
|
384
|
+
.nile-chart-menu-separator {
|
|
385
|
+
height: var(--nile-border-width-1, var(--ng-stroke-width-1));
|
|
386
|
+
background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
|
|
387
|
+
margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
|
|
388
|
+
}
|
|
389
|
+
|
|
300
390
|
/* ── AI Chat Trigger (in header) ── */
|
|
301
391
|
|
|
302
|
-
.ai-trigger {
|
|
392
|
+
.nile-ai-trigger {
|
|
303
393
|
display: inline-flex;
|
|
304
394
|
align-items: center;
|
|
305
395
|
justify-content: center;
|
|
306
|
-
width: 28px;
|
|
307
|
-
height: 28px;
|
|
396
|
+
width: var(--nile-height-28px, var(--ng-height-28px));
|
|
397
|
+
height: var(--nile-height-28px, var(--ng-height-28px));
|
|
308
398
|
padding: 0;
|
|
309
|
-
border-radius: var(--ng-radius-md
|
|
399
|
+
border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
|
|
310
400
|
background: var(--ng-componentcolors-utility-brand-50, #EFF4FF);
|
|
311
|
-
border: 1
|
|
401
|
+
border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--ng-componentcolors-utility-brand-200, #C7D7FE);
|
|
312
402
|
box-shadow: 0 4px 20px rgba(41, 112, 255, 0.12);
|
|
313
403
|
color: var(--ng-componentcolors-utility-brand-600, #2970FF);
|
|
314
404
|
cursor: pointer;
|
|
315
|
-
transition: background
|
|
405
|
+
transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
|
|
316
406
|
flex-shrink: 0;
|
|
317
407
|
outline: none;
|
|
318
408
|
}
|
|
319
409
|
|
|
320
|
-
.ai-trigger:hover,
|
|
321
|
-
.ai-trigger:focus-visible {
|
|
410
|
+
.nile-ai-trigger:hover,
|
|
411
|
+
.nile-ai-trigger:focus-visible {
|
|
322
412
|
background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
|
|
323
413
|
}
|
|
324
414
|
|
|
325
|
-
.chart-inner--kpi {
|
|
415
|
+
.nile-chart-inner--kpi {
|
|
326
416
|
overflow-x: hidden;
|
|
327
417
|
overflow-y: auto;
|
|
328
418
|
-webkit-overflow-scrolling: touch;
|
|
329
419
|
contain: none;
|
|
330
420
|
}
|
|
331
421
|
|
|
332
|
-
.ai-trigger.active {
|
|
422
|
+
.nile-ai-trigger.active {
|
|
333
423
|
background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
|
|
334
424
|
}
|
|
335
425
|
|
|
336
426
|
/* ── AI Chat Panel Overlay ── */
|
|
337
427
|
|
|
338
|
-
.ai-panel-overlay {
|
|
428
|
+
.nile-ai-panel-overlay {
|
|
339
429
|
position: absolute;
|
|
340
430
|
left: 0;
|
|
341
431
|
right: 0;
|
|
@@ -351,90 +441,90 @@ export const styles = css `
|
|
|
351
441
|
overflow: hidden;
|
|
352
442
|
}
|
|
353
443
|
|
|
354
|
-
.ai-panel-overlay[data-open] {
|
|
444
|
+
.nile-ai-panel-overlay[data-open] {
|
|
355
445
|
transform: translateY(0);
|
|
356
446
|
}
|
|
357
447
|
|
|
358
448
|
/* ── Skeleton loader (matches nile-skeleton-loader animation style) ── */
|
|
359
449
|
|
|
360
|
-
:host([loading]) .chart-card {
|
|
450
|
+
:host([loading]) .nile-chart-card {
|
|
361
451
|
pointer-events: none;
|
|
362
452
|
}
|
|
363
453
|
|
|
364
|
-
.chart-skeleton {
|
|
454
|
+
.nile-chart-skeleton {
|
|
365
455
|
display: flex;
|
|
366
456
|
flex-direction: column;
|
|
367
457
|
gap: 0;
|
|
368
|
-
padding: var(--nile-spacing-3xl,
|
|
458
|
+
padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
369
459
|
min-height: var(--nile-chart-skeleton-height, 300px);
|
|
370
460
|
}
|
|
371
461
|
|
|
372
|
-
.chart-skeleton-body {
|
|
462
|
+
.nile-chart-skeleton-body {
|
|
373
463
|
display: flex;
|
|
374
464
|
flex-direction: column;
|
|
375
465
|
justify-content: space-around;
|
|
376
466
|
flex: 1;
|
|
377
|
-
gap: var(--nile-spacing-
|
|
467
|
+
gap: var(--nile-spacing-14px, var(--ng-spacing-lg));
|
|
378
468
|
padding-left: 44px;
|
|
379
469
|
position: relative;
|
|
380
470
|
}
|
|
381
471
|
|
|
382
472
|
/* Vertical y-axis rule */
|
|
383
|
-
.chart-skeleton-body::before {
|
|
473
|
+
.nile-chart-skeleton-body::before {
|
|
384
474
|
content: '';
|
|
385
475
|
position: absolute;
|
|
386
476
|
left: 34px;
|
|
387
|
-
top:
|
|
388
|
-
bottom:
|
|
389
|
-
width:
|
|
390
|
-
border-radius:
|
|
391
|
-
background: var(--nile-colors-neutral-400,
|
|
477
|
+
top: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
478
|
+
bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
479
|
+
width: var(--nile-border-width-2, var(--ng-stroke-width-2));
|
|
480
|
+
border-radius: var(--nile-border-width-1, var(--ng-stroke-width-1));
|
|
481
|
+
background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
392
482
|
}
|
|
393
483
|
|
|
394
|
-
.chart-skeleton-row {
|
|
484
|
+
.nile-chart-skeleton-row {
|
|
395
485
|
display: flex;
|
|
396
486
|
align-items: center;
|
|
397
|
-
gap: var(--nile-spacing-md,
|
|
398
|
-
height:
|
|
487
|
+
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
488
|
+
height: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
|
|
399
489
|
}
|
|
400
490
|
|
|
401
|
-
.chart-skeleton-ylabel {
|
|
402
|
-
width: 26px;
|
|
403
|
-
height: 10px;
|
|
404
|
-
border-radius:
|
|
491
|
+
.nile-chart-skeleton-ylabel {
|
|
492
|
+
width: var(--nile-height-26px, 26px);
|
|
493
|
+
height: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
|
|
494
|
+
border-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
|
|
405
495
|
flex-shrink: 0;
|
|
406
|
-
background: var(--nile-colors-neutral-400,
|
|
496
|
+
background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
407
497
|
animation: nile-skeleton-blink 1.2s ease-in-out infinite;
|
|
408
498
|
}
|
|
409
499
|
|
|
410
|
-
.chart-skeleton-bar {
|
|
411
|
-
height:
|
|
500
|
+
.nile-chart-skeleton-bar {
|
|
501
|
+
height: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
412
502
|
width: var(--w, 60%);
|
|
413
|
-
border-radius: 0
|
|
414
|
-
background: var(--nile-colors-neutral-400,
|
|
503
|
+
border-radius: 0 var(--nile-radius-radius-sm, var(--ng-radius-xs)) var(--nile-radius-radius-sm, var(--ng-radius-xs)) 0;
|
|
504
|
+
background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
415
505
|
animation: nile-skeleton-blink 1.2s ease-in-out infinite;
|
|
416
506
|
}
|
|
417
507
|
|
|
418
508
|
/* Staggered wave across the bars */
|
|
419
|
-
.chart-skeleton-row:nth-child(1) .chart-skeleton-bar { animation-delay: 0ms; }
|
|
420
|
-
.chart-skeleton-row:nth-child(2) .chart-skeleton-bar { animation-delay: 100ms; }
|
|
421
|
-
.chart-skeleton-row:nth-child(3) .chart-skeleton-bar { animation-delay: 200ms; }
|
|
422
|
-
.chart-skeleton-row:nth-child(4) .chart-skeleton-bar { animation-delay: 300ms; }
|
|
423
|
-
.chart-skeleton-row:nth-child(5) .chart-skeleton-bar { animation-delay: 400ms; }
|
|
509
|
+
.nile-chart-skeleton-row:nth-child(1) .nile-chart-skeleton-bar { animation-delay: 0ms; }
|
|
510
|
+
.nile-chart-skeleton-row:nth-child(2) .nile-chart-skeleton-bar { animation-delay: 100ms; }
|
|
511
|
+
.nile-chart-skeleton-row:nth-child(3) .nile-chart-skeleton-bar { animation-delay: 200ms; }
|
|
512
|
+
.nile-chart-skeleton-row:nth-child(4) .nile-chart-skeleton-bar { animation-delay: 300ms; }
|
|
513
|
+
.nile-chart-skeleton-row:nth-child(5) .nile-chart-skeleton-bar { animation-delay: 400ms; }
|
|
424
514
|
|
|
425
515
|
/* Horizontal x-axis labels row */
|
|
426
|
-
.chart-skeleton-xaxis-row {
|
|
516
|
+
.nile-chart-skeleton-xaxis-row {
|
|
427
517
|
display: flex;
|
|
428
518
|
justify-content: space-around;
|
|
429
519
|
padding-left: 44px;
|
|
430
|
-
margin-top: var(--nile-spacing-
|
|
520
|
+
margin-top: var(--nile-spacing-14px, var(--ng-spacing-lg));
|
|
431
521
|
}
|
|
432
522
|
|
|
433
|
-
.chart-skeleton-xlabel {
|
|
434
|
-
height: 10px;
|
|
435
|
-
width: 30px;
|
|
436
|
-
border-radius:
|
|
437
|
-
background: var(--nile-colors-neutral-400,
|
|
523
|
+
.nile-chart-skeleton-xlabel {
|
|
524
|
+
height: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
|
|
525
|
+
width: var(--nile-height-30px, 30px);
|
|
526
|
+
border-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
|
|
527
|
+
background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
438
528
|
animation: nile-skeleton-blink 1.2s ease-in-out infinite;
|
|
439
529
|
animation-delay: var(--d, 0ms);
|
|
440
530
|
}
|
|
@@ -445,9 +535,9 @@ export const styles = css `
|
|
|
445
535
|
}
|
|
446
536
|
|
|
447
537
|
@media (prefers-reduced-motion: reduce) {
|
|
448
|
-
.chart-skeleton-bar,
|
|
449
|
-
.chart-skeleton-ylabel,
|
|
450
|
-
.chart-skeleton-xlabel {
|
|
538
|
+
.nile-chart-skeleton-bar,
|
|
539
|
+
.nile-chart-skeleton-ylabel,
|
|
540
|
+
.nile-chart-skeleton-xlabel {
|
|
451
541
|
animation: none;
|
|
452
542
|
opacity: 0.7;
|
|
453
543
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
import NileElement from '../internal/nile-element.js';
|
|
3
|
-
import type { NileChartConfig } from './nile-chart-config.js';
|
|
3
|
+
import type { NileChartConfig, NileChartMenuConfig } from './nile-chart-config.js';
|
|
4
4
|
import type { NileChartConfigInputType } from '../internal/types/index.js';
|
|
5
5
|
import '../nile-bar-chart/index.js';
|
|
6
6
|
import '../nile-pie-chart/index.js';
|
|
@@ -52,6 +52,7 @@ import '@aquera/nile-data-grid';
|
|
|
52
52
|
import '../nile-ai-panel/index.js';
|
|
53
53
|
export declare class NileChart extends NileElement {
|
|
54
54
|
static styles: CSSResultGroup;
|
|
55
|
+
private _headerTipEl;
|
|
55
56
|
/** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
|
|
56
57
|
config: NileChartConfig | NileChartConfigInputType | null;
|
|
57
58
|
/**
|
|
@@ -71,16 +72,22 @@ export declare class NileChart extends NileElement {
|
|
|
71
72
|
*/
|
|
72
73
|
chartTypeAttr: string;
|
|
73
74
|
/** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
|
|
75
|
+
summary: string;
|
|
74
76
|
/**
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
+
* Controls which items appear in the actions menu. All items are opt-in —
|
|
78
|
+
* only items explicitly set to `true` are shown. Merged with (and takes
|
|
79
|
+
* priority over) `config.menu`.
|
|
80
|
+
*
|
|
81
|
+
* @example
|
|
82
|
+
* // PNG + CSV only
|
|
83
|
+
* chart.menu = { enabled: true, downloadPng: true, downloadCsv: true }
|
|
77
84
|
*/
|
|
78
|
-
|
|
79
|
-
summary: string;
|
|
85
|
+
menu: NileChartMenuConfig | null;
|
|
80
86
|
private activeType;
|
|
81
87
|
private activeConfig;
|
|
82
88
|
private menuOpen;
|
|
83
89
|
private chatOpen;
|
|
90
|
+
private _hcChart;
|
|
84
91
|
/** True when elements are projected into the `header` slot (default title/subtitle hidden). */
|
|
85
92
|
private hasHeaderSlotContent;
|
|
86
93
|
/** True when elements are projected into `header-actions` (used to show the header row). */
|
|
@@ -90,6 +97,7 @@ export declare class NileChart extends NileElement {
|
|
|
90
97
|
/** AI panel shows when ai.enabled is true OR when a summary is provided. */
|
|
91
98
|
private get aiEnabled();
|
|
92
99
|
private handleOutsideClick;
|
|
100
|
+
private handleChartReady;
|
|
93
101
|
connectedCallback(): void;
|
|
94
102
|
disconnectedCallback(): void;
|
|
95
103
|
private mergeChartTypeFromAttr;
|
|
@@ -112,8 +120,19 @@ export declare class NileChart extends NileElement {
|
|
|
112
120
|
/** Direct children with `slot=` — header row renders on first paint before slot assignment runs. */
|
|
113
121
|
private lightDomHasSlot;
|
|
114
122
|
private shouldShowHeader;
|
|
115
|
-
private
|
|
123
|
+
private buildExportingOptions;
|
|
124
|
+
/** Ensures exporting modules are loaded and the chart's exporting/fullscreen instances exist. */
|
|
125
|
+
private ensureExporting;
|
|
126
|
+
private viewFullscreen;
|
|
127
|
+
private printChart;
|
|
128
|
+
private exportChart;
|
|
129
|
+
private downloadCsv;
|
|
130
|
+
private renderActionsMenu;
|
|
116
131
|
private renderAiTrigger;
|
|
132
|
+
private _showHeaderTip;
|
|
133
|
+
private _hideHeaderTip;
|
|
134
|
+
private _onTitleEnter;
|
|
135
|
+
private _onSubtitleEnter;
|
|
117
136
|
private renderHeader;
|
|
118
137
|
private renderAiPanel;
|
|
119
138
|
private renderChartContent;
|