@wick-charts/vue 0.7.0 → 0.8.1

package/README.md

@@ -5,13 +5,13 @@
 [![codecov](https://codecov.io/gh/mo4islona/wick-charts/branch/main/graph/badge.svg)](https://codecov.io/gh/mo4islona/wick-charts) [![license](https://img.shields.io/github/license/mo4islona/wick-charts.svg)](./LICENSE)
 [![npm @wick-charts/vue](https://img.shields.io/npm/v/@wick-charts/vue.svg?label=%40wick-charts%2Fvue)](https://www.npmjs.com/package/@wick-charts/vue)
 
-High-performance timeseries charts for **React**, **Vue**, and **Svelte**. Canvas-rendered, tree-shakeable, zero runtime dependencies.
+Realtime, animated 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/)
 
 ## Features
 
-- **Candlestick, Line, Bar, Band, Pie, Sparkline** — all from one package
+- **Chart types** — candlestick, line and area, band, bar, heatmap, pie and donut, sparkline, all from one package
 - **Real-time streaming** — append/update at 60fps with coordinated animations
 - **22 built-in themes** plus `createTheme()` for custom palettes
 - **Interactive** — zoom, pan, crosshair, tooltips
@@ -49,13 +49,15 @@ const props = defineProps(['data']);
 </template>
 ```
 
+`ChartContainer` fills its parent (`width` and `height` are `100%`), so give the parent a height. The container also has a 240px `min-height`, so a parent with no height still shows a chart. For a smaller chart, such as a sparkline in a table row, set `min-height: 0` (`minHeight: 0` in React) in the container's `style`.
+
 ## API
 
 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/)
 
-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/), [Band](https://wick-charts.eeff.io/api/band-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/), [Band](https://wick-charts.eeff.io/api/band-series/), [Pie](https://wick-charts.eeff.io/api/pie-series/), [Heatmap](https://wick-charts.eeff.io/api/heatmap-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
 
@@ -112,6 +114,20 @@ Tree-shaken React scenarios via `pnpm size` (esbuild, minified, browser target,
 
 Upgrading across versions? See [MIGRATION.md](https://github.com/mo4islona/wick-charts/blob/main/MIGRATION.md) for per-version breaking-change notes and code snippets.
 
+## Contributing
+
+Bug reports, feature requests and pull requests are welcome. Open an [issue](https://github.com/mo4islona/wick-charts/issues) first for anything larger than a small fix, so we can agree on the approach.
+
+```bash
+pnpm install
+pnpm dev         # docs site with every chart type at http://localhost:5173
+pnpm test        # unit and integration tests
+pnpm lint        # Biome
+pnpm typecheck
+```
+
+A pull request should pass `pnpm test`, `pnpm lint` and `pnpm typecheck`, and add a test for each bug fix.
+
 ## License
 
 MIT

package/dist/BandSeries.vue.js

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

package/dist/BarSeries.vue.js

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

package/dist/CandlestickSeries.vue.js

@@ -2,7 +2,7 @@ import { defineComponent as d, ref as p, onMounted as f, onUnmounted as m, watch
 import { toLayers as u, syncSeriesLayer as S, EMPTY_SYNC_STATE as b } from "./core/dist/data/sync.js";
 import { CandlestickSeriesDef as _ } from "./core/dist/series/candlestick.js";
 import { useChartInstance as y } from "./context.js";
-const V = /* @__PURE__ */ d({
+const T = /* @__PURE__ */ d({
   __name: "CandlestickSeries",
   props: {
     data: {},
@@ -49,5 +49,5 @@ const V = /* @__PURE__ */ d({
   }
 });
 export {
-  V as default
+  T as default
 };

package/dist/ChartContainer.vue.js

@@ -25,7 +25,7 @@ const ie = { style: { display: "flex", "flex-direction": "row", flex: "1", "min-
     grid: {},
     fade: { type: [Boolean, Object], default: void 0 },
     headerLayout: { default: "overlay" },
-    animations: { type: [Boolean, Object] },
+    animations: { type: [Boolean, Object], default: void 0 },
     perf: {},
     onEdgeReached: {},
     onPointClick: {},

package/dist/LineSeries.vue.js

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

package/dist/core/dist/chart/badge-animator.js

@@ -1,5 +1,5 @@
 import { ScalarSpring as g } from "../animation/scalar-spring.js";
-const l = 320, V = 0.15;
+const u = 320, m = 0.15;
 class b {
   #t;
   #e;
@@ -8,53 +8,63 @@ class b {
     this.#t = new g(i), this.#e = i;
   }
   frame(i) {
-    const { target: t, firstVisible: n, introFront: r, now: s, glide: a = !0, countUp: u = !0, reducedMotion: p = !1 } = i;
-    if (p || !a && !u)
-      return this.#t.snap(t, { now: s }), this.#e = t, this.#i = !0, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
+    const { target: t, firstVisible: s, introFront: r, now: n, glide: a = !0, countUp: l = !0, reducedMotion: f = !1 } = i;
+    if (f || !a && !l)
+      return this.#t.snap(t, { now: n }), this.#e = t, this.#i = !0, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
     if (r < 1) {
-      const h = n + (t - n) * r, o = u ? h : t;
-      return this.#t.snap(o, { now: s }), this.#e = o, this.#i = !0, { positionValue: o, textValue: o, opacity: this.#s(r), animating: !0 };
+      const p = s + (t - s) * r, o = l ? p : t;
+      return this.#t.snap(o, { now: n }), this.#e = o, this.#i = !0, { positionValue: o, textValue: o, opacity: this.#n(r), animating: !0 };
     }
     if (!this.#i)
-      return this.#t.snap(t, { now: s }), this.#e = t, this.#i = !0, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
+      return this.#t.snap(t, { now: n }), this.#e = t, this.#i = !0, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
     if (!a)
-      return this.#t.snap(t, { now: s }), this.#e = t, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
-    const c = i.settleMs ?? l;
+      return this.#t.snap(t, { now: n }), this.#e = t, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
+    const c = i.settleMs ?? u;
     if (c <= 0)
-      return this.#t.snap(t, { now: s }), this.#e = t, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
-    Math.abs(t - this.#e) > d && (this.#t.retarget(t, { now: s, settleMs: c }), this.#e = t);
-    const f = this.#t.tick(s);
-    return { positionValue: this.#t.current, textValue: t, opacity: 1, animating: f };
+      return this.#t.snap(t, { now: n }), this.#e = t, { positionValue: t, textValue: t, opacity: 1, animating: !1 };
+    Math.abs(t - this.#e) > y && (this.#t.retarget(t, { now: n, settleMs: c }), this.#e = t);
+    const h = this.#t.tick(n);
+    return { positionValue: this.#t.current, textValue: t, opacity: 1, animating: h };
   }
-  #s(i) {
-    return i >= 1 ? 1 : y(i / V);
+  #n(i) {
+    return i >= 1 ? 1 : V(i / m);
   }
 }
-const d = 1e-9;
-function y(e) {
+const y = 1e-9;
+function V(e) {
   return e <= 0 ? 0 : e >= 1 ? 1 : e;
 }
 function w(e) {
-  return e === !1 ? { glide: !1, countUp: !1, settleMs: 0 } : e === void 0 || e === !0 ? { glide: !0, countUp: !0, settleMs: l } : {
+  return e === !1 ? { glide: !1, countUp: !1, settleMs: 0 } : e === void 0 || e === !0 ? { glide: !0, countUp: !0, settleMs: u } : {
     glide: e.glide ?? !0,
     countUp: e.countUp ?? !0,
-    settleMs: e.settleMs ?? l
+    settleMs: e.settleMs ?? u
   };
 }
-function M(e, i, t) {
-  const { from: n } = e.getVisibleRange();
-  return e.getStackedValueAtTime(i, n) ?? t;
+const d = 20;
+function x(e) {
+  if (!(e > 0)) return 6;
+  if (e >= 1e3) return 0;
+  if (e >= 10) return 2;
+  if (e >= 0.1) return 4;
+  const i = Math.ceil(-Math.log10(e));
+  return Math.min(d, Math.max(6, i + 2));
 }
-function S(e, i) {
+function S(e, i, t) {
+  const { from: s } = e.getVisibleRange();
+  return e.getStackedValueAtTime(i, s) ?? t;
+}
+function v(e, i) {
   if (i !== void 0) return i;
-  const t = new Set(e.getSeriesIdsByType("band")), n = (a) => !t.has(a), r = e.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 }).filter(n);
+  const t = new Set(e.getSeriesIdsByType("band")), s = (a) => !t.has(a), r = e.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 }).filter(s);
   if (r.length > 0) return r[0];
-  const s = e.getSeriesIdsByType("time", { visibleOnly: !0 }).filter(n);
-  return s.length > 0 ? s[0] : null;
+  const n = e.getSeriesIdsByType("time", { visibleOnly: !0 }).filter(s);
+  return n.length > 0 ? n[0] : null;
 }
 export {
   b as BadgeAnimator,
-  M as firstVisibleValue,
+  S as firstVisibleValue,
   w as resolveAnimate,
-  S as resolveYLabelSeriesId
+  v as resolveYLabelSeriesId,
+  x as yLabelFractionDigits
 };