svelte-plotly.js 0.1.5 → 0.2.0

package/Plot.svelte

@@ -1,8 +1,8 @@
 <script context="module">export {};
 </script>
 
-<script>import { onMount, onDestroy } from 'svelte';
-import { debounce as debouncify } from 'lodash';
+<script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+import { debounce as debouncify } from 'lodash-es';
 const browser = typeof window === 'object';
 const nextFrame = browser ? requestAnimationFrame : () => void 0;
 async function loadPlotly() {
@@ -16,6 +16,46 @@ async function loadPlotly() {
 }
 const DEFAULT_WIDTH = 500;
 const DEFAULT_HEIGHT = 300;
+const events = {
+    plotly_afterexport: 'afterExport',
+    plotly_afterplot: 'afterPlot',
+    plotly_animated: 'animated',
+    plotly_animating: 'animating',
+    plotly_animatingframe: 'animatingFrame',
+    plotly_animationinterrupted: 'animationInterrupted',
+    plotly_autosize: 'autoSize',
+    plotly_beforeexport: 'beforeExport',
+    plotly_beforehover: 'beforeHover',
+    plotly_beforeplot: 'beforePlot',
+    plotly_buttonclicked: 'buttonClicked',
+    plotly_click: 'click',
+    plotly_clickannotation: 'clickAnnotation',
+    plotly_deselect: 'deselect',
+    plotly_doubleclick: 'doubleClick',
+    plotly_framework: 'framework',
+    plotly_hover: 'hover',
+    plotly_legendclick: 'legendClick',
+    plotly_legenddoubleclick: 'legendDoubleClick',
+    plotly_react: 'react',
+    plotly_redraw: 'redraw',
+    plotly_relayout: 'relayout',
+    plotly_relayouting: 'relayouting',
+    plotly_restyle: 'restyle',
+    plotly_selected: 'selected',
+    plotly_selecting: 'selecting',
+    plotly_sliderchange: 'sliderChange',
+    plotly_sliderend: 'sliderEnd',
+    plotly_sliderstart: 'sliderStart',
+    plotly_sunburstclick: 'sunburstClick',
+    plotly_transitioned: 'transitioned',
+    plotly_transitioning: 'transitioning',
+    plotly_transitioninterrupted: 'transitionInterrupted',
+    plotly_unhover: 'unhover',
+    plotly_update: 'update',
+    plotly_webglcontextlost: 'webGLContextLost',
+    // TODO add all plotly_${traceType}click
+};
+const dispatch = createEventDispatcher();
 // bind props
 export let element = undefined;
 export let plot = undefined;
@@ -31,11 +71,12 @@ export { className as class };
 // set up
 onMount(async () => {
     window.global = window;
-    loadPlotly();
+    await loadPlotly();
 });
 // state props
 let datarevision = 0;
 let previousLib = libPlotly;
+let previousPlot = plot;
 let width = DEFAULT_WIDTH;
 let height = DEFAULT_HEIGHT;
 // updates
@@ -46,11 +87,20 @@ $: layout_ = { datarevision, width, height, ...layout };
 $: config_ = { displaylogo: false, ...config };
 $: draw(libPlotly, element, data, layout_, config_);
 $: {
-    if (element && previousLib !== libPlotly)
+    if (element && previousLib !== libPlotly) {
         previousLib?.purge(element);
+        plot = undefined;
+    }
     previousLib = libPlotly;
     loadPlotly();
 }
+$: if (previousPlot !== plot) {
+    for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
+        previousPlot?.removeAllListeners?.(plotlyEvent);
+        plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
+    }
+    previousPlot = plot;
+}
 const drawUndebounced = (lib, e, d, l, c) => {
     if (e)
         lib?.react(e, d, l, c).then(p => (plot = p));

package/Plot.svelte.d.ts

@@ -1,11 +1,21 @@
+/// <reference types="lodash" />
 import { SvelteComponentTyped } from "svelte";
-import type { Data, Layout, Config, PlotlyHTMLElement } from 'plotly.js';
-export type { Data, Layout, Config, PlotlyHTMLElement };
+import type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderEndEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent } from 'plotly.js';
+export type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent };
 export declare type FillParent = boolean | 'width' | 'height';
-import type { DebounceSettings } from 'lodash';
+import type { DebounceSettings } from 'lodash-es';
 export interface DebounceOptions extends DebounceSettings {
     wait: number;
 }
+export interface ButtonClickedEvent {
+    menu: any;
+    button: any;
+    active: any;
+}
+export interface PlotUpdateEvent {
+    data: Data;
+    layout: Layout;
+}
 declare const __propDef: {
     props: {
         element?: (null | undefined) | HTMLDivElement;
@@ -18,10 +28,46 @@ declare const __propDef: {
         debounce?: number | DebounceOptions | undefined;
         class?: string | undefined;
     };
+    slots: {};
+    getters: {};
     events: {
-        [evt: string]: CustomEvent<any>;
+        afterExport: undefined;
+        afterPlot: undefined;
+        animated: undefined;
+        animating: undefined;
+        animatingFrame: FrameAnimationEvent;
+        animationInterrupted: undefined;
+        autoSize: undefined;
+        beforeExport: undefined;
+        beforeHover: PlotMouseEvent;
+        beforePlot: BeforePlotEvent;
+        buttonClicked: ButtonClickedEvent;
+        click: PlotMouseEvent;
+        clickAnnotation: ClickAnnotationEvent;
+        deselect: undefined;
+        doubleClick: undefined;
+        framework: undefined;
+        hover: PlotMouseEvent;
+        legendClick: LegendClickEvent;
+        legendDoubleClick: LegendClickEvent;
+        react: PlotUpdateEvent;
+        redraw: undefined;
+        relayout: PlotRelayoutEvent;
+        relayouting: PlotRelayoutEvent;
+        restyle: PlotRestyleEvent;
+        selected: PlotSelectionEvent;
+        selecting: PlotSelectionEvent;
+        sliderChange: SliderChangeEvent;
+        sliderEnd: SliderEndEvent;
+        sliderStart: SliderStartEvent;
+        sunburstClick: SunburstClickEvent;
+        transitioned: undefined;
+        transitioning: undefined;
+        transitionInterrupted: undefined;
+        unhover: PlotMouseEvent;
+        update: PlotUpdateEvent;
+        webGLContextLost: undefined;
     };
-    slots: {};
 };
 export declare type PlotProps = typeof __propDef.props;
 export declare type PlotEvents = typeof __propDef.events;

package/README.md

@@ -24,7 +24,7 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
     margin: { t: 0 }
   }}
   fillParent='width'
-  debounce=250
+  debounce={250}
 />
 ```
 
@@ -45,5 +45,6 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
 # Roadmap
  * [x] add autosizing
  * [x] add debouncing
+ * [ ] add event redirecting
  * [ ] add unit tests
  * [ ] add SSR rendering to an image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-plotly.js",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "author": {
     "name": "Michal Grňo (m93a)",
     "url": "https://github.com/m93a/"
@@ -37,9 +37,9 @@
   },
   "type": "module",
   "dependencies": {
-    "@types/lodash": "^4.14.182",
+    "@types/lodash-es": "^4.17.6",
     "@types/plotly.js": "^1.54.20",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "plotly.js-dist": "^2.12.1"
   },
   "types": "./Plot.svelte.d.ts",