svelte-plotly.js 1.1.0-rc1 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
 
 ## Usage
 
-1. Install using `yarn add svelte-plotly.js` or `npm install svelte-plotly.js`.
+1. Install using `pnpm add svelte-plotly.js` or `npm install svelte-plotly.js`.
 2. Choose a Plotly distribution:
    - If you want to use `plotly.js-dist`, just install it.
    - 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
 <Plot {libPlotly} ... />
 ```
 
+## Using FontAwesome icons
+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.
+
+```svelte
+<script lang="ts">
+  import Plot, { faToPlotly } from 'svelte-plotly.js';
+  import { faExpand, faCompress } from '@fortawesome/free-solid-svg-icons';
+  let fullscreen = false;
+</script>
+
+<Plot
+    config={{
+      modeBarButtonsToAdd: [
+        {
+          name: 'fullscreen',
+          title: fullscreen ? 'Disable Fullscreen' : 'Enable Fullscreen',
+          icon: fullscreen ? faToPlotly(faCompress) : faToPlotly(faExpand),
+          click: () => (fullscreen = !fullscreen)
+        }
+      ],
+    }}
+    ...
+/>
+```
+
 ## Properties
 
 | Prop                       | Type                             | Description                                                                                                                                                      |

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Plot.svelte';
 export { default } from './Plot.svelte';
+export * from './utils.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './Plot.svelte';
 export { default } from './Plot.svelte';
+export * from './utils.js';

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconDefinition as FaIcon } from '@fortawesome/fontawesome-common-types';
+import type { Icon as PlotlyIcon } from 'plotly.js';
+export declare function faToPlotly(i: FaIcon): PlotlyIcon;

package/dist/utils.js

@@ -0,0 +1,5 @@
+export function faToPlotly(i) {
+    const { icon: [width, height, _, __, paths] } = i;
+    const path = Array.isArray(paths) ? paths.join(' ') : paths;
+    return { width, height, path };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-plotly.js",
-  "version": "1.1.0-rc1",
+  "version": "1.2.0",
   "author": {
     "name": "Michal Grňo (m93a)",
     "url": "https://github.com/m93a/"
@@ -24,11 +24,13 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
+    "@fortawesome/fontawesome-common-types": "^6.6.0",
     "@types/lodash-es": "^4.17.12",
     "@types/plotly.js": "^2.33.3",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",