@wick-charts/vue 0.4.2 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/BarSeries.vue.js +44 -0
- package/dist/BarSeries.vue2.js +4 -0
- package/dist/CandlestickSeries.vue.js +45 -0
- package/dist/CandlestickSeries.vue2.js +4 -0
- package/dist/ChartContainer.vue.js +168 -0
- package/dist/ChartContainer.vue2.js +4 -0
- package/dist/LineSeries.vue.js +44 -0
- package/dist/LineSeries.vue2.js +4 -0
- package/dist/PieSeries.vue.js +34 -0
- package/dist/PieSeries.vue2.js +4 -0
- package/dist/composables.js +44 -0
- package/dist/context.js +25 -0
- package/dist/core/dist/animation/animator.js +72 -0
- package/dist/core/dist/animation/config.js +145 -0
- package/dist/core/dist/animation/easing.js +4 -0
- package/dist/core/dist/animation/scalar-spring.js +57 -0
- package/dist/core/dist/animation/spring.js +11 -0
- package/dist/core/dist/animation/time.js +19 -0
- package/dist/core/dist/animation/viewport-engine.js +174 -0
- package/dist/core/dist/animation/visible-range-spring.js +64 -0
- package/dist/core/dist/animation/y-range-hermite.js +72 -0
- package/dist/core/dist/animation/y-range-snap.js +31 -0
- package/dist/core/dist/animation/y-range-spring.js +59 -0
- package/dist/core/dist/axis/dom-labels.js +60 -0
- package/dist/core/dist/canvas-manager.js +109 -0
- package/dist/core/dist/chart/edge-indicators.js +26 -0
- package/dist/core/dist/chart/fit-to-data.js +9 -0
- package/dist/core/dist/chart/last-value.js +31 -0
- package/dist/core/dist/chart/options.js +35 -0
- package/dist/core/dist/chart/pan-zoom-math.js +66 -0
- package/dist/core/dist/chart/streaming-cadence.js +70 -0
- package/dist/core/dist/chart/streaming-target.js +22 -0
- package/dist/core/dist/chart/viewport-padding.js +6 -0
- package/dist/core/dist/chart/y-target.js +24 -0
- package/dist/core/dist/chart.js +1495 -0
- package/dist/core/dist/components/crosshair.js +9 -0
- package/dist/core/dist/components/edge-indicator.js +36 -0
- package/dist/core/dist/components/grid.js +22 -0
- package/dist/core/dist/components/marker.js +41 -0
- package/dist/core/dist/components/reference-line.js +48 -0
- package/dist/core/dist/components/time-region.js +35 -0
- package/dist/core/dist/data/decimation.js +54 -0
- package/dist/core/dist/data/store.js +76 -0
- package/dist/core/dist/data/sync.js +47 -0
- package/dist/core/dist/events.js +19 -0
- package/dist/core/dist/interactions/handler.js +84 -0
- package/dist/core/dist/interactions/pan.js +26 -0
- package/dist/core/dist/interactions/zoom.js +21 -0
- package/dist/core/dist/navigator/controller.js +374 -0
- package/dist/core/dist/navigator/decimate.js +44 -0
- package/dist/core/dist/navigator/interactions.js +28 -0
- package/dist/core/dist/navigator/render.js +68 -0
- package/dist/core/dist/perf/counting-context.js +19 -0
- package/dist/core/dist/perf/perf-hud.js +453 -0
- package/dist/core/dist/perf/perf-monitor.js +132 -0
- package/dist/core/dist/render-scheduler.js +31 -0
- package/dist/core/dist/scales/tick-tracker.js +110 -0
- package/dist/core/dist/scales/x-scale.js +145 -0
- package/dist/core/dist/scales/y-scale.js +156 -0
- package/dist/core/dist/series/bar.js +341 -0
- package/dist/core/dist/series/base-multi-layer.js +438 -0
- package/dist/core/dist/series/candlestick.js +481 -0
- package/dist/core/dist/series/definition.js +11 -0
- package/dist/core/dist/series/line.js +446 -0
- package/dist/core/dist/series/painters/builtins.js +36 -0
- package/dist/core/dist/series/painters/canvas-path.js +79 -0
- package/dist/core/dist/series/painters/resolve.js +32 -0
- package/dist/core/dist/series/pie.js +545 -0
- package/dist/core/dist/series/register-builtins.js +11 -0
- package/dist/core/dist/series/stack-math.js +17 -0
- package/dist/core/dist/snapshots.js +107 -0
- package/dist/core/dist/theme/create.js +176 -0
- package/dist/core/dist/theme/resolve.js +14 -0
- package/dist/core/dist/theme/themes/andromeda.js +33 -0
- package/dist/core/dist/theme/themes/ayu-mirage.js +33 -0
- package/dist/core/dist/theme/themes/catppuccin.js +33 -0
- package/dist/core/dist/theme/themes/dracula.js +35 -0
- package/dist/core/dist/theme/themes/github-light.js +34 -0
- package/dist/core/dist/theme/themes/gruvbox.js +33 -0
- package/dist/core/dist/theme/themes/handwritten.js +101 -0
- package/dist/core/dist/theme/themes/high-contrast.js +33 -0
- package/dist/core/dist/theme/themes/lavender-mist.js +33 -0
- package/dist/core/dist/theme/themes/light-pink.js +34 -0
- package/dist/core/dist/theme/themes/material-palenight.js +33 -0
- package/dist/core/dist/theme/themes/minimal-light.js +34 -0
- package/dist/core/dist/theme/themes/mint-breeze.js +33 -0
- package/dist/core/dist/theme/themes/monokai-pro.js +33 -0
- package/dist/core/dist/theme/themes/night-owl.js +35 -0
- package/dist/core/dist/theme/themes/one-dark-pro.js +33 -0
- package/dist/core/dist/theme/themes/panda.js +33 -0
- package/dist/core/dist/theme/themes/peach-cream.js +33 -0
- package/dist/core/dist/theme/themes/quiet-light.js +37 -0
- package/dist/core/dist/theme/themes/rose-pine-dawn.js +33 -0
- package/dist/core/dist/theme/themes/sand-dune.js +33 -0
- package/dist/core/dist/theme/themes/solarized-light.js +34 -0
- package/dist/core/dist/tooltip-position.js +10 -0
- package/dist/core/dist/utils/color.js +37 -0
- package/dist/core/dist/utils/format.js +29 -0
- package/dist/core/dist/utils/math.js +26 -0
- package/dist/core/dist/utils/poisoned-data-reporter.js +15 -0
- package/dist/core/dist/utils/time.js +41 -0
- package/dist/index.d.ts +827 -63
- package/dist/index.js +142 -8025
- package/dist/ui/Crosshair.vue.js +53 -0
- package/dist/ui/Crosshair.vue2.js +4 -0
- package/dist/ui/InfoBar.vue.js +143 -0
- package/dist/ui/InfoBar.vue2.js +4 -0
- package/dist/ui/Legend.vue.js +212 -0
- package/dist/ui/Legend.vue2.js +4 -0
- package/dist/ui/Marker.vue.js +47 -0
- package/dist/ui/Marker.vue2.js +4 -0
- package/dist/ui/Navigator.vue.js +58 -0
- package/dist/ui/Navigator.vue2.js +4 -0
- package/dist/ui/NumberFlow.vue.js +69 -0
- package/dist/ui/NumberFlow.vue2.js +4 -0
- package/dist/ui/PieLegend.vue.js +132 -0
- package/dist/ui/PieLegend.vue2.js +4 -0
- package/dist/ui/PieTooltip.vue.js +135 -0
- package/dist/ui/PieTooltip.vue2.js +4 -0
- package/dist/ui/ReferenceLine.vue.js +44 -0
- package/dist/ui/ReferenceLine.vue2.js +4 -0
- package/dist/ui/TimeAxis.vue.js +43 -0
- package/dist/ui/TimeAxis.vue2.js +4 -0
- package/dist/ui/TimeRegion.vue.js +41 -0
- package/dist/ui/TimeRegion.vue2.js +4 -0
- package/dist/ui/Title.vue.js +54 -0
- package/dist/ui/Title.vue2.js +4 -0
- package/dist/ui/Tooltip.vue.js +195 -0
- package/dist/ui/Tooltip.vue2.js +4 -0
- package/dist/ui/YAxis.vue.js +42 -0
- package/dist/ui/YAxis.vue2.js +4 -0
- package/dist/ui/YLabel.vue.js +105 -0
- package/dist/ui/YLabel.vue2.js +4 -0
- package/package.json +2 -2
- package/src/BarSeries.vue +12 -13
- package/src/CandlestickSeries.vue +17 -6
- package/src/LineSeries.vue +12 -13
- package/src/PieSeries.vue +2 -1
- package/src/index.ts +23 -0
- package/src/ui/Legend.vue +1 -2
- package/src/ui/Marker.vue +62 -0
- package/src/ui/ReferenceLine.vue +58 -0
- package/src/ui/TimeRegion.vue +54 -0
package/README.md
CHANGED
|
@@ -59,13 +59,15 @@ Start there for [ChartContainer](https://wick-charts.eeff.io/api/chart-container
|
|
|
59
59
|
|
|
60
60
|
## Bundle size
|
|
61
61
|
|
|
62
|
+
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.
|
|
63
|
+
|
|
62
64
|
Tree-shaken React scenarios via `pnpm size` (esbuild, minified, browser target, React/ReactDOM external):
|
|
63
65
|
|
|
64
66
|
| Scenario | Raw | Gzip | Brotli |
|
|
65
67
|
|---|---:|---:|---:|
|
|
66
|
-
| Candlestick only |
|
|
67
|
-
| Line only |
|
|
68
|
-
| Full React |
|
|
68
|
+
| Candlestick only | 83.3 kB | 25.9 kB | 22.9 kB |
|
|
69
|
+
| Line only | 91.3 kB | 28.3 kB | 25.0 kB |
|
|
70
|
+
| Full React | 180.3 kB | 55.5 kB | 47.1 kB |
|
|
69
71
|
|
|
70
72
|
## Migration
|
|
71
73
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { defineComponent as p, ref as d, onMounted as c, onUnmounted as l, watch as i, createCommentVNode as m } from "vue";
|
|
2
|
+
import { toLayers as f, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
|
|
3
|
+
import { BarSeriesDef as S } from "./core/dist/series/bar.js";
|
|
4
|
+
import { useChartInstance as _ } from "./context.js";
|
|
5
|
+
const w = /* @__PURE__ */ p({
|
|
6
|
+
__name: "BarSeries",
|
|
7
|
+
props: {
|
|
8
|
+
data: {},
|
|
9
|
+
options: {},
|
|
10
|
+
id: {}
|
|
11
|
+
},
|
|
12
|
+
setup(u) {
|
|
13
|
+
const a = u, o = _(), r = d(null);
|
|
14
|
+
let n = [];
|
|
15
|
+
function s(e, t) {
|
|
16
|
+
n = y({ chart: o, id: e, data: t, prev: n });
|
|
17
|
+
}
|
|
18
|
+
return c(() => {
|
|
19
|
+
const e = f(a.data).length, t = o.addSeries(S, {
|
|
20
|
+
...a.options,
|
|
21
|
+
layers: e,
|
|
22
|
+
id: a.id
|
|
23
|
+
});
|
|
24
|
+
r.value = t, n = new Array(e).fill(v), s(t, a.data);
|
|
25
|
+
}), l(() => {
|
|
26
|
+
r.value && o.removeSeries(r.value);
|
|
27
|
+
}), i(
|
|
28
|
+
() => a.data,
|
|
29
|
+
(e) => {
|
|
30
|
+
const t = r.value;
|
|
31
|
+
t && s(t, e);
|
|
32
|
+
}
|
|
33
|
+
), i(
|
|
34
|
+
() => a.options,
|
|
35
|
+
(e) => {
|
|
36
|
+
r.value && e && o.updateSeriesOptions(r.value, e);
|
|
37
|
+
},
|
|
38
|
+
{ deep: !0 }
|
|
39
|
+
), (e, t) => m("", !0);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
export {
|
|
43
|
+
w as default
|
|
44
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { defineComponent as p, ref as u, onMounted as m, onUnmounted as f, watch as d, createCommentVNode as S } from "vue";
|
|
2
|
+
import { toLayers as l, syncSeriesLayer as v, EMPTY_SYNC_STATE as _ } from "./core/dist/data/sync.js";
|
|
3
|
+
import { CandlestickSeriesDef as y } from "./core/dist/series/candlestick.js";
|
|
4
|
+
import { useChartInstance as C } from "./context.js";
|
|
5
|
+
const k = /* @__PURE__ */ p({
|
|
6
|
+
__name: "CandlestickSeries",
|
|
7
|
+
props: {
|
|
8
|
+
data: {},
|
|
9
|
+
options: {},
|
|
10
|
+
id: {}
|
|
11
|
+
},
|
|
12
|
+
setup(c) {
|
|
13
|
+
const t = c, r = C(), a = u(null);
|
|
14
|
+
let o = _;
|
|
15
|
+
function n(e, s) {
|
|
16
|
+
const i = l(s)[0];
|
|
17
|
+
r.setSeriesLabels(e, [i.label]), o = v({ chart: r, id: e, data: i.data, prev: o });
|
|
18
|
+
}
|
|
19
|
+
return m(() => {
|
|
20
|
+
const e = r.addSeries(y, {
|
|
21
|
+
...t.options,
|
|
22
|
+
id: t.id,
|
|
23
|
+
label: l(t.data)[0].label
|
|
24
|
+
});
|
|
25
|
+
a.value = e, n(e, t.data);
|
|
26
|
+
}), f(() => {
|
|
27
|
+
a.value && r.removeSeries(a.value);
|
|
28
|
+
}), d(
|
|
29
|
+
() => t.data,
|
|
30
|
+
(e) => {
|
|
31
|
+
const s = a.value;
|
|
32
|
+
s && n(s, e);
|
|
33
|
+
}
|
|
34
|
+
), d(
|
|
35
|
+
() => t.options,
|
|
36
|
+
(e) => {
|
|
37
|
+
a.value && e && r.updateSeriesOptions(a.value, e);
|
|
38
|
+
},
|
|
39
|
+
{ deep: !0 }
|
|
40
|
+
), (e, s) => S("", !0);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
export {
|
|
44
|
+
k as default
|
|
45
|
+
};
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { defineComponent as N, ref as a, shallowRef as C, provide as r, computed as K, onMounted as T, nextTick as b, onUnmounted as j, watch as l, openBlock as u, createElementBlock as v, normalizeStyle as M, createElementVNode as o, createCommentVNode as k, renderSlot as S } from "vue";
|
|
2
|
+
import { ChartInstance as O } from "./core/dist/chart.js";
|
|
3
|
+
import { catppuccin as G } from "./core/dist/theme/themes/catppuccin.js";
|
|
4
|
+
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";
|
|
5
|
+
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 = {
|
|
6
|
+
key: 0,
|
|
7
|
+
"data-chart-header": "",
|
|
8
|
+
style: { "flex-shrink": "0", display: "flex", "flex-direction": "column", "pointer-events": "none" }
|
|
9
|
+
}, W = {
|
|
10
|
+
key: 1,
|
|
11
|
+
"data-chart-series-overlay": "",
|
|
12
|
+
style: { position: "absolute", inset: "0", "pointer-events": "none", "z-index": "3" }
|
|
13
|
+
}, ne = /* @__PURE__ */ N({
|
|
14
|
+
__name: "ChartContainer",
|
|
15
|
+
props: {
|
|
16
|
+
theme: { default: () => G.theme },
|
|
17
|
+
axis: {},
|
|
18
|
+
padding: {},
|
|
19
|
+
viewport: {},
|
|
20
|
+
gradient: { type: Boolean, default: !0 },
|
|
21
|
+
interactive: { type: Boolean },
|
|
22
|
+
grid: {},
|
|
23
|
+
headerLayout: { default: "overlay" },
|
|
24
|
+
animations: { type: [Boolean, Object] },
|
|
25
|
+
perf: {},
|
|
26
|
+
onEdgeReached: {}
|
|
27
|
+
},
|
|
28
|
+
setup(h) {
|
|
29
|
+
const e = h, c = a(), i = C(null), p = C(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);
|
|
30
|
+
r(H, i), r(I, p), r(P, g), r(V, y), r(U, w), r(q, _), r(D, R);
|
|
31
|
+
let d = null;
|
|
32
|
+
const m = a(0), B = K(() => e.headerLayout === "overlay" ? m.value : 0);
|
|
33
|
+
function x() {
|
|
34
|
+
if (!i.value) return;
|
|
35
|
+
const n = { top: (e.padding?.top ?? 20) + B.value };
|
|
36
|
+
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);
|
|
37
|
+
}
|
|
38
|
+
function E() {
|
|
39
|
+
d?.disconnect(), d = null;
|
|
40
|
+
const t = e.headerLayout === "overlay" ? A.value : null;
|
|
41
|
+
if (!t) {
|
|
42
|
+
m.value = 0, x();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const n = () => {
|
|
46
|
+
m.value = t.getBoundingClientRect().height, x();
|
|
47
|
+
};
|
|
48
|
+
n(), d = new ResizeObserver(n), d.observe(t);
|
|
49
|
+
}
|
|
50
|
+
T(async () => {
|
|
51
|
+
if (!c.value) return;
|
|
52
|
+
const t = {};
|
|
53
|
+
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 O(c.value, t), await b(), E();
|
|
54
|
+
}), j(() => {
|
|
55
|
+
d?.disconnect(), d = null, i.value?.destroy(), i.value = null;
|
|
56
|
+
}), l(
|
|
57
|
+
() => e.headerLayout,
|
|
58
|
+
async () => {
|
|
59
|
+
i.value && (await b(), E());
|
|
60
|
+
}
|
|
61
|
+
), l(
|
|
62
|
+
() => e.theme,
|
|
63
|
+
(t) => {
|
|
64
|
+
i.value && t && (i.value.setTheme(t), p.value = t);
|
|
65
|
+
}
|
|
66
|
+
), l(
|
|
67
|
+
() => e.axis,
|
|
68
|
+
(t) => {
|
|
69
|
+
i.value && t && i.value.setAxis(t);
|
|
70
|
+
},
|
|
71
|
+
{ deep: !0 }
|
|
72
|
+
), l(
|
|
73
|
+
() => e.grid?.visible,
|
|
74
|
+
() => {
|
|
75
|
+
i.value && e.grid !== void 0 && i.value.setGrid(e.grid);
|
|
76
|
+
}
|
|
77
|
+
), l(
|
|
78
|
+
() => e.animations,
|
|
79
|
+
async (t) => {
|
|
80
|
+
if (!i.value || !c.value) return;
|
|
81
|
+
i.value.destroy(), i.value = null, await b();
|
|
82
|
+
const n = {};
|
|
83
|
+
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 O(c.value, n);
|
|
84
|
+
}
|
|
85
|
+
), l(
|
|
86
|
+
() => [
|
|
87
|
+
e.padding?.top,
|
|
88
|
+
e.padding?.bottom,
|
|
89
|
+
typeof e.padding?.right == "object" ? e.padding.right.intervals : e.padding?.right,
|
|
90
|
+
typeof e.padding?.left == "object" ? e.padding.left.intervals : e.padding?.left,
|
|
91
|
+
B.value
|
|
92
|
+
],
|
|
93
|
+
x
|
|
94
|
+
);
|
|
95
|
+
const z = K(() => {
|
|
96
|
+
const t = p.value, [n, $] = t?.chartGradient ?? ["transparent", "transparent"], L = t?.background ?? "transparent";
|
|
97
|
+
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}`;
|
|
98
|
+
});
|
|
99
|
+
return (t, n) => (u(), v("div", {
|
|
100
|
+
style: M(z.value)
|
|
101
|
+
}, [
|
|
102
|
+
o("div", F, [
|
|
103
|
+
o("div", J, [
|
|
104
|
+
h.headerLayout === "inline" ? (u(), v("div", Q, [
|
|
105
|
+
o("div", {
|
|
106
|
+
ref_key: "titleAnchor",
|
|
107
|
+
ref: g,
|
|
108
|
+
"data-chart-title-anchor": ""
|
|
109
|
+
}, null, 512),
|
|
110
|
+
o("div", {
|
|
111
|
+
ref_key: "infoBarAnchor",
|
|
112
|
+
ref: y,
|
|
113
|
+
"data-tooltip-legend-anchor": ""
|
|
114
|
+
}, null, 512)
|
|
115
|
+
])) : k("", !0),
|
|
116
|
+
o("div", {
|
|
117
|
+
ref_key: "containerRef",
|
|
118
|
+
ref: c,
|
|
119
|
+
style: { position: "relative", flex: "1", "min-width": "0", "min-height": "0", overflow: "hidden" }
|
|
120
|
+
}, [
|
|
121
|
+
h.headerLayout === "overlay" ? (u(), v("div", {
|
|
122
|
+
key: 0,
|
|
123
|
+
ref_key: "topOverlayRef",
|
|
124
|
+
ref: A,
|
|
125
|
+
"data-chart-top-overlay": "",
|
|
126
|
+
style: { position: "absolute", top: "0", left: "0", right: "0", "z-index": "2", "pointer-events": "none", display: "flex", "flex-direction": "column" }
|
|
127
|
+
}, [
|
|
128
|
+
o("div", {
|
|
129
|
+
ref_key: "titleAnchor",
|
|
130
|
+
ref: g,
|
|
131
|
+
"data-chart-title-anchor": ""
|
|
132
|
+
}, null, 512),
|
|
133
|
+
o("div", {
|
|
134
|
+
ref_key: "infoBarAnchor",
|
|
135
|
+
ref: y,
|
|
136
|
+
"data-tooltip-legend-anchor": ""
|
|
137
|
+
}, null, 512)
|
|
138
|
+
], 512)) : k("", !0),
|
|
139
|
+
i.value ? (u(), v("div", W, [
|
|
140
|
+
S(t.$slots, "default")
|
|
141
|
+
])) : k("", !0)
|
|
142
|
+
], 512)
|
|
143
|
+
]),
|
|
144
|
+
o("div", {
|
|
145
|
+
ref_key: "legendRightAnchor",
|
|
146
|
+
ref: _,
|
|
147
|
+
"data-legend-right-anchor": "",
|
|
148
|
+
style: { flex: "0 0 auto" }
|
|
149
|
+
}, null, 512)
|
|
150
|
+
]),
|
|
151
|
+
o("div", {
|
|
152
|
+
ref_key: "legendAnchor",
|
|
153
|
+
ref: w,
|
|
154
|
+
"data-legend-anchor": "",
|
|
155
|
+
style: { flex: "0 0 auto" }
|
|
156
|
+
}, null, 512),
|
|
157
|
+
o("div", {
|
|
158
|
+
ref_key: "navigatorAnchor",
|
|
159
|
+
ref: R,
|
|
160
|
+
"data-navigator-anchor": "",
|
|
161
|
+
style: { flex: "0 0 auto" }
|
|
162
|
+
}, null, 512)
|
|
163
|
+
], 4));
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
export {
|
|
167
|
+
ne as default
|
|
168
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { defineComponent as p, ref as d, onMounted as c, onUnmounted as l, watch as i, createCommentVNode as m } from "vue";
|
|
2
|
+
import { toLayers as f, EMPTY_SYNC_STATE as v, syncLayers as y } from "./core/dist/data/sync.js";
|
|
3
|
+
import { LineSeriesDef as S } from "./core/dist/series/line.js";
|
|
4
|
+
import { useChartInstance as _ } from "./context.js";
|
|
5
|
+
const A = /* @__PURE__ */ p({
|
|
6
|
+
__name: "LineSeries",
|
|
7
|
+
props: {
|
|
8
|
+
data: {},
|
|
9
|
+
options: {},
|
|
10
|
+
id: {}
|
|
11
|
+
},
|
|
12
|
+
setup(u) {
|
|
13
|
+
const a = u, n = _(), r = d(null);
|
|
14
|
+
let o = [];
|
|
15
|
+
function s(e, t) {
|
|
16
|
+
o = y({ chart: n, id: e, data: t, prev: o });
|
|
17
|
+
}
|
|
18
|
+
return c(() => {
|
|
19
|
+
const e = f(a.data).length, t = n.addSeries(S, {
|
|
20
|
+
...a.options,
|
|
21
|
+
layers: e,
|
|
22
|
+
id: a.id
|
|
23
|
+
});
|
|
24
|
+
r.value = t, o = new Array(e).fill(v), s(t, a.data);
|
|
25
|
+
}), l(() => {
|
|
26
|
+
r.value && n.removeSeries(r.value);
|
|
27
|
+
}), i(
|
|
28
|
+
() => a.data,
|
|
29
|
+
(e) => {
|
|
30
|
+
const t = r.value;
|
|
31
|
+
t && s(t, e);
|
|
32
|
+
}
|
|
33
|
+
), i(
|
|
34
|
+
() => a.options,
|
|
35
|
+
(e) => {
|
|
36
|
+
r.value && e && n.updateSeriesOptions(r.value, e);
|
|
37
|
+
},
|
|
38
|
+
{ deep: !0 }
|
|
39
|
+
), (e, t) => m("", !0);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
export {
|
|
43
|
+
A as default
|
|
44
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { defineComponent as i, ref as n, onMounted as u, onUnmounted as d, watch as r, createCommentVNode as p } from "vue";
|
|
2
|
+
import { PieSeriesDef as m } from "./core/dist/series/pie.js";
|
|
3
|
+
import { useChartInstance as c } from "./context.js";
|
|
4
|
+
const h = /* @__PURE__ */ i({
|
|
5
|
+
__name: "PieSeries",
|
|
6
|
+
props: {
|
|
7
|
+
data: {},
|
|
8
|
+
options: {},
|
|
9
|
+
id: {}
|
|
10
|
+
},
|
|
11
|
+
setup(s) {
|
|
12
|
+
const a = s, o = c(), t = n(null);
|
|
13
|
+
return u(() => {
|
|
14
|
+
const e = o.addSeries(m, { ...a.options, id: a.id });
|
|
15
|
+
t.value = e, a.data.length > 0 && o.setSeriesData(e, a.data);
|
|
16
|
+
}), d(() => {
|
|
17
|
+
t.value && o.removeSeries(t.value);
|
|
18
|
+
}), r(
|
|
19
|
+
() => a.data,
|
|
20
|
+
(e) => {
|
|
21
|
+
t.value && e.length > 0 && o.setSeriesData(t.value, e);
|
|
22
|
+
}
|
|
23
|
+
), r(
|
|
24
|
+
() => a.options,
|
|
25
|
+
(e) => {
|
|
26
|
+
t.value && e && o.updateSeriesOptions(t.value, e);
|
|
27
|
+
},
|
|
28
|
+
{ deep: !0 }
|
|
29
|
+
), (e, f) => p("", !0);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
export {
|
|
33
|
+
h as default
|
|
34
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ref as a, onMounted as u, onUnmounted as i } from "vue";
|
|
2
|
+
function f(e) {
|
|
3
|
+
const o = a(e.getVisibleRange()), n = () => {
|
|
4
|
+
o.value = e.getVisibleRange();
|
|
5
|
+
};
|
|
6
|
+
return u(() => e.on("viewportChange", n)), i(() => e.off("viewportChange", n)), o;
|
|
7
|
+
}
|
|
8
|
+
function p(e) {
|
|
9
|
+
const o = a(e.getYRange()), n = () => {
|
|
10
|
+
o.value = e.getYRange();
|
|
11
|
+
};
|
|
12
|
+
return u(() => e.on("viewportChange", n)), i(() => e.off("viewportChange", n)), o;
|
|
13
|
+
}
|
|
14
|
+
function d(e, o) {
|
|
15
|
+
let n = e.getLastValue(o), t = n ? e.yScale.valueToY(n.value) : null;
|
|
16
|
+
const v = a(n), l = () => {
|
|
17
|
+
const s = e.getLastValue(o), g = s ? e.yScale.valueToY(s.value) : null;
|
|
18
|
+
n?.value === s?.value && n?.isLive === s?.isLive && t === g || (n = s, t = g, v.value = s);
|
|
19
|
+
};
|
|
20
|
+
return u(() => {
|
|
21
|
+
e.on("dataUpdate", l), e.on("viewportChange", l);
|
|
22
|
+
}), i(() => {
|
|
23
|
+
e.off("dataUpdate", l), e.off("viewportChange", l);
|
|
24
|
+
}), v;
|
|
25
|
+
}
|
|
26
|
+
function C(e, o) {
|
|
27
|
+
const n = a(e.getPreviousClose(o)), t = () => {
|
|
28
|
+
n.value = e.getPreviousClose(o);
|
|
29
|
+
};
|
|
30
|
+
return u(() => e.on("dataUpdate", t)), i(() => e.off("dataUpdate", t)), n;
|
|
31
|
+
}
|
|
32
|
+
function Y(e) {
|
|
33
|
+
const o = a(e.getCrosshairPosition()), n = () => {
|
|
34
|
+
o.value = e.getCrosshairPosition();
|
|
35
|
+
};
|
|
36
|
+
return u(() => e.on("crosshairMove", n)), i(() => e.off("crosshairMove", n)), o;
|
|
37
|
+
}
|
|
38
|
+
export {
|
|
39
|
+
Y as useCrosshairPosition,
|
|
40
|
+
d as useLastYValue,
|
|
41
|
+
C as usePreviousClose,
|
|
42
|
+
f as useVisibleRange,
|
|
43
|
+
p as useYRange
|
|
44
|
+
};
|
package/dist/context.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { inject as n } from "vue";
|
|
2
|
+
const t = Symbol("wick-chart"), o = Symbol("wick-theme"), c = Symbol("wick-title-anchor"), h = Symbol("wick-info-bar-anchor"), i = Symbol("wick-legend-anchor"), a = Symbol("wick-legend-right-anchor"), s = Symbol("wick-navigator-anchor");
|
|
3
|
+
function m() {
|
|
4
|
+
const e = n(t);
|
|
5
|
+
if (!e || !e.value)
|
|
6
|
+
throw new Error("useChartInstance must be used within <ChartContainer>");
|
|
7
|
+
return e.value;
|
|
8
|
+
}
|
|
9
|
+
function u() {
|
|
10
|
+
const e = n(o);
|
|
11
|
+
if (!e)
|
|
12
|
+
throw new Error("useTheme must be used within <ChartContainer>");
|
|
13
|
+
return e;
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
t as ChartKey,
|
|
17
|
+
h as InfoBarAnchorKey,
|
|
18
|
+
i as LegendAnchorKey,
|
|
19
|
+
a as LegendRightAnchorKey,
|
|
20
|
+
s as NavigatorAnchorKey,
|
|
21
|
+
o as ThemeKey,
|
|
22
|
+
c as TitleAnchorKey,
|
|
23
|
+
m as useChartInstance,
|
|
24
|
+
u as useTheme
|
|
25
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { easeOutCubic as r } from "./easing.js";
|
|
2
|
+
class a {
|
|
3
|
+
#t;
|
|
4
|
+
#h;
|
|
5
|
+
#i;
|
|
6
|
+
#u = 0;
|
|
7
|
+
#r;
|
|
8
|
+
#e;
|
|
9
|
+
#o;
|
|
10
|
+
#n;
|
|
11
|
+
#c;
|
|
12
|
+
#a;
|
|
13
|
+
#s = !1;
|
|
14
|
+
constructor(t) {
|
|
15
|
+
this.#t = t.initial, this.#h = t.initial, this.#i = t.initial, this.#o = t.duration, this.#r = t.duration, this.#n = t.easing ?? r, this.#e = this.#n, this.#c = t.lerp, this.#a = t.equals ?? Object.is;
|
|
16
|
+
}
|
|
17
|
+
get current() {
|
|
18
|
+
return this.#t;
|
|
19
|
+
}
|
|
20
|
+
get target() {
|
|
21
|
+
return this.#i;
|
|
22
|
+
}
|
|
23
|
+
get animating() {
|
|
24
|
+
return this.#s;
|
|
25
|
+
}
|
|
26
|
+
/** Replace the target instantly; cancels any in-flight animation. */
|
|
27
|
+
snap(t) {
|
|
28
|
+
this.#t = t, this.#h = t, this.#i = t, this.#s = !1;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Set a new target. If `opts.duration` is omitted, the animator's default
|
|
32
|
+
* is used. `duration <= 0` is equivalent to {@link snap}.
|
|
33
|
+
*
|
|
34
|
+
* Pass `opts.now` to make the animation's start time agree with the host's
|
|
35
|
+
* render loop or event timestamp; defaults to `performance.now()`. This
|
|
36
|
+
* matters when the caller already has a frame timestamp in hand — without
|
|
37
|
+
* it, `setTarget` and the next `tick(rafNow)` would disagree by however many
|
|
38
|
+
* milliseconds passed between the call and the RAF callback firing.
|
|
39
|
+
*
|
|
40
|
+
* Mid-flight retarget preserves visual continuity: the animator first
|
|
41
|
+
* advances `current` to its position at the supplied `now`, then assigns
|
|
42
|
+
* that as the new `from` and starts a fresh ease toward `value`. Because
|
|
43
|
+
* `from` is the actual current position, the cubic ease resumes seamlessly
|
|
44
|
+
* even though the curve technically restarts.
|
|
45
|
+
*/
|
|
46
|
+
setTarget(t, i = {}) {
|
|
47
|
+
const s = i.now ?? performance.now();
|
|
48
|
+
if (this.#s) {
|
|
49
|
+
if (this.#a(t, this.#i)) return;
|
|
50
|
+
this.tick(s);
|
|
51
|
+
} else if (this.#a(t, this.#t))
|
|
52
|
+
return;
|
|
53
|
+
const h = i.duration ?? this.#o;
|
|
54
|
+
if (h <= 0) {
|
|
55
|
+
this.snap(t);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
this.#h = this.#t, this.#i = t, this.#r = h, this.#e = i.easing ?? this.#n, this.#u = s, this.#s = !0;
|
|
59
|
+
}
|
|
60
|
+
/** Advance `current` toward `target`. Returns `true` while still animating. */
|
|
61
|
+
tick(t) {
|
|
62
|
+
if (!this.#s) return !1;
|
|
63
|
+
const i = t - this.#u;
|
|
64
|
+
if (i >= this.#r)
|
|
65
|
+
return this.#t = this.#i, this.#s = !1, !1;
|
|
66
|
+
const s = i <= 0 ? 0 : i / this.#r;
|
|
67
|
+
return this.#t = this.#c(this.#h, this.#i, this.#e(s)), !0;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
export {
|
|
71
|
+
a as Animator
|
|
72
|
+
};
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { spring as k } from "./spring.js";
|
|
2
|
+
import { resolveAnimationTime as t } from "./time.js";
|
|
3
|
+
import { hermite as F } from "./y-range-hermite.js";
|
|
4
|
+
import { snap as l } from "./y-range-snap.js";
|
|
5
|
+
const E = 250, _ = 250, S = E, U = _, D = 600, d = E, g = _, v = E, I = _, N = 250, Y = 250, x = 200, C = 150, R = 250, u = 2500, T = 500, O = 100, b = 250, K = 250, m = {
|
|
6
|
+
line: { entryMs: 0, smoothMs: 0, pulseMs: 0 },
|
|
7
|
+
candlestick: { entryMs: 0, smoothMs: 0 },
|
|
8
|
+
bar: { entryMs: 0, smoothMs: 0 },
|
|
9
|
+
pie: { entryMs: 0, updateMs: 0 }
|
|
10
|
+
};
|
|
11
|
+
function G(i) {
|
|
12
|
+
if (i !== null && typeof i == "object")
|
|
13
|
+
return {
|
|
14
|
+
stickyMs: t(i.max, u),
|
|
15
|
+
stickyFloorMs: t(i.min, T)
|
|
16
|
+
};
|
|
17
|
+
if (i === void 0)
|
|
18
|
+
return { stickyMs: u, stickyFloorMs: T };
|
|
19
|
+
const s = t(i, u);
|
|
20
|
+
return { stickyMs: s, stickyFloorMs: s };
|
|
21
|
+
}
|
|
22
|
+
class y {
|
|
23
|
+
axis;
|
|
24
|
+
toggleMs;
|
|
25
|
+
series;
|
|
26
|
+
constructor(s, e, o) {
|
|
27
|
+
this.axis = s, this.toggleMs = e, this.series = o;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Collapse the public `animations` surface into a resolved config.
|
|
31
|
+
* `animations: false` disables everything; category-level `false`
|
|
32
|
+
* disables every field in that category; otherwise missing fields
|
|
33
|
+
* inherit built-in defaults.
|
|
34
|
+
*/
|
|
35
|
+
static resolve(s) {
|
|
36
|
+
if (s === !1)
|
|
37
|
+
return new y(
|
|
38
|
+
{
|
|
39
|
+
y: { curve: l(), settleMs: 0, stickyMs: 0, stickyFloorMs: 0, gestureMs: 0 },
|
|
40
|
+
x: { curve: l(), settleMs: 0, gestureMs: 0 },
|
|
41
|
+
ticksMs: 0
|
|
42
|
+
},
|
|
43
|
+
0,
|
|
44
|
+
m
|
|
45
|
+
);
|
|
46
|
+
const e = s === !0 || s === void 0 ? void 0 : s, o = e?.axis, r = o === !1 ? !1 : o?.y, n = o === !1 ? !1 : o?.x, M = o === !1 ? !1 : o?.ticks, a = e?.toggle, c = e?.series, f = r === !1 ? {
|
|
47
|
+
curve: l(),
|
|
48
|
+
settleMs: 0,
|
|
49
|
+
stickyMs: 0,
|
|
50
|
+
stickyFloorMs: 0,
|
|
51
|
+
gestureMs: 0
|
|
52
|
+
} : {
|
|
53
|
+
curve: r?.curve ?? F(),
|
|
54
|
+
settleMs: t(r?.settle, R),
|
|
55
|
+
...G(r?.sticky),
|
|
56
|
+
gestureMs: t(r?.gesture, O)
|
|
57
|
+
}, h = n === !1 ? {
|
|
58
|
+
curve: l(),
|
|
59
|
+
settleMs: 0,
|
|
60
|
+
gestureMs: 0
|
|
61
|
+
} : {
|
|
62
|
+
curve: n?.curve ?? k(),
|
|
63
|
+
settleMs: t(n?.settle, x),
|
|
64
|
+
gestureMs: t(n?.gesture, C)
|
|
65
|
+
}, p = M === !1 ? 0 : t(M, K), L = t(a, b), A = P(c);
|
|
66
|
+
return new y({ y: f, x: h, ticksMs: p }, L, A);
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Per-renderer-type chart-level option payload — merged BEFORE user
|
|
70
|
+
* series options so explicit per-series options always win. Forwards
|
|
71
|
+
* the resolved `entryMs` / `smoothMs` / `pulseMs` straight into the
|
|
72
|
+
* renderer's option shape. `pulseMs` is line-only; bars / candles
|
|
73
|
+
* ignore it.
|
|
74
|
+
*/
|
|
75
|
+
defaults(s) {
|
|
76
|
+
if (s === "line") {
|
|
77
|
+
const { entryMs: r, smoothMs: n, pulseMs: M } = this.series.line;
|
|
78
|
+
return { entryMs: r, smoothMs: n, pulseMs: M };
|
|
79
|
+
}
|
|
80
|
+
if (s === "candlestick") {
|
|
81
|
+
const { entryMs: r, smoothMs: n } = this.series.candlestick;
|
|
82
|
+
return { entryMs: r, smoothMs: n };
|
|
83
|
+
}
|
|
84
|
+
if (s === "pie") {
|
|
85
|
+
const { entryMs: r, updateMs: n } = this.series.pie;
|
|
86
|
+
return { entryMs: r, updateMs: n };
|
|
87
|
+
}
|
|
88
|
+
const { entryMs: e, smoothMs: o } = this.series.bar;
|
|
89
|
+
return { entryMs: e, smoothMs: o };
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Chart-level forced overrides — `animations.series.<type>: false` (or
|
|
93
|
+
* any category set to `false`) is documented as a hard disable. Merged
|
|
94
|
+
* AFTER user options so the disable can't be undone at the per-series
|
|
95
|
+
* layer.
|
|
96
|
+
*/
|
|
97
|
+
overrides(s) {
|
|
98
|
+
const e = {};
|
|
99
|
+
if (s === "line") {
|
|
100
|
+
const { entryMs: n, smoothMs: M, pulseMs: a } = this.series.line;
|
|
101
|
+
return n === 0 && (e.entryMs = 0), M === 0 && (e.smoothMs = 0), a === 0 && (e.pulseMs = 0), e;
|
|
102
|
+
}
|
|
103
|
+
if (s === "pie") return e;
|
|
104
|
+
const { entryMs: o, smoothMs: r } = s === "candlestick" ? this.series.candlestick : this.series.bar;
|
|
105
|
+
return o === 0 && (e.entryMs = 0), r === 0 && (e.smoothMs = 0), e;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
function P(i) {
|
|
109
|
+
if (i === !1) return m;
|
|
110
|
+
const s = i?.line, e = i?.candlestick, o = i?.bar, r = i?.pie, n = s === !1 ? { entryMs: 0, smoothMs: 0, pulseMs: 0 } : {
|
|
111
|
+
entryMs: t(s?.entry, S),
|
|
112
|
+
smoothMs: t(s?.smooth, U),
|
|
113
|
+
pulseMs: t(s?.pulse, D)
|
|
114
|
+
}, M = e === !1 ? { entryMs: 0, smoothMs: 0 } : {
|
|
115
|
+
entryMs: t(e?.entry, d),
|
|
116
|
+
smoothMs: t(e?.smooth, g)
|
|
117
|
+
}, a = o === !1 ? { entryMs: 0, smoothMs: 0 } : {
|
|
118
|
+
entryMs: t(o?.entry, v),
|
|
119
|
+
smoothMs: t(o?.smooth, I)
|
|
120
|
+
}, c = r === !1 ? { entryMs: 0, updateMs: 0 } : {
|
|
121
|
+
entryMs: t(r?.entry, N),
|
|
122
|
+
updateMs: t(r?.update, Y)
|
|
123
|
+
};
|
|
124
|
+
return { line: n, candlestick: M, bar: a, pie: c };
|
|
125
|
+
}
|
|
126
|
+
export {
|
|
127
|
+
y as AnimationConfig,
|
|
128
|
+
v as DEFAULT_BAR_ENTRY,
|
|
129
|
+
I as DEFAULT_BAR_SMOOTH,
|
|
130
|
+
d as DEFAULT_CANDLESTICK_ENTRY,
|
|
131
|
+
g as DEFAULT_CANDLESTICK_SMOOTH,
|
|
132
|
+
S as DEFAULT_LINE_ENTRY,
|
|
133
|
+
D as DEFAULT_LINE_PULSE,
|
|
134
|
+
U as DEFAULT_LINE_SMOOTH,
|
|
135
|
+
N as DEFAULT_PIE_ENTRY,
|
|
136
|
+
Y as DEFAULT_PIE_UPDATE,
|
|
137
|
+
K as DEFAULT_TICKS_MS,
|
|
138
|
+
b as DEFAULT_TOGGLE_MS,
|
|
139
|
+
C as DEFAULT_X_GESTURE_MS,
|
|
140
|
+
x as DEFAULT_X_SETTLE_MS,
|
|
141
|
+
O as DEFAULT_Y_GESTURE_MS,
|
|
142
|
+
R as DEFAULT_Y_SETTLE_MS,
|
|
143
|
+
u as DEFAULT_Y_STICKY_MAX_MS,
|
|
144
|
+
T as DEFAULT_Y_STICKY_MIN_MS
|
|
145
|
+
};
|