Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

label on color swatches #1885

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

label on color swatches #1885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c29ab9e
color swatches label
Fil Sep 29, 2023
09d47a9
Merge branch 'main' into fil/label-swatches-2
Fil Oct 12, 2023
5fd14c3
Merge branch 'main' into fil/label-swatches-2
Fil Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions src/legends/swatches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function legendItems(scale, options = {}, swatch) {
columns,
tickFormat,
fontVariant = inferFontVariant(scale),
// TODO label,
label = scale.label,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
Expand All @@ -88,10 +88,7 @@ function legendItems(scale, options = {}, swatch) {
className = maybeClassName(className);
tickFormat = inferTickFormat(scale.scale, scale.domain, undefined, tickFormat);

const swatches = create("div", context).attr(
"class",
`${className}-swatches ${className}-swatches-${columns != null ? "columns" : "wrap"}`
);
const swatches = create("div", context).attr("class", `${className}-swatches`);

let extraStyle;

Expand All @@ -111,7 +108,8 @@ function legendItems(scale, options = {}, swatch) {
text-overflow: ellipsis;
}`;

swatches
(label == null ? swatches : swatches.append("div"))
.classed(`${className}-swatches-columns`, true)
.style("columns", columns)
.selectAll()
.data(scale.domain)
Expand All @@ -125,17 +123,16 @@ function legendItems(scale, options = {}, swatch) {
} else {
extraStyle = `:where(.${className}-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}
:where(.${className}-swatches-wrap .${className}-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}`;

swatches
(label == null ? swatches : swatches.append("div"))
.classed(`${className}-swatches-wrap`, true)
.selectAll()
.data(scale.domain)
.enter()
Expand All @@ -147,6 +144,9 @@ function legendItems(scale, options = {}, swatch) {
});
}

if (label != null)
extraStyle += `\n.${className}-swatches-label {\n font-weight: bold;\n margin-bottom: 0.4em;\n}`;

return swatches
.call((div) =>
div.insert("style", "*").text(
Expand All @@ -162,6 +162,11 @@ function legendItems(scale, options = {}, swatch) {
${extraStyle}`
)
)
.call(
label == null
? (div) => div
: (div) => div.insert("div", "div").attr("class", `${className}-swatches-label`).text(label)
)
.style("margin-left", marginLeft ? `${+marginLeft}px` : null)
.style("width", width === undefined ? null : `${+width}px`)
.style("font-variant", impliedString(fontVariant, "normal"))
Expand Down
55 changes: 30 additions & 25 deletions test/output/athletesSortNationality.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches">
<style>
:where(.plot-swatches) {
font-family: system-ui, sans-serif;
Expand All @@ -14,37 +14,42 @@

:where(.plot-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

:where(.plot-swatches-wrap .plot-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}

.plot-swatches-label {
font-weight: bold;
margin-bottom: 0.4em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>IOA</span>
</style>
<div class="plot-swatches-label">nationality</div>
<div class="plot-swatches-wrap"><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>IOA</span></div>
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
:where(.plot) {
Expand Down
55 changes: 30 additions & 25 deletions test/output/athletesSortNullLimit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches">
<style>
:where(.plot-swatches) {
font-family: system-ui, sans-serif;
Expand All @@ -14,37 +14,42 @@

:where(.plot-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

:where(.plot-swatches-wrap .plot-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}

.plot-swatches-label {
font-weight: bold;
margin-bottom: 0.4em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>IOA</span>
</style>
<div class="plot-swatches-label">nationality</div>
<div class="plot-swatches-wrap"><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>IOA</span></div>
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
:where(.plot) {
Expand Down
4 changes: 1 addition & 3 deletions test/output/binFillFirstEmpty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,13 @@

:where(.plot-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

:where(.plot-swatches-wrap .plot-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
Expand Down
4 changes: 1 addition & 3 deletions test/output/caltrain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,13 @@

:where(.plot-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

:where(.plot-swatches-wrap .plot-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
Expand Down
4 changes: 1 addition & 3 deletions test/output/colorLegendCategorical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@

:where(.plot-swatches-wrap) {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

:where(.plot-swatches-wrap .plot-swatch) {
display: inline-flex;
align-items: center;
margin-right: 1em;
margin-bottom: 0.5em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
Expand Down
Loading
Loading