Skip to content

Commit 33d9bda

Browse files
jkusajkusa
committed
fix: fire config-update evnt on d3fc updates
1 parent 8cd9fa5 commit 33d9bda

File tree

4 files changed

+175
-24
lines changed

4 files changed

+175
-24
lines changed

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const splitterLabels = (settings) => {
3232
.style("color", (d) =>
3333
coloured ? withoutOpacity(color(d.name)) : undefined
3434
)
35-
.on("click", (_event, d) => {
35+
.on("click", (event, d) => {
3636
if (disabled) return;
3737

3838
if (alt) {
@@ -45,6 +45,11 @@ export const splitterLabels = (settings) => {
4545
);
4646
}
4747

48+
event.target
49+
.getRootNode()
50+
.host.closest("perspective-viewer")
51+
?.dispatchEvent(new Event("perspective-config-update"));
52+
4853
redrawChart(selection);
4954
});
5055
};

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export function draggableComponent() {
1919

2020
const draggable = (element) => {
2121
const node = element.node();
22+
const viewer = node.getRootNode().host.closest("perspective-viewer");
2223
node.style.cursor = "move";
2324
if (settings.legend) {
2425
node.style.left = settings.legend.left;
@@ -39,12 +40,11 @@ export function draggableComponent() {
3940
};
4041
settings.legend = {...settings.legend, ...position};
4142

42-
if (isNodeInTopRight(node)) {
43-
pinned = pinNodeToTopRight(node);
44-
return;
45-
}
43+
pinned = isNodeInTopRight(node)
44+
? pinNodeToTopRight(node)
45+
: unpinNodeFromTopRight(node, pinned);
4646

47-
pinned = unpinNodeFromTopRight(node, pinned);
47+
viewer?.dispatchEvent(new Event("perspective-config-update"));
4848
});
4949

5050
element.call(drag);

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

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/******************************************************************************
2+
*
3+
* Copyright (c) 2022, the Perspective Authors.
4+
*
5+
* This file is part of the Perspective library, distributed under the terms of
6+
* the Apache License 2.0. The full license can be found in the LICENSE file.
7+
*
8+
*/
9+
10+
const path = require("path");
11+
12+
const utils = require("@finos/perspective-test");
13+
const simple_tests = require("@finos/perspective-viewer/test/js/simple_tests.js");
14+
15+
const {withTemplate} = require("./simple-template");
16+
withTemplate("events", "Y Line");
17+
18+
async function get_contents(page) {
19+
return await page.evaluate(async () => {
20+
const viewer = document
21+
.querySelector(`perspective-viewer perspective-viewer-d3fc-yline`)
22+
.shadowRoot.querySelector("svg");
23+
return viewer.outerHTML || "MISSING";
24+
});
25+
}
26+
27+
utils.with_server({}, () => {
28+
describe.page(
29+
"events.html",
30+
() => {
31+
test.capture(
32+
"perspective-config-update event is fired when series axis is changed",
33+
async (page) => {
34+
// Await the viewer element to exist on the page
35+
const viewer = await page.$("perspective-viewer");
36+
await page.evaluate(async (viewer) => {
37+
// Await the table load
38+
await viewer.getTable();
39+
40+
viewer.restore({
41+
plugin: "Y Line",
42+
columns: ["Sales", "Profit"],
43+
});
44+
45+
// Register a listener for `perspective-config-update` event
46+
window.__series_events__ = [];
47+
viewer.addEventListener(
48+
"perspective-config-update",
49+
(evt) => {
50+
window.__series_events__.push(evt);
51+
}
52+
);
53+
}, viewer);
54+
const axisLabel = (
55+
await page.waitForFunction(() =>
56+
document
57+
.querySelector("perspective-viewer-d3fc-yline")
58+
.shadowRoot.querySelector(".y-label")
59+
)
60+
).asElement();
61+
await axisLabel.click(axisLabel);
62+
63+
const count = await page.evaluate(async (viewer) => {
64+
// Await the plugin rendering
65+
await viewer.flush();
66+
67+
// Count the events;
68+
return window.__series_events__.length;
69+
}, viewer);
70+
71+
// Expect 1 event
72+
expect(count).toEqual(1);
73+
74+
// Return the chart contents
75+
return get_contents(page);
76+
}
77+
);
78+
79+
test.capture(
80+
"perspective-config-update event is fired when legend position is changed",
81+
async (page) => {
82+
// Await the viewer element to exist on the page
83+
const viewer = await page.$("perspective-viewer");
84+
await page.evaluate(async (viewer) => {
85+
// Await the table load
86+
await viewer.getTable();
87+
88+
viewer.restore({
89+
plugin: "Y Line",
90+
columns: ["Sales", "Profit"],
91+
});
92+
93+
// Register a listener for `perspective-config-update` event
94+
window.__legend_events__ = [];
95+
viewer.addEventListener(
96+
"perspective-config-update",
97+
(evt) => {
98+
window.__legend_events__.push(evt);
99+
}
100+
);
101+
}, viewer);
102+
103+
const legend = (
104+
await page.waitForFunction(() =>
105+
document
106+
.querySelector("perspective-viewer-d3fc-yline")
107+
.shadowRoot.querySelector(".legend-container")
108+
)
109+
).asElement();
110+
111+
const boundingBox = await legend.boundingBox();
112+
113+
const start = {
114+
x: boundingBox.x + boundingBox.width / 2,
115+
y: boundingBox.y + boundingBox.height / 2,
116+
};
117+
118+
const target = {
119+
x: start.x - 300,
120+
y: start.y,
121+
};
122+
123+
await page.mouse.move(start.x, start.y);
124+
await page.mouse.down();
125+
await page.mouse.move(target.x, target.y);
126+
127+
const count = await page.evaluate(async (viewer) => {
128+
// Await the plugin rendering
129+
await viewer.flush();
130+
131+
// Count the events;
132+
return window.__legend_events__.length;
133+
}, viewer);
134+
135+
expect(count).toBeGreaterThan(0);
136+
137+
// Return the chart contents
138+
return get_contents(page);
139+
}
140+
);
141+
},
142+
{reload_page: false, root: path.join(__dirname, "..", "..", "..")}
143+
);
144+
});

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

+20-18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"__GIT_COMMIT__": "d776202ff728f808f1d07060e5ce73bb392402f1",
2+
"__GIT_COMMIT__": "9e69fd6a64d79303a423d5390869e1cc165d1fe6",
33
"area_shows_a_grid_without_any_settings_applied": "3852532b8ee6abba3373a10d41bb4df2",
44
"area_displays_visible_columns_": "919cc6f6c2a2f2ec13b90dfb60e1b7ef",
55
"area_pivot_by_a_row": "7495976cfed69cfe9db2b3fdc6ef4707",
@@ -91,19 +91,19 @@
9191
"heatmap_filters_filters_by_a_numeric_column": "b9e271668af3836baf5a5d51226910a3",
9292
"heatmap_filters_filters_by_an_alpha_column": "b9e271668af3836baf5a5d51226910a3",
9393
"heatmap_filters_filters_with__in__comparator": "b9e271668af3836baf5a5d51226910a3",
94-
"scatter_shows_a_grid_without_any_settings_applied": "9cbb9843a44b830cf4a324706a7bd713",
94+
"scatter_shows_a_grid_without_any_settings_applied": "afb75b167c5ea6be21c7b2121901a17f",
9595
"scatter_displays_visible_columns_": "0519cc65006ebd80de93362817a7ce4f",
96-
"scatter_pivot_by_a_row": "9cbb9843a44b830cf4a324706a7bd713",
97-
"scatter_pivot_by_two_rows": "9cbb9843a44b830cf4a324706a7bd713",
98-
"scatter_pivot_by_a_column": "9cbb9843a44b830cf4a324706a7bd713",
99-
"scatter_pivot_by_a_row_and_a_column": "9cbb9843a44b830cf4a324706a7bd713",
100-
"scatter_pivot_by_two_rows_and_two_columns": "9cbb9843a44b830cf4a324706a7bd713",
101-
"scatter_sort_by_a_hidden_column": "9cbb9843a44b830cf4a324706a7bd713",
102-
"scatter_sort_by_a_numeric_column": "9cbb9843a44b830cf4a324706a7bd713",
103-
"scatter_sort_by_an_alpha_column": "01fa363fa5ef2e1aa66a77ed87e9225f",
104-
"scatter_filters_filters_by_a_numeric_column": "37fd54838ea9dead5dc441bf1e62fbb9",
105-
"scatter_filters_filters_by_an_alpha_column": "2b3728cca2c7518bb10382dd7ef0d4fd",
106-
"scatter_filters_filters_with__in__comparator": "f44f7f144f9ee4827783a9b516f2a4e3",
96+
"scatter_pivot_by_a_row": "afb75b167c5ea6be21c7b2121901a17f",
97+
"scatter_pivot_by_two_rows": "afb75b167c5ea6be21c7b2121901a17f",
98+
"scatter_pivot_by_a_column": "afb75b167c5ea6be21c7b2121901a17f",
99+
"scatter_pivot_by_a_row_and_a_column": "afb75b167c5ea6be21c7b2121901a17f",
100+
"scatter_pivot_by_two_rows_and_two_columns": "afb75b167c5ea6be21c7b2121901a17f",
101+
"scatter_sort_by_a_hidden_column": "afb75b167c5ea6be21c7b2121901a17f",
102+
"scatter_sort_by_a_numeric_column": "afb75b167c5ea6be21c7b2121901a17f",
103+
"scatter_sort_by_an_alpha_column": "3a0440b79d5a068fc3e2c48b3d15a01e",
104+
"scatter_filters_filters_by_a_numeric_column": "adbc354df9b4f69db72160fcad7bde74",
105+
"scatter_filters_filters_by_an_alpha_column": "cf64a7ffdc6f150d1f535cf08679f052",
106+
"scatter_filters_filters_with__in__comparator": "16fbc02857ffd2df180274a19c51c4f2",
107107
"yscatter_shows_a_grid_without_any_settings_applied": "006aa96e87e006a01a0349f0c20ea27a",
108108
"yscatter_displays_visible_columns_": "0bff95a36d9f0a0029599bb7adcc6af8",
109109
"yscatter_pivot_by_a_row": "fb6504a26b1b859619a180b27d35f73b",
@@ -121,10 +121,10 @@
121121
"sunburst_pivot_by_two_rows": "38fe70a8f88a3e0df185f8775c88317d",
122122
"sunburst_pivot_by_a_row_and_a_column": "fa789a00c03e04567bd45a8451e7a00a",
123123
"sunburst_pivot_by_two_rows_and_two_columns": "e03658ff241f45837b9d61227bf023a4",
124-
"treemap_pivot_by_a_row": "7322fa73924e688662d36558a33ddb99",
125-
"treemap_pivot_by_two_rows": "ce30c9196e830d54d4960d4f9a53ad32",
126-
"treemap_pivot_by_a_row_and_a_column": "a9ee5c25d23fff12e57b7755ca310cb5",
127-
"treemap_pivot_by_two_rows_and_two_columns": "fe5616df5b45c5b0b2f86489f7a1dc22",
124+
"treemap_pivot_by_a_row": "d9e965d744906a2320148b73dc1fcb29",
125+
"treemap_pivot_by_two_rows": "28390c90695be1b38bd2a05a984dd242",
126+
"treemap_pivot_by_a_row_and_a_column": "a36877ce32fed64d1ae16807de27e9de",
127+
"treemap_pivot_by_two_rows_and_two_columns": "92203a8d4778c041836361b56ff39174",
128128
"treemap_shows_a_grid_without_any_settings_applied": "10d1208b485425756fcc932229386b02",
129129
"treemap_displays_visible_columns_": "10d1208b485425756fcc932229386b02",
130130
"treemap_pivot_by_a_column": "10d1208b485425756fcc932229386b02",
@@ -143,5 +143,7 @@
143143
"sunburst_filters_filters_by_a_numeric_column": "10d1208b485425756fcc932229386b02",
144144
"sunburst_filters_filters_by_an_alpha_column": "10d1208b485425756fcc932229386b02",
145145
"sunburst_filters_filters_with__in__comparator": "10d1208b485425756fcc932229386b02",
146-
"bar_rendering_bugs_correctly_render_when_a_bar_chart_has_non_equidistant_times_on_a_datetime_axis": "9e7617a454d83e328aaa3d25c8145a0e"
146+
"bar_rendering_bugs_correctly_render_when_a_bar_chart_has_non_equidistant_times_on_a_datetime_axis": "9e7617a454d83e328aaa3d25c8145a0e",
147+
"events_perspective-config-update_event_is_fired_when_series_axis_is_changed": "c07cb12b00fe628aba8751721f8f5498",
148+
"events_perspective-config-update_event_is_fired_when_legend_position_is_changed": "c07cb12b00fe628aba8751721f8f5498"
147149
}

0 commit comments

Comments
 (0)