@praxisui/charts 7.0.0-beta.0 → 8.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -19
- package/fesm2022/praxisui-charts.mjs +918 -115
- package/index.d.ts +146 -17
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -57,6 +57,8 @@ import {
|
|
|
57
57
|
<praxis-chart
|
|
58
58
|
[config]="config"
|
|
59
59
|
(pointClick)="onPointClick($event)"
|
|
60
|
+
(selectionChange)="onSelectionChange($event)"
|
|
61
|
+
(crossFilter)="onCrossFilter($event)"
|
|
60
62
|
></praxis-chart>
|
|
61
63
|
`,
|
|
62
64
|
})
|
|
@@ -95,11 +97,39 @@ export class ChartDemoComponent {
|
|
|
95
97
|
name: 'Employees',
|
|
96
98
|
},
|
|
97
99
|
],
|
|
100
|
+
interactions: {
|
|
101
|
+
pointClick: true,
|
|
102
|
+
selection: true,
|
|
103
|
+
crossFilter: true,
|
|
104
|
+
eventActions: {
|
|
105
|
+
selectionChange: {
|
|
106
|
+
action: 'emit',
|
|
107
|
+
mapping: {
|
|
108
|
+
department: 'department',
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
crossFilter: {
|
|
112
|
+
action: 'filter-widget',
|
|
113
|
+
target: 'employeesTable',
|
|
114
|
+
mapping: {
|
|
115
|
+
department: 'department',
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
},
|
|
98
120
|
};
|
|
99
121
|
|
|
100
122
|
onPointClick(event: PraxisChartPointEvent) {
|
|
101
123
|
console.log('chart point', event);
|
|
102
124
|
}
|
|
125
|
+
|
|
126
|
+
onSelectionChange(event: unknown) {
|
|
127
|
+
console.log('chart selection', event);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
onCrossFilter(event: unknown) {
|
|
131
|
+
console.log('chart filters', event);
|
|
132
|
+
}
|
|
103
133
|
}
|
|
104
134
|
```
|
|
105
135
|
|
|
@@ -107,7 +137,7 @@ export class ChartDemoComponent {
|
|
|
107
137
|
|
|
108
138
|
- standalone components for charts, drilldown panel and runtime probe
|
|
109
139
|
- the initial standalone chart config editor shell for `x-ui.chart`
|
|
110
|
-
- chart contracts such as `PraxisChartConfig`, `PraxisChartDataSource` and `
|
|
140
|
+
- chart contracts such as `PraxisChartConfig`, `PraxisChartDataSource`, `PraxisChartPointEvent`, `PraxisChartSelectionEvent` and `PraxisChartCrossFilterEvent`
|
|
111
141
|
- providers and tokens for chart engine composition
|
|
112
142
|
- services for canonical mapping, backend payload adaptation and option building
|
|
113
143
|
|
|
@@ -115,7 +145,7 @@ See the public exports in `projects/praxis-charts/src/public-api.ts`.
|
|
|
115
145
|
|
|
116
146
|
## Runtime Model
|
|
117
147
|
|
|
118
|
-
O runtime
|
|
148
|
+
O runtime de `@praxisui/charts` opera em duas trilhas principais:
|
|
119
149
|
|
|
120
150
|
- `dataSource.kind = "local"` para datasets entregues diretamente ao componente
|
|
121
151
|
- `dataSource.kind = "remote"` para datasets remotos, com foco canônico em `praxis.stats`
|
|
@@ -123,10 +153,86 @@ O runtime atual de `@praxisui/charts` opera em duas trilhas principais:
|
|
|
123
153
|
No modo remoto, o componente:
|
|
124
154
|
|
|
125
155
|
- emite `queryRequest`
|
|
126
|
-
-
|
|
156
|
+
- usa `remoteDataResolver` quando o host fornece um resolvedor governado
|
|
157
|
+
- usa `PraxisChartStatsApiService` como resolvedor padrão para `praxis.stats`
|
|
127
158
|
- transforma a resposta agregada em `PraxisChartDataRow[]`
|
|
128
159
|
- renderiza o estado `loading`, `empty`, `error` ou `ready`
|
|
129
160
|
|
|
161
|
+
## Sizing Modes
|
|
162
|
+
|
|
163
|
+
Charts expose sizing as canonical contract, not as host CSS. New chart documents
|
|
164
|
+
should use `sizing` instead of the legacy top-level `height` property.
|
|
165
|
+
|
|
166
|
+
```ts
|
|
167
|
+
const chartDocument: PraxisXUiChartContract = {
|
|
168
|
+
version: '0.1.0',
|
|
169
|
+
kind: 'bar',
|
|
170
|
+
chartId: 'status-by-team',
|
|
171
|
+
sizing: {
|
|
172
|
+
mode: 'fill-container',
|
|
173
|
+
minHeight: 160,
|
|
174
|
+
},
|
|
175
|
+
source: { kind: 'derived' },
|
|
176
|
+
dimensions: [{ field: 'team' }],
|
|
177
|
+
metrics: [{ field: 'total', aggregation: 'count' }],
|
|
178
|
+
};
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Supported modes:
|
|
182
|
+
|
|
183
|
+
- `fixed`: uses `sizing.height`; use it for standalone charts with deliberate fixed height.
|
|
184
|
+
- `fill-container`: fills the usable body of a widget shell or another container with a defined height.
|
|
185
|
+
- `auto`: lets the chart content define its natural height.
|
|
186
|
+
|
|
187
|
+
Sizing values may be numbers or CSS lengths. Numeric editor input is normalized
|
|
188
|
+
to pixels before the runtime applies styles, so `height: 320` and an editor
|
|
189
|
+
value of `320` both resolve to `320px`. `minHeight` and `maxHeight` constrain
|
|
190
|
+
the chart shell, and `aspectRatio` may be a positive number or CSS ratio such
|
|
191
|
+
as `16 / 9`.
|
|
192
|
+
|
|
193
|
+
For corporate dashboards and resizable widget canvases, prefer
|
|
194
|
+
`sizing.mode = "fill-container"` plus a documented `minHeight`. The containing
|
|
195
|
+
widget shell should provide a fill body layout, otherwise the chart cannot infer
|
|
196
|
+
a stable vertical area from CSS alone. Legacy `height` is normalized as
|
|
197
|
+
`sizing: { mode: "fixed", height }` in the canonical mapper only as a migration
|
|
198
|
+
bridge for existing beta payloads.
|
|
199
|
+
|
|
200
|
+
## Surface Modes
|
|
201
|
+
|
|
202
|
+
Chart visual surface is also part of the canonical contract. Hosts should not
|
|
203
|
+
override the internal chart shell with ad hoc CSS when the intent is business
|
|
204
|
+
semantics such as embedded dashboard rendering versus standalone rendering.
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
const chartDocument: PraxisXUiChartContract = {
|
|
208
|
+
version: '0.1.0',
|
|
209
|
+
kind: 'bar',
|
|
210
|
+
chartId: 'status-by-team',
|
|
211
|
+
sizing: {
|
|
212
|
+
mode: 'fill-container',
|
|
213
|
+
minHeight: 160,
|
|
214
|
+
},
|
|
215
|
+
theme: {
|
|
216
|
+
surface: {
|
|
217
|
+
mode: 'embedded',
|
|
218
|
+
},
|
|
219
|
+
},
|
|
220
|
+
source: { kind: 'derived' },
|
|
221
|
+
dimensions: [{ field: 'team' }],
|
|
222
|
+
metrics: [{ field: 'total', aggregation: 'count' }],
|
|
223
|
+
};
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
Supported surface modes:
|
|
227
|
+
|
|
228
|
+
- `auto`: default; standalone charts use a contained neutral surface, while charts inside `WidgetShell` render embedded.
|
|
229
|
+
- `embedded`: no internal card chrome; use it for corporate dashboards where `WidgetShell` owns the card, header, border and fullscreen behavior.
|
|
230
|
+
- `contained`: the chart owns its visual surface; use it only for standalone chart placement outside a widget shell.
|
|
231
|
+
|
|
232
|
+
For enterprise dashboards, prefer `theme.surface.mode = "embedded"` or the
|
|
233
|
+
default `auto` inside `WidgetShell`. This avoids nested cards, duplicated
|
|
234
|
+
rounded corners and decorative gradients competing with operational data.
|
|
235
|
+
|
|
130
236
|
## Declarative Query Contract
|
|
131
237
|
|
|
132
238
|
For dynamic pages and widget orchestration, the primary public input for remote chart queries is `queryContext`.
|
|
@@ -180,7 +286,7 @@ Leitura pedagógica:
|
|
|
180
286
|
3. **Quando a fonte é remota, a integração canônica é `praxis.stats`**.
|
|
181
287
|
4. **O chart renderiza estados de UX e a visualização final a partir de linhas canônicas**.
|
|
182
288
|
|
|
183
|
-
### Versão Detalhada
|
|
289
|
+
### Versão Detalhada do Fluxo Canônico
|
|
184
290
|
|
|
185
291
|
```mermaid
|
|
186
292
|
sequenceDiagram
|
|
@@ -215,25 +321,28 @@ sequenceDiagram
|
|
|
215
321
|
end
|
|
216
322
|
```
|
|
217
323
|
|
|
218
|
-
###
|
|
324
|
+
### Restrições do Contrato Canônico
|
|
219
325
|
|
|
220
|
-
O mapper `x-ui.chart -> PraxisChartConfig`
|
|
326
|
+
O mapper `x-ui.chart -> PraxisChartConfig` aplica as restrições públicas abaixo:
|
|
221
327
|
|
|
222
|
-
- `source.kind`
|
|
328
|
+
- `source.kind` aceitos: `praxis.stats` e `derived`
|
|
223
329
|
- `source.kind = "praxis.stats"` exige `source.resource` e `source.operation`
|
|
224
|
-
- agregações
|
|
225
|
-
- `
|
|
330
|
+
- agregações aceitas: `count`, `distinct-count`, `sum`, `avg`, `min`, `max`
|
|
331
|
+
- `source.options.granularity` em `timeseries` aceita `day`, `week` e `month`
|
|
226
332
|
- charts `pie` e `donut` aceitam apenas uma métrica
|
|
227
333
|
- charts cartesianos `praxis.stats` podem declarar múltiplas métricas apenas em `group-by` e `timeseries`
|
|
228
|
-
- `distribution`
|
|
334
|
+
- `distribution` aceita apenas uma métrica
|
|
229
335
|
- `combo` exige pelo menos duas métricas e, no modo `praxis.stats`, suporta apenas `group-by` ou `timeseries`
|
|
230
336
|
- `axis: "secondary"` é exclusivo de `combo`
|
|
231
|
-
- `selectionChange` e `crossFilter` declarativos
|
|
232
|
-
- `
|
|
337
|
+
- `selectionChange` e `crossFilter` declarativos geram payloads canônicos derivados da seleção de ponto
|
|
338
|
+
- `events.*.mapping` remapeia campos do ponto selecionado para os nomes de filtro esperados pelo host
|
|
339
|
+
- `theme.variant` aceita `default`, `compact` e `executive`
|
|
340
|
+
- `theme.palette` aceita array explícito de cores ou os tokens registrados `brand-primary`, `brand-balanced`, `status` e `executive`
|
|
341
|
+
- campos explícitos de `theme.surface` têm precedência sobre os defaults aplicados por `theme.variant`
|
|
233
342
|
|
|
234
343
|
## Fluxo Canonico de `praxis.stats`
|
|
235
344
|
|
|
236
|
-
Quando o contrato remoto vem do mapper canônico, o caminho gerado
|
|
345
|
+
Quando o contrato remoto vem do mapper canônico, o caminho gerado segue a forma:
|
|
237
346
|
|
|
238
347
|
- `{resourcePath}/stats/group-by`
|
|
239
348
|
- `{resourcePath}/stats/timeseries`
|
|
@@ -248,9 +357,10 @@ O `PraxisChartStatsApiService`:
|
|
|
248
357
|
|
|
249
358
|
Observação importante:
|
|
250
359
|
|
|
251
|
-
-
|
|
360
|
+
- a integração remota usa envelope com `data`
|
|
252
361
|
- `queryRequest` é emitido para observabilidade do host antes da execução remota
|
|
253
|
-
-
|
|
362
|
+
- `remoteDataResolver` permite que o host assuma a execução remota e entregue `PraxisChartDataRow[]`
|
|
363
|
+
- sem `remoteDataResolver`, a execução remota padrão permanece limitada a `praxis.stats`
|
|
254
364
|
- a trilha canônica `x-ui.chart -> PraxisChartConfig -> praxis.stats` já promove múltiplas métricas para charts cartesianos suportados; para evitar semântica enganosa, `combo` segue sendo o único caso com eixo secundário e mistura heterogênea de séries
|
|
255
365
|
|
|
256
366
|
## Current Scope
|
|
@@ -264,15 +374,16 @@ This first published version is focused on the core runtime:
|
|
|
264
374
|
- remote execution focused on canonical `praxis.stats`
|
|
265
375
|
- basic settings-panel-compatible authoring shell focused on canonical `x-ui.chart`
|
|
266
376
|
- optional runtime edit affordance in `PraxisChartComponent` when `chartDocument` and a settings-panel bridge are available
|
|
377
|
+
- canonical theme variants and registered palette tokens for `x-ui.chart`
|
|
378
|
+
- declarative `selectionChange` and `crossFilter` actions emitted from selected chart points
|
|
379
|
+
- `distinct-count` aggregation mapped to canonical `praxis.stats` `DISTINCT_COUNT`
|
|
380
|
+
- host-owned remote data resolution through `remoteDataResolver`
|
|
267
381
|
|
|
268
382
|
## Current Non-Goals
|
|
269
383
|
|
|
270
|
-
The
|
|
384
|
+
The public chart contract keeps these concerns outside the stable surface:
|
|
271
385
|
|
|
272
386
|
- direct host control over raw ECharts options as the primary contract
|
|
273
|
-
- declarative cross-filter orchestration
|
|
274
|
-
- declarative selectionChange runtime actions
|
|
275
|
-
- palette token indirection or theme variants from `x-ui.chart`
|
|
276
387
|
|
|
277
388
|
## Notes for Hosts
|
|
278
389
|
|