Merge pull request #1748 from finos/d3fc-events

Fire `perspective-config-update` event on D3FC legend and axis events

packages/perspective-viewer-d3fc/src/js/axis/splitterLabels.js

@@ -32,7 +32,7 @@ export const splitterLabels = (settings) => {
             .style("color", (d) =>
                 coloured ? withoutOpacity(color(d.name)) : undefined
             )
-            .on("click", (_event, d) => {
+            .on("click", (event, d) => {
                 if (disabled) return;
 
                 if (alt) {
@@ -45,6 +45,11 @@ export const splitterLabels = (settings) => {
                     );
                 }
 
+                event.target
+                    .getRootNode()
+                    .host.closest("perspective-viewer")
+                    ?.dispatchEvent(new Event("perspective-config-update"));
+
                 redrawChart(selection);
             });
     };

packages/perspective-viewer-d3fc/src/js/legend/styling/draggableComponent.js

@@ -19,6 +19,7 @@ export function draggableComponent() {
 
     const draggable = (element) => {
         const node = element.node();
+        const viewer = node.getRootNode().host.closest("perspective-viewer");
         node.style.cursor = "move";
         if (settings.legend) {
             node.style.left = settings.legend.left;
@@ -39,12 +40,13 @@ export function draggableComponent() {
             };
             settings.legend = {...settings.legend, ...position};
 
-            if (isNodeInTopRight(node)) {
-                pinned = pinNodeToTopRight(node);
-                return;
-            }
+            pinned = isNodeInTopRight(node)
+                ? pinNodeToTopRight(node)
+                : unpinNodeFromTopRight(node, pinned);
+        });
 
-            pinned = unpinNodeFromTopRight(node, pinned);
+        drag.on("end", function (event) {
+            viewer?.dispatchEvent(new Event("perspective-config-update"));
         });
 
         element.call(drag);

packages/perspective-viewer-d3fc/test/js/integration/events.spec.js

@@ -0,0 +1,147 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2022, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const path = require("path");
+
+const utils = require("@finos/perspective-test");
+const simple_tests = require("@finos/perspective-viewer/test/js/simple_tests.js");
+
+const {withTemplate} = require("./simple-template");
+withTemplate("events", "Y Line");
+
+async function get_contents(page) {
+    return await page.evaluate(async () => {
+        const viewer = document
+            .querySelector(`perspective-viewer perspective-viewer-d3fc-yline`)
+            .shadowRoot.querySelector("svg");
+        return viewer.outerHTML || "MISSING";
+    });
+}
+
+utils.with_server({}, () => {
+    describe.page(
+        "events.html",
+        () => {
+            test.capture(
+                "perspective-config-update event is fired when series axis is changed",
+                async (page) => {
+                    // Await the viewer element to exist on the page
+                    const viewer = await page.$("perspective-viewer");
+                    await page.evaluate(async (viewer) => {
+                        // Await the table load
+                        await viewer.getTable();
+
+                        await viewer.restore({
+                            plugin: "Y Line",
+                            columns: ["Sales", "Profit"],
+                        });
+
+                        // Register a listener for `perspective-config-update` event
+                        window.__series_events__ = [];
+                        viewer.addEventListener(
+                            "perspective-config-update",
+                            (evt) => {
+                                window.__series_events__.push(evt);
+                            }
+                        );
+                    }, viewer);
+                    const axisLabel = (
+                        await page.waitForFunction(() =>
+                            document
+                                .querySelector("perspective-viewer-d3fc-yline")
+                                .shadowRoot.querySelector(
+                                    ".y-label .splitter-label"
+                                )
+                        )
+                    ).asElement();
+                    await axisLabel.click(axisLabel);
+
+                    const count = await page.evaluate(async (viewer) => {
+                        // Await the plugin rendering
+                        await viewer.flush();
+
+                        // Count the events;
+                        return window.__series_events__.length;
+                    }, viewer);
+
+                    // Expect 1 event
+                    expect(count).toEqual(1);
+
+                    // Return the chart contents
+                    return get_contents(page);
+                }
+            );
+
+            test.capture(
+                "perspective-config-update event is fired when legend position is changed",
+                async (page) => {
+                    // Await the viewer element to exist on the page
+                    const viewer = await page.$("perspective-viewer");
+                    await page.evaluate(async (viewer) => {
+                        // Await the table load
+                        await viewer.getTable();
+
+                        await viewer.restore({
+                            plugin: "Y Line",
+                            columns: ["Sales", "Profit"],
+                        });
+
+                        // Register a listener for `perspective-config-update` event
+                        window.__legend_events__ = [];
+                        viewer.addEventListener(
+                            "perspective-config-update",
+                            (evt) => {
+                                window.__legend_events__.push(evt);
+                            }
+                        );
+                    }, viewer);
+
+                    const legend = (
+                        await page.waitForFunction(() =>
+                            document
+                                .querySelector("perspective-viewer-d3fc-yline")
+                                .shadowRoot.querySelector(".legend-container")
+                        )
+                    ).asElement();
+
+                    const boundingBox = await legend.boundingBox();
+
+                    const start = {
+                        x: boundingBox.x + boundingBox.width / 2,
+                        y: boundingBox.y + boundingBox.height / 2,
+                    };
+
+                    const target = {
+                        x: start.x - 300,
+                        y: start.y,
+                    };
+
+                    await page.mouse.move(start.x, start.y);
+                    await page.mouse.down();
+                    await page.mouse.move(target.x, target.y);
+                    await page.mouse.up();
+
+                    const count = await page.evaluate(async (viewer) => {
+                        // Await the plugin rendering
+                        await viewer.flush();
+
+                        // Count the events;
+                        return window.__legend_events__.length;
+                    }, viewer);
+
+                    expect(count).toBeGreaterThan(0);
+
+                    // Return the chart contents
+                    return get_contents(page);
+                }
+            );
+        },
+        {reload_page: false, root: path.join(__dirname, "..", "..", "..")}
+    );
+});

packages/perspective-viewer-d3fc/test/results/results.json

@@ -143,5 +143,7 @@
     "sunburst_filters_filters_by_a_numeric_column": "10d1208b485425756fcc932229386b02",
     "sunburst_filters_filters_by_an_alpha_column": "10d1208b485425756fcc932229386b02",
     "sunburst_filters_filters_with__in__comparator": "10d1208b485425756fcc932229386b02",
-    "bar_rendering_bugs_correctly_render_when_a_bar_chart_has_non_equidistant_times_on_a_datetime_axis": "9e7617a454d83e328aaa3d25c8145a0e"
+    "bar_rendering_bugs_correctly_render_when_a_bar_chart_has_non_equidistant_times_on_a_datetime_axis": "9e7617a454d83e328aaa3d25c8145a0e",
+    "events_perspective-config-update_event_is_fired_when_series_axis_is_changed": "6bf8e592d3aa69e0c141a9caca01bae2",
+    "events_perspective-config-update_event_is_fired_when_legend_position_is_changed": "c07cb12b00fe628aba8751721f8f5498"
 }