svelte-plotly.js 0.3.0 → 0.3.2
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/Plot.svelte +1 -1
- package/README.md +24 -1
- package/package.json +2 -2
package/Plot.svelte
CHANGED
package/README.md
CHANGED
|
@@ -4,7 +4,10 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
|
|
|
4
4
|
## Usage
|
|
5
5
|
|
|
6
6
|
1. Install using `yarn add svelte-plotly.js` or `npm install svelte-plotly.js`.
|
|
7
|
-
2.
|
|
7
|
+
2. Choose a Plotly distribution:
|
|
8
|
+
* If you want to use `plotly.js-dist`, just install it.
|
|
9
|
+
* If you want to use a different distribution, take a look at [this section](#custom-plotly-distribution).
|
|
10
|
+
3. Use in your app:
|
|
8
11
|
|
|
9
12
|
```svelte
|
|
10
13
|
<script lang="ts">
|
|
@@ -28,6 +31,26 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
|
|
|
28
31
|
/>
|
|
29
32
|
```
|
|
30
33
|
|
|
34
|
+
## Custom Plotly distribution
|
|
35
|
+
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):
|
|
36
|
+
```js
|
|
37
|
+
resolve: {
|
|
38
|
+
alias: {
|
|
39
|
+
"plotly.js-dist": "plotly.js-basic-dist-min",
|
|
40
|
+
lodash: "lodash-es",
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
```
|
|
44
|
+
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:
|
|
45
|
+
```svelte
|
|
46
|
+
<script lang="ts">
|
|
47
|
+
import Plot from 'svelte-plotly.js';
|
|
48
|
+
import libPlotly from 'plotly.js-basic-dist-min';
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<Plot {libPlotly} ... />
|
|
52
|
+
```
|
|
53
|
+
|
|
31
54
|
## Properties
|
|
32
55
|
| Prop | Type | Description
|
|
33
56
|
| --------- | ----------- | -------------
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-plotly.js",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Michal Grňo (m93a)",
|
|
6
6
|
"url": "https://github.com/m93a/"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"type": "module",
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@types/lodash-es": "^4.17.6",
|
|
42
|
-
"@types/plotly.js": "^2.12.
|
|
42
|
+
"@types/plotly.js": "^2.12.5",
|
|
43
43
|
"lodash-es": "^4.17"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|