Skip to content

Commit

Permalink
fix symbol set hint when fill is a constant currentColor (observableh…
Browse files Browse the repository at this point in the history 
…q#1830)

* when we specify fill: "currentColor", this.fill is undefined, but we still want to pass "currentColor" as a hint to the symbol scale

closes observablehq#1462

* materialize default stroke, too

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>
  • Loading branch information
@Fil @mbostock @chaichontat
2 people authored and chaichontat committed Jan 14, 2024
1 parent c185f75 commit 64f1bf5
Show file tree
Hide file tree
Showing 8 changed files with 364 additions and 2 deletions.
12 changes: 10 additions & 2 deletions src/marks/dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,16 @@ export class Dot extends Mark {
if (symbolChannel) {
const {fill: fillChannel, stroke: strokeChannel} = channels;
symbolChannel.hint = {
fill: fillChannel ? (fillChannel.value === symbolChannel.value ? "color" : "currentColor") : this.fill,
stroke: strokeChannel ? (strokeChannel.value === symbolChannel.value ? "color" : "currentColor") : this.stroke
fill: fillChannel
? fillChannel.value === symbolChannel.value
? "color"
: "currentColor"
: this.fill ?? "currentColor",
stroke: strokeChannel
? strokeChannel.value === symbolChannel.value
? "color"
: "currentColor"
: this.stroke ?? "none"
};
}
}
Expand Down
68 changes: 68 additions & 0 deletions test/marks/dot-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,3 +111,71 @@ it("dot(data, {stroke}) defaults strokeWidth to 1.5 if stroke is defined", () =>
assert.strictEqual(Plot.dot(undefined, {stroke: "x"}).strokeWidth, 1.5);
assert.strictEqual(Plot.dot(undefined, {stroke: null}).strokeWidth, undefined);
});

