@wick-charts/vue 0.6.3 → 0.7.0

package/dist/index.js

@@ -1,193 +1,197 @@
-import { default as o } from "./BarSeries.vue.js";
-import { default as a } from "./CandlestickSeries.vue.js";
-import { default as m } from "./ChartContainer.vue.js";
-import { useCrosshairPosition as i, useLastYValue as s, usePreviousClose as x, useVisibleRange as n, useYRange as l } from "./composables.js";
-import { useChartInstance as u, useTheme as c } from "./context.js";
-import { default as h } from "./HeatmapSeries.vue.js";
-import { default as S } from "./LineSeries.vue.js";
-import { default as P } from "./PieSeries.vue.js";
-import { default as T } from "./ui/Crosshair.vue.js";
-import { default as k } from "./ui/HeatmapTooltip.vue.js";
-import { default as w } from "./ui/InfoBar.vue.js";
-import { default as b } from "./ui/Legend.vue.js";
-import { default as A } from "./ui/Marker.vue.js";
-import { default as M } from "./ui/Navigator.vue.js";
-import { default as z } from "./ui/NumberFlow.vue.js";
-import { default as y } from "./ui/PieLegend.vue.js";
-import { default as q } from "./ui/PieTooltip.vue.js";
-import { default as V } from "./ui/ReferenceLine.vue.js";
-import { default as E, default as G } from "./ui/TimeAxis.vue.js";
-import { default as j } from "./ui/TimeRegion.vue.js";
-import { default as K } from "./ui/Title.vue.js";
-import { default as W } from "./ui/Tooltip.vue.js";
-import { default as _ } from "./ui/YAxis.vue.js";
-import { default as ee } from "./ui/YLabel.vue.js";
-import { BarSeriesDef as oe } from "./core/dist/series/bar.js";
-import { CandlestickSeriesDef as ae } from "./core/dist/series/candlestick.js";
-import { ChartInstance as me } from "./core/dist/chart.js";
-import { HeatmapSeriesDef as ie } from "./core/dist/series/heatmap.js";
-import { LineSeriesDef as xe } from "./core/dist/series/line.js";
-import { NavigatorController as le } from "./core/dist/navigator/controller.js";
-import { PerfMonitor as ue } from "./core/dist/perf/perf-monitor.js";
-import { PieSeriesDef as ge } from "./core/dist/series/pie.js";
-import { XScale as Ce } from "./core/dist/scales/x-scale.js";
-import { YScale as Ie } from "./core/dist/scales/y-scale.js";
-import { andromeda as ve } from "./core/dist/theme/themes/andromeda.js";
-import { autoGradient as Le, createTheme as ke, isDarkBg as De } from "./core/dist/theme/create.js";
-import { ayuMirage as Be } from "./core/dist/theme/themes/ayu-mirage.js";
-import { backfillSweepIntro as Re, centerOutIntro as Ae, plotterIntro as He, sweepIntro as Me, traceIntro as Ye, unfoldIntro as ze } from "./core/dist/series/line-intro.js";
-import { buildHoverSnapshots as ye, buildLastSnapshots as Ne } from "./core/dist/snapshots.js";
-import { candleUnfoldIntro as Oe, skeletonMorphIntro as Ve, wickBodyIntro as Xe } from "./core/dist/series/candlestick-intro.js";
-import { catppuccin as Ge } from "./core/dist/theme/themes/catppuccin.js";
-import { computeTooltipPosition as je } from "./core/dist/tooltip-position.js";
-import { deepEqual as Ke } from "./core/dist/utils/deep-equal.js";
-import { detectInterval as We, formatDate as Ze, formatTime as _e, normalizeTime as $e } from "./core/dist/utils/time.js";
-import { dracula as rr } from "./core/dist/theme/themes/dracula.js";
-import { fadeIntro as tr, riseIntro as ar, wipeIntro as fr } from "./core/dist/series/wave-intro.js";
-import { fillRoundedRect as pr, tracePath as ir } from "./core/dist/series/painters/canvas-path.js";
-import { formatCompact as xr, formatPriceAdaptive as nr } from "./core/dist/utils/format.js";
-import { githubLight as dr } from "./core/dist/theme/themes/github-light.js";
-import { growIntro as cr, springIntro as gr } from "./core/dist/series/bar-intro.js";
-import { gruvbox as Cr } from "./core/dist/theme/themes/gruvbox.js";
-import { handwritten as Ir } from "./core/dist/theme/themes/handwritten.js";
-import { hermite as vr } from "./core/dist/animation/y-range-hermite.js";
-import { highContrast as Lr } from "./core/dist/theme/themes/high-contrast.js";
-import { isTimeSeriesRenderer as Dr } from "./core/dist/series/types.js";
-import { lavenderMist as Br } from "./core/dist/theme/themes/lavender-mist.js";
-import { lightPink as Rr } from "./core/dist/theme/themes/light-pink.js";
-import { logScale as Hr } from "./core/dist/scales/log-scale.js";
-import { materialPalenight as Yr } from "./core/dist/theme/themes/material-palenight.js";
-import { minimalLight as Fr } from "./core/dist/theme/themes/minimal-light.js";
-import { mintBreeze as Nr } from "./core/dist/theme/themes/mint-breeze.js";
-import { mixColors as Or, sampleRamp as Vr } from "./core/dist/utils/color.js";
-import { monokaiPro as Er } from "./core/dist/theme/themes/monokai-pro.js";
-import { nightOwl as Ur } from "./core/dist/theme/themes/night-owl.js";
-import { oneDarkPro as Jr } from "./core/dist/theme/themes/one-dark-pro.js";
-import { panda as Qr } from "./core/dist/theme/themes/panda.js";
-import { parseAnimationTime as Zr } from "./core/dist/animation/time.js";
-import { peachCream as $r } from "./core/dist/theme/themes/peach-cream.js";
-import { perfHud as ro } from "./core/dist/perf/perf-hud.js";
-import { quietLight as to } from "./core/dist/theme/themes/quiet-light.js";
-import { registerBuiltinSeries as fo } from "./core/dist/series/register-builtins.js";
-import { registerSeriesDefinition as po } from "./core/dist/series/definition.js";
-import { resolveAxisFontSize as so, resolveAxisTextColor as xo, resolveCandlestickBodyColor as no } from "./core/dist/theme/resolve.js";
-import { rosePineDawn as uo } from "./core/dist/theme/themes/rose-pine-dawn.js";
-import { roundedBarFill as go, roundedCandleFill as ho, smoothCurve as Co, steppedCurve as So, straightCurve as Io } from "./core/dist/series/painters/builtins.js";
-import { sandDune as vo } from "./core/dist/theme/themes/sand-dune.js";
-import { skeletonLoadingIndicator as Lo } from "./core/dist/components/loading-indicator.js";
-import { snap as Do } from "./core/dist/animation/y-range-snap.js";
-import { solarizedLight as Bo } from "./core/dist/theme/themes/solarized-light.js";
-import { spring as Ro } from "./core/dist/animation/spring.js";
+import { default as o } from "./BandSeries.vue.js";
+import { default as a } from "./BarSeries.vue.js";
+import { default as m } from "./CandlestickSeries.vue.js";
+import { default as i } from "./ChartContainer.vue.js";
+import { useCrosshairPosition as x, useLastYValue as n, usePreviousClose as l, useVisibleRange as d, useYRange as u } from "./composables.js";
+import { useChartInstance as g, useTheme as h } from "./context.js";
+import { default as C } from "./HeatmapSeries.vue.js";
+import { default as P } from "./LineSeries.vue.js";
+import { default as T } from "./PieSeries.vue.js";
+import { default as k } from "./ui/Crosshair.vue.js";
+import { default as B } from "./ui/HeatmapTooltip.vue.js";
+import { default as b } from "./ui/InfoBar.vue.js";
+import { default as A } from "./ui/Legend.vue.js";
+import { default as M } from "./ui/Marker.vue.js";
+import { default as z } from "./ui/Navigator.vue.js";
+import { default as y } from "./ui/NumberFlow.vue.js";
+import { default as q } from "./ui/PieLegend.vue.js";
+import { default as V } from "./ui/PieTooltip.vue.js";
+import { default as E } from "./ui/ReferenceLine.vue.js";
+import { default as U } from "./ui/TimeRegion.vue.js";
+import { default as J } from "./ui/Title.vue.js";
+import { default as Q } from "./ui/Tooltip.vue.js";
+import { default as Z, default as _ } from "./ui/XAxis.vue.js";
+import { default as ee } from "./ui/YAxis.vue.js";
+import { default as oe } from "./ui/YLabel.vue.js";
+import { BandSeriesDef as ae } from "./core/dist/series/band.js";
+import { BarSeriesDef as me } from "./core/dist/series/bar.js";
+import { CandlestickSeriesDef as ie } from "./core/dist/series/candlestick.js";
+import { ChartInstance as xe } from "./core/dist/chart.js";
+import { HeatmapSeriesDef as le } from "./core/dist/series/heatmap.js";
+import { LineSeriesDef as ue } from "./core/dist/series/line.js";
+import { NavigatorController as ge } from "./core/dist/navigator/controller.js";
+import { PerfMonitor as Se } from "./core/dist/perf/perf-monitor.js";
+import { PieSeriesDef as Ie } from "./core/dist/series/pie.js";
+import { XScale as ve } from "./core/dist/scales/x-scale.js";
+import { YScale as Le } from "./core/dist/scales/y-scale.js";
+import { andromeda as De } from "./core/dist/theme/themes/andromeda.js";
+import { autoGradient as we, createTheme as be, isDarkBg as Re } from "./core/dist/theme/create.js";
+import { ayuMirage as He } from "./core/dist/theme/themes/ayu-mirage.js";
+import { backfillSweepIntro as Ye, centerOutIntro as ze, plotterIntro as Fe, sweepIntro as ye, traceIntro as Ne, unfoldIntro as qe } from "./core/dist/series/line-intro.js";
+import { buildHoverSnapshots as Ve, buildLastSnapshots as Xe } from "./core/dist/snapshots.js";
+import { candleUnfoldIntro as Ge, skeletonMorphIntro as Ue, wickBodyIntro as je } from "./core/dist/series/candlestick-intro.js";
+import { catppuccin as Ke } from "./core/dist/theme/themes/catppuccin.js";
+import { computeTooltipPosition as We } from "./core/dist/tooltip-position.js";
+import { deepEqual as _e } from "./core/dist/utils/deep-equal.js";
+import { detectInterval as er, formatDate as rr, formatTime as or, normalizeTime as tr } from "./core/dist/utils/time.js";
+import { dracula as fr } from "./core/dist/theme/themes/dracula.js";
+import { fadeIntro as pr, riseIntro as ir, wipeIntro as sr } from "./core/dist/series/wave-intro.js";
+import { fillRoundedRect as nr, tracePath as lr } from "./core/dist/series/painters/canvas-path.js";
+import { formatCompact as ur, formatPriceAdaptive as cr } from "./core/dist/utils/format.js";
+import { githubLight as hr } from "./core/dist/theme/themes/github-light.js";
+import { growIntro as Cr, springIntro as Ir } from "./core/dist/series/bar-intro.js";
+import { gruvbox as vr } from "./core/dist/theme/themes/gruvbox.js";
+import { handwritten as Lr } from "./core/dist/theme/themes/handwritten.js";
+import { hermite as Dr } from "./core/dist/animation/y-range-hermite.js";
+import { highContrast as wr } from "./core/dist/theme/themes/high-contrast.js";
+import { isTimeSeriesRenderer as Rr } from "./core/dist/series/types.js";
+import { lavenderMist as Hr } from "./core/dist/theme/themes/lavender-mist.js";
+import { lightPink as Yr } from "./core/dist/theme/themes/light-pink.js";
+import { logScale as Fr } from "./core/dist/scales/log-scale.js";
+import { materialPalenight as Nr } from "./core/dist/theme/themes/material-palenight.js";
+import { minimalLight as Or } from "./core/dist/theme/themes/minimal-light.js";
+import { mintBreeze as Xr } from "./core/dist/theme/themes/mint-breeze.js";
+import { mixColors as Gr, sampleRamp as Ur } from "./core/dist/utils/color.js";
+import { monokaiPro as Jr } from "./core/dist/theme/themes/monokai-pro.js";
+import { nightOwl as Qr } from "./core/dist/theme/themes/night-owl.js";
+import { oneDarkPro as Zr } from "./core/dist/theme/themes/one-dark-pro.js";
+import { panda as $r } from "./core/dist/theme/themes/panda.js";
+import { parseAnimationTime as ro } from "./core/dist/animation/time.js";
+import { peachCream as to } from "./core/dist/theme/themes/peach-cream.js";
+import { perfHud as fo } from "./core/dist/perf/perf-hud.js";
+import { quietLight as po } from "./core/dist/theme/themes/quiet-light.js";
+import { registerBuiltinSeries as so } from "./core/dist/series/register-builtins.js";
+import { registerSeriesDefinition as no } from "./core/dist/series/definition.js";
+import { resolveAxisFontSize as uo, resolveAxisTextColor as co, resolveCandlestickBodyColor as go } from "./core/dist/theme/resolve.js";
+import { rosePineDawn as So } from "./core/dist/theme/themes/rose-pine-dawn.js";
+import { roundedBarFill as Io, roundedCandleFill as Po, smoothCurve as vo, steppedCurve as To, straightCurve as Lo } from "./core/dist/series/painters/builtins.js";
+import { sandDune as Do } from "./core/dist/theme/themes/sand-dune.js";
+import { skeletonLoadingIndicator as wo } from "./core/dist/components/loading-indicator.js";
+import { snap as Ro } from "./core/dist/animation/y-range-snap.js";
+import { solarizedLight as Ho } from "./core/dist/theme/themes/solarized-light.js";
+import { spring as Yo } from "./core/dist/animation/spring.js";
 export {
-  o as BarSeries,
-  oe as BarSeriesDef,
-  a as CandlestickSeries,
-  ae as CandlestickSeriesDef,
-  m as ChartContainer,
-  me as ChartInstance,
-  T as Crosshair,
-  h as HeatmapSeries,
-  ie as HeatmapSeriesDef,
-  k as HeatmapTooltip,
-  w as InfoBar,
-  b as Legend,
-  S as LineSeries,
-  xe as LineSeriesDef,
-  A as Marker,
-  M as Navigator,
-  le as NavigatorController,
-  z as NumberFlow,
-  ue as PerfMonitor,
-  y as PieLegend,
-  P as PieSeries,
-  ge as PieSeriesDef,
-  q as PieTooltip,
-  V as ReferenceLine,
-  E as TimeAxis,
-  j as TimeRegion,
-  K as Title,
-  W as Tooltip,
-  G as XAxis,
-  Ce as XScale,
-  _ as YAxis,
-  ee as YLabel,
-  Ie as YScale,
-  ve as andromeda,
-  Le as autoGradient,
-  Be as ayuMirage,
-  Re as backfillSweepIntro,
-  ye as buildHoverSnapshots,
-  Ne as buildLastSnapshots,
-  Oe as candleUnfoldIntro,
-  Ge as catppuccin,
-  Ae as centerOutIntro,
-  je as computeTooltipPosition,
-  ke as createTheme,
-  Ke as deepEqual,
-  We as detectInterval,
-  rr as dracula,
-  tr as fadeIntro,
-  pr as fillRoundedRect,
-  xr as formatCompact,
-  Ze as formatDate,
-  nr as formatPriceAdaptive,
-  _e as formatTime,
-  dr as githubLight,
-  cr as growIntro,
-  Cr as gruvbox,
-  Ir as handwritten,
-  vr as hermite,
-  Lr as highContrast,
-  De as isDarkBg,
-  Dr as isTimeSeriesRenderer,
-  Br as lavenderMist,
-  Rr as lightPink,
-  Hr as logScale,
-  Yr as materialPalenight,
-  Fr as minimalLight,
-  Nr as mintBreeze,
-  Or as mixColors,
-  Er as monokaiPro,
-  Ur as nightOwl,
-  $e as normalizeTime,
-  Jr as oneDarkPro,
-  Qr as panda,
-  Zr as parseAnimationTime,
-  $r as peachCream,
-  ro as perfHud,
-  He as plotterIntro,
-  to as quietLight,
-  fo as registerBuiltinSeries,
-  po as registerSeriesDefinition,
-  so as resolveAxisFontSize,
-  xo as resolveAxisTextColor,
-  no as resolveCandlestickBodyColor,
-  ar as riseIntro,
-  uo as rosePineDawn,
-  go as roundedBarFill,
-  ho as roundedCandleFill,
-  Vr as sampleRamp,
-  vo as sandDune,
-  Lo as skeletonLoadingIndicator,
-  Ve as skeletonMorphIntro,
-  Co as smoothCurve,
-  Do as snap,
-  Bo as solarizedLight,
-  Ro as spring,
-  gr as springIntro,
-  So as steppedCurve,
-  Io as straightCurve,
-  Me as sweepIntro,
-  Ye as traceIntro,
-  ir as tracePath,
-  ze as unfoldIntro,
-  u as useChartInstance,
-  i as useCrosshairPosition,
-  s as useLastYValue,
-  x as usePreviousClose,
-  c as useTheme,
-  n as useVisibleRange,
-  l as useYRange,
-  Xe as wickBodyIntro,
-  fr as wipeIntro
+  o as BandSeries,
+  ae as BandSeriesDef,
+  a as BarSeries,
+  me as BarSeriesDef,
+  m as CandlestickSeries,
+  ie as CandlestickSeriesDef,
+  i as ChartContainer,
+  xe as ChartInstance,
+  k as Crosshair,
+  C as HeatmapSeries,
+  le as HeatmapSeriesDef,
+  B as HeatmapTooltip,
+  b as InfoBar,
+  A as Legend,
+  P as LineSeries,
+  ue as LineSeriesDef,
+  M as Marker,
+  z as Navigator,
+  ge as NavigatorController,
+  y as NumberFlow,
+  Se as PerfMonitor,
+  q as PieLegend,
+  T as PieSeries,
+  Ie as PieSeriesDef,
+  V as PieTooltip,
+  E as ReferenceLine,
+  Z as TimeAxis,
+  U as TimeRegion,
+  J as Title,
+  Q as Tooltip,
+  _ as XAxis,
+  ve as XScale,
+  ee as YAxis,
+  oe as YLabel,
+  Le as YScale,
+  De as andromeda,
+  we as autoGradient,
+  He as ayuMirage,
+  Ye as backfillSweepIntro,
+  Ve as buildHoverSnapshots,
+  Xe as buildLastSnapshots,
+  Ge as candleUnfoldIntro,
+  Ke as catppuccin,
+  ze as centerOutIntro,
+  We as computeTooltipPosition,
+  be as createTheme,
+  _e as deepEqual,
+  er as detectInterval,
+  fr as dracula,
+  pr as fadeIntro,
+  nr as fillRoundedRect,
+  ur as formatCompact,
+  rr as formatDate,
+  cr as formatPriceAdaptive,
+  or as formatTime,
+  hr as githubLight,
+  Cr as growIntro,
+  vr as gruvbox,
+  Lr as handwritten,
+  Dr as hermite,
+  wr as highContrast,
+  Re as isDarkBg,
+  Rr as isTimeSeriesRenderer,
+  Hr as lavenderMist,
+  Yr as lightPink,
+  Fr as logScale,
+  Nr as materialPalenight,
+  Or as minimalLight,
+  Xr as mintBreeze,
+  Gr as mixColors,
+  Jr as monokaiPro,
+  Qr as nightOwl,
+  tr as normalizeTime,
+  Zr as oneDarkPro,
+  $r as panda,
+  ro as parseAnimationTime,
+  to as peachCream,
+  fo as perfHud,
+  Fe as plotterIntro,
+  po as quietLight,
+  so as registerBuiltinSeries,
+  no as registerSeriesDefinition,
+  uo as resolveAxisFontSize,
+  co as resolveAxisTextColor,
+  go as resolveCandlestickBodyColor,
+  ir as riseIntro,
+  So as rosePineDawn,
+  Io as roundedBarFill,
+  Po as roundedCandleFill,
+  Ur as sampleRamp,
+  Do as sandDune,
+  wo as skeletonLoadingIndicator,
+  Ue as skeletonMorphIntro,
+  vo as smoothCurve,
+  Ro as snap,
+  Ho as solarizedLight,
+  Yo as spring,
+  Ir as springIntro,
+  To as steppedCurve,
+  Lo as straightCurve,
+  ye as sweepIntro,
+  Ne as traceIntro,
+  lr as tracePath,
+  qe as unfoldIntro,
+  g as useChartInstance,
+  x as useCrosshairPosition,
+  n as useLastYValue,
+  l as usePreviousClose,
+  h as useTheme,
+  d as useVisibleRange,
+  u as useYRange,
+  je as wickBodyIntro,
+  sr as wipeIntro
 };

