vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
487 lines (478 loc) • 18.2 kB
JavaScript
import { defineAsyncComponent as se, ref as v, shallowRef as K, onMounted as le, computed as F, onBeforeUnmount as oe, watch as re, createElementBlock as r, openBlock as l, normalizeStyle as w, createCommentVNode as d, createElementVNode as M, createBlock as ue, unref as Q, createVNode as T, renderSlot as H, mergeProps as Y, normalizeProps as V, guardReactiveProps as G, toDisplayString as ie } from "vue";
import { u as ne } from "./useNestedProp-04aFeUYu.js";
import { u as ce, c as ve, X as de, E as X } from "./index-q-LPw2IT.js";
import { t as he, u as pe } from "./useResponsive-DfdjqQps.js";
import { u as fe } from "./useChartAccessibility-9icAAmYg.js";
import we from "./Title-B55R8CAZ.js";
import R from "./BaseIcon-CCivwZUq.js";
import { _ as ke } from "./_plugin-vue_export-helper-CHgC5LLL.js";
class ge {
constructor(L, E, S, N = !0, A = !0) {
this.interval = E, this.elapsed = 0, this.isPaused = !1;
const g = `
let interval;
let elapsed = 0;
let paused = false;
let startTime;
let tickInterval;
onmessage = function(e) {
const { action, data } = e.data;
switch(action) {
case 'start':
startTime = Date.now();
tickInterval = data.interval;
elapsed = 0;
paused = false;
interval = setInterval(() => {
elapsed += tickInterval;
postMessage({ elapsed, timestamp: Date.now() });
}, tickInterval);
break;
case 'pause':
paused = true;
clearInterval(interval);
elapsed = Date.now() - startTime;
break;
case 'resume':
if (paused) {
startTime = Date.now() - elapsed;
interval = setInterval(() => {
elapsed += tickInterval;
postMessage({ elapsed, timestamp: Date.now() });
}, tickInterval);
}
paused = false;
break;
case 'stop':
clearInterval(interval);
elapsed = 0;
postMessage({ elapsed });
break;
case 'reset':
elapsed = 0;
clearInterval(interval);
postMessage({ elapsed });
break;
case 'lap':
postMessage({
elapsed,
timestamp: Date.now(),
action: 'lap'
});
break;
default:
break;
}
};
`, $ = new Blob([g], { type: "application/javascript" }), D = URL.createObjectURL($), i = new Worker(D);
function n(o) {
let h = Math.floor(o / 1e3), k = Math.floor(o % 1e3 / 10), m = Math.floor(h / 3600), e = Math.floor(h % 3600 / 60), x = h % 60, p = "";
return A && (p += String(m).padStart(2, "0") + ":"), p += String(e).padStart(2, "0") + ":", p += String(x).padStart(2, "0"), N && (p += "." + String(k).padStart(2, "0")), p;
}
this.start = () => {
this.isPaused = !1, i.postMessage({ action: "start", data: { interval: this.interval } });
}, this.pause = () => {
this.isPaused ? this.resume() : (this.isPaused = !0, i.postMessage({ action: "pause" }));
}, this.resume = () => {
this.isPaused && (i.postMessage({ action: "resume" }), this.isPaused = !1);
}, this.stop = () => {
i.postMessage({ action: "stop" }), this.isPaused = !1;
}, this.reset = () => {
i.postMessage({ action: "reset" }), this.elapsed = 0, this.isPaused = !1;
}, this.restart = () => {
this.stop(), this.start();
}, this.lap = () => new Promise((o) => {
i.postMessage({ action: "lap" });
const h = (k) => {
const { elapsed: m, timestamp: e, action: x } = k.data;
if (x === "lap") {
const p = n(m);
o({
timestamp: e || 0,
elapsed: m,
formatted: p
});
}
};
i.addEventListener("message", h, { once: !0 });
}), i.onmessage = (o) => {
const { elapsed: h, timestamp: k } = o.data;
this.elapsed = h, L({
timestamp: k || 0,
elapsed: this.elapsed,
formatted: n(this.elapsed)
});
}, i.onerror = (o) => {
S && S(o);
};
}
}
const me = ["xmlns", "viewBox"], ye = ["width", "height"], be = { key: 1 }, _e = ["id"], Ce = ["stop-color"], Me = ["stop-color"], Te = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], $e = ["d", "stroke", "stroke-width"], xe = ["r", "fill", "stroke", "stroke-width"], Ie = ["r", "fill", "stroke", "stroke-width"], Pe = ["x", "y"], Re = ["x", "y", "font-size", "fill", "font-weight"], Se = {
key: 0,
class: "vue-ui-timer-controls"
}, Ae = ["title"], De = ["title"], ze = ["title"], Fe = ["title"], He = ["title"], Le = {
__name: "vue-ui-timer",
props: {
config: {
type: Object,
default() {
return {};
}
}
},
emits: ["start", "pause", "reset", "restart", "lap"],
setup(q, { expose: L, emit: E }) {
const S = se(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_timer: N } = ce(), A = q, g = E, $ = v(null), D = v(null), i = v(null), n = K(null), o = K(null), h = v(ve()), k = v(0);
le(() => {
m();
});
function m() {
if (e.value.responsive) {
const a = he(() => {
const { width: u, height: c } = pe({
chart: $.value,
title: e.value.style.title.text ? D.value : null,
legend: i.value
});
requestAnimationFrame(() => {
t.value.width = u, t.value.height = c, e.value.responsiveProportionalSizing ? (t.value.tracker.core = X({
relator: Math.min(u, c),
adjuster: e.value.style.width,
source: 6 * e.value.stopwatch.tracker.radiusRatio,
threshold: 1,
fallback: 1
}), t.value.tracker.aura = X({
relator: Math.min(u, c),
adjuster: e.value.style.width,
source: 12 * e.value.stopwatch.tracker.aura.radiusRatio,
threshold: 1,
fallback: 1
}), t.value.label = X({
relator: Math.min(u, c),
adjuster: e.value.style.width,
source: e.value.stopwatch.label.fontSize,
threshold: 10,
fallback: 10
})) : t.value.label = e.value.stopwatch.label.fontSize;
});
});
n.value && (o.value && n.value.unobserve(o.value), n.value.disconnect()), n.value = new ResizeObserver(a), o.value = $.value.parentNode, n.value.observe(o.value);
}
}
oe(() => {
n.value && (o.value && n.value.unobserve(o.value), n.value.disconnect());
});
const e = F({
get: () => p(),
set: (a) => a
}), { svgRef: x } = fe({ config: e.value.style.title });
function p() {
return ne({
userConfig: A.config,
defaultConfig: N
});
}
re(() => A.config, (a) => {
e.value = p(), m(), k.value += 1;
}, { deep: !0 });
const J = F(() => {
if (e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
return "00:00:00.00";
if (e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
return "00:00:00";
if (!e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
return "00:00.00";
if (!e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
return "00:00";
}), t = v({
height: e.value.style.height,
width: e.value.style.width,
tracker: {
core: 6 * e.value.stopwatch.tracker.radiusRatio,
aura: 12 * e.value.stopwatch.tracker.aura.radiusRatio
},
label: e.value.stopwatch.label.fontSize
}), y = v(0), I = new ge(
(a) => Z(a),
10,
"",
e.value.stopwatch.showHundredth,
e.value.stopwatch.showHours
), j = v(!0), s = v(!1), f = v(!1);
function B() {
g("start"), j.value && I.start(), j.value = !1, s.value = !0;
}
function O() {
s.value && (g("reset"), I.stop(), _.value = [], j.value = !0, s.value = !1);
}
function U() {
f.value = !f.value, g("pause", y.value), I.pause();
}
function W() {
s.value && (f.value = !1, g("restart"), _.value = [], I.restart());
}
const _ = v([]);
async function z() {
if (!s.value || f.value) return;
const a = await I.lap();
a && (_.value.push(a), g("lap", _.value));
}
function Z({ timestamp: a, elapsed: u, formatted: c }) {
y.value = { timestamp: a, elapsed: u, formatted: c };
}
const b = F(() => Math.min(t.value.width, t.value.height) / 2.5 * e.value.stopwatch.track.radiusRatio);
function ee(a, u) {
const P = 360 / (u * 1e3);
return a * P % 360;
}
function te(a) {
let u = a * (Math.PI / 180), c = t.value.width / 2 + b.value * Math.cos(u), P = t.value.height / 2 + b.value * Math.sin(u);
return { cx: c, cy: P };
}
const C = F(() => {
const a = ee(y.value.elapsed, e.value.stopwatch.cycleSeconds), { cx: u, cy: c } = te(a - 90), P = a > 180 ? 1 : 0;
return {
cx: u || t.value.width / 2,
cy: c || t.value.height / 2 - b.value,
largeArcFlag: P,
sweepFlag: 1
};
});
return L({
start: B,
pause: U,
reset: O,
restart: W,
lap: z
}), (a, u) => (l(), r("div", {
ref_key: "timerChart",
ref: $,
class: "vue-ui-timer",
style: w({
fontFamily: e.value.style.fontFamily,
width: "100%",
height: e.value.responsive ? "100%" : "auto",
textAlign: "center"
})
}, [
e.value.style.title.text ? (l(), r("div", {
key: 0,
ref_key: "chartTitle",
ref: D,
style: w({
width: "100%",
background: e.value.style.backgroundColor
})
}, [
(l(), ue(we, {
key: `title_${k.value}`,
config: {
title: {
cy: "title",
...e.value.style.title
},
subtitle: {
cy: "subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 4)) : d("", !0),
(l(), r("svg", {
ref_key: "svgRef",
ref: x,
xmlns: Q(de),
viewBox: `0 0 ${t.value.width <= 0 ? 10 : t.value.width} ${t.value.height <= 0 ? 10 : t.value.height}`,
style: w({
maxWidth: "100%",
overflow: "visible",
background: e.value.style.backgroundColor
})
}, [
T(Q(S)),
a.$slots["chart-background"] ? (l(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: t.value.width <= 0 ? 10 : t.value.width,
height: t.value.height <= 0 ? 10 : t.value.height,
style: {
pointerEvents: "none"
}
}, [
H(a.$slots, "chart-background", {}, void 0, !0)
], 8, ye)) : d("", !0),
e.value.stopwatch.tracker.gradient.show ? (l(), r("defs", be, [
M("radialGradient", {
id: `tracker_gradient_${h.value}`,
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
M("stop", {
offset: "0%",
"stop-color": e.value.stopwatch.tracker.gradient.color
}, null, 8, Ce),
M("stop", {
offset: "100%",
"stop-color": e.value.stopwatch.tracker.fill
}, null, 8, Me)
], 8, _e)
])) : d("", !0),
M("circle", {
cx: t.value.width / 2,
cy: t.value.height / 2,
r: b.value,
fill: e.value.stopwatch.track.fill,
stroke: e.value.stopwatch.track.stroke,
"stroke-width": e.value.stopwatch.track.strokeWidth
}, null, 8, Te),
e.value.stopwatch.cycleTrack.show ? (l(), r("path", {
key: 2,
d: `M ${t.value.width / 2},${t.value.height / 2 - b.value} A ${b.value},${b.value} 0 ${C.value.largeArcFlag},${C.value.sweepFlag} ${C.value.cx},${C.value.cy}`,
stroke: e.value.stopwatch.cycleTrack.stroke,
"stroke-width": e.value.stopwatch.cycleTrack.strokeWidth,
"stroke-linecap": "round",
fill: "none"
}, null, 8, $e)) : d("", !0),
M("circle", Y(C.value, {
r: t.value.tracker.core,
fill: e.value.stopwatch.tracker.gradient.show ? `url(#tracker_gradient_${h.value})` : e.value.stopwatch.tracker.fill,
stroke: e.value.stopwatch.tracker.stroke,
"stroke-width": e.value.stopwatch.tracker.strokeWidth
}), null, 16, xe),
e.value.stopwatch.tracker.aura.show ? (l(), r("circle", Y({ key: 3 }, C.value, {
r: t.value.tracker.aura,
fill: `${e.value.stopwatch.tracker.aura.fill}20`,
stroke: e.value.stopwatch.tracker.aura.stroke,
"stroke-width": e.value.stopwatch.tracker.aura.strokeWidth
}), null, 16, Ie)) : d("", !0),
a.$slots.time ? (l(), r("foreignObject", {
key: 4,
x: t.value.width / 2,
y: t.value.height / 2,
height: "0.1",
width: "0.1",
style: { overflow: "visible" }
}, [
H(a.$slots, "time", V(G({ ...y.value })), void 0, !0)
], 8, Pe)) : (l(), r("text", {
key: 5,
x: t.value.width / 2,
y: t.value.height / 2 + t.value.label / 4,
"font-size": t.value.label,
"text-anchor": "middle",
fill: e.value.stopwatch.label.color,
"font-weight": e.value.stopwatch.label.bold ? "bold" : "normal",
style: { "font-variant-numeric": "tabular-nums !important" }
}, ie(y.value.formatted || J.value), 9, Re))
], 12, me)),
M("div", {
ref_key: "chartLegend",
ref: i,
style: w({ width: "100%", backgroundColor: e.value.stopwatch.legend.backgroundColor })
}, [
a.$slots.controls ? d("", !0) : (l(), r("div", Se, [
e.value.stopwatch.legend.buttons.start ? (l(), r("button", {
key: 0,
title: e.value.stopwatch.legend.buttonTitles.start,
onClick: B,
class: "vue-ui-timer-button",
style: w({
opacity: s.value ? 0.2 : 1,
cursor: s.value ? "default" : "pointer"
})
}, [
T(R, {
name: "play",
stroke: e.value.stopwatch.legend.buttons.iconColor
}, null, 8, ["stroke"])
], 12, Ae)) : d("", !0),
e.value.stopwatch.legend.buttons.pause ? (l(), r("button", {
key: 1,
title: f.value ? e.value.stopwatch.legend.buttonTitles.resume : e.value.stopwatch.legend.buttonTitles.pause,
onClick: U,
class: "vue-ui-timer-button",
style: w({
opacity: s.value ? 1 : 0.2,
cursor: s.value ? "pointer" : "default"
})
}, [
T(R, {
name: "pause",
stroke: e.value.stopwatch.legend.buttons.iconColor
}, null, 8, ["stroke"])
], 12, De)) : d("", !0),
e.value.stopwatch.legend.buttons.reset ? (l(), r("button", {
key: 2,
title: e.value.stopwatch.legend.buttonTitles.reset,
onClick: O,
class: "vue-ui-timer-button",
style: w({
opacity: s.value ? 1 : 0.2,
cursor: s.value ? "pointer" : "default"
})
}, [
T(R, {
name: "stop",
stroke: e.value.stopwatch.legend.buttons.iconColor
}, null, 8, ["stroke"])
], 12, ze)) : d("", !0),
e.value.stopwatch.legend.buttons.restart ? (l(), r("button", {
key: 3,
title: e.value.stopwatch.legend.buttonTitles.restart,
onClick: W,
class: "vue-ui-timer-button",
style: w({
opacity: s.value ? 1 : 0.2,
cursor: s.value ? "pointer" : "default"
})
}, [
T(R, {
name: "restart",
stroke: e.value.stopwatch.legend.buttons.iconColor
}, null, 8, ["stroke"])
], 12, Fe)) : d("", !0),
e.value.stopwatch.legend.buttons.lap ? (l(), r("button", {
key: 4,
title: e.value.stopwatch.legend.buttonTitles.lap,
onClick: z,
class: "vue-ui-timer-button",
style: w({
opacity: s.value && !f.value ? 1 : 0.2,
cursor: s.value && !f.value ? "pointer" : "default"
})
}, [
T(R, {
name: "lap",
stroke: e.value.stopwatch.legend.buttons.iconColor
}, null, 8, ["stroke"])
], 12, He)) : d("", !0)
])),
H(a.$slots, "controls", V(G({
start: B,
pause: U,
reset: O,
restart: W,
lap: z,
laps: _.value,
isRunning: s.value,
isPaused: f.value,
...y.value
})), void 0, !0),
H(a.$slots, "laps", V(G({
laps: _.value,
lap: z,
isRunning: s.value,
isPaused: f.value,
...y.value
})), void 0, !0)
], 4)
], 4));
}
}, Ge = /* @__PURE__ */ ke(Le, [["__scopeId", "data-v-5e3deab2"]]);
export {
Ge as default
};