rebase on main

Author: Fil

README.md

@@ -517,7 +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*.**tickFormat** - a format function for the labels
+* *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

src/legends.js

@@ -29,7 +29,7 @@ export function exposeLegends(scales, defaults = {}) {
 }
 
 function legendOptions({label, ticks, tickFormat} = {}, options = {}) {
-  return {label, ticks, tickFormat, ...options};
+  return {label, ticks, tickFormat, ...options, explicitLabel: options.label != null};
 }
 
 function legendColor(color, {

src/legends/swatches.js

@@ -74,7 +74,8 @@ function legendItems(scale, {
   columns,
   tickFormat,
   fontVariant = inferFontVariant(scale),
-  // TODO label,
+  explicitLabel,
+  label,
   swatchSize = 15,
   swatchWidth = swatchSize,
   swatchHeight = swatchSize,
@@ -93,6 +94,13 @@ function legendItems(scale, {
         --swatchHeight: ${+swatchHeight}px;
       `);
 
+  const palette = explicitLabel
+      ? swatches.call(div => div.append("p")
+          .text(label)
+          .style("font-weight", "bold"))
+        .append("div")
+      : swatches;
+
   let extraStyle;
 
   if (columns != null) {
@@ -113,7 +121,7 @@ function legendItems(scale, {
       }
     `;
 
-    swatches
+    palette
         .style("columns", columns)
       .selectAll()
       .data(scale.domain)
@@ -139,8 +147,7 @@ function legendItems(scale, {
       }
     `;
 
-    swatches
-      .selectAll()
+    palette.selectAll()
       .data(scale.domain)
       .join("span")
         .attr("class", `${className}-swatch`)

test/output/colorLegendCategoricalColumns.html

@@ -1,4 +1,7 @@
-<div class="plot" style="--swatchWidth: 15px; --swatchHeight: 15px; columns: 180px;">
+<div class="plot" style="
+        --swatchWidth: 15px;
+        --swatchHeight: 15px;
+      ">
   <style>
     .plot {
       font-family: system-ui, sans-serif;
@@ -32,34 +35,37 @@
       text-overflow: ellipsis;
     }
   </style>
-  <div class="plot-swatch" style="--color: #4e79a7;">
-    <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
-  </div>
-  <div class="plot-swatch" style="--color: #f28e2c;">
-    <div class="plot-label" title="Manufacturing">Manufacturing</div>
-  </div>
-  <div class="plot-swatch" style="--color: #e15759;">
-    <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
-  </div>
-  <div class="plot-swatch" style="--color: #76b7b2;">
-    <div class="plot-label" title="Business services">Business services</div>
-  </div>
-  <div class="plot-swatch" style="--color: #59a14f;">
-    <div class="plot-label" title="Construction">Construction</div>
-  </div>
-  <div class="plot-swatch" style="--color: #edc949;">
-    <div class="plot-label" title="Education and Health">Education and Health</div>
-  </div>
-  <div class="plot-swatch" style="--color: #af7aa1;">
-    <div class="plot-label" title="Government">Government</div>
-  </div>
-  <div class="plot-swatch" style="--color: #ff9da7;">
-    <div class="plot-label" title="Finance">Finance</div>
-  </div>
-  <div class="plot-swatch" style="--color: #9c755f;">
-    <div class="plot-label" title="Self-employed">Self-employed</div>
-  </div>
-  <div class="plot-swatch" style="--color: #bab0ab;">
-    <div class="plot-label" title="Other">Other</div>
+  <p style="font-weight: bold;">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>
+    </div>
+    <div class="plot-swatch" style="--color: #f28e2c;">
+      <div class="plot-label" title="Manufacturing">Manufacturing</div>
+    </div>
+    <div class="plot-swatch" style="--color: #e15759;">
+      <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
+    </div>
+    <div class="plot-swatch" style="--color: #76b7b2;">
+      <div class="plot-label" title="Business services">Business services</div>
+    </div>
+    <div class="plot-swatch" style="--color: #59a14f;">
+      <div class="plot-label" title="Construction">Construction</div>
+    </div>
+    <div class="plot-swatch" style="--color: #edc949;">
+      <div class="plot-label" title="Education and Health">Education and Health</div>
+    </div>
+    <div class="plot-swatch" style="--color: #af7aa1;">
+      <div class="plot-label" title="Government">Government</div>
+    </div>
+    <div class="plot-swatch" style="--color: #ff9da7;">
+      <div class="plot-label" title="Finance">Finance</div>
+    </div>
+    <div class="plot-swatch" style="--color: #9c755f;">
+      <div class="plot-label" title="Self-employed">Self-employed</div>
+    </div>
+    <div class="plot-swatch" style="--color: #bab0ab;">
+      <div class="plot-label" title="Other">Other</div>
+    </div>
   </div>
 </div>

test/plots/legend-color.js

@@ -21,7 +21,7 @@ export function colorLegendCategoricalColumns() {
         "Other"
       ]
     },
-    label: "Hello",
+    label: "Industry",
     columns: "180px"
   });
 }