svelte-plotly.js 1.1.0 → 1.2.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 +26 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
-
1. Install using `
|
|
7
|
+
1. Install using `pnpm add svelte-plotly.js` or `npm install svelte-plotly.js`.
|
|
8
8
|
2. Choose a Plotly distribution:
|
|
9
9
|
- If you want to use `plotly.js-dist`, just install it.
|
|
10
10
|
- If you want to use a different distribution, take a look at [this section](#custom-plotly-distribution).
|
|
@@ -56,6 +56,31 @@ If you don't use Vite, or this approach doesn't work for you, you can also use t
|
|
|
56
56
|
<Plot {libPlotly} ... />
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
+
## Using FontAwesome icons
|
|
60
|
+
Plotly allows you to modify the chart's _mode bar_ (ie. the buttons in the chart's top right corner). However, you can't use any svelte component – it must be an icon in Plotly's specified format. This library includes a helper function `faToPlotly` that converts a FontAwesome icon to exactly what Plotly needs.
|
|
61
|
+
|
|
62
|
+
```svelte
|
|
63
|
+
<script lang="ts">
|
|
64
|
+
import Plot, { faToPlotly } from 'svelte-plotly.js';
|
|
65
|
+
import { faExpand, faCompress } from '@fortawesome/free-solid-svg-icons';
|
|
66
|
+
let fullscreen = false;
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<Plot
|
|
70
|
+
config={{
|
|
71
|
+
modeBarButtonsToAdd: [
|
|
72
|
+
{
|
|
73
|
+
name: 'fullscreen',
|
|
74
|
+
title: fullscreen ? 'Disable Fullscreen' : 'Enable Fullscreen',
|
|
75
|
+
icon: fullscreen ? faToPlotly(faCompress) : faToPlotly(faExpand),
|
|
76
|
+
click: () => (fullscreen = !fullscreen)
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
}}
|
|
80
|
+
...
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
59
84
|
## Properties
|
|
60
85
|
|
|
61
86
|
| Prop | Type | Description |
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-plotly.js",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Michal Grňo (m93a)",
|
|
6
6
|
"url": "https://github.com/m93a/"
|
|
@@ -24,11 +24,13 @@
|
|
|
24
24
|
"!dist/**/*.spec.*"
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
|
+
"@fortawesome/fontawesome-common-types": "^6.6.0",
|
|
27
28
|
"@types/lodash-es": "^4.17.12",
|
|
28
29
|
"@types/plotly.js": "^2.33.3",
|
|
29
30
|
"lodash-es": "^4.17.21"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
33
|
+
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
|
32
34
|
"@sveltejs/adapter-auto": "^3.2.2",
|
|
33
35
|
"@sveltejs/kit": "^2.5.18",
|
|
34
36
|
"@sveltejs/package": "^2.3.2",
|