From 4636247acc77a72301016e60b66e458882aa2108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helmut=20H=C3=A4nsel?= Date: Thu, 15 Feb 2024 12:10:44 +0100 Subject: [PATCH] make original vueplotly.js work --- assets/js/vueplotly.js | 4 ++-- assets/js/vueplotly.min.js | 2 +- src/StipplePlotly.jl | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/js/vueplotly.js b/assets/js/vueplotly.js index 8c9acab..03b183c 100644 --- a/assets/js/vueplotly.js +++ b/assets/js/vueplotly.js @@ -99,7 +99,7 @@ e)), {}) , camelize = cached((e=>e.replace(regex, ((e,t)=>t ? t.toUpperCase() : "")))) , directives = {}; "undefined" != typeof window && (directives.resize = Vueresize), -window.plotly = {plotly: { +Vue.component("plotly", { template: '
', inheritAttrs: !1, directives: directives, @@ -211,4 +211,4 @@ window.plotly = {plotly: { Plotly.react(this.$el, this.data, this.innerLayout, this.config) } } -}}; \ No newline at end of file +}); \ No newline at end of file diff --git a/assets/js/vueplotly.min.js b/assets/js/vueplotly.min.js index 4f4c5cc..00baaa0 100644 --- a/assets/js/vueplotly.min.js +++ b/assets/js/vueplotly.min.js @@ -1 +1 @@ -document.querySelectorAll("plotly").forEach(e=>{["data","layout","config"].forEach(t=>{let i=e.getAttribute(t),r=e.getAttribute(":"+t);if(null!=i&&null!=r)throw Error("Both bound and literal attribute found for "+t+". Only one is allowed.");if(null==r&&null!=i)try{let n=atob(i),l=function e(t){let i=JSON.parse(t),r=function e(t){return Array.isArray(t)?"["+t.map(t=>e(t)).join(", ")+"]":"object"==typeof t?"{"+Object.keys(t).map(e=>{let i=t[e];return`${e}:${i="string"==typeof i&&i.startsWith("$_{")&&i.endsWith("}")?i.slice(3,-1):JSON.stringify(i)}`}).join(", ")+"}":JSON.stringify(t)}(i);return r}(n);e.setAttribute(":"+t,l),e.removeAttribute(t)}catch(o){if(i.startsWith("{")&&i.endsWith("}")||i.startsWith("[")&&i.endsWith("]"))e.setAttribute(":"+t,i),e.removeAttribute(t);else throw Error("Invalid literal attribute for "+t+". Expected a base64-encoded JSON string, or a valid JS object.")}})});const eventsName=["AfterExport","AfterPlot","Animated","AnimatingFrame","AnimationInterrupted","AutoSize","BeforeExport","ButtonClicked","Click","ClickAnnotation","Deselect","DoubleClick","Framework","Hover","LegendClick","LegendDoubleClick","Relayout","Restyle","Redraw","Selected","Selecting","SliderChange","SliderEnd","SliderStart","Transitioning","TransitionInterrupted","Unhover"],events=eventsName.map(e=>e.toLocaleLowerCase()).map(e=>({completeName:"plotly_"+e,handler:t=>(...i)=>{t.$emit.apply(t,[e,...i])}})),plotlyFunctions=["restyle","relayout","update","addTraces","deleteTraces","moveTraces","extendTraces","prependTraces","purge"];function cached(e){let t=Object.create(null);return function(i){return t[i]||(t[i]=e(i))}}const regex=/-(\w)/g,methods=plotlyFunctions.reduce((e,t)=>(e[t]=function(...e){return Plotly[t].apply(Plotly,[this.$el,...e])},e),{}),camelize=cached(e=>e.replace(regex,(e,t)=>t?t.toUpperCase():"")),directives={};"undefined"!=typeof window&&(directives.resize=Vueresize), window.plotly = {"plotly": {template:'
',inheritAttrs:!1,directives:directives,props:{data:{type:Array},layout:{type:Object},config:{type:Object},id:{type:String,required:!1,default:null}},data(){return{scheduled:null,innerLayout:{...this.layout}}},mounted(){Plotly.newPlot(this.$el,this.data,this.innerLayout,this.config),events.forEach(e=>{this.$el.on(e.completeName,e.handler(this))})},watch:{data:{handler(){this.schedule({replot:!0})},deep:!0},options:{handler(e,t){JSON.stringify(e)!==JSON.stringify(t)&&this.schedule({replot:!0})},deep:!0},layout(e){this.innerLayout={...e},this.schedule({replot:!1})}},computed:{options(){return{responsive:!1,...Object.keys(this.$attrs).reduce((e,t)=>(e[camelize(t)]=this.$attrs[t],e),{})}}},beforeDestroy(){events.forEach(e=>this.$el.removeAllListeners(e.completeName)),Plotly.purge(this.$el)},methods:{...methods,onResize(){Plotly.Plots.resize(this.$el)},schedule(e){let{scheduled:t}=this;t?t.replot=t.replot||e.replot:(this.scheduled=e,this.$nextTick(()=>{let{scheduled:{replot:e}}=this;this.scheduled=null,e?this.react():this.relayout(this.innerLayout)}))},toImage(e){let t=Object.assign(this.getPrintOptions(),e);return Plotly.toImage(this.$el,t)},downloadImage(e){let t=`plot--${(new Date).toISOString()}`,i=Object.assign(this.getPrintOptions(),{filename:t},e);return Plotly.downloadImage(this.$el,i)},getPrintOptions(){let{$el:e}=this;return{format:"png",width:e.clientWidth,height:e.clientHeight}},react(){Plotly.react(this.$el,this.data,this.innerLayout,this.config)}}}}; \ No newline at end of file +document.querySelectorAll("plotly").forEach(e=>{["data","layout","config"].forEach(t=>{let i=e.getAttribute(t),r=e.getAttribute(":"+t);if(null!=i&&null!=r)throw Error("Both bound and literal attribute found for "+t+". Only one is allowed.");if(null==r&&null!=i)try{let n=atob(i),l=function e(t){let i=JSON.parse(t),r=function e(t){return Array.isArray(t)?"["+t.map(t=>e(t)).join(", ")+"]":"object"==typeof t?"{"+Object.keys(t).map(e=>{let i=t[e];return`${e}:${i="string"==typeof i&&i.startsWith("$_{")&&i.endsWith("}")?i.slice(3,-1):JSON.stringify(i)}`}).join(", ")+"}":JSON.stringify(t)}(i);return r}(n);e.setAttribute(":"+t,l),e.removeAttribute(t)}catch(o){if(i.startsWith("{")&&i.endsWith("}")||i.startsWith("[")&&i.endsWith("]"))e.setAttribute(":"+t,i),e.removeAttribute(t);else throw Error("Invalid literal attribute for "+t+". Expected a base64-encoded JSON string, or a valid JS object.")}})});const eventsName=["AfterExport","AfterPlot","Animated","AnimatingFrame","AnimationInterrupted","AutoSize","BeforeExport","ButtonClicked","Click","ClickAnnotation","Deselect","DoubleClick","Framework","Hover","LegendClick","LegendDoubleClick","Relayout","Restyle","Redraw","Selected","Selecting","SliderChange","SliderEnd","SliderStart","Transitioning","TransitionInterrupted","Unhover"],events=eventsName.map(e=>e.toLocaleLowerCase()).map(e=>({completeName:"plotly_"+e,handler:t=>(...i)=>{t.$emit.apply(t,[e,...i])}})),plotlyFunctions=["restyle","relayout","update","addTraces","deleteTraces","moveTraces","extendTraces","prependTraces","purge"];function cached(e){let t=Object.create(null);return function(i){return t[i]||(t[i]=e(i))}}const regex=/-(\w)/g,methods=plotlyFunctions.reduce((e,t)=>(e[t]=function(...e){return Plotly[t].apply(Plotly,[this.$el,...e])},e),{}),camelize=cached(e=>e.replace(regex,(e,t)=>t?t.toUpperCase():"")),directives={};"undefined"!=typeof window&&(directives.resize=Vueresize), Vue.component("plotly", {template:'
',inheritAttrs:!1,directives:directives,props:{data:{type:Array},layout:{type:Object},config:{type:Object},id:{type:String,required:!1,default:null}},data(){return{scheduled:null,innerLayout:{...this.layout}}},mounted(){Plotly.newPlot(this.$el,this.data,this.innerLayout,this.config),events.forEach(e=>{this.$el.on(e.completeName,e.handler(this))})},watch:{data:{handler(){this.schedule({replot:!0})},deep:!0},options:{handler(e,t){JSON.stringify(e)!==JSON.stringify(t)&&this.schedule({replot:!0})},deep:!0},layout(e){this.innerLayout={...e},this.schedule({replot:!1})}},computed:{options(){return{responsive:!1,...Object.keys(this.$attrs).reduce((e,t)=>(e[camelize(t)]=this.$attrs[t],e),{})}}},beforeDestroy(){events.forEach(e=>this.$el.removeAllListeners(e.completeName)),Plotly.purge(this.$el)},methods:{...methods,onResize(){Plotly.Plots.resize(this.$el)},schedule(e){let{scheduled:t}=this;t?t.replot=t.replot||e.replot:(this.scheduled=e,this.$nextTick(()=>{let{scheduled:{replot:e}}=this;this.scheduled=null,e?this.react():this.relayout(this.innerLayout)}))},toImage(e){let t=Object.assign(this.getPrintOptions(),e);return Plotly.toImage(this.$el,t)},downloadImage(e){let t=`plot--${(new Date).toISOString()}`,i=Object.assign(this.getPrintOptions(),{filename:t},e);return Plotly.downloadImage(this.$el,i)},getPrintOptions(){let{$el:e}=this;return{format:"png",width:e.clientWidth,height:e.clientHeight}},react(){Plotly.react(this.$el,this.data,this.innerLayout,this.config)}}}); \ No newline at end of file diff --git a/src/StipplePlotly.jl b/src/StipplePlotly.jl index 6c19a00..0423dce 100644 --- a/src/StipplePlotly.jl +++ b/src/StipplePlotly.jl @@ -84,6 +84,7 @@ include("Layouts.jl") function __init__() deps_routes() Stipple.deps!(@__MODULE__, deps) + Stipple.register_global_components("plotly", legacy = true) @require PlotlyBase = "a03496cd-edff-5a9b-9e67-9cda94a718b5" begin @static if !isdefined(Base, :get_extension)