@m4l/gclick 0.21.0 → 0.22.0

package/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/ReportsViewerChartSeries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportsViewerChartSeries.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/gclick/src/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/ReportsViewerChartSeries.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAkB9D,MAAM,WAAW,6BAA6B;IAC5C,iEAAiE;IACjE,MAAM,EAAE,uBAAuB,CAAC;IAChC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,UAAkB,GACnB,EAAE,6BAA6B,oDAmC/B"}
+{"version":3,"file":"ReportsViewerChartSeries.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/gclick/src/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/ReportsViewerChartSeries.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAkB9D,MAAM,WAAW,6BAA6B;IAC5C,iEAAiE;IACjE,MAAM,EAAE,uBAAuB,CAAC;IAChC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,UAAkB,GACnB,EAAE,6BAA6B,oDAqC/B"}

package/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/ReportsViewerChartSeries.js

@@ -1,45 +1,46 @@
 import { jsx as e } from "@emotion/react/jsx-runtime";
 import u from "echarts-for-react";
-import { useTheme as f, styled as n } from "@mui/material/styles";
-import { useRef as d, useMemo as R } from "react";
-import { useUserPreferences as y, useModuleDictionary as C } from "@m4l/core";
-import { resolveChartSeriesCompactNumberDictionary as w } from "@m4l/widgets";
-import { generateReportsViewerChartSeriesOptions as g } from "./helpers/generateReportsViewerChartSeriesOptions.js";
-import { useReportsViewerChartResize as S } from "./hooks/useReportsViewerChartResize.js";
-const b = n("div")({
+import { useTheme as d, styled as n } from "@mui/material/styles";
+import { useRef as R, useMemo as y } from "react";
+import { useUserPreferences as C, useModuleDictionary as w } from "@m4l/core";
+import { resolveChartSeriesCompactNumberDictionary as g } from "@m4l/widgets";
+import { generateReportsViewerChartSeriesOptions as S } from "./helpers/generateReportsViewerChartSeriesOptions.js";
+import { useReportsViewerChartResize as b } from "./hooks/useReportsViewerChartResize.js";
+const V = n("div")({
   containerName: "root",
   containerType: "size",
   width: "100%",
   height: "100%"
-}), V = n("div")({
+}), v = n("div")({
   width: "100%",
   height: "100%",
   minWidth: "500px",
   minHeight: "300px"
 });
-function O({
+function P({
   values: a,
   scrollable: m = !1
 }) {
-  const t = d(null), c = f(), { locale: r, decimalSymbol: o, thousandsSymbol: i } = y(), { getLabel: s } = C(), h = S(t), l = R(
+  const t = R(null), c = d(), { locale: r, decimalSymbol: o, thousandsSymbol: i, formatDate: h } = C(), { getLabel: s } = w(), l = b(t), p = y(
     () => ({
       locale: r ?? Intl.NumberFormat().resolvedOptions().locale,
       decimalSymbol: o,
       thousandsSymbol: i,
-      compactDictionary: w(s)
+      compactDictionary: g(s)
     }),
     [o, s, r, i]
-  ), p = g(
+  ), f = S(
     a,
     c,
     m,
-    l
+    p,
+    h
   );
-  return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(V, { ref: h, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(v, { ref: l, children: /* @__PURE__ */ e(
     u,
     {
       ref: t,
-      option: p,
+      option: f,
       style: { height: "100%", width: "100%" },
       notMerge: !0,
       lazyUpdate: !0
@@ -47,5 +48,5 @@ function O({
   ) }) });
 }
 export {
-  O as ReportsViewerChartSeries
+  P as ReportsViewerChartSeries
 };

package/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/helpers/generateReportsViewerChartSeriesOptions.d.ts

@@ -1,8 +1,11 @@
 import { Theme } from '@mui/material/styles';
+import { ResolveDatePresentationOptions } from '@m4l/core';
 import { CompactNumberLocalizationOptions } from '@m4l/widgets';
 import { ChartSeriesParsedConfig } from '../../../../types';
+type ReportsViewerChartDateFormatter = (options: ResolveDatePresentationOptions) => string;
 /**
  * Builds the ECharts options for ReportsViewer's local ChartSeries renderer.
  */
-export declare function generateReportsViewerChartSeriesOptions(values: ChartSeriesParsedConfig, theme: Theme, scrollable: boolean, numberLocalization?: CompactNumberLocalizationOptions): object;
+export declare function generateReportsViewerChartSeriesOptions(values: ChartSeriesParsedConfig, theme: Theme, scrollable: boolean, numberLocalization?: CompactNumberLocalizationOptions, formatDate?: ReportsViewerChartDateFormatter): object;
+export {};
 //# sourceMappingURL=generateReportsViewerChartSeriesOptions.d.ts.map

package/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/helpers/generateReportsViewerChartSeriesOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateReportsViewerChartSeriesOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/gclick/src/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/helpers/generateReportsViewerChartSeriesOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AA8FjE;;GAEG;AACH,wBAAgB,uCAAuC,CACrD,MAAM,EAAE,uBAAuB,EAC/B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,OAAO,EACnB,kBAAkB,CAAC,EAAE,gCAAgC,GACpD,MAAM,CAsQR"}
+{"version":3,"file":"generateReportsViewerChartSeriesOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/gclick/src/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/helpers/generateReportsViewerChartSeriesOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC;AAEhE,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAQjE,KAAK,+BAA+B,GAAG,CACrC,OAAO,EAAE,8BAA8B,KACpC,MAAM,CAAC;AA2HZ;;GAEG;AACH,wBAAgB,uCAAuC,CACrD,MAAM,EAAE,uBAAuB,EAC/B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,OAAO,EACnB,kBAAkB,CAAC,EAAE,gCAAgC,EACrD,UAAU,CAAC,EAAE,+BAA+B,GAC3C,MAAM,CA2QR"}

package/components/ReportsViewer/subcomponents/SectionRenderer/SeriesChartSectionRenderer/helpers/generateReportsViewerChartSeriesOptions.js

@@ -1,57 +1,67 @@
-import * as m from "echarts";
-import { BASE_TAG_OBJECT_COLORS_LIGHT as x } from "@m4l/styles";
-import { formatCompactNumber as g } from "@m4l/widgets";
-import { remapReportsViewerChartSeriesTooltip as C } from "./remapReportsViewerChartSeriesTooltip.js";
-const p = "#9ca3af", b = 48;
+import * as x from "echarts";
+import { BASE_TAG_OBJECT_COLORS_LIGHT as g } from "@m4l/styles";
+import { formatCompactNumber as C } from "@m4l/widgets";
+import { remapReportsViewerChartSeriesTooltip as b } from "./remapReportsViewerChartSeriesTooltip.js";
+const p = "#9ca3af", h = 48, S = /^\d{4}-\d{2}-\d{2}[Tt]\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:[Zz]|[+-]\d{2}:?\d{2})$/;
 function s(t) {
   if (t === null || typeof t != "string")
     return p;
   if (t.includes("#"))
     return t;
-  const r = t.replace("var(", "").replace(")", "");
-  return getComputedStyle(document.documentElement).getPropertyValue(r).trim() || p;
+  const e = t.replace("var(", "").replace(")", "");
+  return getComputedStyle(document.documentElement).getPropertyValue(e).trim() || p;
 }
-function c(t, r = "contained", l = "backgroundColorTone") {
+function d(t, e = "contained", l = "backgroundColorTone") {
   if (t.includes("#"))
     return t;
   if (!t?.trim())
     return p;
-  const n = x[t];
-  return n ? n[r][l] : p;
+  const n = g[t];
+  return n ? n[e][l] : p;
 }
-function h(t) {
-  return t ? Object.keys(t).reduce((r, l) => {
+function T(t) {
+  return t ? Object.keys(t).reduce((e, l) => {
     const n = t[l];
-    return n && typeof n == "object" && "v" in n && (r[l] = String(n.v).replace(/[0-9.\s]+/g, "")), r;
+    return n && typeof n == "object" && "v" in n && (e[l] = String(n.v).replace(/[0-9.\s]+/g, "")), e;
   }, {}) : {};
 }
-function S(t, r) {
-  return typeof t == "string" && t.trim() !== "" ? t.trim() : typeof r == "string" && r.trim() !== "" ? r.trim() : "";
+function A(t, e) {
+  return typeof t == "string" && t.trim() !== "" ? t.trim() : typeof e == "string" && e.trim() !== "" ? e.trim() : "";
 }
-function A(t, r) {
-  return r ? `${t} (${r})` : t;
+function _(t, e) {
+  return e ? `${t} (${e})` : t;
 }
-function L(t, r, l, n) {
-  const e = {
+function L(t) {
+  return typeof t != "string" || !S.test(t) ? !1 : !Number.isNaN(new Date(t).getTime());
+}
+function k(t, e) {
+  return !e || !L(t) ? t : e({
+    fallbackValue: t,
+    presentationType: "datetime",
+    value: t
+  });
+}
+function P(t, e, l, n, f) {
+  const r = {
     textPrimaryColor: s(
-      r.vars?.palette?.text?.primary
+      e.vars?.palette?.text?.primary
     ),
     textDisabledColor: s(
-      r.vars?.palette?.text?.disabled
+      e.vars?.palette?.text?.disabled
     ),
     themeBackgroundColor: s(
-      r.vars?.palette?.background?.default
+      e.vars?.palette?.background?.default
     ),
     contrastTextColor: s(
-      r.vars?.palette?.text?.contrastText
+      e.vars?.palette?.text?.contrastText
     ),
     backgroundNeutralColor: s(
-      r.vars?.palette?.background?.neutral
+      e.vars?.palette?.background?.neutral
     ),
     contrastDefaultColor: s(
-      r.vars?.palette?.background?.contrastDefault
+      e.vars?.palette?.background?.contrastDefault
     )
-  }, f = h(t.values[0]);
+  }, u = T(t.values[0]);
   return {
     baseOption: {
       tooltip: {
@@ -61,25 +71,25 @@ function L(t, r, l, n) {
         shadowColor: "transparent",
         borderWidth: 0,
         textStyle: {
-          color: e.contrastTextColor,
+          color: r.contrastTextColor,
           fontFamily: "Inter",
           fontSize: 13,
           fontWeight: 700
         },
-        formatter: (o) => C(o, t, e),
+        formatter: (o) => b(o, t, r),
         axisPointer: {
           type: "cross",
           lineStyle: {
-            color: e.textDisabledColor,
+            color: r.textDisabledColor,
             type: "solid"
           },
           crossStyle: {
-            color: e.textDisabledColor,
+            color: r.textDisabledColor,
             type: "solid"
           },
           label: {
-            backgroundColor: e.backgroundNeutralColor,
-            color: e.textPrimaryColor,
+            backgroundColor: r.backgroundNeutralColor,
+            color: r.textPrimaryColor,
             fontFamily: "Inter",
             fontSize: 13,
             fontWeight: 400,
@@ -116,13 +126,18 @@ function L(t, r, l, n) {
         itemHeight: 11,
         textStyle: {
           fontSize: 12,
-          color: e.textPrimaryColor
+          color: r.textPrimaryColor
         },
         data: t.series.map((o) => o.title)
       },
       xAxis: t.xAxis.map((o, a) => ({
         type: "category",
-        data: t.values.map((i) => i[o.field]),
+        data: t.values.map(
+          (i) => k(
+            i[o.field],
+            f
+          )
+        ),
         offset: a > 1 ? (a - 1) * 20 : 0,
         axisLine: { show: !1 },
         axisTick: { show: !1 },
@@ -133,23 +148,23 @@ function L(t, r, l, n) {
           fontSize: 11,
           fontWeight: 500,
           hideOverlap: !0,
-          color: e.textPrimaryColor
+          color: r.textPrimaryColor
         }
       })),
       yAxis: t.yAxis.map((o, a) => {
         const i = t.series.find(
-          (d) => d.yAxisId === o.id
-        ), u = S(
+          (c) => c.yAxisId === o.id
+        ), m = A(
           o.unit,
-          f[i?.field || ""]
-        ), y = c(
+          u[i?.field || ""]
+        ), y = d(
           i?.pallet_color || "",
           "contained",
           "backgroundColorTone"
         );
         return {
           type: "value",
-          name: A(o.title, u),
+          name: _(o.title, m),
           position: a === 0 ? "left" : "right",
           offset: a > 1 ? (a - 1) * 70 : 0,
           alignTicks: !0,
@@ -157,32 +172,32 @@ function L(t, r, l, n) {
             show: !0,
             lineStyle: {
               type: "dashed",
-              color: e.textDisabledColor,
+              color: r.textDisabledColor,
               opacity: 0.3,
               width: 1,
               dashOffset: 0
             }
           },
           nameTextStyle: {
-            color: e.textDisabledColor,
+            color: r.textDisabledColor,
             fontFamily: "Inter",
             fontSize: "12px",
             fontWeight: 500
           },
           nameRotate: 90,
           nameLocation: "middle",
-          nameGap: b,
+          nameGap: h,
           axisLabel: {
-            color: e.textPrimaryColor,
+            color: r.textPrimaryColor,
             fontFamily: "Jura",
             fontSize: "13px",
             fontWeight: 700,
             /**
              * Format y-axis values with locale-aware compact notation.
              */
-            formatter: (d) => g({
-              value: d,
-              fallbackValue: `${d}`,
+            formatter: (c) => C({
+              value: c,
+              fallbackValue: `${c}`,
               ...n
             })
           },
@@ -208,10 +223,10 @@ function L(t, r, l, n) {
           type: o.type,
           yAxisIndex: a !== -1 ? a : 0,
           areaStyle: {
-            color: new m.graphic.LinearGradient(0, 0, 0, 1, [
+            color: new x.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: c(
+                color: d(
                   o?.pallet_color || "",
                   "contained",
                   "backgroundColor"
@@ -231,16 +246,16 @@ function L(t, r, l, n) {
             symbolSize: 10,
             itemStyle: {
               borderWidth: 2,
-              borderColor: c(
+              borderColor: d(
                 o.pallet_color,
                 "contained",
                 "backgroundColorTone"
               ),
-              color: e.themeBackgroundColor
+              color: r.themeBackgroundColor
             },
             lineStyle: {
               width: 2,
-              color: c(
+              color: d(
                 o.pallet_color,
                 "contained",
                 "backgroundColorTone"
@@ -248,7 +263,7 @@ function L(t, r, l, n) {
             },
             emphasis: {
               itemStyle: {
-                color: c(
+                color: d(
                   o.pallet_color,
                   "contained",
                   "backgroundColorTone"
@@ -263,7 +278,7 @@ function L(t, r, l, n) {
             itemStyle: {
               borderRadius: [6, 6, 0, 0]
             },
-            color: c(
+            color: d(
               o.pallet_color,
               "contained",
               "backgroundColorTone"
@@ -275,5 +290,5 @@ function L(t, r, l, n) {
   };
 }
 export {
-  L as generateReportsViewerChartSeriesOptions
+  P as generateReportsViewerChartSeriesOptions
 };

package/components/VideoTimeLineSelector/helpers/clusterEvents/clusterEvents.d.ts

@@ -10,10 +10,10 @@ export interface ClusteredEvent {
     jumpNextTimeVisible: TimeVisible | null;
 }
 /**
- * Agrupa eventos que están muy cerca temporalmente en clústers
- * @param events - Array de eventos a agrupar
- * @param clusterThreshold - Umbral en minutos para considerar eventos como cercanos (default: 5 minutos)
- * @returns Array de eventos individuales y clústers
+ * Group nearby timeline events into single-event markers or clusters.
+ * @param events - Event array to group.
+ * @param clusterThreshold - Minutes used to consider events nearby.
+ * @returns Single-event markers and clusters.
  */
-export declare const clusterEvents: (events: EventType<unknown>[], clusterThreshold: number | undefined, containerWidth: number) => ClusteredEvent[];
+export declare const clusterEvents: (events: EventType<unknown>[], clusterThreshold: number | undefined, containerWidth: number, timeZoneName?: string | null) => ClusteredEvent[];
 //# sourceMappingURL=clusterEvents.d.ts.map

package/components/VideoTimeLineSelector/helpers/clusterEvents/clusterEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clusterEvents.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/clusterEvents/clusterEvents.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAyCrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,WAAW,GAAG,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,SAAS,CAAC,OAAO,CAAC,EAAE,EAC5B,oCAAoB,EACpB,gBAAgB,MAAM,KACrB,cAAc,EA4ChB,CAAC"}
+{"version":3,"file":"clusterEvents.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/clusterEvents/clusterEvents.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkCrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,WAAW,GAAG,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,SAAS,CAAC,OAAO,CAAC,EAAE,EAC5B,oCAAoB,EACpB,gBAAgB,MAAM,EACtB,eAAe,MAAM,GAAG,IAAI,KAC3B,cAAc,EA+ChB,CAAC"}

package/components/VideoTimeLineSelector/helpers/clusterEvents/clusterEvents.js

@@ -1,67 +1,81 @@
-import { TIME_SCALES as f } from "../../constants.js";
-import { getTimeLinePosition as g } from "../getTimeLinePosition/getTimeLinePosition.js";
-const T = (i) => {
-  if (i.length < 2)
+import { TIME_SCALES as g } from "../../constants.js";
+import { getTimeLinePosition as p } from "../getTimeLinePosition/getTimeLinePosition.js";
+const a = (e) => {
+  if (e.length < 2)
     return null;
-  const m = [...i].sort((s, t) => s.startTime.getTime() - t.startTime.getTime()), l = (m[1].startTime.getTime() - m[0].startTime.getTime()) / (1e3 * 60);
-  if (l === 0)
+  const l = [...e].sort((s, r) => s.startTime.getTime() - r.startTime.getTime()), n = (l[1].startTime.getTime() - l[0].startTime.getTime()) / (1e3 * 60);
+  if (n === 0)
     return null;
-  const n = ["24h", "6h", "2h", "1h", "10min"];
-  for (const s of n) {
-    const t = f[s];
-    if (l > t.clusterThresholdMinutes)
+  const o = ["24h", "6h", "2h", "1h", "10min"];
+  for (const s of o) {
+    const r = g[s];
+    if (n > r.clusterThresholdMinutes)
       return s;
   }
   return "10min";
-}, d = (i, m = 5, l) => {
-  if (!i || i.length === 0)
+}, C = (e, l = 5, n, o) => {
+  if (!e || e.length === 0)
     return [];
-  const n = [...i].sort((r, e) => r.startTime.getTime() - e.startTime.getTime()), s = [];
-  let t = [], o = null;
-  for (let r = 0; r < n.length; r++) {
-    const e = n[r];
-    if (t.length === 0)
-      t = [e], o = e.startTime;
-    else if ((e.startTime.getTime() - (o?.getTime() ?? 0)) / 6e4 <= m)
-      t.push(e);
+  const s = [...e].sort((m, t) => m.startTime.getTime() - t.startTime.getTime()), r = [];
+  let i = [], u = null;
+  for (let m = 0; m < s.length; m++) {
+    const t = s[m];
+    if (i.length === 0)
+      i = [t], u = t.startTime;
+    else if ((t.startTime.getTime() - (u?.getTime() ?? 0)) / 6e4 <= l)
+      i.push(t);
     else {
-      const c = T(t);
-      s.push(a(t, l, c)), t = [e], o = e.startTime;
+      const f = a(i);
+      r.push(c(
+        i,
+        n,
+        f,
+        o
+      )), i = [t], u = t.startTime;
     }
   }
-  if (t.length > 0) {
-    const r = T(t);
-    s.push(a(t, l, r));
+  if (i.length > 0) {
+    const m = a(i);
+    r.push(c(
+      i,
+      n,
+      m,
+      o
+    ));
   }
-  return s;
-}, a = (i, m, l) => {
-  const { left: n } = g({ startTime: i[0].startTime, endTime: i[0].startTime }), s = 5.5, t = 7, o = parseFloat(n) - s * 100 / m, r = parseFloat(n) - t * 100 / m;
-  if (i.length === 1) {
-    const e = i[0];
+  return r;
+}, c = (e, l, n, o) => {
+  const { left: s } = p({
+    startTime: e[0].startTime,
+    endTime: e[0].startTime,
+    timeZoneName: o
+  }), r = 5.5, i = 7, u = parseFloat(s) - r * 100 / l, m = parseFloat(s) - i * 100 / l;
+  if (e.length === 1) {
+    const t = e[0];
     return {
-      id: `event-${e.startTime.getTime()}`,
-      events: [e],
-      startTime: e.startTime,
+      id: `event-${t.startTime.getTime()}`,
+      events: [t],
+      startTime: t.startTime,
       position: {
-        left: `${o.toString()}%`
+        left: `${u.toString()}%`
       },
       isCluster: !1,
       jumpNextTimeVisible: null
     };
   } else {
-    const e = new Date(Math.min(...i.map((u) => u.startTime.getTime())));
+    const t = new Date(Math.min(...e.map((T) => T.startTime.getTime())));
     return {
-      id: `cluster-${e.getTime()}`,
-      events: i,
-      startTime: e,
+      id: `cluster-${t.getTime()}`,
+      events: e,
+      startTime: t,
       position: {
-        left: `${r.toString()}%`
+        left: `${m.toString()}%`
       },
       isCluster: !0,
-      jumpNextTimeVisible: l
+      jumpNextTimeVisible: n
     };
   }
 };
 export {
-  d as clusterEvents
+  C as clusterEvents
 };

package/components/VideoTimeLineSelector/helpers/getIntersectedSegments/getIntersectedSegments.d.ts

@@ -1,6 +1,6 @@
 import { ActiveChannel, IntersectedSegmentType, SegmentType } from '../../types';
 /**
- * Obtiene los segmentos intersectados con la línea de tiempo, solamente para los canales activos
+ * Resolve the active-channel segments intersecting the selected wall-clock time.
  */
-export declare const getIntersectedSegments: (currentTime: number, activeChannels: ActiveChannel[], segments: SegmentType<any>[]) => IntersectedSegmentType[];
+export declare const getIntersectedSegments: (currentTime: number, activeChannels: ActiveChannel[], segments: SegmentType<any>[], timeZoneName?: string | null) => IntersectedSegmentType[];
 //# sourceMappingURL=getIntersectedSegments.d.ts.map

package/components/VideoTimeLineSelector/helpers/getIntersectedSegments/getIntersectedSegments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getIntersectedSegments.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getIntersectedSegments/getIntersectedSegments.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM,EAAE,gBAAgB,aAAa,EAAE,EAAE,UAAU,WAAW,CAAC,GAAG,CAAC,EAAE,6BAoCxH,CAAC"}
+{"version":3,"file":"getIntersectedSegments.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getIntersectedSegments/getIntersectedSegments.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGjF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,aAAa,MAAM,EACnB,gBAAgB,aAAa,EAAE,EAC/B,UAAU,WAAW,CAAC,GAAG,CAAC,EAAE,EAC5B,eAAe,MAAM,GAAG,IAAI,6BA+B7B,CAAC"}

package/components/VideoTimeLineSelector/helpers/getIntersectedSegments/getIntersectedSegments.js

@@ -1,19 +1,26 @@
-const a = (t, d, i) => {
-  const c = i.filter(
-    (n) => d.includes(n.channelId)
-  ), s = [];
-  return c.forEach((n) => {
+import { dateToDaySeconds as d } from "../playbackRange/playbackRange.js";
+const S = (t, o, i, s) => {
+  const r = i.filter(
+    (n) => o.includes(n.channelId)
+  ), c = [];
+  return r.forEach((n) => {
     n.segmentsList.forEach((e) => {
-      const o = e.startTime.getHours() * 3600 + e.startTime.getMinutes() * 60 + e.startTime.getSeconds(), r = e.endTime.getHours() * 3600 + e.endTime.getMinutes() * 60 + e.endTime.getSeconds();
-      o <= t && r >= t && s.push({
+      const a = d(
+        e.startTime,
+        s
+      ), T = d(
+        e.endTime,
+        s
+      );
+      a <= t && T >= t && c.push({
         channelId: n.channelId,
         segmentId: e.segmentId,
         startTime: e.startTime,
         endTime: e.endTime
       });
     });
-  }), s;
+  }), c;
 };
 export {
-  a as getIntersectedSegments
+  S as getIntersectedSegments
 };

package/components/VideoTimeLineSelector/helpers/getTimeLinePosition/getTimeLinePosition.d.ts

@@ -1,6 +1,6 @@
 import { GetTimeLinePositionProps } from './types';
 /**
- * Obtiene la posición y el ancho de un punto en la línea de tiempo dado un rango de tiempo
+ * Resolve the timeline position and width for one wall-clock time range.
  */
 export declare const getTimeLinePosition: (props: GetTimeLinePositionProps) => {
     width: string;

package/components/VideoTimeLineSelector/helpers/getTimeLinePosition/getTimeLinePosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getTimeLinePosition.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getTimeLinePosition/getTimeLinePosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB;;;CAoBlE,CAAC"}
+{"version":3,"file":"getTimeLinePosition.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getTimeLinePosition/getTimeLinePosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAGnD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB;;;CAelE,CAAC"}

package/components/VideoTimeLineSelector/helpers/getTimeLinePosition/getTimeLinePosition.js

@@ -1,10 +1,11 @@
-const u = (n) => {
-  const { startTime: e, endTime: t } = n, i = e.getHours() + e.getMinutes() / 60 + e.getSeconds() / 3600 + e.getMilliseconds() / 36e5;
+import { dateToDaySeconds as n } from "../playbackRange/playbackRange.js";
+const T = (o) => {
+  const { startTime: i, endTime: s, timeZoneName: e } = o, m = n(i, e), a = n(s, e), t = m / 3600;
   return {
-    width: `${(t.getHours() + t.getMinutes() / 60 + t.getSeconds() / 3600 + t.getMilliseconds() / 36e5 - i) / 24 * 100}%`,
-    left: `${i * 100 / 24}%`
+    width: `${(a / 3600 - t) / 24 * 100}%`,
+    left: `${t * 100 / 24}%`
   };
 };
 export {
-  u as getTimeLinePosition
+  T as getTimeLinePosition
 };

package/components/VideoTimeLineSelector/helpers/getTimeLinePosition/types.d.ts

@@ -1,5 +1,6 @@
 export type GetTimeLinePositionProps = {
     startTime: Date;
     endTime: Date;
+    timeZoneName?: string | null;
 };
 //# sourceMappingURL=types.d.ts.map

package/components/VideoTimeLineSelector/helpers/getTimeLinePosition/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getTimeLinePosition/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoTimeLineSelector/helpers/getTimeLinePosition/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAA"}