@flowtools/uplot 0.0.3 → 0.0.4
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/README.md +60 -41
- package/dist/index.es.js +58 -56
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,48 +1,67 @@
|
|
|
1
|
-
# Vue
|
|
1
|
+
# Vue 3 uplot that is responsive
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Demo
|
|
4
4
|
|
|
5
|
+
[StackBlitz](https://stackblitz.com/edit/vitejs-vite-dhtmxj?file=src/App.vue)
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## Features
|
|
9
|
-
|
|
10
|
-
- [x] [Typescript](https://www.typescriptlang.org/)
|
|
11
|
-
- [x] [Vite](https://vitejs.dev/)
|
|
12
|
-
- [x] [Vue](https://vuejs.org/)
|
|
13
|
-
- [x] [Vue Macros](https://github.com/sxzz/unplugin-vue-macros)
|
|
14
|
-
- [x] [ESLint](https://eslint.org/) with [Antfu's ESLint Config](https://github.com/antfu/eslint-config)
|
|
15
|
-
- [x] [Bumpp](https://github.com/antfu/bumpp) github changelog generator
|
|
16
|
-
- [x] [Vitest](https://vitest.dev/)
|
|
17
|
-
- [x] [Pnpm](https://pnpm.io/)
|
|
18
|
-
- [x] [GitHub Actions]()
|
|
19
|
-
- [x] [NPM Local Registry]()
|
|
20
|
-
- [x] [Renovate]()
|
|
7
|
+
## usage
|
|
21
8
|
|
|
9
|
+
```shell
|
|
10
|
+
pnpm add @flowtools/uplot
|
|
11
|
+
```
|
|
22
12
|
|
|
23
13
|
## Usage
|
|
24
14
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
15
|
+
```vue
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { ref } from 'vue'
|
|
18
|
+
import type { AlignedData, Options } from '@flowtools/uplot'
|
|
19
|
+
import { Uplot } from '@flowtools/uplot'
|
|
20
|
+
|
|
21
|
+
const options = ref<Options>({
|
|
22
|
+
series: [
|
|
23
|
+
{},
|
|
24
|
+
{ label: 's1', stroke: 'red' },
|
|
25
|
+
{ label: 's2', stroke: 'green' },
|
|
26
|
+
{ label: 's3', stroke: 'blue' },
|
|
27
|
+
],
|
|
28
|
+
})
|
|
29
|
+
const data = ref<AlignedData>([[1654575670], [10], [10], [10]])
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<Uplot :options="options" :data="data" />
|
|
34
|
+
</template>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Customizing
|
|
38
|
+
|
|
39
|
+
You can use header and footer slots to add or customize the header and legend. Both slots receive the same props: series an array of series and toggleShow a function to toggle the show value of the series.
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<template>
|
|
43
|
+
<Uplot :options="options" :data="data">
|
|
44
|
+
<template #header>
|
|
45
|
+
<h2>Header</h2>
|
|
46
|
+
</template>
|
|
47
|
+
<template #footer="{ series, toggleShow }">
|
|
48
|
+
<div class="d-flex gap-3">
|
|
49
|
+
<div v-for="s in series" :key="s.label" class="legend-item" @click="toggleShow(s)">
|
|
50
|
+
<div class="badge" :style="{ backgroundColor: s.show ? s.stroke || 'var(--bs-secondary)' : 'lightgrey' }">
|
|
51
|
+
{{ s.label }} : {{ s.value || '--' }} {{ s.show }}
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
</Uplot>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
## Interacting with the uplot
|
|
60
|
+
|
|
61
|
+
There are many examples of interacting with the chart in the [uplot demos](https://leeoniya.github.io/uPlot/demos/).
|
|
62
|
+
|
|
63
|
+
The component emits events for series, cursor, and selection. You can use these events to get data from the component.
|
|
64
|
+
|
|
65
|
+
One way to interact with the chart is to use the `ref` prop to get a reference to the uplot component that exposes the uplot instance. Then you can use the [uplot API](https://leeoniya.github.io/uPlot/docs/api.html) to interact with the chart.
|
|
66
|
+
|
|
67
|
+
For more information see [App.vue in the repo](https://github.com/flow-tools/uplot/blob/main/src/App.vue).
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
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";
|
|
2
2
|
import M from "uplot";
|
|
3
|
-
import { useElementSize as
|
|
4
|
-
const
|
|
3
|
+
import { useElementSize as q, useVModel as C } from "@vueuse/core";
|
|
4
|
+
const T = (a) => {
|
|
5
5
|
if (typeof a == "object" && a !== null) {
|
|
6
6
|
if (typeof Object.getPrototypeOf == "function") {
|
|
7
7
|
const r = Object.getPrototypeOf(a);
|
|
@@ -16,42 +16,43 @@ const C = (a) => {
|
|
|
16
16
|
"Arguments provided to ts-deepmerge must be objects, not arrays."
|
|
17
17
|
);
|
|
18
18
|
return s && Object.keys(s).forEach((o) => {
|
|
19
|
-
["__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] :
|
|
19
|
+
["__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] : T(r[o]) && T(s[o]) ? r[o] = c(r[o], s[o]) : r[o] = s[o]);
|
|
20
20
|
}), r;
|
|
21
|
-
}, {}),
|
|
21
|
+
}, {}), B = {
|
|
22
22
|
mergeArrays: !0
|
|
23
23
|
};
|
|
24
|
-
c.options =
|
|
24
|
+
c.options = B;
|
|
25
25
|
c.withOptions = (a, ...r) => {
|
|
26
26
|
c.options = {
|
|
27
27
|
mergeArrays: !0,
|
|
28
28
|
...a
|
|
29
29
|
};
|
|
30
30
|
const s = c(...r);
|
|
31
|
-
return c.options =
|
|
31
|
+
return c.options = B, s;
|
|
32
32
|
};
|
|
33
|
-
const
|
|
33
|
+
const G = { class: "__uplot-root" }, H = {
|
|
34
34
|
key: 0,
|
|
35
35
|
class: "extra-info"
|
|
36
|
-
},
|
|
36
|
+
}, I = /* @__PURE__ */ g("br", null, null, -1), J = { style: { "text-align": "left" } }, K = { class: "__uplot-legend" }, Q = ["onClick"], R = {
|
|
37
37
|
key: 1,
|
|
38
38
|
class: "__uplot-legend-value"
|
|
39
|
-
},
|
|
39
|
+
}, W = {
|
|
40
40
|
key: 2,
|
|
41
41
|
class: "__uplot-legend-value"
|
|
42
|
-
},
|
|
42
|
+
}, oe = /* @__PURE__ */ U({
|
|
43
43
|
__name: "Uplot",
|
|
44
44
|
props: {
|
|
45
45
|
options: null,
|
|
46
46
|
data: null,
|
|
47
47
|
resetScale: { type: Boolean, default: !1 },
|
|
48
|
-
showDebug: { type: Boolean },
|
|
48
|
+
showDebug: { type: Boolean, default: !1 },
|
|
49
|
+
noFooter: { type: Boolean, default: !1 },
|
|
49
50
|
zoom: { default: () => [null, null] },
|
|
50
51
|
series: null
|
|
51
52
|
},
|
|
52
53
|
emits: ["select", "cursor", "update:zoom", "update:series"],
|
|
53
54
|
setup(a, { expose: r, emit: s }) {
|
|
54
|
-
const o = a, v =
|
|
55
|
+
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 = {
|
|
55
56
|
title: void 0,
|
|
56
57
|
legend: {
|
|
57
58
|
show: !1
|
|
@@ -59,26 +60,26 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
59
60
|
hooks: {
|
|
60
61
|
init: [
|
|
61
62
|
(e) => {
|
|
62
|
-
o.showDebug && console.log("init", e), i.value = e.series.map((
|
|
63
|
-
label:
|
|
64
|
-
stroke: typeof
|
|
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,
|
|
65
66
|
value: null,
|
|
66
67
|
data: null,
|
|
67
|
-
show:
|
|
68
|
+
show: l.show
|
|
68
69
|
// ...s,
|
|
69
70
|
}));
|
|
70
71
|
}
|
|
71
72
|
],
|
|
72
73
|
setCursor: [
|
|
73
74
|
(e) => {
|
|
74
|
-
s("cursor", e.cursor), i.value = e.series.map((
|
|
75
|
+
s("cursor", e.cursor), i.value = e.series.map((l, t) => {
|
|
75
76
|
var d, _;
|
|
76
77
|
return {
|
|
77
|
-
label:
|
|
78
|
-
stroke: typeof
|
|
79
|
-
value: e.cursor.idx && e.data[
|
|
80
|
-
data: (d = e.cursor) != null && d.idx ? e.data[
|
|
81
|
-
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: (d = e.cursor) != null && d.idx ? e.data[t][(_ = e.cursor) == null ? void 0 : _.idx] : null,
|
|
82
|
+
show: l.show
|
|
82
83
|
// ...s,
|
|
83
84
|
};
|
|
84
85
|
});
|
|
@@ -86,7 +87,7 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
86
87
|
],
|
|
87
88
|
setSelect: [
|
|
88
89
|
(e) => {
|
|
89
|
-
s("select", e.select), o.showDebug && console.log("setSelect", e.select),
|
|
90
|
+
s("select", e.select), o.showDebug && console.log("setSelect", e.select), S.value = [
|
|
90
91
|
e.posToVal(e.select.left, "x"),
|
|
91
92
|
e.posToVal(e.select.left + e.select.width, "x")
|
|
92
93
|
];
|
|
@@ -94,7 +95,7 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
94
95
|
],
|
|
95
96
|
setScale: [
|
|
96
97
|
(e) => {
|
|
97
|
-
|
|
98
|
+
S.value = [
|
|
98
99
|
e.scales.x.min || null,
|
|
99
100
|
e.scales.x.max || null
|
|
100
101
|
];
|
|
@@ -103,16 +104,17 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
103
104
|
}
|
|
104
105
|
};
|
|
105
106
|
let n;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
const x = A();
|
|
108
|
+
function z() {
|
|
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
|
+
O();
|
|
109
111
|
}, 0);
|
|
110
112
|
}
|
|
111
113
|
V(() => {
|
|
112
|
-
|
|
113
|
-
}), b([
|
|
114
|
+
z();
|
|
115
|
+
}), b([y, w], () => {
|
|
114
116
|
$(() => {
|
|
115
|
-
|
|
117
|
+
O();
|
|
116
118
|
});
|
|
117
119
|
}), b(o.data, (e) => {
|
|
118
120
|
if (o.resetScale) {
|
|
@@ -120,18 +122,18 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
120
122
|
return;
|
|
121
123
|
}
|
|
122
124
|
n.setData(e, !0), n.redraw();
|
|
123
|
-
}), b(o.options, (e,
|
|
124
|
-
o.showDebug && console.log("watch options", e,
|
|
125
|
+
}), b(o.options, (e, l) => {
|
|
126
|
+
o.showDebug && console.log("watch options", e, l), z();
|
|
125
127
|
});
|
|
126
|
-
function
|
|
127
|
-
n.setSize({ width:
|
|
128
|
+
function O() {
|
|
129
|
+
n.setSize({ width: y.value, height: w.value }), o.showDebug && console.log("resize", n);
|
|
128
130
|
}
|
|
129
131
|
function m(e) {
|
|
130
|
-
var t;
|
|
131
|
-
n.setSeries(e, { show: !n.series[e].show }), (t = i.value) != null && t[e] && (i.value[e].show = n.series[e].show);
|
|
132
|
+
var l, t;
|
|
133
|
+
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);
|
|
132
134
|
}
|
|
133
|
-
return r({ toggleShow: m }), (e,
|
|
134
|
-
|
|
135
|
+
return r({ toggleShow: m, uplot: x }), (e, l) => (u(), p("div", G, [
|
|
136
|
+
k(e.$slots, "header", {
|
|
135
137
|
series: f(i),
|
|
136
138
|
toggleShow: m
|
|
137
139
|
}),
|
|
@@ -140,31 +142,31 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
140
142
|
ref: v,
|
|
141
143
|
class: "__uplot"
|
|
142
144
|
}, null, 512),
|
|
143
|
-
a.showDebug ? (u(), p("div",
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
g("pre",
|
|
147
|
-
])) :
|
|
148
|
-
|
|
145
|
+
a.showDebug ? (u(), p("div", H, [
|
|
146
|
+
P(h(f(y)) + " x " + h(f(w)) + " ", 1),
|
|
147
|
+
I,
|
|
148
|
+
g("pre", J, h(f(i)), 1)
|
|
149
|
+
])) : D("", !0),
|
|
150
|
+
k(e.$slots, "footer", {
|
|
149
151
|
series: f(i),
|
|
150
152
|
toggleShow: m
|
|
151
153
|
}, () => [
|
|
152
|
-
g("div",
|
|
153
|
-
(u(!0), p(
|
|
154
|
+
g("div", K, [
|
|
155
|
+
(u(!0), p(N, null, F(f(i), (t, d) => {
|
|
154
156
|
var _;
|
|
155
157
|
return u(), p("div", {
|
|
156
|
-
key:
|
|
157
|
-
class: L(["__uplot-legend-
|
|
158
|
-
style:
|
|
159
|
-
onClick: (
|
|
158
|
+
key: t.label,
|
|
159
|
+
class: L(["__uplot-legend-series", [`__uplot-${(_ = t.label) == null ? void 0 : _.toLowerCase()}`, `__uplot-i-${d}`]]),
|
|
160
|
+
style: j({ backgroundColor: t.show ? "" : "lightgrey" }),
|
|
161
|
+
onClick: (X) => m(d)
|
|
160
162
|
}, [
|
|
161
163
|
d !== 0 ? (u(), p("span", {
|
|
162
164
|
key: 0,
|
|
163
|
-
style:
|
|
165
|
+
style: j({ color: t.stroke || "black" }),
|
|
164
166
|
class: "__uplot-legend-label"
|
|
165
|
-
}, h(
|
|
166
|
-
|
|
167
|
-
], 14,
|
|
167
|
+
}, h(t.label), 5)) : D("", !0),
|
|
168
|
+
t.value ? (u(), p("span", R, h(t.value), 1)) : (u(), p("span", W, "--"))
|
|
169
|
+
], 14, Q);
|
|
168
170
|
}), 128))
|
|
169
171
|
])
|
|
170
172
|
])
|
|
@@ -172,5 +174,5 @@ const q = { class: "__uplot-root" }, G = {
|
|
|
172
174
|
}
|
|
173
175
|
});
|
|
174
176
|
export {
|
|
175
|
-
|
|
177
|
+
oe as Uplot
|
|
176
178
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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"})});
|
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;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-
|
|
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: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}
|