diff --git a/src/legends.d.ts b/src/legends.d.ts index c07d6f3761..8476a16ed6 100644 --- a/src/legends.d.ts +++ b/src/legends.d.ts @@ -57,17 +57,53 @@ export interface RampLegendOptions { round?: ScaleOptions["round"]; } -export interface OpacityLegendOptions extends RampLegendOptions { +/** Options common to all legend types. */ +export interface BaseLegendOptions { + /** A textual label to place above the legend. */ + label?: string | null; + + /** + * How to format tick values sampled from the scale’s domain. This may be a + * function, which will be passed the tick value *t* and zero-based index *i* + * and must return the corresponding string. If the domain is numbers, the + * tick format may also be expressed as a [d3-format string][1]; or if the + * domain is dates, the tick format may also be expressed as a [d3-time-format + * string][2]. + * + * [1]: https://d3js.org/d3-format#locale_format + * [2]: https://d3js.org/d3-time-format#locale_format + */ + tickFormat?: ScaleOptions["tickFormat"]; + + /** + * The [CSS font-variant][1] for tick labels. For non-ordinal scales, or + * ordinal scales without an interval, this defaults to *tabular-nums*. + * + * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant + */ + fontVariant?: ScaleOptions["fontVariant"]; + + /** Custom styles to override Plot’s defaults. */ + style?: string | Partial | null; + + /** + * The generated element’s class name used for Plot’s default stylesheet; by + * default, a random string prefixed with "plot-". + */ + className?: string | null; +} + +export interface OpacityLegendOptions extends BaseLegendOptions, RampLegendOptions { /** The constant color the ramp; defaults to black. */ color?: string; } -export interface ColorLegendOptions extends SwatchesLegendOptions, RampLegendOptions { +export interface ColorLegendOptions extends BaseLegendOptions, SwatchesLegendOptions, RampLegendOptions { /** The desired opacity of the color swatches or ramp; defaults to 1. */ opacity?: number; } -export interface SymbolLegendOptions extends SwatchesLegendOptions { +export interface SymbolLegendOptions extends BaseLegendOptions, SwatchesLegendOptions { /** The desired fill color of symbols; use *color* for a redundant encoding. */ fill?: string; /** The desired fill opacity of symbols; defaults to 1. */ @@ -96,39 +132,6 @@ export interface LegendOptions extends ColorLegendOptions, SymbolLegendOptions, * cannot be changed. */ legend?: "ramp" | "swatches"; - - /** A textual label to place above the legend. */ - label?: string | null; - - /** - * How to format tick values sampled from the scale’s domain. This may be a - * function, which will be passed the tick value *t* and zero-based index *i* - * and must return the corresponding string. If the domain is numbers, the - * tick format may also be expressed as a [d3-format string][1]; or if the - * domain is dates, the tick format may also be expressed as a [d3-time-format - * string][2]. - * - * [1]: https://d3js.org/d3-format#locale_format - * [2]: https://d3js.org/d3-time-format#locale_format - */ - tickFormat?: ScaleOptions["tickFormat"]; - - /** - * The [CSS font-variant][1] for tick labels. For non-ordinal scales, or - * ordinal scales without an interval, this defaults to *tabular-nums*. - * - * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant - */ - fontVariant?: ScaleOptions["fontVariant"]; - - /** Custom styles to override Plot’s defaults. */ - style?: string | Partial | null; - - /** - * The generated element’s class name used for Plot’s default stylesheet; by - * default, a random string prefixed with “plot-”. - */ - className?: string | null; } /** Scale definitions and options for a standalone legend. */ diff --git a/test/output/colorLegendFontSize.html b/test/output/colorLegendFontSize.html new file mode 100644 index 0000000000..fd10602176 --- /dev/null +++ b/test/output/colorLegendFontSize.html @@ -0,0 +1,100 @@ +
+
+ + + A + + B + + C + + D + + E + + F + + G + + H + + I + + J +
+ + + + A + B + C + D + E + F + G + H + I + J + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/test/plots/legend-color.ts b/test/plots/legend-color.ts index 1f37cb543c..45a0bf49b8 100644 --- a/test/plots/legend-color.ts +++ b/test/plots/legend-color.ts @@ -67,6 +67,20 @@ test(function colorLegendOrdinalRampInline() { }); }); +test(function colorLegendFontSize() { + 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})] + }); +}); + test(function colorLegendOrdinalRampTickSize() { return Plot.legend({ color: {