Skip to content

fix legend option types; accept style and className on scale options #2421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Fil wants to merge 1 commit into
base: main
Choose a base branch
from
+153 −36
Open

fix legend option types; accept style and className on scale options #2421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 39 additions & 36 deletions src/legends.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<CSSStyleDeclaration> | 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. */
Expand Down Expand Up @@ -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<CSSStyleDeclaration> | 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. */
Expand Down
100 changes: 100 additions & 0 deletions test/output/colorLegendFontSize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions test/plots/legend-color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down