@flowtools/uplot 0.0.1 → 0.0.3

package/dist/index.es.js

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

package/dist/style.css

@@ -1 +1 @@
-.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:rgba(0,0,0,.07);position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;z-index:100}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;z-index:100;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}.__uplot{flex:1 1 auto;min-height:70px;position:relative}.__uplot-root{display:flex;flex-direction:column;width:100%;height:100%}.__uplot .uplot{position:absolute;top:0;left:0;right:0;bottom:0}.__uplot-legend{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;padding:.5em;gap:.25em;font-size:10px}.__uplot-legend-serie{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:center;padding:5px;background-color:#fff;color:#000;border:1px solid lightgray;border-radius:5px;min-width:6em;min-height:4em}.__uplot-i-0{min-width:12em;justify-content:end}.extra-info{position:absolute;bottom:0;left:0;background-color:#fff;color:#000;padding:5px;border:1px solid black}
+.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:rgba(0,0,0,.07);position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;z-index:100}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;z-index:100;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}.__uplot{flex:1 1 auto;min-height:120px;position:relative}.__uplot-root{display:flex;flex-direction:column;width:100%;height:100%}.__uplot .uplot{position:absolute;top:0;left:0;right:0;bottom:0}.__uplot-legend{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;padding:.5em;gap:.25em;font-size:10px}.__uplot-legend-serie{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:center;padding:5px;background-color:#fff;color:#000;border:1px solid lightgray;border-radius:5px;min-width:6em;min-height:4em}.__uplot-i-0{min-width:12em;justify-content:end}.extra-info{position:absolute;bottom:0;left:0;background-color:#fff;color:#000;padding:5px;border:1px solid black}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowtools/uplot",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Modern vue component for uplot",
   "keywords": [
     "add keywords"
@@ -21,7 +21,8 @@
     ".": {
       "import": "./dist/index.es.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -38,19 +39,19 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.36.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.29.2",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/coverage-c8": "^0.29.3",
     "@vue/test-utils": "^2.3.1",
     "@vueuse/core": "^9.13.0",
     "bumpp": "^9.0.0",
-    "eslint": "^8.35.0",
-    "jsdom": "^21.1.0",
-    "typescript": "^4.9.5",
+    "eslint": "^8.36.0",
+    "jsdom": "^21.1.1",
+    "typescript": "^5.0.2",
     "uplot": "^1.6.24",
     "vi-canvas-mock": "^1.0.0",
-    "vite": "^4.1.4",
+    "vite": "^4.2.0",
     "vite-plugin-dts": "^2.1.0",
-    "vitest": "^0.29.2",
+    "vitest": "^0.29.3",
     "vue": "^3.2.47"
   },
   "publishConfig": {