@wick-charts/vue 0.6.0 → 0.6.1

package/README.md

@@ -72,6 +72,30 @@ chart.setSeriesData(seriesId, data);
 
 There's no separate `@wick-charts/core` package on npm — the three framework packages are the supported way to install the engine.
 
+### Drop-in `<script>` — no build step
+
+For a CodePen, JSFiddle, or a plain HTML page, load the prebuilt UMD bundle from a CDN — no npm, no bundler. It exposes the whole engine (every `ChartInstance`, series def, theme, and painter) as a `WickCharts` global:
+
+```html
+<div id="chart" style="width: 640px; height: 320px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@wick-charts/react/dist/wick-charts.umd.min.js"></script>
+<script>
+  const { ChartInstance, LineSeriesDef } = WickCharts;
+
+  const chart = new ChartInstance(document.getElementById('chart'));
+  const id = chart.addSeries(LineSeriesDef);
+  chart.setLayerColors(id, ['#22c55e']);
+  chart.setSeriesData(id, [
+    { time: Date.now() - 2 * 86_400_000, value: 100 },
+    { time: Date.now() - 86_400_000, value: 118 },
+    { time: Date.now(), value: 109 },
+  ]);
+</script>
+```
+
+The same file is on unpkg (`https://unpkg.com/@wick-charts/react/dist/wick-charts.umd.min.js`); pin a version with `@x.y.z` for production. ~72 kB gzipped, self-contained.
+
 ## Bundle size
 
 Packages ship per-module ESM with `sideEffects: false`, and each series component carries its own renderer — your bundler only ships the chart types you import.
@@ -80,9 +104,9 @@ Tree-shaken React scenarios via `pnpm size` (esbuild, minified, browser target,
 
 | Scenario | Raw | Gzip | Brotli |
 |---|---:|---:|---:|
-| Candlestick only | 83.3 kB  | 25.9 kB | 22.9 kB |
-| Line only        | 91.3 kB  | 28.3 kB | 25.0 kB |
-| Full React       | 180.3 kB | 55.5 kB | 47.1 kB |
+| Candlestick only | 109.8 kB | 34.1 kB | 30.0 kB |
+| Line only        | 125.6 kB | 38.7 kB | 33.8 kB |
+| Full React       | 253.5 kB | 78.1 kB | 65.6 kB |
 
 ## Migration
 

package/dist/ChartContainer.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as $, ref as r, shallowRef as M, provide as l, computed as P, onMounted as D, nextTick as h, onUnmounted as T, watch as d, openBlock as g, createElementBlock as p, normalizeStyle as j, createElementVNode as o, createCommentVNode as A, renderSlot as N } from "vue";
-import { ChartInstance as z } from "./core/dist/chart.js";
-import { deepEqual as H } from "./core/dist/utils/deep-equal.js";
-import { catppuccin as q } from "./core/dist/theme/themes/catppuccin.js";
-import { ChartKey as G, ThemeKey as I, TitleAnchorKey as U, InfoBarAnchorKey as F, LegendAnchorKey as J, LegendRightAnchorKey as Q, NavigatorAnchorKey as W } from "./context.js";
-const X = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-height": "0" } }, Y = { style: { display: "flex", "flex-direction": "column", flex: "1", "min-width": "0", "min-height": "0" } }, Z = {
+import { defineComponent as U, ref as r, shallowRef as P, provide as l, computed as v, onMounted as G, nextTick as g, onUnmounted as I, watch as d, openBlock as y, createElementBlock as m, normalizeStyle as q, createElementVNode as o, createCommentVNode as w, renderSlot as J } from "vue";
+import { ChartInstance as T } from "./core/dist/chart.js";
+import { deepEqual as z } from "./core/dist/utils/deep-equal.js";
+import { catppuccin as Q } from "./core/dist/theme/themes/catppuccin.js";
+import { ChartKey as W, ThemeKey as X, TitleAnchorKey as Y, InfoBarAnchorKey as Z, LegendAnchorKey as ee, LegendRightAnchorKey as te, NavigatorAnchorKey as ie } from "./context.js";
+const ae = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-height": "0" } }, oe = { style: { display: "flex", "flex-direction": "column", flex: "1", "min-width": "0", "min-height": "0" } }, ne = {
   key: 0,
   "data-chart-header": "",
   style: { "flex-shrink": "0", display: "flex", "flex-direction": "column", "pointer-events": "none" }
