Skip to content

Commit e325399

Browse files
mstademstade
committed
chore: add simple test case for style overrides
This test renders two categorical legends, one using default Plot styles and the other using styles by setting the `className` option. The styles being overridden have the same selector specificity as those set by Plot, would it not be for the `:where()` selector resetting Plot's specificity to 0. This is easily verified by reverting b2ff68e.
1 parent fbcfa1f commit e325399

File tree

3 files changed

+135
-0
lines changed

3 files changed

+135
-0
lines changed

‎test/output/styleOverrideLegendCategorical.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="test-wrapper">
2+
<style>
3+
.style-override-swatches {
4+
font-family: cursive;
5+
font-size: 25px;
6+
margin-bottom: 1em;
7+
}
8+
</style>
9+
<div class="plot-swatches plot-swatches-wrap">
10+
<style>
11+
:where(.plot-swatches) {
12+
font-family: system-ui, sans-serif;
13+
font-size: 10px;
14+
margin-bottom: 0.5em;
15+
}
16+
17+
:where(.plot-swatch > svg) {
18+
margin-right: 0.5em;
19+
overflow: visible;
20+
}
21+
22+
:where(.plot-swatches-wrap) {
23+
display: flex;
24+
align-items: center;
25+
min-height: 33px;
26+
flex-wrap: wrap;
27+
}
28+
29+
:where(.plot-swatches-wrap .plot-swatch) {
30+
display: inline-flex;
31+
align-items: center;
32+
margin-right: 1em;
33+
}
34+
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
35+
<rect width="100%" height="100%"></rect>
36+
</svg>A</span><span class="plot-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
37+
<rect width="100%" height="100%"></rect>
38+
</svg>B</span><span class="plot-swatch"><svg width="15" height="15" fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
39+
<rect width="100%" height="100%"></rect>
40+
</svg>C</span><span class="plot-swatch"><svg width="15" height="15" fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
41+
<rect width="100%" height="100%"></rect>
42+
</svg>D</span><span class="plot-swatch"><svg width="15" height="15" fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
43+
<rect width="100%" height="100%"></rect>
44+
</svg>E</span><span class="plot-swatch"><svg width="15" height="15" fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
45+
<rect width="100%" height="100%"></rect>
46+
</svg>F</span><span class="plot-swatch"><svg width="15" height="15" fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
47+
<rect width="100%" height="100%"></rect>
48+
</svg>G</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
49+
<rect width="100%" height="100%"></rect>
50+
</svg>H</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
51+
<rect width="100%" height="100%"></rect>
52+
</svg>I</span><span class="plot-swatch"><svg width="15" height="15" fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
53+
<rect width="100%" height="100%"></rect>
54+
</svg>J</span>
55+
</div>
56+
<div class="style-override-swatches style-override-swatches-wrap">
57+
<style>
58+
:where(.style-override-swatches) {
59+
font-family: system-ui, sans-serif;
60+
font-size: 10px;
61+
margin-bottom: 0.5em;
62+
}
63+
64+
:where(.style-override-swatch > svg) {
65+
margin-right: 0.5em;
66+
overflow: visible;
67+
}
68+
69+
:where(.style-override-swatches-wrap) {
70+
display: flex;
71+
align-items: center;
72+
min-height: 33px;
73+
flex-wrap: wrap;
74+
}
75+
76+
:where(.style-override-swatches-wrap .style-override-swatch) {
77+
display: inline-flex;
78+
align-items: center;
79+
margin-right: 1em;
80+
}
81+
</style><span class="style-override-swatch"><svg width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
82+
<rect width="100%" height="100%"></rect>
83+
</svg>A</span><span class="style-override-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
84+
<rect width="100%" height="100%"></rect>
85+
</svg>B</span><span class="style-override-swatch"><svg width="15" height="15" fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
86+
<rect width="100%" height="100%"></rect>
87+
</svg>C</span><span class="style-override-swatch"><svg width="15" height="15" fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
88+
<rect width="100%" height="100%"></rect>
89+
</svg>D</span><span class="style-override-swatch"><svg width="15" height="15" fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
90+
<rect width="100%" height="100%"></rect>
91+
</svg>E</span><span class="style-override-swatch"><svg width="15" height="15" fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
92+
<rect width="100%" height="100%"></rect>
93+
</svg>F</span><span class="style-override-swatch"><svg width="15" height="15" fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
94+
<rect width="100%" height="100%"></rect>
95+
</svg>G</span><span class="style-override-swatch"><svg width="15" height="15" fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
96+
<rect width="100%" height="100%"></rect>
97+
</svg>H</span><span class="style-override-swatch"><svg width="15" height="15" fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
98+
<rect width="100%" height="100%"></rect>
99+
</svg>I</span><span class="style-override-swatch"><svg width="15" height="15" fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
100+
<rect width="100%" height="100%"></rect>
101+
</svg>J</span>
102+
</div>
103+
</div>

‎test/plots/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,7 @@ export * from "./stargazers-hourly-group.js";
292292
export * from "./stargazers-hourly.js";
293293
export * from "./stargazers.js";
294294
export * from "./stocks-index.js";
295+
export * from "./style-overrides.js";
295296
export * from "./symbol-set.js";
296297
export * from "./text-overflow.js";
297298
export * from "./this-is-just-to-say.js";

‎test/plots/style-overrides.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as Plot from "@observablehq/plot";
2+
import * as d3 from "d3";
3+
4+
export function styleOverrideLegendCategorical() {
5+
const className = "style-override";
6+
const wrapper = d3
7+
.create("div")
8+
.attr("class", "test-wrapper") // Required by ../plot.js
9+
.html(
10+
`
11+
<style>
12+
.${className}-swatches {
13+
font-family: cursive;
14+
font-size: 25px;
15+
margin-bottom: 1em;
16+
}
17+
</style>
18+
`
19+
)
20+
.node();
21+
22+
const options = {color: {domain: "ABCDEFGHIJ"}, label: "Hello"};
23+
24+
// Normal legend without style overrides
25+
wrapper.append(Plot.legend(options));
26+
27+
// Styled legend with className override
28+
wrapper.append(Plot.legend({...options, className}));
29+
30+
return wrapper;
31+
}

0 commit comments

Comments
 (0)