@opendata-ai/openchart-engine 8.0.0-rc.9 → 8.0.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.
- package/dist/index.d.ts +149 -12
- package/dist/index.js +804 -155
- package/dist/index.js.map +1 -1
- package/package.json +3 -4
- package/src/__test-fixtures__/specs.ts +0 -182
- package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap +0 -2401
- package/src/__tests__/annotation-behavior.test.ts +0 -852
- package/src/__tests__/axes.test.ts +0 -1579
- package/src/__tests__/compile-animation.test.ts +0 -161
- package/src/__tests__/compile-chart.test.ts +0 -1303
- package/src/__tests__/compile-footnotes.test.ts +0 -277
- package/src/__tests__/compile-layer.test.ts +0 -969
- package/src/__tests__/compile-snapshot.test.ts +0 -156
- package/src/__tests__/compound-labels.test.ts +0 -147
- package/src/__tests__/dimensions.test.ts +0 -918
- package/src/__tests__/encoding-sugar.test.ts +0 -390
- package/src/__tests__/facet.test.ts +0 -215
- package/src/__tests__/helpers/invariants.ts +0 -299
- package/src/__tests__/known-bugs.test.ts +0 -566
- package/src/__tests__/layout-fuzz.test.ts +0 -358
- package/src/__tests__/layout-invariants.test.ts +0 -535
- package/src/__tests__/legend.test.ts +0 -721
- package/src/__tests__/mark-keys.test.ts +0 -294
- package/src/__tests__/ranking-recipes.test.ts +0 -260
- package/src/__tests__/rotation.test.ts +0 -83
- package/src/__tests__/scales.test.ts +0 -323
- package/src/__tests__/series-search.test.ts +0 -92
- package/src/__tests__/spec-sugar.test.ts +0 -801
- package/src/__tests__/you-draw-it.test.ts +0 -160
- package/src/annotations/__tests__/compute.test.ts +0 -1672
- package/src/annotations/__tests__/geometry.test.ts +0 -66
- package/src/annotations/__tests__/placement-fuzz.test.ts +0 -256
- package/src/annotations/__tests__/placement-invariants.test.ts +0 -345
- package/src/annotations/__tests__/placement.test.ts +0 -316
- package/src/annotations/__tests__/resolve-text.test.ts +0 -788
- package/src/annotations/__tests__/rich-text.test.ts +0 -91
- package/src/annotations/__tests__/thinning.test.ts +0 -285
- package/src/annotations/collisions.ts +0 -326
- package/src/annotations/compute.ts +0 -333
- package/src/annotations/constants.ts +0 -162
- package/src/annotations/geometry.ts +0 -376
- package/src/annotations/move.ts +0 -135
- package/src/annotations/placement.ts +0 -636
- package/src/annotations/position.ts +0 -131
- package/src/annotations/resolve-range.ts +0 -117
- package/src/annotations/resolve-refline.ts +0 -157
- package/src/annotations/resolve-text.ts +0 -545
- package/src/annotations/rich-text.ts +0 -65
- package/src/annotations/thinning.ts +0 -190
- package/src/barlist/__tests__/compile-barlist.test.ts +0 -200
- package/src/barlist/compile-barlist.ts +0 -391
- package/src/barlist/types.ts +0 -28
- package/src/charts/__tests__/post-process.test.ts +0 -237
- package/src/charts/__tests__/registry.test.ts +0 -116
- package/src/charts/__tests__/utils.test.ts +0 -195
- package/src/charts/_shared/__tests__/density-filter.test.ts +0 -32
- package/src/charts/_shared/density-filter.ts +0 -26
- package/src/charts/_shared/format-label-value.ts +0 -16
- package/src/charts/bar/__tests__/compute.test.ts +0 -934
- package/src/charts/bar/__tests__/gradient-orient.test.ts +0 -127
- package/src/charts/bar/__tests__/labels.test.ts +0 -292
- package/src/charts/bar/compute.ts +0 -539
- package/src/charts/bar/index.ts +0 -60
- package/src/charts/bar/labels.ts +0 -311
- package/src/charts/beeswarm/__tests__/compute.test.ts +0 -280
- package/src/charts/beeswarm/__tests__/dodge.test.ts +0 -148
- package/src/charts/beeswarm/compute.ts +0 -203
- package/src/charts/beeswarm/dodge.ts +0 -155
- package/src/charts/beeswarm/index.ts +0 -32
- package/src/charts/builtin.ts +0 -75
- package/src/charts/calendar/__tests__/compute.test.ts +0 -417
- package/src/charts/calendar/compute.ts +0 -319
- package/src/charts/calendar/index.ts +0 -32
- package/src/charts/column/__tests__/compute.test.ts +0 -540
- package/src/charts/column/__tests__/labels.test.ts +0 -179
- package/src/charts/column/compute.ts +0 -493
- package/src/charts/column/index.ts +0 -53
- package/src/charts/column/labels.ts +0 -229
- package/src/charts/dot/__tests__/compute.test.ts +0 -380
- package/src/charts/dot/__tests__/labels.test.ts +0 -98
- package/src/charts/dot/compute.ts +0 -285
- package/src/charts/dot/index.ts +0 -62
- package/src/charts/dot/labels.ts +0 -121
- package/src/charts/line/__tests__/compute.test.ts +0 -1194
- package/src/charts/line/__tests__/curves.test.ts +0 -51
- package/src/charts/line/__tests__/labels.test.ts +0 -94
- package/src/charts/line/__tests__/mark-options.test.ts +0 -175
- package/src/charts/line/area.ts +0 -484
- package/src/charts/line/compute.ts +0 -356
- package/src/charts/line/curves.ts +0 -85
- package/src/charts/line/index.ts +0 -176
- package/src/charts/line/labels.ts +0 -177
- package/src/charts/parliament/__tests__/compute.test.ts +0 -411
- package/src/charts/parliament/compute.ts +0 -313
- package/src/charts/parliament/index.ts +0 -32
- package/src/charts/pie/__tests__/compute.test.ts +0 -384
- package/src/charts/pie/__tests__/labels.test.ts +0 -132
- package/src/charts/pie/compute.ts +0 -324
- package/src/charts/pie/index.ts +0 -49
- package/src/charts/pie/labels.ts +0 -143
- package/src/charts/post-process.ts +0 -229
- package/src/charts/range/__tests__/compute.test.ts +0 -486
- package/src/charts/range/compute.ts +0 -273
- package/src/charts/range/index.ts +0 -82
- package/src/charts/range/labels.ts +0 -169
- package/src/charts/rect/__tests__/compute.test.ts +0 -120
- package/src/charts/rect/index.ts +0 -127
- package/src/charts/registry.ts +0 -72
- package/src/charts/rule/index.ts +0 -139
- package/src/charts/scatter/__tests__/compute.test.ts +0 -488
- package/src/charts/scatter/__tests__/trendline.test.ts +0 -191
- package/src/charts/scatter/compute.ts +0 -192
- package/src/charts/scatter/index.ts +0 -46
- package/src/charts/scatter/trendline.ts +0 -100
- package/src/charts/text/__tests__/compute.test.ts +0 -307
- package/src/charts/text/index.ts +0 -141
- package/src/charts/tick/__tests__/compute.test.ts +0 -75
- package/src/charts/tick/index.ts +0 -99
- package/src/charts/utils.ts +0 -170
- package/src/charts/waffle/__tests__/compute.test.ts +0 -305
- package/src/charts/waffle/compute.ts +0 -197
- package/src/charts/waffle/index.ts +0 -31
- package/src/compile/__tests__/color-scale-range.test.ts +0 -158
- package/src/compile/__tests__/color-scale-reverse.test.ts +0 -89
- package/src/compile/__tests__/data-clip.test.ts +0 -127
- package/src/compile/__tests__/fill-patterns.test.ts +0 -154
- package/src/compile/__tests__/size-scale.test.ts +0 -108
- package/src/compile/__tests__/watermark-obstacle.test.ts +0 -93
- package/src/compile/color-scale-range.ts +0 -101
- package/src/compile/data-clip.ts +0 -48
- package/src/compile/fill-patterns.ts +0 -74
- package/src/compile/layer.ts +0 -630
- package/src/compile/size-scale.ts +0 -141
- package/src/compile/spec-sugar.ts +0 -758
- package/src/compile/watermark-obstacle.ts +0 -54
- package/src/compile/you-draw-it.ts +0 -123
- package/src/compile.ts +0 -1503
- package/src/compiler/__tests__/a11y-warnings.test.ts +0 -148
- package/src/compiler/__tests__/animation.test.ts +0 -177
- package/src/compiler/__tests__/compile.test.ts +0 -87
- package/src/compiler/__tests__/fixtures/vl-parity/axis-null.json +0 -19
- package/src/compiler/__tests__/fixtures/vl-parity/color-value.json +0 -20
- package/src/compiler/__tests__/fixtures/vl-parity/count-aggregate.json +0 -22
- package/src/compiler/__tests__/fixtures/vl-parity/data-values.json +0 -19
- package/src/compiler/__tests__/fixtures/vl-parity/layer-axis-null.json +0 -14
- package/src/compiler/__tests__/fixtures/vl-parity/layer-count.json +0 -34
- package/src/compiler/__tests__/fixtures/vl-parity/layer-data-values.json +0 -22
- package/src/compiler/__tests__/fixtures/vl-parity/layer-legend-null.json +0 -41
- package/src/compiler/__tests__/fixtures/vl-parity/layer-scheme.json +0 -38
- package/src/compiler/__tests__/fixtures/vl-parity/layer-sort.json +0 -28
- package/src/compiler/__tests__/fixtures/vl-parity/layer-theta.json +0 -28
- package/src/compiler/__tests__/fixtures/vl-parity/layer-title.json +0 -30
- package/src/compiler/__tests__/fixtures/vl-parity/layer-value-def.json +0 -29
- package/src/compiler/__tests__/fixtures/vl-parity/legend-null.json +0 -32
- package/src/compiler/__tests__/fixtures/vl-parity/scheme.json +0 -25
- package/src/compiler/__tests__/fixtures/vl-parity/sort-by-value.json +0 -19
- package/src/compiler/__tests__/fixtures/vl-parity/theta-arc.json +0 -19
- package/src/compiler/__tests__/fixtures/vl-parity/title-subtitle.json +0 -21
- package/src/compiler/__tests__/fixtures/vl-parity/width-height.json +0 -23
- package/src/compiler/__tests__/keys.test.ts +0 -83
- package/src/compiler/__tests__/normalize-highlight.test.ts +0 -103
- package/src/compiler/__tests__/normalize.test.ts +0 -399
- package/src/compiler/__tests__/sparkline-defaults.test.ts +0 -153
- package/src/compiler/__tests__/validate-did-you-mean.test.ts +0 -170
- package/src/compiler/__tests__/validate-highlight.test.ts +0 -112
- package/src/compiler/__tests__/validate-near-miss.test.ts +0 -251
- package/src/compiler/__tests__/validate.test.ts +0 -629
- package/src/compiler/__tests__/vl-parity.test.ts +0 -68
- package/src/compiler/a11y-warnings.ts +0 -110
- package/src/compiler/animation.ts +0 -142
- package/src/compiler/index.ts +0 -47
- package/src/compiler/keys.ts +0 -55
- package/src/compiler/normalize.ts +0 -734
- package/src/compiler/sparkline-defaults.ts +0 -138
- package/src/compiler/types.ts +0 -241
- package/src/compiler/validate.ts +0 -2041
- package/src/endpoint-labels/__tests__/compute.test.ts +0 -587
- package/src/endpoint-labels/compute.ts +0 -621
- package/src/endpoint-labels/constants.ts +0 -54
- package/src/endpoint-labels/format.ts +0 -60
- package/src/endpoint-labels/predict.ts +0 -139
- package/src/format/__tests__/field-format.test.ts +0 -164
- package/src/format/field-format.ts +0 -27
- package/src/geo/__tests__/compile-map.test.ts +0 -1128
- package/src/geo/compile-map.ts +0 -1376
- package/src/geo/join.ts +0 -115
- package/src/geo/projections.ts +0 -65
- package/src/geo/types.ts +0 -26
- package/src/graphs/__tests__/community.test.ts +0 -228
- package/src/graphs/__tests__/compile-graph.test.ts +0 -396
- package/src/graphs/__tests__/encoding.test.ts +0 -415
- package/src/graphs/community.ts +0 -92
- package/src/graphs/compile-graph.ts +0 -329
- package/src/graphs/encoding.ts +0 -356
- package/src/graphs/types.ts +0 -106
- package/src/index.ts +0 -177
- package/src/layout/__tests__/metrics.test.ts +0 -97
- package/src/layout/__tests__/scales-highlight.test.ts +0 -192
- package/src/layout/axes/rotation.ts +0 -152
- package/src/layout/axes/thinning.ts +0 -98
- package/src/layout/axes/ticks.ts +0 -409
- package/src/layout/axes.ts +0 -757
- package/src/layout/dimensions.ts +0 -912
- package/src/layout/facet.ts +0 -91
- package/src/layout/gridlines.ts +0 -84
- package/src/layout/metrics.ts +0 -132
- package/src/layout/plan.ts +0 -631
- package/src/layout/scales.ts +0 -1053
- package/src/layout/shared.ts +0 -44
- package/src/legend/__tests__/continuous.test.ts +0 -318
- package/src/legend/__tests__/redundancy.test.ts +0 -108
- package/src/legend/__tests__/size.test.ts +0 -348
- package/src/legend/__tests__/suppression.test.ts +0 -382
- package/src/legend/compute.ts +0 -748
- package/src/legend/continuous.ts +0 -327
- package/src/legend/size.ts +0 -407
- package/src/legend/suppression.ts +0 -226
- package/src/legend/wrap.ts +0 -117
- package/src/sankey/__tests__/compile-sankey.test.ts +0 -458
- package/src/sankey/__tests__/layout.test.ts +0 -165
- package/src/sankey/__tests__/node-label-wrap.test.ts +0 -114
- package/src/sankey/__tests__/node-sort.test.ts +0 -45
- package/src/sankey/compile-sankey.ts +0 -706
- package/src/sankey/layout.ts +0 -184
- package/src/sankey/types.ts +0 -41
- package/src/tables/__tests__/bar-column.test.ts +0 -147
- package/src/tables/__tests__/category-colors.test.ts +0 -230
- package/src/tables/__tests__/compile-table.test.ts +0 -236
- package/src/tables/__tests__/format-cells.test.ts +0 -143
- package/src/tables/__tests__/heatmap.test.ts +0 -148
- package/src/tables/__tests__/pagination.test.ts +0 -78
- package/src/tables/__tests__/search.test.ts +0 -94
- package/src/tables/__tests__/sort.test.ts +0 -107
- package/src/tables/__tests__/sparkline.test.ts +0 -122
- package/src/tables/bar-column.ts +0 -94
- package/src/tables/category-colors.ts +0 -78
- package/src/tables/compile-table.ts +0 -427
- package/src/tables/format-cells.ts +0 -115
- package/src/tables/heatmap.ts +0 -141
- package/src/tables/pagination.ts +0 -46
- package/src/tables/search.ts +0 -66
- package/src/tables/sort.ts +0 -69
- package/src/tables/sparkline.ts +0 -113
- package/src/tables/utils.ts +0 -16
- package/src/tilemap/__tests__/compile-tilemap.test.ts +0 -576
- package/src/tilemap/compile-tilemap.ts +0 -755
- package/src/tilemap/layout.ts +0 -172
- package/src/tilemap/types.ts +0 -33
- package/src/tooltips/__tests__/compute.test.ts +0 -582
- package/src/tooltips/compute.ts +0 -700
- package/src/transforms/__tests__/aggregate.test.ts +0 -159
- package/src/transforms/__tests__/bin.test.ts +0 -88
- package/src/transforms/__tests__/calculate.test.ts +0 -146
- package/src/transforms/__tests__/conditional.test.ts +0 -127
- package/src/transforms/__tests__/filter-relative.test.ts +0 -202
- package/src/transforms/__tests__/filter.test.ts +0 -59
- package/src/transforms/__tests__/fold.test.ts +0 -79
- package/src/transforms/__tests__/index.test.ts +0 -93
- package/src/transforms/__tests__/predicates.test.ts +0 -193
- package/src/transforms/__tests__/timeunit.test.ts +0 -129
- package/src/transforms/__tests__/window.test.ts +0 -286
- package/src/transforms/aggregate.ts +0 -131
- package/src/transforms/bin.ts +0 -87
- package/src/transforms/calculate.ts +0 -60
- package/src/transforms/conditional.ts +0 -46
- package/src/transforms/filter.ts +0 -122
- package/src/transforms/fold.ts +0 -49
- package/src/transforms/index.ts +0 -60
- package/src/transforms/predicates.ts +0 -123
- package/src/transforms/timeunit.ts +0 -88
- package/src/transforms/window.ts +0 -185
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { DIVERGING_PALETTES } from '@opendata-ai/openchart-core';
|
|
2
|
-
import { describe, expect, it } from 'vitest';
|
|
3
|
-
import { compileChart } from '../../compile';
|
|
4
|
-
|
|
5
|
-
const OPTIONS = { width: 800, height: 400 };
|
|
6
|
-
|
|
7
|
-
/** d3 hands interpolated colors back as `rgb(r, g, b)`; compare on a single form. */
|
|
8
|
-
function hex(value: string): string {
|
|
9
|
-
const rgb = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(value.trim());
|
|
10
|
-
if (!rgb) return value.trim().toLowerCase();
|
|
11
|
-
const channel = (n: string) => Number(n).toString(16).padStart(2, '0');
|
|
12
|
-
return `#${channel(rgb[1])}${channel(rgb[2])}${channel(rgb[3])}`;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const ROWS = [
|
|
16
|
-
{ day: 'a', value: -2 },
|
|
17
|
-
{ day: 'b', value: 0 },
|
|
18
|
-
{ day: 'c', value: 2 },
|
|
19
|
-
];
|
|
20
|
-
|
|
21
|
-
/** The compiled fill of the mark carrying `value`, as the reader would see it. */
|
|
22
|
-
function colorAt(layout: ReturnType<typeof compileChart>, value: number): string {
|
|
23
|
-
const mark = layout.marks.find(
|
|
24
|
-
(m) => (m as { data?: Record<string, unknown> }).data?.value === value,
|
|
25
|
-
);
|
|
26
|
-
const fill = (mark as { fill?: string } | undefined)?.fill;
|
|
27
|
-
return hex(String(fill));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const RED_BLUE = DIVERGING_PALETTES.redBlue;
|
|
31
|
-
const RED = hex(RED_BLUE[0]);
|
|
32
|
-
const BLUE = hex(RED_BLUE[RED_BLUE.length - 1]);
|
|
33
|
-
|
|
34
|
-
// A bar, not a rect: this suite is about the color ramp, and it needs a mark
|
|
35
|
-
// with a quantitative axis to carry the value. `rect` used to alias the column
|
|
36
|
-
// renderer, so it stood in for one here; now that `rect` is a real heatmap mark
|
|
37
|
-
// (two categorical axes, cells sized by bandwidth) it emits nothing for a
|
|
38
|
-
// quantitative y, and there is no fill to read back.
|
|
39
|
-
function spec(reverse?: boolean) {
|
|
40
|
-
return {
|
|
41
|
-
mark: 'bar' as const,
|
|
42
|
-
data: ROWS,
|
|
43
|
-
encoding: {
|
|
44
|
-
x: { field: 'day', type: 'nominal' as const },
|
|
45
|
-
y: { field: 'value', type: 'quantitative' as const },
|
|
46
|
-
color: {
|
|
47
|
-
field: 'value',
|
|
48
|
-
type: 'quantitative' as const,
|
|
49
|
-
scale: reverse ? { scheme: 'redBlue', reverse: true } : { scheme: 'redBlue' },
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
describe('scale.reverse on a color channel', () => {
|
|
56
|
-
it('ramps low -> red, high -> blue by default (ColorBrewer RdBu order)', () => {
|
|
57
|
-
const layout = compileChart(spec(), OPTIONS);
|
|
58
|
-
expect(colorAt(layout, -2)).toBe(RED);
|
|
59
|
-
expect(colorAt(layout, 2)).toBe(BLUE);
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
it('flips the ramp so low -> blue, high -> red', () => {
|
|
63
|
-
const layout = compileChart(spec(true), OPTIONS);
|
|
64
|
-
expect(colorAt(layout, -2)).toBe(BLUE);
|
|
65
|
-
expect(colorAt(layout, 2)).toBe(RED);
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
it('keeps the diverging midpoint label when the ramp is reversed', () => {
|
|
69
|
-
// A reversed diverging ramp is still diverging: flipping the stops must not
|
|
70
|
-
// cost it the center tick (min / mid / max, not just min / max).
|
|
71
|
-
const forward = compileChart(spec(), OPTIONS).legend;
|
|
72
|
-
const reversed = compileChart(spec(true), OPTIONS).legend;
|
|
73
|
-
const tickCount = (l: typeof forward) =>
|
|
74
|
-
(l as { ticks?: unknown[] } | undefined)?.ticks?.length ?? 0;
|
|
75
|
-
expect(tickCount(forward)).toBe(3);
|
|
76
|
-
expect(tickCount(reversed)).toBe(tickCount(forward));
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
it('keeps the legend ramp in step with the marks', () => {
|
|
80
|
-
const legend = compileChart(spec(true), OPTIONS).legend;
|
|
81
|
-
// The legend resolves its ramp from the same scale.range the marks use, so a
|
|
82
|
-
// reversed scale must not leave the legend pointing the original direction.
|
|
83
|
-
expect(legend?.type).toBe('continuous');
|
|
84
|
-
const stops = (legend as { colorStops: Array<{ color: string }> }).colorStops;
|
|
85
|
-
expect(stops.length).toBeGreaterThan(1);
|
|
86
|
-
expect(hex(stops[0].color)).toBe(BLUE);
|
|
87
|
-
expect(hex(stops[stops.length - 1].color)).toBe(RED);
|
|
88
|
-
});
|
|
89
|
-
});
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import type { Encoding } from '@opendata-ai/openchart-core';
|
|
2
|
-
import { describe, expect, it } from 'vitest';
|
|
3
|
-
import { filterClippedDomains } from '../data-clip';
|
|
4
|
-
|
|
5
|
-
describe('filterClippedDomains', () => {
|
|
6
|
-
const data = [
|
|
7
|
-
{ x: -5, y: 10 },
|
|
8
|
-
{ x: 10, y: 20 },
|
|
9
|
-
{ x: 25, y: 80 },
|
|
10
|
-
{ x: 50, y: 110 },
|
|
11
|
-
{ x: 80, y: 200 },
|
|
12
|
-
];
|
|
13
|
-
|
|
14
|
-
it('returns data unchanged when no channel declares scale.clip', () => {
|
|
15
|
-
const encoding: Encoding = {
|
|
16
|
-
x: { field: 'x', type: 'quantitative' },
|
|
17
|
-
y: { field: 'y', type: 'quantitative' },
|
|
18
|
-
};
|
|
19
|
-
const result = filterClippedDomains(data, encoding);
|
|
20
|
-
expect(result).toBe(data);
|
|
21
|
-
expect(result).toHaveLength(5);
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
it('filters rows outside the x-axis clipped domain', () => {
|
|
25
|
-
const encoding: Encoding = {
|
|
26
|
-
x: {
|
|
27
|
-
field: 'x',
|
|
28
|
-
type: 'quantitative',
|
|
29
|
-
scale: { domain: [0, 30], clip: true },
|
|
30
|
-
},
|
|
31
|
-
y: { field: 'y', type: 'quantitative' },
|
|
32
|
-
};
|
|
33
|
-
const result = filterClippedDomains(data, encoding);
|
|
34
|
-
expect(result).toEqual([
|
|
35
|
-
{ x: 10, y: 20 },
|
|
36
|
-
{ x: 25, y: 80 },
|
|
37
|
-
]);
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
it('filters rows outside both x- and y-axis clipped domains', () => {
|
|
41
|
-
const encoding: Encoding = {
|
|
42
|
-
x: {
|
|
43
|
-
field: 'x',
|
|
44
|
-
type: 'quantitative',
|
|
45
|
-
scale: { domain: [0, 60], clip: true },
|
|
46
|
-
},
|
|
47
|
-
y: {
|
|
48
|
-
field: 'y',
|
|
49
|
-
type: 'quantitative',
|
|
50
|
-
scale: { domain: [0, 100], clip: true },
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
const result = filterClippedDomains(data, encoding);
|
|
54
|
-
expect(result).toEqual([
|
|
55
|
-
{ x: 10, y: 20 },
|
|
56
|
-
{ x: 25, y: 80 },
|
|
57
|
-
]);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
describe('categorical domains', () => {
|
|
61
|
-
const years = [
|
|
62
|
-
{ year: '2019', pct: 32.4 },
|
|
63
|
-
{ year: '2020', pct: 31.9 },
|
|
64
|
-
{ year: '2021', pct: 33.9 },
|
|
65
|
-
{ year: '2022', pct: 33.6 },
|
|
66
|
-
];
|
|
67
|
-
|
|
68
|
-
it('keeps only rows whose value is in the domain set', () => {
|
|
69
|
-
const encoding: Encoding = {
|
|
70
|
-
x: {
|
|
71
|
-
field: 'year',
|
|
72
|
-
type: 'ordinal',
|
|
73
|
-
scale: { domain: ['2021', '2022'], clip: true },
|
|
74
|
-
},
|
|
75
|
-
y: { field: 'pct', type: 'quantitative' },
|
|
76
|
-
};
|
|
77
|
-
expect(filterClippedDomains(years, encoding)).toEqual([
|
|
78
|
-
{ year: '2021', pct: 33.9 },
|
|
79
|
-
{ year: '2022', pct: 33.6 },
|
|
80
|
-
]);
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
it('matches numeric row values against a string domain', () => {
|
|
84
|
-
const numericYears = [
|
|
85
|
-
{ year: 2020, pct: 31.9 },
|
|
86
|
-
{ year: 2021, pct: 33.9 },
|
|
87
|
-
];
|
|
88
|
-
const encoding: Encoding = {
|
|
89
|
-
x: {
|
|
90
|
-
field: 'year',
|
|
91
|
-
type: 'ordinal',
|
|
92
|
-
scale: { domain: ['2021'], clip: true },
|
|
93
|
-
},
|
|
94
|
-
y: { field: 'pct', type: 'quantitative' },
|
|
95
|
-
};
|
|
96
|
-
expect(filterClippedDomains(numericYears, encoding)).toEqual([{ year: 2021, pct: 33.9 }]);
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
it('does not treat a two-category domain as a numeric range', () => {
|
|
100
|
-
const encoding: Encoding = {
|
|
101
|
-
x: {
|
|
102
|
-
field: 'year',
|
|
103
|
-
type: 'ordinal',
|
|
104
|
-
// A range reading would keep 2020 and 2021 too; membership must not.
|
|
105
|
-
scale: { domain: ['2019', '2022'], clip: true },
|
|
106
|
-
},
|
|
107
|
-
y: { field: 'pct', type: 'quantitative' },
|
|
108
|
-
};
|
|
109
|
-
expect(filterClippedDomains(years, encoding)).toEqual([
|
|
110
|
-
{ year: '2019', pct: 32.4 },
|
|
111
|
-
{ year: '2022', pct: 33.6 },
|
|
112
|
-
]);
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
it('passes data through when the channel has no clip', () => {
|
|
116
|
-
const encoding: Encoding = {
|
|
117
|
-
x: {
|
|
118
|
-
field: 'year',
|
|
119
|
-
type: 'ordinal',
|
|
120
|
-
scale: { domain: ['2021', '2022'] },
|
|
121
|
-
},
|
|
122
|
-
y: { field: 'pct', type: 'quantitative' },
|
|
123
|
-
};
|
|
124
|
-
expect(filterClippedDomains(years, encoding)).toBe(years);
|
|
125
|
-
});
|
|
126
|
-
});
|
|
127
|
-
});
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Fill pattern assignment (mark.fillPattern: 'auto').
|
|
3
|
-
*
|
|
4
|
-
* Locks the deterministic pattern-to-series assignment, the opt-in gate,
|
|
5
|
-
* and the minimum-area rule for thin marks.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import type { ChartSpec, RectMark } from '@opendata-ai/openchart-core';
|
|
9
|
-
import { describe, expect, it } from 'vitest';
|
|
10
|
-
import { compileChart } from '../../compile';
|
|
11
|
-
|
|
12
|
-
// ---------------------------------------------------------------------------
|
|
13
|
-
// Fixtures
|
|
14
|
-
// ---------------------------------------------------------------------------
|
|
15
|
-
|
|
16
|
-
const FOUR_SERIES_DATA = [
|
|
17
|
-
{ quarter: 'Q1', source: 'Solar', twh: 30 },
|
|
18
|
-
{ quarter: 'Q1', source: 'Wind', twh: 45 },
|
|
19
|
-
{ quarter: 'Q1', source: 'Hydro', twh: 25 },
|
|
20
|
-
{ quarter: 'Q1', source: 'Gas', twh: 60 },
|
|
21
|
-
{ quarter: 'Q2', source: 'Solar', twh: 35 },
|
|
22
|
-
{ quarter: 'Q2', source: 'Wind', twh: 50 },
|
|
23
|
-
{ quarter: 'Q2', source: 'Hydro', twh: 22 },
|
|
24
|
-
{ quarter: 'Q2', source: 'Gas', twh: 55 },
|
|
25
|
-
];
|
|
26
|
-
|
|
27
|
-
function stackedSpec(fillPattern?: 'auto' | 'none'): ChartSpec {
|
|
28
|
-
return {
|
|
29
|
-
mark: { type: 'bar', ...(fillPattern ? { fillPattern } : {}) },
|
|
30
|
-
data: FOUR_SERIES_DATA,
|
|
31
|
-
encoding: {
|
|
32
|
-
x: { field: 'quarter', type: 'nominal' },
|
|
33
|
-
y: { field: 'twh', type: 'quantitative', stack: 'zero' },
|
|
34
|
-
color: { field: 'source', type: 'nominal' },
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const OPTS = { width: 600, height: 400 };
|
|
40
|
-
|
|
41
|
-
function rectMarks(spec: ChartSpec): RectMark[] {
|
|
42
|
-
return compileChart(spec, OPTS).marks.filter((m): m is RectMark => m.type === 'rect');
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// ---------------------------------------------------------------------------
|
|
46
|
-
// Tests
|
|
47
|
-
// ---------------------------------------------------------------------------
|
|
48
|
-
|
|
49
|
-
describe('applyFillPatterns via compileChart', () => {
|
|
50
|
-
it('assigns four distinct patterns to a four-series stacked bar', () => {
|
|
51
|
-
const rects = rectMarks(stackedSpec('auto'));
|
|
52
|
-
expect(rects.length).toBeGreaterThan(0);
|
|
53
|
-
|
|
54
|
-
const byColor = new Map<string, string>();
|
|
55
|
-
for (const rect of rects) {
|
|
56
|
-
expect(rect.pattern).toBeDefined();
|
|
57
|
-
byColor.set(String(rect.fill), rect.pattern!.type);
|
|
58
|
-
}
|
|
59
|
-
// 4 series -> 4 distinct fills -> 4 distinct pattern shapes
|
|
60
|
-
expect(byColor.size).toBe(4);
|
|
61
|
-
expect(new Set(byColor.values()).size).toBe(4);
|
|
62
|
-
expect([...byColor.values()].sort()).toEqual(
|
|
63
|
-
['crosshatch', 'diagonal', 'dot', 'vertical'].sort(),
|
|
64
|
-
);
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
it('is deterministic across repeat compiles', () => {
|
|
68
|
-
const first = rectMarks(stackedSpec('auto')).map((r) => r.pattern);
|
|
69
|
-
const second = rectMarks(stackedSpec('auto')).map((r) => r.pattern);
|
|
70
|
-
expect(second).toEqual(first);
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
it('picks a contrast-aware line color for each pattern', () => {
|
|
74
|
-
for (const rect of rectMarks(stackedSpec('auto'))) {
|
|
75
|
-
expect(['#ffffff', '#111111']).toContain(rect.pattern!.line);
|
|
76
|
-
expect(rect.pattern!.base).toBe(rect.fill);
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
it('does nothing by default or with fillPattern: none', () => {
|
|
81
|
-
for (const rect of rectMarks(stackedSpec())) {
|
|
82
|
-
expect(rect.pattern).toBeUndefined();
|
|
83
|
-
}
|
|
84
|
-
for (const rect of rectMarks(stackedSpec('none'))) {
|
|
85
|
-
expect(rect.pattern).toBeUndefined();
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
it('minimum-area rule: thin segments keep their solid fill', () => {
|
|
90
|
-
// Tiny values force sub-12px stacked segments at 400px height.
|
|
91
|
-
const thinData = FOUR_SERIES_DATA.map((row) =>
|
|
92
|
-
row.source === 'Hydro' ? { ...row, twh: 0.5 } : row,
|
|
93
|
-
);
|
|
94
|
-
const spec = { ...stackedSpec('auto'), data: thinData };
|
|
95
|
-
const rects = rectMarks(spec);
|
|
96
|
-
|
|
97
|
-
const thin = rects.filter((r) => Math.min(r.width, r.height) < 12);
|
|
98
|
-
const thick = rects.filter((r) => Math.min(r.width, r.height) >= 12);
|
|
99
|
-
expect(thin.length).toBeGreaterThan(0);
|
|
100
|
-
expect(thick.length).toBeGreaterThan(0);
|
|
101
|
-
for (const rect of thin) expect(rect.pattern).toBeUndefined();
|
|
102
|
-
for (const rect of thick) expect(rect.pattern).toBeDefined();
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
it('assignment does not shift when individual marks are too small', () => {
|
|
106
|
-
// Same series order, one series squeezed below the minimum extent:
|
|
107
|
-
// surviving patterns keep the same shape per series color.
|
|
108
|
-
const thinData = FOUR_SERIES_DATA.map((row) =>
|
|
109
|
-
row.source === 'Wind' ? { ...row, twh: 0.5 } : row,
|
|
110
|
-
);
|
|
111
|
-
const base = rectMarks(stackedSpec('auto'));
|
|
112
|
-
const squeezed = rectMarks({ ...stackedSpec('auto'), data: thinData });
|
|
113
|
-
|
|
114
|
-
const patternByFill = (rects: RectMark[]) => {
|
|
115
|
-
const map = new Map<string, string>();
|
|
116
|
-
for (const r of rects) {
|
|
117
|
-
if (r.pattern) map.set(String(r.fill), r.pattern.type);
|
|
118
|
-
}
|
|
119
|
-
return map;
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
const baseMap = patternByFill(base);
|
|
123
|
-
for (const [fill, type] of patternByFill(squeezed)) {
|
|
124
|
-
expect(baseMap.get(fill)).toBe(type);
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
describe('fill patterns on arcs', () => {
|
|
130
|
-
it('patterns pie slices and skips slivers', () => {
|
|
131
|
-
const spec: ChartSpec = {
|
|
132
|
-
mark: { type: 'arc', fillPattern: 'auto' },
|
|
133
|
-
data: [
|
|
134
|
-
{ browser: 'Chrome', share: 64 },
|
|
135
|
-
{ browser: 'Safari', share: 20 },
|
|
136
|
-
{ browser: 'Edge', share: 15 },
|
|
137
|
-
{ browser: 'Other', share: 0.4 },
|
|
138
|
-
],
|
|
139
|
-
encoding: {
|
|
140
|
-
color: { field: 'browser', type: 'nominal' },
|
|
141
|
-
y: { field: 'share', type: 'quantitative' },
|
|
142
|
-
},
|
|
143
|
-
};
|
|
144
|
-
const layout = compileChart(spec, OPTS);
|
|
145
|
-
const arcs = layout.marks.filter((m) => m.type === 'arc');
|
|
146
|
-
expect(arcs.length).toBe(4);
|
|
147
|
-
|
|
148
|
-
const patterned = arcs.filter((a) => a.pattern);
|
|
149
|
-
const solid = arcs.filter((a) => !a.pattern);
|
|
150
|
-
// The 0.4% sliver falls under the minimum-area rule.
|
|
151
|
-
expect(patterned.length).toBe(3);
|
|
152
|
-
expect(solid.length).toBe(1);
|
|
153
|
-
});
|
|
154
|
-
});
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import type { EncodingChannel } from '@opendata-ai/openchart-core';
|
|
2
|
-
import { describe, expect, it } from 'vitest';
|
|
3
|
-
import { buildSizeScale } from '../size-scale';
|
|
4
|
-
|
|
5
|
-
const DATA = [{ v: 1 }, { v: 4 }, { v: 9 }];
|
|
6
|
-
const SQRT = { curve: 'sqrt' as const, range: [3, 30] as [number, number] };
|
|
7
|
-
const LINEAR = { curve: 'linear' as const, range: [11, 32] as [number, number] };
|
|
8
|
-
|
|
9
|
-
const size = (extra: Partial<EncodingChannel> = {}): EncodingChannel =>
|
|
10
|
-
({ field: 'v', type: 'quantitative', ...extra }) as EncodingChannel;
|
|
11
|
-
|
|
12
|
-
describe('buildSizeScale', () => {
|
|
13
|
-
it('returns null when there is no size encoding', () => {
|
|
14
|
-
expect(buildSizeScale(undefined, DATA, SQRT)).toBeNull();
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it('fits the domain to the data extent and the range to the default', () => {
|
|
18
|
-
const resolved = buildSizeScale(size(), DATA, SQRT);
|
|
19
|
-
expect(resolved?.domain).toEqual([1, 9]);
|
|
20
|
-
expect(resolved?.range).toEqual([3, 30]);
|
|
21
|
-
expect(resolved?.field).toBe('v');
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
it('maps circles by area (sqrt), not by radius', () => {
|
|
25
|
-
const { scale } = buildSizeScale(size(), DATA, SQRT)!;
|
|
26
|
-
// Endpoints pin to the range.
|
|
27
|
-
expect(scale(1)).toBeCloseTo(3, 5);
|
|
28
|
-
expect(scale(9)).toBeCloseTo(30, 5);
|
|
29
|
-
// The midpoint of a sqrt scale sits ABOVE the linear midpoint (16.5):
|
|
30
|
-
// r = 3 + 27 * (sqrt(4)-sqrt(1)) / (sqrt(9)-sqrt(1)) = 16.5 -- for v=4
|
|
31
|
-
// that lands exactly on the linear midpoint by coincidence of 1/4/9, so
|
|
32
|
-
// check a value where the two genuinely diverge.
|
|
33
|
-
const linearAt6 = 3 + 27 * ((6 - 1) / (9 - 1)); // 19.875
|
|
34
|
-
expect(scale(6)).toBeGreaterThan(linearAt6);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('maps glyphs by height (linear)', () => {
|
|
38
|
-
const { scale } = buildSizeScale(size(), DATA, LINEAR)!;
|
|
39
|
-
expect(scale(1)).toBeCloseTo(11, 5);
|
|
40
|
-
expect(scale(9)).toBeCloseTo(32, 5);
|
|
41
|
-
// Exactly proportional: no sqrt bulge.
|
|
42
|
-
expect(scale(5)).toBeCloseTo(11 + (32 - 11) * ((5 - 1) / (9 - 1)), 5);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it('lets an explicit scale.domain override the data extent', () => {
|
|
46
|
-
const resolved = buildSizeScale(size({ scale: { domain: [0, 100] } }), DATA, SQRT);
|
|
47
|
-
expect(resolved?.domain).toEqual([0, 100]);
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
it('lets an explicit scale.range override the default magnitudes', () => {
|
|
51
|
-
const resolved = buildSizeScale(size({ scale: { range: [5, 12] } }), DATA, SQRT);
|
|
52
|
-
expect(resolved?.range).toEqual([5, 12]);
|
|
53
|
-
expect(resolved?.scale(1)).toBeCloseTo(5, 5);
|
|
54
|
-
expect(resolved?.scale(9)).toBeCloseTo(12, 5);
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
it('clamps data outside an explicit domain to the range endpoints', () => {
|
|
58
|
-
// This is why a size legend must key the DOMAIN, not the data extent: every
|
|
59
|
-
// datum above domain[1] renders at max magnitude and is indistinguishable.
|
|
60
|
-
const { scale } = buildSizeScale(size({ scale: { domain: [0, 5] } }), DATA, SQRT)!;
|
|
61
|
-
expect(scale(9)).toBeCloseTo(scale(5), 5);
|
|
62
|
-
expect(scale(-100)).toBeCloseTo(scale(0), 5);
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
it('returns null for a degenerate domain (every value identical)', () => {
|
|
66
|
-
// A zero-width domain maps every datum to range[0]. There is no magnitude
|
|
67
|
-
// being encoded, so the caller falls back to its static default rather than
|
|
68
|
-
// rendering a field of identical minimum-size marks.
|
|
69
|
-
expect(buildSizeScale(size(), [{ v: 7 }, { v: 7 }], SQRT)).toBeNull();
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
it('returns null when no value is finite', () => {
|
|
73
|
-
expect(buildSizeScale(size(), [{ v: 'x' }, { v: null }], SQRT)).toBeNull();
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
it('ignores non-finite rows when fitting the domain', () => {
|
|
77
|
-
const resolved = buildSizeScale(size(), [{ v: 1 }, { v: 'nope' }, { v: 9 }], SQRT);
|
|
78
|
-
expect(resolved?.domain).toEqual([1, 9]);
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
it('treats a null hole as absent data, not as a zero', () => {
|
|
82
|
-
// `Number(null)` is a finite 0, so a hole that reaches the extent silently
|
|
83
|
-
// drags the domain floor to zero and rescales every genuine mark.
|
|
84
|
-
const resolved = buildSizeScale(size(), [{ v: 10 }, { v: 20 }, { v: null }], SQRT);
|
|
85
|
-
expect(resolved?.domain).toEqual([10, 20]);
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
it('treats an empty string the same way (Number("") is also 0)', () => {
|
|
89
|
-
const resolved = buildSizeScale(size(), [{ v: 10 }, { v: 20 }, { v: '' }], SQRT);
|
|
90
|
-
expect(resolved?.domain).toEqual([10, 20]);
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
it('returns null when the field is absent from every row', () => {
|
|
94
|
-
// `min([])`/`max([])` are undefined; a `?? 0` / `?? 1` fallback would
|
|
95
|
-
// fabricate a live [0, 1] scale out of data that encodes no size at all.
|
|
96
|
-
expect(buildSizeScale(size(), [{ other: 1 }, { other: 2 }], SQRT)).toBeNull();
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
it('returns null on empty data', () => {
|
|
100
|
-
expect(buildSizeScale(size(), [], SQRT)).toBeNull();
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
it('honours an explicit domain even when the data has no usable extent', () => {
|
|
104
|
-
// The domain is the author's, not the data's, so it stands on its own.
|
|
105
|
-
const resolved = buildSizeScale(size({ scale: { domain: [0, 100] } }), [{ v: null }], SQRT);
|
|
106
|
-
expect(resolved?.domain).toEqual([0, 100]);
|
|
107
|
-
});
|
|
108
|
-
});
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import type { AxisLayout, Rect, ResolvedChrome, ResolvedTheme } from '@opendata-ai/openchart-core';
|
|
2
|
-
import { BRAND_RESERVE_WIDTH, resolveTheme } from '@opendata-ai/openchart-core';
|
|
3
|
-
import { describe, expect, it } from 'vitest';
|
|
4
|
-
import type { AxesResult } from '../../layout/axes';
|
|
5
|
-
import type { LayoutDimensions } from '../../layout/dimensions';
|
|
6
|
-
import { computeWatermarkObstacle } from '../watermark-obstacle';
|
|
7
|
-
|
|
8
|
-
const theme: ResolvedTheme = resolveTheme();
|
|
9
|
-
|
|
10
|
-
function makeDims(overrides: Partial<LayoutDimensions> = {}): LayoutDimensions {
|
|
11
|
-
const total: Rect = { x: 0, y: 0, width: 800, height: 500 };
|
|
12
|
-
const chartArea: Rect = { x: 60, y: 80, width: 700, height: 360 };
|
|
13
|
-
const chrome: ResolvedChrome = {
|
|
14
|
-
topHeight: 80,
|
|
15
|
-
bottomHeight: 40,
|
|
16
|
-
} as ResolvedChrome;
|
|
17
|
-
return {
|
|
18
|
-
total,
|
|
19
|
-
chartArea,
|
|
20
|
-
chrome,
|
|
21
|
-
margins: { top: 80, right: 40, bottom: 40, left: 60 },
|
|
22
|
-
theme,
|
|
23
|
-
...overrides,
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function makeAxis(label?: string): AxisLayout {
|
|
28
|
-
return {
|
|
29
|
-
ticks: [],
|
|
30
|
-
gridlines: [],
|
|
31
|
-
label,
|
|
32
|
-
tickLabelStyle: {
|
|
33
|
-
fontFamily: theme.fonts.family,
|
|
34
|
-
fontSize: 12,
|
|
35
|
-
fontWeight: 400,
|
|
36
|
-
fill: '#000',
|
|
37
|
-
lineHeight: 1.2,
|
|
38
|
-
},
|
|
39
|
-
start: { x: 0, y: 0 },
|
|
40
|
-
end: { x: 100, y: 0 },
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
describe('computeWatermarkObstacle', () => {
|
|
45
|
-
it('returns null when watermark is disabled', () => {
|
|
46
|
-
const dims = makeDims();
|
|
47
|
-
const axes: AxesResult = { x: makeAxis(), y: makeAxis() };
|
|
48
|
-
expect(computeWatermarkObstacle(dims, false, axes, theme)).toBeNull();
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
it('sits below the x-axis when no bottom chrome is present', () => {
|
|
52
|
-
const dims = makeDims();
|
|
53
|
-
const axes: AxesResult = { x: makeAxis('value'), y: makeAxis() };
|
|
54
|
-
const rect = computeWatermarkObstacle(dims, true, axes, theme);
|
|
55
|
-
expect(rect).not.toBeNull();
|
|
56
|
-
// Right-aligned: total.width - padding - BRAND_RESERVE_WIDTH
|
|
57
|
-
expect(rect!.x).toBe(dims.total.width - theme.spacing.padding - BRAND_RESERVE_WIDTH);
|
|
58
|
-
expect(rect!.width).toBe(BRAND_RESERVE_WIDTH);
|
|
59
|
-
expect(rect!.height).toBe(30);
|
|
60
|
-
// Watermark sits below chart area, offset by x-axis extent + chartToFooter
|
|
61
|
-
const expectedY = dims.chartArea.y + dims.chartArea.height + 48 + theme.spacing.chartToFooter;
|
|
62
|
-
expect(rect!.y).toBe(expectedY);
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
it('aligns with bottom chrome when a source element is present', () => {
|
|
66
|
-
const sourceY = 20;
|
|
67
|
-
const dims = makeDims({
|
|
68
|
-
chrome: {
|
|
69
|
-
topHeight: 80,
|
|
70
|
-
bottomHeight: 40,
|
|
71
|
-
source: {
|
|
72
|
-
text: 'Source: Test',
|
|
73
|
-
x: 10,
|
|
74
|
-
y: sourceY,
|
|
75
|
-
maxWidth: 500,
|
|
76
|
-
style: {
|
|
77
|
-
fontFamily: theme.fonts.family,
|
|
78
|
-
fontSize: 10,
|
|
79
|
-
fontWeight: 400,
|
|
80
|
-
fill: '#666',
|
|
81
|
-
lineHeight: 1.2,
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
} as ResolvedChrome,
|
|
85
|
-
});
|
|
86
|
-
const axes: AxesResult = { x: makeAxis(), y: makeAxis() };
|
|
87
|
-
const rect = computeWatermarkObstacle(dims, true, axes, theme);
|
|
88
|
-
expect(rect).not.toBeNull();
|
|
89
|
-
// With axis present but no label, extent is 26.
|
|
90
|
-
// Y is chartArea.y + chartArea.height + 26 + sourceY
|
|
91
|
-
expect(rect!.y).toBe(dims.chartArea.y + dims.chartArea.height + 26 + sourceY);
|
|
92
|
-
});
|
|
93
|
-
});
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Apply the theme palette as the color scale range when no explicit range was provided.
|
|
3
|
-
*
|
|
4
|
-
* Sequential scales take the first/last stops of the first sequential palette
|
|
5
|
-
* (or the categorical endpoints as a fallback). Categorical scales get the
|
|
6
|
-
* full categorical palette. A user-provided `encoding.color.scale.range`
|
|
7
|
-
* always wins.
|
|
8
|
-
*
|
|
9
|
-
* When `highlight` is non-empty, highlighted series get sequential palette
|
|
10
|
-
* colors and muted series get a neutral gray.
|
|
11
|
-
*
|
|
12
|
-
* When `theme.seriesStrategy` is `'accent-neutral'`, low-cardinality
|
|
13
|
-
* charts use accent + neutral grays instead of the full palette.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
import { ACHROMATIC_RAMP, type Encoding, type ResolvedTheme } from '@opendata-ai/openchart-core';
|
|
17
|
-
import type { ScaleLinear, ScaleOrdinal, ScaleQuantile } from 'd3-scale';
|
|
18
|
-
import type { ResolvedScales } from '../layout/scales';
|
|
19
|
-
import { sampleRampColors } from '../legend/continuous';
|
|
20
|
-
|
|
21
|
-
/** Neutral gray applied to muted (non-highlighted) series. */
|
|
22
|
-
const MUTED_COLOR = '#bfc3c8';
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Resolve the categorical color range for a color-scale domain.
|
|
26
|
-
*
|
|
27
|
-
* Single source of truth for categorical color assignment: the ordinal scale
|
|
28
|
-
* (which colors the marks) and the legend (which colors the swatches) both go
|
|
29
|
-
* through this, so highlight muting and the accent-neutral series strategy
|
|
30
|
-
* stay in sync. Callers pass the domain in the same order the scale uses.
|
|
31
|
-
*
|
|
32
|
-
* The result is a d3 ordinal *range*, so callers index it the way d3 does:
|
|
33
|
-
* `colors[domainIndex % colors.length]`. In the pass-through cases the full
|
|
34
|
-
* palette comes back unsliced (d3 cycles it), matching the range the scale
|
|
35
|
-
* carried before this was factored out.
|
|
36
|
-
*/
|
|
37
|
-
export function categoricalColorsForDomain(
|
|
38
|
-
domain: string[],
|
|
39
|
-
theme: ResolvedTheme,
|
|
40
|
-
highlight?: string[],
|
|
41
|
-
): string[] {
|
|
42
|
-
const palette = theme.colors.categorical;
|
|
43
|
-
|
|
44
|
-
if (highlight && highlight.length > 0) {
|
|
45
|
-
const highlightSet = new Set(highlight);
|
|
46
|
-
return domain.map((v, i) => (highlightSet.has(v) ? palette[i % palette.length] : MUTED_COLOR));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
const strategy = theme.seriesStrategy ?? 'palette';
|
|
50
|
-
if (strategy !== 'accent-neutral') return palette;
|
|
51
|
-
|
|
52
|
-
const count = domain.length;
|
|
53
|
-
if (count <= 1) return [palette[0]];
|
|
54
|
-
if (count > 4) return palette;
|
|
55
|
-
|
|
56
|
-
// Prominence tracks contrast against the surface: on dark canvases the
|
|
57
|
-
// brightest gray reads strongest, on light canvases the darkest.
|
|
58
|
-
const neutrals = theme.isDark
|
|
59
|
-
? [ACHROMATIC_RAMP.fgMuted, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgFaint]
|
|
60
|
-
: [ACHROMATIC_RAMP.fgFaint, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgMuted];
|
|
61
|
-
return domain.map((_, i) => (i === 0 ? palette[0] : neutrals[(i - 1) % neutrals.length]));
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/** Mutates `scales.color.scale.range` in place when no explicit palette was set. */
|
|
65
|
-
export function applyColorScaleRange(
|
|
66
|
-
scales: ResolvedScales,
|
|
67
|
-
encoding: Encoding,
|
|
68
|
-
theme: ResolvedTheme,
|
|
69
|
-
highlight?: string[],
|
|
70
|
-
): void {
|
|
71
|
-
if (!scales.color) return;
|
|
72
|
-
|
|
73
|
-
const hasExplicitRange = !!(
|
|
74
|
-
encoding.color &&
|
|
75
|
-
'field' in encoding.color &&
|
|
76
|
-
(encoding.color.scale?.range as string[] | undefined)?.length
|
|
77
|
-
);
|
|
78
|
-
if (hasExplicitRange) return;
|
|
79
|
-
|
|
80
|
-
if (scales.color.type === 'sequential') {
|
|
81
|
-
const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
|
|
82
|
-
(scales.color.scale as unknown as ScaleLinear<string, string>).range([
|
|
83
|
-
seqStops[0],
|
|
84
|
-
seqStops[seqStops.length - 1],
|
|
85
|
-
]);
|
|
86
|
-
} else if (
|
|
87
|
-
scales.color.type === 'quantile' ||
|
|
88
|
-
scales.color.type === 'quantize' ||
|
|
89
|
-
scales.color.type === 'threshold'
|
|
90
|
-
) {
|
|
91
|
-
// Binned color scales: replace the placeholder colors with the theme's
|
|
92
|
-
// sequential ramp, sampled to the class count. Same ramp the gradient
|
|
93
|
-
// legend and continuous marks use.
|
|
94
|
-
const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
|
|
95
|
-
const scale = scales.color.scale as unknown as ScaleQuantile<string>;
|
|
96
|
-
scale.range(sampleRampColors(seqStops, scale.range().length));
|
|
97
|
-
} else {
|
|
98
|
-
const ordinalScale = scales.color.scale as ScaleOrdinal<string, string>;
|
|
99
|
-
ordinalScale.range(categoricalColorsForDomain(ordinalScale.domain(), theme, highlight));
|
|
100
|
-
}
|
|
101
|
-
}
|