@flowtools/uplot 0.0.4 → 0.0.6

package/README.md

@@ -7,7 +7,7 @@
 ## usage
 
 ```shell
-pnpm add @flowtools/uplot
+pnpm add @flowtools/uplot uplot @vueuse/core
 ```
 
 ## Usage
@@ -55,6 +55,7 @@ You can use header and footer slots to add or customize the header and legend. B
     </template>
   </Uplot>
 </template>
+```
 
 ## Interacting with the uplot
 

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as U, ref as A, onMounted as V, watch as b, nextTick as $, openBlock as u, createElementBlock as p, renderSlot as k, unref as f, createElementVNode as g, createTextVNode as P, toDisplayString as h, createCommentVNode as D, Fragment as N, renderList as F, normalizeClass as L, normalizeStyle as j } from "vue";
+import { defineComponent as U, ref as k, onMounted as V, watch as b, nextTick as $, openBlock as u, createElementBlock as p, renderSlot as D, unref as f, createElementVNode as g, createTextVNode as P, toDisplayString as h, createCommentVNode as S, Fragment as F, renderList as N, normalizeClass as L, normalizeStyle as j } from "vue";
 import M from "uplot";
-import { useElementSize as q, useVModel as C } from "@vueuse/core";
+import { useElementSize as R, useVModel as C } from "@vueuse/core";
 const T = (a) => {
   if (typeof a == "object" && a !== null) {
     if (typeof Object.getPrototypeOf == "function") {
@@ -30,10 +30,10 @@ c.withOptions = (a, ...r) => {
   const s = c(...r);
   return c.options = B, s;
 };
-const G = { class: "__uplot-root" }, H = {
+const q = { class: "__uplot-root" }, G = {
   key: 0,
   class: "extra-info"
-}, I = /* @__PURE__ */ g("br", null, null, -1), J = { style: { "text-align": "left" } }, K = { class: "__uplot-legend" }, Q = ["onClick"], R = {
+}, H = /* @__PURE__ */ g("br", null, null, -1), I = { style: { "text-align": "left" } }, J = { class: "__uplot-legend" }, K = ["onClick"], Q = {
   key: 1,
   class: "__uplot-legend-value"
 }, W = {
@@ -44,7 +44,7 @@ const G = { class: "__uplot-root" }, H = {
   props: {
     options: null,
     data: null,
-    resetScale: { type: Boolean, default: !1 },
+    noResetScale: { type: Boolean, default: !1 },
     showDebug: { type: Boolean, default: !1 },
     noFooter: { type: Boolean, default: !1 },
     zoom: { default: () => [null, null] },
@@ -52,7 +52,7 @@ const G = { class: "__uplot-root" }, H = {
   },
   emits: ["select", "cursor", "update:zoom", "update:series"],
   setup(a, { expose: r, emit: s }) {
-    const o = a, v = A(), { width: y, height: w } = q(v), S = C(o, "zoom", s, { passive: !0 }), i = C(o, "series", s, { passive: !0 }), E = {
+    const o = a, v = k(), { width: y, height: w } = R(v), x = C(o, "zoom", s, { passive: !0 }), i = C(o, "series", s, { passive: !0 }), E = {
       title: void 0,
       legend: {
         show: !1
@@ -87,7 +87,7 @@ const G = { class: "__uplot-root" }, H = {
         ],
         setSelect: [
           (e) => {
-            s("select", e.select), o.showDebug && console.log("setSelect", e.select), S.value = [
+            s("select", e.select), o.showDebug && console.log("setSelect", e.select), x.value = [
               e.posToVal(e.select.left, "x"),
               e.posToVal(e.select.left + e.select.width, "x")
             ];
@@ -95,7 +95,7 @@ const G = { class: "__uplot-root" }, H = {
         ],
         setScale: [
           (e) => {
-            S.value = [
+            x.value = [
               e.scales.x.min || null,
               e.scales.x.max || null
             ];
@@ -104,36 +104,36 @@ const G = { class: "__uplot-root" }, H = {
       }
     };
     let n;
-    const x = A();
-    function z() {
-      n && n.destroy(), n = new M({ width: 100, height: 100, ...c(o.options, E) }, o.data, v.value), x.value = n, o.zoom[0] !== null && o.zoom[1] !== null && n.setScale("x", { min: o.zoom[0], max: o.zoom[1] }), setTimeout(() => {
-        O();
+    const z = k();
+    function O() {
+      n && n.destroy(), n = new M({ width: 100, height: 100, ...c(o.options, E) }, o.data, v.value), z.value = n, o.zoom[0] !== null && o.zoom[1] !== null && n.setScale("x", { min: o.zoom[0], max: o.zoom[1] }), setTimeout(() => {
+        A();
       }, 0);
     }
     V(() => {
-      z();
+      O();
     }), b([y, w], () => {
       $(() => {
-        O();
+        A();
       });
     }), b(o.data, (e) => {
-      if (o.resetScale) {
+      if (o.noResetScale) {
         n.setData(e);
         return;
       }
       n.setData(e, !0), n.redraw();
     }), b(o.options, (e, l) => {
-      o.showDebug && console.log("watch options", e, l), z();
+      o.showDebug && console.log("watch options", e, l), O();
     });
-    function O() {
+    function A() {
       n.setSize({ width: y.value, height: w.value }), o.showDebug && console.log("resize", n);
     }
     function m(e) {
       var l, t;
       typeof e == "object" && (e = ((l = i.value) == null ? void 0 : l.indexOf(e)) || -1), n.setSeries(e, { show: !n.series[e].show }), (t = i.value) != null && t[e] && (i.value[e].show = n.series[e].show);
     }
-    return r({ toggleShow: m, uplot: x }), (e, l) => (u(), p("div", G, [
-      k(e.$slots, "header", {
+    return r({ toggleShow: m, uplot: z }), (e, l) => (u(), p("div", q, [
+      D(e.$slots, "header", {
         series: f(i),
         toggleShow: m
       }),
@@ -142,17 +142,18 @@ const G = { class: "__uplot-root" }, H = {
         ref: v,
         class: "__uplot"
       }, null, 512),
-      a.showDebug ? (u(), p("div", H, [
+      a.showDebug ? (u(), p("div", G, [
         P(h(f(y)) + " x " + h(f(w)) + " ", 1),
-        I,
-        g("pre", J, h(f(i)), 1)
-      ])) : D("", !0),
-      k(e.$slots, "footer", {
+        H,
+        g("pre", I, h(f(i)), 1)
+      ])) : S("", !0),
+      a.noFooter ? S("", !0) : D(e.$slots, "footer", {
+        key: 1,
         series: f(i),
         toggleShow: m
       }, () => [
-        g("div", K, [
-          (u(!0), p(N, null, F(f(i), (t, d) => {
+        g("div", J, [
+          (u(!0), p(F, null, N(f(i), (t, d) => {
             var _;
             return u(), p("div", {
               key: t.label,
@@ -164,9 +165,9 @@ const G = { class: "__uplot-root" }, H = {
                 key: 0,
                 style: j({ color: t.stroke || "black" }),
                 class: "__uplot-legend-label"
-              }, h(t.label), 5)) : D("", !0),
-              t.value ? (u(), p("span", R, h(t.value), 1)) : (u(), p("span", W, "--"))
-            ], 14, Q);
+              }, h(t.label), 5)) : S("", !0),
+              t.value ? (u(), p("span", Q, h(t.value), 1)) : (u(), p("span", W, "--"))
+            ], 14, K);
           }), 128))
         ])
       ])

package/dist/index.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowtools/uplot",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Modern vue component for uplot",
   "keywords": [
     "add keywords"