Skip to content

Commit d495760

Browse files
FilFil
committed
legends show the label of ordinal scales
1 parent 994b534 commit d495760

39 files changed

+1093
-983
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -647,7 +647,8 @@ If there is no scale with the given *scaleName* on the given *plot*, then *plot*
647647

648648
Categorical and ordinal color legends are rendered as swatches, unless *options*.**legend** is set to *ramp*. The swatches can be configured with the following options:
649649

650-
* *options*.**tickFormat** - a format function for the labels
650+
* *options*.**label** - the scale’s label
651+
* *options*.**tickFormat** - a format function for the domain values
651652
* *options*.**swatchSize** - the size of the swatch (if square)
652653
* *options*.**swatchWidth** - the swatches’ width
653654
* *options*.**swatchHeight** - the swatches’ height

‎src/legends.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export function exposeLegends(scales, context, defaults = {}) {
4040
};
4141
}
4242

43-
function legendOptions(context, {label, ticks, tickFormat} = {}, options) {
44-
return inherit(options, context, {label, ticks, tickFormat});
43+
function legendOptions(context, {label, ticks, tickFormat} = {}, options = {}) {
44+
return inherit(options, context, {label, ticks, tickFormat, ...options});
4545
}
4646

4747
function legendColor(color, {legend = true, ...options}) {

‎src/legends/swatches.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
8383
columns,
8484
tickFormat,
8585
fontVariant = inferFontVariant(scale),
86-
// TODO label,
86+
label = scale.label,
8787
swatchSize = 15,
8888
swatchWidth = swatchSize,
8989
swatchHeight = swatchSize,
@@ -106,10 +106,23 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
106106
`
107107
);
108108

109-
let extraStyle;
109+
const hasTitle = label != null && label !== "";
110+
const palette = hasTitle
111+
? swatches.call((div) => div.append("div").attr("class", `${className}-title`).text(label)).append("div")
112+
: swatches;
113+
palette.classed(`${className}-palette`, true);
114+
115+
let extraStyle = hasTitle
116+
? `
117+
.${className}-title {
118+
font-weight: bold;
119+
display: block;
120+
margin-bottom: 0.4em;
121+
}`
122+
: "";
110123

111124
if (columns != null) {
112-
extraStyle = `
125+
extraStyle += `
113126
.${className}-swatch {
114127
display: flex;
115128
align-items: center;
@@ -126,7 +139,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
126139
}
127140
`;
128141

129-
swatches
142+
palette
130143
.style("columns", columns)
131144
.selectAll()
132145
.data(scale.domain)
@@ -138,10 +151,10 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
138151
item.append("div").attr("class", `${className}-label`).attr("title", tickFormat).text(tickFormat)
139152
);
140153
} else {
141-
extraStyle = `
142-
.${className} {
154+
extraStyle += `
155+
.${className}-palette {
143156
display: flex;
144-
align-items: center;
157+
align-items: flex-start;
145158
min-height: 33px;
146159
flex-wrap: wrap;
147160
}
@@ -152,7 +165,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
152165
}
153166
`;
154167

155-
swatches
168+
palette
156169
.selectAll()
157170
.data(scale.domain)
158171
.enter()

‎test/output/caltrain.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<figure style="max-width: initial;">
2-
<div class="plot" style="
2+
<div class="plot plot-palette" style="
33
--swatchWidth: 15px;
44
--swatchHeight: 15px;
55
">
@@ -17,9 +17,9 @@
1717
margin-right: 0.5em;
1818
}
1919

20-
.plot {
20+
.plot-palette {
2121
display: flex;
22-
align-items: center;
22+
align-items: flex-start;
2323
min-height: 33px;
2424
flex-wrap: wrap;
2525
}

‎test/output/colorLegendCategorical.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendCategoricalColumns.html

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<div class="plot" style="--swatchWidth: 15px; --swatchHeight: 15px; columns: 180px;">
1+
<div class="plot" style="
2+
--swatchWidth: 15px;
3+
--swatchHeight: 15px;
4+
">
25
<style>
36
.plot {
47
font-family: system-ui, sans-serif;
@@ -13,6 +16,12 @@
1316
margin-right: 0.5em;
1417
}
1518

19+
.plot-title {
20+
font-weight: bold;
21+
display: block;
22+
margin-bottom: 0.4em;
23+
}
24+
1625
.plot-swatch {
1726
display: flex;
1827
align-items: center;
@@ -30,54 +39,57 @@
3039
text-overflow: ellipsis;
3140
}
3241
</style>
33-
<div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34-
<rect width="100%" height="100%"></rect>
35-
</svg>
36-
<div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
37-
</div>
38-
<div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
39-
<rect width="100%" height="100%"></rect>
40-
</svg>
41-
<div class="plot-label" title="Manufacturing">Manufacturing</div>
42-
</div>
43-
<div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44-
<rect width="100%" height="100%"></rect>
45-
</svg>
46-
<div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
47-
</div>
48-
<div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
49-
<rect width="100%" height="100%"></rect>
50-
</svg>
51-
<div class="plot-label" title="Business services">Business services</div>
52-
</div>
53-
<div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
54-
<rect width="100%" height="100%"></rect>
55-
</svg>
56-
<div class="plot-label" title="Construction">Construction</div>
57-
</div>
58-
<div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
59-
<rect width="100%" height="100%"></rect>
60-
</svg>
61-
<div class="plot-label" title="Education and Health">Education and Health</div>
62-
</div>
63-
<div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
64-
<rect width="100%" height="100%"></rect>
65-
</svg>
66-
<div class="plot-label" title="Government">Government</div>
67-
</div>
68-
<div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
69-
<rect width="100%" height="100%"></rect>
70-
</svg>
71-
<div class="plot-label" title="Finance">Finance</div>
72-
</div>
73-
<div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
74-
<rect width="100%" height="100%"></rect>
75-
</svg>
76-
<div class="plot-label" title="Self-employed">Self-employed</div>
77-
</div>
78-
<div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
79-
<rect width="100%" height="100%"></rect>
80-
</svg>
81-
<div class="plot-label" title="Other">Other</div>
42+
<div class="plot-title">Industry</div>
43+
<div class="plot-palette" style="columns: 180px;">
44+
<div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
45+
<rect width="100%" height="100%"></rect>
46+
</svg>
47+
<div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
48+
</div>
49+
<div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50+
<rect width="100%" height="100%"></rect>
51+
</svg>
52+
<div class="plot-label" title="Manufacturing">Manufacturing</div>
53+
</div>
54+
<div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
55+
<rect width="100%" height="100%"></rect>
56+
</svg>
57+
<div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
58+
</div>
59+
<div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
60+
<rect width="100%" height="100%"></rect>
61+
</svg>
62+
<div class="plot-label" title="Business services">Business services</div>
63+
</div>
64+
<div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
65+
<rect width="100%" height="100%"></rect>
66+
</svg>
67+
<div class="plot-label" title="Construction">Construction</div>
68+
</div>
69+
<div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
70+
<rect width="100%" height="100%"></rect>
71+
</svg>
72+
<div class="plot-label" title="Education and Health">Education and Health</div>
73+
</div>
74+
<div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
75+
<rect width="100%" height="100%"></rect>
76+
</svg>
77+
<div class="plot-label" title="Government">Government</div>
78+
</div>
79+
<div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
80+
<rect width="100%" height="100%"></rect>
81+
</svg>
82+
<div class="plot-label" title="Finance">Finance</div>
83+
</div>
84+
<div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
85+
<rect width="100%" height="100%"></rect>
86+
</svg>
87+
<div class="plot-label" title="Self-employed">Self-employed</div>
88+
</div>
89+
<div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
90+
<rect width="100%" height="100%"></rect>
91+
</svg>
92+
<div class="plot-label" title="Other">Other</div>
93+
</div>
8294
</div>
8395
</div>

‎test/output/colorLegendCategoricalReverse.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendCategoricalScheme.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendOrdinal.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendOrdinalScheme.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendOrdinalTickFormat.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

‎test/output/colorLegendOrdinalTickFormatFunction.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="plot" style="
1+
<div class="plot plot-palette" style="
22
--swatchWidth: 15px;
33
--swatchHeight: 15px;
44
">
@@ -16,9 +16,9 @@
1616
margin-right: 0.5em;
1717
}
1818

19-
.plot {
19+
.plot-palette {
2020
display: flex;
21-
align-items: center;
21+
align-items: flex-start;
2222
min-height: 33px;
2323
flex-wrap: wrap;
2424
}

0 commit comments

Comments
 (0)