@wick-charts/vue 0.5.1 → 0.6.0

package/dist/core/dist/components/annotation-chip.js

@@ -0,0 +1,28 @@
+import { isLightColor as m, hexToRgba as T } from "../utils/color.js";
+const y = 7, b = 3.5, v = 5, w = 4.5, B = 6, C = 0.92, M = 0.12, S = 0.6, Y = "rgba(15, 20, 35, 0.1)", A = "rgba(0, 0, 0, 0.4)", L = 3, k = 1;
+function E(o) {
+  const { context: t, theme: i, label: s, hpr: r, vpr: c } = o;
+  return t.font = f(i, r), {
+    width: t.measureText(s).width + y * r * 2,
+    height: i.yLabel.fontSize * r + b * c * 2
+  };
+}
+function X(o) {
+  const { context: t, theme: i, color: s, label: r, x: c, y: l, width: e, height: a, hpr: n, vpr: h, tail: d } = o;
+  H({ context: t, x: c, y: l, width: e, height: a, hpr: n, tail: d }), t.save(), t.shadowColor = m(i.background) ? Y : A, t.shadowBlur = L * n, t.shadowOffsetY = k * h, t.fillStyle = T(i.background, C), t.fill(), t.restore(), t.fillStyle = T(s, M), t.fill(), t.strokeStyle = T(s, S), t.lineWidth = Math.max(1, Math.round(n)), t.stroke(), t.font = f(i, n), t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = i.tooltip.textColor, t.fillText(r, c + e / 2, l + a / 2);
+}
+function f(o, t) {
+  return `500 ${o.yLabel.fontSize * t}px ${o.typography.fontFamily}`;
+}
+function H({ context: o, x: t, y: i, width: s, height: r, hpr: c, tail: l }) {
+  const e = Math.min(v * c, s / 2, r / 2), a = t + s, n = i + r, h = w * c, d = t + e + h, x = a - e - h, p = l === void 0 ? 0 : I(l.tipX, d, x), u = l !== void 0 && l.tipY < i, g = l !== void 0 && l.tipY > n;
+  o.beginPath(), o.moveTo(t + e, i), l !== void 0 && u && (o.lineTo(p - h, i), o.lineTo(l.tipX, l.tipY), o.lineTo(p + h, i)), o.lineTo(a - e, i), o.arcTo(a, i, a, i + e, e), o.lineTo(a, n - e), o.arcTo(a, n, a - e, n, e), l !== void 0 && g && (o.lineTo(p + h, n), o.lineTo(l.tipX, l.tipY), o.lineTo(p - h, n)), o.lineTo(t + e, n), o.arcTo(t, n, t, n - e, e), o.lineTo(t, i + e), o.arcTo(t, i, t + e, i, e), o.closePath();
+}
+function I(o, t, i) {
+  return t > i ? (t + i) / 2 : Math.max(t, Math.min(i, o));
+}
+export {
+  B as CHIP_TAIL_HEIGHT_MEDIA,
+  X as drawChip,
+  E as measureChip
+};

package/dist/core/dist/components/edge-indicator.js

