@wick-charts/vue 0.5.1 → 0.6.1

package/README.md

@@ -7,7 +7,7 @@
 
 High-performance timeseries charts for **React**, **Vue**, and **Svelte**. Canvas-rendered, tree-shakeable, zero runtime dependencies.
 
-[Live Demo](https://wick-charts.eeff.io/) · [Docs](https://wick-charts.eeff.io/api/chart-container)
+[Live Demo](https://wick-charts.eeff.io/) · [Docs](https://wick-charts.eeff.io/api/chart-container/)
 
 ## Features
 
@@ -53,9 +53,48 @@ const props = defineProps(['data']);
 
 Every component, prop, type, and slot context lives in the docs site:
 
-[wick-charts.eeff.io/api/chart-container](https://wick-charts.eeff.io/api/chart-container)
+[wick-charts.eeff.io/api/chart-container/](https://wick-charts.eeff.io/api/chart-container/)
 
-Start there for [ChartContainer](https://wick-charts.eeff.io/api/chart-container), then drill into the series ([Candlestick](https://wick-charts.eeff.io/api/candlestick-series), [Line](https://wick-charts.eeff.io/api/line-series), [Bar](https://wick-charts.eeff.io/api/bar-series), [Pie](https://wick-charts.eeff.io/api/pie-series), [Sparkline](https://wick-charts.eeff.io/api/sparkline)) and overlays ([Tooltip](https://wick-charts.eeff.io/api/tooltip), [InfoBar](https://wick-charts.eeff.io/api/info-bar), [Crosshair](https://wick-charts.eeff.io/api/crosshair), [Legend](https://wick-charts.eeff.io/api/legend), [YAxis](https://wick-charts.eeff.io/api/y-axis), [XAxis](https://wick-charts.eeff.io/api/x-axis), [Navigator](https://wick-charts.eeff.io/api/navigator), …).
+Start there for [ChartContainer](https://wick-charts.eeff.io/api/chart-container/), then drill into the series ([Candlestick](https://wick-charts.eeff.io/api/candlestick-series/), [Line](https://wick-charts.eeff.io/api/line-series/), [Bar](https://wick-charts.eeff.io/api/bar-series/), [Pie](https://wick-charts.eeff.io/api/pie-series/), [Sparkline](https://wick-charts.eeff.io/api/sparkline/)) and overlays ([Tooltip](https://wick-charts.eeff.io/api/tooltip/), [InfoBar](https://wick-charts.eeff.io/api/info-bar/), [Crosshair](https://wick-charts.eeff.io/api/crosshair/), [Legend](https://wick-charts.eeff.io/api/legend/), [YAxis](https://wick-charts.eeff.io/api/y-axis/), [XAxis](https://wick-charts.eeff.io/api/x-axis/), [Navigator](https://wick-charts.eeff.io/api/navigator/), …).
+
+## No framework? Use the engine directly
+
+`ChartInstance` and every series/theme/painter has no framework dependency — it's a plain canvas engine that each of `@wick-charts/react`, `@wick-charts/vue`, and `@wick-charts/svelte` bundles and re-exports in full. Any one of them is a supported vanilla entry point; you don't need React/Vue/Svelte installed to use it this way (`sideEffects: false` + per-module ESM means the framework-specific components tree-shake out when unused):
+
+```ts
+import { CandlestickSeriesDef, ChartInstance, registerBuiltinSeries } from '@wick-charts/react';
+
+registerBuiltinSeries();
+const chart = new ChartInstance(document.getElementById('chart')!);
+const seriesId = chart.addSeries(CandlestickSeriesDef, {});
+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
 
@@ -65,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/BarSeries.vue.js

@@ -1,44 +1,50 @@
-import { defineComponent as p, ref as d, onMounted as c, onUnmounted as l, watch as i, createCommentVNode as m } from "vue";
-import { toLayers as f, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
+import { defineComponent as u, ref as p, onMounted as d, onUnmounted as c, watch as o, createCommentVNode as f } from "vue";
+import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
 import { BarSeriesDef as S } from "./core/dist/series/bar.js";
 import { useChartInstance as _ } from "./context.js";
-const w = /* @__PURE__ */ p({
+const E = /* @__PURE__ */ u({
   __name: "BarSeries",
   props: {
     data: {},
     options: {},
-    id: {}
+    id: {},
+    visible: { type: Boolean, default: !0 }
   },
-  setup(u) {
-    const a = u, o = _(), r = d(null);
-    let n = [];
-    function s(e, t) {
-      n = y({ chart: o, id: e, data: t, prev: n });
+  setup(l) {
+    const a = l, s = _(), r = p(null);
+    let i = [];
+    function n(e, t) {
+      i = y({ chart: s, id: e, data: t, prev: i });
     }
-    return c(() => {
-      const e = f(a.data).length, t = o.addSeries(S, {
+    return d(() => {
+      const e = m(a.data).length, t = s.addSeries(S, {
         ...a.options,
         layers: e,
         id: a.id
       });
-      r.value = t, n = new Array(e).fill(v), s(t, a.data);
-    }), l(() => {
-      r.value && o.removeSeries(r.value);
-    }), i(
+      r.value = t, i = new Array(e).fill(v), n(t, a.data), s.setSeriesVisible(t, a.visible);
+    }), c(() => {
+      r.value && s.removeSeries(r.value);
+    }), o(
       () => a.data,
       (e) => {
         const t = r.value;
-        t && s(t, e);
+        t && n(t, e);
       }
-    ), i(
+    ), o(
       () => a.options,
       (e) => {
-        r.value && e && o.updateSeriesOptions(r.value, e);
+        r.value && e && s.updateSeriesOptions(r.value, e);
       },
       { deep: !0 }
-    ), (e, t) => m("", !0);
+    ), o(
+      () => a.visible,
+      (e) => {
+        r.value && s.setSeriesVisible(r.value, e);
+      }
+    ), (e, t) => f("", !0);
   }
 });
 export {
-  w as default
+  E as default
 };

package/dist/CandlestickSeries.vue.js

@@ -1,45 +1,51 @@
-import { defineComponent as p, ref as u, onMounted as m, onUnmounted as f, watch as d, createCommentVNode as S } from "vue";
-import { toLayers as l, syncSeriesLayer as v, EMPTY_SYNC_STATE as _ } from "./core/dist/data/sync.js";
+import { defineComponent as p, ref as c, onMounted as f, onUnmounted as m, watch as r, createCommentVNode as v } from "vue";
+import { toLayers as d, syncSeriesLayer as S, EMPTY_SYNC_STATE as b } from "./core/dist/data/sync.js";
 import { CandlestickSeriesDef as y } from "./core/dist/series/candlestick.js";
-import { useChartInstance as C } from "./context.js";
-const k = /* @__PURE__ */ p({
+import { useChartInstance as _ } from "./context.js";
+const V = /* @__PURE__ */ p({
   __name: "CandlestickSeries",
   props: {
     data: {},
     options: {},
-    id: {}
+    id: {},
+    visible: { type: Boolean, default: !0 }
   },
-  setup(c) {
-    const t = c, r = C(), a = u(null);
-    let o = _;
-    function n(e, s) {
-      const i = l(s)[0];
-      r.setSeriesLabels(e, [i.label]), o = v({ chart: r, id: e, data: i.data, prev: o });
+  setup(u) {
+    const t = u, s = _(), a = c(null);
+    let o = b;
+    function n(e, i) {
+      const l = d(i)[0];
+      s.setSeriesLabels(e, [l.label]), o = S({ chart: s, id: e, data: l.data, prev: o });
     }
-    return m(() => {
-      const e = r.addSeries(y, {
+    return f(() => {
+      const e = s.addSeries(y, {
         ...t.options,
         id: t.id,
-        label: l(t.data)[0].label
+        label: d(t.data)[0].label
       });
-      a.value = e, n(e, t.data);
-    }), f(() => {
-      a.value && r.removeSeries(a.value);
-    }), d(
+      a.value = e, n(e, t.data), s.setSeriesVisible(e, t.visible);
+    }), m(() => {
+      a.value && s.removeSeries(a.value);
+    }), r(
       () => t.data,
       (e) => {
-        const s = a.value;
-        s && n(s, e);
+        const i = a.value;
+        i && n(i, e);
       }
-    ), d(
+    ), r(
       () => t.options,
       (e) => {
-        a.value && e && r.updateSeriesOptions(a.value, e);
+        a.value && e && s.updateSeriesOptions(a.value, e);
       },
       { deep: !0 }
-    ), (e, s) => S("", !0);
+    ), r(
+      () => t.visible,
+      (e) => {
+        a.value && s.setSeriesVisible(a.value, e);
+      }
+    ), (e, i) => v("", !0);
   }
 });
 export {
-  k as default
+  V as default
 };

package/dist/ChartContainer.vue.js

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

package/dist/HeatmapSeries.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as o, ref as n, onMounted as u, onUnmounted as l, watch as s, createCommentVNode as d } from "vue";
+import { HeatmapSeriesDef as p } from "./core/dist/series/heatmap.js";
+import { useChartInstance as m } from "./context.js";
+const _ = /* @__PURE__ */ o({
+  __name: "HeatmapSeries",
+  props: {
+    data: {},
+    options: {},
+    id: {},
+    visible: { type: Boolean, default: !0 }
+  },
+  setup(r) {
+    const a = r, i = m(), t = n(null);
+    return u(() => {
+      const e = i.addSeries(p, { ...a.options, id: a.id });
+      t.value = e, a.data.length > 0 && i.setSeriesData(e, a.data), i.setSeriesVisible(e, a.visible);
+    }), l(() => {
+      t.value && i.removeSeries(t.value);
+    }), s(
+      () => a.data,
+      (e) => {
+        t.value && i.setSeriesData(t.value, e);
+      }
+    ), s(
+      () => a.options,
+      (e) => {
+        t.value && e && i.updateSeriesOptions(t.value, e);
+      },
+      { deep: !0 }
+    ), s(
+      () => a.visible,
+      (e) => {
+        t.value && i.setSeriesVisible(t.value, e);
+      }
+    ), (e, f) => d("", !0);
+  }
+});
+export {
+  _ as default
+};

package/dist/HeatmapSeries.vue2.js

@@ -0,0 +1,4 @@
+import f from "./HeatmapSeries.vue.js";
+export {
+  f as default
+};

package/dist/LineSeries.vue.js

@@ -1,44 +1,50 @@
-import { defineComponent as p, ref as d, onMounted as c, onUnmounted as l, watch as i, createCommentVNode as m } from "vue";
-import { toLayers as f, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
+import { defineComponent as u, ref as p, onMounted as d, onUnmounted as c, watch as n, createCommentVNode as f } from "vue";
+import { toLayers as m, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
 import { LineSeriesDef as S } from "./core/dist/series/line.js";
 import { useChartInstance as _ } from "./context.js";
-const A = /* @__PURE__ */ p({
+const E = /* @__PURE__ */ u({
   __name: "LineSeries",
   props: {
     data: {},
     options: {},
-    id: {}
+    id: {},
+    visible: { type: Boolean, default: !0 }
   },
-  setup(u) {
-    const a = u, n = _(), r = d(null);
-    let o = [];
-    function s(e, t) {
-      o = y({ chart: n, id: e, data: t, prev: o });
+  setup(l) {
+    const a = l, s = _(), r = p(null);
+    let i = [];
+    function o(e, t) {
+      i = y({ chart: s, id: e, data: t, prev: i });
     }
-    return c(() => {
-      const e = f(a.data).length, t = n.addSeries(S, {
+    return d(() => {
+      const e = m(a.data).length, t = s.addSeries(S, {
         ...a.options,
         layers: e,
         id: a.id
       });
-      r.value = t, o = new Array(e).fill(v), s(t, a.data);
-    }), l(() => {
-      r.value && n.removeSeries(r.value);
-    }), i(
+      r.value = t, i = new Array(e).fill(v), o(t, a.data), s.setSeriesVisible(t, a.visible);
+    }), c(() => {
+      r.value && s.removeSeries(r.value);
+    }), n(
       () => a.data,
       (e) => {
         const t = r.value;
-        t && s(t, e);
+        t && o(t, e);
       }
-    ), i(
+    ), n(
       () => a.options,
       (e) => {
-        r.value && e && n.updateSeriesOptions(r.value, e);
+        r.value && e && s.updateSeriesOptions(r.value, e);
       },
       { deep: !0 }
-    ), (e, t) => m("", !0);
+    ), n(
+      () => a.visible,
+      (e) => {
+        r.value && s.setSeriesVisible(r.value, e);
+      }
+    ), (e, t) => f("", !0);
   }
 });
 export {
-  A as default
+  E as default
 };