@praxisui/charts 9.0.0-beta.20 → 9.0.0-beta.22

package/README.md

@@ -134,13 +134,29 @@ const chartDocument: PraxisXUiChartContract = {
 
 Supported sizing modes are `fixed`, `fill-container` and `auto`. Prefer `fill-container` inside dashboard widget shells. Supported surface modes are `auto`, `embedded` and `contained`; prefer `embedded` when another shell owns the card, header or border.
 
+## Micro Visualizations
+
+`PraxisMicroVisualizationComponent` renders the first renderer-neutral presentation visualizations from `@praxisui/core`.
+It is intended for compact presentation surfaces, especially table cells, list items and read-only form summaries.
+
+The initial table-safe kinds are:
+
+- `comparison`
+- `stackedBar`
+- `bullet`
+- `delta`
+
+The component does not instantiate ECharts. It renders lightweight HTML/CSS from `PraxisPresentationVisualizationConfig`
+and falls back to `fallbackText` when the visualization kind is not supported by this first cut.
+For `comparison`, use `points` as the canonical numeric series; `items` remains reserved for item/step-oriented visualizations such as process flow.
+
 ## Authoring Surface
 
 `PraxisChartConfigEditor` is the initial editor shell for canonical `x-ui.chart` documents. It expects governed resources, fields and targets from the host and emits structured apply/save/reset events. The authoring manifest is exported as `PRAXIS_CHARTS_AUTHORING_MANIFEST` for backend/tooling workflows that need executable chart-edit operations.
 
 ## Public API Snapshot
 
-Main exports include `PraxisChartComponent`, `PraxisChartConfigEditor`, chart event/config models, `PraxisXUiChartContract`, engine adapter tokens, `providePraxisCharts`, canonical mapping/normalization/validation services, analytics chart services, chart metadata and `PRAXIS_CHARTS_AUTHORING_MANIFEST`.
+Main exports include `PraxisChartComponent`, `PraxisMicroVisualizationComponent`, `PraxisChartConfigEditor`, chart event/config models, `PraxisXUiChartContract`, engine adapter tokens, `providePraxisCharts`, canonical mapping/normalization/validation services, analytics chart services, chart metadata and `PRAXIS_CHARTS_AUTHORING_MANIFEST`.
 
 ## Official Links
 

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-06-24T23:12:14.260Z",
+  "generatedAt": "2026-06-26T01:13:35.730Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.0-beta.20",
+  "packageVersion": "9.0.0-beta.22",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 2,

package/fesm2022/praxisui-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1$1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisPresentationVisualization, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { throwError, map, of, isObservable, from, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/button';
@@ -2935,6 +2935,315 @@ function normalizeRemoteDataResolverResult$1(result) {
     return of([]);
 }
 
+const SUPPORTED_KINDS = new Set([
+    'comparison',
+    'stackedBar',
+    'bullet',
+    'delta',
+]);
+class PraxisMicroVisualizationComponent {
+    visualizationInput = input(null, { ...(ngDevMode ? { debugName: "visualizationInput" } : /* istanbul ignore next */ {}), alias: 'visualization' });
+    fallbackInput = input('', { ...(ngDevMode ? { debugName: "fallbackInput" } : /* istanbul ignore next */ {}), alias: 'fallbackText' });
+    visualization = computed(() => {
+        const normalized = normalizePraxisPresentationVisualization(this.visualizationInput());
+        return normalized && SUPPORTED_KINDS.has(normalized.kind)
+            ? normalized
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "visualization" }] : /* istanbul ignore next */ []));
+    fallbackText = computed(() => this.visualizationInput()?.fallbackText?.trim() || this.fallbackInput().trim(), ...(ngDevMode ? [{ debugName: "fallbackText" }] : /* istanbul ignore next */ []));
+    kind = computed(() => this.visualization()?.kind ?? 'fallback', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    surface = computed(() => this.visualization()?.surface ?? null, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.visualization()?.size ?? null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    isTableCell = computed(() => this.surface() === 'table-cell', ...(ngDevMode ? [{ debugName: "isTableCell" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const config = this.visualization();
+        return config?.ariaLabel || config?.fallbackText || null;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    comparisonItems = computed(() => this.visualization()?.points ?? [], ...(ngDevMode ? [{ debugName: "comparisonItems" }] : /* istanbul ignore next */ []));
+    stackedSegments = computed(() => this.visualization()?.segments ?? [], ...(ngDevMode ? [{ debugName: "stackedSegments" }] : /* istanbul ignore next */ []));
+    bulletThresholds = computed(() => this.visualization()?.thresholds ?? [], ...(ngDevMode ? [{ debugName: "bulletThresholds" }] : /* istanbul ignore next */ []));
+    bulletBands = computed(() => {
+        const max = this.resolveBulletMax();
+        let previous = 0;
+        return this.bulletThresholds()
+            .map((threshold) => {
+            const current = Math.max(threshold.value, previous);
+            const left = max > 0 ? clampPercent((previous / max) * 100) : 0;
+            const width = max > 0 ? clampPercent(((current - previous) / max) * 100) : 0;
+            previous = current;
+            return {
+                ...(threshold.label ? { label: threshold.label } : {}),
+                ...(threshold.tone ? { tone: threshold.tone } : {}),
+                left,
+                width,
+            };
+        })
+            .filter((band) => band.width > 0);
+    }, ...(ngDevMode ? [{ debugName: "bulletBands" }] : /* istanbul ignore next */ []));
+    deltaValue = computed(() => {
+        const value = this.visualization()?.value;
+        return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+    }, ...(ngDevMode ? [{ debugName: "deltaValue" }] : /* istanbul ignore next */ []));
+    deltaText = computed(() => {
+        const config = this.visualization();
+        if (!config) {
+            return '';
+        }
+        return config.fallbackText || this.formatNumber(this.deltaValue());
+    }, ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
+    deltaIcon = computed(() => {
+        const fallbackText = this.visualization()?.fallbackText?.trim() ?? '';
+        if (/^[+-]/.test(fallbackText)) {
+            return '';
+        }
+        const value = this.deltaValue();
+        if (value > 0) {
+            return '+';
+        }
+        if (value < 0) {
+            return '-';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
+    itemPercent(value) {
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        const values = this.comparisonItems()
+            .map((item) => item.value)
+            .filter((itemValue) => Number.isFinite(itemValue));
+        const max = Math.max(...values, 0);
+        return max > 0 ? clampPercent((value / max) * 100) : 0;
+    }
+    segmentPercent(value) {
+        const total = this.stackedSegments()
+            .reduce((sum, segment) => sum + Math.max(segment.value, 0), 0);
+        return total > 0 ? clampPercent((Math.max(value, 0) / total) * 100) : 0;
+    }
+    valuePercent(value) {
+        const max = this.resolveBulletMax();
+        return typeof value === 'number' && max > 0 ? clampPercent((Math.max(value, 0) / max) * 100) : 0;
+    }
+    formatNumber(value) {
+        return Number.isFinite(value)
+            ? new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(value ?? 0)
+            : '';
+    }
+    resolveBulletMax() {
+        const config = this.visualization();
+        const values = [
+            typeof config?.value === 'number' ? config.value : 0,
+            config?.target ?? 0,
+            config?.total ?? 0,
+            ...this.bulletThresholds().map((threshold) => threshold.value),
+        ].filter((value) => Number.isFinite(value) && value > 0);
+        return Math.max(...values, 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisMicroVisualizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisMicroVisualizationComponent, isStandalone: true, selector: "praxis-micro-visualization", inputs: { visualizationInput: { classPropertyName: "visualizationInput", publicName: "visualization", isSignal: true, isRequired: false, transformFunction: null }, fallbackInput: { classPropertyName: "fallbackInput", publicName: "fallbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-surface": "surface()", "attr.data-size": "size()", "class.prx-micro-visualization--table-cell": "surface() === \"table-cell\"" } }, ngImport: i0, template: `
+    @if (visualization(); as config) {
+      <figure
+        class="prx-micro-visualization"
+        [attr.aria-label]="ariaLabel()"
+        role="img"
+      >
+        @switch (config.kind) {
+          @case ('comparison') {
+            <div class="prx-micro-comparison">
+          @for (item of comparisonItems(); track item.label ?? $index) {
+                <div class="prx-micro-comparison__row">
+                  @if (item.label) {
+                    <span class="prx-micro-comparison__label">{{ item.label }}</span>
+                  }
+                  <span class="prx-micro-comparison__track" aria-hidden="true">
+                    <span
+                      class="prx-micro-comparison__bar"
+                      [attr.data-tone]="item.tone || null"
+                      [style.width.%]="itemPercent(item.value)"
+                    ></span>
+                  </span>
+                  @if (item.value !== undefined) {
+                    <span class="prx-micro-comparison__value">{{ formatNumber(item.value) }}</span>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @case ('stackedBar') {
+            <div class="prx-micro-stacked">
+              <div class="prx-micro-stacked__track" aria-hidden="true">
+                @for (segment of stackedSegments(); track segment.label ?? $index) {
+                  <span
+                    class="prx-micro-stacked__segment"
+                    [attr.data-tone]="segment.tone || null"
+                    [style.width.%]="segmentPercent(segment.value)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell() && config.fallbackText) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('bullet') {
+            <div class="prx-micro-bullet">
+              <div class="prx-micro-bullet__track" aria-hidden="true">
+                @for (band of bulletBands(); track band.label ?? $index) {
+                  <span
+                    class="prx-micro-bullet__range"
+                    [attr.data-tone]="band.tone || null"
+                    [style.left.%]="band.left"
+                    [style.width.%]="band.width"
+                  ></span>
+                }
+                <span
+                  class="prx-micro-bullet__actual"
+                  [attr.data-tone]="config.tone || null"
+                  [style.width.%]="valuePercent(config.value)"
+                ></span>
+                @if (config.target !== undefined) {
+                  <span
+                    class="prx-micro-bullet__target"
+                    [style.left.%]="valuePercent(config.target)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell()) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('delta') {
+            <div
+              class="prx-micro-delta"
+              [class.prx-micro-delta--positive]="deltaValue() > 0"
+              [class.prx-micro-delta--negative]="deltaValue() < 0"
+            >
+              @if (deltaIcon(); as icon) {
+                <span class="prx-micro-delta__icon" aria-hidden="true">{{ icon }}</span>
+              }
+              <span class="prx-micro-delta__value">{{ deltaText() }}</span>
+            </div>
+          }
+        }
+      </figure>
+    } @else {
+      <span class="prx-micro-visualization-fallback">{{ fallbackText() }}</span>
+    }
+  `, isInline: true, styles: [":host{display:inline-block;min-width:0;max-width:100%;color:var(--prx-micro-text-color, var(--md-sys-color-on-surface, #1f2937))}.prx-micro-visualization{display:block;min-width:0;margin:0}:host([data-size=\"xs\"]) .prx-micro-visualization{inline-size:var(--prx-micro-xs-width, 96px)}:host([data-size=\"sm\"]) .prx-micro-visualization{inline-size:var(--prx-micro-sm-width, 136px)}:host([data-size=\"md\"]) .prx-micro-visualization,:host([data-size=\"responsive\"]) .prx-micro-visualization{inline-size:100%}:host(.prx-micro-visualization--table-cell) .prx-micro-visualization{inline-size:var(--prx-micro-table-cell-width, 112px)}.prx-micro-comparison{display:grid;gap:3px}.prx-micro-comparison__row{display:grid;grid-template-columns:minmax(0,48px) minmax(32px,1fr) auto;align-items:center;gap:6px;min-block-size:12px}.prx-micro-comparison__label,.prx-micro-comparison__value,.prx-micro-visualization__caption,.prx-micro-visualization-fallback{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--prx-micro-font-size, 11px);line-height:1.2}.prx-micro-comparison__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-comparison__value{justify-self:end;font-variant-numeric:tabular-nums}.prx-micro-comparison__track,.prx-micro-stacked__track,.prx-micro-bullet__track{position:relative;display:block;overflow:hidden;border-radius:var(--prx-micro-track-radius, 999px);background:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb))}.prx-micro-comparison__track{block-size:5px}.prx-micro-comparison__bar,.prx-micro-stacked__segment,.prx-micro-bullet__range,.prx-micro-bullet__actual{display:block;min-inline-size:1px;background:var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #64748b))}.prx-micro-comparison__bar{block-size:100%}.prx-micro-stacked__track{display:flex;block-size:8px}.prx-micro-stacked__segment{block-size:100%}.prx-micro-bullet__track{block-size:10px}.prx-micro-bullet__range{position:absolute;inset-block:0;display:block;block-size:100%;opacity:.32}.prx-micro-bullet__actual{position:absolute;inset-block-start:3px;inset-inline-start:0;block-size:4px;border-radius:inherit}.prx-micro-bullet__target{position:absolute;inset-block:0;inline-size:2px;background:var(--prx-micro-target-color, var(--md-sys-color-on-surface, #111827))}.prx-micro-delta{display:inline-flex;align-items:center;gap:4px;min-inline-size:0;font-size:var(--prx-micro-font-size, 12px);line-height:1.2;font-variant-numeric:tabular-nums}.prx-micro-delta__icon{flex:0 0 auto}.prx-micro-delta__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-visualization__caption{display:block;margin-block-start:4px;color:var(--prx-micro-caption-color, var(--md-sys-color-on-surface-variant, #4b5563))}[data-tone=info]{background:var(--prx-micro-tone-info, var(--md-sys-color-primary, #2563eb));color:var(--prx-micro-tone-info-text, var(--md-sys-color-primary, #2563eb))}[data-tone=success]{background:var(--prx-micro-tone-success, #15803d);color:var(--prx-micro-tone-success-text, #15803d)}[data-tone=warning]{background:var(--prx-micro-tone-warning, #ca8a04);color:var(--prx-micro-tone-warning-text, #ca8a04)}[data-tone=danger],[data-tone=critical]{background:var(--prx-micro-tone-danger, var(--md-sys-color-error, #dc2626));color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #dc2626))}.prx-micro-delta--positive{color:var(--prx-micro-tone-success-text, #15803d)}.prx-micro-delta--negative{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #dc2626))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisMicroVisualizationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-micro-visualization', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-kind]': 'kind()',
+                        '[attr.data-surface]': 'surface()',
+                        '[attr.data-size]': 'size()',
+                        '[class.prx-micro-visualization--table-cell]': 'surface() === "table-cell"',
+                    }, template: `
+    @if (visualization(); as config) {
+      <figure
+        class="prx-micro-visualization"
+        [attr.aria-label]="ariaLabel()"
+        role="img"
+      >
+        @switch (config.kind) {
+          @case ('comparison') {
+            <div class="prx-micro-comparison">
+          @for (item of comparisonItems(); track item.label ?? $index) {
+                <div class="prx-micro-comparison__row">
+                  @if (item.label) {
+                    <span class="prx-micro-comparison__label">{{ item.label }}</span>
+                  }
+                  <span class="prx-micro-comparison__track" aria-hidden="true">
+                    <span
+                      class="prx-micro-comparison__bar"
+                      [attr.data-tone]="item.tone || null"
+                      [style.width.%]="itemPercent(item.value)"
+                    ></span>
+                  </span>
+                  @if (item.value !== undefined) {
+                    <span class="prx-micro-comparison__value">{{ formatNumber(item.value) }}</span>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @case ('stackedBar') {
+            <div class="prx-micro-stacked">
+              <div class="prx-micro-stacked__track" aria-hidden="true">
+                @for (segment of stackedSegments(); track segment.label ?? $index) {
+                  <span
+                    class="prx-micro-stacked__segment"
+                    [attr.data-tone]="segment.tone || null"
+                    [style.width.%]="segmentPercent(segment.value)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell() && config.fallbackText) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('bullet') {
+            <div class="prx-micro-bullet">
+              <div class="prx-micro-bullet__track" aria-hidden="true">
+                @for (band of bulletBands(); track band.label ?? $index) {
+                  <span
+                    class="prx-micro-bullet__range"
+                    [attr.data-tone]="band.tone || null"
+                    [style.left.%]="band.left"
+                    [style.width.%]="band.width"
+                  ></span>
+                }
+                <span
+                  class="prx-micro-bullet__actual"
+                  [attr.data-tone]="config.tone || null"
+                  [style.width.%]="valuePercent(config.value)"
+                ></span>
+                @if (config.target !== undefined) {
+                  <span
+                    class="prx-micro-bullet__target"
+                    [style.left.%]="valuePercent(config.target)"
+                  ></span>
+                }
+              </div>
+              @if (!isTableCell()) {
+                <figcaption class="prx-micro-visualization__caption">{{ config.fallbackText }}</figcaption>
+              }
+            </div>
+          }
+
+          @case ('delta') {
+            <div
+              class="prx-micro-delta"
+              [class.prx-micro-delta--positive]="deltaValue() > 0"
+              [class.prx-micro-delta--negative]="deltaValue() < 0"
+            >
+              @if (deltaIcon(); as icon) {
+                <span class="prx-micro-delta__icon" aria-hidden="true">{{ icon }}</span>
+              }
+              <span class="prx-micro-delta__value">{{ deltaText() }}</span>
+            </div>
+          }
+        }
+      </figure>
+    } @else {
+      <span class="prx-micro-visualization-fallback">{{ fallbackText() }}</span>
+    }
+  `, styles: [":host{display:inline-block;min-width:0;max-width:100%;color:var(--prx-micro-text-color, var(--md-sys-color-on-surface, #1f2937))}.prx-micro-visualization{display:block;min-width:0;margin:0}:host([data-size=\"xs\"]) .prx-micro-visualization{inline-size:var(--prx-micro-xs-width, 96px)}:host([data-size=\"sm\"]) .prx-micro-visualization{inline-size:var(--prx-micro-sm-width, 136px)}:host([data-size=\"md\"]) .prx-micro-visualization,:host([data-size=\"responsive\"]) .prx-micro-visualization{inline-size:100%}:host(.prx-micro-visualization--table-cell) .prx-micro-visualization{inline-size:var(--prx-micro-table-cell-width, 112px)}.prx-micro-comparison{display:grid;gap:3px}.prx-micro-comparison__row{display:grid;grid-template-columns:minmax(0,48px) minmax(32px,1fr) auto;align-items:center;gap:6px;min-block-size:12px}.prx-micro-comparison__label,.prx-micro-comparison__value,.prx-micro-visualization__caption,.prx-micro-visualization-fallback{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--prx-micro-font-size, 11px);line-height:1.2}.prx-micro-comparison__label{color:var(--prx-micro-label-color, var(--md-sys-color-on-surface-variant, #4b5563))}.prx-micro-comparison__value{justify-self:end;font-variant-numeric:tabular-nums}.prx-micro-comparison__track,.prx-micro-stacked__track,.prx-micro-bullet__track{position:relative;display:block;overflow:hidden;border-radius:var(--prx-micro-track-radius, 999px);background:var(--prx-micro-track-color, var(--md-sys-color-surface-container-high, #e5e7eb))}.prx-micro-comparison__track{block-size:5px}.prx-micro-comparison__bar,.prx-micro-stacked__segment,.prx-micro-bullet__range,.prx-micro-bullet__actual{display:block;min-inline-size:1px;background:var(--prx-micro-tone-neutral, var(--md-sys-color-secondary, #64748b))}.prx-micro-comparison__bar{block-size:100%}.prx-micro-stacked__track{display:flex;block-size:8px}.prx-micro-stacked__segment{block-size:100%}.prx-micro-bullet__track{block-size:10px}.prx-micro-bullet__range{position:absolute;inset-block:0;display:block;block-size:100%;opacity:.32}.prx-micro-bullet__actual{position:absolute;inset-block-start:3px;inset-inline-start:0;block-size:4px;border-radius:inherit}.prx-micro-bullet__target{position:absolute;inset-block:0;inline-size:2px;background:var(--prx-micro-target-color, var(--md-sys-color-on-surface, #111827))}.prx-micro-delta{display:inline-flex;align-items:center;gap:4px;min-inline-size:0;font-size:var(--prx-micro-font-size, 12px);line-height:1.2;font-variant-numeric:tabular-nums}.prx-micro-delta__icon{flex:0 0 auto}.prx-micro-delta__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prx-micro-visualization__caption{display:block;margin-block-start:4px;color:var(--prx-micro-caption-color, var(--md-sys-color-on-surface-variant, #4b5563))}[data-tone=info]{background:var(--prx-micro-tone-info, var(--md-sys-color-primary, #2563eb));color:var(--prx-micro-tone-info-text, var(--md-sys-color-primary, #2563eb))}[data-tone=success]{background:var(--prx-micro-tone-success, #15803d);color:var(--prx-micro-tone-success-text, #15803d)}[data-tone=warning]{background:var(--prx-micro-tone-warning, #ca8a04);color:var(--prx-micro-tone-warning-text, #ca8a04)}[data-tone=danger],[data-tone=critical]{background:var(--prx-micro-tone-danger, var(--md-sys-color-error, #dc2626));color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #dc2626))}.prx-micro-delta--positive{color:var(--prx-micro-tone-success-text, #15803d)}.prx-micro-delta--negative{color:var(--prx-micro-tone-danger-text, var(--md-sys-color-error, #dc2626))}\n"] }]
+        }], propDecorators: { visualizationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visualization", required: false }] }], fallbackInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackText", required: false }] }] } });
+function clampPercent(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(Math.max(value, 0), 100);
+}
+
 const PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH = {
     Jan: [
         { segment: 'Enterprise', total: 52000 },
@@ -7276,4 +7585,4 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "9.0.0-beta.20",
+  "version": "9.0.0-beta.22",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^9.0.0-beta.20",
+    "@praxisui/core": "^9.0.0-beta.22",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.0-beta.20",
+    "@praxisui/table": "^9.0.0-beta.22",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -2,7 +2,7 @@ import * as _praxisui_charts from '@praxisui/charts';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Provider, AfterViewInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import * as _praxisui_core from '@praxisui/core';
-import { PraxisTextValue, WidgetDefinition, WidgetShellConfig, WidgetInstance, ComponentMetadataRegistry, ApiUrlConfig, PraxisI18nService, PraxisAnalyticsProjection, AnalyticsSchemaContractService, AnalyticsPresentationResolver, WidgetPageDefinition, SettingsValueProvider, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, ComponentAuthoringManifest, ComponentDocMeta } from '@praxisui/core';
+import { PraxisTextValue, PraxisPresentationVisualizationConfig, PraxisPresentationVisualizationPoint, PraxisPresentationVisualizationSegment, PraxisPresentationVisualizationThreshold, WidgetDefinition, WidgetShellConfig, WidgetInstance, ComponentMetadataRegistry, ApiUrlConfig, PraxisI18nService, PraxisAnalyticsProjection, AnalyticsSchemaContractService, AnalyticsPresentationResolver, WidgetPageDefinition, SettingsValueProvider, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, ComponentAuthoringManifest, ComponentDocMeta } from '@praxisui/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { EChartsCoreOption } from 'echarts';
 import { HttpClient } from '@angular/common/http';
@@ -531,6 +531,38 @@ declare class PraxisChartComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisChartComponent, "praxis-chart", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "chartDocument": { "alias": "chartDocument"; "required": false; "isSignal": true; }; "filterCriteria": { "alias": "filterCriteria"; "required": false; "isSignal": true; }; "queryContext": { "alias": "queryContext"; "required": false; "isSignal": true; }; "remoteDataResolver": { "alias": "remoteDataResolver"; "required": false; "isSignal": true; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; "isSignal": true; }; "availableResources": { "alias": "availableResources"; "required": false; "isSignal": true; }; "availableFields": { "alias": "availableFields"; "required": false; "isSignal": true; }; "availableTargets": { "alias": "availableTargets"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; "selectionChange": "selectionChange"; "crossFilter": "crossFilter"; "queryRequest": "queryRequest"; "loadStateChange": "loadStateChange"; "chartDocumentApplied": "chartDocumentApplied"; "chartDocumentSaved": "chartDocumentSaved"; }, never, never, true, never>;
 }
 
+interface BulletBand {
+    label?: string;
+    tone?: PraxisPresentationVisualizationThreshold['tone'];
+    left: number;
+    width: number;
+}
+declare class PraxisMicroVisualizationComponent {
+    visualizationInput: _angular_core.InputSignal<PraxisPresentationVisualizationConfig | null>;
+    fallbackInput: _angular_core.InputSignal<string>;
+    readonly visualization: _angular_core.Signal<PraxisPresentationVisualizationConfig | null>;
+    readonly fallbackText: _angular_core.Signal<string>;
+    readonly kind: _angular_core.Signal<"fallback" | _praxisui_core.PraxisPresentationVisualizationKind>;
+    readonly surface: _angular_core.Signal<_praxisui_core.PraxisPresentationVisualizationSurface | null>;
+    readonly size: _angular_core.Signal<_praxisui_core.PraxisPresentationVisualizationSize | null>;
+    readonly isTableCell: _angular_core.Signal<boolean>;
+    readonly ariaLabel: _angular_core.Signal<string | null>;
+    readonly comparisonItems: _angular_core.Signal<PraxisPresentationVisualizationPoint[]>;
+    readonly stackedSegments: _angular_core.Signal<PraxisPresentationVisualizationSegment[]>;
+    readonly bulletThresholds: _angular_core.Signal<PraxisPresentationVisualizationThreshold[]>;
+    readonly bulletBands: _angular_core.Signal<BulletBand[]>;
+    readonly deltaValue: _angular_core.Signal<number>;
+    readonly deltaText: _angular_core.Signal<string>;
+    readonly deltaIcon: _angular_core.Signal<"" | "-" | "+">;
+    itemPercent(value: PraxisPresentationVisualizationPoint['value']): number;
+    segmentPercent(value: PraxisPresentationVisualizationSegment['value']): number;
+    valuePercent(value: unknown): number;
+    formatNumber(value: number | undefined): string;
+    private resolveBulletMax;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisMicroVisualizationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisMicroVisualizationComponent, "praxis-micro-visualization", never, { "visualizationInput": { "alias": "visualization"; "required": false; "isSignal": true; }; "fallbackInput": { "alias": "fallbackText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class PraxisChartDrilldownPanelComponent {
     readonly title: _angular_core.InputSignal<string>;
     readonly selection: _angular_core.InputSignal<PraxisChartPointEvent | null>;
@@ -1334,5 +1366,5 @@ declare function providePraxisChartDrilldownPanelMetadata(): Provider;
 declare const PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA: ComponentDocMeta;
 declare function providePraxisChartStateProbeMetadata(): Provider;
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
 export type { AnalyticsChartConfigAdapterOptions, AnalyticsChartContractDefinition, AnalyticsChartContractLoadOptions, AnalyticsChartContractLoadResult, AnalyticsChartContractSource, ChartConfigEditorApplyEvent, ChartConfigEditorResetEvent, ChartConfigEditorSaveEvent, ChartContractIssueSeverity, ChartContractValidationIssue, ChartContractValidationResult, ChartEditorFieldOption, ChartEditorPreviewPayload, ChartEditorResourceOption, ChartEditorTargetOption, PraxisChartAggregation, PraxisChartAxisConfig, PraxisChartAxisLabelConfig, PraxisChartAxisPosition, PraxisChartAxisType, PraxisChartBackendPayload, PraxisChartBackendWidgetPayload, PraxisChartCanvasItem, PraxisChartCartesianSeries, PraxisChartConfig, PraxisChartConfigEditorData, PraxisChartCrossFilterEvent, PraxisChartDataRow, PraxisChartDataSource, PraxisChartDeclarativeEventAction, PraxisChartDistributionStatsRequest, PraxisChartEmptyStateConfig, PraxisChartEngineAdapter, PraxisChartEngineRenderPayload, PraxisChartErrorStateConfig, PraxisChartGroupByStatsRequest, PraxisChartInteractionConfig, PraxisChartLegendConfig, PraxisChartLoadState, PraxisChartLocalDataSource, PraxisChartMetricConfig, PraxisChartMotionConfig, PraxisChartMotionPreset, PraxisChartPaletteToken, PraxisChartPieSlice, PraxisChartPointEvent, PraxisChartPrimitive, PraxisChartQueryConfig, PraxisChartQueryContext, PraxisChartQueryMetricConfig, PraxisChartQueryRequestEvent, PraxisChartRemoteDataResolver, PraxisChartRemoteDataResolverResult, PraxisChartRemoteDataSource, PraxisChartSchemaMeta, PraxisChartSelectionEvent, PraxisChartSeriesConfig, PraxisChartSeriesLabelConfig, PraxisChartSizingConfig, PraxisChartSizingMode, PraxisChartStateConfig, PraxisChartStatsDistributionMode, PraxisChartStatsGranularity, PraxisChartStatsMetricOperation, PraxisChartStatsMetricRequest, PraxisChartStatsOperation, PraxisChartStatsOrderBy, PraxisChartStatsRequest, PraxisChartSurfaceConfig, PraxisChartSurfaceMode, PraxisChartThemeConfig, PraxisChartThemeVariant, PraxisChartTimeSeriesStatsRequest, PraxisChartTooltipConfig, PraxisChartTransformedData, PraxisChartType, PraxisChartWidgetEditorInputs, PraxisChartWidgetEditorValue, PraxisChartWidgetInstance, PraxisChartWidgetLike, PraxisChartWidgetResolution, PraxisChartWidgetSchema, PraxisChartsI18nOptions, PraxisChartsText, PraxisXUiChartAggregation, PraxisXUiChartAggregationConfig, PraxisXUiChartContract, PraxisXUiChartDimension, PraxisXUiChartEventAction, PraxisXUiChartEvents, PraxisXUiChartFilter, PraxisXUiChartKind, PraxisXUiChartMetric, PraxisXUiChartMotion, PraxisXUiChartMotionPreset, PraxisXUiChartPreset, PraxisXUiChartRefresh, PraxisXUiChartRuntimeHints, PraxisXUiChartSizing, PraxisXUiChartSizingMode, PraxisXUiChartSort, PraxisXUiChartSource, PraxisXUiChartSourceKind, PraxisXUiChartState, PraxisXUiChartStateDescriptor, PraxisXUiChartStatsDistributionMode, PraxisXUiChartStatsOperation, PraxisXUiChartStatsOrderBy, PraxisXUiChartStatsSourceOptions, PraxisXUiChartSurface, PraxisXUiChartSurfaceMode, PraxisXUiChartTextValue, PraxisXUiChartTheme, PraxisXUiChartToggleableFeature };