vue-timeline-chart
Version:
Vue3 Timeline Chart component
979 lines (978 loc) • 30.4 kB
JavaScript
import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, getCurrentScope as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onMounted as f, onScopeDispose as p, openBlock as m, renderList as h, renderSlot as g, shallowRef as _, toDisplayString as ee, toValue as v, unref as y, useTemplateRef as te, watch as b, watchEffect as ne, withModifiers as x } from "vue";
//#region src/composables/useElementSize.ts
var re = (e) => {
let t = _(0), n = _(0), r;
function i(e) {
r = new ResizeObserver(([e]) => {
let r = e?.contentRect;
r && ([t.value, n.value] = [r.width, r.height]);
}), r.observe(e);
}
return b(e, (e) => {
if (e) {
i(e);
return;
}
r?.disconnect();
}), {
width: t,
height: n
};
}, S = function(e) {
return `${e}`.trim().padStart(2, "0");
}, C = 365.2425, w = 6048e5, T = 6e4, E = 3600 * 24;
E * 7, E * C / 12 * 3;
var ie = Symbol.for("constructDateFrom");
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/constructFrom.js
function D(e, t) {
return typeof e == "function" ? e(t) : e && typeof e == "object" && ie in e ? e[ie](t) : e instanceof Date ? new e.constructor(t) : new Date(t);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/toDate.js
function O(e, t) {
return D(t || e, e);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/addDays.js
function ae(e, t, n) {
let r = O(e, n?.in);
return isNaN(t) ? D(n?.in || e, NaN) : (t && r.setDate(r.getDate() + t), r);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/_lib/defaultOptions.js
var oe = {};
function k() {
return oe;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfWeek.js
function A(e, t) {
let n = k(), r = t?.weekStartsOn ?? t?.locale?.options?.weekStartsOn ?? n.weekStartsOn ?? n.locale?.options?.weekStartsOn ?? 0, i = O(e, t?.in), a = i.getDay(), o = (a < r ? 7 : 0) + a - r;
return i.setDate(i.getDate() - o), i.setHours(0, 0, 0, 0), i;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/_lib/normalizeDates.js
function se(e, ...t) {
let n = D.bind(null, e || t.find((e) => typeof e == "object"));
return t.map(n);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfDay.js
function j(e, t) {
let n = O(e, t?.in);
return n.setHours(0, 0, 0, 0), n;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/addMinutes.js
function M(e, t, n) {
let r = O(e, n?.in);
return r.setTime(r.getTime() + t * T), r;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/addWeeks.js
function N(e, t, n) {
return ae(e, t * 7, n);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/_lib/normalizeInterval.js
function P(e, t) {
let [n, r] = se(e, t.start, t.end);
return {
start: n,
end: r
};
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachDayOfInterval.js
function ce(e, t) {
let { start: n, end: r } = P(t?.in, e), i = +n > +r, a = i ? +n : +r, o = i ? r : n;
o.setHours(0, 0, 0, 0);
let s = t?.step ?? 1;
if (!s) return [];
s < 0 && (s = -s, i = !i);
let c = [];
for (; +o <= a;) c.push(D(n, o)), o.setDate(o.getDate() + s), o.setHours(0, 0, 0, 0);
return i ? c.reverse() : c;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachHourOfInterval.js
function F(e, t) {
let { start: n, end: r } = P(t?.in, e), i = +n > +r, a = i ? +n : +r, o = i ? r : n;
o.setMinutes(0, 0, 0);
let s = t?.step ?? 1;
if (!s) return [];
s < 0 && (s = -s, i = !i);
let c = [];
for (; +o <= a;) c.push(D(n, o)), o.setHours(o.getHours() + s);
return i ? c.reverse() : c;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachMinuteOfInterval.js
function I(e, t) {
let { start: n, end: r } = P(t?.in, e);
n.setSeconds(0, 0);
let i = +n > +r, a = i ? +n : +r, o = i ? r : n, s = t?.step ?? 1;
if (!s) return [];
s < 0 && (s = -s, i = !i);
let c = [];
for (; +o <= a;) c.push(D(n, o)), o = M(o, s);
return i ? c.reverse() : c;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachMonthOfInterval.js
function L(e, t) {
let { start: n, end: r } = P(t?.in, e), i = +n > +r, a = i ? +n : +r, o = i ? r : n;
o.setHours(0, 0, 0, 0), o.setDate(1);
let s = t?.step ?? 1;
if (!s) return [];
s < 0 && (s = -s, i = !i);
let c = [];
for (; +o <= a;) c.push(D(n, o)), o.setMonth(o.getMonth() + s);
return i ? c.reverse() : c;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachWeekOfInterval.js
function le(e, t) {
let { start: n, end: r } = P(t?.in, e), i = +n > +r, a = A(i ? r : n, t), o = A(i ? n : r, t);
a.setHours(15), o.setHours(15);
let s = +o.getTime(), c = a, l = t?.step ?? 1;
if (!l) return [];
l < 0 && (l = -l, i = !i);
let u = [];
for (; +c <= s;) c.setHours(0), u.push(D(n, c)), c = N(c, l), c.setHours(15);
return i ? u.reverse() : u;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfMonth.js
function ue(e, t) {
let n = O(e, t?.in);
return n.setDate(1), n.setHours(0, 0, 0, 0), n;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfYear.js
function R(e, t) {
let n = O(e, t?.in);
return n.setFullYear(n.getFullYear(), 0, 1), n.setHours(0, 0, 0, 0), n;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/eachYearOfInterval.js
function de(e, t) {
let { start: n, end: r } = P(t?.in, e), i = +n > +r, a = i ? +n : +r, o = i ? r : n;
o.setHours(0, 0, 0, 0), o.setMonth(0, 1);
let s = t?.step ?? 1;
if (!s) return [];
s < 0 && (s = -s, i = !i);
let c = [];
for (; +o <= a;) c.push(D(n, o)), o.setFullYear(o.getFullYear() + s);
return i ? c.reverse() : c;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getWeekYear.js
function fe(e, t) {
let n = O(e, t?.in), r = n.getFullYear(), i = k(), a = t?.firstWeekContainsDate ?? t?.locale?.options?.firstWeekContainsDate ?? i.firstWeekContainsDate ?? i.locale?.options?.firstWeekContainsDate ?? 1, o = D(t?.in || e, 0);
o.setFullYear(r + 1, 0, a), o.setHours(0, 0, 0, 0);
let s = A(o, t), c = D(t?.in || e, 0);
c.setFullYear(r, 0, a), c.setHours(0, 0, 0, 0);
let l = A(c, t);
return +n >= +s ? r + 1 : +n >= +l ? r : r - 1;
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfWeekYear.js
function pe(e, t) {
let n = k(), r = t?.firstWeekContainsDate ?? t?.locale?.options?.firstWeekContainsDate ?? n.firstWeekContainsDate ?? n.locale?.options?.firstWeekContainsDate ?? 1, i = fe(e, t), a = D(t?.in || e, 0);
return a.setFullYear(i, 0, r), a.setHours(0, 0, 0, 0), A(a, t);
}
//#endregion
//#region node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getWeek.js
function z(e, t) {
let n = O(e, t?.in), r = A(n, t) - +pe(n, t);
return Math.round(r / w) + 1;
}
//#endregion
//#region src/composables/useScale.ts
var B = {
ms: 1,
seconds: 1e3,
minutes: 1e3 * 60,
hours: 1e3 * 60 * 60,
days: 1e3 * 60 * 60 * 24,
weeks: 1e3 * 60 * 60 * 24 * 7,
months: 1e3 * 60 * 60 * 24 * 7 * 4,
years: 1e3 * 60 * 60 * 24 * 7 * 4 * 12
}, V = (e) => Object.keys(B).indexOf(e), me = (e, n, r, i, a, o) => {
let s = _(r.value), c = _(i.value), l = t(() => (a.value?.length ? a.value : [
{
unit: "seconds",
steps: [
.1,
1,
2,
5,
10
]
},
{
unit: "minutes",
steps: [
.25,
.5,
1,
2,
5,
10
]
},
{
unit: "hours",
steps: [
.25,
.5,
1,
2,
4,
6,
12
]
},
{
unit: "days",
steps: [1]
},
{
unit: "weeks",
steps: [1]
},
{
unit: "months",
steps: [1, 2]
},
{
unit: "years",
steps: [
1,
5,
10,
25,
50,
100,
250,
500,
1e3
]
}
]).toSorted((e, t) => V(e.unit) - V(t.unit)).flatMap((e) => e.steps.toSorted((e, t) => e - t).map((t) => ({
unit: e.unit,
step: t
}))));
b(r, () => {
s.value = r.value;
}), b(i, () => {
c.value = i.value;
});
let u = t(() => {
let [e] = l.value;
for (let [t, n] of l.value.entries()) {
let r = s.value / (B[n.unit] * (n.step ?? 1));
if (r >= 1 && r <= c.value) {
e = n;
break;
}
if (r < 1) {
e = l.value[t - 1] ?? n;
break;
}
r >= 1 && t === l.value.length - 1 && (e = n);
}
return {
unit: e.unit,
step: e.step ?? 1
};
});
function d(e) {
switch (u.value.unit) {
case "years": return e.getFullYear() % u.value.step === 0;
case "months": return e.getMonth() % u.value.step === 0;
case "weeks": return z(e, { weekStartsOn: o.value }) % u.value.step === 0;
case "days": return e.getDate() % u.value.step === 0;
case "hours": return e.getHours() % u.value.step === 0;
case "minutes": return e.getMinutes() % u.value.step === 0;
case "seconds": return e.getSeconds() % u.value.step === 0;
case "ms": return e.getMilliseconds() % u.value.step === 0;
}
}
return {
scale: u,
baseDividers: B,
visibleTimestamps: t(() => {
let t = [], r = e.value, i = n.value, { unit: a, step: s } = u.value;
if (a === "ms") {
let e = Math.max(1, s), n = Math.ceil(r / e) * e;
for (let r = n; r < i; r += e) t.push(r);
return t;
}
let c = [];
switch (a) {
case "seconds":
c = I({
start: r,
end: i
}).flatMap((e) => {
let t = [];
for (let n = 0; n < 60; n++) t.push(new Date(e.valueOf() + n * B.seconds));
return t;
});
break;
case "minutes":
c = I({
start: r,
end: i
});
break;
case "hours":
c = F({
start: r,
end: i
});
break;
case "days":
c = ce({
start: r,
end: i
});
break;
case "weeks":
c = le({
start: r,
end: i
}, { weekStartsOn: o.value });
break;
case "months":
c = L({
start: r,
end: i
});
break;
case "years":
c = de({
start: r,
end: i
});
break;
}
for (let e of c) if (!(s > 1 && !d(e)) && (t.push(e.valueOf()), s < 1)) for (let n = 1; n < 1 / s; n++) t.push(e.valueOf() + n * s * B[a]);
return t;
})
};
};
//#endregion
//#region node_modules/.pnpm/@vueuse+shared@14.2.1_vue@3.5.30_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js
function H(e, t) {
return c() ? (p(e, t), !0) : !1;
}
var U = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
var W = (e) => e != null, G = Object.prototype.toString, K = (e) => G.call(e) === "[object Object]";
function q(e) {
return Array.isArray(e) ? e : [e];
}
function he(e) {
return e || s();
}
function ge(e, t = !0, n) {
he(n) ? f(e, n) : t ? e() : l(e);
}
function _e(e, t, n) {
return b(e, t, {
...n,
immediate: !0
});
}
//#endregion
//#region node_modules/.pnpm/@vueuse+core@14.2.1_vue@3.5.30_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.js
var J = U ? window : void 0;
U && window.document, U && window.navigator, U && window.location;
function Y(e) {
let t = v(e);
return t?.$el ?? t;
}
function X(...e) {
let n = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), r = t(() => {
let t = q(v(e[0])).filter((e) => e != null);
return t.every((e) => typeof e != "string") ? t : void 0;
});
return _e(() => [
r.value?.map((e) => Y(e)) ?? [J].filter((e) => e != null),
q(v(r.value ? e[1] : e[0])),
q(y(r.value ? e[2] : e[1])),
v(r.value ? e[3] : e[2])
], ([e, t, r, i], a, o) => {
if (!e?.length || !t?.length || !r?.length) return;
let s = K(i) ? { ...i } : i, c = e.flatMap((e) => t.flatMap((t) => r.map((r) => n(e, t, r, s))));
o(() => {
c.forEach((e) => e());
});
}, { flush: "post" });
}
function Z() {
let e = _(!1), t = s();
return t && f(() => {
e.value = !0;
}, t), e;
}
/* @__NO_SIDE_EFFECTS__ */
function Q(e) {
let n = Z();
return t(() => (n.value, !!e()));
}
function $(e, n, r = {}) {
let { window: i = J, ...a } = r, o, s = /* @__PURE__ */ Q(() => i && "MutationObserver" in i), c = () => {
o &&= (o.disconnect(), void 0);
}, l = b(t(() => {
let t = q(v(e)).map(Y).filter(W);
return new Set(t);
}), (e) => {
c(), s.value && e.size && (o = new MutationObserver(n), e.forEach((e) => o.observe(e, a)));
}, {
immediate: !0,
flush: "post"
}), u = () => o?.takeRecords(), d = () => {
l(), c();
};
return H(d), {
isSupported: s,
stop: d,
takeRecords: u
};
}
function ve(e, n, r = {}) {
let { window: i = J, ...a } = r, o, s = /* @__PURE__ */ Q(() => i && "ResizeObserver" in i), c = () => {
o &&= (o.disconnect(), void 0);
}, l = b(t(() => {
let t = v(e);
return Array.isArray(t) ? t.map((e) => Y(e)) : [Y(t)];
}), (e) => {
if (c(), s.value && i) {
o = new ResizeObserver(n);
for (let t of e) t && o.observe(t, a);
}
}, {
immediate: !0,
flush: "post"
}), u = () => {
c(), l();
};
return H(u), {
isSupported: s,
stop: u
};
}
function ye(e, t = {}) {
let { reset: n = !0, windowResize: r = !0, windowScroll: i = !0, immediate: a = !0, updateTiming: o = "sync" } = t, s = _(0), c = _(0), l = _(0), u = _(0), d = _(0), f = _(0), p = _(0), m = _(0);
function h() {
let t = Y(e);
if (!t) {
n && (s.value = 0, c.value = 0, l.value = 0, u.value = 0, d.value = 0, f.value = 0, p.value = 0, m.value = 0);
return;
}
let r = t.getBoundingClientRect();
s.value = r.height, c.value = r.bottom, l.value = r.left, u.value = r.right, d.value = r.top, f.value = r.width, p.value = r.x, m.value = r.y;
}
function g() {
o === "sync" ? h() : o === "next-frame" && requestAnimationFrame(() => h());
}
return ve(e, g), b(() => Y(e), (e) => !e && g()), $(e, g, { attributeFilter: ["style", "class"] }), i && X("scroll", g, {
capture: !0,
passive: !0
}), r && X("resize", g, { passive: !0 }), ge(() => {
a && g();
}), {
height: s,
bottom: c,
left: l,
right: u,
top: d,
width: f,
x: p,
y: m,
update: g
};
}
//#endregion
//#region src/helpers/getDistance.ts
function be(e, t) {
return Math.hypot(t.clientX - e.clientX, t.clientY - e.clientY);
}
//#endregion
//#region src/composables/useTouchEvents.ts
function xe({ viewportStart: e, viewportEnd: t }) {
let n = null, r = null, i = null, a = null, o = null;
function s(e) {
if (e.touches.length < 2) {
let [t] = Array.from(e.touches);
n = t?.clientX || null;
}
}
function c(n) {
l.initialTouchList = n.touches;
let [r, i] = Array.from(n.touches);
l.initialTouchViewportStart = e.value, l.initialTouchViewportEnd = t.value, l.initialPinchDistance = r && i ? be(r, i) : null;
}
let l = {
get lastTouchX() {
return n;
},
set lastTouchX(e) {
n = e;
},
get initialTouchList() {
return r;
},
set initialTouchList(e) {
r = e;
},
get initialTouchViewportStart() {
return i;
},
set initialTouchViewportStart(e) {
i = e;
},
get initialTouchViewportEnd() {
return a;
},
set initialTouchViewportEnd(e) {
a = e;
},
get initialPinchDistance() {
return o;
},
set initialPinchDistance(e) {
o = e;
}
};
return {
setLastTouchX: s,
setInitialTouchList: c,
state: l
};
}
//#endregion
//#region src/components/Timeline.vue?vue&type=script&setup=true&lang.ts
var Se = { class: "timeline-wrapper" }, Ce = { class: "timestamps" }, we = { class: "groups" }, Te = { class: "group-items" }, Ee = [
"onClick",
"onPointermove",
"onPointerdown",
"onPointerup",
"onContextmenu"
], De = [
"onClick",
"onPointermove",
"onPointerdown",
"onPointerup",
"onContextmenu"
], Oe = {
key: 0,
class: "backgrounds"
}, ke = [
"onClick",
"onPointermove",
"onPointerdown",
"onPointerup",
"onContextmenu"
], Ae = {
key: 1,
class: "markers"
}, je = /* @__PURE__ */ ((e, t) => {
let n = e.__vccOpts || e;
for (let [e, r] of t) n[e] = r;
return n;
})(/* @__PURE__ */ o({
__name: "Timeline",
props: {
groups: { default: () => [] },
items: { default: () => [] },
markers: { default: () => [] },
viewportMin: { default: void 0 },
viewportMax: { default: void 0 },
minViewportDuration: { default: 1e3 },
maxViewportDuration: { default: void 0 },
initialViewportStart: { default: void 0 },
initialViewportEnd: { default: void 0 },
renderTimestampLabel: {
type: Function,
default: (e, t) => {
let n = new Date(e), r = "";
return (![
"hours",
"minutes",
"seconds",
"ms"
].includes(t.unit) || j(n).valueOf() === e) && (r += `${n.toLocaleString("default", {
month: t.unit !== "years" && (ue(n).valueOf() === e || t.unit === "days" || j(n).valueOf() === e && !(t.unit === "months" && t.step === .25)) ? "short" : void 0,
year: R(n).valueOf() === e ? "numeric" : void 0,
era: R(n).valueOf() === e && R(n).getFullYear() <= 0 ? "short" : void 0,
day: t.unit !== "years" && !(t.unit === "months" && t.step >= 1) && j(n).valueOf() === e ? "numeric" : void 0
})} `), [
"hours",
"minutes",
"seconds",
"ms"
].includes(t.unit) && (r += `${S(n.getHours())}:${S(n.getMinutes())}${n.getSeconds() > 0 ? `:${S(n.getSeconds())}` : ""}${n.getMilliseconds() > 0 ? `.${S(n.getMilliseconds())}` : ""}`), r;
}
},
fixedLabels: {
type: Boolean,
default: !1
},
minTimestampWidth: { default: 100 },
maxZoomSpeed: { default: 60 },
activeItems: { default: () => [] },
maxOffsetOutsideViewport: { default: 50 },
scales: { default: () => [] },
weekStartsOn: { default: 0 }
},
emits: [
"pointermove",
"pointerdown",
"pointerup",
"wheel",
"click",
"contextmenu",
"touchmove",
"touchstart",
"touchend",
"mousemoveTimeline",
"mouseleaveTimeline",
"changeViewport",
"changeScale"
],
setup(o, { expose: s, emit: c }) {
let p = o, v = c;
s({
setViewport: V,
onWheel: H,
clearCache: P
});
let S = te("timelineEl"), { width: C } = re(S), w = _(0), T = _(1e4), E = t(() => T.value - w.value), ie = t(() => C.value / E.value);
b([w, T], ([e, t]) => {
v("changeViewport", {
start: e,
end: t
});
}), b(() => p.items, (e) => {
e.some((e) => e.id === void 0) && console.error("[vue-timeline-chart] Some items are missing an `id` property. Please provide a unique ID for each item.");
}, { immediate: !0 }), b(() => p.markers, (e) => {
e.some((e) => e.id === void 0) && console.error("[vue-timeline-chart] Some markers are missing an `id` property. Please provide a unique ID for each marker.");
}, { immediate: !0 }), ne(() => {
try {
B();
} catch (e) {
console.error(e);
}
});
let { left: D } = ye(S);
function O() {
return p.items?.reduce((e, t) => t.start < e ? t.start : e, Infinity);
}
function ae() {
return p.items?.reduce((e, t) => t.end !== void 0 && t.end > e || t.start > e ? t.end ?? t.start : e, -Infinity);
}
function oe() {
V(p.initialViewportStart ?? p.viewportMin ?? O() ?? 0, p.initialViewportEnd ?? p.viewportMax ?? ae() ?? 1e4);
}
b([() => p.viewportMin, () => p.viewportMax], () => {
V(w.value, T.value);
}), b([() => p.initialViewportStart, () => p.initialViewportEnd], () => {
V(p.initialViewportStart, p.initialViewportEnd);
});
let k = t(() => p.items.filter((e) => e.start < T.value && (e.end ?? e.start) > w.value).sort((e, t) => e.start - t.start) || []), A = t(() => p.markers.filter((e) => e.start < T.value && e.start > w.value).sort((e, t) => e.start - t.start) || []), se = t(() => A.value.filter((e) => !e.group)), j = t(() => k.value.filter((e) => e.type === "background" && !e.group)), M = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map();
function P() {
M.clear(), N.clear();
}
b([
w,
T,
C
], () => {
P();
}), b(k, () => {
M.clear();
}), b(A, () => {
N.clear();
}), f(() => {
oe(), l(() => {
P();
});
});
function ce(e) {
return {
"--_left": `${fe(e.start, e.end)}px`,
"--_width": e.end === void 0 ? void 0 : `${pe(e.start, e.end)}px`,
...e.cssVariables
};
}
function F(e, t = !1) {
let n = t ? N : M, r = n.get(e.id);
if (r) return r;
let i = ce(e);
return n.set(e.id, i), i;
}
let { visibleTimestamps: I, scale: L } = me(w, T, E, t(() => C.value / p.minTimestampWidth), t(() => p.scales), t(() => p.weekStartsOn)), le = t(() => I.value.map((e) => fe(e)));
b(L, (e, t) => {
e.step === t?.step && e.unit === t?.unit || v("changeScale", e);
}, { immediate: !0 });
function ue(e) {
let t = new Date(e), n = t.getMilliseconds() === 0, r = n && t.getSeconds() === 0, i = r && t.getMinutes() === 0, a = i && t.getHours() === 0, o = a && t.getDay() === p.weekStartsOn, s = a && t.getDate() === 1, c = s && t.getMonth() === 0;
return {
"is-second": n,
"is-minute": r,
"is-hour": i,
"is-day": a,
"is-week": o,
"is-month": s,
"is-year": c
};
}
let R = t(() => p.maxOffsetOutsideViewport / C.value * E.value), de = t(() => C.value + 2 * (R.value / E.value) * C.value);
function fe(e, t) {
if (t !== void 0 && e < w.value - R.value && (t - e) / E.value * C.value > de.value) {
let e = -R.value / E.value * C.value, n = T.value + R.value;
return t > n ? e : e - (n - t) / E.value * C.value;
}
return (e - w.value) / E.value * C.value;
}
function pe(e, t) {
let n = (t - e) / E.value * C.value;
return Math.min(n, de.value);
}
function z(e, t) {
let n = e / C.value * E.value;
if (e > 0 && p.viewportMax !== void 0 && T.value >= p.viewportMax || e < 0 && p.viewportMin !== void 0 && w.value <= p.viewportMin) return;
let r = w.value + n, i = T.value + n;
if (p.viewportMax !== void 0 && i > p.viewportMax) {
let e = i - p.viewportMax;
r -= e, i = p.viewportMax;
}
if (p.viewportMin !== void 0 && r < p.viewportMin) {
let e = p.viewportMin - r;
i += e, r = p.viewportMin;
}
V(r, i), t.type === "wheel" && $(t);
}
function B() {
if (p.initialViewportStart !== void 0 && p.initialViewportEnd !== void 0 && p.initialViewportStart >= p.initialViewportEnd) throw Error("[vue-timeline-chart] Invalid props: initialViewportStart must be smaller than initialViewportEnd");
if (p.viewportMin !== void 0 && p.viewportMax !== void 0 && p.viewportMin >= p.viewportMax) throw Error("[vue-timeline-chart] Invalid props: viewportMin must be smaller than viewportMax");
}
function V(e, t) {
if (e === void 0 && t === void 0) {
console.warn("[vue-timeline-chart] setViewport: both start and end are undefined. No viewport will be set.");
return;
}
let n = e === void 0 ? w.value : p.viewportMin === void 0 ? e : Math.max(e, p.viewportMin), r = t === void 0 ? T.value : p.viewportMax === void 0 ? t : Math.min(t, p.viewportMax), i = r - n;
if (p.minViewportDuration !== void 0 && i < p.minViewportDuration) {
let e = p.minViewportDuration - i;
n -= e * .5, r += e * .5;
} else if (p.maxViewportDuration !== void 0 && i > p.maxViewportDuration) {
let e = p.maxViewportDuration - i;
n -= e * .5, r += e * .5;
}
w.value = Math.round(n), T.value = Math.round(r);
}
function H(e) {
if (B(), v("wheel", e), e.deltaY === 0 && e.preventDefault(), e.shiftKey) {
e.preventDefault(), z((e.deltaY === 0 && e.deltaX !== 0 ? e.deltaX : e.deltaY) * (e.deltaMode === 0 ? 1 : 18), e);
return;
}
if (e.deltaX !== 0) {
z(e.deltaX * (e.deltaMode === 0 ? 1 : 18), e);
return;
}
if (!(e.metaKey || e.ctrlKey)) return;
e.preventDefault();
let t = (e.clientX - D.value) / C.value, n = p.maxZoomSpeed ? Math.max(-p.maxZoomSpeed, Math.min(p.maxZoomSpeed, e.deltaY * (e.deltaMode === 0 ? 1 : 10))) : e.deltaY * (e.deltaMode === 0 ? 1 : 10);
U(Math.round(-E.value * .01 * n), t, e);
}
function U(e, t = .5, n) {
e > 0 ? e = E.value - e < p.minViewportDuration ? E.value - p.minViewportDuration : e : p.maxViewportDuration && (e = E.value - e > p.maxViewportDuration ? -(p.maxViewportDuration - E.value) : e);
let r = e * t, i = e - r, a = w.value + r, o = T.value - i;
if (a >= o) {
console.error("Rounding issue probably occured while zooming.\n\nSetting different values for minViewportDuration and maxViewportDuration might help.");
return;
}
V(a, o), $(n);
}
function W(e) {
let t;
t = "touches" in e ? Array.from(e.touches).reduce((e, t) => e + t.clientX, 0) / e.touches.length : e.clientX;
let n = (t - D.value) / C.value;
return w.value + E.value * n;
}
let { state: G, setLastTouchX: K, setInitialTouchList: q } = xe({
viewportStart: w,
viewportEnd: T
});
function he(e) {
if (e.touches.length === 2 && G.initialPinchDistance !== null && G.initialTouchViewportStart !== null && G.initialTouchViewportEnd !== null) {
let [t, n] = [...e.touches].sort((e, t) => e.clientX - t.clientX), [r, i] = [t, n].map((e) => [...G.initialTouchList].find((t) => t.identifier === e.identifier)), a = be(t, n) / G.initialPinchDistance, o = (r.screenX + i.screenX) / 2, s = -((t.screenX + n.screenX) / 2 - o) / ie.value, c = (o - D.value) / C.value, l = G.initialTouchViewportEnd - G.initialTouchViewportStart, u = l / a, d = u - l, f = G.initialTouchViewportStart - d * c + s;
V(f, f + u);
} else if (e.touches.length === 1) {
let [t] = e.touches;
G.lastTouchX === null ? G.lastTouchX = t.clientX : (z(G.lastTouchX - t.clientX, e), K(e));
}
v("touchmove", {
time: W(e),
event: e
});
}
function ge(e) {
q(e), K(e), v("touchstart", {
time: W(e),
event: e
});
}
function _e(e) {
K(e), q(e), v("touchend", { event: e });
}
function J(e, t = null) {
v("pointerdown", {
time: W(e),
event: e,
item: t
});
}
function Y(e, t = null) {
v("pointermove", {
time: W(e),
event: e,
item: t
});
}
function X(e, t = null) {
v("pointerup", {
time: W(e),
event: e,
item: t
});
}
function Z(e, t = null) {
v("click", {
time: W(e),
event: e,
item: t
});
}
function Q(e, t = null) {
v("contextmenu", {
time: W(e),
event: e,
item: t
});
}
function $(e) {
v("mousemoveTimeline", {
time: W(e),
event: e
});
}
function ve(e) {
v("mouseleaveTimeline", { event: e });
}
return (t, s) => (m(), r("div", Se, [i("div", {
ref_key: "timelineEl",
ref: S,
class: "timeline",
onWheel: H,
onClick: Z,
onTouchmove: he,
onTouchstart: ge,
onTouchend: _e,
onPointermove: Y,
onPointerdown: J,
onPointerup: X,
onContextmenu: x(Q, ["prevent"]),
onMousemove: $,
onMouseleave: ve
}, [i("div", Ce, [
g(t.$slots, "timestamps-before", { scale: y(L) }, void 0, !0),
(m(!0), r(e, null, h(y(I), (e, n) => (m(), r("div", {
key: e,
class: u(["timestamp", ue(e)]),
style: d({ "--_left": `${le.value[n]}px` })
}, [g(t.$slots, "timestamp", {
timestamp: e,
scale: y(L)
}, () => [a(ee(o.renderTimestampLabel(e, y(L))), 1)], !0)], 6))), 128)),
g(t.$slots, "timestamps-after", { scale: y(L) }, void 0, !0),
(m(!0), r(e, null, h(A.value.filter((e) => e.group === "_timestamps"), (e) => (m(), r("div", {
key: e.id,
style: d(F(e)),
class: u([e.type, e.className])
}, [g(t.$slots, "marker", { item: e }, void 0, !0)], 6))), 128)),
(m(!0), r(e, null, h(k.value.filter((e) => e.group === "_timestamps" && e.type === "marker"), (e) => (m(), r("div", {
key: e.id,
style: d(F(e)),
class: u([e.type, e.className])
}, [g(t.$slots, "marker", { item: e }, void 0, !0)], 6))), 128))
]), i("div", we, [
(m(!0), r(e, null, h(o.groups, (n) => (m(), r("div", {
key: n.id,
class: u(["group", n.className]),
style: d(n.cssVariables)
}, [
i("div", { class: u(["group-label", { fixed: o.fixedLabels }]) }, [g(t.$slots, "group-label", { group: n }, () => [a(ee(n.label), 1)], !0)], 2),
i("div", Te, [g(t.$slots, `items-${n.id}`, {
group: n,
itemsInViewport: k.value.filter((e) => e.group === n.id),
viewportStart: w.value,
viewportEnd: T.value
}, () => [(m(!0), r(e, null, h(k.value.filter((e) => e.group === n.id && e.type !== "background"), (e) => (m(), r("div", {
key: e.id,
style: d(F(e)),
class: u([
"item",
e.type,
e.className,
{ active: o.activeItems.includes(e.id) }
]),
onClick: x((t) => Z(t, e), ["stop"]),
onPointermove: x((t) => Y(t, e), ["stop"]),
onPointerdown: x((t) => J(t, e), ["stop"]),
onPointerup: x((t) => X(t, e), ["stop"]),
onContextmenu: x((t) => Q(t, e), ["prevent", "stop"])
}, [g(t.$slots, "item", { item: e }, void 0, !0)], 46, Ee))), 128))], !0)]),
(m(!0), r(e, null, h(k.value.filter((e) => e.group === n.id && e.type === "background"), (e) => (m(), r("div", {
key: e.id,
style: d(F(e)),
class: u([e.type, e.className]),
onClick: x((t) => Z(t, e), ["stop"]),
onPointermove: x((t) => Y(t, e), ["stop"]),
onPointerdown: x((t) => J(t, e), ["stop"]),
onPointerup: x((t) => X(t, e), ["stop"]),
onContextmenu: x((t) => Q(t, e), ["prevent", "stop"])
}, null, 46, De))), 128)),
(m(!0), r(e, null, h(A.value.filter((e) => e.group === n.id), (e) => (m(), r("div", {
key: e.id,
style: d(F(e, !0)),
class: u([e.type, e.className])
}, [g(t.$slots, "marker", { item: e }, void 0, !0)], 6))), 128))
], 6))), 128)),
j.value.length > 0 ? (m(), r("div", Oe, [(m(!0), r(e, null, h(j.value, (e) => (m(), r("div", {
key: e.id,
style: d(F(e)),
class: u([e.type, e.className]),
onClick: x((t) => Z(t, e), ["stop"]),
onPointermove: x((t) => Y(t, e), ["stop"]),
onPointerdown: x((t) => J(t, e), ["stop"]),
onPointerup: x((t) => X(t, e), ["stop"]),
onContextmenu: x((t) => Q(t, e), ["prevent", "stop"])
}, null, 46, ke))), 128))])) : n("", !0),
se.value.length > 0 ? (m(), r("div", Ae, [(m(!0), r(e, null, h(se.value, (e) => (m(), r("div", {
key: e.id,
style: d(F(e, !0)),
class: u([e.type, e.className])
}, [g(t.$slots, "marker", { item: e }, void 0, !0)], 6))), 128))])) : n("", !0)
])], 544)]));
}
}), [["__scopeId", "data-v-c1d18caa"]]);
//#endregion
export { je as Timeline };