Skip to content

Commit 20f86a3

Browse files
FilFil
committed
Consistently make the palette a div.palette inside the main div. Align all the style definitions.
This creates a bit more churn in this PR, but the output is more predictable and the code slightly easier to maintain.
1 parent 9fc2614 commit 20f86a3

26 files changed

+2571
-718
lines changed

‎src/legends/swatches.js

Lines changed: 43 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ export function legendSwatches(color, options) {
1717
options,
1818
selection => selection.style("--color", color.scale),
1919
className => `.${className}-swatch::before {
20-
content: "";
21-
width: var(--swatchWidth);
22-
height: var(--swatchHeight);
23-
margin-right: 0.5em;
24-
background: var(--color);
25-
}`
20+
content: "";
21+
width: var(--swatchWidth);
22+
height: var(--swatchHeight);
23+
margin-right: 0.5em;
24+
background: var(--color);
25+
}`
2626
);
2727
}
2828

@@ -93,39 +93,30 @@ function legendItems(scale, {
9393
--swatchHeight: ${+swatchHeight}px;
9494
`);
9595

96-
const hasTitle = label != null && label !== "";
97-
const palette = hasTitle
98-
? swatches.call(div => div.append("div")
99-
.attr("class", `${className}-title`)
100-
.text(label))
101-
.append("div")
102-
: swatches;
103-
palette.classed(`${className}-palette`, true);
96+
if (label != null) {
97+
swatches.append("div")
98+
.attr("class", `${className}-title`)
99+
.text(label);
100+
}
101+
const palette = swatches.append("div").attr("class", `${className}-palette`);
104102

105-
let extraStyle = hasTitle ? `
106-
.${className}-title {
107-
font-weight: bold;
108-
display: block;
109-
margin-bottom: 0.4em;
110-
}` : "";
103+
let extraStyle;
111104

