svelte-plotly.js 0.4.0 → 0.5.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.
- package/README.md +65 -57
- package/dist/{lib/Plot.svelte → Plot.svelte} +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/plotly.d.ts +3 -0
- package/package.json +40 -35
- /package/dist/{lib/Plot.svelte.d.ts → Plot.svelte.d.ts} +0 -0
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
|
|
@@ -121,7 +121,7 @@ function onResize() {
|
|
|
121
121
|
const { offsetHeight, offsetWidth } = parent;
|
|
122
122
|
const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
|
|
123
123
|
const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
124
|
-
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(
|
|
124
|
+
const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);
|
|
125
125
|
width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
|
|
126
126
|
height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
|
|
127
127
|
}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/dist/plotly.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,59 +1,64 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-plotly.js",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
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
|
-
},
|
|
10
|
+
"repository": "https://github.com/m93a/svelte-plotly.js",
|
|
13
11
|
"license": "MIT",
|
|
14
12
|
"type": "module",
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
],
|
|
18
|
-
"types": "./dist/lib/Plot.svelte.d.ts",
|
|
13
|
+
"svelte": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
19
15
|
"exports": {
|
|
20
16
|
".": {
|
|
21
|
-
"types": "./dist/
|
|
22
|
-
"svelte": "./dist/
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"svelte": "./dist/index.js"
|
|
23
19
|
}
|
|
24
20
|
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"!dist/**/*.test.*",
|
|
24
|
+
"!dist/**/*.spec.*"
|
|
25
|
+
],
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"@types/lodash-es": "^4.17.12",
|
|
28
|
+
"@types/plotly.js": "^2.33.3",
|
|
29
|
+
"lodash-es": "^4.17.21"
|
|
30
|
+
},
|
|
25
31
|
"devDependencies": {
|
|
26
|
-
"@sveltejs/
|
|
32
|
+
"@sveltejs/adapter-auto": "^3.2.2",
|
|
33
|
+
"@sveltejs/kit": "^2.5.18",
|
|
34
|
+
"@sveltejs/package": "^2.3.2",
|
|
27
35
|
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
28
|
-
"@
|
|
29
|
-
"
|
|
30
|
-
"eslint": "^
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"prettier": "^3.
|
|
35
|
-
"
|
|
36
|
-
"sass": "^1.
|
|
37
|
-
"svelte-check": "^3.8.
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"vite": "^5.2.13"
|
|
42
|
-
},
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"svelte": "^4.2.18",
|
|
45
|
-
"@types/lodash-es": "^4.17.6",
|
|
46
|
-
"@types/plotly.js": "^2.12.5",
|
|
47
|
-
"lodash-es": "^4.17"
|
|
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"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
|
-
"plotly.js-dist": "^2.
|
|
51
|
+
"plotly.js-dist": "^2.34.0",
|
|
52
|
+
"svelte": "^4.2.0"
|
|
51
53
|
},
|
|
52
54
|
"scripts": {
|
|
53
55
|
"dev": "vite dev",
|
|
54
|
-
"build": "
|
|
55
|
-
"
|
|
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",
|
|
56
61
|
"lint": "prettier --check src/ && eslint .",
|
|
57
|
-
"format": "prettier --write
|
|
62
|
+
"format": "prettier --write ."
|
|
58
63
|
}
|
|
59
64
|
}
|
|
File without changes
|