svelte-plotly.js 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Michal Grňo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Plot.svelte

@@ -0,0 +1,108 @@
+<script context="module">export {};
+</script>
+
+<script>import { onMount, onDestroy } from 'svelte';
+import { debounce as debouncify } from 'lodash';
+import { browser } from '$app/env';
+const nextFrame = browser ? requestAnimationFrame : () => void 0;
+async function loadPlotly() {
+    if (!browser)
+        return;
+    if (libPlotly === undefined) {
+        const p = await import('plotly.js-dist');
+        if (libPlotly === undefined)
+            libPlotly = p;
+    }
+}
+const DEFAULT_WIDTH = 500;
+const DEFAULT_HEIGHT = 300;
+// bind props
+export let element = undefined;
+export let plot = undefined;
+// input props
+export let libPlotly = undefined;
+export let data;
+export let layout = undefined;
+export let config = undefined;
+export let fillParent = false;
+export let debounce = 0;
+let className = '';
+export { className as class };
+// set up
+onMount(async () => {
+    window.global = window;
+    loadPlotly();
+});
+// state props
+let datarevision = 0;
+let previousLib = libPlotly;
+let width = DEFAULT_WIDTH;
+let height = DEFAULT_HEIGHT;
+// updates
+$: debounceWait = typeof debounce === 'object' ? debounce.wait : debounce ?? 0;
+$: debounceOptions = typeof debounce === 'object' ? debounce : {};
+$: data, (datarevision = (datarevision + 1) % 1000);
+$: layout_ = { datarevision, width, height, ...layout };
+$: config_ = { displaylogo: false, ...config };
+$: draw(libPlotly, element, data, layout_, config_);
+$: {
+    if (element && previousLib !== libPlotly)
+        previousLib?.purge(element);
+    previousLib = libPlotly;
+    loadPlotly();
+}
+const drawUndebounced = (lib, e, d, l, c) => {
+    if (e)
+        lib?.react(e, d, l, c).then(p => (plot = p));
+};
+$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
+// destroy
+onDestroy(() => element && libPlotly?.purge(element));
+// autosizing
+$: fillParent, nextFrame(onResize);
+$: fillParentWidth = fillParent === true || fillParent === 'width';
+$: fillParentHeight = fillParent === true || fillParent === 'height';
+$: parent = element?.parentElement;
+let lastParent = null;
+$: {
+    parentMounted(parent);
+    parentUnmounted(lastParent);
+    lastParent = parent;
+}
+let resizeObserver;
+onMount(() => (resizeObserver = new ResizeObserver(onResize)));
+const parentMounted = (parent) => parent && resizeObserver?.observe(parent);
+const parentUnmounted = (parent) => parent && resizeObserver?.unobserve(parent);
+function onResize() {
+    if (!parent || !element)
+        return;
+    const { offsetHeight, offsetWidth } = parent;
+    const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
+    const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
+    const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingRight);
+    width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
+    height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
+}
+</script>
+
+<div
+  class={className}
+  class:fillParent
+  class:fillParentWidth
+  class:fillParentHeight
+  bind:this={element}
+/>
+
+<style>.fillParent {
+  overflow: visible;
+}
+
+.fillParentWidth {
+  width: 0 !important;
+  max-width: 0 !important;
+}
+
+.fillParentHeight {
+  height: 0 !important;
+  max-height: 0 !important;
+}</style>

package/Plot.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Data, Layout, Config, PlotlyHTMLElement } from 'plotly.js';
+export type { Data, Layout, Config, PlotlyHTMLElement };
+export declare type FillParent = boolean | 'width' | 'height';
+import type { DebounceSettings } from 'lodash';
+export interface DebounceOptions extends DebounceSettings {
+    wait: number;
+}
+declare const __propDef: {
+    props: {
+        element?: (null | undefined) | HTMLDivElement;
+        plot?: (null | undefined) | PlotlyHTMLElement;
+        libPlotly?: typeof import('plotly.js-dist') | null | undefined;
+        data: Data[];
+        layout?: Partial<Layout> | undefined;
+        config?: Partial<Config> | undefined;
+        fillParent?: FillParent | undefined;
+        debounce?: number | DebounceOptions | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PlotProps = typeof __propDef.props;
+export declare type PlotEvents = typeof __propDef.events;
+export declare type PlotSlots = typeof __propDef.slots;
+export default class Plot extends SvelteComponentTyped<PlotProps, PlotEvents, PlotSlots> {
+}

package/README.md

@@ -0,0 +1,49 @@
+# Plotly.js for Svelte
+This is an unofficial package that lets you efficiently use [plotly.js](https://plotly.com/javascript/) inside your Svelte or SvelteKit app.
+
+## Usage
+
+1. Install using `yarn add svelte-plotly.js` or `npm install svelte-plotly.js`.
+2. Use in your app
+
+```svelte
+<script lang="ts">
+  import Plot from 'svelte-plotly.js';
+
+  const data = [
+    {
+      x: [1, 2, 3, 4, 5],
+      y: [y0, 2, 4, 8, 16]
+    }
+  ];
+</script>
+
+<Plot
+  {data}
+  layout={{
+    margin: { t: 0 }
+  }}
+  fillParent='width'
+  debounce=250
+/>
+```
+
+## Properties
+| Prop      | Type        | Description
+| --------- | ----------- | -------------
+| **required `data`** | `Data[]`| array of trace data, see https://plot.ly/javascript/reference/
+| `layout`  | `Partial<Layout>` | layout of the plot, see https://plot.ly/javascript/reference/#layout
+| `config`  | `Partial<Config>` | configuration, see https://plot.ly/javascript/configuration-options/
+| `class`   | `string`          | class that will be passed to the HTML element wrapping the plot
+| `fillParent` | `boolean | 'width' | 'height'` | automatically resize the plot to fill the width and/or height of its parent element
+| `debounce` | `number|DebounceOptions` | debounce all changes to the plot
+| `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
+| `bind:element` | `HTMLDivElement` | the HTML element wrapping the plot
+| `bind:plot` | `PlotlyHTMLElement` | the inner HTML element containing the plot
+
+
+# Roadmap
+ * [x] add autosizing
+ * [x] add debouncing
+ * [ ] add unit tests
+ * [ ] add SSR rendering to an image

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "svelte-plotly.js",
+  "version": "0.1.0",
+  "author": {
+    "name": "Michal Grňo (m93a)",
+    "url": "https://github.com/m93a/"
+  },
+  "description": "Unoficial Plotly package for Svelte and SvelteKit",
+  "bugs": {
+    "url": "https://github.com/m93a/svelte-plotly.js"
+  },
+  "packageManager": "yarn@1.22.5",
+  "license": "MIT",
+  "paths": {
+    "*": [
+      "src/types/*.d.ts"
+    ]
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@types/lodash": "^4.14.182",
+    "@types/plotly.js": "^1.54.20",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.5.0",
+    "sass": "^1.51.0",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.5.9",
+    "tslib": "^2.3.1",
+    "typescript": "~4.6.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "plotly.js-dist": "^2.12.1"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./Plot.svelte": "./Plot.svelte"
+  }
+}