Merge pull request #2986 from finos/fix-2970

Fix line chart alt Y axis on zoom

Author: texodus

packages/perspective-viewer-d3fc/build.js

@@ -84,8 +84,6 @@ function add(builder, path) {
 async function compile_css() {
     fs.mkdirSync("dist/css", { recursive: true });
     const builder = new BuildCss("");
-    add(builder, "./series_colors.less");
-    add(builder, "./gradient_colors.less");
     add(builder, "./chart.less");
     fs.writeFileSync(
         "dist/css/perspective-viewer-d3fc.css",

packages/perspective-viewer-d3fc/src/less/chart.less

@@ -10,9 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-@import "./gradient_colors.less";
-@import "./series_colors.less";
-
 @mixin icon {
     background-repeat: no-repeat;
     background-color: var(--icon--color);
@@ -34,6 +31,17 @@
         padding: 12px;
         overflow: hidden;
 
+        &.yline {
+            .y-series:not(:first-child) .gridline-x {
+                display: none;
+            }
+        }
+
+        text {
+            // `font-family` does not apply to `<text>` nodes via inheritance.
+            font-family: var(--interface-monospace--font-family);
+        }
+
         &.heatmap,
         &.treemap {
             d3fc-group.cartesian-chart {
@@ -298,11 +306,13 @@
         }
 
         & .y-axis text,
+        & .y2-axis text,
         & .x-axis text {
             fill: var(--d3fc-axis-ticks--color, rgb(80, 80, 80));
             font-size: 11px;
         }
         & .y-axis path,
+        & .y2-axis path,
         & .x-axis path {
             stroke: var(--d3fc-axis--lines, rgb(180, 210, 225));
         }
@@ -350,10 +360,16 @@
         &.ybar .y-axis path,
         &.yline .y-axis path,
         &.xyline .y-axis path,
+        &.ybar .y2-axis path,
+        &.yline .y2-axis path,
+        &.xyline .y2-axis path,
         &.xyline .x-axis path,
         &.yarea .y-axis path,
         &.yscatter .y-axis path,
         &.xyscatter .y-axis path,
+        &.yarea .y2-axis path,
+        &.yscatter .y2-axis path,
+        &.xyscatter .y2-axis path,
         &.xyscatter .x-axis path,
         &.xbar .x-axis path {
             visibility: hidden;

packages/perspective-viewer-d3fc/src/less/gradient_colors.less

@@ -155,7 +155,7 @@ const chartFactory = (xAxis, yAxis, cartesian, canvas) => {
 
             // Render the axis
             y2AxisDataJoin(container, ["right"])
-                .attr("class", (d) => `y-axis ${d}-axis`)
+                .attr("class", (d) => `y2-axis ${d}-axis`)
                 .on("measure", function (event, d) {
                     const { width, height } = event.detail;
                     if (d === "left") {

packages/perspective-viewer-d3fc/src/less/series_colors.less

@@ -214,27 +214,31 @@ export const component = (settings: Settings): Component => {
         if (orient === "horizontal") {
             // x-axis may rotate labels and expand the available height
             if (group && group.length * 16 > width - 100) {
+                // Vertical
                 return {
-                    size: maxLength * 5 + 10,
+                    size: maxLength * 6.62 + 10,
                     rotation: 90,
                 };
             } else if (
                 group &&
                 group.length * (maxLength * 6 + 10) > width - 100
             ) {
+                // Angle
                 return {
-                    size: maxLength * 3 + 20,
+                    size: maxLength * 4 + 20,
                     rotation: 45,
                 };
             }
+
+            // Horizontal
             return {
                 size: 25,
                 rotation: 0,
             };
         } else {
             // y-axis size always based on label size
             return {
-                size: maxLength * 5 + 10,
+                size: maxLength * 6.62 + 10,
                 rotation: 0,
             };
         }

packages/perspective-viewer-d3fc/src/ts/axis/chartFactory.ts

@@ -61,9 +61,8 @@ function lineChart(container, settings: Settings) {
     const yAxis1: AxisFactoryContent = yAxisFactory(splitter.data());
 
     // No grid lines if splitting y-axis
-    const plotSeries = splitter.haveSplit()
-        ? series
-        : withGridLines(series, settings).orient("vertical");
+    const plotSeries = withGridLines(series, settings).orient("vertical");
+
     const chart = chartSvgFactory(xAxis, yAxis1)
         .axisSplitter(splitter)
         .plotArea(plotSeries);

packages/perspective-viewer-d3fc/src/ts/axis/ordinalAxis.ts

@@ -27,10 +27,10 @@ export const initialiseStyles = (
         };
 
         const computed = computedStyle(container);
-        styles["series"] = computed(`--d3fc-local-series`);
+        styles["series"] = computed(`--d3fc-series`);
         for (let i = 1; ; i++) {
             const key = `series-${i}`;
-            const color = computed(`--d3fc-local-${key}`);
+            const color = computed(`--d3fc-${key}`);
             if (!color) {
                 break;
             }
@@ -44,7 +44,7 @@ export const initialiseStyles = (
 
         const gradients = ["full", "positive", "negative"];
         gradients.forEach((g) => {
-            const gradient = computed(`--d3fc-local-${g}--gradient`);
+            const gradient = computed(`--d3fc-${g}--gradient`);
             styles.gradient[g] = parseGradient(gradient, styles.opacity);
         });
 

packages/perspective-viewer-d3fc/src/ts/charts/line.ts

@@ -79,4 +79,50 @@ test.describe("Line regressions", () => {
             "line-charts-denser-than-one-second-regression.txt",
         ]);
     });
+
+    test("Zoom on a chart with split Y axis renders the right axis", async ({
+        page,
+    }) => {
+        await page.goto("/tools/perspective-test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        await page.evaluate(async () => {
+            await document.querySelector("perspective-viewer")!.restore({
+                plugin: "Y Line",
+                plugin_config: {
+                    splitMainValues: ["Profit"],
+                },
+                settings: true,
+                theme: "Pro Light",
+                group_by: ["Order Date"],
+                columns: ["Sales", "Profit"],
+            });
+        });
+
+        await page.mouse.move(500, 500);
+        await page.mouse.wheel(0, -100);
+
+        const contents = await page.$(
+            "perspective-viewer-d3fc-yline .y2-axis.right-axis"
+        );
+
+        test.expect(await contents?.innerText()).toEqual(`−1,800
+−1,600
+−1,400
+−1,200
+−1,000
+−800
+−600
+−400
+−200
+0
+200
+400`);
+
+        await page.pause();
+    });
 });