@praxisui/charts 3.0.0-beta.0 → 3.0.0-beta.1

package/fesm2022/praxisui-charts.mjs

@@ -5,7 +5,7 @@ import * as i1$1 from '@praxisui/core';
 import { buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, DynamicGridPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { use, init } from 'echarts/core';
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
 import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1 from '@angular/common/http';
@@ -19,6 +19,9 @@ class PraxisChartDataTransformerService {
         if (config.type === 'pie' || config.type === 'donut') {
             return this.transformPie(config, rows);
         }
+        if (config.type === 'scatter') {
+            return this.transformScatter(config, rows);
+        }
         return this.transformCartesian(config, rows);
     }
     transformCartesian(config, rows) {
@@ -86,10 +89,11 @@ class PraxisChartDataTransformerService {
         return {
             id: seriesConfig.id,
             name: seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id,
-            type: config.type === 'bar' || config.type === 'stacked-bar' ? 'bar' : 'line',
-            stack: config.type === 'stacked-bar' ? seriesConfig.stackId ?? 'stack-1' : undefined,
-            smooth: seriesConfig.smooth ?? config.type === 'area',
-            area: config.type === 'area',
+            type: this.resolveCartesianSeriesType(config, seriesConfig),
+            axis: seriesConfig.axis ?? 'primary',
+            stack: config.type === 'stacked-bar' || config.type === 'stacked-area' ? seriesConfig.stackId ?? 'stack-1' : undefined,
+            smooth: seriesConfig.smooth ?? this.isAreaLikeSeries(config, seriesConfig),
+            area: this.isAreaLikeSeries(config, seriesConfig),
             color: seriesConfig.color,
             labelsVisible: seriesConfig.labels?.visible ?? false,
             points: categories.map((category) => {
@@ -100,6 +104,66 @@ class PraxisChartDataTransformerService {
             }),
         };
     }
+    resolveCartesianSeriesType(config, seriesConfig) {
+        if (config.type === 'combo') {
+            return seriesConfig.type === 'bar' ? 'bar' : 'line';
+        }
+        return config.type === 'bar' || config.type === 'stacked-bar' || config.type === 'horizontal-bar'
+            ? 'bar'
+            : 'line';
+    }
+    isAreaLikeSeries(config, seriesConfig) {
+        if (config.type === 'combo') {
+            return seriesConfig.type === 'area';
+        }
+        return config.type === 'area' || config.type === 'stacked-area';
+    }
+    transformScatter(config, rows) {
+        const xField = config.axes?.x?.field;
+        const seriesConfig = config.series[0];
+        const yField = config.axes?.y?.field ?? seriesConfig?.metric?.field;
+        if (!xField || !seriesConfig || !yField || !rows.length) {
+            return {
+                mode: 'scatter',
+                categories: [],
+                series: [],
+                slices: [],
+                hasData: false,
+            };
+        }
+        const points = rows
+            .map((row) => {
+            const xValue = this.extractScatterXValue(row[xField], config.axes?.x?.type);
+            const yValue = this.extractMetricValue(row, {
+                ...seriesConfig,
+                metric: {
+                    ...seriesConfig.metric,
+                    field: yField,
+                },
+            });
+            if (xValue === null || !Number.isFinite(yValue)) {
+                return null;
+            }
+            return [xValue, yValue];
+        })
+            .filter((point) => point !== null);
+        return {
+            mode: 'scatter',
+            categories: [],
+            series: [
+                {
+                    id: seriesConfig.id,
+                    name: seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id,
+                    type: 'scatter',
+                    color: seriesConfig.color,
+                    labelsVisible: seriesConfig.labels?.visible ?? false,
+                    points,
+                },
+            ],
+            slices: [],
+            hasData: points.length > 0,
+        };
+    }
     aggregate(rows, seriesConfig) {
         const aggregation = seriesConfig.metric?.aggregation ?? 'sum';
         if (aggregation === 'count') {
@@ -145,6 +209,25 @@ class PraxisChartDataTransformerService {
         }
         return String(value);
     }
+    extractScatterXValue(value, axisType) {
+        if (value instanceof Date) {
+            return axisType === 'time' ? value.toISOString() : value.getTime();
+        }
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (!trimmed)
+                return null;
+            const parsed = Number(trimmed);
+            if (axisType === 'value' && Number.isFinite(parsed)) {
+                return parsed;
+            }
+            return trimmed;
+        }
+        return null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDataTransformerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDataTransformerService, providedIn: 'root' });
 }
@@ -191,6 +274,47 @@ class PraxisChartOptionBuilderService {
                 series: [pieSeries],
             };
         }
