Skip to content

Commit abf5fdb

Browse files
FilFil
committed
legends show the label of ordinal scales
1 parent 9d9ba91 commit abf5fdb

39 files changed

+1094
-984
lines changed

‎README.md

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

572572
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:
573573

574-
* *options*.**tickFormat** - a format function for the labels
574+
* *options*.**label** - the scale’s label
575+
* *options*.**tickFormat** - a format function for the domain values
575576
* *options*.**swatchSize** - the size of the swatch (if square)
576577
* *options*.**swatchWidth** - the swatches’ width
577578
* *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, {

‎src/legends/swatches.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
8080
columns,
8181
tickFormat,
8282
fontVariant = inferFontVariant(scale),
83-
// TODO label,
83+
label = scale.label,
8484
swatchSize = 15,
8585
swatchWidth = swatchSize,
8686
swatchHeight = swatchSize,
@@ -100,10 +100,24 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
100100
--swatchHeight: ${+swatchHeight}px;
101101
`);
102102

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

105119
if (columns != null) {
106-
extraStyle = `
120+
extraStyle += `
107121
.${className}-swatch {
108122
display: flex;
109123
align-items: center;
@@ -120,7 +134,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
120134
}
121135
`;
122136

123-
swatches
137+
palette
124138
.style("columns", columns)
125139
.selectAll()
126140
.data(scale.domain)
@@ -133,10 +147,10 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
133147
.attr("title", tickFormat)
134148
.text(tickFormat));
135149
} else {
136-
extraStyle = `
137-
.${className} {
150+
extraStyle += `
151+
.${className}-palette {
138152
display: flex;
139-
align-items: center;
153+
align-items: flex-start;
140154
min-height: 33px;
141155
flex-wrap: wrap;
142156
}
@@ -147,8 +161,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
147161
}
148162
`;
149163

150-
swatches
151-
.selectAll()
164+
palette.selectAll()
152165
.data(scale.domain)
153166
.enter()
154167
.append("span")

‎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
}

0 commit comments

Comments
 (0)