plotly.js: allow mixing predefined and custom modebar-buttons

andoks · andoks · commit 332f155d7c38 · 2022-11-21T22:44:53.000+01:00
Also test that passing both predefined button strings and custom button
structs works
diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts
@@ -875,6 +875,8 @@ export interface ModeBar {
     uirevision: number | string;
 }
 
+export type ModeBarButtonAny = ModeBarDefaultButtons | ModeBarButton;
+
 export type ModeBarDefaultButtons =
     | 'lasso2d'
     | 'select2d'
@@ -1617,15 +1619,15 @@ export interface Config {
     modeBarButtonsToRemove: ModeBarDefaultButtons[];
 
     /** add mode bar button using config objects (see ./components/modebar/buttons.js for list of arguments) */
-    modeBarButtonsToAdd: ModeBarDefaultButtons[] | ModeBarButton[];
+    modeBarButtonsToAdd: ModeBarButtonAny[];
 
     /**
      * fully custom mode bar buttons as nested array, where the outer
      * arrays represents button groups, and the inner arrays have
      * buttons config objects or names of default buttons
      * (see ./components/modebar/buttons.js for more info)
      */
-    modeBarButtons: Array<Array<ModeBarDefaultButtons | ModeBarButton>> | false;
+    modeBarButtons: ModeBarButtonAny[][] | false;
 
     /** add the plotly logo on the end of the mode bar */
     displaylogo: boolean;
diff --git a/types/plotly.js/test/index-tests.ts b/types/plotly.js/test/index-tests.ts
@@ -325,12 +325,28 @@ const graphDiv = '#test';
             ],
             ['toImage'],
         ],
+        // mix strings from ModeBarDefaultButtons and custom button added as ModeBarButton interface
         modeBarButtonsToAdd: [
             'togglespikelines',
             'togglehover',
             'hovercompare',
             'hoverclosest',
-            'v1hovermode'
+            'v1hovermode',
+            {
+                name: 'save',
+                title: 'Download plot data',
+                icon: {
+                    width: 857.1,
+                    height: 1000,
+                    path:
+                        'm214-7h429v214h-429v-214z m500 0h72v500q0 8-6 21t-11 20l-157 156q-5 6-19 12t-22 5v-232q0-22-15-38t-38-16h-322q-22 0-37 16t-16 38v232h-72v-714h72v232q0 22 16 38t37 ' +
+                        '16h465q22 0 38-16t15-38v-232z m-214 518v178q0 8-5 13t-13 5h-107q-7 0-13-5t-5-13v-178q0-8 5-13t13-5h107q7 0 13 5t5 13z m357-18v-518q0-22-15-38t-38-16h-750q-23 0-38 ' +
+                        '16t-16 38v750q0 22 16 38t38 16h517q23 0 50-12t42-26l156-157q16-15 27-42t11-49z',
+                    ascent: 850,
+                    transform: 'matrix(1 0 0 -1 0 850)',
+                },
+                click: (gd, ev) => console.log('Download data'),
+            }
         ],
         setBackground: 'transparent',
         watermark: false,
