svelte-plotly.js 0.1.6 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Plot.svelte +53 -3
  2. package/Plot.svelte.d.ts +49 -4
  3. package/README.md +43 -1
  4. package/package.json +2 -2
package/Plot.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script context="module">export {};
2
2
  </script>
3
3
 
4
- <script>import { onMount, onDestroy } from 'svelte';
4
+ <script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
5
5
  import { debounce as debouncify } from 'lodash-es';
6
6
  const browser = typeof window === 'object';
7
7
  const nextFrame = browser ? requestAnimationFrame : () => void 0;
@@ -16,6 +16,46 @@ async function loadPlotly() {
16
16
  }
17
17
  const DEFAULT_WIDTH = 500;
18
18
  const DEFAULT_HEIGHT = 300;
19
+ const events = {
20
+ plotly_afterexport: 'afterExport',
21
+ plotly_afterplot: 'afterPlot',
22
+ plotly_animated: 'animated',
23
+ plotly_animating: 'animating',
24
+ plotly_animatingframe: 'animatingFrame',
25
+ plotly_animationinterrupted: 'animationInterrupted',
26
+ plotly_autosize: 'autoSize',
27
+ plotly_beforeexport: 'beforeExport',
28
+ plotly_beforehover: 'beforeHover',
29
+ plotly_beforeplot: 'beforePlot',
30
+ plotly_buttonclicked: 'buttonClicked',
31
+ plotly_click: 'click',
32
+ plotly_clickannotation: 'clickAnnotation',
33
+ plotly_deselect: 'deselect',
34
+ plotly_doubleclick: 'doubleClick',
35
+ plotly_framework: 'framework',
36
+ plotly_hover: 'hover',
37
+ plotly_legendclick: 'legendClick',
38
+ plotly_legenddoubleclick: 'legendDoubleClick',
39
+ plotly_react: 'react',
40
+ plotly_redraw: 'redraw',
41
+ plotly_relayout: 'relayout',
42
+ plotly_relayouting: 'relayouting',
43
+ plotly_restyle: 'restyle',
44
+ plotly_selected: 'selected',
45
+ plotly_selecting: 'selecting',
46
+ plotly_sliderchange: 'sliderChange',
47
+ plotly_sliderend: 'sliderEnd',
48
+ plotly_sliderstart: 'sliderStart',
49
+ plotly_sunburstclick: 'sunburstClick',
50
+ plotly_transitioned: 'transitioned',
51
+ plotly_transitioning: 'transitioning',
52
+ plotly_transitioninterrupted: 'transitionInterrupted',
53
+ plotly_unhover: 'unhover',
54
+ plotly_update: 'update',
55
+ plotly_webglcontextlost: 'webGLContextLost'
56
+ // TODO add all plotly_${traceType}click
57
+ };
58
+ const dispatch = createEventDispatcher();
19
59
  // bind props
20
60
  export let element = undefined;
21
61
  export let plot = undefined;
@@ -31,11 +71,12 @@ export { className as class };
31
71
  // set up
32
72
  onMount(async () => {
33
73
  window.global = window;
34
- loadPlotly();
74
+ await loadPlotly();
35
75
  });
36
76
  // state props
37
77
  let datarevision = 0;
38
78
  let previousLib = libPlotly;
79
+ let previousPlot = plot;
39
80
  let width = DEFAULT_WIDTH;
40
81
  let height = DEFAULT_HEIGHT;
41
82
  // updates
@@ -46,11 +87,20 @@ $: layout_ = { datarevision, width, height, ...layout };
46
87
  $: config_ = { displaylogo: false, ...config };
47
88
  $: draw(libPlotly, element, data, layout_, config_);
48
89
  $: {
49
- if (element && previousLib !== libPlotly)
90
+ if (element && previousLib !== libPlotly) {
50
91
  previousLib?.purge(element);
92
+ plot = undefined;
93
+ }
51
94
  previousLib = libPlotly;
52
95
  loadPlotly();
53
96
  }
