UNPKG

@flowtools/uplot

Version:

Modern vue component for uplot

2 lines (1 loc) 5.05 kB
(function(c,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@vueuse/core"),require("uplot")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","uplot"],o):(c=typeof globalThis<"u"?globalThis:c||self,o(c["change-name"]={},c.Vue,c.VueUseCore,c.uPlot))})(this,function(c,o,B,D){"use strict";function _(i){if(typeof i=="object"&&i!==null){if(typeof Object.getPrototypeOf=="function"){const r=Object.getPrototypeOf(i);return r===Object.prototype||r===null}return Object.prototype.toString.call(i)==="[object Object]"}return!1}function d(...i){return i.reduce((r,a)=>{if(Array.isArray(a))throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");return a&&Object.keys(a).forEach(t=>{["__proto__","constructor","prototype"].includes(t)||(Array.isArray(r[t])&&Array.isArray(a[t])?r[t]=d.options.mergeArrays?Array.from(new Set(r[t].concat(a[t]))):a[t]:_(r[t])&&_(a[t])?r[t]=d(r[t],a[t]):r[t]=a[t])}),r},{})}const b={mergeArrays:!0};d.options=b,d.withOptions=(i,...r)=>{d.options={mergeArrays:!0,...i};const a=d(...r);return d.options=b,a};const E={class:"__uplot-root"},O={key:0,class:"extra-info"},z={style:{"text-align":"left"}},A={class:"__uplot-legend"},C=["onClick"],j={key:1,class:"__uplot-legend-value"},T={key:2,class:"__uplot-legend-value"},M=o.defineComponent({__name:"uplot",props:o.mergeModels({options:{},data:{},noResetScale:{type:Boolean,default:!1},showDebug:{type:Boolean,default:!1},noFooter:{type:Boolean,default:!1}},{zoom:{default:()=>[null,null]},zoomModifiers:{},series:{default:()=>[]},seriesModifiers:{}}),emits:o.mergeModels(["select","cursor"],["update:zoom","update:series"]),setup(i,{expose:r,emit:a}){const t=i,w=a,u=o.useTemplateRef("el"),{width:h,height:g}=B.useElementSize(u),f=o.useModel(i,"zoom"),p=o.useModel(i,"series"),N={title:void 0,legend:{show:!1},hooks:{init:[e=>{t.showDebug&&console.log("init",e),p.value=e.series.map((s,n)=>({label:s.label,stroke:typeof s.stroke=="function"?s.stroke(e,n):null,value:null,data:null,show:s.show}))}],setCursor:[e=>{w("cursor",e.cursor),p.value=e.series.map((s,n)=>({label:s.label,stroke:typeof s.stroke=="function"?s.stroke(e,n):null,value:e.cursor.idx&&e.data[n][e.cursor.idx]?typeof s.value=="function"?s.value(e,e.data[n][e.cursor.idx],n,e.cursor.idx):e.data[n][e.cursor.idx]:null,data:e.cursor?.idx?e.data[n][e.cursor?.idx]:null,show:s.show}))}],setSelect:[e=>{w("select",e.select),t.showDebug&&console.log("setSelect",e.select),f.value=[e.posToVal(e.select.left,"x"),e.posToVal(e.select.left+e.select.width,"x")]}],setScale:[e=>{t.showDebug&&console.log("setScale",e.scales),f.value=[e.scales.x.min||null,e.scales.x.max||null]}]}};let l;const S=o.ref();function k(){l&&l.destroy(),l=new D({width:100,height:100,...d(t.options,N)},t.data,u.value),S.value=l,f.value&&f.value[0]!==null&&f.value[1]!==null&&l.setScale("x",{min:f.value[0],max:f.value[1]}),setTimeout(()=>{x()},0)}o.onMounted(()=>{k()}),o.watch([h,g],()=>{o.nextTick(()=>{x()})}),o.watch(t.data,e=>{if(t.noResetScale){l.setData(e,!1),l.redraw(!1);return}l.setData(e,!0)}),o.watch(t.options,(e,s)=>{t.showDebug&&console.log("watch options",e,s),k()}),o.watch(()=>f.value,e=>{e&&e[0]!==null&&e[1]!==null&&(l.scales.x.min!==e[0]||l.scales.x.max!==e[1])&&(t.showDebug&&console.log("watch zoom setScale",l.scales.x.min,e[0],l.scales.x.max,e[1]),l.setScale("x",{min:e[0],max:e[1]}))});function x(){l.setSize({width:h.value,height:g.value}),t.showDebug&&console.log("resize",l)}function m(e){typeof e=="object"&&(e=p.value?.indexOf(e)||-1),l.setSeries(e,{show:!l.series[e].show}),p.value?.[e]&&(p.value[e].show=l.series[e].show)}return r({toggleShow:m,uplot:S}),(e,s)=>(o.openBlock(),o.createElementBlock("div",E,[o.renderSlot(e.$slots,"header",{series:p.value,toggleShow:m}),o.createElementVNode("div",{ref_key:"el",ref:u,class:"__uplot"},null,512),e.showDebug?(o.openBlock(),o.createElementBlock("div",O,[o.createTextVNode(o.toDisplayString(o.unref(h))+" x "+o.toDisplayString(o.unref(g))+" ",1),s[0]||(s[0]=o.createElementVNode("br",null,null,-1)),o.createElementVNode("pre",z,o.toDisplayString(p.value),1)])):o.createCommentVNode("",!0),e.noFooter?o.createCommentVNode("",!0):o.renderSlot(e.$slots,"footer",{key:1,series:p.value,toggleShow:m},()=>[o.createElementVNode("div",A,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(p.value,(n,y)=>(o.openBlock(),o.createElementBlock("div",{key:n.label,class:o.normalizeClass(["__uplot-legend-series",[`__uplot-${n.label?.toLowerCase()}`,`__uplot-i-${y}`]]),style:o.normalizeStyle({backgroundColor:n.show?"":"lightgrey"}),onClick:P=>m(y)},[y!==0?(o.openBlock(),o.createElementBlock("span",{key:0,style:o.normalizeStyle({color:n.stroke||"black"}),class:"__uplot-legend-label"},o.toDisplayString(n.label),5)):o.createCommentVNode("",!0),n.value?(o.openBlock(),o.createElementBlock("span",j,o.toDisplayString(n.value),1)):(o.openBlock(),o.createElementBlock("span",T,"--"))],14,C))),128))])])]))}});c.Uplot=M,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});