From c29ab9e0ee913cef84585215bafa731d93b77570 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 29 Sep 2023 17:10:59 +0200 Subject: [PATCH] color swatches label --- src/legends/swatches.js | 25 +- test/output/athletesSortNationality.html | 55 +- test/output/athletesSortNullLimit.html | 55 +- test/output/binFillFirstEmpty.html | 4 +- test/output/caltrain.html | 4 +- test/output/colorLegendCategorical.html | 4 +- .../output/colorLegendCategoricalColumns.html | 108 +- .../output/colorLegendCategoricalReverse.html | 4 +- test/output/colorLegendCategoricalScheme.html | 4 +- test/output/colorLegendOpacity.html | 4 +- test/output/colorLegendOrdinal.html | 4 +- test/output/colorLegendOrdinalScheme.html | 4 +- test/output/colorLegendOrdinalTickFormat.html | 4 +- .../colorLegendOrdinalTickFormatFunction.html | 4 +- test/output/colorLegendQuantileSwatches.html | 39 +- test/output/colorSchemesOrdinal.html | 1000 +++++------------ test/output/decathlon.html | 43 +- test/output/energyProduction.html | 4 +- test/output/frameFillCategorical.html | 4 +- test/output/hexbinSymbol.html | 4 +- test/output/hexbinZ.html | 27 +- test/output/integerIntervalArea.html | 23 +- test/output/integerIntervalAreaZ.html | 4 +- test/output/liborProjectionsFacet.html | 4 +- test/output/likertSurvey.html | 35 +- test/output/penguinDensityZ.html | 27 +- test/output/penguinFacetDodgeIsland.html | 27 +- test/output/penguinFacetDodgeSymbol.html | 27 +- test/output/penguinSizeSymbols.html | 27 +- test/output/penguinSpeciesCheysson.html | 4 +- test/output/symbolLegendBasic.html | 4 +- test/output/symbolLegendColorFill.html | 4 +- test/output/symbolLegendColorStroke.html | 4 +- test/output/symbolLegendDifferentColor.html | 4 +- test/output/symbolLegendExplicitColor.html | 4 +- test/output/symbolLegendFill.html | 4 +- test/output/symbolLegendImplicitRange.html | 4 +- test/output/symbolLegendOpacityColor.html | 4 +- test/output/symbolLegendOpacityFill.html | 4 +- test/output/symbolLegendOpacityStroke.html | 4 +- test/output/symbolLegendStroke.html | 4 +- test/output/symbolSetFillColor.html | 4 +- test/output/symbolSetStrokeColor.html | 4 +- test/output/title.html | 27 +- test/output/trafficHorizon.html | 4 +- test/plots/bin-fill-first-empty.ts | 2 +- test/plots/caltrain.ts | 3 +- test/plots/energy-production.ts | 3 +- test/plots/hexbin-symbol.ts | 4 +- test/plots/penguin-species.ts | 3 +- 50 files changed, 597 insertions(+), 1083 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index e5876aa546..ccdbe9d964 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -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, @@ -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; @@ -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) @@ -125,17 +123,16 @@ function legendItems(scale, options = {}, swatch) { } else { extraStyle = `.${className}-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .${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() @@ -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( @@ -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")) diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html index 15732dce20..972f7df391 100644 --- a/test/output/athletesSortNationality.html +++ b/test/output/athletesSortNationality.html @@ -1,5 +1,5 @@
-
+
- - ESP - - KOR - - CAN - - MDA - - NZL - - AUS - - USA - - ETH - - BRN - - IOA + +
nationality
+
+ + ESP + + KOR + + CAN + + MDA + + NZL + + AUS + + USA + + ETH + + BRN + + IOA
+
- - ESP - - KOR - - CAN - - MDA - - NZL - - AUS - - USA - - ETH - - BRN - - IOA + +
nationality
+
+ + ESP + + KOR + + CAN + + MDA + + NZL + + AUS + + USA + + ETH + + BRN + + IOA
diff --git a/test/output/caltrain.html b/test/output/caltrain.html index c1774cbe73..c1de052148 100644 --- a/test/output/caltrain.html +++ b/test/output/caltrain.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html index 0f8bac3db6..5dda0ee422 100644 --- a/test/output/colorLegendCategorical.html +++ b/test/output/colorLegendCategorical.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html index 09021a270a..b8cdd5da53 100644 --- a/test/output/colorLegendCategoricalColumns.html +++ b/test/output/colorLegendCategoricalColumns.html @@ -1,4 +1,4 @@ -
+
-
- - -
Wholesale and Retail Trade
-
-
- - -
Manufacturing
-
-
- - -
Leisure and hospitality
-
-
- - -
Business services
-
-
- - -
Construction
-
-
- - -
Education and Health
-
-
- - -
Government
-
-
- - -
Finance
-
-
- - -
Self-employed
-
-
- - -
Other
+
Hello
+
+
+ + +
Wholesale and Retail Trade
+
+
+ + +
Manufacturing
+
+
+ + +
Leisure and hospitality
+
+
+ + +
Business services
+
+
+ + +
Construction
+
+
+ + +
Education and Health
+
+
+ + +
Government
+
+
+ + +
Finance
+
+
+ + +
Self-employed
+
+
+ + +
Other
+
\ No newline at end of file diff --git a/test/output/colorLegendCategoricalReverse.html b/test/output/colorLegendCategoricalReverse.html index 2b4dbe0e01..f879281973 100644 --- a/test/output/colorLegendCategoricalReverse.html +++ b/test/output/colorLegendCategoricalReverse.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendCategoricalScheme.html b/test/output/colorLegendCategoricalScheme.html index 418c90975a..2c46c58f29 100644 --- a/test/output/colorLegendCategoricalScheme.html +++ b/test/output/colorLegendCategoricalScheme.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendOpacity.html b/test/output/colorLegendOpacity.html index f9ad026403..9861651f04 100644 --- a/test/output/colorLegendOpacity.html +++ b/test/output/colorLegendOpacity.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendOrdinal.html b/test/output/colorLegendOrdinal.html index 16b576fe16..35b75b558c 100644 --- a/test/output/colorLegendOrdinal.html +++ b/test/output/colorLegendOrdinal.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendOrdinalScheme.html b/test/output/colorLegendOrdinalScheme.html index 8596015ddb..af5697def7 100644 --- a/test/output/colorLegendOrdinalScheme.html +++ b/test/output/colorLegendOrdinalScheme.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendOrdinalTickFormat.html b/test/output/colorLegendOrdinalTickFormat.html index cd251430e8..07aa2a56c0 100644 --- a/test/output/colorLegendOrdinalTickFormat.html +++ b/test/output/colorLegendOrdinalTickFormat.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendOrdinalTickFormatFunction.html b/test/output/colorLegendOrdinalTickFormatFunction.html index cd251430e8..07aa2a56c0 100644 --- a/test/output/colorLegendOrdinalTickFormatFunction.html +++ b/test/output/colorLegendOrdinalTickFormatFunction.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/colorLegendQuantileSwatches.html b/test/output/colorLegendQuantileSwatches.html index 5d0b0b8b61..54f03d6c47 100644 --- a/test/output/colorLegendQuantileSwatches.html +++ b/test/output/colorLegendQuantileSwatches.html @@ -1,4 +1,4 @@ -
+
- - 200 - - 800 - - 1,800 - - 3,201 - - 5,001 - - 7,201 + +
Inferno
+
+ + 200 + + 800 + + 1,800 + + 3,201 + + 5,001 + + 7,201
\ No newline at end of file diff --git a/test/output/colorSchemesOrdinal.html b/test/output/colorSchemesOrdinal.html index e82039a2a6..86e2f9372e 100644 --- a/test/output/colorSchemesOrdinal.html +++ b/test/output/colorSchemesOrdinal.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -43,15 +41,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -74,15 +70,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -109,15 +103,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -154,15 +146,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -211,15 +201,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -240,15 +228,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -271,15 +257,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -306,15 +290,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -351,15 +333,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -408,15 +388,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -437,15 +415,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -468,15 +444,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -503,15 +477,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -548,15 +520,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -605,15 +575,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -634,15 +602,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -665,15 +631,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -700,15 +664,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -745,15 +707,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -802,15 +762,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -831,15 +789,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -862,15 +818,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -897,15 +851,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -942,15 +894,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -999,15 +949,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1028,15 +976,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1059,15 +1005,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1094,15 +1038,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1139,15 +1081,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1196,15 +1136,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1225,15 +1163,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1256,15 +1192,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1291,15 +1225,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1336,15 +1268,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1393,15 +1323,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1422,15 +1350,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1453,15 +1379,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1488,15 +1412,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1533,15 +1455,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1590,15 +1510,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1619,15 +1537,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1650,15 +1566,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1685,15 +1599,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1730,15 +1642,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1787,15 +1697,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1816,15 +1724,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1847,15 +1753,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1882,15 +1786,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1927,15 +1829,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -1984,15 +1884,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2013,15 +1911,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2044,15 +1940,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2079,15 +1973,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2124,15 +2016,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2181,15 +2071,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2210,15 +2098,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2241,15 +2127,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2276,15 +2160,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2321,15 +2203,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2378,15 +2258,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2407,15 +2285,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2438,15 +2314,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2473,15 +2347,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2518,15 +2390,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2575,15 +2445,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2604,15 +2472,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2635,15 +2501,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2670,15 +2534,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2715,15 +2577,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2772,15 +2632,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2801,15 +2659,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2832,15 +2688,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2867,15 +2721,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2912,15 +2764,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2969,15 +2819,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -2998,15 +2846,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3029,15 +2875,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3064,15 +2908,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3109,15 +2951,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3166,15 +3006,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3195,15 +3033,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3226,15 +3062,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3261,15 +3095,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3306,15 +3138,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3363,15 +3193,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3392,15 +3220,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3423,15 +3249,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3458,15 +3282,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3503,15 +3325,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3560,15 +3380,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3589,15 +3407,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3620,15 +3436,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3655,15 +3469,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3700,15 +3512,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3757,15 +3567,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3786,15 +3594,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3817,15 +3623,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3852,15 +3656,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3897,15 +3699,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3954,15 +3754,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -3983,15 +3781,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4014,15 +3810,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4049,15 +3843,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4094,15 +3886,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4151,15 +3941,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4180,15 +3968,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4211,15 +3997,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4246,15 +4030,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4291,15 +4073,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4348,15 +4128,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4377,15 +4155,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4408,15 +4184,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4443,15 +4217,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4488,15 +4260,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4545,15 +4315,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4574,15 +4342,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4605,15 +4371,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4640,15 +4404,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4685,15 +4447,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4742,15 +4502,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4771,15 +4529,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4802,15 +4558,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4837,15 +4591,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4882,15 +4634,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4939,15 +4689,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4968,15 +4716,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -4999,15 +4745,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5034,15 +4778,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5079,15 +4821,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5136,15 +4876,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5165,15 +4903,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5196,15 +4932,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5231,15 +4965,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5276,15 +5008,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5333,15 +5063,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5362,15 +5090,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5393,15 +5119,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5428,15 +5152,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5473,15 +5195,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5530,15 +5250,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5559,15 +5277,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5590,15 +5306,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5625,15 +5339,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5670,15 +5382,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5727,15 +5437,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5756,15 +5464,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5787,15 +5493,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5822,15 +5526,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5867,15 +5569,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5924,15 +5624,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5953,15 +5651,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -5984,15 +5680,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6019,15 +5713,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6064,15 +5756,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6121,15 +5811,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6150,15 +5838,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6181,15 +5867,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6216,15 +5900,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6261,15 +5943,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6318,15 +5998,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6347,15 +6025,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6378,15 +6054,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6413,15 +6087,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6458,15 +6130,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6515,15 +6185,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6544,15 +6212,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6575,15 +6241,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6610,15 +6274,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6655,15 +6317,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6712,15 +6372,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6741,15 +6399,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6772,15 +6428,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6807,15 +6461,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6852,15 +6504,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6909,15 +6559,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6938,15 +6586,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -6969,15 +6615,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7004,15 +6648,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7049,15 +6691,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7106,15 +6746,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7135,15 +6773,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7166,15 +6802,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7201,15 +6835,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7246,15 +6878,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7303,15 +6933,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7332,15 +6960,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7363,15 +6989,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7398,15 +7022,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7443,15 +7065,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7500,15 +7120,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7529,15 +7147,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7560,15 +7176,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7595,15 +7209,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7640,15 +7252,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7697,15 +7307,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7726,15 +7334,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7757,15 +7363,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7792,15 +7396,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7837,15 +7439,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7894,15 +7494,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7923,15 +7521,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7954,15 +7550,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -7989,15 +7583,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8034,15 +7626,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8091,15 +7681,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8120,15 +7708,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8151,15 +7737,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8186,15 +7770,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8231,15 +7813,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8288,15 +7868,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8317,15 +7895,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8348,15 +7924,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8383,15 +7957,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8428,15 +8000,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8485,15 +8055,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8514,15 +8082,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8545,15 +8111,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8580,15 +8144,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8625,15 +8187,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8682,15 +8242,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8711,15 +8269,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8742,15 +8298,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8777,15 +8331,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8822,15 +8374,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8879,15 +8429,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8908,15 +8456,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8939,15 +8485,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -8974,15 +8518,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9019,15 +8561,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9076,15 +8616,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9105,15 +8643,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9136,15 +8672,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9171,15 +8705,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9216,15 +8748,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9273,15 +8803,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9302,15 +8830,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9333,15 +8859,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9368,15 +8892,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9413,15 +8935,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9470,15 +8990,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9499,15 +9017,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9530,15 +9046,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9565,15 +9079,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9610,15 +9122,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9667,15 +9177,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9696,15 +9204,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9727,15 +9233,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9762,15 +9266,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } @@ -9807,15 +9309,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/decathlon.html b/test/output/decathlon.html index e9f22f828f..41cd36cca1 100644 --- a/test/output/decathlon.html +++ b/test/output/decathlon.html @@ -1,5 +1,5 @@
-
+
- - BLS - - DDR - - FRG - - GBR - - SOV - - TCH - - USA + +
Country
+
+ + BLS + + DDR + + FRG + + GBR + + SOV + + TCH + + USA
diff --git a/test/output/frameFillCategorical.html b/test/output/frameFillCategorical.html index 5880ec9571..d6d0464c67 100644 --- a/test/output/frameFillCategorical.html +++ b/test/output/frameFillCategorical.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/hexbinSymbol.html b/test/output/hexbinSymbol.html index 4310c9fb62..9d2bc7c701 100644 --- a/test/output/hexbinSymbol.html +++ b/test/output/hexbinSymbol.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/hexbinZ.html b/test/output/hexbinZ.html index f4f35918ad..ddac6d3b53 100644 --- a/test/output/hexbinZ.html +++ b/test/output/hexbinZ.html @@ -1,5 +1,5 @@
-
+
- - Adelie - - Chinstrap - - Gentoo + +
species
+
+ + Adelie + + Chinstrap + + Gentoo
+
- - a - - b + +
type
+
+ + a + + b
diff --git a/test/output/liborProjectionsFacet.html b/test/output/liborProjectionsFacet.html index 1469444943..af8578afda 100644 --- a/test/output/liborProjectionsFacet.html +++ b/test/output/liborProjectionsFacet.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/likertSurvey.html b/test/output/likertSurvey.html index 69e3096bba..e72fc3a1f0 100644 --- a/test/output/likertSurvey.html +++ b/test/output/likertSurvey.html @@ -1,5 +1,5 @@
-
+
- - Strongly Disagree - - Disagree - - Neutral - - Agree - - Strongly Agree + +
Response
+
+ + Strongly Disagree + + Disagree + + Neutral + + Agree + + Strongly Agree
+
- - Adelie - - Chinstrap - - Gentoo + +
species
+
+ + Adelie + + Chinstrap + + Gentoo
+
- - Biscoe - - Dream - - Torgersen + +
island
+
+ + Biscoe + + Dream + + Torgersen
+
- - Adelie - - Chinstrap - - Gentoo + +
species
+
+ + Adelie + + Chinstrap + + Gentoo
+
- - Adelie - - Chinstrap - - Gentoo + +
species
+
+ + Adelie + + Chinstrap + + Gentoo
diff --git a/test/output/symbolLegendBasic.html b/test/output/symbolLegendBasic.html index 0027f02e6e..029cfe552c 100644 --- a/test/output/symbolLegendBasic.html +++ b/test/output/symbolLegendBasic.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendColorFill.html b/test/output/symbolLegendColorFill.html index a148c89022..288a36090a 100644 --- a/test/output/symbolLegendColorFill.html +++ b/test/output/symbolLegendColorFill.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendColorStroke.html b/test/output/symbolLegendColorStroke.html index 8ecaebdd92..8d56dd3c1a 100644 --- a/test/output/symbolLegendColorStroke.html +++ b/test/output/symbolLegendColorStroke.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendDifferentColor.html b/test/output/symbolLegendDifferentColor.html index 13ff64b6a2..e3490652a3 100644 --- a/test/output/symbolLegendDifferentColor.html +++ b/test/output/symbolLegendDifferentColor.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendExplicitColor.html b/test/output/symbolLegendExplicitColor.html index a148c89022..288a36090a 100644 --- a/test/output/symbolLegendExplicitColor.html +++ b/test/output/symbolLegendExplicitColor.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendFill.html b/test/output/symbolLegendFill.html index 791085a67e..8a8dc56b54 100644 --- a/test/output/symbolLegendFill.html +++ b/test/output/symbolLegendFill.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendImplicitRange.html b/test/output/symbolLegendImplicitRange.html index a148c89022..288a36090a 100644 --- a/test/output/symbolLegendImplicitRange.html +++ b/test/output/symbolLegendImplicitRange.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendOpacityColor.html b/test/output/symbolLegendOpacityColor.html index 7792fa1f4b..7903a3436d 100644 --- a/test/output/symbolLegendOpacityColor.html +++ b/test/output/symbolLegendOpacityColor.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendOpacityFill.html b/test/output/symbolLegendOpacityFill.html index b3df277a12..81438caf7e 100644 --- a/test/output/symbolLegendOpacityFill.html +++ b/test/output/symbolLegendOpacityFill.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendOpacityStroke.html b/test/output/symbolLegendOpacityStroke.html index 30c2fa9b2a..3ee4a47071 100644 --- a/test/output/symbolLegendOpacityStroke.html +++ b/test/output/symbolLegendOpacityStroke.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolLegendStroke.html b/test/output/symbolLegendStroke.html index 17446257e6..d0e04b5cf5 100644 --- a/test/output/symbolLegendStroke.html +++ b/test/output/symbolLegendStroke.html @@ -13,15 +13,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolSetFillColor.html b/test/output/symbolSetFillColor.html index 972bee3f07..f8f2c06b5c 100644 --- a/test/output/symbolSetFillColor.html +++ b/test/output/symbolSetFillColor.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/symbolSetStrokeColor.html b/test/output/symbolSetStrokeColor.html index 27c0f78d40..4e6c73a729 100644 --- a/test/output/symbolSetStrokeColor.html +++ b/test/output/symbolSetStrokeColor.html @@ -14,15 +14,13 @@ .plot-swatches-wrap { display: flex; - align-items: center; - min-height: 33px; flex-wrap: wrap; } .plot-swatches-wrap .plot-swatch { display: inline-flex; - align-items: center; margin-right: 1em; + margin-bottom: 0.5em; } diff --git a/test/output/title.html b/test/output/title.html index 42281deb04..fb1be119e6 100644 --- a/test/output/title.html +++ b/test/output/title.html @@ -1,7 +1,7 @@

A title about penguins

A subtitle about body_mass_g

-
+
- - Adelie - - Chinstrap - - Gentoo + +
species
+
+ + Adelie + + Chinstrap + + Gentoo
diff --git a/test/plots/bin-fill-first-empty.ts b/test/plots/bin-fill-first-empty.ts index 43e6587bb1..4be62060c3 100644 --- a/test/plots/bin-fill-first-empty.ts +++ b/test/plots/bin-fill-first-empty.ts @@ -19,5 +19,5 @@ export async function binFillFirstEmpty() { insetBottom: -0.5 // make empty bins visible } ) - ).plot({color: {legend: true}}); + ).plot({color: {legend: true, label: null}}); } diff --git a/test/plots/caltrain.ts b/test/plots/caltrain.ts index e53b76aa6e..c128546bf9 100644 --- a/test/plots/caltrain.ts +++ b/test/plots/caltrain.ts @@ -12,7 +12,8 @@ export async function caltrain() { color: { domain: "NLB", range: ["currentColor", "peru", "brown"], - legend: true + legend: true, + label: null }, marks: [ Plot.text([[1, "3"]], { diff --git a/test/plots/energy-production.ts b/test/plots/energy-production.ts index 3be99ecd1c..d453391cde 100644 --- a/test/plots/energy-production.ts +++ b/test/plots/energy-production.ts @@ -40,7 +40,8 @@ export async function energyProduction() { }, color: { tickFormat: (t) => types.get(t), - legend: true + legend: true, + label: null }, marks: [ Plot.rectY(energy, {x: "Year", interval: 1, y: "Value", fill: "Description", sort: {color: "height"}}), diff --git a/test/plots/hexbin-symbol.ts b/test/plots/hexbin-symbol.ts index 637d6af56e..35f557bfda 100644 --- a/test/plots/hexbin-symbol.ts +++ b/test/plots/hexbin-symbol.ts @@ -5,9 +5,7 @@ export async function hexbinSymbol() { const penguins = await d3.csv("data/penguins.csv", d3.autoType); return Plot.plot({ grid: true, - symbol: { - legend: true - }, + symbol: {legend: true, label: null}, marks: [Plot.dot(penguins, Plot.hexbin({r: "count"}, {symbol: "sex", x: "culmen_depth_mm", y: "culmen_length_mm"}))] }); } diff --git a/test/plots/penguin-species.ts b/test/plots/penguin-species.ts index c7eacdde31..3b598e5a0f 100644 --- a/test/plots/penguin-species.ts +++ b/test/plots/penguin-species.ts @@ -12,7 +12,8 @@ export async function penguinSpeciesCheysson() { "url(#grouped-12512014-3)", "url(#grouped-12512014-4)" ], - legend: true + legend: true, + label: null }, marks: [ // Based on https://observablehq.com/@tomshanley/cheysson-color-palettes