97
+ $: if (previousPlot !== plot) {
98
+ for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
99
+ previousPlot?.removeAllListeners?.(plotlyEvent);
100
+ plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
101
+ }
102
+ previousPlot = plot;
103
+ }
54
104
  const drawUndebounced = (lib, e, d, l, c) => {
55
105
  if (e)
56
106
  lib?.react(e, d, l, c).then(p => (plot = p));
package/Plot.svelte.d.ts CHANGED
@@ -1,12 +1,21 @@
1
1
  /// <reference types="lodash" />
2
2
  import { SvelteComponentTyped } from "svelte";
3
- import type { Data, Layout, Config, PlotlyHTMLElement } from 'plotly.js';
4
- export type { Data, Layout, Config, PlotlyHTMLElement };
3
+ import type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderEndEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent } from 'plotly.js';
4
+ export type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent };
5
5
  export declare type FillParent = boolean | 'width' | 'height';
6
6
  import type { DebounceSettings } from 'lodash-es';
7
7
  export interface DebounceOptions extends DebounceSettings {
8
8
  wait: number;
9
9
  }
10
+ export interface ButtonClickedEvent {
11
+ menu: any;
12
+ button: any;
13
+ active: any;
14
+ }
15
+ export interface PlotUpdateEvent {
16
+ data: Data;
17
+ layout: Layout;
18
+ }
10
19
  declare const __propDef: {
11
20
  props: {
12
21
  element?: (null | undefined) | HTMLDivElement;
@@ -19,10 +28,46 @@ declare const __propDef: {
19
28
  debounce?: number | DebounceOptions | undefined;
20
29
  class?: string | undefined;
21
30
  };
31
+ slots: {};
32
+ getters: {};
22
33
  events: {
23
- [evt: string]: CustomEvent<any>;
34
+ afterExport: undefined;
35
+ afterPlot: undefined;
36
+ animated: undefined;
37
+ animating: undefined;
38
+ animatingFrame: FrameAnimationEvent;
39
+ animationInterrupted: undefined;
40
+ autoSize: undefined;
41
+ beforeExport: undefined;
42
+ beforeHover: PlotMouseEvent;
43
+ beforePlot: BeforePlotEvent;
44
+ buttonClicked: ButtonClickedEvent;
45
+ click: PlotMouseEvent;
46
+ clickAnnotation: ClickAnnotationEvent;
47
+ deselect: undefined;
48
+ doubleClick: undefined;
49
+ framework: undefined;
50
+ hover: PlotHoverEvent;
51
+ legendClick: LegendClickEvent;
52
+ legendDoubleClick: LegendClickEvent;
53
+ react: PlotUpdateEvent;
54
+ redraw: undefined;
55
+ relayout: PlotRelayoutEvent;
56
+ relayouting: PlotRelayoutEvent;
57
+ restyle: PlotRestyleEvent;
58
+ selected: PlotSelectionEvent;
59
+ selecting: PlotSelectionEvent;
60
+ sliderChange: SliderChangeEvent;
61
+ sliderEnd: SliderEndEvent;
62
+ sliderStart: SliderStartEvent;
63
+ sunburstClick: SunburstClickEvent;
64
+ transitioned: undefined;
65
+ transitioning: undefined;
66
+ transitionInterrupted: undefined;
67
+ unhover: PlotMouseEvent;
68
+ update: PlotUpdateEvent;
69
+ webGLContextLost: undefined;
24
70
  };
25
- slots: {};
26
71
  };
27
72
  export declare type PlotProps = typeof __propDef.props;
28
73
  export declare type PlotEvents = typeof __propDef.events;
package/README.md CHANGED
@@ -24,7 +24,7 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
24
24
  margin: { t: 0 }
25
25
  }}
26
26
  fillParent='width'
27
- debounce=250
27
+ debounce={250}
28
28
  />