it("dot(data, {fill, symbol}) initializes the symbol hint for a constant fill", () => {
assert.deepStrictEqual(
Plot.dot([], {
fill: "currentColor",
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "currentColor", stroke: "none"}
);
assert.deepStrictEqual(
Plot.dot([], {
fill: "red",
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "red", stroke: "none"}
);
});

it("dot(data, {fill, symbol}) initializes the symbol hint for a channel fill", () => {
assert.deepStrictEqual(
Plot.dot([], {
fill: Plot.indexOf,
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "color", stroke: "none"}
);
assert.deepStrictEqual(
Plot.dot([], {
fill: Plot.identity,
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "currentColor", stroke: "none"}
);
});

it("dot(data, {stroke, symbol}) initializes the symbol hint for a constant stroke", () => {
assert.deepStrictEqual(
Plot.dot([], {
stroke: "currentColor",
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "none", stroke: "currentColor"}
);
assert.deepStrictEqual(
Plot.dot([], {
stroke: "red",
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "none", stroke: "red"}
);
});

it("dot(data, {stroke, symbol}) initializes the symbol hint for a channel stroke", () => {
assert.deepStrictEqual(
Plot.dot([], {
stroke: Plot.indexOf,
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "none", stroke: "color"}
);
assert.deepStrictEqual(
Plot.dot([], {
stroke: Plot.identity,
symbol: Plot.indexOf
}).initialize().channels.symbol.hint,
{fill: "none", stroke: "currentColor"}
);
});
43 changes: 43 additions & 0 deletions test/output/symbolSetFill.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions test/output/symbolSetFillColor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
margin-right: 0.5em;
overflow: visible;
}

.plot-swatches-wrap {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

.plot-swatches-wrap .plot-swatch {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
</style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(35, 23, 27)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" 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>0</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(57, 135, 249)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z"></path>
</svg>1</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(46, 229, 174)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"></path>
</svg>2</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(149, 251, 81)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M-3.988,-3.988h7.976v7.976h-7.976Z"></path>
</svg>3</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(254, 185, 39)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"></path>
</svg>4</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(229, 72, 19)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,-6.998L6.06,3.499L-6.06,3.499Z"></path>
</svg>5</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(144, 12, 0)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"></path>
</svg>6</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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
<path transform="translate(65,30)" d="M0,0L0,6"></path>
<path transform="translate(150,30)" d="M0,0L0,6"></path>
<path transform="translate(235,30)" d="M0,0L0,6"></path>
<path transform="translate(320,30)" d="M0,0L0,6"></path>
<path transform="translate(405,30)" d="M0,0L0,6"></path>
<path transform="translate(490,30)" d="M0,0L0,6"></path>
<path transform="translate(575,30)" d="M0,0L0,6"></path>
</g>
<g aria-label="x-axis tick label" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(65,30)">circle</text>
<text y="0.71em" transform="translate(150,30)">cross</text>
<text y="0.71em" transform="translate(235,30)">diamond</text>
<text y="0.71em" transform="translate(320,30)">square</text>
<text y="0.71em" transform="translate(405,30)">star</text>
<text y="0.71em" transform="translate(490,30)">triangle</text>
<text y="0.71em" transform="translate(575,30)">wye</text>
</g>
<g aria-label="dot" transform="translate(0.5,0.5)">
<path transform="translate(65,15)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0" fill="rgb(35, 23, 27)"></path>
<path transform="translate(150,15)" d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z" fill="rgb(57, 135, 249)"></path>
<path transform="translate(235,15)" d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z" fill="rgb(46, 229, 174)"></path>
<path transform="translate(320,15)" d="M-3.988,-3.988h7.976v7.976h-7.976Z" fill="rgb(149, 251, 81)"></path>
<path transform="translate(405,15)" d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z" fill="rgb(254, 185, 39)"></path>
<path transform="translate(490,15)" d="M0,-6.998L6.06,3.499L-6.06,3.499Z" fill="rgb(229, 72, 19)"></path>
<path transform="translate(575,15)" d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z" fill="rgb(144, 12, 0)"></path>
</g>
</svg>
</figure>
43 changes: 43 additions & 0 deletions test/output/symbolSetStroke.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions test/output/symbolSetStrokeColor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
margin-right: 0.5em;
overflow: visible;
}

.plot-swatches-wrap {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

.plot-swatches-wrap .plot-swatch {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
</style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(35, 23, 27)" stroke-opacity="1" stroke-width="1.5" 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>0</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(57, 135, 249)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
</svg>1</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(46, 229, 174)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
</svg>2</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(149, 251, 81)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,-5.443L4.714,2.721L-4.714,2.721Z"></path>
</svg>3</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(254, 185, 39)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"></path>
</svg>4</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(229, 72, 19)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"></path>
</svg>5</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(144, 12, 0)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"></path>
</svg>6</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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
<path transform="translate(65,30)" d="M0,0L0,6"></path>
<path transform="translate(150,30)" d="M0,0L0,6"></path>
<path transform="translate(235,30)" d="M0,0L0,6"></path>
<path transform="translate(320,30)" d="M0,0L0,6"></path>
<path transform="translate(405,30)" d="M0,0L0,6"></path>
<path transform="translate(490,30)" d="M0,0L0,6"></path>
<path transform="translate(575,30)" d="M0,0L0,6"></path>
</g>
<g aria-label="x-axis tick label" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(65,30)">circle</text>
<text y="0.71em" transform="translate(150,30)">cross</text>
<text y="0.71em" transform="translate(235,30)">diamond</text>
<text y="0.71em" transform="translate(320,30)">square</text>
<text y="0.71em" transform="translate(405,30)">star</text>
<text y="0.71em" transform="translate(490,30)">triangle</text>
<text y="0.71em" transform="translate(575,30)">wye</text>
</g>
<g aria-label="dot" fill="none" stroke-width="1.5" transform="translate(0.5,0.5)">
<path transform="translate(65,15)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0" stroke="rgb(35, 23, 27)"></path>
<path transform="translate(150,15)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873" stroke="rgb(57, 135, 249)"></path>
<path transform="translate(235,15)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87" stroke="rgb(46, 229, 174)"></path>
<path transform="translate(320,15)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z" stroke="rgb(149, 251, 81)"></path>
<path transform="translate(405,15)" d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384" stroke="rgb(254, 185, 39)"></path>
<path transform="translate(490,15)" d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z" stroke="rgb(229, 72, 19)"></path>
<path transform="translate(575,15)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z" stroke="rgb(144, 12, 0)"></path>
</g>
</svg>
</figure>
1 change: 1 addition & 0 deletions test/plots/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ export * from "./stargazers-hourly-group.js";
export * from "./stargazers-hourly.js";
export * from "./stargazers.js";
export * from "./stocks-index.js";
export * from "./symbol-set.js";
export * from "./text-overflow.js";
export * from "./this-is-just-to-say.js";
export * from "./time-axis.js";
Expand Down
Loading

0 comments on commit 64f1bf5

Please sign in to comment.