@flowtools/uplot 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -1,45 +1,45 @@
1
- import { defineComponent as V, ref as k, onMounted as $, watch as b, nextTick as P, openBlock as u, createElementBlock as p, renderSlot as D, unref as f, createElementVNode as g, createTextVNode as F, toDisplayString as h, createCommentVNode as S, Fragment as N, renderList as U, normalizeClass as L, normalizeStyle as j } from "vue";
2
- import M from "uplot";
3
- import { useElementSize as R, useVModel as C } from "@vueuse/core";
4
- const T = (a) => {
5
- if (typeof a == "object" && a !== null) {
1
+ import { defineComponent as N, ref as D, onMounted as P, watch as v, nextTick as R, openBlock as p, createElementBlock as u, createTextVNode as j, toDisplayString as d, renderSlot as C, unref as m, createElementVNode as y, createCommentVNode as S, Fragment as U, renderList as L, normalizeClass as M, normalizeStyle as T } from "vue";
2
+ import q from "uplot";
3
+ import { useElementSize as G, useVModel as B } from "@vueuse/core";
4
+ const E = (n) => {
5
+ if (typeof n == "object" && n !== null) {
6
6
  if (typeof Object.getPrototypeOf == "function") {
7
- const r = Object.getPrototypeOf(a);
7
+ const r = Object.getPrototypeOf(n);
8
8
  return r === Object.prototype || r === null;
9
9
  }
10
- return Object.prototype.toString.call(a) === "[object Object]";
10
+ return Object.prototype.toString.call(n) === "[object Object]";
11
11
  }
12
12
  return !1;
13
- }, c = (...a) => a.reduce((r, l) => {
14
- if (Array.isArray(l))
13
+ }, c = (...n) => n.reduce((r, a) => {
14
+ if (Array.isArray(a))
15
15
  throw new TypeError(
16
16
  "Arguments provided to ts-deepmerge must be objects, not arrays."
17
17
  );
18
- return l && Object.keys(l).forEach((o) => {
19
- ["__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] : T(r[o]) && T(l[o]) ? r[o] = c(r[o], l[o]) : r[o] = l[o]);
18
+ return a && Object.keys(a).forEach((o) => {
19
+ ["__proto__", "constructor", "prototype"].includes(o) || (Array.isArray(r[o]) && Array.isArray(a[o]) ? r[o] = c.options.mergeArrays ? Array.from(new Set(r[o].concat(a[o]))) : a[o] : E(r[o]) && E(a[o]) ? r[o] = c(r[o], a[o]) : r[o] = a[o]);
20
20
  }), r;
21
- }, {}), B = {
21
+ }, {}), $ = {
22
22
  mergeArrays: !0
23
23
  };
24
- c.options = B;
25
- c.withOptions = (a, ...r) => {
24
+ c.options = $;
25
+ c.withOptions = (n, ...r) => {
26
26
  c.options = {
27
27
  mergeArrays: !0,
28
- ...a
28
+ ...n
29
29
  };
30
- const l = c(...r);
31
- return c.options = B, l;
30
+ const a = c(...r);
31
+ return c.options = $, a;
32
32
  };
33
- const q = { class: "__uplot-root" }, G = {
33
+ const H = { class: "__uplot-root" }, I = {
34
34
  key: 0,
35
35
  class: "extra-info"
36
- }, H = /* @__PURE__ */ g("br", null, null, -1), I = { style: { "text-align": "left" } }, J = { class: "__uplot-legend" }, K = ["onClick"], Q = {
36
+ }, J = /* @__PURE__ */ y("br", null, null, -1), K = { style: { "text-align": "left" } }, Q = { class: "__uplot-legend" }, W = ["onClick"], X = {
37
37
  key: 1,
38
38
  class: "__uplot-legend-value"
39
- }, W = {
39
+ }, Y = {
40
40
  key: 2,
41
41
  class: "__uplot-legend-value"
42
- }, oe = /* @__PURE__ */ V({
42
+ }, te = /* @__PURE__ */ N({
43
43
  __name: "uplot",
44
44
  props: {
45
45
  options: {},
@@ -51,8 +51,8 @@ const q = { class: "__uplot-root" }, G = {
51
51
  series: {}
52
52
  },
53
53
  emits: ["select", "cursor", "update:zoom", "update:series"],
54
- setup(a, { expose: r, emit: l }) {
55
- const o = a, v = k(), { width: y, height: w } = R(v), z = C(o, "zoom", l, { passive: !0 }), i = C(o, "series", l, { passive: !0 }), E = {
54
+ setup(n, { expose: r, emit: a }) {
55
+ const o = n, _ = a, b = D(), { width: w, height: x } = G(b), z = B(o, "zoom", _, { passive: !0 }), i = B(o, "series", _, { passive: !0 }), F = {
56
56
  title: void 0,
57
57
  legend: {
58
58
  show: !1
@@ -60,26 +60,26 @@ const q = { class: "__uplot-root" }, G = {
60
60
  hooks: {
61
61
  init: [
62
62
  (e) => {
63
- o.showDebug && console.log("init", e), i.value = e.series.map((s, t) => ({
64
- label: s.label,
65
- stroke: typeof s.stroke == "function" ? s.stroke(e, t) : null,
63
+ o.showDebug && console.log("init", e), i.value = e.series.map((l, t) => ({
64
+ label: l.label,
65
+ stroke: typeof l.stroke == "function" ? l.stroke(e, t) : null,
66
66
  value: null,
67
67
  data: null,
68
- show: s.show
68
+ show: l.show
69
69
  // ...s,
70
70
  }));
71
71
  }
72
72
  ],
73
73
  setCursor: [
74
74
  (e) => {
75
- l("cursor", e.cursor), i.value = e.series.map((s, t) => {
76
- var d, _;
75
+ _("cursor", e.cursor), i.value = e.series.map((l, t) => {
76
+ var f, h;
77
77
  return {
78
- label: s.label,
79
- stroke: typeof s.stroke == "function" ? s.stroke(e, t) : null,
80
- value: e.cursor.idx && e.data[t][e.cursor.idx] ? typeof s.value == "function" ? s.value(e, e.data[t][e.cursor.idx], t, e.cursor.idx) : e.data[t][e.cursor.idx] : null,
81
- data: (d = e.cursor) != null && d.idx ? e.data[t][(_ = e.cursor) == null ? void 0 : _.idx] : null,
82
- show: s.show
78
+ label: l.label,
79
+ stroke: typeof l.stroke == "function" ? l.stroke(e, t) : null,
80
+ value: e.cursor.idx && e.data[t][e.cursor.idx] ? typeof l.value == "function" ? l.value(e, e.data[t][e.cursor.idx], t, e.cursor.idx) : e.data[t][e.cursor.idx] : null,
81
+ data: (f = e.cursor) != null && f.idx ? e.data[t][(h = e.cursor) == null ? void 0 : h.idx] : null,
82
+ show: l.show
83
83
  // ...s,
84
84
  };
85
85
  });
@@ -87,7 +87,7 @@ const q = { class: "__uplot-root" }, G = {
87
87
  ],
88
88
  setSelect: [
89
89
  (e) => {
90
- l("select", e.select), o.showDebug && console.log("setSelect", e.select), z.value = [
90
+ _("select", e.select), o.showDebug && console.log("setSelect", e.select), z.value = [
91
91
  e.posToVal(e.select.left, "x"),
92
92
  e.posToVal(e.select.left + e.select.width, "x")
93
93
  ];
@@ -95,7 +95,7 @@ const q = { class: "__uplot-root" }, G = {
95
95
  ],
96
96
  setScale: [
97
97
  (e) => {
98
- z.value = [
98
+ o.showDebug && console.log("setScale", e.scales), z.value = [
99
99
  e.scales.x.min || null,
100
100
  e.scales.x.max || null
101
101
  ];
@@ -103,71 +103,74 @@ const q = { class: "__uplot-root" }, G = {
103
103
  ]
104
104
  }
105
105
  };
106
- let n;
107
- const x = k();
108
- function O() {
109
- 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(() => {
110
- A();
106
+ let s;
107
+ const O = D();
108
+ function A() {
109
+ s && s.destroy(), s = new q({ width: 100, height: 100, ...c(o.options, F) }, o.data, b.value), O.value = s, o.zoom[0] !== null && o.zoom[1] !== null && s.setScale("x", { min: o.zoom[0], max: o.zoom[1] }), setTimeout(() => {
110
+ k();
111
111
  }, 0);
112
112
  }
113
- $(() => {
114
- O();
115
- }), b([y, w], () => {
116
- P(() => {
117
- A();
113
+ P(() => {
114
+ A();
115
+ }), v([w, x], () => {
116
+ R(() => {
117
+ k();
118
118
  });
119
- }), b(o.data, (e) => {
119
+ }), v(o.data, (e) => {
120
120
  if (o.noResetScale) {
121
- n.setData(e);
121
+ s.setData(e, !1), s.redraw(!1);
122
122
  return;
123
123
  }
124
- n.setData(e, !0), n.redraw();
125
- }), b(o.options, (e, s) => {
126
- o.showDebug && console.log("watch options", e, s), O();
124
+ s.setData(e, !0);
125
+ }), v(o.options, (e, l) => {
126
+ o.showDebug && console.log("watch options", e, l), A();
127
+ }), v(() => o.zoom, (e, l) => {
128
+ e[0] !== null && e[1] !== null && (s.scales.x.min !== e[0] || s.scales.x.max !== e[1]) && (console.log("watch zoom setScale", s.scales.x.min, e[0], s.scales.x.max, e[1]), s.setScale("x", { min: e[0], max: e[1] }));
127
129
  });
128
- function A() {
129
- n.setSize({ width: y.value, height: w.value }), o.showDebug && console.log("resize", n);
130
+ function k() {
131
+ s.setSize({ width: w.value, height: x.value }), o.showDebug && console.log("resize", s);
130
132
  }
131
- function m(e) {
132
- var s, t;
133
- typeof e == "object" && (e = ((s = i.value) == null ? void 0 : s.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);
133
+ function g(e) {
134
+ var l, t;
135
+ typeof e == "object" && (e = ((l = i.value) == null ? void 0 : l.indexOf(e)) || -1), s.setSeries(e, { show: !s.series[e].show }), (t = i.value) != null && t[e] && (i.value[e].show = s.series[e].show);
134
136
  }
135
- return r({ toggleShow: m, uplot: x }), (e, s) => (u(), p("div", q, [
136
- D(e.$slots, "header", {
137
- series: f(i),
138
- toggleShow: m
137
+ return r({ toggleShow: g, uplot: O }), (e, l) => (p(), u("div", H, [
138
+ j(" r " + d(e.noResetScale) + " ", 1),
139
+ C(e.$slots, "header", {
140
+ series: m(i),
141
+ toggleShow: g
139
142
  }),
140
- g("div", {
143
+ y("div", {
141
144
  ref_key: "el",
142
- ref: v,
145
+ ref: b,
143
146
  class: "__uplot"
144
147
  }, null, 512),
145
- e.showDebug ? (u(), p("div", G, [
146
- F(h(f(y)) + " x " + h(f(w)) + " ", 1),
147
- H,
148
- g("pre", I, h(f(i)), 1)
148
+ e.showDebug ? (p(), u("div", I, [
149
+ j(d(m(w)) + " x " + d(m(x)) + " ", 1),
150
+ J,
151
+ y("pre", K, d(m(i)), 1)
149
152
  ])) : S("", !0),
150
- e.noFooter ? S("", !0) : D(e.$slots, "footer", {
153
+ e.noFooter ? S("", !0) : C(e.$slots, "footer", {
151
154
  key: 1,
152
- series: f(i),
153
- toggleShow: m
155
+ series: m(i),
156
+ toggleShow: g
154
157
  }, () => [
155
- g("div", J, [
156
- (u(!0), p(N, null, U(f(i), (t, d) => {
157
- var _;
158
- return u(), p("div", {
158
+ y("div", Q, [
159
+ (p(!0), u(U, null, L(m(i), (t, f) => {
160
+ var h;
161
+ return p(), u("div", {
159
162
  key: t.label,
160
- class: L(["__uplot-legend-series", [`__uplot-${(_ = t.label) == null ? void 0 : _.toLowerCase()}`, `__uplot-i-${d}`]]),
161
- style: j({ backgroundColor: t.show ? "" : "lightgrey" }),
162
- onClick: (X) => m(d)
163
+ class: M(["__uplot-legend-series", [`__uplot-${(h = t.label) == null ? void 0 : h.toLowerCase()}`, `__uplot-i-${f}`]]),
164
+ style: T({ backgroundColor: t.show ? "" : "lightgrey" }),
165
+ onClick: (Z) => g(f)
163
166
  }, [
164
- d !== 0 ? (u(), p("span", {
167
+ f !== 0 ? (p(), u("span", {
165
168
  key: 0,
166
- style: j({ color: t.stroke || "black" }),
169
+ style: T({ color: t.stroke || "black" }),
167
170
  class: "__uplot-legend-label"
168
- }, h(t.label), 5)) : S("", !0),
169
- t.value ? (u(), p("span", Q, h(t.value), 1)) : (u(), p("span", W, "--"))
170
- ], 14, K);
171
+ }, d(t.label), 5)) : S("", !0),
172
+ t.value ? (p(), u("span", X, d(t.value), 1)) : (p(), u("span", Y, "--"))
173
+ ], 14, W);
171
174
  }), 128))
172
175
  ])
173
176
  ])
@@ -175,5 +178,5 @@ const q = { class: "__uplot-root" }, G = {
175
178
  }
176
179
  });
177
180
  export {
178
- oe as Uplot
181
+ te as Uplot
179
182
  };
package/dist/index.umd.js CHANGED
@@ -1 +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,x,h){"use strict";const $="",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(t=>{["__proto__","constructor","prototype"].includes(t)||(Array.isArray(r[t])&&Array.isArray(n[t])?r[t]=d.options.mergeArrays?Array.from(new Set(r[t].concat(n[t]))):n[t]:w(r[t])&&w(n[t])?r[t]=d(r[t],n[t]):r[t]=n[t])}),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:{},data:{},noResetScale:{type:Boolean,default:!1},showDebug:{type:Boolean,default:!1},noFooter:{type:Boolean,default:!1},zoom:{default:()=>[null,null]},series:{}},emits:["select","cursor","update:zoom","update:series"],setup(c,{expose:r,emit:n}){const t=c,_=e.ref(),{width:g,height:y}=h.useElementSize(_),S=h.useVModel(t,"zoom",n,{passive:!0}),p=h.useVModel(t,"series",n,{passive:!0}),P={title:void 0,legend:{show:!1},hooks:{init:[o=>{t.showDebug&&console.log("init",o),p.value=o.series.map((s,l)=>({label:s.label,stroke:typeof s.stroke=="function"?s.stroke(o,l):null,value:null,data:null,show:s.show}))}],setCursor:[o=>{n("cursor",o.cursor),p.value=o.series.map((s,l)=>{var f,u;return{label:s.label,stroke:typeof s.stroke=="function"?s.stroke(o,l):null,value:o.cursor.idx&&o.data[l][o.cursor.idx]?typeof s.value=="function"?s.value(o,o.data[l][o.cursor.idx],l,o.cursor.idx):o.data[l][o.cursor.idx]:null,data:(f=o.cursor)!=null&&f.idx?o.data[l][(u=o.cursor)==null?void 0:u.idx]:null,show:s.show}})}],setSelect:[o=>{n("select",o.select),t.showDebug&&console.log("setSelect",o.select),S.value=[o.posToVal(o.select.left,"x"),o.posToVal(o.select.left+o.select.width,"x")]}],setScale:[o=>{S.value=[o.scales.x.min||null,o.scales.x.max||null]}]}};let a;const k=e.ref();function B(){a&&a.destroy(),a=new x({width:100,height:100,...d(t.options,P)},t.data,_.value),k.value=a,t.zoom[0]!==null&&t.zoom[1]!==null&&a.setScale("x",{min:t.zoom[0],max:t.zoom[1]}),setTimeout(()=>{z()},0)}e.onMounted(()=>{B()}),e.watch([g,y],()=>{e.nextTick(()=>{z()})}),e.watch(t.data,o=>{if(t.noResetScale){a.setData(o);return}a.setData(o,!0),a.redraw()}),e.watch(t.options,(o,s)=>{t.showDebug&&console.log("watch options",o,s),B()});function z(){a.setSize({width:g.value,height:y.value}),t.showDebug&&console.log("resize",a)}function m(o){var s,l;typeof o=="object"&&(o=((s=p.value)==null?void 0:s.indexOf(o))||-1),a.setSeries(o,{show:!a.series[o].show}),(l=p.value)!=null&&l[o]&&(p.value[o].show=a.series[o].show)}return r({toggleShow:m,uplot:k}),(o,s)=>(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(o.$slots,"header",{series:e.unref(p),toggleShow:m}),e.createElementVNode("div",{ref_key:"el",ref:_,class:"__uplot"},null,512),o.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),o.noFooter?e.createCommentVNode("",!0):e.renderSlot(o.$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:q=>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))])])]))}}),M="";i.Uplot=N,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
1
+ (function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("uplot"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","uplot","@vueuse/core"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i["change-name"]={},i.vue,i.Uplot,i.core))})(this,function(i,o,D,g){"use strict";const b=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,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]:b(r[t])&&b(a[t])?r[t]=d(r[t],a[t]):r[t]=a[t])}),r},{}),w={mergeArrays:!0};d.options=w,d.withOptions=(c,...r)=>{d.options={mergeArrays:!0,...c};const a=d(...r);return d.options=w,a};const E={class:"__uplot-root"},O={key:0,class:"extra-info"},A=o.createElementVNode("br",null,null,-1),j={style:{"text-align":"left"}},C={class:"__uplot-legend"},T=["onClick"],N={key:1,class:"__uplot-legend-value"},V={key:2,class:"__uplot-legend-value"},$=o.defineComponent({__name:"uplot",props:{options:{},data:{},noResetScale:{type:Boolean,default:!1},showDebug:{type:Boolean,default:!1},noFooter:{type:Boolean,default:!1},zoom:{default:()=>[null,null]},series:{}},emits:["select","cursor","update:zoom","update:series"],setup(c,{expose:r,emit:a}){const t=c,h=a,_=o.ref(),{width:y,height:S}=g.useElementSize(_),k=g.useVModel(t,"zoom",h,{passive:!0}),p=g.useVModel(t,"series",h,{passive:!0}),M={title:void 0,legend:{show:!1},hooks:{init:[e=>{t.showDebug&&console.log("init",e),p.value=e.series.map((n,l)=>({label:n.label,stroke:typeof n.stroke=="function"?n.stroke(e,l):null,value:null,data:null,show:n.show}))}],setCursor:[e=>{h("cursor",e.cursor),p.value=e.series.map((n,l)=>{var f,m;return{label:n.label,stroke:typeof n.stroke=="function"?n.stroke(e,l):null,value:e.cursor.idx&&e.data[l][e.cursor.idx]?typeof n.value=="function"?n.value(e,e.data[l][e.cursor.idx],l,e.cursor.idx):e.data[l][e.cursor.idx]:null,data:(f=e.cursor)!=null&&f.idx?e.data[l][(m=e.cursor)==null?void 0:m.idx]:null,show:n.show}})}],setSelect:[e=>{h("select",e.select),t.showDebug&&console.log("setSelect",e.select),k.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),k.value=[e.scales.x.min||null,e.scales.x.max||null]}]}};let s;const x=o.ref();function z(){s&&s.destroy(),s=new D({width:100,height:100,...d(t.options,M)},t.data,_.value),x.value=s,t.zoom[0]!==null&&t.zoom[1]!==null&&s.setScale("x",{min:t.zoom[0],max:t.zoom[1]}),setTimeout(()=>{B()},0)}o.onMounted(()=>{z()}),o.watch([y,S],()=>{o.nextTick(()=>{B()})}),o.watch(t.data,e=>{if(t.noResetScale){s.setData(e,!1),s.redraw(!1);return}s.setData(e,!0)}),o.watch(t.options,(e,n)=>{t.showDebug&&console.log("watch options",e,n),z()}),o.watch(()=>t.zoom,(e,n)=>{e[0]!==null&&e[1]!==null&&(s.scales.x.min!==e[0]||s.scales.x.max!==e[1])&&(console.log("watch zoom setScale",s.scales.x.min,e[0],s.scales.x.max,e[1]),s.setScale("x",{min:e[0],max:e[1]}))});function B(){s.setSize({width:y.value,height:S.value}),t.showDebug&&console.log("resize",s)}function u(e){var n,l;typeof e=="object"&&(e=((n=p.value)==null?void 0:n.indexOf(e))||-1),s.setSeries(e,{show:!s.series[e].show}),(l=p.value)!=null&&l[e]&&(p.value[e].show=s.series[e].show)}return r({toggleShow:u,uplot:x}),(e,n)=>(o.openBlock(),o.createElementBlock("div",E,[o.createTextVNode(" r "+o.toDisplayString(e.noResetScale)+" ",1),o.renderSlot(e.$slots,"header",{series:o.unref(p),toggleShow:u}),o.createElementVNode("div",{ref_key:"el",ref:_,class:"__uplot"},null,512),e.showDebug?(o.openBlock(),o.createElementBlock("div",O,[o.createTextVNode(o.toDisplayString(o.unref(y))+" x "+o.toDisplayString(o.unref(S))+" ",1),A,o.createElementVNode("pre",j,o.toDisplayString(o.unref(p)),1)])):o.createCommentVNode("",!0),e.noFooter?o.createCommentVNode("",!0):o.renderSlot(e.$slots,"footer",{key:1,series:o.unref(p),toggleShow:u},()=>[o.createElementVNode("div",C,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref(p),(l,f)=>{var m;return o.openBlock(),o.createElementBlock("div",{key:l.label,class:o.normalizeClass(["__uplot-legend-series",[`__uplot-${(m=l.label)==null?void 0:m.toLowerCase()}`,`__uplot-i-${f}`]]),style:o.normalizeStyle({backgroundColor:l.show?"":"lightgrey"}),onClick:P=>u(f)},[f!==0?(o.openBlock(),o.createElementBlock("span",{key:0,style:o.normalizeStyle({color:l.stroke||"black"}),class:"__uplot-legend-label"},o.toDisplayString(l.label),5)):o.createCommentVNode("",!0),l.value?(o.openBlock(),o.createElementBlock("span",N,o.toDisplayString(l.value),1)):(o.openBlock(),o.createElementBlock("span",V,"--"))],14,T)}),128))])])]))}});i.Uplot=$,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
@@ -14,36 +14,22 @@ export interface UplotElement extends Partial<HTMLElement> {
14
14
  toggleShow: (serie: Series | number) => void;
15
15
  uplot: Uplot;
16
16
  }
17
+ interface UplotProps {
18
+ options: Options;
19
+ data: Uplot.AlignedData;
20
+ noResetScale?: boolean;
21
+ showDebug?: boolean;
22
+ noFooter?: boolean;
23
+ zoom?: number[] | null[];
24
+ series?: Series[];
25
+ }
17
26
  declare function toggleShow(idx: number | Series): void;
18
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
19
- data: {
20
- type: import("vue").PropType<Uplot.AlignedData>;
21
- required: true;
22
- };
23
- series: {
24
- type: import("vue").PropType<Series[]>;
25
- };
26
- options: {
27
- type: import("vue").PropType<Options>;
28
- required: true;
29
- };
30
- noResetScale: {
31
- type: import("vue").PropType<boolean>;
32
- default: boolean;
33
- };
34
- showDebug: {
35
- type: import("vue").PropType<boolean>;
36
- default: boolean;
37
- };
38
- noFooter: {
39
- type: import("vue").PropType<boolean>;
40
- default: boolean;
41
- };
42
- zoom: {
43
- type: import("vue").PropType<number[] | null[]>;
44
- default: () => null[];
45
- };
46
- }, {
27
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UplotProps>, {
28
+ noResetScale: boolean;
29
+ showDebug: boolean;
30
+ noFooter: boolean;
31
+ zoom: () => null[];
32
+ }>, {
47
33
  toggleShow: typeof toggleShow;
48
34
  uplot: import("vue").Ref<any>;
49
35
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -51,35 +37,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
51
37
  cursor: (cursor: Uplot.Cursor) => void;
52
38
  "update:zoom": (zoom: number[]) => void;
53
39
  "update:series": (series: Series[]) => void;
54
- }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
55
- data: {
56
- type: import("vue").PropType<Uplot.AlignedData>;
57
- required: true;
58
- };
59
- series: {
60
- type: import("vue").PropType<Series[]>;
61
- };
62
- options: {
63
- type: import("vue").PropType<Options>;
64
- required: true;
65
- };
66
- noResetScale: {
67
- type: import("vue").PropType<boolean>;
68
- default: boolean;
69
- };
70
- showDebug: {
71
- type: import("vue").PropType<boolean>;
72
- default: boolean;
73
- };
74
- noFooter: {
75
- type: import("vue").PropType<boolean>;
76
- default: boolean;
77
- };
78
- zoom: {
79
- type: import("vue").PropType<number[] | null[]>;
80
- default: () => null[];
81
- };
82
- }>> & {
40
+ }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<UplotProps>, {
41
+ noResetScale: boolean;
42
+ showDebug: boolean;
43
+ noFooter: boolean;
44
+ zoom: () => null[];
45
+ }>>> & {
83
46
  onSelect?: ((select: Uplot.Select) => any) | undefined;
84
47
  onCursor?: ((cursor: Uplot.Cursor) => any) | undefined;
85
48
  "onUpdate:zoom"?: ((zoom: number[]) => any) | undefined;
@@ -91,27 +54,44 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
91
54
  zoom: number[] | null[];
92
55
  }, {}>, {
93
56
  header?(_: {
94
- series: (Series[] & {
57
+ series: {
95
58
  label: string | undefined;
96
59
  stroke: string | null;
97
60
  value: string | number | null | undefined;
98
61
  data: number | null | undefined;
99
62
  show: boolean | undefined;
100
- }[]) | undefined;
63
+ }[] | undefined;
101
64
  toggleShow: typeof toggleShow;
102
65
  }): any;
103
66
  footer?(_: {
104
- series: (Series[] & {
67
+ series: {
105
68
  label: string | undefined;
106
69
  stroke: string | null;
107
70
  value: string | number | null | undefined;
108
71
  data: number | null | undefined;
109
72
  show: boolean | undefined;
110
- }[]) | undefined;
73
+ }[] | undefined;
111
74
  toggleShow: typeof toggleShow;
112
75
  }): any;
113
76
  }>;
114
77
  export default _default;
78
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
79
+ type __VLS_TypePropsToRuntimeProps<T> = {
80
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
81
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
82
+ } : {
83
+ type: import('vue').PropType<T[K]>;
84
+ required: true;
85
+ };
86
+ };
87
+ type __VLS_WithDefaults<P, D> = {
88
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
89
+ default: D[K];
90
+ }> : P[K];
91
+ };
92
+ type __VLS_Prettify<T> = {
93
+ [K in keyof T]: T[K];
94
+ } & {};
115
95
  type __VLS_WithTemplateSlots<T, S> = T & {
116
96
  new (): {
117
97
  $slots: S;
package/dist/style.css CHANGED
@@ -1 +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;-webkit-user-select:none;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-series{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}
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;-webkit-user-select:none;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:#00000012;position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}.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;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-series{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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowtools/uplot",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Modern vue component for uplot",
5
5
  "keywords": [
6
6
  "add keywords"
@@ -38,21 +38,21 @@
38
38
  "vue": "=>3.2.47"
39
39
  },
40
40
  "devDependencies": {
41
- "@antfu/eslint-config": "^0.40.2",
42
- "@vitejs/plugin-vue": "^4.2.3",
41
+ "@antfu/eslint-config": "^2.6.3",
42
+ "@vitejs/plugin-vue": "^5.0.3",
43
43
  "@vitest/coverage-c8": "^0.33.0",
44
- "@vue/test-utils": "^2.4.1",
45
- "@vueuse/core": "^10.3.0",
46
- "bumpp": "^9.1.1",
47
- "eslint": "^8.46.0",
48
- "jsdom": "^22.1.0",
49
- "typescript": "^5.1.6",
50
- "uplot": "^1.6.24",
44
+ "@vue/test-utils": "^2.4.3",
45
+ "@vueuse/core": "^10.7.2",
46
+ "bumpp": "^9.3.0",
47
+ "eslint": "^8.56.0",
48
+ "jsdom": "^24.0.0",
49
+ "typescript": "^5.3.3",
50
+ "uplot": "^1.6.28",
51
51
  "vi-canvas-mock": "^1.0.0",
52
- "vite": "^4.4.9",
53
- "vite-plugin-dts": "^3.5.1",
54
- "vitest": "^0.34.1",
55
- "vue": "^3.3.4"
52
+ "vite": "^5.0.12",
53
+ "vite-plugin-dts": "^3.7.1",
54
+ "vitest": "^1.2.1",
55
+ "vue": "^3.4.15"
56
56
  },
57
57
  "publishConfig": {
58
58
  "access": "public"