29
29
  ```
30
30
 
@@ -41,9 +41,51 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
41
41
  | `bind:element` | `HTMLDivElement` | the HTML element wrapping the plot
42
42
  | `bind:plot` | `PlotlyHTMLElement` | the inner HTML element containing the plot
43
43
 
44
+ ## Events
45
+ _**NOTE:** Due to Plotly's atrocious documentation, most events aren't even mentioned anywhere. Links to source code are provided as the bare minimum information about each event._
46
+
47
+ | Prop | Callback argument | Description
48
+ | ---- | ----------------- | -------------
49
+ | `on:afterExport` | — | ?
50
+ | `on:afterPlot` | — | triggers each time a chart is plotted, or re-plotted after the restyling or relayout of a plot [(docs)](https://plotly.com/javascript/plotlyjs-events/#afterplot-event), [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L405)
51
+ | `on:animated` | — | triggers once an animation finished playing [(demo)](https://codepen.io/csha/pen/NWYJGgg), [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events), [(src 1)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L405), [(src 2)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3445)
52
+ | `on:animating` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3308)
53
+ | `on:animatingFrame` | [`FrameAnimationEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L126) | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3293)
54
+ | `on:animationInterrupted` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3189)
55
+ | `on:autoSize` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events)
56
+ | `on:beforeExport` | — | ?
57
+ | `on:beforeHover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ?
58
+ | `on:beforePlot` | [`BeforePlotEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L243) | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L72)
59
+ | `on:buttonClicked` | [`ButtonClickedEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L46) | ?
60
+ | `on:click` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? [(docs 1)](https://plotly.com/javascript/plotlyjs-events/#click-event), [(docs 2)](https://plotly.com/javascript/click-events/)
61
+ | `on:clickAnnotation` | [`ClickAnnotationEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L119) | ?
62
+ | `on:deselect` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events)
63
+ | `on:doubleClick` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#double-click-event)
64
+ | `on:framework` | — | ?
65
+ | `on:hover` | [`PlotHoverEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L74) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#hover-event)
66
+ | `on:legendClick` | [`LegendClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L138) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#legend-click-events)
67
+ | `on:legendDoubleClick` | [`LegendClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L138) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#legend-click-events)
68
+ | `on:react` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ?
69
+ | `on:redraw` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events)
70
+ | `on:relayout` | [`PlotRelayoutEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L110) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data)
71
+ | `on:relayouting` | [`PlotRelayoutEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L110) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data)
72
+ | `on:restyle` | [`PlotRestyleEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L102) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#update-data)
73
+ | `on:selected` | [`PlotSelectionEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L92) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#select-event)
74
+ | `on:selecting` | [`PlotSelectionEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L92) | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#select-event)
75
+ | `on:sliderChange` | [`SliderChangeEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L203) | ?
76
+ | `on:sliderEnd` | [`SliderEndEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L214) | ?
77
+ | `on:sliderStart` | [`SliderStartEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L210) | ?
78
+ | `on:sunburstClick` | [`SunburstClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L219) | ?
79
+ | `on:transitioned` | — | ?
80
+ | `on:transitioning` | — | ?
81
+ | `on:transitionInterrupted` | — | ?
82
+ | `on:unhover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ?
83
+ | `on:update` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ?
84
+ | `on:webGLContextLost` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events)
44
85
 
45
86
  # Roadmap
46
87
  * [x] add autosizing
47
88
  * [x] add debouncing
89
+ * [x] add event redirecting
48
90
  * [ ] add unit tests
49
91
  * [ ] add SSR rendering to an image
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-plotly.js",
3
- "version": "0.1.6",
3
+ "version": "0.2.1",
4
4
  "author": {
5
5
  "name": "Michal Grňo (m93a)",
6
6
  "url": "https://github.com/m93a/"
@@ -38,7 +38,7 @@
38
38
  "type": "module",
39
39
  "dependencies": {
40
40
  "@types/lodash-es": "^4.17.6",
41
- "@types/plotly.js": "^1.54.20",
41
+ "@types/plotly.js": "^2.12.2",
42
42
  "lodash-es": "^4.17.21",
43
43
  "plotly.js-dist": "^2.12.1"
44
44
  },