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