gradio/frontend

1<script lang="ts">2	//@ts-nocheck3	import Plotly from "plotly.js-dist-min";4	import { afterUpdate } from "svelte";5 6	export let value;7	export let show_label: boolean;8	export let loaded_plotly_css = false;9 10	$: plot = value?.plot;11 12	let plot_div;13	let plotly_global_style;14 15	function load_plotly_css(): void {16		if (!loaded_plotly_css) {17			plotly_global_style = document.getElementById("plotly.js-style-global");18			const plotly_style_clone = plotly_global_style.cloneNode();19			plot_div.appendChild(plotly_style_clone);20			for (const rule of plotly_global_style.sheet.cssRules) {21				plotly_style_clone.sheet.insertRule(rule.cssText);22			}23			loaded_plotly_css = true;24		}25	}26 27	afterUpdate(async () => {28		load_plotly_css();29 30		let plotObj = JSON.parse(plot);31 32		// the docs aren't very good but this works33		plotObj.config = plotObj.config || {};34		plotObj.config.responsive = true;35		plotObj.responsive = true;36		plotObj.layout.autosize = true;37 38		if (plotObj.layout.margin == undefined) {39			plotObj.layout.margin = {};40		}41		if (plotObj.layout.title && show_label) {42			// so title does not get cut off by label43			plotObj.layout.margin.t = Math.max(100, plotObj.layout.margin.t || 0);44		}45		plotObj.layout.margin.autoexpand = true;46 47		Plotly.react(plot_div, plotObj.data, plotObj.layout, plotObj.config);48		Plotly.Plots.resize(plot_div);49	});50</script>51 52<div data-testid={"plotly"} bind:this={plot_div}></div>53