@tolle_/tolle-ui 18.3.0 → 18.3.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.
- package/esm2022/lib/alert-dialog-dynamic.component.mjs +13 -9
- package/esm2022/lib/alert-dialog.types.mjs +6 -1
- package/esm2022/lib/bar-list.component.mjs +95 -0
- package/esm2022/lib/category-bar.component.mjs +130 -0
- package/esm2022/lib/chart-spark.component.mjs +120 -0
- package/esm2022/lib/chart.component.mjs +131 -45
- package/esm2022/lib/chart.service.mjs +33 -8
- package/esm2022/lib/progress-circle.component.mjs +138 -0
- package/esm2022/lib/tracker.component.mjs +84 -0
- package/esm2022/public-api.mjs +6 -1
- package/fesm2022/tolle-ui.mjs +722 -60
- package/fesm2022/tolle-ui.mjs.map +1 -1
- package/lib/alert-dialog-dynamic.component.d.ts +7 -1
- package/lib/alert-dialog.types.d.ts +2 -0
- package/lib/bar-list.component.d.ts +39 -0
- package/lib/category-bar.component.d.ts +49 -0
- package/lib/chart-spark.component.d.ts +49 -0
- package/lib/chart.component.d.ts +68 -9
- package/lib/chart.service.d.ts +25 -5
- package/lib/progress-circle.component.d.ts +35 -0
- package/lib/tracker.component.d.ts +39 -0
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
- package/registry/docs-content.json +330 -2
- package/registry/llms-full.txt +98 -2
- package/registry/llms.txt +5 -0
- package/registry/manifest.json +380 -3
- package/registry/r/alert-dialog-dynamic.json +2 -2
- package/registry/r/alert-dialog.json +1 -1
- package/registry/r/bar-list.json +21 -0
- package/registry/r/category-bar.json +21 -0
- package/registry/r/chart-pie.json +1 -1
- package/registry/r/chart-spark.json +30 -0
- package/registry/r/chart.json +2 -2
- package/registry/r/progress-circle.json +21 -0
- package/registry/r/tracker.json +25 -0
- package/registry/registry.json +112 -0
|
@@ -8,8 +8,14 @@ export declare class AlertDialogDynamicComponent {
|
|
|
8
8
|
* content panel plays its exit animation before the overlay is torn down.
|
|
9
9
|
*/
|
|
10
10
|
closing: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Result recorded by the action/cancel buttons' `confirmed`/`cancelled`
|
|
13
|
+
* outputs, which fire *before* the button drives the dialog closed. The
|
|
14
|
+
* single close path (`onOpenChange`) then reads it, so a confirm reports
|
|
15
|
+
* `true` instead of racing with the button's own `false` close signal.
|
|
16
|
+
*/
|
|
17
|
+
result: boolean;
|
|
11
18
|
onOpenChange(open: boolean): void;
|
|
12
|
-
close(result: boolean): void;
|
|
13
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<AlertDialogDynamicComponent, never>;
|
|
14
20
|
static ɵcmp: i0.ɵɵComponentDeclaration<AlertDialogDynamicComponent, "tolle-alert-dialog-dynamic", never, {}, {}, never, never, true, never>;
|
|
15
21
|
}
|
|
@@ -11,5 +11,7 @@ export interface AlertDialogConfig {
|
|
|
11
11
|
export declare class AlertDialogRef {
|
|
12
12
|
private readonly _afterClosed;
|
|
13
13
|
afterClosed$: Observable<boolean>;
|
|
14
|
+
/** Guards against the dialog's several close paths racing to emit twice. */
|
|
15
|
+
private closed;
|
|
14
16
|
close(result?: boolean): void;
|
|
15
17
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/** One resolved row: its label, its value, and its share of the list's largest value. */
|
|
4
|
+
export interface BarListRow {
|
|
5
|
+
label: string;
|
|
6
|
+
value: number;
|
|
7
|
+
percent: number;
|
|
8
|
+
formattedValue: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A ranked list of horizontal bars — label left, value right, bar width
|
|
12
|
+
* scaled to each row's share of the list's largest value. Unlike a chart
|
|
13
|
+
* series or a category bar's segments, every bar is the same accent: rank is
|
|
14
|
+
* carried by length, not by a categorical palette.
|
|
15
|
+
* @new
|
|
16
|
+
*/
|
|
17
|
+
export declare class BarListComponent implements OnChanges {
|
|
18
|
+
/**
|
|
19
|
+
* Angular writes a bound `class` input through its styling path, which does
|
|
20
|
+
* not mark an OnPush component dirty — without this hook the component keeps
|
|
21
|
+
* rendering the class it was born with.
|
|
22
|
+
*/
|
|
23
|
+
ngOnChanges(): void;
|
|
24
|
+
/** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
|
|
25
|
+
trackByIndex: (index: number) => number;
|
|
26
|
+
/** Rows to rank, in the order they should be drawn. @default [] */
|
|
27
|
+
data: Record<string, any>[];
|
|
28
|
+
/** Row key holding each row's label. @default 'label' */
|
|
29
|
+
labelKey: string;
|
|
30
|
+
/** Row key holding each row's numeric value. @default 'value' */
|
|
31
|
+
valueKey: string;
|
|
32
|
+
/** Extra Tailwind classes merged onto the list via `cn()` (last-wins). */
|
|
33
|
+
class: string;
|
|
34
|
+
private readonly cdr;
|
|
35
|
+
get rows(): BarListRow[];
|
|
36
|
+
get computedClass(): string;
|
|
37
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BarListComponent, never>;
|
|
38
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BarListComponent, "tolle-bar-list", never, { "data": { "alias": "data"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
39
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/** One resolved segment: its share of the bar's width, its paint, and the numbers behind it. */
|
|
4
|
+
export interface CategoryBarSegment {
|
|
5
|
+
label: string;
|
|
6
|
+
value: number;
|
|
7
|
+
percent: number;
|
|
8
|
+
color: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A single bar split into proportional, labelled ranges — for showing where
|
|
12
|
+
* one value falls against a scale made of categories (a credit score inside
|
|
13
|
+
* "Poor / Fair / Good / Excellent", latency inside "Fast / OK / Slow").
|
|
14
|
+
*
|
|
15
|
+
* Segments take the chart palette by position, since a category bar has no
|
|
16
|
+
* stable per-render identity to key colour off the way a chart series does —
|
|
17
|
+
* pass `colors` to override.
|
|
18
|
+
* @new
|
|
19
|
+
*/
|
|
20
|
+
export declare class CategoryBarComponent implements OnChanges {
|
|
21
|
+
/**
|
|
22
|
+
* Angular writes a bound `class` input through its styling path, which does
|
|
23
|
+
* not mark an OnPush component dirty — without this hook the component keeps
|
|
24
|
+
* rendering the class it was born with.
|
|
25
|
+
*/
|
|
26
|
+
ngOnChanges(): void;
|
|
27
|
+
/** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
|
|
28
|
+
trackByIndex: (index: number) => number;
|
|
29
|
+
/** Width of each segment. Values that are not finite and greater than zero are dropped. @default [] */
|
|
30
|
+
values: number[];
|
|
31
|
+
/** Name for each segment, used in the accessible summary and as a title tooltip. @default [] */
|
|
32
|
+
labels: string[];
|
|
33
|
+
/** Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. @default [] */
|
|
34
|
+
colors: string[];
|
|
35
|
+
/** Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. @default null */
|
|
36
|
+
markerValue: number | null;
|
|
37
|
+
/** Accessible name, prefixed onto the sr-only summary of segments and marker. @default '' */
|
|
38
|
+
ariaLabel: string;
|
|
39
|
+
/** Extra Tailwind classes merged onto the bar via `cn()` (last-wins). */
|
|
40
|
+
class: string;
|
|
41
|
+
private readonly cdr;
|
|
42
|
+
private get total();
|
|
43
|
+
get segments(): CategoryBarSegment[];
|
|
44
|
+
get clampedMarker(): number | null;
|
|
45
|
+
get summary(): string;
|
|
46
|
+
get computedClass(): string;
|
|
47
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CategoryBarComponent, never>;
|
|
48
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CategoryBarComponent, "tolle-category-bar", never, { "values": { "alias": "values"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "markerValue": { "alias": "markerValue"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
49
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import { type ChartMargin, type ChartSeries } from './chart.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
/**
|
|
5
|
+
* A minimal inline chart: one series, no grid, no axes, no legend — sized to
|
|
6
|
+
* sit next to a number in a table cell or a stat card. A thin composition
|
|
7
|
+
* over `tolle-chart`; it draws nothing of its own and inherits `--chart-1`
|
|
8
|
+
* the same way any other single-series chart in this library does.
|
|
9
|
+
* @new
|
|
10
|
+
*/
|
|
11
|
+
export declare class ChartSparkComponent implements OnChanges {
|
|
12
|
+
/**
|
|
13
|
+
* Angular writes a bound `class` input through its styling path, which does
|
|
14
|
+
* not mark an OnPush component dirty — without this hook the component keeps
|
|
15
|
+
* rendering the class it was born with.
|
|
16
|
+
*/
|
|
17
|
+
ngOnChanges(): void;
|
|
18
|
+
/** Rows to plot, in x order. @default [] */
|
|
19
|
+
data: Record<string, any>[];
|
|
20
|
+
/** Row key holding each row's numeric value. @default 'value' */
|
|
21
|
+
valueKey: string;
|
|
22
|
+
/** Row key holding each row's x position. Only matters once `hover` is on. @default '' */
|
|
23
|
+
xKey: string;
|
|
24
|
+
/** Which mark to draw. @default 'line' */
|
|
25
|
+
type: 'line' | 'area' | 'bar';
|
|
26
|
+
/** Interpolation for line/area. @default 'linear' */
|
|
27
|
+
curve: 'linear' | 'smooth';
|
|
28
|
+
/** Largest bar thickness in px, used when `type` is 'bar'. @default 6 */
|
|
29
|
+
maxBarWidth: number;
|
|
30
|
+
/** Height in px. @default 32 */
|
|
31
|
+
height: number;
|
|
32
|
+
/** Renders the crosshair, hit layer and tooltip. @default false */
|
|
33
|
+
hover: boolean;
|
|
34
|
+
/** Shows the data table instead of leaving it visually hidden. @default false */
|
|
35
|
+
showTable: boolean;
|
|
36
|
+
/** Accessible name, used as the svg <title>. @default '' */
|
|
37
|
+
ariaLabel: string;
|
|
38
|
+
/** Longer summary used as the svg <desc>. Falls back to `ariaLabel`. @default '' */
|
|
39
|
+
description: string;
|
|
40
|
+
/** Space reserved around the plot — a sparkline has no axis labels to fit. @default { top: 2, right: 2, bottom: 2, left: 2 } */
|
|
41
|
+
margin: ChartMargin;
|
|
42
|
+
/** Extra Tailwind classes merged onto the chart via `cn()` (last-wins). */
|
|
43
|
+
class: string;
|
|
44
|
+
private readonly cdr;
|
|
45
|
+
/** Always exactly one series, reading `valueKey` off each row. */
|
|
46
|
+
get series(): ChartSeries[];
|
|
47
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ChartSparkComponent, never>;
|
|
48
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ChartSparkComponent, "tolle-chart-spark", never, { "data": { "alias": "data"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "type": { "alias": "type"; "required": false; }; "curve": { "alias": "curve"; "required": false; }; "maxBarWidth": { "alias": "maxBarWidth"; "required": false; }; "height": { "alias": "height"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
49
|
+
}
|
package/lib/chart.component.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { EventEmitter, ChangeDetectorRef, ElementRef, OnInit, OnChanges, OnDestroy, AfterViewInit } from '@angular/core';
|
|
2
2
|
import { Subscription } from 'rxjs';
|
|
3
3
|
import { type VariantProps } from 'class-variance-authority';
|
|
4
|
-
import { ChartService, type ChartSeries, type ChartMargin } from './chart.service';
|
|
4
|
+
import { ChartService, type ChartSeries, type ChartMargin, type ChartOrientation } from './chart.service';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
-
export type { ChartSeries, ChartMargin, ChartTick, ChartBand } from './chart.service';
|
|
6
|
+
export type { ChartSeries, ChartMargin, ChartTick, ChartBand, ChartOrientation } from './chart.service';
|
|
7
7
|
/**
|
|
8
8
|
* Base for every chart part that has to redraw when the shared scales change.
|
|
9
9
|
* Parts subscribe to the service rather than reading the container component,
|
|
@@ -203,6 +203,11 @@ export declare class ChartComponent implements OnInit, OnChanges, AfterViewInit,
|
|
|
203
203
|
description: string;
|
|
204
204
|
/** Stacks marks on a shared baseline instead of grouping them. @default false */
|
|
205
205
|
stacked: boolean;
|
|
206
|
+
/**
|
|
207
|
+
* Which physical axis carries the category vs the value. Only bars support
|
|
208
|
+
* 'horizontal' — line/area marks stay vertical regardless. @default 'vertical'
|
|
209
|
+
*/
|
|
210
|
+
orientation: ChartOrientation;
|
|
206
211
|
/** Renders the crosshair, hit layer and shared tooltip. @default true */
|
|
207
212
|
hover: boolean;
|
|
208
213
|
/** Shows the data table instead of leaving it visually hidden. @default false */
|
|
@@ -238,28 +243,56 @@ export declare class ChartComponent implements OnInit, OnChanges, AfterViewInit,
|
|
|
238
243
|
/**
|
|
239
244
|
* One catchment rect per x position, deliberately wider than the marks it
|
|
240
245
|
* covers — readers aim at a category, never at a 2px line or an 8px dot.
|
|
246
|
+
* Spans the full plot in the cross direction: full height in a vertical
|
|
247
|
+
* chart, full width in a horizontal one.
|
|
241
248
|
*/
|
|
242
|
-
get
|
|
249
|
+
get hitRects(): {
|
|
250
|
+
x: number;
|
|
251
|
+
y: number;
|
|
252
|
+
width: number;
|
|
253
|
+
height: number;
|
|
254
|
+
}[];
|
|
243
255
|
onEnterBand(index: number): void;
|
|
244
256
|
onPointerLeave(): void;
|
|
245
257
|
get computedClass(): string;
|
|
246
258
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
|
|
247
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "tolle-chart", never, { "data": { "alias": "data"; "required": false; }; "series": { "alias": "series"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "height": { "alias": "height"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "xHeader": { "alias": "xHeader"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "density": { "alias": "density"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, ["*"], true, never>;
|
|
259
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "tolle-chart", never, { "data": { "alias": "data"; "required": false; }; "series": { "alias": "series"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "height": { "alias": "height"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "xHeader": { "alias": "xHeader"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "density": { "alias": "density"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, ["*"], true, never>;
|
|
248
260
|
}
|
|
249
|
-
/**
|
|
261
|
+
/**
|
|
262
|
+
* Rules at the value ticks, with optional rules at the category positions.
|
|
263
|
+
* Orientation-aware: in a horizontal chart the value rules run vertically and
|
|
264
|
+
* the (optional) category rules run horizontally — the transpose of a
|
|
265
|
+
* vertical chart's grid.
|
|
266
|
+
*/
|
|
250
267
|
export declare class ChartGridComponent extends ChartChild {
|
|
251
|
-
/** Also draws a rule at every
|
|
268
|
+
/** Also draws a rule at every category position. @default false */
|
|
252
269
|
vertical: boolean;
|
|
253
270
|
/** Extra Tailwind classes merged onto each rule via `cn()` (last-wins). */
|
|
254
271
|
class: string;
|
|
255
|
-
|
|
272
|
+
/** Rules at each value tick, spanning the plot in the cross direction. */
|
|
273
|
+
get valueLines(): {
|
|
274
|
+
x1: number;
|
|
275
|
+
y1: number;
|
|
276
|
+
x2: number;
|
|
277
|
+
y2: number;
|
|
278
|
+
}[];
|
|
279
|
+
/** Rules at each category position, only when `vertical` is set. */
|
|
280
|
+
get categoryLines(): {
|
|
281
|
+
x1: number;
|
|
282
|
+
y1: number;
|
|
283
|
+
x2: number;
|
|
284
|
+
y2: number;
|
|
285
|
+
}[];
|
|
256
286
|
get lineClass(): string;
|
|
257
287
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChartGridComponent, never>;
|
|
258
288
|
static ɵcmp: i0.ɵɵComponentDeclaration<ChartGridComponent, "svg:g[tolle-chart-grid]", never, { "vertical": { "alias": "vertical"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
259
289
|
}
|
|
260
290
|
/** X-axis tick labels, thinned so they never collide. */
|
|
261
291
|
export declare class ChartXAxisComponent extends ChartChild {
|
|
262
|
-
/**
|
|
292
|
+
/**
|
|
293
|
+
* Approximate px per character, used to decide when category labels would
|
|
294
|
+
* collide. Only consulted in the vertical orientation. @default 7
|
|
295
|
+
*/
|
|
263
296
|
charWidth: number;
|
|
264
297
|
/** Extra Tailwind classes merged onto each label via `cn()` (last-wins). */
|
|
265
298
|
class: string;
|
|
@@ -268,6 +301,11 @@ export declare class ChartXAxisComponent extends ChartChild {
|
|
|
268
301
|
* gets, so a dense axis thins out instead of overprinting itself.
|
|
269
302
|
*/
|
|
270
303
|
get stride(): number;
|
|
304
|
+
/**
|
|
305
|
+
* Vertical orientation: category labels, thinned so they never collide
|
|
306
|
+
* (today's behaviour). Horizontal orientation: this is the bottom axis'
|
|
307
|
+
* physical position, which a horizontal chart uses for its value ticks.
|
|
308
|
+
*/
|
|
271
309
|
get visibleTicks(): {
|
|
272
310
|
x: number;
|
|
273
311
|
label: string;
|
|
@@ -284,6 +322,15 @@ export declare class ChartYAxisComponent extends ChartChild {
|
|
|
284
322
|
/** Extra Tailwind classes merged onto each label via `cn()` (last-wins). */
|
|
285
323
|
class: string;
|
|
286
324
|
get labelX(): number;
|
|
325
|
+
/**
|
|
326
|
+
* Vertical orientation: value ticks (today's behaviour). Horizontal
|
|
327
|
+
* orientation: this is the left axis' physical position, which a
|
|
328
|
+
* horizontal chart uses for its category labels.
|
|
329
|
+
*/
|
|
330
|
+
get visibleTicks(): {
|
|
331
|
+
y: number;
|
|
332
|
+
label: string;
|
|
333
|
+
}[];
|
|
287
334
|
get labelClass(): string;
|
|
288
335
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChartYAxisComponent, never>;
|
|
289
336
|
static ɵcmp: i0.ɵɵComponentDeclaration<ChartYAxisComponent, "svg:g[tolle-chart-y-axis]", never, { "offset": { "alias": "offset"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
@@ -333,6 +380,12 @@ export declare class ChartAreaComponent extends ChartChild {
|
|
|
333
380
|
* Handles both directions, so a negative value rounds downward.
|
|
334
381
|
*/
|
|
335
382
|
export declare function barPath(x: number, width: number, yBase: number, yValue: number, radius: number): string;
|
|
383
|
+
/**
|
|
384
|
+
* `barPath()` transposed for horizontal bars: fixed vertical extent
|
|
385
|
+
* `[y, y+height]`, variable horizontal extent `[xBase, xValue]`, rounded at
|
|
386
|
+
* the `xValue` (data) end.
|
|
387
|
+
*/
|
|
388
|
+
export declare function barPathHorizontal(y: number, height: number, xBase: number, xValue: number, radius: number): string;
|
|
336
389
|
/**
|
|
337
390
|
* A bar mark for one series. Grouped beside its siblings by default, stacked
|
|
338
391
|
* when the container's `stacked` is set. The data end carries a 4px radius, the
|
|
@@ -355,7 +408,13 @@ export declare class ChartBarComponent extends ChartChild {
|
|
|
355
408
|
protected register(): void;
|
|
356
409
|
ngOnInit(): void;
|
|
357
410
|
get color(): string;
|
|
358
|
-
/**
|
|
411
|
+
/**
|
|
412
|
+
* Geometry for every bar this series contributes. `x`/`width` are the bar's
|
|
413
|
+
* footprint on the category axis and `yBase`/`yValue` its extent on the
|
|
414
|
+
* value axis — physical x/y when vertical (the original meaning), but
|
|
415
|
+
* transposed (x holds a vertical footprint, yBase/yValue hold horizontal
|
|
416
|
+
* positions) when the chart is horizontal, same as `ChartService.yFor()`.
|
|
417
|
+
*/
|
|
359
418
|
get bars(): {
|
|
360
419
|
d: string;
|
|
361
420
|
active: boolean;
|
package/lib/chart.service.d.ts
CHANGED
|
@@ -25,6 +25,12 @@ export interface ChartBand {
|
|
|
25
25
|
}
|
|
26
26
|
/** How x positions are resolved: discrete bands (bars) or points (line/area). */
|
|
27
27
|
export type ChartScaleMode = 'point' | 'band';
|
|
28
|
+
/**
|
|
29
|
+
* Which physical axis carries the category vs the value. Only the band scale
|
|
30
|
+
* (bars) supports 'horizontal' — line/area stay point-scale and vertical,
|
|
31
|
+
* same as Tremor never offers a horizontal line/area chart either.
|
|
32
|
+
*/
|
|
33
|
+
export type ChartOrientation = 'vertical' | 'horizontal';
|
|
28
34
|
/** Number of chart palette steps that exist. A 6th series does not get a colour. */
|
|
29
35
|
export declare const CHART_COLOR_LIMIT = 5;
|
|
30
36
|
/**
|
|
@@ -79,6 +85,12 @@ export declare class ChartService {
|
|
|
79
85
|
margin: ChartMargin;
|
|
80
86
|
/** Fraction of a band's step spent on padding, split either side. */
|
|
81
87
|
bandPadding: number;
|
|
88
|
+
/**
|
|
89
|
+
* Which physical axis is the category axis. Bars flip this via `configure()`;
|
|
90
|
+
* every other geometry getter branches on it internally, defaulting to the
|
|
91
|
+
* exact vertical formula when unset, so existing vertical charts are unaffected.
|
|
92
|
+
*/
|
|
93
|
+
orientation: ChartOrientation;
|
|
82
94
|
private scaleMode;
|
|
83
95
|
private zeroRequired;
|
|
84
96
|
private domainMin;
|
|
@@ -115,7 +127,7 @@ export declare class ChartService {
|
|
|
115
127
|
* Replaces the chart's configuration and recomputes the scales.
|
|
116
128
|
* Called by the container on input changes and on resize.
|
|
117
129
|
*/
|
|
118
|
-
configure(config: Partial<Pick<ChartService, 'data' | 'series' | 'xKey' | 'stacked' | 'width' | 'height' | 'margin' | 'bandPadding'>>): void;
|
|
130
|
+
configure(config: Partial<Pick<ChartService, 'data' | 'series' | 'xKey' | 'stacked' | 'width' | 'height' | 'margin' | 'bandPadding' | 'orientation'>>): void;
|
|
119
131
|
/** Switches x to a band scale. Bars call this; it also forces zero into the domain. */
|
|
120
132
|
useBandScale(): void;
|
|
121
133
|
/** Forces zero into the y domain, for marks anchored to a baseline. */
|
|
@@ -136,17 +148,25 @@ export declare class ChartService {
|
|
|
136
148
|
/** Sum of every series at `index`. */
|
|
137
149
|
stackTotal(index: number): number;
|
|
138
150
|
/**
|
|
139
|
-
* Maps a data value to
|
|
140
|
-
*
|
|
151
|
+
* Maps a data value to a position along the *value* axis — svg y when
|
|
152
|
+
* vertical (svg y grows downward, so the domain maximum lands on `plotTop`),
|
|
153
|
+
* svg x when horizontal (the domain maximum lands on `plotRight`).
|
|
141
154
|
*/
|
|
142
155
|
yFor(value: number): number;
|
|
143
|
-
/** The
|
|
156
|
+
/** The value-axis position of the zero line, clamped into the plot. */
|
|
144
157
|
get baselineY(): number;
|
|
158
|
+
/** Length of the plot along the category axis: `plotHeight` when horizontal, else `plotWidth`. */
|
|
159
|
+
private get categoryAxisLength();
|
|
160
|
+
/** Origin of the plot along the category axis: `plotTop` when horizontal, else `plotLeft`. */
|
|
161
|
+
private get categoryAxisOrigin();
|
|
145
162
|
/** Width of one band, excluding its padding. Meaningful in band mode. */
|
|
146
163
|
get bandWidth(): number;
|
|
147
164
|
/** Distance between adjacent band starts. Bands tile the plot exactly. */
|
|
148
165
|
get bandStep(): number;
|
|
149
|
-
/**
|
|
166
|
+
/**
|
|
167
|
+
* Geometry of the band at `index`, along the category axis — x when
|
|
168
|
+
* vertical (today's meaning), y when horizontal.
|
|
169
|
+
*/
|
|
150
170
|
bandFor(index: number): ChartBand;
|
|
151
171
|
/** x of the data point at `index` on the point scale. */
|
|
152
172
|
pointX(index: number): number;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Radial counterpart to `tolle-progress`: a ring that fills clockwise from
|
|
5
|
+
* 12 o'clock. Project content to label the centre — a percentage, an icon,
|
|
6
|
+
* whatever the caller wants; the ring renders nothing there on its own.
|
|
7
|
+
* @new
|
|
8
|
+
*/
|
|
9
|
+
export declare class ProgressCircleComponent implements OnChanges {
|
|
10
|
+
/**
|
|
11
|
+
* Angular writes a bound `class` input through its styling path, which does
|
|
12
|
+
* not mark an OnPush component dirty — without this hook the component keeps
|
|
13
|
+
* rendering the class it was born with.
|
|
14
|
+
*/
|
|
15
|
+
ngOnChanges(): void;
|
|
16
|
+
/** Percent complete, 0-100. @default 0 */
|
|
17
|
+
value: number | null;
|
|
18
|
+
/** Diameter of the ring in px. @default 120 */
|
|
19
|
+
size: number;
|
|
20
|
+
/** Thickness of the ring in px. @default 8 */
|
|
21
|
+
strokeWidth: number;
|
|
22
|
+
/** Extra Tailwind classes merged onto the ring via `cn()` (last-wins). */
|
|
23
|
+
class: string;
|
|
24
|
+
private readonly cdr;
|
|
25
|
+
get clampedValue(): number;
|
|
26
|
+
get viewBox(): string;
|
|
27
|
+
get center(): number;
|
|
28
|
+
/** Leaves half the stroke width as margin so the ring never clips the frame. */
|
|
29
|
+
get radius(): number;
|
|
30
|
+
get circumference(): number;
|
|
31
|
+
get dashOffset(): number;
|
|
32
|
+
get computedClass(): string;
|
|
33
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressCircleComponent, never>;
|
|
34
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressCircleComponent, "tolle-progress-circle", never, { "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
35
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/** Health of one period in the strip. Maps to the theme's semantic status tokens, not the chart palette. */
|
|
4
|
+
export type TrackerStatus = 'success' | 'warning' | 'error' | 'neutral';
|
|
5
|
+
/** One block: its health, an optional per-block colour override, and the tooltip naming it. */
|
|
6
|
+
export interface TrackerBlock {
|
|
7
|
+
status?: TrackerStatus;
|
|
8
|
+
color?: string;
|
|
9
|
+
tooltip?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A row of equal-width blocks, one per period — an uptime or activity strip.
|
|
13
|
+
* Each block is a real `<button>` so its tooltip is reachable by keyboard and
|
|
14
|
+
* has a screen-reader name of its own, not just a hover affordance.
|
|
15
|
+
* @new
|
|
16
|
+
*/
|
|
17
|
+
export declare class TrackerComponent implements OnChanges {
|
|
18
|
+
/**
|
|
19
|
+
* Angular writes a bound `class` input through its styling path, which does
|
|
20
|
+
* not mark an OnPush component dirty — without this hook the component keeps
|
|
21
|
+
* rendering the class it was born with.
|
|
22
|
+
*/
|
|
23
|
+
ngOnChanges(): void;
|
|
24
|
+
/** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
|
|
25
|
+
trackByIndex: (index: number) => number;
|
|
26
|
+
/** One block per period, in chronological order. @default [] */
|
|
27
|
+
data: TrackerBlock[];
|
|
28
|
+
/** Height of each block in px. @default 32 */
|
|
29
|
+
blockHeight: number;
|
|
30
|
+
/** Accessible name for the whole strip. @default '' */
|
|
31
|
+
ariaLabel: string;
|
|
32
|
+
/** Extra Tailwind classes merged onto the strip via `cn()` (last-wins). */
|
|
33
|
+
class: string;
|
|
34
|
+
private readonly cdr;
|
|
35
|
+
colorFor(block: TrackerBlock): string;
|
|
36
|
+
get computedClass(): string;
|
|
37
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TrackerComponent, never>;
|
|
38
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TrackerComponent, "tolle-tracker", never, { "data": { "alias": "data"; "required": false; }; "blockHeight": { "alias": "blockHeight"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
39
|
+
}
|
package/package.json
CHANGED
package/public-api.d.ts
CHANGED
|
@@ -61,6 +61,7 @@ export * from './lib/carousel';
|
|
|
61
61
|
export * from './lib/label.component';
|
|
62
62
|
export * from './lib/separator.component';
|
|
63
63
|
export * from './lib/progress.component';
|
|
64
|
+
export * from './lib/progress-circle.component';
|
|
64
65
|
export * from './lib/slider.component';
|
|
65
66
|
export * from './lib/toggle.component';
|
|
66
67
|
export * from './lib/toggle-group.component';
|
|
@@ -130,6 +131,10 @@ export * from './lib/model-selector.component';
|
|
|
130
131
|
export * from './lib/chart.service';
|
|
131
132
|
export * from './lib/chart.component';
|
|
132
133
|
export * from './lib/chart-pie.component';
|
|
134
|
+
export * from './lib/chart-spark.component';
|
|
135
|
+
export * from './lib/category-bar.component';
|
|
136
|
+
export * from './lib/tracker.component';
|
|
137
|
+
export * from './lib/bar-list.component';
|
|
133
138
|
export * from './lib/direction.component';
|
|
134
139
|
export * from './lib/time-picker.component';
|
|
135
140
|
export * from './lib/date-time-picker.component';
|