@aquera/nile-visualization 2.9.1 → 2.9.2
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.
|
@@ -47,7 +47,7 @@ export const styles = css `
|
|
|
47
47
|
--nile-kpi-label-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
|
|
48
48
|
--nile-kpi-label-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
49
49
|
--nile-kpi-label-font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
|
|
50
|
-
--nile-kpi-value-font-size: clamp(
|
|
50
|
+
--nile-kpi-value-font-size: clamp(1rem, 5cqi + 0.25rem, 36px);
|
|
51
51
|
--nile-kpi-value-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
52
52
|
--nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
|
|
53
53
|
--nile-kpi-prefix-suffix-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
|
|
@@ -111,13 +111,17 @@ export const styles = css `
|
|
|
111
111
|
flex: 1 1 auto;
|
|
112
112
|
display: flex;
|
|
113
113
|
flex-direction: column;
|
|
114
|
-
gap: var(--nile-kpi-content-gap);
|
|
114
|
+
/* gap: var(--nile-kpi-content-gap); */
|
|
115
115
|
padding: var(--nile-kpi-padding-v) var(--nile-kpi-padding-h);
|
|
116
116
|
min-width: 0;
|
|
117
|
+
width: 100%;
|
|
118
|
+
max-width: 100%;
|
|
119
|
+
box-sizing: border-box;
|
|
117
120
|
overflow: hidden;
|
|
118
121
|
}
|
|
119
122
|
|
|
120
123
|
.kpi-label {
|
|
124
|
+
display: block;
|
|
121
125
|
margin: 0;
|
|
122
126
|
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
123
127
|
font-size: var(--nile-kpi-label-font-size);
|
|
@@ -129,6 +133,8 @@ export const styles = css `
|
|
|
129
133
|
text-overflow: ellipsis;
|
|
130
134
|
min-width: 0;
|
|
131
135
|
width: 100%;
|
|
136
|
+
max-width: 100%;
|
|
137
|
+
box-sizing: border-box;
|
|
132
138
|
}
|
|
133
139
|
|
|
134
140
|
.kpi-value-row {
|
|
@@ -149,7 +155,10 @@ export const styles = css `
|
|
|
149
155
|
line-height: 1.2;
|
|
150
156
|
cursor: default;
|
|
151
157
|
white-space: nowrap;
|
|
152
|
-
|
|
158
|
+
min-width: 0;
|
|
159
|
+
flex: 0 1 auto;
|
|
160
|
+
overflow: hidden;
|
|
161
|
+
text-overflow: ellipsis;
|
|
153
162
|
}
|
|
154
163
|
|
|
155
164
|
.kpi-prefix,
|
|
@@ -204,16 +213,18 @@ export const styles = css `
|
|
|
204
213
|
}
|
|
205
214
|
|
|
206
215
|
.kpi-description {
|
|
216
|
+
display: block;
|
|
207
217
|
margin: 0;
|
|
208
218
|
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
209
219
|
font-size: var(--nile-kpi-description-font-size);
|
|
210
220
|
color: var(--nile-kpi-description-color);
|
|
211
221
|
line-height: 1.5;
|
|
212
|
-
white-space: nowrap;
|
|
213
222
|
overflow: hidden;
|
|
214
223
|
text-overflow: ellipsis;
|
|
215
224
|
min-width: 0;
|
|
216
225
|
width: 100%;
|
|
226
|
+
max-width: 100%;
|
|
227
|
+
box-sizing: border-box;
|
|
217
228
|
}
|
|
218
229
|
|
|
219
230
|
.kpi-sparkline {
|
|
@@ -223,6 +234,53 @@ export const styles = css `
|
|
|
223
234
|
margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
224
235
|
}
|
|
225
236
|
|
|
237
|
+
/* ── Container queries: scale down for narrow cards ── */
|
|
238
|
+
|
|
239
|
+
/* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
|
|
240
|
+
@container (max-width: 280px) {
|
|
241
|
+
:host {
|
|
242
|
+
--nile-kpi-padding-v: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
243
|
+
--nile-kpi-padding-h: var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
244
|
+
--nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
|
|
245
|
+
--nile-kpi-label-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.kpi-value-row {
|
|
249
|
+
gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.kpi-trend {
|
|
253
|
+
padding: 0;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Small: ~220px and below — tighten further; description/sparkline stay visible. */
|
|
258
|
+
@container (max-width: 220px) {
|
|
259
|
+
:host {
|
|
260
|
+
--nile-kpi-padding-v: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
261
|
+
--nile-kpi-padding-h: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
262
|
+
--nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
263
|
+
--nile-kpi-description-font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.kpi-sparkline {
|
|
267
|
+
flex-basis: 32px;
|
|
268
|
+
min-height: 18px;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Very small: under ~180px — stack the trend below the value so neither clips. */
|
|
273
|
+
@container (max-width: 180px) {
|
|
274
|
+
.kpi-value-row {
|
|
275
|
+
flex-wrap: wrap;
|
|
276
|
+
row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.kpi-trend {
|
|
280
|
+
flex-basis: 100%;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
226
284
|
/* ── Gauge variant ── */
|
|
227
285
|
|
|
228
286
|
.kpi--gauge {
|