🤖 Merge PR DefinitelyTyped#48963 [plotly.js] Update to include sunburst specific properties and sunburstclick event by @LittleMikeDev

Author: Little Mike

types/plotly.js/index.d.ts

@@ -208,6 +208,30 @@ export interface SliderEndEvent {
     step: SliderStep;
 }
 
+export interface SunburstClickEvent {
+    event: MouseEvent;
+    nextLevel: string;
+    points: SunburstPlotDatum[];
+}
+
+export interface SunburstPlotDatum {
+    color: number;
+    curveNumber: number;
+    data: Data;
+    entry: string;
+    fullData: Data;
+    hovertext: string;
+    id: string;
+    label: string;
+    parent: string;
+    percentEntry: number;
+    percentParent: number;
+    percentRoot: number;
+    pointNumber: number;
+    root: string;
+    value: number;
+}
+
 export interface BeforePlotEvent {
     data: Data[];
     layout: Partial<Layout>;
@@ -225,6 +249,7 @@ export interface PlotlyHTMLElement extends HTMLElement {
     on(event: 'plotly_sliderchange', callback: (event: SliderChangeEvent) => void): void;
     on(event: 'plotly_sliderend', callback: (event: SliderEndEvent) => void): void;
     on(event: 'plotly_sliderstart', callback: (event: SliderStartEvent) => void): void;
+    on(event: 'plotly_sunburstclick', callback: (event: SunburstClickEvent) => void): void;
     on(event: 'plotly_event', callback: (data: any) => void): void;
     on(event: 'plotly_beforeplot', callback: (event: BeforePlotEvent) => boolean): void;
     on(
@@ -1244,6 +1269,8 @@ export interface PlotData {
     }>;
     title: Partial<DataTitle>;
     branchvalues: 'total' | 'remainder';
+    ids: string[];
+    level: string;
 }
 
 /**

types/plotly.js/test/index-tests.ts

@@ -723,3 +723,31 @@ function rand() {
 
     myPlot.removeAllListeners('plotly_restyle');
 })();
+//////////////////////////////////////////////////////////////////////
+
+//////////////////////////////////////////////////////////////////////
+// Sunburst specific properties and events
+(async () => {
+    const sunburst = await newPlot(graphDiv, [
+        {
+            type: "sunburst",
+            ids: ["root", "child1", "child2"],
+            branchvalues: "total",
+            level: "child1",
+            parents: ["", "root", "root"],
+        },
+    ]);
+
+    sunburst.on('plotly_sunburstclick', (event) => {
+        console.log(`Clicked button ${event.event.button} to navigate to ${event.nextLevel}`);
+
+        const point = event.points[0];
+        console.log(`Clicked id ${point.id} with label ${point.label} and parent label ${point.parent}`);
+        console.log(`Point is number ${point.pointNumber} on trace ${point.curveNumber}`);
+        console.log(`Click happened while at level *labelled* ${point.entry}, and root *labelled* ${point.root}`);
+        console.log(`Point has value ${point.value}`);
+        console.log(`Point takes up proportions of (previous level, parent, root): (${point.percentEntry}, ${point.percentParent}, ${point.percentRoot})`);
+        console.log(`Colored ${point.color} and hover ${point.hovertext}`);
+        console.log(`Can access trace data ${point.data.name} and full data ${point.fullData.name}`);
+    });
+})();