112105
if (columns != null) {
113-
extraStyle += `
114-
.${className}-swatch {
115-
display: flex;
116-
align-items: center;
117-
break-inside: avoid;
118-
padding-bottom: 1px;
119-
}
120-
.${className}-swatch::before {
121-
flex-shrink: 0;
122-
}
123-
.${className}-label {
124-
white-space: nowrap;
125-
overflow: hidden;
126-
text-overflow: ellipsis;
127-
}
128-
`;
106+
extraStyle = `.${className}-swatch {
107+
display: flex;
108+
align-items: center;
109+
break-inside: avoid;
110+
padding-bottom: 1px;
111+
}
112+
.${className}-swatch::before {
113+
flex-shrink: 0;
114+
}
115+
.${className}-label {
116+
white-space: nowrap;
117+
overflow: hidden;
118+
text-overflow: ellipsis;
119+
}`;
129120

130121
palette
131122
.style("columns", columns)
@@ -140,19 +131,17 @@ function legendItems(scale, {
140131
.attr("title", tickFormat)
141132
.text(tickFormat));
142133
} else {
143-
extraStyle += `
144-
.${className}-palette {
145-
display: flex;
146-
align-items: flex-start;
147-
min-height: 33px;
148-
flex-wrap: wrap;
149-
}
150-
.${className}-swatch {
151-
display: inline-flex;
152-
align-items: center;
153-
margin-right: 1em;
154-
}
155-
`;
134+
extraStyle = `.${className}-palette {
135+
display: flex;
136+
align-items: flex-start;
137+
min-height: 33px;
138+
flex-wrap: wrap;
139+
}
140+
.${className}-swatch {
141+
display: inline-flex;
142+
align-items: center;
143+
margin-right: 1em;
144+
}`;
156145

157146
palette.selectAll()
158147
.data(scale.domain)
@@ -174,6 +163,11 @@ function legendItems(scale, {
174163
margin-left: ${+marginLeft}px;`}${width === undefined ? "" : `
175164
width: ${width}px;`}
176165
}
166+
.${className}-title {
167+
font-weight: bold;
168+
display: block;
169+
margin-bottom: 0.4em;
170+
}
177171
${swatchStyle(className)}
178172
${extraStyle}
179173
`))

‎test/output/caltrain.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<figure style="max-width: initial;">
2-
<div class="plot plot-palette" style="
2+
<div class="plot" style="
33
--swatchWidth: 15px;
44
--swatchHeight: 15px;
55
">
@@ -11,6 +11,12 @@
1111
margin-left: 0px;
1212
}
1313

14+
.plot-title {
15+
font-weight: bold;
16+
display: block;
17+
margin-bottom: 0.4em;
18+
}
19+
1420
.plot-swatch::before {
1521
content: "";
1622
width: var(--swatchWidth);
@@ -31,7 +37,8 @@
3137
align-items: center;
3238
margin-right: 1em;
3339
}
34-
</style><span class="plot-swatch" style="--color: currentColor;">N</span><span class="plot-swatch" style="--color: peru;">L</span><span class="plot-swatch" style="--color: brown;">B</span>
40+
</style>
41+
<div class="plot-palette"><span class="plot-swatch" style="--color: currentColor;">N</span><span class="plot-swatch" style="--color: peru;">L</span><span class="plot-swatch" style="--color: brown;">B</span></div>
3542
</div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="240" height="520" viewBox="0 0 240 520" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3643
<style>
3744
.plot-2 {

‎test/output/colorLegendCategorical.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: #4e79a7;">A</span><span class="plot-swatch" style="--color: #f28e2c;">B</span><span class="plot-swatch" style="--color: #e15759;">C</span><span class="plot-swatch" style="--color: #76b7b2;">D</span><span class="plot-swatch" style="--color: #59a14f;">E</span><span class="plot-swatch" style="--color: #edc949;">F</span><span class="plot-swatch" style="--color: #af7aa1;">G</span><span class="plot-swatch" style="--color: #ff9da7;">H</span><span class="plot-swatch" style="--color: #9c755f;">I</span><span class="plot-swatch" style="--color: #bab0ab;">J</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: #4e79a7;">A</span><span class="plot-swatch" style="--color: #f28e2c;">B</span><span class="plot-swatch" style="--color: #e15759;">C</span><span class="plot-swatch" style="--color: #76b7b2;">D</span><span class="plot-swatch" style="--color: #59a14f;">E</span><span class="plot-swatch" style="--color: #edc949;">F</span><span class="plot-swatch" style="--color: #af7aa1;">G</span><span class="plot-swatch" style="--color: #ff9da7;">H</span><span class="plot-swatch" style="--color: #9c755f;">I</span><span class="plot-swatch" style="--color: #bab0ab;">J</span></div>
3441
</div>

‎test/output/colorLegendCategoricalColumns.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -18,12 +24,6 @@
1824
background: var(--color);
1925
}
2026

21-
.plot-title {
22-
font-weight: bold;
23-
display: block;
24-
margin-bottom: 0.4em;
25-
}
26-
2727
.plot-swatch {
2828
display: flex;
2929
align-items: center;

‎test/output/colorLegendCategoricalReverse.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: #4e79a7;">J</span><span class="plot-swatch" style="--color: #f28e2c;">I</span><span class="plot-swatch" style="--color: #e15759;">H</span><span class="plot-swatch" style="--color: #76b7b2;">G</span><span class="plot-swatch" style="--color: #59a14f;">F</span><span class="plot-swatch" style="--color: #edc949;">E</span><span class="plot-swatch" style="--color: #af7aa1;">D</span><span class="plot-swatch" style="--color: #ff9da7;">C</span><span class="plot-swatch" style="--color: #9c755f;">B</span><span class="plot-swatch" style="--color: #bab0ab;">A</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: #4e79a7;">J</span><span class="plot-swatch" style="--color: #f28e2c;">I</span><span class="plot-swatch" style="--color: #e15759;">H</span><span class="plot-swatch" style="--color: #76b7b2;">G</span><span class="plot-swatch" style="--color: #59a14f;">F</span><span class="plot-swatch" style="--color: #edc949;">E</span><span class="plot-swatch" style="--color: #af7aa1;">D</span><span class="plot-swatch" style="--color: #ff9da7;">C</span><span class="plot-swatch" style="--color: #9c755f;">B</span><span class="plot-swatch" style="--color: #bab0ab;">A</span></div>
3441
</div>

‎test/output/colorLegendCategoricalScheme.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: #1f77b4;">A</span><span class="plot-swatch" style="--color: #ff7f0e;">B</span><span class="plot-swatch" style="--color: #2ca02c;">C</span><span class="plot-swatch" style="--color: #d62728;">D</span><span class="plot-swatch" style="--color: #9467bd;">E</span><span class="plot-swatch" style="--color: #8c564b;">F</span><span class="plot-swatch" style="--color: #e377c2;">G</span><span class="plot-swatch" style="--color: #7f7f7f;">H</span><span class="plot-swatch" style="--color: #bcbd22;">I</span><span class="plot-swatch" style="--color: #17becf;">J</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: #1f77b4;">A</span><span class="plot-swatch" style="--color: #ff7f0e;">B</span><span class="plot-swatch" style="--color: #2ca02c;">C</span><span class="plot-swatch" style="--color: #d62728;">D</span><span class="plot-swatch" style="--color: #9467bd;">E</span><span class="plot-swatch" style="--color: #8c564b;">F</span><span class="plot-swatch" style="--color: #e377c2;">G</span><span class="plot-swatch" style="--color: #7f7f7f;">H</span><span class="plot-swatch" style="--color: #bcbd22;">I</span><span class="plot-swatch" style="--color: #17becf;">J</span></div>
3441
</div>

‎test/output/colorLegendOrdinal.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: rgb(35, 23, 27);">A</span><span class="plot-swatch" style="--color: rgb(72, 96, 230);">B</span><span class="plot-swatch" style="--color: rgb(42, 171, 238);">C</span><span class="plot-swatch" style="--color: rgb(46, 229, 174);">D</span><span class="plot-swatch" style="--color: rgb(106, 253, 106);">E</span><span class="plot-swatch" style="--color: rgb(192, 238, 61);">F</span><span class="plot-swatch" style="--color: rgb(254, 185, 39);">G</span><span class="plot-swatch" style="--color: rgb(254, 110, 26);">H</span><span class="plot-swatch" style="--color: rgb(194, 39, 10);">I</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">J</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: rgb(35, 23, 27);">A</span><span class="plot-swatch" style="--color: rgb(72, 96, 230);">B</span><span class="plot-swatch" style="--color: rgb(42, 171, 238);">C</span><span class="plot-swatch" style="--color: rgb(46, 229, 174);">D</span><span class="plot-swatch" style="--color: rgb(106, 253, 106);">E</span><span class="plot-swatch" style="--color: rgb(192, 238, 61);">F</span><span class="plot-swatch" style="--color: rgb(254, 185, 39);">G</span><span class="plot-swatch" style="--color: rgb(254, 110, 26);">H</span><span class="plot-swatch" style="--color: rgb(194, 39, 10);">I</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">J</span></div>
3441
</div>

‎test/output/colorLegendOrdinalScheme.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: rgb(110, 64, 170);">A</span><span class="plot-swatch" style="--color: rgb(191, 60, 175);">B</span><span class="plot-swatch" style="--color: rgb(254, 75, 131);">C</span><span class="plot-swatch" style="--color: rgb(255, 120, 71);">D</span><span class="plot-swatch" style="--color: rgb(226, 183, 47);">E</span><span class="plot-swatch" style="--color: rgb(175, 240, 91);">F</span><span class="plot-swatch" style="--color: rgb(82, 246, 103);">G</span><span class="plot-swatch" style="--color: rgb(29, 223, 163);">H</span><span class="plot-swatch" style="--color: rgb(35, 171, 216);">I</span><span class="plot-swatch" style="--color: rgb(76, 110, 219);">J</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: rgb(110, 64, 170);">A</span><span class="plot-swatch" style="--color: rgb(191, 60, 175);">B</span><span class="plot-swatch" style="--color: rgb(254, 75, 131);">C</span><span class="plot-swatch" style="--color: rgb(255, 120, 71);">D</span><span class="plot-swatch" style="--color: rgb(226, 183, 47);">E</span><span class="plot-swatch" style="--color: rgb(175, 240, 91);">F</span><span class="plot-swatch" style="--color: rgb(82, 246, 103);">G</span><span class="plot-swatch" style="--color: rgb(29, 223, 163);">H</span><span class="plot-swatch" style="--color: rgb(35, 171, 216);">I</span><span class="plot-swatch" style="--color: rgb(76, 110, 219);">J</span></div>
3441
</div>

‎test/output/colorLegendOrdinalTickFormat.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: rgb(35, 23, 27);">1.0</span><span class="plot-swatch" style="--color: rgb(38, 188, 225);">2.0</span><span class="plot-swatch" style="--color: rgb(149, 251, 81);">3.0</span><span class="plot-swatch" style="--color: rgb(255, 130, 29);">4.0</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">5.0</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: rgb(35, 23, 27);">1.0</span><span class="plot-swatch" style="--color: rgb(38, 188, 225);">2.0</span><span class="plot-swatch" style="--color: rgb(149, 251, 81);">3.0</span><span class="plot-swatch" style="--color: rgb(255, 130, 29);">4.0</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">5.0</span></div>
3441
</div>

‎test/output/colorLegendOrdinalTickFormatFunction.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot plot-palette" style="
1+
<div class="plot" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -10,6 +10,12 @@
1010
margin-left: 0px;
1111
}
1212

13+
.plot-title {
14+
font-weight: bold;
15+
display: block;
16+
margin-bottom: 0.4em;
17+
}
18+
1319
.plot-swatch::before {
1420
content: "";
1521
width: var(--swatchWidth);
@@ -30,5 +36,6 @@
3036
align-items: center;
3137
margin-right: 1em;
3238
}
33-
</style><span class="plot-swatch" style="--color: rgb(35, 23, 27);">1.0</span><span class="plot-swatch" style="--color: rgb(38, 188, 225);">2.0</span><span class="plot-swatch" style="--color: rgb(149, 251, 81);">3.0</span><span class="plot-swatch" style="--color: rgb(255, 130, 29);">4.0</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">5.0</span>
39+
</style>
40+
<div class="plot-palette"><span class="plot-swatch" style="--color: rgb(35, 23, 27);">1.0</span><span class="plot-swatch" style="--color: rgb(38, 188, 225);">2.0</span><span class="plot-swatch" style="--color: rgb(149, 251, 81);">3.0</span><span class="plot-swatch" style="--color: rgb(255, 130, 29);">4.0</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">5.0</span></div>
3441
</div>

0 commit comments

Comments
 (0)