@@ -1,36 +1,68 @@
-function v(i) {
-  const { state: e } = i;
-  if (e === "idle" || e === "has-more") return;
-  const o = i.timeScale.timeToX(i.boundaryTime);
-  if (Number.isFinite(o)) {
-    if (e === "loading") {
-      M(i, o);
+function $(t) {
+  const { state: i } = t;
+  if (i === "idle" || i === "has-more") return;
+  const a = t.timeScale.timeToX(t.boundaryTime);
+  if (Number.isFinite(a)) {
+    if (i === "loading") {
+      t.customIndicator ? S(t, a, t.customIndicator) : y(t, a);
       return;
     }
-    e === "no-data" && T(i, o);
+    i === "no-data" && R(t, a);
   }
 }
-function M({ scope: i, theme: e, chartMediaHeight: o, side: n, now: s }, t) {
-  const { context: a, horizontalPixelRatio: r, verticalPixelRatio: l } = i, c = 3 * r, f = 8 * r, h = 24 * r, d = t * r, u = n === "right" ? d + h : d - h, m = o / 2 * l, b = s % 900 / 900, p = Math.floor(b * 3), P = g(e.axis.textColor ?? "#787b86", 0.3), y = e.axis.textColor ?? "#787b86";
-  a.save();
-  for (let x = 0; x < 3; x++) {
-    const $ = (x - 1) * f, I = u + $;
-    a.beginPath(), a.arc(I, m, c, 0, Math.PI * 2), a.fillStyle = x === p ? y : P, a.fill();
+function S({
+  scope: t,
+  theme: i,
+  chartMediaWidth: a,
+  chartMediaHeight: n,
+  side: l,
+  now: e,
+  resolveEdgeAnchor: o,
+  resolveEdgeBarSpacing: s,
+  reportPlaceholders: c
+}, h, g) {
+  const { context: r, horizontalPixelRatio: d, verticalPixelRatio: m } = t, x = Math.min(150, a), f = l === "right" ? h : h - x;
+  r.save(), r.beginPath(), r.rect(
+    f * d,
+    0,
+    x * d,
+    n * m
+  ), r.clip(), r.translate(f * d, 0);
+  const u = o?.() ?? null, P = s?.() ?? void 0;
+  g({
+    scope: t,
+    theme: i,
+    chartMediaWidth: x,
+    chartMediaHeight: n,
+    now: e,
+    side: l,
+    edgeValueY: u?.valueY,
+    seriesKind: u?.seriesKind,
+    barSpacing: P,
+    reportPlaceholders: c
+  }), r.restore();
+}
+function y({ scope: t, theme: i, chartMediaHeight: a, side: n, now: l }, e) {
+  const { context: o, horizontalPixelRatio: s, verticalPixelRatio: c } = t, h = 3 * s, g = 8 * s, r = 24 * s, d = e * s, m = n === "right" ? d + r : d - r, x = a / 2 * c, f = l % 900 / 900, u = Math.floor(f * 3), P = M(i.axis.textColor ?? "#787b86", 0.3), b = i.axis.textColor ?? "#787b86";
+  o.save();
+  for (let p = 0; p < 3; p++) {
+    const v = (p - 1) * g, I = m + v;
+    o.beginPath(), o.arc(I, x, h, 0, Math.PI * 2), o.fillStyle = p === u ? b : P, o.fill();
   }
-  a.restore();
+  o.restore();
 }
-function T({ scope: i, theme: e, chartMediaHeight: o, side: n }, s) {
-  const { context: t, horizontalPixelRatio: a, verticalPixelRatio: r } = i, l = Math.round(s * a) + 0.5;
-  t.save(), t.strokeStyle = g(e.axis.textColor ?? "#787b86", 0.6), t.lineWidth = 1, t.setLineDash([4 * a, 4 * a]), t.beginPath(), t.moveTo(l, 0), t.lineTo(l, o * r), t.stroke(), t.setLineDash([]);
-  const c = 10 * a, f = n === "right" ? l - c : l + c, h = 18 * r;
-  t.fillStyle = e.axis.textColor ?? "#787b86", t.font = `${11 * a}px ${e.typography.fontFamily}`, t.textAlign = n === "right" ? "right" : "left", t.textBaseline = "top", t.fillText("No more data", f, h), t.restore();
+function R({ scope: t, theme: i, chartMediaHeight: a, side: n }, l) {
+  const { context: e, horizontalPixelRatio: o, verticalPixelRatio: s } = t, c = Math.round(l * o) + 0.5;
+  e.save(), e.strokeStyle = M(i.axis.textColor ?? "#787b86", 0.6), e.lineWidth = 1, e.setLineDash([4 * o, 4 * o]), e.beginPath(), e.moveTo(c, 0), e.lineTo(c, a * s), e.stroke(), e.setLineDash([]);
+  const h = 10 * o, g = n === "right" ? c - h : c + h, r = 18 * s;
+  e.fillStyle = i.axis.textColor ?? "#787b86", e.font = `${11 * o}px ${i.typography.fontFamily}`, e.textAlign = n === "right" ? "right" : "left", e.textBaseline = "top", e.fillText("No more data", g, r), e.restore();
 }
-function g(i, e) {
-  const o = /^#([0-9a-f]{6})$/i.exec(i.trim());
-  if (!o) return i;
-  const n = parseInt(o[1].slice(0, 2), 16), s = parseInt(o[1].slice(2, 4), 16), t = parseInt(o[1].slice(4, 6), 16);
-  return `rgba(${n}, ${s}, ${t}, ${e})`;
+function M(t, i) {
+  const a = /^#([0-9a-f]{6})$/i.exec(t.trim());
+  if (!a) return t;
+  const n = parseInt(a[1].slice(0, 2), 16), l = parseInt(a[1].slice(2, 4), 16), e = parseInt(a[1].slice(4, 6), 16);
+  return `rgba(${n}, ${l}, ${e}, ${i})`;
 }
 export {
-  v as renderEdgeIndicator
+  $ as renderEdgeIndicator
 };

package/dist/core/dist/components/loading-indicator.js

@@ -0,0 +1,46 @@
+import { hexToRgba as d } from "../utils/color.js";
+const F = 6, J = 24, K = 0.55, u = 5, z = 1400, g = 35, O = ({
+  scope: E,
+  theme: G,
+  chartMediaWidth: h,
+  chartMediaHeight: H,
+  now: I,
+  side: W,
+  edgeValueY: X,
+  barSpacing: p,
+  seriesKind: b,
+  reportPlaceholders: v
+}) => {
+  const { context: o, horizontalPixelRatio: a, verticalPixelRatio: e } = E, l = G.axis.textColor ?? "#787b86", w = X ?? H / 2, m = W === "right", i = p && p > 4 ? p : J, T = Math.max(3, i * K), _ = b === void 0 || b === "candlestick", k = Math.min(H * 0.22, 34), A = Math.max(3, Math.min(F, Math.floor(h / i)));
+  o.save();
+  const y = [];
+  for (let t = 0; t < A; t++) {
+    const f = m ? i * 0.7 + t * i : h - i * 0.7 - t * i, x = Math.sin(t * 1.1 + 0.6) * 0.4, M = t === 0 ? w : w + x * k * 1.4, r = Math.max(6, k * (0.5 + 0.5 * Math.abs(Math.cos(t * 0.8))));
+    y.push({ x: f, y: M, halfHeight: r, width: T });
+    const s = f * a, R = T * a, n = (M - r) * e, S = r * 2 * e;
+    o.fillStyle = d(l, 0.16), o.fillRect(s - R / 2, n, R, S), _ && (o.strokeStyle = d(l, 0.12), o.lineWidth = Math.max(1, a), o.beginPath(), o.moveTo(s, n - u * e), o.lineTo(s, n), o.moveTo(s, n + S), o.lineTo(s, n + S + u * e), o.stroke());
+  }
+  v !== void 0 && v(
+    y.map((t) => ({
+      offsetX: m ? t.x : h - t.x,
+      y: t.y,
+      halfHeight: t.halfHeight,
+      width: t.width
+    }))
+  );
+  const B = h + g * 2, P = I % z / z * B - g, C = m ? P : h - P, c = o.createLinearGradient(
+    (C - g) * a,
+    0,
+    (C + g) * a,
+    0
+  );
+  c.addColorStop(0, d(l, 0)), c.addColorStop(0.5, d(l, 0.35)), c.addColorStop(1, d(l, 0)), o.fillStyle = c;
+  for (const t of y) {
+    const f = t.x * a, x = t.width * a, M = (t.y - t.halfHeight) * e, r = t.halfHeight * 2 * e;
+    o.fillRect(f - x / 2, M, x, r);
+  }
+  o.restore();
+};
+export {
+  O as skeletonLoadingIndicator
+};

package/dist/core/dist/components/marker.js

@@ -1,41 +1,59 @@
-import { fillRoundedRect as d } from "../series/painters/canvas-path.js";
-import { hexToRgba as P } from "../utils/color.js";
-const f = 4, x = 5, g = 9, v = 6, M = 6, S = 3;
-function B(t) {
-  const { scope: i, timeScale: o, yScale: c, theme: l, marker: e, phase: s } = t, { context: r, horizontalPixelRatio: a, verticalPixelRatio: h } = i, n = o.timeToBitmapX(e.time), p = c.valueToBitmapY(e.value);
-  if (!Number.isFinite(n) || !Number.isFinite(p)) return;
-  const b = f * a;
-  r.save(), e.pulse && T({ context: r, bx: n, by: p, color: e.color, radius: b, hpr: a, phase: s }), w({ context: r, bx: n, by: p, color: e.color, radius: b, hpr: a, vpr: h, shape: e.shape }), e.label && R({ context: r, bx: n, by: p, color: e.color, theme: l, hpr: a, vpr: h, label: e.label, shape: e.shape }), r.restore();
+import { hexToRgba as g } from "../utils/color.js";
+import { measureChip as I, drawChip as T, CHIP_TAIL_HEIGHT_MEDIA as S } from "./annotation-chip.js";
+const y = 4, H = 5, k = 9, W = 3, C = 4;
+function Y(e) {
+  const { scope: a, timeScale: r, yScale: l, theme: s, marker: t, phase: n, plotWidth: o, plotHeight: p } = e, { context: h, horizontalPixelRatio: i, verticalPixelRatio: d } = a, c = r.timeToBitmapX(t.time), b = l.valueToBitmapY(t.value);
+  if (!Number.isFinite(c) || !Number.isFinite(b)) return;
+  const m = y * i, f = t.shape === "arrow-up" || t.shape === "arrow-down", x = t.label !== void 0 && t.label !== "";
+  h.save(), t.pulse && R({ context: h, bx: c, by: b, color: t.color, radius: m, hpr: i, phase: n }), f && x || _({ context: h, bx: c, by: b, color: t.color, radius: m, hpr: i, vpr: d, shape: t.shape }), t.label !== void 0 && t.label !== "" && A({
+    context: h,
+    bx: c,
+    by: b,
+    color: t.color,
+    theme: s,
+    hpr: i,
+    vpr: d,
+    label: t.label,
+    shape: t.shape,
+    plotWidth: o,
+    plotHeight: p
+  }), h.restore();
 }
-function T({ context: t, bx: i, by: o, color: c, radius: l, hpr: e, phase: s }) {
-  const r = 0.4 + 0.6 * Math.abs(Math.sin(s * 2 * Math.PI)), a = l + 4 * e * r;
-  t.beginPath(), t.arc(i, o, a, 0, Math.PI * 2), t.fillStyle = P(c, r * 0.3), t.fill();
+function R({ context: e, bx: a, by: r, color: l, radius: s, hpr: t, phase: n }) {
+  const o = 0.4 + 0.6 * Math.abs(Math.sin(n * 2 * Math.PI)), p = s + 4 * t * o;
+  e.beginPath(), e.arc(a, r, p, 0, Math.PI * 2), e.fillStyle = g(l, o * 0.3), e.fill();
 }
-function w({ context: t, bx: i, by: o, color: c, radius: l, hpr: e, vpr: s, shape: r }) {
-  if (r === "dot") {
-    t.beginPath(), t.arc(i, o, l, 0, Math.PI * 2), t.fillStyle = c, t.fill();
+function _({ context: e, bx: a, by: r, color: l, radius: s, hpr: t, vpr: n, shape: o }) {
+  if (o === "dot") {
+    e.beginPath(), e.arc(a, r, s, 0, Math.PI * 2), e.fillStyle = l, e.fill();
     return;
   }
-  if (r === "circle") {
-    t.beginPath(), t.arc(i, o, l, 0, Math.PI * 2), t.strokeStyle = c, t.lineWidth = Math.max(1, Math.round(1.5 * e)), t.stroke();
+  if (o === "circle") {
+    e.beginPath(), e.arc(a, r, s, 0, Math.PI * 2), e.strokeStyle = l, e.lineWidth = Math.max(1, Math.round(1.5 * t)), e.stroke();
     return;
   }
-  const a = x * e, h = g * s, n = r === "arrow-down" ? -1 : 1;
-  t.beginPath(), t.moveTo(i, o), t.lineTo(i - a, o + n * h), t.lineTo(i + a, o + n * h), t.closePath(), t.fillStyle = c, t.fill();
+  const p = H * t, h = k * n, i = o === "arrow-down" ? -1 : 1;
+  e.beginPath(), e.moveTo(a, r), e.lineTo(a - p, r + i * h), e.lineTo(a + p, r + i * h), e.closePath(), e.fillStyle = l, e.fill();
 }
-function R({ context: t, bx: i, by: o, color: c, theme: l, hpr: e, vpr: s, label: r, shape: a }) {
-  const h = l.yLabel.fontSize * e;
-  t.font = `${h}px ${l.typography.fontFamily}`, t.textAlign = "left", t.textBaseline = "middle";
-  const n = M * e, p = S * s, b = v * e, m = a === "arrow-down" || a === "arrow-up" ? x * e : f * e, y = t.measureText(r).width, u = i + m + b + n;
-  t.fillStyle = c, d(t, {
-    x: u - n,
-    y: o - h / 2 - p,
-    width: y + n * 2,
-    height: h + p * 2,
-    radius: 3 * e,
-    corners: { tl: !0, tr: !0, br: !0, bl: !0 }
-  }), t.fillStyle = l.yLabel.textColor, t.fillText(r, u, o);
+function A(e) {
+  const { context: a, bx: r, by: l, color: s, theme: t, hpr: n, vpr: o, label: p, shape: h, plotWidth: i, plotHeight: d } = e, { width: c, height: b } = I({ context: a, theme: t, label: p, hpr: n, vpr: o }), m = S * o, f = C * n, x = h === "arrow-up" || h === "arrow-down" ? 0 : (y + W) * o, v = x + m + b;
+  let u = h !== "arrow-up";
+  u && l - v < 0 && (u = !1), !u && l + v > d && (u = !0);
+  const w = u ? l - x : l + x, M = u ? w - m - b : w + m, P = Math.max(f, Math.min(r - c / 2, i - c - f));
+  T({
+    context: a,
+    theme: t,
+    color: s,
+    label: p,
+    x: P,
+    y: M,
+    width: c,
+    height: b,
+    hpr: n,
+    vpr: o,
+    tail: { tipX: r, tipY: w }
+  });
 }
 export {
-  B as renderMarker
+  Y as renderMarker
 };

package/dist/core/dist/components/reference-line.js

@@ -1,48 +1,39 @@
-import { fillRoundedRect as S } from "../series/painters/canvas-path.js";
-const b = 4, T = 6, M = 6, g = 3;
-function R(i) {
-  const { scope: h, timeScale: l, yScale: m, theme: f, line: e, plotWidth: r, plotHeight: c } = i, { context: t, horizontalPixelRatio: a, verticalPixelRatio: d } = h;
-  if (t.save(), t.strokeStyle = e.color, e.style === "dashed" && t.setLineDash([b * a, b * a]), e.orientation === "horizontal") {
-    const o = m.valueToBitmapY(e.coord);
-    if (!Number.isFinite(o) || o < 0 || o > c) {
-      t.restore();
+import { measureChip as T, drawChip as b } from "./annotation-chip.js";
+const v = 4, x = 6;
+function S(c) {
+  const { scope: m, timeScale: r, yScale: d, theme: p, line: o, plotWidth: a, plotHeight: h } = c, { context: e, horizontalPixelRatio: n, verticalPixelRatio: s } = m;
+  if (e.save(), e.strokeStyle = o.color, o.style === "dashed" && e.setLineDash([v * n, v * n]), o.orientation === "horizontal") {
+    const t = d.valueToBitmapY(o.coord);
+    if (!Number.isFinite(t) || t < 0 || t > h) {
+      e.restore();
       return;
     }
-    const n = Math.max(1, Math.round(e.width * d)), s = Math.round(o) + (n % 2 === 1 ? 0.5 : 0);
-    t.lineWidth = n, t.beginPath(), t.moveTo(0, s), t.lineTo(r, s), t.stroke();
+    const l = Math.max(1, Math.round(o.width * s)), i = Math.round(t) + (l % 2 === 1 ? 0.5 : 0);
+    e.lineWidth = l, e.beginPath(), e.moveTo(0, i), e.lineTo(a, i), e.stroke();
   } else {
-    const o = l.timeToBitmapX(e.coord);
-    if (!Number.isFinite(o) || o < 0 || o > r) {
-      t.restore();
+    const t = r.timeToBitmapX(o.coord);
+    if (!Number.isFinite(t) || t < 0 || t > a) {
+      e.restore();
       return;
     }
-    const n = Math.max(1, Math.round(e.width * a)), s = Math.round(o) + (n % 2 === 1 ? 0.5 : 0);
-    t.lineWidth = n, t.beginPath(), t.moveTo(s, 0), t.lineTo(s, c), t.stroke();
+    const l = Math.max(1, Math.round(o.width * n)), i = Math.round(t) + (l % 2 === 1 ? 0.5 : 0);
+    e.lineWidth = l, e.beginPath(), e.moveTo(i, 0), e.lineTo(i, h), e.stroke();
   }
-  t.setLineDash([]), e.label !== void 0 && L({ context: t, theme: f, line: e, timeScale: l, yScale: m, plotWidth: r, hpr: a, vpr: d }), t.restore();
+  e.setLineDash([]), o.label !== void 0 && M({ context: e, theme: p, line: o, timeScale: r, yScale: d, plotWidth: a, hpr: n, vpr: s }), e.restore();
 }
-function L({ context: i, theme: h, line: l, timeScale: m, yScale: f, plotWidth: e, hpr: r, vpr: c }) {
-  const t = l.label;
-  if (t === void 0) return;
-  const a = h.yLabel.fontSize * r;
-  i.font = `${a}px ${h.typography.fontFamily}`, i.textAlign = "left", i.textBaseline = "middle";
-  const d = M * r, o = g * c, n = T * r, s = T * c, y = i.measureText(t).width + d * 2, x = a + o * 2;
-  let u, p;
-  if (l.orientation === "horizontal")
-    u = n, p = f.valueToBitmapY(l.coord) - x / 2;
+function M({ context: c, theme: m, line: r, timeScale: d, yScale: p, plotWidth: o, hpr: a, vpr: h }) {
+  const e = r.label;
+  if (e === void 0) return;
+  const { width: n, height: s } = T({ context: c, theme: m, label: e, hpr: a, vpr: h }), t = x * a, l = x * h;
+  let i, u;
+  if (r.orientation === "horizontal")
+    i = t, u = p.valueToBitmapY(r.coord) - s / 2;
   else {
-    const v = m.timeToBitmapX(l.coord);
-    u = Math.min(v + n, e - y - n), p = s;
+    const f = d.timeToBitmapX(r.coord);
+    i = Math.min(f + t, o - n - t), u = l;
   }
-  i.fillStyle = l.color, S(i, {
-    x: u,
-    y: p,
-    width: y,
-    height: x,
-    radius: 3 * r,
-    corners: { tl: !0, tr: !0, br: !0, bl: !0 }
-  }), i.fillStyle = h.yLabel.textColor, i.fillText(t, u + d, p + x / 2);
+  b({ context: c, theme: m, color: r.color, label: e, x: i, y: u, width: n, height: s, hpr: a, vpr: h });
 }
 export {
-  R as renderReferenceLine
+  S as renderReferenceLine
 };

package/dist/core/dist/components/time-region.js

@@ -1,35 +1,37 @@
-import { fillRoundedRect as d } from "../series/painters/canvas-path.js";
 import { hexToRgba as g } from "../utils/color.js";
-const y = 0.5, p = 6, T = 6, R = 3;
-function $(e) {
-  const { scope: l, timeScale: i, theme: a, region: o, plotWidth: r, plotHeight: m } = e, { context: t, horizontalPixelRatio: h, verticalPixelRatio: u } = l, s = i.timeToBitmapX(o.from), c = o.to === null ? r : i.timeToBitmapX(o.to);
-  if (!Number.isFinite(s) || !Number.isFinite(c)) return;
-  const n = Math.max(0, Math.min(s, c)), f = Math.min(r, Math.max(s, c));
-  f <= 0 || n >= r || f <= n || (t.save(), t.fillStyle = o.fill, t.fillRect(n, 0, f - n, m), t.globalAlpha = y, t.strokeStyle = o.color, t.lineWidth = Math.max(1, Math.round(h)), b(t, s, r, m), o.to !== null && b(t, c, r, m), t.globalAlpha = 1, o.label && v({ context: t, theme: a, region: o, left: n, hpr: h, vpr: u }), t.restore());
+import { measureChip as b, drawChip as v } from "./annotation-chip.js";
+const d = 0.5, f = 6;
+function w(t) {
+  const { scope: i, timeScale: l, theme: n, region: e, plotWidth: r, plotHeight: a } = t, { context: o, horizontalPixelRatio: m, verticalPixelRatio: u } = i, c = l.timeToBitmapX(e.from), s = e.to === null ? r : l.timeToBitmapX(e.to);
+  if (!Number.isFinite(c) || !Number.isFinite(s)) return;
+  const h = Math.max(0, Math.min(c, s)), p = Math.min(r, Math.max(c, s));
+  p <= 0 || h >= r || p <= h || (o.save(), o.fillStyle = e.fill, o.fillRect(h, 0, p - h, a), o.globalAlpha = d, o.strokeStyle = e.color, o.lineWidth = Math.max(1, Math.round(m)), x(o, c, r, a), e.to !== null && x(o, s, r, a), o.globalAlpha = 1, e.label && M({ context: o, theme: n, region: e, left: h, hpr: m, vpr: u }), o.restore());
 }
-function b(e, l, i, a) {
-  l < 0 || l > i || (e.beginPath(), e.moveTo(l, 0), e.lineTo(l, a), e.stroke());
+function x(t, i, l, n) {
+  i < 0 || i > l || (t.beginPath(), t.moveTo(i, 0), t.lineTo(i, n), t.stroke());
 }
-function v({ context: e, theme: l, region: i, left: a, hpr: o, vpr: r }) {
-  const m = i.label;
-  if (m === void 0) return;
-  const t = l.yLabel.fontSize * o;
-  e.font = `${t}px ${l.typography.fontFamily}`, e.textAlign = "left", e.textBaseline = "middle";
-  const h = T * o, u = R * r, s = p * o, c = e.measureText(m).width, n = a + s, f = p * r, x = t + u * 2;
-  e.fillStyle = i.color, d(e, {
-    x: n,
-    y: f,
-    width: c + h * 2,
-    height: x,
-    radius: 3 * o,
-    corners: { tl: !0, tr: !0, br: !0, bl: !0 }
-  }), e.fillStyle = l.yLabel.textColor, e.fillText(m, n + h, f + x / 2);
+function M({ context: t, theme: i, region: l, left: n, hpr: e, vpr: r }) {
+  const a = l.label;
+  if (a === void 0) return;
+  const { width: o, height: m } = b({ context: t, theme: i, label: a, hpr: e, vpr: r });
+  v({
+    context: t,
+    theme: i,
+    color: l.color,
+    label: a,
+    x: n + f * e,
+    y: f * r,
+    width: o,
+    height: m,
+    hpr: e,
+    vpr: r
+  });
 }
-function A(e, l) {
-  const i = e.color ?? l.axis.textColor, a = e.fill ?? g(i, 0.08);
-  return { color: i, fill: a };
+function C(t, i) {
+  const l = t.color ?? i.axis.textColor, n = t.fill ?? g(l, 0.08);
+  return { color: l, fill: n };
 }
 export {
-  $ as renderTimeRegion,
-  A as resolveTimeRegionColors
+  w as renderTimeRegion,
+  C as resolveTimeRegionColors
 };

package/dist/core/dist/data/store.js

@@ -1,10 +1,15 @@
-import { EventEmitter as l } from "../events.js";
+import { EventEmitter as d } from "../events.js";
 import { binarySearch as n } from "../utils/math.js";
-class g extends l {
+class u extends d {
   data = [];
   _visible = !0;
   cachedRange = null;
   cachedResult = [];
+  // Dev-only, warn-once-per-instance: these two conditions are almost always
+  // a persistent bug in the caller's feed (not a one-off), so a per-call
+  // warning would just spam the console on every tick.
+  warnedUnsorted = !1;
+  warnedOutOfOrderAppend = !1;
   setVisible(t) {
     this._visible = t;
   }
@@ -12,17 +17,21 @@ class g extends l {
     return this._visible;
   }
   setData(t) {
-    let e = !0;
-    for (let a = 1; a < t.length; a++)
-      if (t[a].time < t[a - 1].time) {
-        e = !1;
+    let a = !0;
+    for (let e = 1; e < t.length; e++)
+      if (t[e].time < t[e - 1].time) {
+        a = !1;
         break;
       }
-    this.data = e ? t.slice() : [...t].sort((a, i) => a.time - i.time), this.cachedRange = null, this.emit("update");
+    !a && process.env.NODE_ENV !== "production" && !this.warnedUnsorted && (this.warnedUnsorted = !0, console.warn(
+      "[wick-charts] data is not sorted by time — re-sorting on every setData() call is wasted work. Sort your feed by `time` ascending before passing it in."
+    )), this.data = a ? t.slice() : [...t].sort((e, i) => e.time - i.time), this.cachedRange = null, this.emit("update");
   }
   append(t) {
     if (this.data.length > 0 && t.time <= this.data[this.data.length - 1].time) {
-      this.updateLast(t);
+      process.env.NODE_ENV !== "production" && !this.warnedOutOfOrderAppend && (this.warnedOutOfOrderAppend = !0, console.warn(
+        `[wick-charts] append() received time ${t.time}, not after the last point's time ${this.data[this.data.length - 1].time} — treating it as an overwrite of the last point instead of a new one. If you meant to append, check your feed for out-of-order or duplicate timestamps.`
+      )), this.updateLast(t);
       return;
     }
     this.data.push(t), this.cachedRange = null, this.emit("update");
@@ -30,6 +39,16 @@ class g extends l {
   updateLast(t) {
     this.data.length !== 0 && (this.data[this.data.length - 1] = t, this.cachedRange = null, this.emit("update"));
   }
+  /**
+   * Insert older points at the front of the buffer (history prepend). The
+   * caller guarantees `points` are sorted ascending and all strictly before
+   * the current first point — the sync reconciler only routes here after
+   * proving the untouched suffix matches the previous data, so the boundary
+   * is already validated and no re-sort is needed here. No-op on empty input.
+   */
+  prepend(t) {
+    t.length !== 0 && (this.data = t.concat(this.data), this.cachedRange = null, this.emit("update"));
+  }
   trimStart(t) {
     if (!(t <= 0 || this.data.length === 0)) {
       if (t >= this.data.length) {
@@ -42,11 +61,11 @@ class g extends l {
   getAll() {
     return this.data;
   }
-  getVisibleData(t, e) {
+  getVisibleData(t, a) {
     if (this.data.length === 0) return [];
-    if (this.cachedRange && this.cachedRange.from === t && this.cachedRange.to === e) return this.cachedResult;
-    const a = Math.max(0, n(this.data, t, (h) => h.time) - 1), i = Math.min(this.data.length, n(this.data, e, (h) => h.time) + 1);
-    return this.cachedResult = this.data.slice(a, i), this.cachedRange = { from: t, to: e }, this.cachedResult;
+    if (this.cachedRange && this.cachedRange.from === t && this.cachedRange.to === a) return this.cachedResult;
+    const e = Math.max(0, n(this.data, t, (s) => s.time) - 1), i = Math.min(this.data.length, n(this.data, a, (s) => s.time) + 1);
+    return this.cachedResult = this.data.slice(e, i), this.cachedRange = { from: t, to: a }, this.cachedResult;
   }
   first() {
     return this.data[0];
@@ -60,17 +79,17 @@ class g extends l {
   isEmpty() {
     return this.data.length === 0;
   }
-  findNearest(t, e) {
+  findNearest(t, a) {
     if (this.data.length === 0) return null;
-    const a = n(this.data, t, (s) => s.time);
-    let i = null, h = e;
-    for (let s = Math.max(0, a - 1); s <= Math.min(this.data.length - 1, a + 1); s++) {
-      const d = Math.abs(this.data[s].time - t);
-      d <= h && (h = d, i = this.data[s]);
+    const e = n(this.data, t, (h) => h.time);
+    let i = null, s = a;
+    for (let h = Math.max(0, e - 1); h <= Math.min(this.data.length - 1, e + 1); h++) {
+      const r = Math.abs(this.data[h].time - t);
+      r <= s && (s = r, i = this.data[h]);
     }
     return i;
   }
 }
 export {
-  g as TimeSeriesStore
+  u as TimeSeriesStore
 };