@trismegisto/charts 3.3.3 → 3.3.5

package/fesm2022/trismegisto-charts.mjs

@@ -31,6 +31,11 @@ const CHARTS_MESSAGES_EN = {
         median: 'Median',
         q3: 'Third quartile',
         max: 'Maximum',
+        goal: 'Target',
+        ranges: 'Ranges',
+        change: 'Change',
+        cumulative: 'Cumulative',
+        size: 'Size',
     },
     types: {
         bar: 'Bar chart',
@@ -47,6 +52,10 @@ const CHARTS_MESSAGES_EN = {
         treemap: 'Treemap',
         sankey: 'Sankey diagram',
         boxplot: 'Box plot',
+        sparkline: 'Sparkline',
+        bubble: 'Bubble chart',
+        bullet: 'Bullet chart',
+        waterfall: 'Waterfall chart',
         chart: 'Chart',
     },
     summary: {
@@ -67,6 +76,22 @@ const CHARTS_MESSAGES_EN = {
             one: '{type} with 1 item.',
             other: '{type} with {count} items.',
         },
+        gaugeCaption: '{type}: {value} {caption}, on a scale from {min} to {max}.',
+        sparkline: {
+            one: '{type} with 1 point: {last}.',
+            other: '{type} with {count} points, from {first} to {last}. Minimum {min}, maximum {max}.',
+        },
+        bulletItem: '{name}: {value}, target {target}.',
+        bulletItemNoTarget: '{name}: {value}.',
+        waterfall: {
+            one: '{type} with 1 step: from {start} to {end}.',
+            other: '{type} with {count} steps: from {start} to {end}.',
+        },
+    },
+    waterfall: {
+        increase: 'Increase',
+        decrease: 'Decrease',
+        total: 'Total',
     },
     engine: {
         legendAll: 'All',
@@ -112,6 +137,11 @@ const CHARTS_MESSAGES_ES = {
         median: 'Mediana',
         q3: 'Tercer cuartil',
         max: 'Máximo',
+        goal: 'Meta',
+        ranges: 'Rangos',
+        change: 'Variación',
+        cumulative: 'Acumulado',
+        size: 'Tamaño',
     },
     types: {
         bar: 'Gráfico de barras',
@@ -128,6 +158,10 @@ const CHARTS_MESSAGES_ES = {
         treemap: 'Mapa de árbol',
         sankey: 'Diagrama de Sankey',
         boxplot: 'Diagrama de caja',
+        sparkline: 'Minigráfico',
+        bubble: 'Gráfico de burbujas',
+        bullet: 'Gráfico de bala',
+        waterfall: 'Gráfico de cascada',
         chart: 'Gráfico',
     },
     summary: {
@@ -148,6 +182,22 @@ const CHARTS_MESSAGES_ES = {
             one: '{type} con 1 elemento.',
             other: '{type} con {count} elementos.',
         },
+        gaugeCaption: '{type}: {value} {caption}, en una escala de {min} a {max}.',
+        sparkline: {
+            one: '{type} con 1 punto: {last}.',
+            other: '{type} con {count} puntos, de {first} a {last}. Mínimo {min}, máximo {max}.',
+        },
+        bulletItem: '{name}: {value}, meta {target}.',
+        bulletItemNoTarget: '{name}: {value}.',
+        waterfall: {
+            one: '{type} con 1 etapa: de {start} a {end}.',
+            other: '{type} con {count} etapas: de {start} a {end}.',
+        },
+    },
+    waterfall: {
+        increase: 'Aumento',
+        decrease: 'Disminución',
+        total: 'Total',
     },
     engine: {
         legendAll: 'Todos',
@@ -193,6 +243,11 @@ const CHARTS_MESSAGES_PT_BR = {
         median: 'Mediana',
         q3: '3º quartil',
         max: 'Máximo',
+        goal: 'Meta',
+        ranges: 'Faixas',
+        change: 'Variação',
+        cumulative: 'Acumulado',
+        size: 'Tamanho',
     },
     types: {
         bar: 'Gráfico de barras',
@@ -209,6 +264,10 @@ const CHARTS_MESSAGES_PT_BR = {
         treemap: 'Mapa de árvore',
         sankey: 'Diagrama de Sankey',
         boxplot: 'Diagrama de caixa',
+        sparkline: 'Minigráfico',
+        bubble: 'Gráfico de bolhas',
+        bullet: 'Gráfico de bala',
+        waterfall: 'Gráfico de cascata',
         chart: 'Gráfico',
     },
     summary: {
@@ -229,6 +288,22 @@ const CHARTS_MESSAGES_PT_BR = {
             one: '{type} com 1 item.',
             other: '{type} com {count} itens.',
         },
+        gaugeCaption: '{type}: {value} {caption}, numa escala de {min} a {max}.',
+        sparkline: {
+            one: '{type} com 1 ponto: {last}.',
+            other: '{type} com {count} pontos, de {first} a {last}. Mínimo {min}, máximo {max}.',
+        },
+        bulletItem: '{name}: {value}, meta {target}.',
+        bulletItemNoTarget: '{name}: {value}.',
+        waterfall: {
+            one: '{type} com 1 etapa: de {start} a {end}.',
+            other: '{type} com {count} etapas: de {start} a {end}.',
+        },
+    },
+    waterfall: {
+        increase: 'Aumento',
+        decrease: 'Redução',
+        total: 'Total',
     },
     engine: {
         legendAll: 'Todos',
@@ -4304,8 +4379,8 @@ class Storage {
 * Licensed under the BSD 3-Clause License. The full license text is in
 * LICENSES/zrender-BSD-3-Clause.txt at the root of this package.
 */
-let requestAnimationFrame;
-requestAnimationFrame = (env.hasGlobalWindow
+let requestAnimationFrame$1;
+requestAnimationFrame$1 = (env.hasGlobalWindow
     && ((window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
         // https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
         || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
@@ -4314,7 +4389,7 @@ requestAnimationFrame = (env.hasGlobalWindow
         || window.webkitRequestAnimationFrame)) || function (func) {
     return setTimeout(func, 16);
 };
-var requestAnimationFrame$1 = requestAnimationFrame;
+var requestAnimationFrame$2 = requestAnimationFrame$1;
 
 /*
 * Copyright (c) 2017, Baidu Inc.
@@ -7024,11 +7099,11 @@ class Animation extends Eventful {
         this._running = true;
         function step() {
             if (self._running) {
-                requestAnimationFrame$1(step);
+                requestAnimationFrame$2(step);
                 !self._paused && self.update();
             }
         }
-        requestAnimationFrame$1(step);
+        requestAnimationFrame$2(step);
     }
     /**
      * Start animation.
@@ -75203,6 +75278,19 @@ function resolveColor(probe, token) {
     const value = getComputedStyle(probe).color;
     return value && !value.includes('var(') ? value : undefined;
 }
+/** Um token de cor resolvido para `rgb(...)` no elemento (sonda temporária); `undefined` se não resolver. */
+function resolveTokenColor(host, token) {
+    const probe = host.ownerDocument.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.display = 'none';
+    host.appendChild(probe);
+    try {
+        return resolveColor(probe, token);
+    }
+    finally {
+        probe.remove();
+    }
+}
 function readToken(host, token) {
     const value = getComputedStyle(host).getPropertyValue(token).trim();
     return value || undefined;
@@ -75255,7 +75343,17 @@ function readChartTheme(host, forced = false) {
             radar: { axisName: { color: muted }, axisLine: { lineStyle: { color: divider } }, splitLine: { lineStyle: { color: divider } } },
             calendar: { dayLabel: { color: muted }, monthLabel: { color: muted }, yearLabel: { color: muted }, splitLine: { lineStyle: { color: border } }, itemStyle: { borderColor: surface } },
             visualMap: { textStyle: { color: muted }, inRange: sequential.length ? { color: sequential } : undefined },
-            gauge: { axisLabel: { color: muted }, title: { color: muted }, detail: { color: text }, axisLine: { lineStyle: { color: [[1, divider]] } } },
+            gauge: {
+                axisLabel: { color: muted },
+                title: { color: muted },
+                detail: { color: text },
+                axisLine: { lineStyle: { color: [[1, divider]] } },
+                // Escala e agulha do medidor: marcas neutras, agulha na cor do texto com o pino recortado na superfície.
+                splitLine: { lineStyle: { color: muted } },
+                axisTick: { lineStyle: { color: border } },
+                pointer: { itemStyle: { color: text } },
+                anchor: { itemStyle: { color: text, borderColor: surface } },
+            },
             pie: { itemStyle: { borderColor: surface } },
             funnel: { itemStyle: { borderColor: surface } },
             treemap: { itemStyle: { borderColor: surface }, upperLabel: { color: text } },
@@ -75340,6 +75438,12 @@ class HmChartComponent {
     #resize;
     #scope;
     #cursor;
+    /**
+     * O tema foi lido com o gráfico fora do documento (conteúdo projetado num painel que ainda não está na
+     * página, como um `hm-tab` sem `hmTabContent`): os tokens não resolvem e as cores saem vazias. Relido na
+     * primeira medição com o gráfico já no documento; quem nasce visível nunca passa por aqui.
+     */
+    #themeStale;
     #cleanups;
     #locale;
     #finalOption;
@@ -75359,6 +75463,12 @@ class HmChartComponent {
         this.#resize = null;
         this.#scope = null;
         this.#cursor = -1;
+        /**
+         * O tema foi lido com o gráfico fora do documento (conteúdo projetado num painel que ainda não está na
+         * página, como um `hm-tab` sem `hmTabContent`): os tokens não resolvem e as cores saem vazias. Relido na
+         * primeira medição com o gráfico já no documento; quem nasce visível nunca passa por aqui.
+         */
+        this.#themeStale = false;
         this.#cleanups = [];
         this.announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
         this.#locale = computed(() => engineLocale(this.#i18n.messages(), this.#i18n.locale()), ...(ngDevMode ? [{ debugName: "#locale" }] : /* istanbul ignore next */ []));
@@ -75376,7 +75486,11 @@ class HmChartComponent {
             this.#watchMedia('(prefers-reduced-motion: reduce)', this.#reducedMotion);
             this.#watchMedia('(forced-colors: active)', this.#forcedColors);
             if (typeof ResizeObserver !== 'undefined') {
-                this.#resize = new ResizeObserver(() => this.#chart?.resize());
+                this.#resize = new ResizeObserver(() => {
+                    if (this.#themeStale && host.isConnected)
+                        this.#applyTheme();
+                    this.#chart?.resize();
+                });
                 this.#resize.observe(host);
             }
             this.#watchScope(host);
@@ -75390,7 +75504,7 @@ class HmChartComponent {
             untracked(() => {
                 const host = this.#host.nativeElement;
                 this.#chart?.dispose();
-                this.#chart = init(host, readChartTheme(host, this.#forcedColors()), { locale });
+                this.#chart = init(host, this.#readTheme(), { locale });
                 this.#chart.setOption(this.#finalOption(), { notMerge: true });
             });
         });
@@ -75399,8 +75513,8 @@ class HmChartComponent {
             untracked(() => this.#chart?.setOption(option, { notMerge: true }));
         });
         effect(() => {
-            const forced = this.#forcedColors();
-            untracked(() => this.#chart?.setTheme(readChartTheme(this.#host.nativeElement, forced)));
+            this.#forcedColors();
+            untracked(() => this.#applyTheme());
         });
         inject(DestroyRef).onDestroy(() => {
             this.#cleanups.forEach((fn) => fn());
@@ -75465,6 +75579,16 @@ class HmChartComponent {
         chart.dispatchAction({ type: 'showTip', seriesIndex: point.seriesIndex, dataIndex: point.dataIndex });
         this.announcement.set(point.text);
     }
+    /** Tema lido dos tokens no elemento; marca para reler se o gráfico ainda não está no documento. */
+    #readTheme() {
+        const host = this.#host.nativeElement;
+        this.#themeStale = !host.isConnected;
+        return readChartTheme(host, this.#forcedColors());
+    }
+    #applyTheme() {
+        if (this.#chart)
+            this.#chart.setTheme(this.#readTheme());
+    }
     #watchMedia(query, target) {
         const list = media(query);
         if (!list)
@@ -75488,7 +75612,7 @@ class HmChartComponent {
             pending = true;
             queueMicrotask(() => {
                 pending = false;
-                this.#chart?.setTheme(readChartTheme(host, this.#forcedColors()));
+                this.#applyTheme();
             });
         });
         this.#scope.observe(host.ownerDocument.documentElement, {
@@ -75524,6 +75648,8 @@ class HmChartFrameComponent {
         this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
         this.height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Mostra o botão "Ver como tabela". Desligado (minigráfico), a tabela fica só na árvore de acessibilidade. */
+        this.tableToggle = input(true, ...(ngDevMode ? [{ debugName: "tableToggle" }] : /* istanbul ignore next */ []));
         /** Mostra a tabela no lugar do gráfico. */
         this.showTable = model(false, ...(ngDevMode ? [{ debugName: "showTable" }] : /* istanbul ignore next */ []));
         this.m = inject(ChartsI18nService).messages;
@@ -75536,12 +75662,14 @@ class HmChartFrameComponent {
         return this.view().table.align?.[index] ?? 'start';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmChartFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: HmChartFrameComponent, isStandalone: true, selector: "hm-chart-frame", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showTable: { classPropertyName: "showTable", publicName: "showTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showTable: "showTableChange" }, host: { classAttribute: "hm-chart-frame" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: HmChartFrameComponent, isStandalone: true, selector: "hm-chart-frame", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, showTable: { classPropertyName: "showTable", publicName: "showTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showTable: "showTableChange" }, host: { classAttribute: "hm-chart-frame" }, ngImport: i0, template: `
+    @if (tableToggle()) {
     <div class="hm-chart-frame__bar">
       <button type="button" class="hm-btn hm-btn--minimal hm-btn--small" (click)="showTable.set(!showTable())">
         {{ showTable() ? m().frame.showChart : m().frame.showTable }}
       </button>
     </div>
+    }
     <hm-chart
       [class.hm-chart-frame__off]="showTable()"
       [option]="view().option"
@@ -75590,11 +75718,13 @@ class HmChartFrameComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmChartFrameComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hm-chart-frame', standalone: true, imports: [HmChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (tableToggle()) {
     <div class="hm-chart-frame__bar">
       <button type="button" class="hm-btn hm-btn--minimal hm-btn--small" (click)="showTable.set(!showTable())">
         {{ showTable() ? m().frame.showChart : m().frame.showTable }}
       </button>
     </div>
+    }
     <hm-chart
       [class.hm-chart-frame__off]="showTable()"
       [option]="view().option"
@@ -75639,7 +75769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
       </table>
     </div>
   `, host: { class: 'hm-chart-frame' }, styles: [":host{display:flex;flex-direction:column;inline-size:100%;gap:var(--hm-space-xxxs);min-inline-size:0}.hm-chart-frame__bar{display:flex;justify-content:flex-end}.hm-chart-frame__off{display:none}.hm-chart-frame__table:not(.hm-visually-hidden){overflow:auto;max-block-size:calc(var(--hm-control-height) * 12)}.hm-chart-frame__table caption{text-align:start;color:var(--hm-muted);font-size:var(--hm-font-size-sm);padding-block-end:var(--hm-space-xxxs)}.hm-chart-frame__num{text-align:end;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }, { type: i0.Output, args: ["showTableChange"] }] } });
+        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }, { type: i0.Output, args: ["showTableChange"] }] } });
 
 /** Tabela categoria × série (barras, linhas). */
 function categoryTable(ctx, categories, series) {
@@ -75702,7 +75832,7 @@ class HmBarChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmBarChartComponent, isStandalone: true, selector: "hm-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmBarChartComponent, isStandalone: true, selector: "hm-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBarChartComponent, decorators: [{
             type: Component,
@@ -75750,7 +75880,7 @@ class HmLineChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmLineChartComponent, isStandalone: true, selector: "hm-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmLineChartComponent, isStandalone: true, selector: "hm-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmLineChartComponent, decorators: [{
             type: Component,
@@ -75797,7 +75927,7 @@ class HmPieChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmPieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmPieChartComponent, isStandalone: true, selector: "hm-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmPieChartComponent, isStandalone: true, selector: "hm-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmPieChartComponent, decorators: [{
             type: Component,
@@ -75868,7 +75998,7 @@ class HmHeatmapChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmHeatmapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmHeatmapChartComponent, isStandalone: true, selector: "hm-heatmap-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xCategories: { classPropertyName: "xCategories", publicName: "xCategories", isSignal: true, isRequired: false, transformFunction: null }, yCategories: { classPropertyName: "yCategories", publicName: "yCategories", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmHeatmapChartComponent, isStandalone: true, selector: "hm-heatmap-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xCategories: { classPropertyName: "xCategories", publicName: "xCategories", isSignal: true, isRequired: false, transformFunction: null }, yCategories: { classPropertyName: "yCategories", publicName: "yCategories", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmHeatmapChartComponent, decorators: [{
             type: Component,
@@ -75953,7 +76083,7 @@ class HmCalendarHeatmapComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmCalendarHeatmapComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmCalendarHeatmapComponent, isStandalone: true, selector: "hm-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmCalendarHeatmapComponent, isStandalone: true, selector: "hm-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmCalendarHeatmapComponent, decorators: [{
             type: Component,
@@ -75973,7 +76103,13 @@ function weekStart(locale) {
     return /^(pt|en-US|es-MX)/.test(locale) ? 0 : 1;
 }
 
-/** Relação entre duas medidas (preço × volume, prazo × satisfação), uma ou várias séries. */
+/** Diâmetro (px) do menor e do maior ponto no gráfico de bolhas. */
+const BUBBLE_MIN = 8;
+const BUBBLE_MAX = 44;
+/**
+ * Relação entre duas medidas (preço × volume, prazo × satisfação), uma ou várias séries. Com `size`
+ * nos pontos, vira gráfico de bolhas (a área de cada bolha mostra uma terceira medida).
+ */
 class HmScatterChartComponent extends HmChartBase {
     constructor() {
         super(...arguments);
@@ -75982,16 +76118,26 @@ class HmScatterChartComponent extends HmChartBase {
         this.xLabel = input('', ...(ngDevMode ? [{ debugName: "xLabel" }] : /* istanbul ignore next */ []));
         /** Nome do eixo vertical (texto do app). */
         this.yLabel = input('', ...(ngDevMode ? [{ debugName: "yLabel" }] : /* istanbul ignore next */ []));
+        /** Nome da medida do tamanho das bolhas (texto do app); padrão "Tamanho". */
+        this.sizeLabel = input('', ...(ngDevMode ? [{ debugName: "sizeLabel" }] : /* istanbul ignore next */ []));
     }
     build(ctx) {
         const series = this.series();
         const xName = this.xLabel() || ctx.m.columns.x;
         const yName = this.yLabel() || ctx.m.columns.y;
         const hasLegend = series.length > 1;
-        const describe = (s, p) => `${p.name ?? s.name}: ${xName} ${ctx.num(p.x)}, ${yName} ${ctx.num(p.y)}`;
+        const sizeName = this.sizeLabel() || ctx.m.columns.size;
+        const sizes = series.flatMap((s) => s.data.map((p) => p.size)).filter((v) => v != null && Number.isFinite(v) && v >= 0);
+        const bubble = sizes.length > 0;
+        const biggest = Math.max(0, ...sizes);
+        // Área proporcional ao valor: o diâmetro cresce com a raiz quadrada, entre o ponto comum e uma bolha grande.
+        const radius = (v) => v == null || !Number.isFinite(v) || v < 0 || biggest === 0 ? BUBBLE_MIN : BUBBLE_MIN + (BUBBLE_MAX - BUBBLE_MIN) * Math.sqrt(v / biggest);
+        const describe = (s, p) => `${p.name ?? s.name}: ${xName} ${ctx.num(p.x)}, ${yName} ${ctx.num(p.y)}` + (bubble ? `, ${sizeName} ${ctx.num(p.size)}` : '');
         return {
             option: {
-                grid: { ...gridOption(hasLegend && ctx.legend), top: 36 },
+                // Bolhas: folga no fim dos eixos para a bolha da ponta não ser cortada. Com nome no eixo X (o `containLabel` não
+                // conta o nome), espaço entre ele e a legenda.
+                grid: { ...gridOption(hasLegend && ctx.legend), top: 36, ...(bubble || this.xLabel() ? { bottom: hasLegend && ctx.legend ? 58 : 30 } : {}) },
                 tooltip: {
                     ...tooltipOption(ctx, 'item'),
                     formatter: (p) => {
@@ -76001,71 +76147,348 @@ class HmScatterChartComponent extends HmChartBase {
                     },
                 },
                 legend: legendOption(ctx, hasLegend),
-                xAxis: { type: 'value', name: this.xLabel(), nameLocation: 'middle', nameGap: 30, scale: true, axisLabel: { formatter: (v) => ctx.num(v) } },
-                yAxis: { type: 'value', name: this.yLabel(), scale: true, axisLabel: { formatter: (v) => ctx.num(v) } },
+                xAxis: { type: 'value', name: this.xLabel(), nameLocation: 'middle', nameGap: 30, scale: true, axisLabel: { formatter: (v) => ctx.num(v) }, ...(bubble ? { boundaryGap: ['8%', '8%'] } : {}) },
+                yAxis: { type: 'value', name: this.yLabel(), scale: true, axisLabel: { formatter: (v) => ctx.num(v) }, ...(bubble ? { boundaryGap: ['12%', '12%'] } : {}) },
                 series: series.map((s) => ({
                     type: 'scatter',
                     name: s.name,
-                    symbolSize: 9,
+                    symbolSize: bubble ? (_, params) => radius(s.data[params.dataIndex]?.size) : 9,
                     data: s.data.map((p) => [p.x, p.y]),
+                    ...(bubble ? { itemStyle: { opacity: 0.72 } } : {}),
                     emphasis: { focus: 'series' },
                 })),
             },
-            summary: seriesSummary(ctx, 'scatter', series.length, series.reduce((n, s) => n + s.data.length, 0), series.flatMap((s) => s.data.map((p) => p.y))),
+            summary: seriesSummary(ctx, bubble ? 'bubble' : 'scatter', series.length, series.reduce((n, s) => n + s.data.length, 0), series.flatMap((s) => s.data.map((p) => p.y))),
             table: {
-                columns: [ctx.m.columns.series, xName, yName],
-                align: ['start', 'end', 'end'],
+                columns: bubble ? [ctx.m.columns.series, xName, yName, sizeName] : [ctx.m.columns.series, xName, yName],
+                align: bubble ? ['start', 'end', 'end', 'end'] : ['start', 'end', 'end'],
                 rows: series.flatMap((s) => s.data.map((p) => ({
                     header: p.name ? `${s.name} · ${p.name}` : s.name,
-                    cells: [ctx.num(p.x), ctx.num(p.y)],
+                    cells: bubble ? [ctx.num(p.x), ctx.num(p.y), ctx.num(p.size)] : [ctx.num(p.x), ctx.num(p.y)],
                 }))),
             },
             points: series.flatMap((s, si) => s.data.map((p, di) => ({ seriesIndex: si, dataIndex: di, text: describe(s, p) }))),
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmScatterChartComponent, isStandalone: true, selector: "hm-scatter-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmScatterChartComponent, isStandalone: true, selector: "hm-scatter-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, sizeLabel: { classPropertyName: "sizeLabel", publicName: "sizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmScatterChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hm-scatter-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: CHART_TEMPLATE, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
-        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }] } });
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], sizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLabel", required: false }] }] } });
 
-/** Um valor numa escala (meta atingida, ocupação, SLA). Para vários indicadores, vários medidores. */
+// Geometria do medidor: raio, centro e posição de cada rótulo da escala, calculados a partir do
+// tamanho real do gráfico e do tamanho das fontes (lidos dos tokens no elemento). Sem framework e
+// sem DOM: só números, para ser testável e portável.
+/** Ângulos do arco no sistema do motor (graus, anti-horário a partir das 3 horas): 240° com a abertura embaixo. */
+const GAUGE_START_ANGLE = 210;
+const GAUGE_END_ANGLE = -30;
+const SWEEP = GAUGE_START_ANGLE - GAUGE_END_ANGLE;
+/** Largura aproximada de um texto (média de glifos de uma fonte sem serifa com algarismos tabulares). */
+function textWidth(text, font) {
+    return text.length * font * 0.6;
+}
+/** Ângulo (graus do motor) da marca `i` de `n`. */
+function tickAngle(i, n) {
+    return GAUGE_START_ANGLE - (SWEEP * i) / n;
+}
+/** Mede tudo para um raio `r` com o centro em (0,0): devolve as posições e a caixa ocupada. */
+function measure(r, input) {
+    const { box, labels } = input;
+    const labelFont = box.smallFont;
+    const captionFont = box.smallFont;
+    const arcWidth = Math.max(6, r * 0.1);
+    const tickGap = input.ticks ? Math.max(2, r * 0.045) : 0;
+    const majorLength = input.ticks ? Math.max(4, r * 0.08) : 0;
+    const minorLength = majorLength * 0.55;
+    const labelGap = labelFont * 0.45;
+    const labelRadius = r + tickGap + majorLength + labelGap;
+    const labelHeight = labelFont * 1.2;
+    const extent = { minX: -r, maxX: r, minY: -r, maxY: r * Math.sin((30 * Math.PI) / 180) + arcWidth / 2 };
+    const grow = (x0, x1, y0, y1) => {
+        extent.minX = Math.min(extent.minX, x0);
+        extent.maxX = Math.max(extent.maxX, x1);
+        extent.minY = Math.min(extent.minY, y0);
+        extent.maxY = Math.max(extent.maxY, y1);
+    };
+    const n = Math.max(1, labels.length - 1);
+    const placed = [];
+    labels.forEach((text, i) => {
+        if (text == null || text === '')
+            return;
+        const a = (tickAngle(i, n) * Math.PI) / 180;
+        const ux = Math.cos(a);
+        const uy = -Math.sin(a);
+        const w = textWidth(text, labelFont);
+        // Centro do rótulo afastado do arco pela metade da caixa na direção do raio: o texto fica
+        // sempre do lado de fora, sem encostar nas marcas, em qualquer ângulo.
+        const reach = labelRadius + Math.abs(ux) * (w / 2) + Math.abs(uy) * (labelHeight / 2);
+        const dx = ux * reach;
+        const dy = uy * reach;
+        placed.push({ text, dx, dy });
+        grow(dx - w / 2, dx + w / 2, dy - labelHeight / 2, dy + labelHeight / 2);
+    });
+    const hubSize = input.needle ? Math.max(8, r * 0.13) : 0;
+    const valueFont = Math.min(box.baseFont * 3, Math.max(box.baseFont * 1.35, r * (input.needle ? 0.26 : 0.32)));
+    const valueOffset = input.needle ? Math.max(r * 0.34, hubSize / 2 + valueFont * 0.75) : input.hasCaption ? -valueFont * 0.1 : 0;
+    const captionOffset = valueOffset + valueFont * 0.62 + captionFont * 0.95;
+    const valueW = textWidth(input.valueText, valueFont);
+    grow(-valueW / 2, valueW / 2, valueOffset - valueFont * 0.6, valueOffset + valueFont * 0.6);
+    if (input.hasCaption)
+        grow(-r * 0.8, r * 0.8, captionOffset - captionFont * 0.7, captionOffset + captionFont * 0.7);
+    return {
+        layout: {
+            radius: r,
+            arcWidth,
+            tickGap,
+            majorLength,
+            minorLength,
+            labelFont,
+            valueFont,
+            captionFont,
+            valueOffset,
+            captionOffset,
+            needleLength: r - arcWidth * 0.55,
+            needleWidth: Math.max(3, r * 0.045),
+            hubSize,
+            labels: placed,
+        },
+        extent,
+    };
+}
+/**
+ * Maior raio em que arco, escala, valor e legenda cabem na caixa, com o conjunto centralizado.
+ * Caixa sem tamanho (ainda não medida, testes em jsdom): `null`, e o componente usa porcentagens.
+ */
+function gaugeLayout(input) {
+    const { width, height } = input.box;
+    if (!(width > 0 && height > 0))
+        return null;
+    const pad = Math.max(2, input.box.smallFont * 0.25);
+    const availW = width - pad * 2;
+    const availH = height - pad * 2;
+    const fits = (r) => {
+        const { extent } = measure(r, input);
+        return extent.maxX - extent.minX <= availW && extent.maxY - extent.minY <= availH;
+    };
+    let lo = 4;
+    let hi = Math.max(lo, Math.min(availW, availH));
+    if (!fits(lo))
+        hi = lo;
+    for (let i = 0; i < 24 && hi - lo > 0.25; i++) {
+        const mid = (lo + hi) / 2;
+        if (fits(mid))
+            lo = mid;
+        else
+            hi = mid;
+    }
+    const { layout, extent } = measure(lo, input);
+    const cx = pad + (availW - (extent.maxX - extent.minX)) / 2 - extent.minX;
+    const cy = pad + (availH - (extent.maxY - extent.minY)) / 2 - extent.minY;
+    return { ...layout, cx, cy };
+}
+/**
+ * Quantas marcas maiores e de quantas em quantas há rótulo, sem rótulos se atropelando. `step` é o
+ * intervalo pedido (na unidade do valor); inválido ou com marcas demais, a escala cai em 10 partes.
+ */
+function gaugeScale(min, max, step) {
+    const span = max - min;
+    if (step && step > 0 && span > 0) {
+        const splits = span / step;
+        if (Math.abs(splits - Math.round(splits)) < 1e-6 && Math.round(splits) >= 1 && Math.round(splits) <= 24) {
+            return { splits: Math.round(splits) };
+        }
+    }
+    return { splits: 10 };
+}
+/**
+ * Menor passo de rótulo (divisor de `splits`, para a última marca sempre ter rótulo) em que os
+ * rótulos não se encostam ao longo do arco de raio `radius`.
+ */
+function labelEvery(splits, radius, labelWidth, font) {
+    const spacing = ((SWEEP * Math.PI) / 180 / splits) * radius;
+    const need = labelWidth + font * 0.8;
+    for (let k = 1; k <= splits; k++) {
+        if (splits % k !== 0)
+            continue;
+        if (spacing * k >= need)
+            return k;
+    }
+    return splits;
+}
+
+/** Duração do preenchimento animado (ms): a mesma para o arco, a agulha e o número. */
+const DURATION = 900;
+/** Agulha fina com as pontas arredondadas (caminho na grade do motor, esticado até o comprimento pedido). */
+const NEEDLE_PATH = 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z';
+/** Lê o tamanho de fonte de um token (`--hm-font-size-*`) em px, resolvido no elemento. */
+function tokenFont(host, token, fallback) {
+    const probe = host.ownerDocument.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.cssText = `position:absolute;visibility:hidden;font-size:var(${token})`;
+    host.appendChild(probe);
+    try {
+        const px = parseFloat(getComputedStyle(probe).fontSize);
+        return Number.isFinite(px) && px > 0 ? px : fallback;
+    }
+    finally {
+        probe.remove();
+    }
+}
+/**
+ * Um valor numa escala (meta atingida, ocupação, SLA). Para vários indicadores, vários medidores.
+ * Arco de 240° com a escala por fora, agulha e valor no centro; ao aparecer e a cada troca de valor,
+ * o arco preenche animado do valor anterior até o novo, com a agulha e o número acompanhando.
+ */
 class HmGaugeChartComponent extends HmChartBase {
+    /**
+     * Tamanho medido do gráfico e das fontes (px). `undefined` até a primeira medição: até lá o motor
+     * recebe só a moldura vazia, para a animação de entrada começar uma vez só, já na geometria final
+     * (um primeiro desenho provisório recriaria a agulha no meio do caminho, fora de compasso com o número).
+     */
+    #box;
+    /**
+     * Valor desenhado agora (arco, agulha e número). A animação é do próprio componente, quadro a quadro,
+     * com o motor sem animação: assim os três saem sempre do mesmo número, mesmo que o motor redesenhe no
+     * meio do caminho (troca de tema, de tamanho), o que faria a agulha recomeçar e o número não.
+     */
+    #shown;
+    #target;
+    #frame;
     constructor() {
-        super(...arguments);
+        super();
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
         this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /**
+         * Preenche o arco animado ao aparecer e a cada troca de valor (do valor anterior até o novo).
+         * Com `prefers-reduced-motion`, nunca anima. O resumo e a tabela já trazem o valor final.
+         */
+        this.animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+        /** Agulha que gira junto com a ponta do arco. Sem ela, o valor vai para o centro do arco. */
+        this.needle = input(true, ...(ngDevMode ? [{ debugName: "needle" }] : /* istanbul ignore next */ []));
+        /** Marcas da escala por fora do arco, com rótulos. Desligado, só o mínimo e o máximo aparecem. */
+        this.ticks = input(true, ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+        /** Intervalo entre as marcas, na unidade do valor; padrão (ou intervalo que não divide a escala): um décimo. */
+        this.tickStep = input(null, ...(ngDevMode ? [{ debugName: "tickStep" }] : /* istanbul ignore next */ []));
+        /** Legenda curta abaixo do valor (ex.: "das PAs conectadas"); entra também no resumo acessível. */
+        this.caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+        /** Formato do valor no centro, quando difere do `numberFormat` (que vale para a escala e a tabela). */
+        this.valueFormat = input(null, ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+        /**
+         * Tamanho medido do gráfico e das fontes (px). `undefined` até a primeira medição: até lá o motor
+         * recebe só a moldura vazia, para a animação de entrada começar uma vez só, já na geometria final
+         * (um primeiro desenho provisório recriaria a agulha no meio do caminho, fora de compasso com o número).
+         */
+        this.#box = signal(undefined, { ...(ngDevMode ? { debugName: "#box" } : /* istanbul ignore next */ {}), equal: sameBox });
+        /**
+         * Valor desenhado agora (arco, agulha e número). A animação é do próprio componente, quadro a quadro,
+         * com o motor sem animação: assim os três saem sempre do mesmo número, mesmo que o motor redesenhe no
+         * meio do caminho (troca de tema, de tamanho), o que faria a agulha recomeçar e o número não.
+         */
+        this.#shown = signal(undefined, ...(ngDevMode ? [{ debugName: "#shown" }] : /* istanbul ignore next */ []));
+        this.#frame = 0;
+        const host = inject(ElementRef).nativeElement;
+        let observer = null;
+        afterNextRender(() => {
+            const target = host.querySelector('.hm-chart');
+            if (!target) {
+                this.#box.set({ width: 0, height: 0, smallFont: 12, baseFont: 14 });
+                return;
+            }
+            const measure = () => {
+                this.#box.set({
+                    width: Math.round(target.clientWidth),
+                    height: Math.round(target.clientHeight),
+                    smallFont: tokenFont(target, '--hm-font-size-sm', 12),
+                    baseFont: tokenFont(target, '--hm-font-size-md', 14),
+                });
+            };
+            measure();
+            if (typeof ResizeObserver !== 'undefined') {
+                observer = new ResizeObserver(measure);
+                observer.observe(target);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            observer?.disconnect();
+            this.#stop();
+        });
+        effect(() => {
+            const value = this.value();
+            const min = this.min();
+            const animated = this.animated();
+            const box = this.#box();
+            untracked(() => this.#animateTo(value, min, animated, box));
+        });
+    }
+    /** Leva o valor desenhado até `value`: animado do valor atual (ou do mínimo, na entrada), ou direto. */
+    #animateTo(value, min, animated, box) {
+        if (box === undefined)
+            return; // ainda sem desenho: a entrada começa quando houver medida
+        if (this.#target === value)
+            return; // mesmo alvo (só mudou o tamanho): segue o que já estava
+        this.#target = value;
+        this.#stop();
+        const reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!animated || reduced || !(box.width > 0) || typeof requestAnimationFrame !== 'function' || !Number.isFinite(value)) {
+            this.#shown.set(value);
+            return;
+        }
+        const from = this.#shown() ?? min;
+        const start = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - start) / DURATION);
+            const eased = 1 - (1 - t) ** 3; // cubicOut: arranca rápido e assenta devagar
+            this.#shown.set(t >= 1 ? value : from + (value - from) * eased);
+            this.#frame = t < 1 ? requestAnimationFrame(step) : 0;
+        };
+        this.#shown.set(from);
+        this.#frame = requestAnimationFrame(step);
+    }
+    #stop() {
+        if (this.#frame && typeof cancelAnimationFrame === 'function')
+            cancelAnimationFrame(this.#frame);
+        this.#frame = 0;
     }
     build(ctx) {
         const value = this.value();
         const min = this.min();
         const max = this.max();
+        const caption = this.caption();
+        const needle = this.needle();
+        const ticks = this.ticks();
+        const valueNum = this.valueFormat() ? numberFormatter(ctx.locale, this.valueFormat()) : ctx.num;
+        const { splits } = ticks ? gaugeScale(min, max, this.tickStep()) : { splits: 1 };
+        const tickValue = (i) => min + ((max - min) * i) / splits;
+        const allLabels = Array.from({ length: splits + 1 }, (_, i) => ctx.num(tickValue(i)));
+        // Reserva a largura do valor mais longo da escala (o número conta de min até max na animação).
+        const valueText = [valueNum(min), valueNum(max), valueNum(value)].reduce((a, b) => (b.length > a.length ? b : a));
+        const box = this.#box();
+        const measured = box !== undefined;
+        const layoutFor = (labels) => box ? gaugeLayout({ box, labels, valueText, hasCaption: !!caption, needle, ticks }) : null;
+        let labels = allLabels;
+        let layout = layoutFor(labels);
+        if (layout && splits > 1) {
+            const widest = Math.max(...allLabels.map((l) => l.length)) * layout.labelFont * 0.6;
+            const every = labelEvery(splits, layout.radius + layout.tickGap + layout.majorLength, widest, layout.labelFont);
+            if (every > 1) {
+                labels = allLabels.map((l, i) => (i % every === 0 ? l : null));
+                layout = layoutFor(labels);
+            }
+        }
         return {
             option: {
                 tooltip: { show: false },
-                series: [{
-                        type: 'gauge',
-                        min,
-                        max,
-                        startAngle: 220,
-                        endAngle: -40,
-                        radius: '94%',
-                        progress: { show: true, width: 12, roundCap: true },
-                        axisLine: { roundCap: true, lineStyle: { width: 12 } },
-                        pointer: { show: false },
-                        axisTick: { show: false },
-                        splitLine: { show: false },
-                        axisLabel: { distance: 18, formatter: (v) => (v === min || v === max ? ctx.num(v) : '') },
-                        anchor: { show: false },
-                        title: { show: false },
-                        detail: { valueAnimation: true, offsetCenter: [0, '0%'], fontSize: 30, formatter: (v) => ctx.num(v) },
-                        data: [{ value, name: this.label() }],
-                    }],
+                series: !measured ? [] : [
+                    this.#mainSeries(ctx, { value: this.#shown() ?? value, min, max, caption, needle, ticks, splits, layout, valueNum }),
+                    ...(labels.some((l) => l) ? [this.#labelSeries(labels, layout, min, max)] : []),
+                ],
             },
-            summary: ctx.i18n.format(ctx.m.summary.gauge, { type: ctx.m.types.gauge, value: ctx.num(value), min: ctx.num(min), max: ctx.num(max) }),
+            summary: caption
+                ? ctx.i18n.format(ctx.m.summary.gaugeCaption, { type: ctx.m.types.gauge, value: valueNum(value), caption, min: ctx.num(min), max: ctx.num(max) })
+                : ctx.i18n.format(ctx.m.summary.gauge, { type: ctx.m.types.gauge, value: valueNum(value), min: ctx.num(min), max: ctx.num(max) }),
             table: {
                 columns: [ctx.m.columns.indicator, ctx.m.columns.value, ctx.m.columns.min, ctx.m.columns.max],
                 align: ['start', 'end', 'end', 'end'],
@@ -76074,13 +76497,102 @@ class HmGaugeChartComponent extends HmChartBase {
             points: [],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmGaugeChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmGaugeChartComponent, isStandalone: true, selector: "hm-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** Arco, progresso, agulha, marcas, valor e legenda. */
+    #mainSeries(ctx, o) {
+        const l = o.layout;
+        const arcWidth = l?.arcWidth ?? 12;
+        const gap = l?.tickGap ?? 4;
+        const major = l?.majorLength ?? 8;
+        const minor = l?.minorLength ?? 4;
+        // As marcas ficam por fora: distância negativa conta a partir da borda externa do arco.
+        const showMinor = o.ticks && (l ? l.radius >= 72 : true);
+        return {
+            type: 'gauge',
+            min: o.min,
+            max: o.max,
+            startAngle: GAUGE_START_ANGLE,
+            endAngle: GAUGE_END_ANGLE,
+            center: l ? [l.cx, l.cy] : ['50%', '58%'],
+            radius: l ? l.radius : '62%',
+            splitNumber: o.splits,
+            silent: true,
+            // A animação é do componente (ver `#shown`): o motor só desenha cada quadro.
+            animation: false,
+            progress: { show: true, width: arcWidth, roundCap: true },
+            axisLine: { roundCap: true, lineStyle: { width: arcWidth } },
+            splitLine: { show: o.ticks, length: major, distance: -(arcWidth + gap + major), lineStyle: { width: Math.max(1.5, arcWidth * 0.16), cap: 'round' } },
+            axisTick: { show: showMinor, splitNumber: 2, length: minor, distance: -(arcWidth + gap + minor), lineStyle: { width: 1, cap: 'round' } },
+            axisLabel: { show: false },
+            pointer: o.needle
+                ? { show: true, icon: NEEDLE_PATH, length: l?.needleLength ?? '82%', width: l?.needleWidth ?? 4, keepAspect: false, showAbove: true }
+                : { show: false },
+            anchor: o.needle
+                ? { show: true, showAbove: true, size: l?.hubSize ?? 14, itemStyle: { borderWidth: Math.max(2, (l?.hubSize ?? 14) * 0.22) } }
+                : { show: false },
+            title: {
+                show: !!o.caption,
+                offsetCenter: [0, l ? l.captionOffset : o.needle ? '72%' : '30%'],
+                fontSize: l?.captionFont ?? 12,
+            },
+            detail: {
+                offsetCenter: [0, l ? l.valueOffset : o.needle ? '42%' : '0%'],
+                fontSize: l?.valueFont ?? 28,
+                fontWeight: 'bold',
+                color: 'inherit',
+                formatter: (v) => o.valueNum(v),
+            },
+            data: [{ value: o.value, name: o.caption }],
+        };
+    }
+    /**
+     * Rótulos da escala, cada um posicionado por fora do arco (o rótulo nativo do motor fica por
+     * dentro e alinhado para dentro). Série só de textos, sem arco nem agulha.
+     */
+    #labelSeries(labels, l, min, max) {
+        const n = Math.max(1, labels.length - 1);
+        const placed = l?.labels;
+        let k = 0;
+        const data = labels.flatMap((text, i) => {
+            if (!text)
+                return [];
+            const spot = placed?.[k++];
+            // Sem medição (jsdom), uma aproximação em % do raio.
+            const a = ((GAUGE_START_ANGLE - ((GAUGE_START_ANGLE - GAUGE_END_ANGLE) * i) / n) * Math.PI) / 180;
+            const offset = spot ? [spot.dx, spot.dy] : [`${Math.round(Math.cos(a) * 128)}%`, `${Math.round(-Math.sin(a) * 124)}%`];
+            return [{ value: min, name: text, title: { offsetCenter: offset } }];
+        });
+        return {
+            type: 'gauge',
+            min,
+            max,
+            startAngle: GAUGE_START_ANGLE,
+            endAngle: GAUGE_END_ANGLE,
+            center: l ? [l.cx, l.cy] : ['50%', '58%'],
+            radius: l ? l.radius : '62%',
+            silent: true,
+            animation: false,
+            progress: { show: false },
+            axisLine: { show: false },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            pointer: { show: false },
+            anchor: { show: false },
+            detail: { show: false },
+            title: { show: true, fontSize: l?.labelFont ?? 12 },
+            data,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmGaugeChartComponent, isStandalone: true, selector: "hm-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, needle: { classPropertyName: "needle", publicName: "needle", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<hm-chart-frame [view]="view()" [label]="label()" [description]="description()" [height]="height()" [(showTable)]="showTable" />`, isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmGaugeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hm-gauge-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: CHART_TEMPLATE, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+            args: [{ selector: 'hm-gauge-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `<hm-chart-frame [view]="view()" [label]="label()" [description]="description()" [height]="height()" [(showTable)]="showTable" />`, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], needle: [{ type: i0.Input, args: [{ isSignal: true, alias: "needle", required: false }] }], ticks: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticks", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }] } });
+function sameBox(a, b) {
+    return a === b || (!!a && !!b && a.width === b.width && a.height === b.height && a.smallFont === b.smallFont && a.baseFont === b.baseFont);
+}
 
 /**
  * Etapas sucessivas de um processo (visitas → cadastros → compras). A ordem de `data` é a ordem das
@@ -76122,7 +76634,7 @@ class HmFunnelChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmFunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmFunnelChartComponent, isStandalone: true, selector: "hm-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmFunnelChartComponent, isStandalone: true, selector: "hm-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmFunnelChartComponent, decorators: [{
             type: Component,
@@ -76168,7 +76680,7 @@ class HmRadarChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmRadarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmRadarChartComponent, isStandalone: true, selector: "hm-radar-chart", inputs: { indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmRadarChartComponent, isStandalone: true, selector: "hm-radar-chart", inputs: { indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmRadarChartComponent, decorators: [{
             type: Component,
@@ -76223,7 +76735,7 @@ class HmTreemapChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmTreemapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmTreemapChartComponent, isStandalone: true, selector: "hm-treemap-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmTreemapChartComponent, isStandalone: true, selector: "hm-treemap-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmTreemapChartComponent, decorators: [{
             type: Component,
@@ -76268,7 +76780,7 @@ class HmSankeyChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmSankeyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmSankeyChartComponent, isStandalone: true, selector: "hm-sankey-chart", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmSankeyChartComponent, isStandalone: true, selector: "hm-sankey-chart", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmSankeyChartComponent, decorators: [{
             type: Component,
@@ -76347,13 +76859,446 @@ class HmBoxplotChartComponent extends HmChartBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBoxplotChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmBoxplotChartComponent, isStandalone: true, selector: "hm-boxplot-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmBoxplotChartComponent, isStandalone: true, selector: "hm-boxplot-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBoxplotChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hm-boxplot-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: CHART_TEMPLATE, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
+/**
+ * Minigráfico: a tendência de uma série em pouco espaço, sem eixos nem legenda (dentro de um card de
+ * indicador, numa linha de tabela). O resumo (primeiro, último, mínimo e máximo) e a tabela de dados
+ * ficam na árvore de acessibilidade; sem o botão "Ver como tabela", para caber no `[footer]` do
+ * `hm-stat-card`.
+ */
+class HmSparklineChartComponent extends HmChartBase {
+    constructor() {
+        super(...arguments);
+        /** Valores na ordem (o mais antigo primeiro); `null` é lacuna. */
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Rótulo de cada valor (datas, meses) para a tabela e o tooltip; padrão: a posição (1, 2, 3...). */
+        this.categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+        /** Preenche a área sob a linha. */
+        this.area = input(false, ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+        /** Destaca o último ponto (o valor atual). */
+        this.showLast = input(true, ...(ngDevMode ? [{ debugName: "showLast" }] : /* istanbul ignore next */ []));
+        /** Barras em vez de linha (valores discretos: pedidos por dia). */
+        this.bars = input(false, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+        /**
+         * Entra na ordem de foco e mostra o tooltip (setas percorrem os pontos). Desligado (padrão), o
+         * minigráfico é só uma imagem com resumo: um card de indicador não ganha uma parada de Tab a mais.
+         */
+        this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    }
+    build(ctx) {
+        const data = this.data();
+        const names = data.map((_, i) => this.categories()[i] ?? String(i + 1));
+        const last = data.length - 1;
+        const interactive = this.interactive();
+        const values = data.map((v, i) => !this.bars() && this.showLast() && i === last && v != null ? { value: v, symbol: 'circle', symbolSize: 6 } : v);
+        const finite = data.filter((v) => v != null && Number.isFinite(v));
+        const range = extent(finite);
+        const describe = (i) => `${names[i]}: ${ctx.num(data[i])}`;
+        return {
+            option: {
+                grid: { left: 4, right: 6, top: 6, bottom: 4, containLabel: false },
+                tooltip: interactive
+                    ? {
+                        ...tooltipOption(ctx, 'axis'),
+                        axisPointer: { type: 'line' },
+                        formatter: (p) => escapeHtml(describe((Array.isArray(p) ? p[0] : p).dataIndex)),
+                    }
+                    : { show: false },
+                xAxis: { type: 'category', data: names, show: false, boundaryGap: this.bars() },
+                yAxis: { type: 'value', show: false, scale: !this.bars() },
+                series: [
+                    this.bars()
+                        ? { type: 'bar', name: this.label(), data: [...data], barCategoryGap: '30%', silent: !interactive }
+                        : {
+                            type: 'line',
+                            name: this.label(),
+                            data: values,
+                            symbol: 'none',
+                            lineStyle: { width: 1.75 },
+                            areaStyle: this.area() ? { opacity: 0.18 } : undefined,
+                            silent: !interactive,
+                        },
+                ],
+            },
+            summary: ctx.i18n.plural(ctx.m.summary.sparkline, finite.length, {
+                type: ctx.m.types.sparkline,
+                first: ctx.num(finite[0]),
+                last: ctx.num(finite[finite.length - 1]),
+                min: ctx.num(range?.[0]),
+                max: ctx.num(range?.[1]),
+            }),
+            table: {
+                columns: [ctx.m.columns.category, ctx.m.columns.value],
+                align: ['start', 'end'],
+                rows: data.map((v, i) => ({ header: names[i], cells: [ctx.num(v)] })),
+            },
+            points: interactive ? data.map((_, i) => ({ seriesIndex: 0, dataIndex: i, text: describe(i) })) : [],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmSparklineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmSparklineChartComponent, isStandalone: true, selector: "hm-sparkline-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, showLast: { classPropertyName: "showLast", publicName: "showLast", isSignal: true, isRequired: false, transformFunction: null }, bars: { classPropertyName: "bars", publicName: "bars", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<hm-chart-frame
+    [view]="view()"
+    [label]="label()"
+    [description]="description()"
+    [height]="height() || 'calc(var(--hm-control-height) * 1.5)'"
+    [tableToggle]="false"
+    [(showTable)]="showTable"
+  />`, isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmSparklineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hm-sparkline-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `<hm-chart-frame
+    [view]="view()"
+    [label]="label()"
+    [description]="description()"
+    [height]="height() || 'calc(var(--hm-control-height) * 1.5)'"
+    [tableToggle]="false"
+    [(showTable)]="showTable"
+  />`, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], showLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLast", required: false }] }], bars: [{ type: i0.Input, args: [{ isSignal: true, alias: "bars", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+
+/**
+ * Tamanho real da área do gráfico (o `.hm-chart` dentro do componente), medido depois da primeira
+ * pintura e a cada redimensionamento. `null` até a primeira medição (e em ambiente sem layout).
+ * Chame no construtor de um gráfico tipado.
+ */
+function injectChartBox() {
+    const host = inject(ElementRef).nativeElement;
+    const box = signal(null, { ...(ngDevMode ? { debugName: "box" } : /* istanbul ignore next */ {}), equal: (a, b) => a === b || (!!a && !!b && a.width === b.width && a.height === b.height) });
+    let observer = null;
+    afterNextRender(() => {
+        const target = host.querySelector('.hm-chart');
+        if (!target)
+            return;
+        const measure = () => {
+            const width = Math.round(target.clientWidth);
+            const height = Math.round(target.clientHeight);
+            box.set(width > 0 && height > 0 ? { width, height } : null);
+        };
+        measure();
+        if (typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(measure);
+            observer.observe(target);
+        }
+    });
+    inject(DestroyRef).onDestroy(() => observer?.disconnect());
+    return box;
+}
+/**
+ * Cores de tokens (`--hm-*`) resolvidas para `rgb(...)` no elemento do gráfico, para os gráficos
+ * que pintam partes fora da paleta (faixas neutras, aumento/redução). Relidas quando tema, família,
+ * densidade ou paleta mudam num ancestral. `null` antes da primeira pintura e em `forced-colors`
+ * (aí o tema do motor já usa cores de sistema e o gráfico cai na paleta dele).
+ */
+function injectTokenColors(tokens) {
+    const host = inject(ElementRef).nativeElement;
+    const colors = signal(null, { ...(ngDevMode ? { debugName: "colors" } : /* istanbul ignore next */ {}), equal: (a, b) => JSON.stringify(a) === JSON.stringify(b) });
+    let scope = null;
+    let forced = null;
+    // Fora do documento (painel de aba ainda não exibido) os tokens não resolvem: relê ao entrar na página.
+    let attach = null;
+    const watchAttach = () => {
+        if (attach || host.isConnected || typeof ResizeObserver === 'undefined')
+            return;
+        attach = new ResizeObserver(() => {
+            if (!host.isConnected)
+                return;
+            attach?.disconnect();
+            attach = null;
+            read();
+        });
+        attach.observe(host);
+    };
+    const read = () => {
+        if (forced?.matches) {
+            colors.set(null);
+            return;
+        }
+        const out = {};
+        for (const key of Object.keys(tokens)) {
+            const value = resolveTokenColor(host, tokens[key]);
+            if (!value) {
+                colors.set(null);
+                return;
+            }
+            out[key] = value;
+        }
+        colors.set(out);
+    };
+    const onForced = () => read();
+    afterNextRender(() => {
+        forced = typeof matchMedia === 'function' ? matchMedia('(forced-colors: active)') : null;
+        forced?.addEventListener?.('change', onForced);
+        read();
+        watchAttach();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        scope = new MutationObserver((records) => {
+            if (records.some((r) => r.target.contains(host)))
+                queueMicrotask(read);
+        });
+        scope.observe(host.ownerDocument.documentElement, {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-theme', 'data-family', 'data-density', 'data-font', 'style'],
+        });
+    });
+    inject(DestroyRef).onDestroy(() => {
+        scope?.disconnect();
+        attach?.disconnect();
+        forced?.removeEventListener?.('change', onForced);
+    });
+    return colors;
+}
+/** `rgb(r, g, b)` (ou `rgba`) com outra opacidade; texto que não for rgb volta como veio. */
+function withAlpha(color, alpha) {
+    const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/.exec(color);
+    return m ? `rgba(${m[1]}, ${m[2]}, ${m[3]}, ${alpha})` : color;
+}
+
+/** Opacidade das faixas, da primeira (mais escura) à última: o texto translúcido funciona nos dois temas. */
+const BAND_ALPHA = [0.22, 0.14, 0.08, 0.05];
+/**
+ * Gráfico de bala: cada linha é um indicador com o valor (barra fina na cor da série), a meta (marca
+ * vertical) e as faixas qualitativas ao fundo. Substitui um painel de medidores lado a lado em pouco
+ * espaço, com todos na mesma escala.
+ */
+class HmBulletChartComponent extends HmChartBase {
+    constructor() {
+        super(...arguments);
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Fim da escala (comum a todos); padrão: um valor redondo que cobre valores, metas e faixas. */
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.#box = injectChartBox();
+        this.#colors = injectTokenColors({ text: '--hm-text' });
+    }
+    #box;
+    #colors;
+    build(ctx) {
+        const items = this.items();
+        const names = items.map((i) => i.name);
+        const bands = Math.max(0, ...items.map((i) => i.ranges?.length ?? 0));
+        // Sem `max`, o motor escolhe um fim de escala redondo que cobre valores, metas e faixas (um fim
+        // quebrado, como 270, cola o último rótulo no penúltimo).
+        const top = this.max();
+        const reach = Math.max(0, ...items.flatMap((i) => [i.value, i.target ?? 0, ...(i.ranges ?? [])]));
+        const text = this.#colors()?.text;
+        const box = this.#box();
+        // Altura da marca da meta: 70% da faixa de cada linha (medida); antes da medida, um valor seguro.
+        const row = box ? (box.height - 28) / Math.max(1, items.length) : 40;
+        const markHeight = Math.max(10, Math.min(36, row * 0.62));
+        const bandSeries = Array.from({ length: bands }, (_, b) => ({
+            type: 'bar',
+            name: `band-${b}`,
+            stack: 'bands',
+            yAxisIndex: 0,
+            barWidth: '62%',
+            silent: true,
+            itemStyle: text ? { color: withAlpha(text, BAND_ALPHA[Math.min(b, BAND_ALPHA.length - 1)]) } : { opacity: 0.12 + 0.06 * (bands - b) },
+            data: items.map((i) => {
+                const r = i.ranges ?? [];
+                return b < r.length ? r[b] - (b ? r[b - 1] : 0) : 0;
+            }),
+            tooltip: { show: false },
+            animation: false,
+        }));
+        const series = [
+            ...bandSeries,
+            {
+                type: 'bar',
+                name: ctx.m.columns.value,
+                yAxisIndex: 1,
+                barWidth: '24%',
+                data: items.map((i) => i.value),
+                emphasis: { focus: 'self' },
+            },
+            {
+                type: 'scatter',
+                name: ctx.m.columns.goal,
+                yAxisIndex: 0,
+                symbol: 'rect',
+                symbolSize: [3, markHeight],
+                itemStyle: text ? { color: text } : undefined,
+                data: items.map((i, idx) => (i.target == null ? null : [i.target, idx])),
+                z: 5,
+            },
+        ];
+        const describe = (i) => i.target == null
+            ? ctx.i18n.format(ctx.m.summary.bulletItemNoTarget, { name: i.name, value: ctx.num(i.value) })
+            : ctx.i18n.format(ctx.m.summary.bulletItem, { name: i.name, value: ctx.num(i.value), target: ctx.num(i.target) });
+        const valueSeries = bands;
+        return {
+            option: {
+                grid: { left: 6, right: 20, top: 8, bottom: 6, containLabel: true },
+                tooltip: {
+                    ...tooltipOption(ctx, 'axis'),
+                    formatter: (p) => {
+                        const first = (Array.isArray(p) ? p[0] : p);
+                        return escapeHtml(describe(items[first.dataIndex]));
+                    },
+                },
+                legend: { show: false },
+                xAxis: { type: 'value', min: 0, max: top ?? (reach > 0 ? undefined : 1), axisLabel: { formatter: (v) => ctx.num(v) } },
+                yAxis: [
+                    { type: 'category', data: names, inverse: true, axisTick: { show: false } },
+                    { type: 'category', data: names, inverse: true, show: false },
+                ],
+                series,
+            },
+            summary: [ctx.i18n.plural(ctx.m.summary.items, items.length, { type: ctx.m.types.bullet }), ...items.map(describe)].join(' '),
+            table: {
+                columns: [ctx.m.columns.indicator, ctx.m.columns.value, ctx.m.columns.goal, ctx.m.columns.ranges],
+                align: ['start', 'end', 'end', 'end'],
+                rows: items.map((i) => ({
+                    header: i.name,
+                    cells: [ctx.num(i.value), i.target == null ? EMPTY_VALUE : ctx.num(i.target), i.ranges?.length ? i.ranges.map((r) => ctx.num(r)).join(' · ') : EMPTY_VALUE],
+                })),
+            },
+            points: items.map((i, idx) => ({ seriesIndex: valueSeries, dataIndex: idx, text: describe(i) })),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBulletChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmBulletChartComponent, isStandalone: true, selector: "hm-bullet-chart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmBulletChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hm-bullet-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: CHART_TEMPLATE, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+/** Calcula as barras da cascata (sem framework: testável e portável). */
+function waterfallBars(steps) {
+    let running = 0;
+    return steps.map((s) => {
+        if (s.total)
+            return { kind: 'total', from: 0, to: running, change: running, cumulative: running };
+        const change = Number.isFinite(s.value) ? s.value : 0;
+        const from = running;
+        running += change;
+        return { kind: change < 0 ? 'decrease' : 'increase', from, to: running, change, cumulative: running };
+    });
+}
+/**
+ * Gráfico de cascata: como um valor inicial chega ao final, etapa por etapa (receita → custos →
+ * lucro). Aumentos e reduções flutuam a partir do acumulado; totais partem do zero. Cores da escala
+ * divergente dos tokens (um polo para aumento, outro para redução, o ponto neutro para totais).
+ */
+class HmWaterfallChartComponent extends HmChartBase {
+    constructor() {
+        super(...arguments);
+        this.steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.#colors = injectTokenColors({
+            increase: '--hm-data-diverging-6',
+            decrease: '--hm-data-diverging-2',
+            total: '--hm-data-diverging-4',
+        });
+    }
+    #colors;
+    build(ctx) {
+        const steps = this.steps();
+        const bars = waterfallBars(steps);
+        const names = steps.map((s) => s.name);
+        const colors = this.#colors();
+        const signed = numberFormatter(ctx.locale, { ...(this.numberFormat() ?? {}), signDisplay: 'exceptZero' });
+        const label = { increase: ctx.m.waterfall.increase, decrease: ctx.m.waterfall.decrease, total: ctx.m.waterfall.total };
+        // Empilhamento por sinal (padrão do motor): base invisível + a parte positiva e a negativa de cada barra.
+        // Barra que cruza o zero sai do zero para os dois lados.
+        const base = [];
+        const parts = {
+            increase: { pos: [], neg: [] },
+            decrease: { pos: [], neg: [] },
+            total: { pos: [], neg: [] },
+        };
+        bars.forEach((b, i) => {
+            const low = Math.min(b.from, b.to);
+            const high = Math.max(b.from, b.to);
+            for (const k of Object.keys(parts)) {
+                parts[k].pos[i] = null;
+                parts[k].neg[i] = null;
+            }
+            if (low >= 0) {
+                base[i] = low;
+                parts[b.kind].pos[i] = high - low;
+            }
+            else if (high <= 0) {
+                base[i] = high;
+                parts[b.kind].neg[i] = low - high;
+            }
+            else {
+                base[i] = 0;
+                parts[b.kind].pos[i] = high;
+                parts[b.kind].neg[i] = low;
+            }
+        });
+        const kinds = ['increase', 'decrease', 'total'].filter((k) => bars.some((b) => b.kind === k));
+        const series = [
+            {
+                type: 'bar',
+                name: 'base',
+                stack: 'waterfall',
+                silent: true,
+                itemStyle: { color: 'transparent', borderColor: 'transparent' },
+                emphasis: { disabled: true },
+                tooltip: { show: false },
+                data: base,
+            },
+            ...kinds.flatMap((k) => ['pos', 'neg'].map((side) => ({
+                type: 'bar',
+                name: label[k],
+                stack: 'waterfall',
+                barCategoryGap: '30%',
+                itemStyle: colors ? { color: colors[k] } : undefined,
+                data: parts[k][side],
+            }))),
+        ];
+        const describe = (i) => {
+            const b = bars[i];
+            return b.kind === 'total'
+                ? `${names[i]}: ${label.total} ${ctx.num(b.cumulative)}`
+                : `${names[i]}: ${label[b.kind]} ${signed(b.change)}, ${ctx.m.columns.cumulative} ${ctx.num(b.cumulative)}`;
+        };
+        const hasLegend = kinds.length > 1;
+        const end = bars.length ? bars[bars.length - 1].cumulative : 0;
+        const start = bars.length ? bars[0].change : 0;
+        return {
+            option: {
+                grid: gridOption(hasLegend && ctx.legend),
+                tooltip: {
+                    ...tooltipOption(ctx, 'axis'),
+                    formatter: (p) => escapeHtml(describe((Array.isArray(p) ? p[0] : p).dataIndex)),
+                },
+                legend: { ...legendOption(ctx, hasLegend), data: kinds.map((k) => label[k]) },
+                xAxis: { type: 'category', data: names, axisTick: { alignWithLabel: true } },
+                yAxis: { type: 'value', axisLabel: { formatter: (v) => ctx.num(v) } },
+                series,
+            },
+            summary: ctx.i18n.plural(ctx.m.summary.waterfall, steps.length, { type: ctx.m.types.waterfall, start: ctx.num(start), end: ctx.num(end) }),
+            table: {
+                columns: [ctx.m.columns.category, ctx.m.columns.change, ctx.m.columns.cumulative],
+                align: ['start', 'end', 'end'],
+                rows: bars.map((b, i) => ({ header: names[i], cells: [b.kind === 'total' ? label.total : signed(b.change), ctx.num(b.cumulative)] })),
+            },
+            // Destaca a série visível da etapa (a da cor dela) ao navegar com as setas.
+            points: bars.map((b, i) => {
+                const k = kinds.indexOf(b.kind);
+                const side = parts[b.kind].pos[i] != null ? 0 : 1;
+                return { seriesIndex: 1 + k * 2 + side, dataIndex: i, text: describe(i) };
+            }),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmWaterfallChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.24", type: HmWaterfallChartComponent, isStandalone: true, selector: "hm-waterfall-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<hm-chart-frame [view]=\"view()\" [label]=\"label()\" [description]=\"description()\" [height]=\"height()\" [(showTable)]=\"showTable\" />", isInline: true, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: HmChartFrameComponent, selector: "hm-chart-frame", inputs: ["view", "label", "description", "height", "tableToggle", "showTable"], outputs: ["showTableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HmWaterfallChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hm-waterfall-chart', standalone: true, imports: [HmChartFrameComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: CHART_TEMPLATE, styles: [":host{display:block;inline-size:100%;min-inline-size:0}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }] } });
+
 // API pública de @trismegisto/charts.
 // Gráficos tipados (API orientada a dados)
 
@@ -76361,5 +77306,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CHARTS_I18N_CONFIG, CHARTS_MESSAGES_EN, CHARTS_MESSAGES_ES, CHARTS_MESSAGES_PT_BR, ChartsI18nService, HmBarChartComponent, HmBoxplotChartComponent, HmCalendarHeatmapComponent, HmChartBase, HmChartComponent, HmFunnelChartComponent, HmGaugeChartComponent, HmHeatmapChartComponent, HmLineChartComponent, HmPieChartComponent, HmRadarChartComponent, HmSankeyChartComponent, HmScatterChartComponent, HmTreemapChartComponent, provideChartsMessages };
+export { CHARTS_I18N_CONFIG, CHARTS_MESSAGES_EN, CHARTS_MESSAGES_ES, CHARTS_MESSAGES_PT_BR, ChartsI18nService, HmBarChartComponent, HmBoxplotChartComponent, HmBulletChartComponent, HmCalendarHeatmapComponent, HmChartBase, HmChartComponent, HmFunnelChartComponent, HmGaugeChartComponent, HmHeatmapChartComponent, HmLineChartComponent, HmPieChartComponent, HmRadarChartComponent, HmSankeyChartComponent, HmScatterChartComponent, HmSparklineChartComponent, HmTreemapChartComponent, HmWaterfallChartComponent, provideChartsMessages, waterfallBars };
 //# sourceMappingURL=trismegisto-charts.mjs.map