package/dist/ui/Crosshair.vue.js

@@ -1,21 +1,34 @@
-import { defineComponent as v, ref as d, onMounted as f, onUnmounted as y, computed as n, unref as t, openBlock as h, createElementBlock as x, Fragment as g, createElementVNode as c, normalizeStyle as m, toDisplayString as u, createCommentVNode as b } from "vue";
-import { useCrosshairPosition as C } from "../composables.js";
-import { useChartInstance as S } from "../context.js";
-const E = /* @__PURE__ */ v({
+import { defineComponent as C, ref as Y, onMounted as _, onUnmounted as I, computed as a, unref as n, openBlock as u, createElementBlock as c, Fragment as g, normalizeStyle as p, toDisplayString as v, createCommentVNode as h, renderList as T, createElementVNode as V } from "vue";
+import { useCrosshairPosition as z } from "../composables.js";
+import { useChartInstance as B } from "../context.js";
+const P = /* @__PURE__ */ C({
   __name: "Crosshair",
-  setup(k) {
-    const e = S(), o = C(e), r = d(0), l = () => {
-      r.value++;
+  setup(E) {
+    const e = B(), t = z(e), l = Y(0), d = () => {
+      l.value++;
     };
-    f(() => e.on("overlayChange", l)), y(() => e.off("overlayChange", l));
-    const a = n(() => (r.value, e.getTheme())), i = n(() => e.getDataInterval()), p = n(() => (o.value, e.timeScale.niceTickValues(i.value).tickInterval || i.value)), s = n(() => ({
+    _(() => e.on("overlayChange", d)), I(() => e.off("overlayChange", d));
+    const i = a(() => (l.value, e.getTheme())), f = a(() => e.getDataInterval()), S = a(() => (t.value, e.timeScale.niceTickValues(f.value).tickInterval || f.value)), b = a(() => {
+      l.value;
+      const o = t.value;
+      return o === null ? "" : e.yScale.formatY(o.y);
+    }), y = a(() => {
+      l.value;
+      const o = t.value;
+      return o === null ? [] : e.getYScaleIds().flatMap((s) => {
+        const r = e.getYScaleColumn(s);
+        if (r === null) return [];
+        const x = e.getYScale(s);
+        return [{ scale: s, position: r.position, text: x.formatY(x.yToValue(o.mediaY)) }];
+      });
+    }), k = a(() => y.value.some((o) => o.position === e.yAxisPosition)), m = a(() => ({
       // Blend the theme's labelBackground at 80% opacity so the axis grid
       // shows through — keeps the badge from looking like an opaque block
       // while still masking whatever tick sits underneath.
-      background: `color-mix(in srgb, ${a.value.crosshair.labelBackground} 80%, transparent)`,
-      color: a.value.crosshair.labelTextColor,
-      fontSize: a.value.axis.fontSize + "px",
-      fontFamily: a.value.typography.fontFamily,
+      background: `color-mix(in srgb, ${i.value.crosshair.labelBackground} 80%, transparent)`,
+      color: i.value.crosshair.labelTextColor,
+      fontSize: i.value.axis.fontSize + "px",
+      fontFamily: i.value.typography.fontFamily,
       fontVariantNumeric: "tabular-nums",
       padding: "2px 6px",
       borderRadius: "2px",
@@ -25,28 +38,39 @@ const E = /* @__PURE__ */ v({
       // live last-value stays visible when the crosshair crosses its row.
       zIndex: 2
     }));
-    return (_, I) => t(o) ? (h(), x(g, { key: 0 }, [
-      c("div", {
-        style: m({
+    return (o, s) => n(t) ? (u(), c(g, { key: 0 }, [
+      k.value ? h("", !0) : (u(), c("div", {
+        key: 0,
+        style: p({
           position: "absolute",
-          [t(e).yAxisPosition]: "0",
-          top: t(o).mediaY + "px",
+          [n(e).yAxisPosition]: "0",
+          top: n(t).mediaY + "px",
           transform: "translateY(-50%)",
-          ...s.value
+          ...m.value
         })
-      }, u(t(e).yScale.formatY(t(o).y)), 5),
-      c("div", {
-        style: m({
+      }, v(b.value), 5)),
+      (u(!0), c(g, null, T(y.value, (r) => (u(), c("div", {
+        key: r.scale,
+        style: p({
+          position: "absolute",
+          [r.position]: "0",
+          top: n(t).mediaY + "px",
+          transform: "translateY(-50%)",
+          ...m.value
+        })
+      }, v(r.text), 5))), 128)),
+      V("div", {
+        style: p({
           position: "absolute",
           bottom: "0",
-          left: t(o).mediaX + "px",
+          left: n(t).mediaX + "px",
           transform: "translateX(-50%)",
-          ...s.value
+          ...m.value
         })
-      }, u(t(e).timeScale.formatX(t(o).time, p.value)), 5)
-    ], 64)) : b("", !0);
+      }, v(n(e).timeScale.formatX(n(t).time, S.value)), 5)
+    ], 64)) : h("", !0);
   }
 });
 export {
-  E as default
+  P as default
 };