include LegendOptions (e.g., className, fontSize, r…) in the type for…

… scales
observablehq · Sep 24, 2024 · 205d654 · 205d654
1 parent e0bf09e
commit 205d654
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 11 deletions.
diff --git a/src/plot.d.ts b/src/plot.d.ts
@@ -4,6 +4,8 @@ import type {Data, MarkOptions, Markish} from "./mark.js";
 import type {ProjectionFactory, ProjectionImplementation, ProjectionName, ProjectionOptions} from "./projection.js";
 import type {Scale, ScaleDefaults, ScaleName, ScaleOptions} from "./scales.js";
 
+type ScaleLegendOptions = ScaleOptions & Omit<LegendOptions, "legend">;
+
 export interface PlotOptions extends ScaleDefaults {
   // dimensions
 
@@ -199,7 +201,7 @@ export interface PlotOptions extends ScaleDefaults {
    * If the *x* scale is present, and an *x*-axis mark is not included in marks,
    * an implicit *x*-axis will be rendered below other marks.
    */
-  x?: ScaleOptions;
+  x?: ScaleLegendOptions;
 
   /**
    * Options for the vertical position *y* scale. The *y* scale defaults to the
@@ -211,7 +213,7 @@ export interface PlotOptions extends ScaleDefaults {
    * If the *y* scale is present, and a *y*-axis mark is not included in marks,
    * an implicit *y*-axis will be rendered below other marks.
    */
-  y?: ScaleOptions;
+  y?: ScaleLegendOptions;
 
   /**
    * Options for the radius (size) *r* scale for dots or Point geos. The *r*
@@ -228,7 +230,7 @@ export interface PlotOptions extends ScaleDefaults {
    *
    * [1]: https://github.com/observablehq/plot/issues/236
    */
-  r?: ScaleOptions;
+  r?: ScaleLegendOptions;
 
   /**
    * Options for the *color* scale for fill or stroke. The *color* scale
@@ -244,7 +246,7 @@ export interface PlotOptions extends ScaleDefaults {
    * scale associated with a channel by specifying the value as a {value, scale}
    * object.
    */
-  color?: ScaleOptions;
+  color?: ScaleLegendOptions;
 
   /**
    * Options for the *opacity* scale for fill or stroke opacity. The *opacity*
@@ -257,7 +259,7 @@ export interface PlotOptions extends ScaleDefaults {
    * override the scale associated with a channel by specifying the value as a
    * {value, scale} object.
    */
-  opacity?: ScaleOptions;
+  opacity?: ScaleLegendOptions;
 
   /**
    * Options for the categorical *symbol* scale for dots. The *symbol* scale
@@ -270,7 +272,7 @@ export interface PlotOptions extends ScaleDefaults {
    * override the scale associated with a channel by specifying the value as a
    * {value, scale} object.
    */
-  symbol?: ScaleOptions;
+  symbol?: ScaleLegendOptions;
 
   /**
    * Options for the *length* scale for vectors. The *length* scale defaults to
@@ -279,7 +281,7 @@ export interface PlotOptions extends ScaleDefaults {
    * range is chosen such that the median of values has a length of 12 pixels,
    * but no value has a length greater than 60 pixels.
    */
-  length?: ScaleOptions;
+  length?: ScaleLegendOptions;
 
   /**
    * Options for projection; one of:
@@ -302,13 +304,13 @@ export interface PlotOptions extends ScaleDefaults {
    * Options for the horizontal facet position *fx* scale. If present, the *fx*
    * scale is always a *band* scale.
    */
-  fx?: ScaleOptions;
+  fx?: ScaleLegendOptions;
 
   /**
    * Options for the vertical facet position *fy* scale. If present, the *fy*
    * scale is always a *band* scale.
    */
-  fy?: ScaleOptions;
+  fy?: ScaleLegendOptions;
 
   /**
    * Options for faceting, including shorthand options for the *fx* and *fy*
@@ -385,12 +387,12 @@ export interface PlotFacetOptions {
   /**
    * Default axis grid for fx and fy scales; typically set to true to enable.
    */
-  grid?: ScaleOptions["grid"];
+  grid?: ScaleLegendOptions["grid"];
 
   /**
    * Default axis label for fx and fy scales; typically set to null to disable.
    */
-  label?: ScaleOptions["label"];
+  label?: ScaleLegendOptions["label"];
 }
 
 /**

diff --git a/test/output/colorLegendLarge.html b/test/output/colorLegendLarge.html
@@ -0,0 +1,47 @@
+<div class="legend-swatches legend-swatches-wrap" style="font-size: 16px;">
+  <style>
+    :where(.legend-swatches) {
+      font-family: system-ui, sans-serif;
+      font-size: 10px;
+      margin-bottom: 0.5em;
+    }
+
+    :where(.legend-swatch > svg) {
+      margin-right: 0.5em;
+      overflow: visible;
+    }
+
+    :where(.legend-swatches-wrap) {
+      display: flex;
+      align-items: center;
+      min-height: 33px;
+      flex-wrap: wrap;
+    }
+
+    :where(.legend-swatches-wrap .legend-swatch) {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 1em;
+    }
+  </style><span class="legend-swatch"><svg width="15" height="15" fill="rgb(110, 64, 170)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>A</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(191, 60, 175)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>B</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(254, 75, 131)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>C</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(255, 120, 71)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>D</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(226, 183, 47)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>E</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(175, 240, 91)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>F</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(82, 246, 103)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>G</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(29, 223, 163)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>H</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(35, 171, 216)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>I</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(76, 110, 219)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <rect width="100%" height="100%"></rect>
+    </svg>J</span>
+</div>
diff --git a/test/output/colorLegendLargeChart.html b/test/output/colorLegendLargeChart.html
@@ -0,0 +1,100 @@
+<figure class="plot-d6a7b5-figure" style="max-width: initial;">
+  <div class="legend-swatches legend-swatches-wrap" style="font-size: 16px;">
+    <style>
+      :where(.legend-swatches) {
+        font-family: system-ui, sans-serif;
+        font-size: 10px;
+        margin-bottom: 0.5em;
+      }
+
+      :where(.legend-swatch > svg) {
+        margin-right: 0.5em;
+        overflow: visible;
+      }
+
+      :where(.legend-swatches-wrap) {
+        display: flex;
+        align-items: center;
+        min-height: 33px;
+        flex-wrap: wrap;
+      }
+
+      :where(.legend-swatches-wrap .legend-swatch) {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 1em;
+      }
+    </style><span class="legend-swatch"><svg width="15" height="15" fill="rgb(110, 64, 170)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>A</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(191, 60, 175)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>B</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(254, 75, 131)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>C</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(255, 120, 71)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>D</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(226, 183, 47)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>E</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(175, 240, 91)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>F</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(82, 246, 103)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>G</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(29, 223, 163)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>H</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(35, 171, 216)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>I</span><span class="legend-swatch"><svg width="15" height="15" fill="rgb(76, 110, 219)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>J</span>
+  </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" style="font-size: 7px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+      :where(.plot) {
+        --plot-background: white;
+        display: block;
+        height: auto;
+        height: intrinsic;
+        max-width: 100%;
+      }
+
+      :where(.plot text),
+      :where(.plot tspan) {
+        white-space: pre;
+      }
+    </style>
+    <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(27,0)">
+      <path transform="translate(28,30)" d="M0,0L0,6"></path>
+      <path transform="translate(87,30)" d="M0,0L0,6"></path>
+      <path transform="translate(146,30)" d="M0,0L0,6"></path>
+      <path transform="translate(205,30)" d="M0,0L0,6"></path>
+      <path transform="translate(264,30)" d="M0,0L0,6"></path>
+      <path transform="translate(323,30)" d="M0,0L0,6"></path>
+      <path transform="translate(382,30)" d="M0,0L0,6"></path>
+      <path transform="translate(441,30)" d="M0,0L0,6"></path>
+      <path transform="translate(500,30)" d="M0,0L0,6"></path>
+      <path transform="translate(559,30)" d="M0,0L0,6"></path>
+    </g>
+    <g aria-label="x-axis tick label" transform="translate(27,9.5)">
+      <text y="0.71em" transform="translate(28,30)">A</text>
+      <text y="0.71em" transform="translate(87,30)">B</text>
+      <text y="0.71em" transform="translate(146,30)">C</text>
+      <text y="0.71em" transform="translate(205,30)">D</text>
+      <text y="0.71em" transform="translate(264,30)">E</text>
+      <text y="0.71em" transform="translate(323,30)">F</text>
+      <text y="0.71em" transform="translate(382,30)">G</text>
+      <text y="0.71em" transform="translate(441,30)">H</text>
+      <text y="0.71em" transform="translate(500,30)">I</text>
+      <text y="0.71em" transform="translate(559,30)">J</text>
+    </g>
+    <g aria-label="cell">
+      <rect x="28" width="53" y="0" height="30" fill="rgb(110, 64, 170)"></rect>
+      <rect x="87" width="53" y="0" height="30" fill="rgb(191, 60, 175)"></rect>
+      <rect x="146" width="53" y="0" height="30" fill="rgb(254, 75, 131)"></rect>
+      <rect x="205" width="53" y="0" height="30" fill="rgb(255, 120, 71)"></rect>
+      <rect x="264" width="53" y="0" height="30" fill="rgb(226, 183, 47)"></rect>
+      <rect x="323" width="53" y="0" height="30" fill="rgb(175, 240, 91)"></rect>
+      <rect x="382" width="53" y="0" height="30" fill="rgb(82, 246, 103)"></rect>
+      <rect x="441" width="53" y="0" height="30" fill="rgb(29, 223, 163)"></rect>
+      <rect x="500" width="53" y="0" height="30" fill="rgb(35, 171, 216)"></rect>
+      <rect x="559" width="53" y="0" height="30" fill="rgb(76, 110, 219)"></rect>
+    </g>
+  </svg>
+</figure>
diff --git a/test/plots/legend-color.ts b/test/plots/legend-color.ts
@@ -62,6 +62,28 @@ export function colorLegendOrdinalScheme() {
   return Plot.legend({color: {type: "ordinal", domain: "ABCDEFGHIJ", scheme: "rainbow"}});
 }
 
+export function colorLegendLarge() {
+  return Plot.legend({
+    color: {type: "ordinal", domain: "ABCDEFGHIJ", scheme: "rainbow"},
+    className: "legend",
+    style: {fontSize: "16px"}
+  });
+}
+
+export function colorLegendLargeChart() {
+  return Plot.plot({
+    color: {
+      legend: true,
+      type: "ordinal",
+      scheme: "rainbow",
+      className: "legend",
+      style: {fontSize: "16px"}
+    },
+    style: {fontSize: "7px"},
+    marks: [Plot.cell("ABCDEFGHIJ", {x: Plot.identity, fill: Plot.identity})]
+  });
+}
+
 export function colorLegendOrdinalSchemeRamp() {
   return Plot.legend({color: {type: "ordinal", domain: "ABCDEFGHIJ", scheme: "rainbow"}, legend: "ramp"});
 }