svelte-plotly.js 0.3.2 → 0.5.0
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.
- package/README.md +65 -57
- package/dist/Plot.svelte +150 -0
- package/{Plot.svelte.d.ts → dist/Plot.svelte.d.ts} +12 -14
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/plotly.d.ts +3 -0
- package/package.json +49 -40
- package/Plot.svelte +0 -163
package/README.md
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# Plotly.js for Svelte
|
|
2
|
+
|
|
2
3
|
This is an unofficial package that lets you efficiently use [plotly.js](https://plotly.com/javascript/) inside your Svelte or SvelteKit app.
|
|
3
4
|
|
|
4
5
|
## Usage
|
|
5
6
|
|
|
6
7
|
1. Install using `yarn add svelte-plotly.js` or `npm install svelte-plotly.js`.
|
|
7
8
|
2. Choose a Plotly distribution:
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
- If you want to use `plotly.js-dist`, just install it.
|
|
10
|
+
- If you want to use a different distribution, take a look at [this section](#custom-plotly-distribution).
|
|
10
11
|
3. Use in your app:
|
|
11
12
|
|
|
12
13
|
```svelte
|
|
@@ -26,13 +27,15 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
|
|
|
26
27
|
layout={{
|
|
27
28
|
margin: { t: 0 }
|
|
28
29
|
}}
|
|
29
|
-
fillParent=
|
|
30
|
+
fillParent="width"
|
|
30
31
|
debounce={250}
|
|
31
32
|
/>
|
|
32
33
|
```
|
|
33
34
|
|
|
34
35
|
## Custom Plotly distribution
|
|
36
|
+
|
|
35
37
|
Let's say you want to use svelte-plotly.js with a custom Plotly.js distribution, for example [`plotly.js-basic-dist-min`](https://www.npmjs.com/package/plotly.js-basic-dist-min). If you use Vite for bundling, the recommended way to do this would be to install `plotly.js-basic-dist-min` and then register it as an alias for `plotly.js-dist` by adding the following to your [`vite.config.js`](https://vitejs.dev/config/shared-options.html#resolve-alias):
|
|
38
|
+
|
|
36
39
|
```js
|
|
37
40
|
resolve: {
|
|
38
41
|
alias: {
|
|
@@ -41,7 +44,9 @@ resolve: {
|
|
|
41
44
|
},
|
|
42
45
|
},
|
|
43
46
|
```
|
|
47
|
+
|
|
44
48
|
If you don't use Vite, or this approach doesn't work for you, you can also use the `libPlotly` prop of the `Plotly` component:
|
|
49
|
+
|
|
45
50
|
```svelte
|
|
46
51
|
<script lang="ts">
|
|
47
52
|
import Plot from 'svelte-plotly.js';
|
|
@@ -52,63 +57,66 @@ If you don't use Vite, or this approach doesn't work for you, you can also use t
|
|
|
52
57
|
```
|
|
53
58
|
|
|
54
59
|
## Properties
|
|
55
|
-
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `bind:
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Description |
|
|
62
|
+
| ------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| **required `data`** | `Data[]` | array of trace data, see https://plot.ly/javascript/reference/ |
|
|
64
|
+
| `layout` | `Partial<Layout>` | layout of the plot, see https://plot.ly/javascript/reference/#layout |
|
|
65
|
+
| `config` | `Partial<Config>` | configuration, see https://plot.ly/javascript/configuration-options/ |
|
|
66
|
+
| `class` | `string` | class that will be passed to the HTML element wrapping the plot |
|
|
67
|
+
| `fillParent` | `boolean \| 'width' \| 'height'` | automatically resize the plot to fill the width and/or height of its parent element |
|
|
68
|
+
| `debounce` | `number \| DebounceOptions` | debounce all changes to the plot |
|
|
69
|
+
| `libPlotly` | `Plotly \| null \| undefined` | an alternative Plotly bundle to use; if undefined, it defaults to the `plotly.js-dist` package; if null, no plot will be drawn and no library will be downloaded |
|
|
70
|
+
| `bind:element` | `HTMLDivElement` | the HTML element wrapping the plot |
|
|
71
|
+
| `bind:plot` | `PlotlyHTMLElement` | the inner HTML element containing the plot |
|
|
66
72
|
|
|
67
73
|
## Events
|
|
74
|
+
|
|
68
75
|
_**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._
|
|
69
76
|
|
|
70
|
-
| Prop
|
|
71
|
-
|
|
|
72
|
-
| `on:afterExport`
|
|
73
|
-
| `on:afterPlot`
|
|
74
|
-
| `on:animated`
|
|
75
|
-
| `on:animating`
|
|
76
|
-
| `on:animatingFrame`
|
|
77
|
-
| `on:animationInterrupted`
|
|
78
|
-
| `on:autoSize`
|
|
79
|
-
| `on:beforeExport`
|
|
80
|
-
| `on:beforeHover`
|
|
81
|
-
| `on:beforePlot`
|
|
82
|
-
| `on:buttonClicked`
|
|
83
|
-
| `on:click`
|
|
84
|
-
| `on:clickAnnotation`
|
|
85
|
-
| `on:deselect`
|
|
86
|
-
| `on:doubleClick`
|
|
87
|
-
| `on:framework`
|
|
88
|
-
| `on:hover`
|
|
89
|
-
| `on:legendClick`
|
|
90
|
-
| `on:legendDoubleClick`
|
|
91
|
-
| `on:react`
|
|
92
|
-
|
|
93
|
-
| `on:relayout`
|
|
94
|
-
| `on:relayouting`
|
|
95
|
-
| `on:restyle`
|
|
96
|
-
| `on:selected`
|
|
97
|
-
| `on:selecting`
|
|
98
|
-
| `on:sliderChange`
|
|
99
|
-
| `on:sliderEnd`
|
|
100
|
-
| `on:sliderStart`
|
|
101
|
-
| `on:sunburstClick`
|
|
102
|
-
| `on:transitioned`
|
|
103
|
-
| `on:transitioning`
|
|
104
|
-
| `on:transitionInterrupted` | —
|
|
105
|
-
| `on:unhover`
|
|
106
|
-
| `on:update`
|
|
107
|
-
| `on:webGLContextLost`
|
|
77
|
+
| Prop | Callback argument | Description |
|
|
78
|
+
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
79
|
+
| `on:afterExport` | — | ? |
|
|
80
|
+
| `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) |
|
|
81
|
+
| `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) |
|
|
82
|
+
| `on:animating` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3308) |
|
|
83
|
+
| `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) |
|
|
84
|
+
| `on:animationInterrupted` | — | ? [(src)](https://github.com/plotly/plotly.js/blob/11699489c248767619f1f73cde4295f001ec37c3/src/plot_api/plot_api.js#L3189) |
|
|
85
|
+
| `on:autoSize` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) |
|
|
86
|
+
| `on:beforeExport` | — | ? |
|
|
87
|
+
| `on:beforeHover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? |
|
|
88
|
+
| `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) |
|
|
89
|
+
| `on:buttonClicked` | [`ButtonClickedEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L46) | ? |
|
|
90
|
+
| `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/) |
|
|
91
|
+
| `on:clickAnnotation` | [`ClickAnnotationEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L119) | ? |
|
|
92
|
+
| `on:deselect` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) |
|
|
93
|
+
| `on:doubleClick` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#double-click-event) |
|
|
94
|
+
| `on:framework` | — | ? |
|
|
95
|
+
| `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) |
|
|
96
|
+
| `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) |
|
|
97
|
+
| `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) |
|
|
98
|
+
| `on:react` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ? |
|
|
99
|
+
| `on:redraw` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) |
|
|
100
|
+
| `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) |
|
|
101
|
+
| `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) |
|
|
102
|
+
| `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) |
|
|
103
|
+
| `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) |
|
|
104
|
+
| `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) |
|
|
105
|
+
| `on:sliderChange` | [`SliderChangeEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L203) | ? |
|
|
106
|
+
| `on:sliderEnd` | [`SliderEndEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L214) | ? |
|
|
107
|
+
| `on:sliderStart` | [`SliderStartEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L210) | ? |
|
|
108
|
+
| `on:sunburstClick` | [`SunburstClickEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L219) | ? |
|
|
109
|
+
| `on:transitioned` | — | ? |
|
|
110
|
+
| `on:transitioning` | — | ? |
|
|
111
|
+
| `on:transitionInterrupted` | — | ? |
|
|
112
|
+
| `on:unhover` | [`PlotMouseEvent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0852d33e37bc8fff1fe99cc328bde65e84e3e1c0/types/plotly.js/index.d.ts#L69) | ? |
|
|
113
|
+
| `on:update` | [`PlotUpdateEvent`](https://github.com/m93a/svelte-plotly.js/blob/c59b0bad033960797200e359136befae87379ab6/src/lib/Plot.svelte#L52) | ? |
|
|
114
|
+
| `on:webGLContextLost` | — | ? [(docs)](https://plotly.com/javascript/plotlyjs-events/#additional-events) |
|
|
108
115
|
|
|
109
116
|
# Roadmap
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
117
|
+
|
|
118
|
+
- [x] add autosizing
|
|
119
|
+
- [x] add debouncing
|
|
120
|
+
- [x] add event redirecting
|
|
121
|
+
- [ ] add unit tests
|
|
122
|
+
- [ ] add SSR rendering to an image
|
package/dist/Plot.svelte
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
|
|
4
|
+
import { debounce as debouncify } from "lodash-es";
|
|
5
|
+
const browser = typeof window === "object";
|
|
6
|
+
const nextFrame = browser ? requestAnimationFrame : () => void 0;
|
|
7
|
+
async function loadPlotly() {
|
|
8
|
+
if (!browser) return;
|
|
9
|
+
if (libPlotly === void 0) {
|
|
10
|
+
if (window.Plotly) {
|
|
11
|
+
libPlotly = window.Plotly;
|
|
12
|
+
} else {
|
|
13
|
+
const p = await import("plotly.js-dist");
|
|
14
|
+
if (libPlotly === void 0) libPlotly = "default" in p ? p.default : p;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
const DEFAULT_WIDTH = 500;
|
|
19
|
+
const DEFAULT_HEIGHT = 300;
|
|
20
|
+
const events = {
|
|
21
|
+
plotly_afterexport: "afterExport",
|
|
22
|
+
plotly_afterplot: "afterPlot",
|
|
23
|
+
plotly_animated: "animated",
|
|
24
|
+
plotly_animating: "animating",
|
|
25
|
+
plotly_animatingframe: "animatingFrame",
|
|
26
|
+
plotly_animationinterrupted: "animationInterrupted",
|
|
27
|
+
plotly_autosize: "autoSize",
|
|
28
|
+
plotly_beforeexport: "beforeExport",
|
|
29
|
+
plotly_beforehover: "beforeHover",
|
|
30
|
+
plotly_beforeplot: "beforePlot",
|
|
31
|
+
plotly_buttonclicked: "buttonClicked",
|
|
32
|
+
plotly_click: "click",
|
|
33
|
+
plotly_clickannotation: "clickAnnotation",
|
|
34
|
+
plotly_deselect: "deselect",
|
|
35
|
+
plotly_doubleclick: "doubleClick",
|
|
36
|
+
plotly_framework: "framework",
|
|
37
|
+
plotly_hover: "hover",
|
|
38
|
+
plotly_legendclick: "legendClick",
|
|
39
|
+
plotly_legenddoubleclick: "legendDoubleClick",
|
|
40
|
+
plotly_react: "react",
|
|
41
|
+
plotly_redraw: "redraw",
|
|
42
|
+
plotly_relayout: "relayout",
|
|
43
|
+
plotly_relayouting: "relayouting",
|
|
44
|
+
plotly_restyle: "restyle",
|
|
45
|
+
plotly_selected: "selected",
|
|
46
|
+
plotly_selecting: "selecting",
|
|
47
|
+
plotly_sliderchange: "sliderChange",
|
|
48
|
+
plotly_sliderend: "sliderEnd",
|
|
49
|
+
plotly_sliderstart: "sliderStart",
|
|
50
|
+
plotly_sunburstclick: "sunburstClick",
|
|
51
|
+
plotly_transitioned: "transitioned",
|
|
52
|
+
plotly_transitioning: "transitioning",
|
|
53
|
+
plotly_transitioninterrupted: "transitionInterrupted",
|
|
54
|
+
plotly_unhover: "unhover",
|
|
55
|
+
plotly_update: "update",
|
|
56
|
+
plotly_webglcontextlost: "webGLContextLost"
|
|
57
|
+
// TODO add all plotly_${traceType}click
|
|
58
|
+
};
|
|
59
|
+
const dispatch = createEventDispatcher();
|
|
60
|
+
export let element = void 0;
|
|
61
|
+
export let plot = void 0;
|
|
62
|
+
export let libPlotly = void 0;
|
|
63
|
+
export let data;
|
|
64
|
+
export let layout = void 0;
|
|
65
|
+
export let config = void 0;
|
|
66
|
+
export let fillParent = false;
|
|
67
|
+
export let debounce = 0;
|
|
68
|
+
let className = "";
|
|
69
|
+
export { className as class };
|
|
70
|
+
onMount(async () => {
|
|
71
|
+
window.global = window;
|
|
72
|
+
await loadPlotly();
|
|
73
|
+
});
|
|
74
|
+
let datarevision = 0;
|
|
75
|
+
let previousLib = libPlotly;
|
|
76
|
+
let previousPlot = plot;
|
|
77
|
+
let width = DEFAULT_WIDTH;
|
|
78
|
+
let height = DEFAULT_HEIGHT;
|
|
79
|
+
$: debounceWait = typeof debounce === "object" ? debounce.wait : debounce ?? 0;
|
|
80
|
+
$: debounceOptions = typeof debounce === "object" ? debounce : {};
|
|
81
|
+
$: data, datarevision = (datarevision + 1) % 1e3;
|
|
82
|
+
$: layout_ = { datarevision, width, height, ...layout };
|
|
83
|
+
$: config_ = { displaylogo: false, ...config };
|
|
84
|
+
$: draw(libPlotly, element, data, layout_, config_);
|
|
85
|
+
$: {
|
|
86
|
+
if (element && previousLib !== libPlotly) {
|
|
87
|
+
previousLib?.purge(element);
|
|
88
|
+
plot = void 0;
|
|
89
|
+
}
|
|
90
|
+
previousLib = libPlotly;
|
|
91
|
+
loadPlotly();
|
|
92
|
+
}
|
|
93
|
+
$: if (previousPlot !== plot) {
|
|
94
|
+
for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
|
|
95
|
+
previousPlot?.removeAllListeners?.(plotlyEvent);
|
|
96
|
+
plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
|
|
97
|
+
}
|
|
98
|
+
previousPlot = plot;
|
|
99
|
+
}
|
|
100
|
+
const drawUndebounced = (lib, e, d, l, c) => {
|
|
101
|
+
if (e) lib?.react(e, d, l, c).then((p) => plot = p);
|
|
102
|
+
};
|
|
103
|
+
$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
|
|
104
|
+
onDestroy(() => element && libPlotly?.purge(element));
|
|
105
|
+
$: fillParent, nextFrame(onResize);
|
|
106
|
+
$: fillParentWidth = fillParent === true || fillParent === "width";
|
|
107
|
+
$: fillParentHeight = fillParent === true || fillParent === "height";
|
|
108
|
+
$: parent = element?.parentElement;
|
|
109
|
+
let lastParent = null;
|
|
110
|
+
$: {
|
|
111
|
+
parentMounted(parent);
|
|
112
|
+
parentUnmounted(lastParent);
|
|
113
|
+
lastParent = parent;
|
|
114
|
+
}
|
|
115
|
+
let resizeObserver;
|
|
116
|
+
onMount(() => resizeObserver = new ResizeObserver(onResize));
|
|
117
|
+
const parentMounted = (parent2) => parent2 && resizeObserver?.observe(parent2);
|
|
118
|
+
const parentUnmounted = (parent2) => parent2 && resizeObserver?.unobserve(parent2);
|
|
119
|
+
function onResize() {
|
|
120
|
+
if (!parent || !element) return;
|
|
121
|
+
const { offsetHeight, offsetWidth } = parent;
|
|
122
|
+
const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
|
|
123
|
+
const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
124
|
+
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);
|
|
125
|
+
width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
|
|
126
|
+
height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<div
|
|
131
|
+
class={className}
|
|
132
|
+
class:fillParent
|
|
133
|
+
class:fillParentWidth
|
|
134
|
+
class:fillParentHeight
|
|
135
|
+
bind:this={element}
|
|
136
|
+
/>
|
|
137
|
+
|
|
138
|
+
<style>.fillParent {
|
|
139
|
+
overflow: visible;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.fillParentWidth {
|
|
143
|
+
width: 0 !important;
|
|
144
|
+
max-width: 0 !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.fillParentHeight {
|
|
148
|
+
height: 0 !important;
|
|
149
|
+
max-height: 0 !important;
|
|
150
|
+
}</style>
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { SvelteComponentTyped } from "svelte";
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
3
2
|
import type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderEndEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent } from 'plotly.js';
|
|
4
3
|
export type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent };
|
|
5
|
-
export
|
|
4
|
+
export type FillParent = boolean | 'width' | 'height';
|
|
6
5
|
import type { DebounceSettings } from 'lodash-es';
|
|
7
6
|
export interface DebounceOptions extends DebounceSettings {
|
|
8
7
|
wait: number;
|
|
@@ -18,18 +17,17 @@ export interface PlotUpdateEvent {
|
|
|
18
17
|
}
|
|
19
18
|
declare const __propDef: {
|
|
20
19
|
props: {
|
|
21
|
-
element?: (null | undefined)
|
|
22
|
-
plot?: (null | undefined)
|
|
23
|
-
libPlotly?: typeof import(
|
|
20
|
+
element?: HTMLDivElement | (null | undefined);
|
|
21
|
+
plot?: PlotlyHTMLElement | (null | undefined);
|
|
22
|
+
libPlotly?: typeof import("plotly.js-dist") | null | undefined;
|
|
24
23
|
data: Data[];
|
|
25
24
|
layout?: Partial<Layout> | undefined;
|
|
26
25
|
config?: Partial<Config> | undefined;
|
|
27
|
-
fillParent?: FillParent
|
|
28
|
-
debounce?: number | DebounceOptions
|
|
29
|
-
class?: string
|
|
26
|
+
fillParent?: FillParent;
|
|
27
|
+
debounce?: number | DebounceOptions;
|
|
28
|
+
class?: string;
|
|
30
29
|
};
|
|
31
30
|
slots: {};
|
|
32
|
-
getters: {};
|
|
33
31
|
events: {
|
|
34
32
|
afterExport: undefined;
|
|
35
33
|
afterPlot: undefined;
|
|
@@ -69,8 +67,8 @@ declare const __propDef: {
|
|
|
69
67
|
webGLContextLost: undefined;
|
|
70
68
|
};
|
|
71
69
|
};
|
|
72
|
-
export
|
|
73
|
-
export
|
|
74
|
-
export
|
|
75
|
-
export default class Plot extends
|
|
70
|
+
export type PlotProps = typeof __propDef.props;
|
|
71
|
+
export type PlotEvents = typeof __propDef.events;
|
|
72
|
+
export type PlotSlots = typeof __propDef.slots;
|
|
73
|
+
export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
|
|
76
74
|
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Plot.svelte';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Plot.svelte';
|
package/dist/plotly.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,55 +1,64 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-plotly.js",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Michal Grňo (m93a)",
|
|
6
6
|
"url": "https://github.com/m93a/"
|
|
7
7
|
},
|
|
8
8
|
"description": "Unoficial Plotly package for Svelte and SvelteKit",
|
|
9
9
|
"homepage": "https://github.com/m93a/svelte-plotly.js",
|
|
10
|
-
"
|
|
11
|
-
"url": "https://github.com/m93a/svelte-plotly.js/issues"
|
|
12
|
-
},
|
|
13
|
-
"packageManager": "yarn@1.22.5",
|
|
10
|
+
"repository": "https://github.com/m93a/svelte-plotly.js",
|
|
14
11
|
"license": "MIT",
|
|
15
|
-
"paths": {
|
|
16
|
-
"*": [
|
|
17
|
-
"src/types/*.d.ts"
|
|
18
|
-
]
|
|
19
|
-
},
|
|
20
|
-
"devDependencies": {
|
|
21
|
-
"@sveltejs/adapter-auto": "next",
|
|
22
|
-
"@sveltejs/kit": "next",
|
|
23
|
-
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
|
24
|
-
"@typescript-eslint/parser": "^5.10.1",
|
|
25
|
-
"eslint": "^8.12.0",
|
|
26
|
-
"eslint-config-prettier": "^8.3.0",
|
|
27
|
-
"eslint-plugin-svelte3": "^4.0.0",
|
|
28
|
-
"prettier": "^2.5.1",
|
|
29
|
-
"prettier-plugin-svelte": "^2.5.0",
|
|
30
|
-
"plotly.js-dist": "^2.12.1",
|
|
31
|
-
"sass": "^1.51.0",
|
|
32
|
-
"svelte": "^3.44.0",
|
|
33
|
-
"svelte-check": "^2.2.6",
|
|
34
|
-
"svelte-preprocess": "^4.10.1",
|
|
35
|
-
"svelte2tsx": "^0.5.9",
|
|
36
|
-
"tslib": "^2.3.1",
|
|
37
|
-
"typescript": "~4.6.2"
|
|
38
|
-
},
|
|
39
12
|
"type": "module",
|
|
13
|
+
"svelte": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"svelte": "./dist/index.js"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"!dist/**/*.test.*",
|
|
24
|
+
"!dist/**/*.spec.*"
|
|
25
|
+
],
|
|
40
26
|
"dependencies": {
|
|
41
|
-
"@types/lodash-es": "^4.17.
|
|
42
|
-
"@types/plotly.js": "^2.
|
|
43
|
-
"lodash-es": "^4.17"
|
|
27
|
+
"@types/lodash-es": "^4.17.12",
|
|
28
|
+
"@types/plotly.js": "^2.33.3",
|
|
29
|
+
"lodash-es": "^4.17.21"
|
|
44
30
|
},
|
|
45
|
-
"
|
|
46
|
-
"
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@sveltejs/adapter-auto": "^3.2.2",
|
|
33
|
+
"@sveltejs/kit": "^2.5.18",
|
|
34
|
+
"@sveltejs/package": "^2.3.2",
|
|
35
|
+
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
36
|
+
"@types/eslint": "^9.6.0",
|
|
37
|
+
"eslint": "^9.8.0",
|
|
38
|
+
"eslint-plugin-svelte": "^2.43.0",
|
|
39
|
+
"globals": "^15.8.0",
|
|
40
|
+
"plotly.js-dist": "^2.34.0",
|
|
41
|
+
"prettier": "^3.3.3",
|
|
42
|
+
"prettier-plugin-svelte": "^3.2.6",
|
|
43
|
+
"publint": "^0.2.9",
|
|
44
|
+
"sass": "^1.77.8",
|
|
45
|
+
"svelte-check": "^3.8.5",
|
|
46
|
+
"typescript": "^5.5.4",
|
|
47
|
+
"typescript-eslint": "^7.18.0",
|
|
48
|
+
"vite": "^5.3.5"
|
|
47
49
|
},
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
".": "./Plot.svelte",
|
|
52
|
-
"./Plot.svelte": "./Plot.svelte"
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"plotly.js-dist": "^2.34.0",
|
|
52
|
+
"svelte": "^4.2.0"
|
|
53
53
|
},
|
|
54
|
-
"
|
|
54
|
+
"scripts": {
|
|
55
|
+
"dev": "vite dev",
|
|
56
|
+
"build": "vite build && npm run package",
|
|
57
|
+
"preview": "vite preview",
|
|
58
|
+
"package": "svelte-kit sync && svelte-package && publint && npm run lint",
|
|
59
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
60
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
61
|
+
"lint": "prettier --check src/ && eslint .",
|
|
62
|
+
"format": "prettier --write ."
|
|
63
|
+
}
|
|
55
64
|
}
|
package/Plot.svelte
DELETED
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
<script context="module">export {};
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
|
5
|
-
import { debounce as debouncify } from 'lodash-es';
|
|
6
|
-
const browser = typeof window === 'object';
|
|
7
|
-
const nextFrame = browser ? requestAnimationFrame : () => void 0;
|
|
8
|
-
async function loadPlotly() {
|
|
9
|
-
if (!browser)
|
|
10
|
-
return;
|
|
11
|
-
if (libPlotly === undefined) {
|
|
12
|
-
if (window.Plotly) {
|
|
13
|
-
libPlotly = window.Plotly;
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
const p = await import('plotly.js-dist');
|
|
17
|
-
if (libPlotly === undefined)
|
|
18
|
-
libPlotly = 'default' in p ? p.default : p;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
const DEFAULT_WIDTH = 500;
|
|
23
|
-
const DEFAULT_HEIGHT = 300;
|
|
24
|
-
const events = {
|
|
25
|
-
plotly_afterexport: 'afterExport',
|
|
26
|
-
plotly_afterplot: 'afterPlot',
|
|
27
|
-
plotly_animated: 'animated',
|
|
28
|
-
plotly_animating: 'animating',
|
|
29
|
-
plotly_animatingframe: 'animatingFrame',
|
|
30
|
-
plotly_animationinterrupted: 'animationInterrupted',
|
|
31
|
-
plotly_autosize: 'autoSize',
|
|
32
|
-
plotly_beforeexport: 'beforeExport',
|
|
33
|
-
plotly_beforehover: 'beforeHover',
|
|
34
|
-
plotly_beforeplot: 'beforePlot',
|
|
35
|
-
plotly_buttonclicked: 'buttonClicked',
|
|
36
|
-
plotly_click: 'click',
|
|
37
|
-
plotly_clickannotation: 'clickAnnotation',
|
|
38
|
-
plotly_deselect: 'deselect',
|
|
39
|
-
plotly_doubleclick: 'doubleClick',
|
|
40
|
-
plotly_framework: 'framework',
|
|
41
|
-
plotly_hover: 'hover',
|
|
42
|
-
plotly_legendclick: 'legendClick',
|
|
43
|
-
plotly_legenddoubleclick: 'legendDoubleClick',
|
|
44
|
-
plotly_react: 'react',
|
|
45
|
-
plotly_redraw: 'redraw',
|
|
46
|
-
plotly_relayout: 'relayout',
|
|
47
|
-
plotly_relayouting: 'relayouting',
|
|
48
|
-
plotly_restyle: 'restyle',
|
|
49
|
-
plotly_selected: 'selected',
|
|
50
|
-
plotly_selecting: 'selecting',
|
|
51
|
-
plotly_sliderchange: 'sliderChange',
|
|
52
|
-
plotly_sliderend: 'sliderEnd',
|
|
53
|
-
plotly_sliderstart: 'sliderStart',
|
|
54
|
-
plotly_sunburstclick: 'sunburstClick',
|
|
55
|
-
plotly_transitioned: 'transitioned',
|
|
56
|
-
plotly_transitioning: 'transitioning',
|
|
57
|
-
plotly_transitioninterrupted: 'transitionInterrupted',
|
|
58
|
-
plotly_unhover: 'unhover',
|
|
59
|
-
plotly_update: 'update',
|
|
60
|
-
plotly_webglcontextlost: 'webGLContextLost'
|
|
61
|
-
// TODO add all plotly_${traceType}click
|
|
62
|
-
};
|
|
63
|
-
const dispatch = createEventDispatcher();
|
|
64
|
-
// bind props
|
|
65
|
-
export let element = undefined;
|
|
66
|
-
export let plot = undefined;
|
|
67
|
-
// input props
|
|
68
|
-
export let libPlotly = undefined;
|
|
69
|
-
export let data;
|
|
70
|
-
export let layout = undefined;
|
|
71
|
-
export let config = undefined;
|
|
72
|
-
export let fillParent = false;
|
|
73
|
-
export let debounce = 0;
|
|
74
|
-
let className = '';
|
|
75
|
-
export { className as class };
|
|
76
|
-
// set up
|
|
77
|
-
onMount(async () => {
|
|
78
|
-
window.global = window;
|
|
79
|
-
await loadPlotly();
|
|
80
|
-
});
|
|
81
|
-
// state props
|
|
82
|
-
let datarevision = 0;
|
|
83
|
-
let previousLib = libPlotly;
|
|
84
|
-
let previousPlot = plot;
|
|
85
|
-
let width = DEFAULT_WIDTH;
|
|
86
|
-
let height = DEFAULT_HEIGHT;
|
|
87
|
-
// updates
|
|
88
|
-
$: debounceWait = typeof debounce === 'object' ? debounce.wait : debounce ?? 0;
|
|
89
|
-
$: debounceOptions = typeof debounce === 'object' ? debounce : {};
|
|
90
|
-
$: data, (datarevision = (datarevision + 1) % 1000);
|
|
91
|
-
$: layout_ = { datarevision, width, height, ...layout };
|
|
92
|
-
$: config_ = { displaylogo: false, ...config };
|
|
93
|
-
$: draw(libPlotly, element, data, layout_, config_);
|
|
94
|
-
$: {
|
|
95
|
-
if (element && previousLib !== libPlotly) {
|
|
96
|
-
previousLib?.purge(element);
|
|
97
|
-
plot = undefined;
|
|
98
|
-
}
|
|
99
|
-
previousLib = libPlotly;
|
|
100
|
-
loadPlotly();
|
|
101
|
-
}
|
|
102
|
-
$: if (previousPlot !== plot) {
|
|
103
|
-
for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
|
|
104
|
-
previousPlot?.removeAllListeners?.(plotlyEvent);
|
|
105
|
-
plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
|
|
106
|
-
}
|
|
107
|
-
previousPlot = plot;
|
|
108
|
-
}
|
|
109
|
-
const drawUndebounced = (lib, e, d, l, c) => {
|
|
110
|
-
if (e)
|
|
111
|
-
lib?.react(e, d, l, c).then(p => (plot = p));
|
|
112
|
-
};
|
|
113
|
-
$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
|
|
114
|
-
// destroy
|
|
115
|
-
onDestroy(() => element && libPlotly?.purge(element));
|
|
116
|
-
// autosizing
|
|
117
|
-
$: fillParent, nextFrame(onResize);
|
|
118
|
-
$: fillParentWidth = fillParent === true || fillParent === 'width';
|
|
119
|
-
$: fillParentHeight = fillParent === true || fillParent === 'height';
|
|
120
|
-
$: parent = element?.parentElement;
|
|
121
|
-
let lastParent = null;
|
|
122
|
-
$: {
|
|
123
|
-
parentMounted(parent);
|
|
124
|
-
parentUnmounted(lastParent);
|
|
125
|
-
lastParent = parent;
|
|
126
|
-
}
|
|
127
|
-
let resizeObserver;
|
|
128
|
-
onMount(() => (resizeObserver = new ResizeObserver(onResize)));
|
|
129
|
-
const parentMounted = (parent) => parent && resizeObserver?.observe(parent);
|
|
130
|
-
const parentUnmounted = (parent) => parent && resizeObserver?.unobserve(parent);
|
|
131
|
-
function onResize() {
|
|
132
|
-
if (!parent || !element)
|
|
133
|
-
return;
|
|
134
|
-
const { offsetHeight, offsetWidth } = parent;
|
|
135
|
-
const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
|
|
136
|
-
const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
137
|
-
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingRight);
|
|
138
|
-
width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
|
|
139
|
-
height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
|
|
140
|
-
}
|
|
141
|
-
</script>
|
|
142
|
-
|
|
143
|
-
<div
|
|
144
|
-
class={className}
|
|
145
|
-
class:fillParent
|
|
146
|
-
class:fillParentWidth
|
|
147
|
-
class:fillParentHeight
|
|
148
|
-
bind:this={element}
|
|
149
|
-
/>
|
|
150
|
-
|
|
151
|
-
<style>.fillParent {
|
|
152
|
-
overflow: visible;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.fillParentWidth {
|
|
156
|
-
width: 0 !important;
|
|
157
|
-
max-width: 0 !important;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.fillParentHeight {
|
|
161
|
-
height: 0 !important;
|
|
162
|
-
max-height: 0 !important;
|
|
163
|
-
}</style>
|