@contractspec/lib.presentation-runtime-core 3.7.6 → 3.8.0

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.
Files changed (39) hide show
  1. package/README.md +60 -54
  2. package/dist/browser/index.js +473 -1
  3. package/dist/browser/table.js +21 -0
  4. package/dist/browser/visualization.echarts.js +148 -0
  5. package/dist/browser/visualization.js +307 -0
  6. package/dist/browser/visualization.model.builders.js +290 -0
  7. package/dist/browser/visualization.model.helpers.js +199 -0
  8. package/dist/browser/visualization.model.js +306 -0
  9. package/dist/browser/visualization.types.js +0 -0
  10. package/dist/browser/visualization.utils.js +65 -0
  11. package/dist/index.d.ts +5 -0
  12. package/dist/index.js +473 -1
  13. package/dist/node/index.js +473 -1
  14. package/dist/node/table.js +21 -0
  15. package/dist/node/visualization.echarts.js +148 -0
  16. package/dist/node/visualization.js +307 -0
  17. package/dist/node/visualization.model.builders.js +290 -0
  18. package/dist/node/visualization.model.helpers.js +199 -0
  19. package/dist/node/visualization.model.js +306 -0
  20. package/dist/node/visualization.types.js +0 -0
  21. package/dist/node/visualization.utils.js +65 -0
  22. package/dist/table.d.ts +99 -0
  23. package/dist/table.js +22 -0
  24. package/dist/visualization.d.ts +3 -0
  25. package/dist/visualization.echarts.d.ts +3 -0
  26. package/dist/visualization.echarts.js +149 -0
  27. package/dist/visualization.js +308 -0
  28. package/dist/visualization.model.builders.d.ts +20 -0
  29. package/dist/visualization.model.builders.js +291 -0
  30. package/dist/visualization.model.d.ts +3 -0
  31. package/dist/visualization.model.helpers.d.ts +60 -0
  32. package/dist/visualization.model.helpers.js +200 -0
  33. package/dist/visualization.model.js +307 -0
  34. package/dist/visualization.model.test.d.ts +1 -0
  35. package/dist/visualization.types.d.ts +74 -0
  36. package/dist/visualization.types.js +1 -0
  37. package/dist/visualization.utils.d.ts +5 -0
  38. package/dist/visualization.utils.js +66 -0
  39. package/package.json +119 -3
package/dist/index.js CHANGED
@@ -1,4 +1,472 @@
1
1
  // @bun
