diff --git a/stanzas/piechart/index.ts b/stanzas/piechart/index.ts index 3de26cc3..19cf03a9 100644 --- a/stanzas/piechart/index.ts +++ b/stanzas/piechart/index.ts @@ -78,15 +78,18 @@ export default class Piechart extends MetaStanza { const chart = chartG.selectAll("path").data(dataReady); - chart + const pieGroups = chart .enter() .append("path") .classed("pie-slice", true) .attr("d", arcGenerator) - .attr("fill", (d) => d.data[colorSym]) - .on("click", (_, d) => + .attr("fill", (d) => d.data[colorSym]); + + if (this.params["event-outgo_change_selected_nodes"]) { + pieGroups.on("click", (_, d) => emitSelectedEvent.apply(this, [d.data["__togostanza_id_dummy__"]]) ); + } if (showLegend) { if (!this.legend) { @@ -130,11 +133,9 @@ export default class Piechart extends MetaStanza { } handleEvent(event) { - const selectedNodes = event.detail; - const pieGroups = this._chartArea.selectAll(".pie-slice"); - pieGroups.classed("-selected", (d: Datum) => { - return selectedNodes.indexOf(d.data.__togostanza_id_dummy__) !== -1; - }); + if (this.params["event-income_change_selected_nodes"]) { + changeSelectedStyle.apply(this, [event.detail]); + } } } @@ -159,3 +160,10 @@ function emitSelectedEvent(this: Piechart, id: string | number) { }) ); } + +function changeSelectedStyle(this: Piechart, ids: Array) { + const pieGroups = this._chartArea.selectAll(".pie-slice"); + pieGroups.classed("-selected", (d: Datum) => { + return ids.indexOf(d.data.__togostanza_id_dummy__) !== -1; + }); +}