Skip to content

Add margin support to ordinal legend #1090

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

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

Add margin support to ordinal legend #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
da3a3e6
Add support for margin to ordinal color legend.
dgwyer Oct 11, 2022
97bc43c
added pixel default for margin bottom
dgwyer Oct 12, 2022
0ddd696
removed prettier script in package.json
dgwyer Oct 12, 2022
32e26ed
fixed prettier linting issue
dgwyer Oct 13, 2022
db49103
Merge branch 'observablehq:main' into feature/add-margin-support-to-o…
dgwyer Oct 14, 2022
b7ffeb3
update branch to push changes
dgwyer Oct 14, 2022
9a19a48
reverting changes
dgwyer Oct 14, 2022
4d6a7c2
update prettier changes
dgwyer Oct 14, 2022
40ba5c5
updated default bottom margin
dgwyer Oct 17, 2022
e9503e0
minimize churn by keeping the same defaults
Fil Oct 17, 2022
e76f1a8
Merge branch 'main' into dgwyer/add-margin-support-to-ordinal-legend
Fil Sep 29, 2023
f9c4716
inline style
Fil Sep 29, 2023
e55f44d
Merge branch 'main' into dgwyer/add-margin-support-to-ordinal-legend
Fil Oct 2, 2023
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
9 changes: 7 additions & 2 deletions src/legends/swatches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ function legendItems(scale, options = {}, swatch) {
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0,
marginTop,
marginBottom,
marginLeft,
marginRight,
className,
style,
width
Expand Down Expand Up @@ -153,7 +156,6 @@ function legendItems(scale, options = {}, swatch) {
`.${className}-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}
.${className}-swatch > svg {
margin-right: 0.5em;
Expand All @@ -162,6 +164,9 @@ function legendItems(scale, options = {}, swatch) {
${extraStyle}`
)
)
.style("margin-top", marginTop ? `${+marginTop}px` : null)
.style("margin-right", marginRight ? `${+marginRight}px` : null)
.style("margin-bottom", `${marginBottom === undefined ? "0.5em" : `${+marginBottom}px`}`)
.style("margin-left", marginLeft ? `${+marginLeft}px` : null)
.style("width", width === undefined ? null : `${+width}px`)
.style("font-variant", impliedString(fontVariant, "normal"))
Expand Down
3 changes: 1 addition & 2 deletions test/output/athletesSortNationality.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/athletesSortNullLimit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/binFillFirstEmpty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/caltrain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendCategorical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendCategoricalColumns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-columns" style="columns: 180px;">
<div class="plot-swatches plot-swatches-columns" style="columns: 180px; margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendCategoricalReverse.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendCategoricalScheme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendOpacity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendOrdinal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendOrdinalScheme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendOrdinalTickFormat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendOrdinalTickFormatFunction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
3 changes: 1 addition & 2 deletions test/output/colorLegendQuantileSwatches.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="plot-swatches plot-swatches-wrap" style="font-variant: tabular-nums;">
<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em; font-variant: tabular-nums;">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
Expand Down
Loading