From f13f7b1ac636ba6f534df684221809bd762c6ebf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 14 Aug 2023 10:34:09 +0200 Subject: [PATCH 1/4] fix axis label being clipped with the clip plot option closes #1803 --- src/marks/axis.js | 3 +- test/output/aaplCloseClip.svg | 104 ++++++++++++++++++++++++++++++++++ test/plots/aapl-close.ts | 16 ++++++ 3 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 test/output/aaplCloseClip.svg diff --git a/src/marks/axis.js b/src/marks/axis.js index c7c7312d3f..b8c3cfa021 100644 --- a/src/marks/axis.js +++ b/src/marks/axis.js @@ -482,7 +482,7 @@ function gridDefaults({ } function labelOptions( - {fill, fillOpacity, fontFamily, fontSize, fontStyle, fontWeight, monospace, pointerEvents, shapeRendering}, + {fill, fillOpacity, fontFamily, fontSize, fontStyle, fontWeight, monospace, pointerEvents, shapeRendering, clip}, initializer ) { // Only propagate these options if constant. @@ -501,6 +501,7 @@ function labelOptions( monospace, pointerEvents, shapeRendering, + clip: clip === undefined ? false : clip, initializer }; } diff --git a/test/output/aaplCloseClip.svg b/test/output/aaplCloseClip.svg new file mode 100644 index 0000000000..d0ba49d691 --- /dev/null +++ b/test/output/aaplCloseClip.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + 20 + 40 + 60 + 80 + 100 + 120 + 140 + 160 + 180 + + + ↑ Close + + + + + + + + + + + + + + + + + + 4Jan + 11 + 18 + 25 + 1Feb + 8 + 15 + 22 + 1Mar + 8 + 15 + 22 + 29 + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts index f38b815fbb..2f5a1a03b9 100644 --- a/test/plots/aapl-close.ts +++ b/test/plots/aapl-close.ts @@ -15,6 +15,22 @@ export async function aaplClose() { }); } +export async function aaplCloseClip() { + const AAPL = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.plot({ + clip: true, + x: {domain: [new Date(2015, 0, 1), new Date(2015, 3, 1)]}, + y: { + grid: true + }, + marks: [ + Plot.areaY(AAPL, {x: "Date", y: "Close", fillOpacity: 0.1}), + Plot.lineY(AAPL, {x: "Date", y: "Close"}), + Plot.ruleY([0], {clip: false}) + ] + }); +} + export async function aaplCloseDataTicks() { const AAPL = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ From f1796381cf40553bd4a45b643bff5dbd1f4cd6e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 14 Aug 2023 11:00:17 +0200 Subject: [PATCH 2/4] utc test --- test/output/aaplCloseClip.svg | 56 +++++++++++++++++------------------ test/plots/aapl-close.ts | 2 +- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/test/output/aaplCloseClip.svg b/test/output/aaplCloseClip.svg index d0ba49d691..9b60fb1f6f 100644 --- a/test/output/aaplCloseClip.svg +++ b/test/output/aaplCloseClip.svg @@ -53,41 +53,41 @@ ↑ Close - - - - - - - - - - - - - + + + + + + + + + + + + + - 4Jan - 11 - 18 - 25 - 1Feb - 8 - 15 - 22 - 1Mar - 8 - 15 - 22 - 29 + 4Jan + 11 + 18 + 25 + 1Feb + 8 + 15 + 22 + 1Mar + 8 + 15 + 22 + 29 - + @@ -95,7 +95,7 @@ - + diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts index 2f5a1a03b9..4abb826041 100644 --- a/test/plots/aapl-close.ts +++ b/test/plots/aapl-close.ts @@ -19,7 +19,7 @@ export async function aaplCloseClip() { const AAPL = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ clip: true, - x: {domain: [new Date(2015, 0, 1), new Date(2015, 3, 1)]}, + x: {domain: [new Date(Date.UTC(2015, 0, 1)), new Date(Date.UTC(2015, 3, 1))]}, y: { grid: true }, From fca2b80d061d2d7db2ff0b11a8eb2f6a39dd0a29 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Mon, 14 Aug 2023 12:31:49 -0700 Subject: [PATCH 3/4] move default --- src/marks/axis.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/marks/axis.js b/src/marks/axis.js index b8c3cfa021..28c5180d06 100644 --- a/src/marks/axis.js +++ b/src/marks/axis.js @@ -482,7 +482,18 @@ function gridDefaults({ } function labelOptions( - {fill, fillOpacity, fontFamily, fontSize, fontStyle, fontWeight, monospace, pointerEvents, shapeRendering, clip}, + { + fill, + fillOpacity, + fontFamily, + fontSize, + fontStyle, + fontWeight, + monospace, + pointerEvents, + shapeRendering, + clip = false + }, initializer ) { // Only propagate these options if constant. @@ -501,7 +512,7 @@ function labelOptions( monospace, pointerEvents, shapeRendering, - clip: clip === undefined ? false : clip, + clip, initializer }; } From 8eb1ab5e87d84f394c0265c70a251e6bc313bbb3 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Mon, 14 Aug 2023 12:32:39 -0700 Subject: [PATCH 4/4] style --- test/plots/aapl-close.ts | 44 ++++++++++++++++++---------------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts index 4abb826041..21595c72a0 100644 --- a/test/plots/aapl-close.ts +++ b/test/plots/aapl-close.ts @@ -2,68 +2,64 @@ import * as Plot from "@observablehq/plot"; import * as d3 from "d3"; export async function aaplClose() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ - y: { - grid: true - }, + y: {grid: true}, marks: [ - Plot.areaY(AAPL, {x: "Date", y: "Close", fillOpacity: 0.1}), - Plot.lineY(AAPL, {x: "Date", y: "Close"}), + Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}), + Plot.lineY(aapl, {x: "Date", y: "Close"}), Plot.ruleY([0]) ] }); } export async function aaplCloseClip() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ clip: true, x: {domain: [new Date(Date.UTC(2015, 0, 1)), new Date(Date.UTC(2015, 3, 1))]}, - y: { - grid: true - }, + y: {grid: true}, marks: [ - Plot.areaY(AAPL, {x: "Date", y: "Close", fillOpacity: 0.1}), - Plot.lineY(AAPL, {x: "Date", y: "Close"}), + Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}), + Plot.lineY(aapl, {x: "Date", y: "Close"}), Plot.ruleY([0], {clip: false}) ] }); } export async function aaplCloseDataTicks() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ - marks: [Plot.axisY(d3.ticks(0, 200, 10), {anchor: "left"}), Plot.lineY(AAPL, {x: "Date", y: "Close"})] + marks: [Plot.axisY(d3.ticks(0, 200, 10), {anchor: "left"}), Plot.lineY(aapl, {x: "Date", y: "Close"})] }); } export async function aaplCloseImplicitGrid() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.plot({ y: {grid: true}, // appears even though there’s an explicit axis - marks: [Plot.axisY({anchor: "left"}), Plot.lineY(AAPL, {x: "Date", y: "Close"})] + marks: [Plot.axisY({anchor: "left"}), Plot.lineY(aapl, {x: "Date", y: "Close"})] }); } export async function aaplCloseGridColor() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: "red"}}); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: "red"}}); } export async function aaplCloseGridInterval() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "3 months"}}); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({x: {grid: "3 months"}}); } export async function aaplCloseGridIntervalName() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "month"}}); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({x: {grid: "month"}}); } export async function aaplCloseGridIterable() { - const AAPL = await d3.csv("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}}); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}}); } export async function aaplCloseNormalize() {