2
+ // src/table.ts
3
+ function createEmptyTableState() {
4
+ return {
5
+ sorting: [],
6
+ pagination: {
7
+ pageIndex: 0,
8
+ pageSize: 25
9
+ },
10
+ columnVisibility: {},
11
+ columnSizing: {},
12
+ columnPinning: {
13
+ left: [],
14
+ right: []
15
+ },
16
+ expanded: {},
17
+ rowSelection: {}
18
+ };
19
+ }
20
+
21
+ // src/visualization.utils.ts
22
+ function formatVisualizationValue(value, format) {
23
+ if (value == null)
24
+ return "\u2014";
25
+ if (format === "currency" && typeof value === "number") {
26
+ return new Intl.NumberFormat(undefined, {
27
+ style: "currency",
28
+ currency: "USD"
29
+ }).format(value);
30
+ }
31
+ if (format === "percentage" && typeof value === "number") {
32
+ return `${(value * 100).toFixed(1)}%`;
33
+ }
34
+ if ((format === "date" || format === "dateTime") && value) {
35
+ const date = value instanceof Date ? value : new Date(String(value));
36
+ return Number.isNaN(date.getTime()) ? String(value) : new Intl.DateTimeFormat(undefined, {
37
+ dateStyle: "medium",
38
+ timeStyle: format === "dateTime" ? "short" : undefined
39
+ }).format(date);
40
+ }
41
+ return String(value);
42
+ }
43
+ function resolveVisualizationRows(data, resultPath) {
44
+ const value = resultPath ? getAtPath(data, resultPath) : data;
45
+ const candidate = value ?? data;
46
+ if (Array.isArray(candidate))
47
+ return candidate.map(asRow);
48
+ if (Array.isArray(getAtPath(candidate, "items"))) {
49
+ return getAtPath(candidate, "items").map(asRow);
50
+ }
51
+ if (Array.isArray(getAtPath(candidate, "rows"))) {
52
+ return getAtPath(candidate, "rows").map(asRow);
53
+ }
54
+ if (Array.isArray(getAtPath(candidate, "data"))) {
55
+ return getAtPath(candidate, "data").map(asRow);
56
+ }
57
+ return candidate && typeof candidate === "object" ? [asRow(candidate)] : [];
58
+ }
59
+ function getAtPath(source, path) {
60
+ if (!path || source == null)
61
+ return source;
62
+ return path.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean).reduce((current, segment) => {
63
+ if (current == null || typeof current !== "object")
64
+ return;
65
+ return current[segment];
66
+ }, source);
67
+ }
68
+ function toNumber(value) {
69
+ if (typeof value === "number" && Number.isFinite(value))
70
+ return value;
71
+ if (typeof value === "string" && value.trim()) {
72
+ const parsed = Number(value);
73
+ return Number.isFinite(parsed) ? parsed : null;
74
+ }
75
+ return null;
76
+ }
77
+ function asRow(value) {
78
+ return value && typeof value === "object" ? value : { value };
79
+ }
80
+
81
+ // src/visualization.model.helpers.ts
82
+ function createVisualizationMaps(spec) {
83
+ return {
84
+ dimensions: new Map((spec.visualization.dimensions ?? []).map((dimension) => [
85
+ dimension.key,
86
+ dimension
87
+ ])),
88
+ measures: new Map((spec.visualization.measures ?? []).map((measure) => [
89
+ measure.key,
90
+ measure
91
+ ]))
92
+ };
93
+ }
94
+ function createVisualizationBaseModel(spec, rows, maps) {
95
+ const config = spec.visualization;
96
+ return {
97
+ kind: config.kind,
98
+ title: config.title ?? spec.meta.title,
99
+ description: config.description ?? spec.meta.description,
100
+ summary: `${spec.meta.title ?? spec.meta.key}: ${rows.length} row${rows.length === 1 ? "" : "s"}`,
101
+ warnings: rows.length === 0 ? ["No visualization rows available."] : [],
102
+ palette: config.palette,
103
+ legend: config.legend,
104
+ tooltip: config.tooltip,
105
+ drilldown: config.drilldown,
106
+ thresholds: config.thresholds ?? [],
107
+ annotations: (config.annotations ?? []).map((annotation) => resolveAnnotation(annotation, rows[0] ?? {})),
108
+ table: createTable(config.table?.caption, config, rows)
109
+ };
110
+ }
111
+ function createMeasureSeries(measureKey, measures, rows, dimension, config) {
112
+ const measure = measures.get(measureKey);
113
+ if (!measure)
114
+ return null;
115
+ return {
116
+ key: config?.key ?? measure.key,
117
+ label: config?.label ?? measure.label,
118
+ type: config?.type,
119
+ color: config?.color ?? measure.color,
120
+ stack: config?.stack,
121
+ smooth: config?.smooth,
122
+ points: rows.map((row, index) => ({
123
+ id: `${measure.key}-${index}`,
124
+ raw: row,
125
+ x: dimension ? readDimensionValue(row, dimension) : index,
126
+ y: numericValue(row, measure),
127
+ value: numericValue(row, measure)
128
+ }))
129
+ };
130
+ }
131
+ function defaultSeries(keys) {
132
+ return keys.map((key) => ({ key, label: key, measure: key }));
133
+ }
134
+ function createAxis(dimension) {
135
+ if (!dimension)
136
+ return;
137
+ return {
138
+ key: dimension.key,
139
+ label: dimension.label,
140
+ type: dimension.type === "time" ? "time" : dimension.type === "number" ? "number" : "category",
141
+ format: dimension.format
142
+ };
143
+ }
144
+ function createValueAxis(key, measures) {
145
+ const measure = key ? measures.get(key) : undefined;
146
+ if (!measure)
147
+ return;
148
+ return {
149
+ key: measure.key,
150
+ label: measure.label,
151
+ type: "number",
152
+ format: measure.format
153
+ };
154
+ }
155
+ function readValue(row, measure) {
156
+ return measure ? getAtPath(row, measure.dataPath) : undefined;
157
+ }
158
+ function readDimensionValue(row, dimension) {
159
+ return dimension ? getAtPath(row, dimension.dataPath) : undefined;
160
+ }
161
+ function numericValue(row, measure) {
162
+ return toNumber(readValue(row, measure));
163
+ }
164
+ function numericPathValue(row, dimension) {
165
+ return toNumber(readDimensionValue(row, dimension));
166
+ }
167
+ function stringValue(row, dimension) {
168
+ const value = readDimensionValue(row, dimension);
169
+ return value == null ? undefined : String(value);
170
+ }
171
+ function createTable(caption, config, rows) {
172
+ const dimensions = config.dimensions ?? [];
173
+ const measures = config.measures ?? [];
174
+ return {
175
+ caption,
176
+ columns: [
177
+ ...dimensions.map((dimension) => ({
178
+ key: dimension.key,
179
+ label: dimension.label
180
+ })),
181
+ ...measures.map((measure) => ({
182
+ key: measure.key,
183
+ label: measure.label
184
+ }))
185
+ ],
186
+ rows: rows.map((row) => ({
187
+ ...Object.fromEntries(dimensions.map((dimension) => [
188
+ dimension.key,
189
+ readDimensionValue(row, dimension)
190
+ ])),
191
+ ...Object.fromEntries(measures.map((measure) => [measure.key, readValue(row, measure)]))
192
+ }))
193
+ };
194
+ }
195
+ function resolveAnnotation(annotation, row) {
196
+ return {
197
+ key: annotation.key,
198
+ label: annotation.label,
199
+ kind: annotation.kind,
200
+ color: annotation.color,
201
+ x: annotation.xDataPath ? getAtPath(row, annotation.xDataPath) : undefined,
202
+ y: annotation.yDataPath ? toNumber(getAtPath(row, annotation.yDataPath)) : undefined,
203
+ start: annotation.startDataPath ? getAtPath(row, annotation.startDataPath) : undefined,
204
+ end: annotation.endDataPath ? getAtPath(row, annotation.endDataPath) : undefined
205
+ };
206
+ }
207
+
208
+ // src/visualization.model.builders.ts
209
+ function buildMetricModel(base, config, rows, maps) {
210
+ const measure = maps.measures.get(config.measure);
211
+ const comparison = config.comparisonMeasure ? maps.measures.get(config.comparisonMeasure) : undefined;
212
+ const currentRow = rows.at(-1) ?? {};
213
+ const sparkline = config.sparkline ? createMeasureSeries(config.sparkline.measure ?? config.measure, maps.measures, rows, maps.dimensions.get(config.sparkline.dimension)) : null;
214
+ return {
215
+ ...base,
216
+ series: sparkline ? [sparkline] : [],
217
+ metric: {
218
+ label: measure?.label ?? config.measure,
219
+ value: readValue(currentRow, measure),
220
+ comparisonValue: comparison ? readValue(currentRow, comparison) : undefined,
221
+ format: measure?.format
222
+ }
223
+ };
224
+ }
225
+ function buildCartesianModel(base, config, rows, maps) {
226
+ const series = (config.series ?? defaultSeries(config.yMeasures ?? [])).map((seriesItem) => createMeasureSeries(seriesItem.measure, maps.measures, rows, maps.dimensions.get(config.xDimension), seriesItem)).filter((item) => Boolean(item));
227
+ return {
228
+ ...base,
229
+ series,
230
+ xAxis: createAxis(maps.dimensions.get(config.xDimension)),
231
+ yAxis: createValueAxis(config.yMeasures?.[0], maps.measures)
232
+ };
233
+ }
234
+ function buildDistributionModel(base, config, rows, maps) {
235
+ const nameDimension = maps.dimensions.get(config.nameDimension);
236
+ const valueMeasure = maps.measures.get(config.valueMeasure);
237
+ return {
238
+ ...base,
239
+ series: [
240
+ {
241
+ key: valueMeasure?.key ?? config.valueMeasure,
242
+ label: valueMeasure?.label ?? config.valueMeasure,
243
+ type: config.kind,
244
+ points: rows.map((row, index) => ({
245
+ id: `${config.kind}-${index}`,
246
+ raw: row,
247
+ name: stringValue(row, nameDimension),
248
+ value: numericValue(row, valueMeasure)
249
+ }))
250
+ }
251
+ ]
252
+ };
253
+ }
254
+ function buildHeatmapModel(base, config, rows, maps) {
255
+ const xDimension = maps.dimensions.get(config.xDimension);
256
+ const yDimension = maps.dimensions.get(config.yDimension);
257
+ const valueMeasure = maps.measures.get(config.valueMeasure);
258
+ return {
259
+ ...base,
260
+ series: [
261
+ {
262
+ key: config.valueMeasure,
263
+ label: valueMeasure?.label ?? config.valueMeasure,
264
+ type: "heatmap",
265
+ points: rows.map((row, index) => ({
266
+ id: `heatmap-${index}`,
267
+ raw: row,
268
+ name: stringValue(row, yDimension),
269
+ x: readDimensionValue(row, xDimension),
270
+ y: numericValue(row, valueMeasure),
271
+ value: numericValue(row, valueMeasure)
272
+ }))
273
+ }
274
+ ],
275
+ xAxis: createAxis(xDimension),
276
+ yAxis: createAxis(yDimension)
277
+ };
278
+ }
279
+ function buildGeoModel(base, config, rows, maps) {
280
+ return {
281
+ ...base,
282
+ series: [
283
+ {
284
+ key: "geo",
285
+ label: "Geo",
286
+ type: config.variant ?? "scatter",
287
+ points: rows.map((row, index) => ({
288
+ id: `geo-${index}`,
289
+ raw: row,
290
+ name: config.nameDimension ? stringValue(row, maps.dimensions.get(config.nameDimension)) : undefined,
291
+ value: config.valueMeasure ? numericValue(row, maps.measures.get(config.valueMeasure)) : undefined,
292
+ latitude: numericPathValue(row, maps.dimensions.get(config.latitudeDimension ?? "")),
293
+ longitude: numericPathValue(row, maps.dimensions.get(config.longitudeDimension ?? ""))
294
+ }))
295
+ }
296
+ ],
297
+ geo: {
298
+ mode: config.mode ?? "chart",
299
+ variant: config.variant ?? "scatter",
300
+ geoJson: config.geoJson
301
+ }
302
+ };
303
+ }
304
+
305
+ // src/visualization.model.ts
306
+ function createVisualizationModel(spec, data) {
307
+ const rows = resolveVisualizationRows(data, spec.source.resultPath);
308
+ const maps = createVisualizationMaps(spec);
309
+ const base = createVisualizationBaseModel(spec, rows, maps);
310
+ switch (spec.visualization.kind) {
311
+ case "metric":
312
+ return buildMetricModel(base, spec.visualization, rows, maps);
313
+ case "cartesian":
314
+ return buildCartesianModel(base, spec.visualization, rows, maps);
315
+ case "pie":
316
+ case "funnel":
317
+ return buildDistributionModel(base, spec.visualization, rows, maps);
318
+ case "heatmap":
319
+ return buildHeatmapModel(base, spec.visualization, rows, maps);
320
+ case "geo":
321
+ return buildGeoModel(base, spec.visualization, rows, maps);
322
+ }
323
+ }
324
+ // src/visualization.echarts.ts
325
+ function buildVisualizationEChartsOption(model) {
326
+ const thresholdLines = model.thresholds.map((threshold) => ({
327
+ yAxis: threshold.value,
328
+ name: threshold.label,
329
+ lineStyle: {
330
+ color: threshold.color ?? "#ef4444",
331
+ type: "dashed"
332
+ }
333
+ }));
334
+ const annotationLines = model.annotations.filter((annotation) => annotation.kind === "line" && annotation.y != null).map((annotation) => toMarkLine(annotation));
335
+ switch (model.kind) {
336
+ case "cartesian":
337
+ const cartesianSeries = model.series.map((series) => ({
338
+ name: series.label,
339
+ type: resolveCartesianSeriesType(series.type),
340
+ smooth: series.smooth,
341
+ stack: series.stack,
342
+ areaStyle: series.type === "area" ? {} : undefined,
343
+ itemStyle: series.color ? { color: series.color } : undefined,
344
+ lineStyle: series.color ? { color: series.color } : undefined,
345
+ data: series.points.filter((point) => point.y != null).map((point) => [point.x, point.y]),
346
+ markLine: thresholdLines.length || annotationLines.length ? { data: [...thresholdLines, ...annotationLines] } : undefined
347
+ }));
348
+ return {
349
+ color: model.palette,
350
+ tooltip: model.tooltip === false ? undefined : { trigger: "axis" },
351
+ legend: { show: model.legend ?? model.series.length > 1 },
352
+ xAxis: { type: model.xAxis?.type === "time" ? "time" : "category" },
353
+ yAxis: { type: "value", name: model.yAxis?.label },
354
+ series: cartesianSeries
355
+ };
356
+ case "pie":
357
+ const pieSeries = [
358
+ {
359
+ type: "pie",
360
+ radius: ["0%", "70%"],
361
+ data: model.series[0]?.points.filter((point) => point.value != null).map((point) => ({
362
+ name: point.name ?? "",
363
+ value: point.value
364
+ })) ?? []
365
+ }
366
+ ];
367
+ return {
368
+ color: model.palette,
369
+ tooltip: model.tooltip === false ? undefined : { trigger: "item" },
370
+ series: pieSeries
371
+ };
372
+ case "heatmap":
373
+ const heatmapSeries = [
374
+ {
375
+ type: "heatmap",
376
+ data: model.series[0]?.points.filter((point) => point.value != null && point.name != null).map((point) => [point.x, point.name, point.value]) ?? []
377
+ }
378
+ ];
379
+ return {
380
+ color: model.palette,
381
+ tooltip: model.tooltip === false ? undefined : { position: "top" },
382
+ xAxis: {
383
+ type: "category",
384
+ data: uniqueValues(model.series[0]?.points.map((point) => point.x))
385
+ },
386
+ yAxis: {
387
+ type: "category",
388
+ data: uniqueValues(model.series[0]?.points.map((point) => point.name))
389
+ },
390
+ visualMap: {
391
+ min: 0,
392
+ max: maxValue(model.series[0]?.points.map((point) => point.value)),
393
+ calculable: true,
394
+ orient: "horizontal",
395
+ left: "center",
396
+ bottom: 0
397
+ },
398
+ series: heatmapSeries
399
+ };
400
+ case "funnel":
401
+ const funnelSeries = [
402
+ {
403
+ type: "funnel",
404
+ data: model.series[0]?.points.filter((point) => point.value != null).map((point) => ({
405
+ name: point.name ?? "",
406
+ value: point.value
407
+ })) ?? []
408
+ }
409
+ ];
410
+ return {
411
+ color: model.palette,
412
+ tooltip: model.tooltip === false ? undefined : { trigger: "item" },
413
+ series: funnelSeries
414
+ };
415
+ case "geo":
416
+ if (!model.geo || model.geo.mode === "slippy-map" || !model.geo.geoJson) {
417
+ return {};
418
+ }
419
+ const geoSeries = [
420
+ {
421
+ type: model.geo.variant === "heatmap" ? "heatmap" : "scatter",
422
+ coordinateSystem: "geo",
423
+ data: model.series[0]?.points.filter((point) => point.longitude != null && point.latitude != null && point.value != null).map((point) => ({
424
+ name: point.name ?? "",
425
+ value: [
426
+ point.longitude,
427
+ point.latitude,
428
+ point.value
429
+ ]
430
+ })) ?? []
431
+ }
432
+ ];
433
+ return {
434
+ color: model.palette,
435
+ tooltip: model.tooltip === false ? undefined : { trigger: "item" },
436
+ geo: {
437
+ map: "contractspec-visualization-geo",
438
+ roam: true
439
+ },
440
+ series: geoSeries
441
+ };
442
+ default:
443
+ return {};
444
+ }
445
+ }
446
+ function uniqueValues(values) {
447
+ return Array.from(new Set((values ?? []).filter((value) => value != null).map(String)));
448
+ }
449
+ function maxValue(values) {
450
+ return Math.max(...(values ?? []).map((value) => value ?? 0), 1);
451
+ }
452
+ function toMarkLine(annotation) {
453
+ return {
454
+ yAxis: annotation.y,
455
+ name: annotation.label,
456
+ lineStyle: {
457
+ color: annotation.color ?? "#2563eb",
458
+ type: "solid"
459
+ }
460
+ };
461
+ }
462
+ function resolveCartesianSeriesType(type) {
463
+ if (type === "bar")
464
+ return "bar";
465
+ if (type === "scatter")
466
+ return "scatter";
467
+ return "line";
468
+ }
469
+
2
470
  // src/index.ts
3
471
  function withPresentationNextAliases(config, opts = {}) {
4
472
  const uiWeb = opts.uiKitWeb ?? "@contractspec/lib.ui-kit-web";
@@ -52,5 +520,9 @@ function withPresentationMetroAliases(config, opts = {}) {
52
520
  }
53
521
  export {
54
522
  withPresentationNextAliases,
55
- withPresentationMetroAliases
523
+ withPresentationMetroAliases,
524
+ formatVisualizationValue,
525
+ createVisualizationModel,
526
+ createEmptyTableState,
527
+ buildVisualizationEChartsOption
56
528
  };