legends show the label of ordinal scales

Fil · Fil · commit 7dc8d9b8e653 · 2022-01-19T18:40:42.000+01:00
diff --git a/README.md b/README.md
@@ -517,8 +517,8 @@ mylegend = myplot.legend("color")
 
 Categorical and ordinal color legends are rendered as swatches, unless *options*.**legend** is set to *ramp*. The swatches can be configured with the following options:
 
+* *options*.**label** - the scale’s label
 * *options*.**tickFormat** - a format function for the domain values
-* *options*.**label** - explicit label for the legend—by default, no label is shown
 * *options*.**swatchSize** - the size of the swatch (if square)
 * *options*.**swatchWidth** - the swatches’ width
 * *options*.**swatchHeight** - the swatches’ height
diff --git a/src/legends.js b/src/legends.js
@@ -39,7 +39,7 @@ export function exposeLegends(scales, defaults = {}) {
 }
 
 function legendOptions({label, ticks, tickFormat} = {}, options = {}) {
-  return {label, ticks, tickFormat, ...options, explicitLabel: options.label != null};
+  return {label, ticks, tickFormat, ...options};
 }
 
 function legendColor(color, {
diff --git a/src/legends/swatches.js b/src/legends/swatches.js
@@ -71,11 +71,10 @@ export function legendSymbols(symbol, {
 }
 
 function legendItems(scale, {
+  label = scale.label,
   columns,
   tickFormat,
   fontVariant = inferFontVariant(scale),
-  explicitLabel,
-  label,
   swatchSize = 15,
   swatchWidth = swatchSize,
   swatchHeight = swatchSize,
@@ -94,10 +93,11 @@ function legendItems(scale, {
         --swatchHeight: ${+swatchHeight}px;
       `);
 
-  const palette = explicitLabel
+  const palette = label
       ? swatches.call(div => div.append("p")
           .text(label)
-          .style("font-weight", "bold"))
+          .style("font-weight", "bold")
+          .style("width", "100%"))
         .append("div")
       : swatches;
 
diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html
@@ -35,7 +35,7 @@
       text-overflow: ellipsis;
     }
   </style>
-  <p style="font-weight: bold;">Industry</p>
+  <p style="font-weight: bold; width: 100%;">Industry</p>
   <div style="columns: 180px;">
     <div class="plot-swatch" style="--color: #4e79a7;">
       <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
diff --git a/test/output/decathlon.html b/test/output/decathlon.html
@@ -35,21 +35,23 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
-      </svg>BLS</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-6.873088769818877,0L6.873088769818877,0M0,6.873088769818877L0,-6.873088769818877"></path>
-      </svg>DDR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-4.869970345289333,-4.869970345289333L4.869970345289333,4.869970345289333M-4.869970345289333,4.869970345289333L4.869970345289333,-4.869970345289333"></path>
-      </svg>FRG</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,-5.442851285360659L4.713647482143115,2.7214256426803294L-4.713647482143115,2.7214256426803294Z"></path>
-      </svg>GBR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,4.768502950069832L0,-4.768502950069832M-4.129644692781513,-2.384251475034916L4.129644692781513,2.384251475034916M-4.129644692781513,2.384251475034916L4.129644692781513,-2.384251475034916"></path>
-      </svg>SOV</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M3.5341843560130535,3.5341843560130535L3.5341843560130535,-3.5341843560130535L-3.5341843560130535,-3.5341843560130535L-3.5341843560130535,3.5341843560130535Z"></path>
-      </svg>TCH</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,-4.994996508583107L4.994996508583107,0L0,4.994996508583107L-4.994996508583107,0Z"></path>
-      </svg>USA</span>
+    </style>
+    <p style="font-weight: bold; width: 100%;">Country</p>
+    <div><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
+        </svg>BLS</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-6.873088769818877,0L6.873088769818877,0M0,6.873088769818877L0,-6.873088769818877"></path>
+        </svg>DDR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-4.869970345289333,-4.869970345289333L4.869970345289333,4.869970345289333M-4.869970345289333,4.869970345289333L4.869970345289333,-4.869970345289333"></path>
+        </svg>FRG</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,-5.442851285360659L4.713647482143115,2.7214256426803294L-4.713647482143115,2.7214256426803294Z"></path>
+        </svg>GBR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,4.768502950069832L0,-4.768502950069832M-4.129644692781513,-2.384251475034916L4.129644692781513,2.384251475034916M-4.129644692781513,2.384251475034916L4.129644692781513,-2.384251475034916"></path>
+        </svg>SOV</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M3.5341843560130535,3.5341843560130535L3.5341843560130535,-3.5341843560130535L-3.5341843560130535,-3.5341843560130535L-3.5341843560130535,3.5341843560130535Z"></path>
+        </svg>TCH</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,-4.994996508583107L4.994996508583107,0L0,4.994996508583107L-4.994996508583107,0Z"></path>
+        </svg>USA</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/plots/caltrain.js b/test/plots/caltrain.js
@@ -12,7 +12,8 @@ export default async function() {
     color: {
       domain: "NLB",
       range: ["currentColor", "peru", "brown"],
-      legend: true
+      legend: true,
+      label: null
     },
     marks: [
       Plot.text([[1, "3"]], {
diff --git a/test/plots/legend-color.js b/test/plots/legend-color.js
@@ -8,6 +8,7 @@ export function colorLegendCategorical() {
 export function colorLegendCategoricalColumns() {
   return Plot.legend({
     color: {
+      label: "Industry",
       domain: [
         "Wholesale and Retail Trade",
         "Manufacturing",
@@ -21,7 +22,6 @@ export function colorLegendCategoricalColumns() {
         "Other"
       ]
     },
-    label: "Industry",
     columns: "180px"
   });
 }

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export function exposeLegends(scales, defaults = {}) {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`function legendOptions({label, ticks, tickFormat} = {}, options = {}) {`
`42`		`- return {label, ticks, tickFormat, ...options, explicitLabel: options.label != null};`
	`42`	`+ return {label, ticks, tickFormat, ...options};`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`function legendColor(color, {`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`text-overflow: ellipsis;`
`36`	`36`	`}`
`37`	`37`	`</style>`
`38`		`- <p style="font-weight: bold;">Industry</p>`
	`38`	`+ <p style="font-weight: bold; width: 100%;">Industry</p>`
`39`	`39`	`<div style="columns: 180px;">`
`40`	`40`	`<div class="plot-swatch" style="--color: #4e79a7;">`
`41`	`41`	`<div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>`