+        if (transformed.mode === 'scatter') {
+            const scatterSeries = transformed.series.map((series) => ({
+                id: series.id,
+                name: series.name,
+                type: 'scatter',
+                label: { show: series.labelsVisible },
+                itemStyle: series.color ? { color: series.color } : undefined,
+                data: series.points,
+            }));
+            return {
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: {
+                    text: this.resolveText(config.title),
+                    subtext: this.resolveText(config.subtitle),
+                    left: 'left',
+                },
+                tooltip: tooltipEnabled ? { trigger: 'item' } : undefined,
+                legend: legendVisible ? { show: true, top: 0 } : { show: false },
+                grid: this.buildGrid(),
+                xAxis: {
+                    type: config.axes?.x?.type ?? 'value',
+                    name: config.axes?.x?.label,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                    },
+                },
+                yAxis: {
+                    type: config.axes?.y?.type ?? 'value',
+                    name: config.axes?.y?.label,
+                    min: config.axes?.y?.min,
+                    max: config.axes?.y?.max,
+                    axisLabel: {
+                        show: config.axes?.y?.labels?.visible ?? true,
+                    },
+                },
+                series: scatterSeries,
+            };
+        }
+        const horizontal = config.orientation === 'horizontal' || config.type === 'horizontal-bar';
         return {
             backgroundColor: config.theme?.backgroundColor,
             color: palette,
@@ -205,35 +329,42 @@ class PraxisChartOptionBuilderService {
             legend: legendVisible
                 ? { show: true, top: 0 }
                 : { show: false },
-            grid: {
-                top: 56,
-                right: 24,
-                bottom: 32,
-                left: 48,
-                containLabel: true,
-            },
-            xAxis: {
-                type: config.axes?.x?.type ?? 'category',
-                name: config.axes?.x?.label,
-                data: transformed.categories,
-                axisLabel: {
-                    show: config.axes?.x?.labels?.visible ?? true,
-                    rotate: config.axes?.x?.labels?.rotate ?? 0,
-                },
-            },
-            yAxis: {
-                type: config.axes?.y?.type ?? 'value',
-                name: config.axes?.y?.label,
-                min: config.axes?.y?.min,
-                max: config.axes?.y?.max,
-                axisLabel: {
-                    show: config.axes?.y?.labels?.visible ?? true,
+            grid: this.buildGrid(),
+            xAxis: horizontal
+                ? {
+                    type: config.axes?.y?.type ?? 'value',
+                    name: config.axes?.y?.label,
+                    min: config.axes?.y?.min,
+                    max: config.axes?.y?.max,
+                    axisLabel: {
+                        show: config.axes?.y?.labels?.visible ?? true,
+                    },
+                }
+                : {
+                    type: config.axes?.x?.type ?? 'category',
+                    name: config.axes?.x?.label,
+                    data: transformed.categories,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                    },
                 },
-            },
+            yAxis: horizontal
+                ? {
+                    type: config.axes?.x?.type ?? 'category',
+                    name: config.axes?.x?.label,
+                    data: transformed.categories,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                    },
+                }
+                : this.buildCartesianYAxis(config),
             series: transformed.series.map((series) => ({
                 id: series.id,
                 name: series.name,
                 type: series.type,
+                yAxisIndex: series.axis === 'secondary' ? 1 : 0,
                 stack: series.stack,
                 smooth: series.smooth,
                 areaStyle: series.area ? {} : undefined,
@@ -254,6 +385,45 @@ class PraxisChartOptionBuilderService {
         }
         return undefined;
     }
+    buildGrid() {
+        return {
+            top: 56,
+            right: 24,
+            bottom: 32,
+            left: 48,
+            // ECharts deprecou containLabel; esta combinacao preserva o mesmo comportamento
+            // sem depender da feature legacy de grid.
+            outerBoundsMode: 'same',
+            outerBoundsContain: 'axisLabel',
+        };
+    }
+    buildCartesianYAxis(config) {
+        const primaryAxis = {
+            type: config.axes?.y?.type ?? 'value',
+            name: config.axes?.y?.label,
+            min: config.axes?.y?.min,
+            max: config.axes?.y?.max,
+            axisLabel: {
+                show: config.axes?.y?.labels?.visible ?? true,
+            },
+        };
+        if (!config.axes?.ySecondary) {
+            return primaryAxis;
+        }
+        return [
+            primaryAxis,
+            {
+                type: config.axes.ySecondary.type ?? 'value',
+                name: config.axes.ySecondary.label,
+                min: config.axes.ySecondary.min,
+                max: config.axes.ySecondary.max,
+                position: config.axes.ySecondary.position ?? 'right',
+                axisLabel: {
+                    show: config.axes.ySecondary.labels?.visible ?? true,
+                },
+            },
+        ];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartOptionBuilderService, deps: [{ token: PraxisChartDataTransformerService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartOptionBuilderService, providedIn: 'root' });
 }
@@ -271,6 +441,7 @@ use([
     LegendComponent,
     LineChart,
     PieChart,
+    ScatterChart,
     TitleComponent,
     TooltipComponent,
     TransformComponent,
@@ -327,23 +498,22 @@ class PraxisChartStatsApiService {
             return throwError(() => new Error('PraxisChartStatsApiService requires query.statsPath and query.statsRequest for praxis.stats execution.'));
         }
         const categoryField = this.resolveCategoryField(config, statsRequest);
-        const metricField = this.resolveMetricField(config);
         const url = this.buildStatsUrl(query.statsPath);
         return this.http
             .post(url, statsRequest)
-            .pipe(map((response) => this.toChartRows(response?.data, statsRequest, categoryField, metricField)), catchError((error) => this.handleHttpError(error)));
+            .pipe(map((response) => this.toChartRows(response?.data, statsRequest, categoryField, config)), catchError((error) => this.handleHttpError(error)));
     }
-    toChartRows(response, request, categoryField, metricField) {
+    toChartRows(response, request, categoryField, config) {
         if (!response) {
             return [];
         }
+        const metricBindings = this.resolveMetricBindings(config, request, response);
         if ('points' in response) {
             return response.points.map((point) => {
                 const category = point.label ?? point.start ?? point.end ?? '';
-                const metricValue = this.resolveMetricValue(point.value, point.count);
                 return {
                     [categoryField]: category,
-                    [metricField]: metricValue,
+                    ...this.projectMetricValues(metricBindings, point.values, point.value, point.count),
                     key: point.start ?? point.label ?? point.end ?? category,
                     label: point.label ?? category,
                     value: point.value ?? null,
@@ -357,10 +527,9 @@ class PraxisChartStatsApiService {
         if ('buckets' in response) {
             return response.buckets.map((bucket) => {
                 const category = this.resolveBucketCategory(bucket);
-                const metricValue = this.resolveMetricValue(bucket.value, bucket.count);
                 return {
                     [categoryField]: category,
-                    [metricField]: metricValue,
+                    ...this.projectMetricValues(metricBindings, bucket.values, bucket.value, bucket.count),
                     key: bucket.key ?? null,
                     label: bucket.label ?? category,
                     value: bucket.value ?? null,
@@ -402,8 +571,46 @@ class PraxisChartStatsApiService {
             || request.field
             || 'category');
     }
-    resolveMetricField(config) {
-        return config.series[0]?.metric?.field || 'value';
+    resolveMetricBindings(config, request, response) {
+        const queryMetrics = config.dataSource?.kind === 'remote'
+            ? (config.dataSource.query?.metrics ?? [])
+            : [];
+        if (queryMetrics.length) {
+            return queryMetrics.map((metric, index) => ({
+                field: metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const responseMetrics = 'metrics' in response ? response.metrics : undefined;
+        if (responseMetrics?.length) {
+            return responseMetrics.map((metric, index) => ({
+                field: metric.alias || metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const requestMetrics = 'metrics' in request ? request.metrics : undefined;
+        if (requestMetrics?.length) {
+            return requestMetrics.map((metric, index) => ({
+                field: metric.alias || metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const metric = ('metric' in response && response.metric) || ('metric' in request ? request.metric : undefined);
+        return [
+            {
+                field: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
+                alias: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
+            },
+        ];
+    }
+    projectMetricValues(bindings, values, primaryValue, count) {
+        return bindings.reduce((acc, binding, index) => {
+            const rawValue = values?.[binding.alias];
+            acc[binding.field] = index === 0
+                ? this.resolveMetricValue(rawValue ?? primaryValue, count)
+                : this.resolveMetricValue(rawValue, null);
+            return acc;
+        }, {});
     }
     buildStatsUrl(statsPath) {
         const base = this.buildDefaultApiBase();
@@ -1339,6 +1546,7 @@ class PraxisChartCanonicalContractMapperService {
         return {
             id: contract.chartId,
             type: contract.kind,
+            orientation: this.resolveOrientation(contract),
             title: this.mapTextValue(contract.title),
             subtitle: this.mapTextValue(contract.subtitle),
             height: contract.height,
@@ -1365,16 +1573,13 @@ class PraxisChartCanonicalContractMapperService {
         };
     }
     assertSupportedContract(contract) {
-        if (contract.source.kind === 'derived') {
-            throw new Error('x-ui.chart source.kind="derived" is not yet implemented in @praxisui/charts.');
-        }
-        if (contract.source.kind !== 'praxis.stats') {
+        if (contract.source.kind !== 'praxis.stats' && contract.source.kind !== 'derived') {
             throw new Error(`x-ui.chart source.kind="${contract.source.kind}" is not supported in @praxisui/charts.`);
         }
-        if (!contract.source.resource?.trim()) {
+        if (contract.source.kind === 'praxis.stats' && !contract.source.resource?.trim()) {
             throw new Error('x-ui.chart source.resource is required for source.kind="praxis.stats".');
         }
-        if (!contract.source.operation) {
+        if (contract.source.kind === 'praxis.stats' && !contract.source.operation) {
             throw new Error('x-ui.chart source.operation is required for source.kind="praxis.stats".');
         }
         if (contract.theme?.palette && typeof contract.theme.palette === 'string') {
@@ -1402,9 +1607,31 @@ class PraxisChartCanonicalContractMapperService {
         if (contract.metrics.length > 1 && (contract.kind === 'pie' || contract.kind === 'donut')) {
             throw new Error('x-ui.chart pie/donut charts with multiple metrics are not yet implemented in @praxisui/charts.');
         }
-        if (contract.source.kind === 'praxis.stats' && contract.metrics.length > 1) {
+        if (contract.kind === 'combo') {
+            if (contract.metrics.length < 2) {
+                throw new Error('x-ui.chart combo charts require at least two metrics.');
+            }
+            if (contract.source.kind === 'praxis.stats'
+                && contract.source.operation !== 'group-by'
+                && contract.source.operation !== 'timeseries') {
+                throw new Error('x-ui.chart combo charts over praxis.stats currently support only group-by or timeseries operations in @praxisui/charts.');
+            }
+        }
+        if (contract.source.kind === 'praxis.stats' && contract.metrics.length > 1 && contract.kind !== 'combo') {
             throw new Error('x-ui.chart praxis.stats currently supports a single metric per chart in @praxisui/charts.');
         }
+        if (contract.kind === 'horizontal-bar' && contract.orientation && contract.orientation !== 'horizontal') {
+            throw new Error('x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.');
+        }
+        if (contract.kind === 'scatter') {
+            const firstDimension = contract.dimensions?.[0];
+            if (!firstDimension?.field) {
+                throw new Error('x-ui.chart scatter charts require dimensions[0].field for the x axis.');
+            }
+            if (!contract.metrics?.[0]?.field) {
+                throw new Error('x-ui.chart scatter charts require metrics[0].field for the y axis.');
+            }
+        }
         if (contract.events?.selectionChange || contract.events?.crossFilter) {
             throw new Error('x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.');
         }
@@ -1412,6 +1639,7 @@ class PraxisChartCanonicalContractMapperService {
     buildAxes(contract) {
         const firstDimension = contract.dimensions?.[0];
         const firstMetric = contract.metrics?.[0];
+        const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
         if (contract.kind === 'pie' || contract.kind === 'donut') {
             return {
                 x: {
@@ -1420,6 +1648,20 @@ class PraxisChartCanonicalContractMapperService {
                 },
             };
         }
+        if (contract.kind === 'scatter') {
+            return {
+                x: {
+                    field: firstDimension?.field,
+                    label: this.toLabel(firstDimension?.label),
+                    type: firstDimension?.role === 'time' ? 'time' : 'value',
+                },
+                y: {
+                    field: firstMetric?.field,
+                    label: this.toLabel(firstMetric?.label),
+                    type: 'value',
+                },
+            };
+        }
         return {
             x: {
                 field: firstDimension?.field,
@@ -1430,6 +1672,13 @@ class PraxisChartCanonicalContractMapperService {
                 label: this.toLabel(firstMetric?.label),
                 type: 'value',
             },
+            ySecondary: contract.kind === 'combo' && secondaryMetric
+                ? {
+                    label: this.toLabel(secondaryMetric.label),
+                    type: 'value',
+                    position: 'right',
+                }
+                : undefined,
         };
     }
     buildSeries(contract) {
@@ -1438,19 +1687,24 @@ class PraxisChartCanonicalContractMapperService {
         return (contract.metrics ?? []).map((metric, index) => ({
             id: `${metric.field}-${index + 1}`,
             name: this.toLabel(metric.label) ?? metric.field,
-            type: contract.kind === 'stacked-bar' ? 'bar' : contract.kind,
+            type: this.resolveSeriesType(contract.kind, metric.seriesKind, index),
+            axis: metric.axis ?? 'primary',
             categoryField: contract.kind === 'pie' || contract.kind === 'donut' ? firstDimension?.field : undefined,
             metric: {
                 field: metric.field,
                 aggregation: this.mapAggregation(metric.aggregation),
                 label: this.toLabel(metric.label),
             },
-            stackId: contract.kind === 'stacked-bar' ? 'stack-1' : undefined,
+            color: metric.color,
+            stackId: contract.kind === 'stacked-bar' || contract.kind === 'stacked-area' ? 'stack-1' : undefined,
             labels: labelsVisible ? { visible: true } : undefined,
-            smooth: contract.kind === 'line' || contract.kind === 'area' ? true : undefined,
+            smooth: this.shouldSmoothSeries(contract.kind, metric.seriesKind),
         }));
     }
     buildDataSource(contract) {
+        if (contract.source.kind === 'derived') {
+            return undefined;
+        }
         return {
             kind: 'remote',
             resourcePath: contract.source.resource,
@@ -1459,6 +1713,9 @@ class PraxisChartCanonicalContractMapperService {
         };
     }
     buildQuery(contract) {
+        if (contract.source.kind !== 'praxis.stats') {
+            return undefined;
+        }
         const filtersFromContract = this.toQueryFilterMap(contract.filters);
         const combinedFilters = {
             ...filtersFromContract,
@@ -1498,10 +1755,28 @@ class PraxisChartCanonicalContractMapperService {
             legend: { visible: this.resolveToggle(contract.legend, true) },
             tooltip: {
                 enabled: this.resolveToggle(contract.tooltip, true),
-                trigger: contract.kind === 'pie' || contract.kind === 'donut' ? 'item' : 'axis',
+                trigger: contract.kind === 'pie' || contract.kind === 'donut' || contract.kind === 'scatter' ? 'item' : 'axis',
             },
         };
     }
+    resolveOrientation(contract) {
+        if (contract.kind === 'horizontal-bar') {
+            return 'horizontal';
+        }
+        return contract.orientation;
+    }
+    resolveSeriesType(chartKind, seriesKind, index) {
+        if (chartKind === 'combo') {
+            return seriesKind ?? (index === 0 ? 'bar' : 'line');
+        }
+        return chartKind === 'stacked-bar' ? 'bar' : chartKind;
+    }
+    shouldSmoothSeries(chartKind, seriesKind) {
+        if (chartKind === 'combo') {
+            return seriesKind === 'line' || seriesKind === 'area' ? true : undefined;
+        }
+        return chartKind === 'line' || chartKind === 'area' || chartKind === 'stacked-area' ? true : undefined;
+    }
     mapTextValue(value) {
         if (!value)
             return undefined;
@@ -1559,15 +1834,18 @@ class PraxisChartCanonicalContractMapperService {
     }
     buildStatsRequest(contract, filters) {
         const field = this.resolveStatsField(contract);
-        const metric = this.buildStatsMetricRequest(contract);
+        const metrics = this.buildStatsMetricRequests(contract);
+        const metric = metrics[0];
         const limit = contract.limit ?? contract.source.options?.limit;
         const orderBy = this.mapStatsOrderByToBackend(contract.source.options?.orderBy);
+        const requestMetrics = metrics.length > 1 ? metrics : undefined;
         switch (contract.source.operation) {
             case 'group-by':
                 return {
                     filter: filters,
                     field,
                     metric,
+                    metrics: requestMetrics,
                     limit,
                     orderBy,
                 };
@@ -1577,6 +1855,7 @@ class PraxisChartCanonicalContractMapperService {
                     field,
                     granularity: this.mapStatsGranularityToBackend(contract.source.options?.granularity),
                     metric,
+                    metrics: requestMetrics,
                     fillGaps: contract.source.options?.fillGaps,
                 };
             case 'distribution':
@@ -1610,8 +1889,22 @@ class PraxisChartCanonicalContractMapperService {
         return {
             operation,
             field: operation === 'COUNT' ? undefined : metric.field,
+            alias: metric.field,
         };
     }
+    buildStatsMetricRequests(contract) {
+        if (!contract.metrics?.length) {
+            throw new Error('x-ui.chart requires at least one metric to derive the canonical praxis.stats request.');
+        }
+        return contract.metrics.map((metric) => {
+            const operation = this.mapStatsMetricOperation(metric.aggregation);
+            return {
+                operation,
+                field: operation === 'COUNT' ? undefined : metric.field,
+                alias: metric.field,
+            };
+        });
+    }
     mapStatsOrderBy(value) {
         if (!value)
             return undefined;
@@ -2007,7 +2300,7 @@ const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
     widget: {
         kind: 'x-ui.chart',
         key: 'incident-timeseries-chart',
-        layout: { col: 7, row: 1, colSpan: 5, rowSpan: 4 },
+        layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Incidentes por mes',
             subtitle: 'Time series real consumindo praxis.stats publicado',
@@ -2063,7 +2356,7 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
     widget: {
         kind: 'x-ui.chart',
         key: 'ticket-status-chart',
-        layout: { col: 7, row: 1, colSpan: 5, rowSpan: 4 },
+        layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Severidade de incidentes',
             subtitle: 'Distribution real consumindo praxis.stats publicado',
@@ -2107,6 +2400,247 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
         },
     },
 };
+const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-payroll-department-ranking-v1',
+        resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'payroll-department-horizontal-bar',
+        layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
+        shell: {
+            title: 'Massa salarial por departamento',
+            subtitle: 'Ranking horizontal em payroll analytics',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'horizontal-bar',
+            preset: 'ranking',
+            chartId: 'payroll-department-horizontal-bar',
+            title: { key: 'charts.payroll.department.title', fallback: 'Massa salarial por departamento' },
+            subtitle: { key: 'charts.payroll.department.subtitle', fallback: 'Ranking horizontal consumindo praxis.stats' },
+            orientation: 'horizontal',
+            height: 340,
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                operation: 'group-by',
+                options: {
+                    orderBy: 'value-desc',
+                    limit: 8,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'departamento',
+                    label: 'Departamento',
+                    role: 'category',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'salarioLiquido',
+                    label: 'Massa liquida',
+                    aggregation: 'sum',
+                },
+            ],
+            legend: { enabled: false },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#0f766e'],
+            },
+            events: {
+                pointClick: {
+                    action: 'emit',
+                },
+            },
+        },
+    },
+};
+const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-payroll-net-trend-stacked-v1',
+        resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'payroll-net-stacked-area',
+        layout: { col: 1, row: 9, colSpan: 12, rowSpan: 4 },
+        shell: {
+            title: 'Composicao temporal da folha',
+            subtitle: 'Stacked area inicial sobre timeseries published',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'stacked-area',
+            preset: 'composition',
+            chartId: 'payroll-net-stacked-area',
+            title: { key: 'charts.payroll.stackedArea.title', fallback: 'Composicao temporal da folha' },
+            subtitle: { key: 'charts.payroll.stackedArea.subtitle', fallback: 'Stacked area sobre payroll analytics' },
+            height: 340,
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                operation: 'timeseries',
+                options: {
+                    granularity: 'month',
+                    fillGaps: false,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'competencia',
+                    label: 'Competencia',
+                    role: 'time',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'salarioLiquido',
+                    label: 'Massa liquida',
+                    aggregation: 'sum',
+                },
+            ],
+            legend: { enabled: true },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#1263b4'],
+            },
+        },
+    },
+};
+const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-payroll-scatter-v1',
+        resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'payroll-net-vs-discount-scatter',
+        layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
+        shell: {
+            title: 'Liquido x desconto medio',
+            subtitle: 'Dispersao inicial sobre payroll analytics',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'scatter',
+            preset: 'comparison',
+            chartId: 'payroll-net-vs-discount-scatter',
+            title: { key: 'charts.payroll.scatter.title', fallback: 'Liquido x desconto medio' },
+            subtitle: { key: 'charts.payroll.scatter.subtitle', fallback: 'Scatter sobre recortes do payroll' },
+            height: 340,
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                operation: 'group-by',
+                options: {
+                    orderBy: 'key-asc',
+                    limit: 25,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'salarioLiquido',
+                    label: 'Salario liquido',
+                    role: 'value',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'pctDesconto',
+                    label: 'Percentual medio de desconto',
+                    aggregation: 'avg',
+                },
+            ],
+            legend: { enabled: false },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#c92a2a'],
+            },
+        },
+    },
+};
+const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-payroll-combo-v2',
+        resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'payroll-combo-variance',
+        layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
+        shell: {
+            title: 'Folha liquida e desconto medio',
+            subtitle: 'Combo remoto sobre praxis.stats multi-metrica',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'combo',
+            preset: 'comparison',
+            chartId: 'payroll-combo-variance',
+            title: { key: 'charts.payroll.combo.title', fallback: 'Folha liquida e desconto medio' },
+            subtitle: { key: 'charts.payroll.combo.subtitle', fallback: 'Barras para liquido e linha para desconto medio via praxis.stats' },
+            height: 340,
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                operation: 'timeseries',
+                options: {
+                    granularity: 'month',
+                    fillGaps: true,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'competencia',
+                    label: 'Competencia',
+                    role: 'time',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'salarioLiquido',
+                    label: 'Massa liquida',
+                    aggregation: 'sum',
+                    seriesKind: 'bar',
+                    axis: 'primary',
+                    color: '#1263b4',
+                },
+                {
+                    field: 'pctDesconto',
+                    label: 'Desconto medio',
+                    aggregation: 'avg',
+                    seriesKind: 'line',
+                    axis: 'secondary',
+                    color: '#c92a2a',
+                },
+            ],
+            legend: { enabled: true },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#1263b4', '#c92a2a'],
+            },
+        },
+    },
+};
 
 function buildPraxisChartMockWidgetPage(adapter) {
     return {
@@ -2114,6 +2648,10 @@ function buildPraxisChartMockWidgetPage(adapter) {
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
         ],
         layout: {
             orientation: 'columns',
@@ -2128,6 +2666,10 @@ function buildPraxisChartMockGridPage(adapter) {
             withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
             withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
             withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
         ],
         options: {
             cols: 12,
@@ -2141,6 +2683,7 @@ function buildPraxisChartInteractiveWidgetPage(adapter) {
         widgets: [
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
             {
                 key: 'chart-drilldown-panel',
                 definition: {
@@ -2170,6 +2713,9 @@ function buildPraxisChartInteractiveWidgetPage(adapter) {
                 },
             },
             withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
         ],
         connections: [
             {
@@ -2208,6 +2754,34 @@ function buildPraxisChartInteractiveGridPage(adapter) {
                     layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
                 },
             })),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR.widget,
+                    layout: { col: 1, row: 9, colSpan: 6, rowSpan: 4 },
+                },
+            })),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA.widget,
+                    layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
+                },
+            })),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_SCATTER,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_SCATTER.widget,
+                    layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
+                },
+            })),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_COMBO,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_COMBO.widget,
+                    layout: { col: 1, row: 21, colSpan: 12, rowSpan: 4 },
+                },
+            })),
         ],
         connections: [
             {
@@ -2429,6 +3003,14 @@ class PraxisChartCompositionShowcaseComponent {
                 return 'Envelope timeseries';
             case 'distribution':
                 return 'Envelope distribution';
+            case 'horizontal-bar':
+                return 'Envelope horizontal-bar';
+            case 'stacked-area':
+                return 'Envelope stacked-area';
+            case 'scatter':
+                return 'Envelope scatter';
+            case 'combo':
+                return 'Envelope combo';
             case 'group-by':
             default:
                 return 'Envelope group-by';
@@ -2441,6 +3023,14 @@ class PraxisChartCompositionShowcaseComponent {
                 return PRAXIS_CHART_BACKEND_MOCK_TIMESERIES;
             case 'distribution':
                 return PRAXIS_CHART_BACKEND_MOCK_DONUT;
+            case 'horizontal-bar':
+                return PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR;
+            case 'stacked-area':
+                return PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA;
+            case 'scatter':
+                return PRAXIS_CHART_BACKEND_MOCK_SCATTER;
+            case 'combo':
+                return PRAXIS_CHART_BACKEND_MOCK_COMBO;
             case 'group-by':
             default:
                 return PRAXIS_CHART_BACKEND_MOCK_BAR;
@@ -2485,6 +3075,18 @@ class PraxisChartCompositionShowcaseComponent {
               <button type="button" [class.active]="payloadMode() === 'distribution'" (click)="payloadMode.set('distribution')">
                 Distribution
               </button>
+              <button type="button" [class.active]="payloadMode() === 'horizontal-bar'" (click)="payloadMode.set('horizontal-bar')">
+                Horizontal bar
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'stacked-area'" (click)="payloadMode.set('stacked-area')">
+                Stacked area
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'scatter'" (click)="payloadMode.set('scatter')">
+                Scatter
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'combo'" (click)="payloadMode.set('combo')">
+                Combo
+              </button>
             </div>
           </div>
 
@@ -2518,7 +3120,7 @@ class PraxisChartCompositionShowcaseComponent {
               <p class="panel-kicker">Runtime</p>
               <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
             </div>
-            <span class="panel-chip">{{ layoutMode() }} · {{ scenarioMode() }}</span>
+            <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
           </div>
 
           @if (layoutMode() === 'widget') {
@@ -2587,6 +3189,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               <button type="button" [class.active]="payloadMode() === 'distribution'" (click)="payloadMode.set('distribution')">
                 Distribution
               </button>
+              <button type="button" [class.active]="payloadMode() === 'horizontal-bar'" (click)="payloadMode.set('horizontal-bar')">
+                Horizontal bar
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'stacked-area'" (click)="payloadMode.set('stacked-area')">
+                Stacked area
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'scatter'" (click)="payloadMode.set('scatter')">
+                Scatter
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'combo'" (click)="payloadMode.set('combo')">
+                Combo
+              </button>
             </div>
           </div>
 
@@ -2620,7 +3234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               <p class="panel-kicker">Runtime</p>
               <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
             </div>
-            <span class="panel-chip">{{ layoutMode() }} · {{ scenarioMode() }}</span>
+            <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
           </div>
 
           @if (layoutMode() === 'widget') {
@@ -2658,5 +3272,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_DONUT, 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_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsMetadata };
+export { 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_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_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsMetadata };
 //# sourceMappingURL=praxisui-charts.mjs.map