-}, ee = {
+}, re = {
   key: 1,
   "data-chart-series-overlay": "",
   style: { position: "absolute", inset: "0", "pointer-events": "none", "z-index": "3" }
-}, le = /* @__PURE__ */ $({
+}, H = 24, ce = /* @__PURE__ */ U({
   __name: "ChartContainer",
   props: {
-    theme: { default: () => q.theme },
+    theme: { default: () => Q.theme },
     axis: {},
     padding: {},
     viewport: {},
@@ -22,6 +22,7 @@ const X = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-h
     gradient: { type: Boolean, default: !0 },
     interactive: { type: Boolean, default: !0 },
     grid: {},
+    fade: { type: [Boolean, Object], default: void 0 },
     headerLayout: { default: "overlay" },
     animations: { type: [Boolean, Object] },
     perf: {},
@@ -33,76 +34,105 @@ const X = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-h
     onVisibleRangeChange: {},
     onCrosshairMove: {}
   },
-  setup(y) {
-    const e = y, c = r(), n = M(null), m = M(e.theme), u = e.perf, v = e.onEdgeReached, w = r(null), b = r(null), R = r(null), C = r(null), _ = r(null), E = r(null);
-    l(G, n), l(I, m), l(U, b), l(F, R), l(J, C), l(Q, _), l(W, E);
-    let s = null;
-    const k = r(0), B = P(() => e.headerLayout === "overlay" ? k.value : 0);
-    function x() {
-      if (!n.value) return;
-      const i = { top: (e.padding?.top ?? 20) + B.value };
-      e.padding?.bottom !== void 0 && (i.bottom = e.padding.bottom), e.padding?.right !== void 0 && (i.right = e.padding.right), e.padding?.left !== void 0 && (i.left = e.padding.left), n.value.setPadding(i);
+  setup(b) {
+    const e = b, s = r(), a = P(null), x = P(e.theme), c = e.perf, p = e.onEdgeReached, C = r(null), R = r(null), k = r(null), _ = r(null), E = r(null), B = r(null);
+    l(W, a), l(X, x), l(Y, R), l(Z, k), l(ee, _), l(te, E), l(ie, B);
+    let f = null;
+    const u = r(0), O = v(() => e.fade === !1 ? !1 : typeof e.fade == "object" ? e.fade.top !== void 0 || e.fade.overlap !== void 0 : e.fade === !0), S = v(() => {
+      if (!O.value) return 0;
+      const t = typeof e.fade == "object" ? e.fade.overlap : void 0;
+      return t !== void 0 ? Math.max(0, t) : u.value / 2;
+    }), j = v(() => {
+      if (!O.value) return 0;
+      if (typeof e.fade == "object" && e.fade.top !== void 0) return e.fade.top;
+      const t = e.headerLayout === "overlay" ? u.value : 0;
+      return t > 0 ? t + H : H;
+    }), L = v(
+      () => e.headerLayout === "overlay" ? Math.max(0, u.value - S.value) : 0
+    );
+    function A() {
+      if (!a.value) return;
+      const i = { top: (e.padding?.top ?? 20) + L.value };
+      e.padding?.bottom !== void 0 && (i.bottom = e.padding.bottom), e.padding?.right !== void 0 && (i.right = e.padding.right), e.padding?.left !== void 0 && (i.left = e.padding.left), a.value.setPadding(i);
+    }
+    function M(t) {
+      if (e.fade === !1) {
+        t.fade = { top: 0, right: 0, left: 0 };
+        return;
+      }
+      if (typeof e.fade != "object") return;
+      const i = {};
+      e.fade.top !== void 0 && (i.top = e.fade.top), e.fade.right !== void 0 && (i.right = e.fade.right), e.fade.left !== void 0 && (i.left = e.fade.left), t.fade = i;
+    }
+    function $() {
+      if (!a.value) return;
+      if (e.fade === !1) {
+        a.value.setFade({ top: 0, right: 0, left: 0 });
+        return;
+      }
+      const t = { top: j.value };
+      typeof e.fade == "object" && (e.fade.right !== void 0 && (t.right = e.fade.right), e.fade.left !== void 0 && (t.left = e.fade.left)), a.value.setFade(t);
     }
-    function L() {
-      s?.disconnect(), s = null;
-      const t = e.headerLayout === "overlay" ? w.value : null;
+    function V() {
+      f?.disconnect(), f = null;
+      const t = e.headerLayout === "overlay" ? C.value : null;
       if (!t) {
-        k.value = 0, x();
+        u.value = 0, A();
         return;
       }
       const i = () => {
-        k.value = t.getBoundingClientRect().height, x();
+        u.value = t.getBoundingClientRect().height, A();
       };
-      i(), s = new ResizeObserver(i), s.observe(t);
+      i(), f = new ResizeObserver(i), f.observe(t);
     }
-    function V(t) {
-      t.on("pointClick", (a) => e.onPointClick?.(a)), t.on("pointDoubleClick", (a) => e.onPointDoubleClick?.(a)), t.on("seriesHover", (a) => e.onSeriesHover?.(a)), t.on("crosshairMove", (a) => e.onCrosshairMove?.(a));
+    function K(t) {
+      t.on("pointClick", (n) => e.onPointClick?.(n)), t.on("pointDoubleClick", (n) => e.onPointDoubleClick?.(n)), t.on("seriesHover", (n) => e.onSeriesHover?.(n)), t.on("crosshairMove", (n) => e.onCrosshairMove?.(n));
       const i = () => e.onVisibleRangeChange?.(t.getVisibleRange());
       t.on("viewportChange", i), t.on("dataUpdate", i), t.on("seriesChange", i);
     }
-    D(async () => {
-      if (!c.value) return;
+    G(async () => {
+      if (!s.value) return;
       const t = {};
-      e.axis && (t.axis = e.axis), e.theme && (t.theme = e.theme), e.padding && (t.padding = e.padding), e.viewport && (t.viewport = e.viewport), e.interactive !== void 0 && (t.interactive = e.interactive), e.grid !== void 0 && (t.grid = e.grid), u !== void 0 && (t.perf = u), v && (t.onEdgeReached = v), e.animations !== void 0 && (t.animations = e.animations), n.value = new z(c.value, t), V(n.value), e.onReady?.(n.value), await h(), L();
-    }), T(() => {
-      s?.disconnect(), s = null, n.value?.destroy(), n.value = null;
+      e.axis && (t.axis = e.axis), e.theme && (t.theme = e.theme), e.padding && (t.padding = e.padding), e.viewport && (t.viewport = e.viewport), e.interactive !== void 0 && (t.interactive = e.interactive), e.grid !== void 0 && (t.grid = e.grid), c !== void 0 && (t.perf = c), p && (t.onEdgeReached = p), e.animations !== void 0 && (t.animations = e.animations), M(t), a.value = new T(s.value, t), K(a.value), e.onReady?.(a.value), await g(), V();
+    }), I(() => {
+      f?.disconnect(), f = null, a.value?.destroy(), a.value = null;
     }), d(
       () => e.headerLayout,
       async () => {
-        n.value && (await h(), L());
+        a.value && (await g(), V());
       }
     ), d(
       () => e.theme,
       (t) => {
-        n.value && t && (n.value.setTheme(t), m.value = t);
+        a.value && t && (a.value.setTheme(t), x.value = t);
       }
     ), d(
       () => e.axis,
       (t) => {
-        n.value && t && n.value.setAxis(t);
+        a.value && t && a.value.setAxis(t);
       },
       { deep: !0 }
     ), d(
       () => e.grid?.visible,
       () => {
-        n.value && e.grid !== void 0 && n.value.setGrid(e.grid);
+        a.value && e.grid !== void 0 && a.value.setGrid(e.grid);
       }
     );
-    let K = e.animations;
+    let D = e.animations;
     d(
       () => e.animations,
       async (t) => {
-        if (H(t, K) || (K = t, !n.value || !c.value)) return;
-        n.value.destroy(), n.value = null, await h();
+        if (z(t, D) || (D = t, !a.value || !s.value)) return;
+        a.value.destroy(), a.value = null, await g();
         const i = {};
-        e.axis && (i.axis = e.axis), e.theme && (i.theme = e.theme), e.padding && (i.padding = e.padding), e.viewport && (i.viewport = e.viewport), e.interactive !== void 0 && (i.interactive = e.interactive), e.grid !== void 0 && (i.grid = e.grid), u !== void 0 && (i.perf = u), v && (i.onEdgeReached = v), t !== void 0 && (i.animations = t), n.value = new z(c.value, i), V(n.value), e.onReady?.(n.value);
+        e.axis && (i.axis = e.axis), e.theme && (i.theme = e.theme), e.padding && (i.padding = e.padding), e.viewport && (i.viewport = e.viewport), e.interactive !== void 0 && (i.interactive = e.interactive), e.grid !== void 0 && (i.grid = e.grid), c !== void 0 && (i.perf = c), p && (i.onEdgeReached = p), t !== void 0 && (i.animations = t), M(i), a.value = new T(s.value, i), K(a.value), e.onReady?.(a.value);
       }
     );
-    let f;
+    let h;
     d(
-      () => [n.value, e.visibleRange],
+      () => [a.value, e.visibleRange],
       async ([t, i]) => {
-        !t || i === void 0 || f !== void 0 && f.instance === t && H(f.spec, i) || (f = { instance: t, spec: i }, await h(), t.setVisibleRange(i));
+        !t || i === void 0 || h !== void 0 && h.instance === t && z(h.spec, i) || (h = { instance: t, spec: i }, await g(), t.setVisibleRange(i));
       },
       { immediate: !0 }
     ), d(
@@ -111,75 +141,75 @@ const X = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-h
         e.padding?.bottom,
         typeof e.padding?.right == "object" ? e.padding.right.intervals : e.padding?.right,
         typeof e.padding?.left == "object" ? e.padding.left.intervals : e.padding?.left,
-        B.value
+        L.value
       ],
-      x
-    );
-    const S = P(() => {
-      const t = m.value, [i, a] = t?.chartGradient ?? ["transparent", "transparent"], O = t?.background ?? "transparent";
-      return `position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: ${e.gradient ? `linear-gradient(to bottom, ${i} 0%, ${O} 70%, ${a} 100%)` : O}`;
+      A
+    ), d(() => [a.value, j.value, e.fade], $, { immediate: !0 });
+    const N = v(() => {
+      const t = x.value, [i, n] = t?.chartGradient ?? ["transparent", "transparent"], F = t?.background ?? "transparent";
+      return `position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: ${e.gradient ? `linear-gradient(to bottom, ${i} 0%, ${F} 70%, ${n} 100%)` : F}`;
     });
-    return (t, i) => (g(), p("div", {
-      style: j(S.value)
+    return (t, i) => (y(), m("div", {
+      style: q(N.value)
     }, [
-      o("div", X, [
-        o("div", Y, [
-          y.headerLayout === "inline" ? (g(), p("div", Z, [
+      o("div", ae, [
+        o("div", oe, [
+          b.headerLayout === "inline" ? (y(), m("div", ne, [
             o("div", {
               ref_key: "titleAnchor",
-              ref: b,
+              ref: R,
               "data-chart-title-anchor": ""
             }, null, 512),
             o("div", {
               ref_key: "infoBarAnchor",
-              ref: R,
+              ref: k,
               "data-tooltip-legend-anchor": ""
             }, null, 512)
-          ])) : A("", !0),
+          ])) : w("", !0),
           o("div", {
             ref_key: "containerRef",
-            ref: c,
+            ref: s,
             style: { position: "relative", flex: "1", "min-width": "0", "min-height": "0", overflow: "hidden" }
           }, [
-            y.headerLayout === "overlay" ? (g(), p("div", {
+            b.headerLayout === "overlay" ? (y(), m("div", {
               key: 0,
               ref_key: "topOverlayRef",
-              ref: w,
+              ref: C,
               "data-chart-top-overlay": "",
               style: { position: "absolute", top: "0", left: "0", right: "0", "z-index": "2", "pointer-events": "none", display: "flex", "flex-direction": "column" }
             }, [
               o("div", {
                 ref_key: "titleAnchor",
-                ref: b,
+                ref: R,
                 "data-chart-title-anchor": ""
               }, null, 512),
               o("div", {
                 ref_key: "infoBarAnchor",
-                ref: R,
+                ref: k,
                 "data-tooltip-legend-anchor": ""
               }, null, 512)
-            ], 512)) : A("", !0),
-            n.value ? (g(), p("div", ee, [
-              N(t.$slots, "default")
-            ])) : A("", !0)
+            ], 512)) : w("", !0),
+            a.value ? (y(), m("div", re, [
+              J(t.$slots, "default")
+            ])) : w("", !0)
           ], 512)
         ]),
         o("div", {
           ref_key: "legendRightAnchor",
-          ref: _,
+          ref: E,
           "data-legend-right-anchor": "",
           style: { flex: "0 0 auto" }
         }, null, 512)
       ]),
       o("div", {
         ref_key: "legendAnchor",
-        ref: C,
+        ref: _,
         "data-legend-anchor": "",
         style: { flex: "0 0 auto" }
       }, null, 512),
       o("div", {
         ref_key: "navigatorAnchor",
-        ref: E,
+        ref: B,
         "data-navigator-anchor": "",
         style: { flex: "0 0 auto" }
       }, null, 512)
@@ -187,5 +217,5 @@ const X = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-h
   }
 });
 export {
-  le as default
+  ce as default
 };

package/dist/core/dist/chart/options.js

@@ -1,5 +1,15 @@
-import { DEFAULT_MAX_VISIBLE_BARS as o, MIN_VISIBLE_BARS as n } from "./pan-zoom-math.js";
-function s(t) {
+import { DEFAULT_MAX_VISIBLE_BARS as i, MIN_VISIBLE_BARS as r } from "./pan-zoom-math.js";
+function n(t) {
+  return t === void 0 || !Number.isFinite(t) || t <= 0 ? 0 : t;
+}
+function a(t) {
+  return {
+    top: n(t?.top),
+    right: t?.right === void 0 ? null : n(t.right),
+    left: n(t?.left)
+  };
+}
+function l(t) {
   if (!t) return { monitor: null, ownsMonitor: !1, hud: null };
   if (typeof t != "object" || !("monitor" in t || "recordFrame" in t))
     throw new Error(
@@ -7,29 +17,30 @@ function s(t) {
     );
   return "recordFrame" in t ? { monitor: t, ownsMonitor: !1, hud: null } : { monitor: t.monitor, ownsMonitor: t.ownsMonitor ?? !1, hud: t.hud ?? null };
 }
-const r = {
+const e = {
   top: 20,
   bottom: 20,
   right: { intervals: 3 },
   left: { intervals: 0 }
 };
-function a(t) {
+function f(t) {
   return {
-    top: t?.top ?? r.top,
-    bottom: t?.bottom ?? r.bottom,
-    right: t?.right ?? r.right,
-    left: t?.left ?? r.left
+    top: t?.top ?? e.top,
+    bottom: t?.bottom ?? e.bottom,
+    right: t?.right ?? e.right,
+    left: t?.left ?? e.left
   };
 }
-function f(t, e) {
-  return typeof t == "number" && typeof e == "number" ? t === e : typeof t == "object" && typeof e == "object" ? t.intervals === e.intervals : !1;
+function u(t, o) {
+  return typeof t == "number" && typeof o == "number" ? t === o : typeof t == "object" && typeof o == "object" ? t.intervals === o.intervals : !1;
 }
-function l(t) {
-  return t === void 0 ? o : Number.isFinite(t) ? Math.max(n, Math.floor(t)) : o;
+function m(t) {
+  return t === void 0 ? i : Number.isFinite(t) ? Math.max(r, Math.floor(t)) : i;
 }
 export {
-  f as isSameHorizontalPadding,
-  l as resolveMaxVisibleBars,
-  a as resolvePadding,
-  s as resolvePerfOptions
+  u as isSameHorizontalPadding,
+  a as resolveFade,
+  m as resolveMaxVisibleBars,
+  f as resolvePadding,
+  l as resolvePerfOptions
 };