@wick-charts/vue 0.5.1 → 0.6.1
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 +45 -6
- package/dist/BarSeries.vue.js +26 -20
- package/dist/CandlestickSeries.vue.js +30 -24
- package/dist/ChartContainer.vue.js +125 -72
- package/dist/HeatmapSeries.vue.js +40 -0
- package/dist/HeatmapSeries.vue2.js +4 -0
- package/dist/LineSeries.vue.js +26 -20
- package/dist/PieSeries.vue.js +24 -18
- package/dist/core/dist/animation/animator.js +21 -21
- package/dist/core/dist/animation/config.js +114 -87
- package/dist/core/dist/animation/easing.js +3 -1
- package/dist/core/dist/animation/intro-wave.js +68 -0
- package/dist/core/dist/axis/dom-labels.js +13 -14
- package/dist/core/dist/chart/badge-animator.js +56 -0
- package/dist/core/dist/chart/edge-indicators.js +28 -13
- package/dist/core/dist/chart/last-value.js +18 -17
- package/dist/core/dist/chart/options.js +27 -16
- package/dist/core/dist/chart/y-target.js +13 -12
- package/dist/core/dist/chart.js +868 -441
- package/dist/core/dist/components/annotation-chip.js +28 -0
- package/dist/core/dist/components/crosshair.js +8 -6
- package/dist/core/dist/components/edge-indicator.js +58 -26
- package/dist/core/dist/components/loading-indicator.js +46 -0
- package/dist/core/dist/components/marker.js +49 -31
- package/dist/core/dist/components/reference-line.js +27 -36
- package/dist/core/dist/components/time-region.js +30 -28
- package/dist/core/dist/data/store.js +38 -19
- package/dist/core/dist/data/sync.js +60 -38
- package/dist/core/dist/heatmap-tooltip.js +16 -0
- package/dist/core/dist/interactions/handler.js +86 -46
- package/dist/core/dist/perf/perf-hud.js +5 -5
- package/dist/core/dist/scales/x-scale.js +85 -37
- package/dist/core/dist/scales/y-scale.js +38 -27
- package/dist/core/dist/series/bar-intro.js +18 -0
- package/dist/core/dist/series/bar.js +337 -205
- package/dist/core/dist/series/base-multi-layer.js +224 -96
- package/dist/core/dist/series/candlestick-intro.js +57 -0
- package/dist/core/dist/series/candlestick.js +454 -276
- package/dist/core/dist/series/heatmap.js +387 -0
- package/dist/core/dist/series/line-intro.js +85 -0
- package/dist/core/dist/series/line.js +590 -282
- package/dist/core/dist/series/painters/builtins.js +2 -2
- package/dist/core/dist/series/pie.js +396 -259
- package/dist/core/dist/series/register-builtins.js +8 -7
- package/dist/core/dist/series/types.js +6 -0
- package/dist/core/dist/series/wave-intro.js +26 -0
- package/dist/core/dist/theme/create.js +69 -63
- package/dist/core/dist/theme/themes/mint-breeze.js +2 -2
- package/dist/core/dist/theme/themes/sand-dune.js +2 -2
- package/dist/core/dist/utils/color.js +109 -34
- package/dist/core/dist/utils/deep-equal.js +18 -0
- package/dist/core/dist/utils/time.js +25 -19
- package/dist/index.d.ts +1494 -122
- package/dist/index.js +177 -130
- package/dist/ui/Crosshair.vue.js +20 -21
- package/dist/ui/HeatmapTooltip.vue.js +96 -0
- package/dist/ui/HeatmapTooltip.vue2.js +4 -0
- package/dist/ui/InfoBar.vue.js +46 -47
- package/dist/ui/Legend.vue.js +80 -79
- package/dist/ui/PieLegend.vue.js +5 -5
- package/dist/ui/PieTooltip.vue.js +77 -67
- package/dist/ui/Tooltip.vue.js +60 -60
- package/dist/ui/YAxis.vue.js +2 -2
- package/dist/ui/YLabel.vue.js +94 -61
- package/package.json +2 -2
- package/src/BarSeries.vue +23 -7
- package/src/CandlestickSeries.vue +23 -7
- package/src/ChartContainer.vue +250 -13
- package/src/HeatmapSeries.vue +69 -0
- package/src/LineSeries.vue +23 -7
- package/src/PieSeries.vue +22 -6
- package/src/index.ts +84 -3
- package/src/ui/Crosshair.vue +1 -2
- package/src/ui/HeatmapTooltip.vue +144 -0
- package/src/ui/InfoBar.vue +1 -2
- package/src/ui/Legend.vue +13 -0
- package/src/ui/Marker.vue +1 -1
- package/src/ui/PieTooltip.vue +10 -0
- package/src/ui/ReferenceLine.vue +2 -2
- package/src/ui/TimeRegion.vue +2 -2
- package/src/ui/Tooltip.vue +2 -2
- package/src/ui/YLabel.vue +123 -8
package/dist/index.js
CHANGED
|
@@ -1,144 +1,191 @@
|
|
|
1
1
|
import { default as o } from "./BarSeries.vue.js";
|
|
2
2
|
import { default as a } from "./CandlestickSeries.vue.js";
|
|
3
|
-
import { default as
|
|
4
|
-
import { useCrosshairPosition as
|
|
5
|
-
import { useChartInstance as
|
|
6
|
-
import { default as
|
|
3
|
+
import { default as m } from "./ChartContainer.vue.js";
|
|
4
|
+
import { useCrosshairPosition as i, useLastYValue as s, usePreviousClose as x, useVisibleRange as n, useYRange as l } from "./composables.js";
|
|
5
|
+
import { useChartInstance as u, useTheme as c } from "./context.js";
|
|
6
|
+
import { default as h } from "./HeatmapSeries.vue.js";
|
|
7
|
+
import { default as I } from "./LineSeries.vue.js";
|
|
7
8
|
import { default as P } from "./PieSeries.vue.js";
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
9
|
+
import { default as T } from "./ui/Crosshair.vue.js";
|
|
10
|
+
import { default as k } from "./ui/HeatmapTooltip.vue.js";
|
|
11
|
+
import { default as w } from "./ui/InfoBar.vue.js";
|
|
10
12
|
import { default as b } from "./ui/Legend.vue.js";
|
|
11
|
-
import { default as
|
|
12
|
-
import { default as
|
|
13
|
+
import { default as A } from "./ui/Marker.vue.js";
|
|
14
|
+
import { default as M } from "./ui/Navigator.vue.js";
|
|
13
15
|
import { default as z } from "./ui/NumberFlow.vue.js";
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
17
|
-
import { default as
|
|
18
|
-
import { default as
|
|
19
|
-
import { default as
|
|
20
|
-
import { default as
|
|
21
|
-
import { default as
|
|
22
|
-
import { default as
|
|
23
|
-
import { BarSeriesDef as
|
|
24
|
-
import { CandlestickSeriesDef as
|
|
25
|
-
import { ChartInstance as
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
16
|
+
import { default as y } from "./ui/PieLegend.vue.js";
|
|
17
|
+
import { default as q } from "./ui/PieTooltip.vue.js";
|
|
18
|
+
import { default as V } from "./ui/ReferenceLine.vue.js";
|
|
19
|
+
import { default as E, default as G } from "./ui/TimeAxis.vue.js";
|
|
20
|
+
import { default as j } from "./ui/TimeRegion.vue.js";
|
|
21
|
+
import { default as K } from "./ui/Title.vue.js";
|
|
22
|
+
import { default as W } from "./ui/Tooltip.vue.js";
|
|
23
|
+
import { default as _ } from "./ui/YAxis.vue.js";
|
|
24
|
+
import { default as ee } from "./ui/YLabel.vue.js";
|
|
25
|
+
import { BarSeriesDef as oe } from "./core/dist/series/bar.js";
|
|
26
|
+
import { CandlestickSeriesDef as ae } from "./core/dist/series/candlestick.js";
|
|
27
|
+
import { ChartInstance as me } from "./core/dist/chart.js";
|
|
28
|
+
import { HeatmapSeriesDef as ie } from "./core/dist/series/heatmap.js";
|
|
29
|
+
import { LineSeriesDef as xe } from "./core/dist/series/line.js";
|
|
30
|
+
import { NavigatorController as le } from "./core/dist/navigator/controller.js";
|
|
31
|
+
import { PerfMonitor as ue } from "./core/dist/perf/perf-monitor.js";
|
|
32
|
+
import { PieSeriesDef as ge } from "./core/dist/series/pie.js";
|
|
33
|
+
import { XScale as Ce } from "./core/dist/scales/x-scale.js";
|
|
34
|
+
import { YScale as Se } from "./core/dist/scales/y-scale.js";
|
|
35
|
+
import { andromeda as ve } from "./core/dist/theme/themes/andromeda.js";
|
|
36
|
+
import { autoGradient as Le, createTheme as ke, isDarkBg as De } from "./core/dist/theme/create.js";
|
|
37
|
+
import { ayuMirage as Be } from "./core/dist/theme/themes/ayu-mirage.js";
|
|
38
|
+
import { backfillSweepIntro as Re, centerOutIntro as Ae, plotterIntro as He, sweepIntro as Me, traceIntro as Ye, unfoldIntro as ze } from "./core/dist/series/line-intro.js";
|
|
39
|
+
import { buildHoverSnapshots as ye, buildLastSnapshots as Ne } from "./core/dist/snapshots.js";
|
|
40
|
+
import { candleUnfoldIntro as Oe, skeletonMorphIntro as Ve, wickBodyIntro as Xe } from "./core/dist/series/candlestick-intro.js";
|
|
41
|
+
import { catppuccin as Ge } from "./core/dist/theme/themes/catppuccin.js";
|
|
42
|
+
import { computeTooltipPosition as je } from "./core/dist/tooltip-position.js";
|
|
43
|
+
import { deepEqual as Ke } from "./core/dist/utils/deep-equal.js";
|
|
44
|
+
import { detectInterval as We, formatDate as Ze, formatTime as _e, normalizeTime as $e } from "./core/dist/utils/time.js";
|
|
45
|
+
import { dracula as rr } from "./core/dist/theme/themes/dracula.js";
|
|
46
|
+
import { fadeIntro as tr, riseIntro as ar, wipeIntro as fr } from "./core/dist/series/wave-intro.js";
|
|
47
|
+
import { fillRoundedRect as pr, tracePath as ir } from "./core/dist/series/painters/canvas-path.js";
|
|
48
|
+
import { formatCompact as xr, formatPriceAdaptive as nr } from "./core/dist/utils/format.js";
|
|
49
|
+
import { githubLight as dr } from "./core/dist/theme/themes/github-light.js";
|
|
50
|
+
import { growIntro as cr, springIntro as gr } from "./core/dist/series/bar-intro.js";
|
|
51
|
+
import { gruvbox as Cr } from "./core/dist/theme/themes/gruvbox.js";
|
|
52
|
+
import { handwritten as Sr } from "./core/dist/theme/themes/handwritten.js";
|
|
53
|
+
import { hermite as vr } from "./core/dist/animation/y-range-hermite.js";
|
|
54
|
+
import { highContrast as Lr } from "./core/dist/theme/themes/high-contrast.js";
|
|
55
|
+
import { isTimeSeriesRenderer as Dr } from "./core/dist/series/types.js";
|
|
56
|
+
import { lavenderMist as Br } from "./core/dist/theme/themes/lavender-mist.js";
|
|
57
|
+
import { lightPink as Rr } from "./core/dist/theme/themes/light-pink.js";
|
|
58
|
+
import { materialPalenight as Hr } from "./core/dist/theme/themes/material-palenight.js";
|
|
59
|
+
import { minimalLight as Yr } from "./core/dist/theme/themes/minimal-light.js";
|
|
60
|
+
import { mintBreeze as Fr } from "./core/dist/theme/themes/mint-breeze.js";
|
|
61
|
+
import { mixColors as Nr, sampleRamp as qr } from "./core/dist/utils/color.js";
|
|
62
|
+
import { monokaiPro as Vr } from "./core/dist/theme/themes/monokai-pro.js";
|
|
63
|
+
import { nightOwl as Er } from "./core/dist/theme/themes/night-owl.js";
|
|
64
|
+
import { oneDarkPro as Ur } from "./core/dist/theme/themes/one-dark-pro.js";
|
|
65
|
+
import { panda as Jr } from "./core/dist/theme/themes/panda.js";
|
|
66
|
+
import { parseAnimationTime as Qr } from "./core/dist/animation/time.js";
|
|
67
|
+
import { peachCream as Zr } from "./core/dist/theme/themes/peach-cream.js";
|
|
68
|
+
import { perfHud as $r } from "./core/dist/perf/perf-hud.js";
|
|
69
|
+
import { quietLight as ro } from "./core/dist/theme/themes/quiet-light.js";
|
|
70
|
+
import { registerBuiltinSeries as to } from "./core/dist/series/register-builtins.js";
|
|
71
|
+
import { registerSeriesDefinition as fo } from "./core/dist/series/definition.js";
|
|
72
|
+
import { resolveAxisFontSize as po, resolveAxisTextColor as io, resolveCandlestickBodyColor as so } from "./core/dist/theme/resolve.js";
|
|
73
|
+
import { rosePineDawn as no } from "./core/dist/theme/themes/rose-pine-dawn.js";
|
|
74
|
+
import { roundedBarFill as uo, roundedCandleFill as co, smoothCurve as go, steppedCurve as ho, straightCurve as Co } from "./core/dist/series/painters/builtins.js";
|
|
75
|
+
import { sandDune as So } from "./core/dist/theme/themes/sand-dune.js";
|
|
76
|
+
import { skeletonLoadingIndicator as vo } from "./core/dist/components/loading-indicator.js";
|
|
77
|
+
import { snap as Lo } from "./core/dist/animation/y-range-snap.js";
|
|
78
|
+
import { solarizedLight as Do } from "./core/dist/theme/themes/solarized-light.js";
|
|
79
|
+
import { spring as Bo } from "./core/dist/animation/spring.js";
|
|
63
80
|
export {
|
|
64
81
|
o as BarSeries,
|
|
65
|
-
|
|
82
|
+
oe as BarSeriesDef,
|
|
66
83
|
a as CandlestickSeries,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
84
|
+
ae as CandlestickSeriesDef,
|
|
85
|
+
m as ChartContainer,
|
|
86
|
+
me as ChartInstance,
|
|
87
|
+
T as Crosshair,
|
|
88
|
+
h as HeatmapSeries,
|
|
89
|
+
ie as HeatmapSeriesDef,
|
|
90
|
+
k as HeatmapTooltip,
|
|
91
|
+
w as InfoBar,
|
|
72
92
|
b as Legend,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
93
|
+
I as LineSeries,
|
|
94
|
+
xe as LineSeriesDef,
|
|
95
|
+
A as Marker,
|
|
96
|
+
M as Navigator,
|
|
97
|
+
le as NavigatorController,
|
|
78
98
|
z as NumberFlow,
|
|
79
|
-
|
|
80
|
-
|
|
99
|
+
ue as PerfMonitor,
|
|
100
|
+
y as PieLegend,
|
|
81
101
|
P as PieSeries,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
_e as
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
102
|
+
ge as PieSeriesDef,
|
|
103
|
+
q as PieTooltip,
|
|
104
|
+
V as ReferenceLine,
|
|
105
|
+
E as TimeAxis,
|
|
106
|
+
j as TimeRegion,
|
|
107
|
+
K as Title,
|
|
108
|
+
W as Tooltip,
|
|
109
|
+
G as XAxis,
|
|
110
|
+
Ce as XScale,
|
|
111
|
+
_ as YAxis,
|
|
112
|
+
ee as YLabel,
|
|
113
|
+
Se as YScale,
|
|
114
|
+
ve as andromeda,
|
|
115
|
+
Le as autoGradient,
|
|
116
|
+
Be as ayuMirage,
|
|
117
|
+
Re as backfillSweepIntro,
|
|
118
|
+
ye as buildHoverSnapshots,
|
|
119
|
+
Ne as buildLastSnapshots,
|
|
120
|
+
Oe as candleUnfoldIntro,
|
|
121
|
+
Ge as catppuccin,
|
|
122
|
+
Ae as centerOutIntro,
|
|
123
|
+
je as computeTooltipPosition,
|
|
124
|
+
ke as createTheme,
|
|
125
|
+
Ke as deepEqual,
|
|
126
|
+
We as detectInterval,
|
|
127
|
+
rr as dracula,
|
|
128
|
+
tr as fadeIntro,
|
|
129
|
+
pr as fillRoundedRect,
|
|
130
|
+
xr as formatCompact,
|
|
131
|
+
Ze as formatDate,
|
|
132
|
+
nr as formatPriceAdaptive,
|
|
133
|
+
_e as formatTime,
|
|
134
|
+
dr as githubLight,
|
|
135
|
+
cr as growIntro,
|
|
136
|
+
Cr as gruvbox,
|
|
137
|
+
Sr as handwritten,
|
|
138
|
+
vr as hermite,
|
|
139
|
+
Lr as highContrast,
|
|
140
|
+
De as isDarkBg,
|
|
141
|
+
Dr as isTimeSeriesRenderer,
|
|
142
|
+
Br as lavenderMist,
|
|
143
|
+
Rr as lightPink,
|
|
144
|
+
Hr as materialPalenight,
|
|
145
|
+
Yr as minimalLight,
|
|
146
|
+
Fr as mintBreeze,
|
|
147
|
+
Nr as mixColors,
|
|
148
|
+
Vr as monokaiPro,
|
|
149
|
+
Er as nightOwl,
|
|
150
|
+
$e as normalizeTime,
|
|
151
|
+
Ur as oneDarkPro,
|
|
152
|
+
Jr as panda,
|
|
153
|
+
Qr as parseAnimationTime,
|
|
154
|
+
Zr as peachCream,
|
|
155
|
+
$r as perfHud,
|
|
156
|
+
He as plotterIntro,
|
|
157
|
+
ro as quietLight,
|
|
158
|
+
to as registerBuiltinSeries,
|
|
159
|
+
fo as registerSeriesDefinition,
|
|
160
|
+
po as resolveAxisFontSize,
|
|
161
|
+
io as resolveAxisTextColor,
|
|
162
|
+
so as resolveCandlestickBodyColor,
|
|
163
|
+
ar as riseIntro,
|
|
164
|
+
no as rosePineDawn,
|
|
165
|
+
uo as roundedBarFill,
|
|
166
|
+
co as roundedCandleFill,
|
|
167
|
+
qr as sampleRamp,
|
|
168
|
+
So as sandDune,
|
|
169
|
+
vo as skeletonLoadingIndicator,
|
|
170
|
+
Ve as skeletonMorphIntro,
|
|
171
|
+
go as smoothCurve,
|
|
172
|
+
Lo as snap,
|
|
173
|
+
Do as solarizedLight,
|
|
174
|
+
Bo as spring,
|
|
175
|
+
gr as springIntro,
|
|
176
|
+
ho as steppedCurve,
|
|
177
|
+
Co as straightCurve,
|
|
178
|
+
Me as sweepIntro,
|
|
179
|
+
Ye as traceIntro,
|
|
180
|
+
ir as tracePath,
|
|
181
|
+
ze as unfoldIntro,
|
|
182
|
+
u as useChartInstance,
|
|
183
|
+
i as useCrosshairPosition,
|
|
139
184
|
s as useLastYValue,
|
|
140
185
|
x as usePreviousClose,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
186
|
+
c as useTheme,
|
|
187
|
+
n as useVisibleRange,
|
|
188
|
+
l as useYRange,
|
|
189
|
+
Xe as wickBodyIntro,
|
|
190
|
+
fr as wipeIntro
|
|
144
191
|
};
|
package/dist/ui/Crosshair.vue.js
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
import { defineComponent as v, ref as d, onMounted as f, onUnmounted as h, computed as n, unref as t, openBlock as y, createElementBlock as g, Fragment as x, createElementVNode as
|
|
2
|
-
import {
|
|
3
|
-
import { useCrosshairPosition as k } from "../composables.js";
|
|
1
|
+
import { defineComponent as v, ref as d, onMounted as f, onUnmounted as h, computed as n, unref as t, openBlock as y, createElementBlock as g, Fragment as x, createElementVNode as c, normalizeStyle as m, toDisplayString as u, createCommentVNode as b } from "vue";
|
|
2
|
+
import { useCrosshairPosition as C } from "../composables.js";
|
|
4
3
|
import { useChartInstance as S } from "../context.js";
|
|
5
|
-
const
|
|
4
|
+
const E = /* @__PURE__ */ v({
|
|
6
5
|
__name: "Crosshair",
|
|
7
|
-
setup(
|
|
8
|
-
const e = S(),
|
|
6
|
+
setup(k) {
|
|
7
|
+
const e = S(), a = C(e), r = d(0), l = () => {
|
|
9
8
|
r.value++;
|
|
10
9
|
};
|
|
11
10
|
f(() => e.on("overlayChange", l)), h(() => e.off("overlayChange", l));
|
|
12
|
-
const
|
|
11
|
+
const o = n(() => (r.value, e.getTheme())), i = n(() => e.getDataInterval()), p = n(() => (a.value, e.timeScale.niceTickValues(i.value).tickInterval || i.value)), s = n(() => ({
|
|
13
12
|
// Blend the theme's labelBackground at 80% opacity so the axis grid
|
|
14
13
|
// shows through — keeps the badge from looking like an opaque block
|
|
15
14
|
// while still masking whatever tick sits underneath.
|
|
16
|
-
background: `color-mix(in srgb, ${
|
|
17
|
-
color:
|
|
18
|
-
fontSize:
|
|
19
|
-
fontFamily:
|
|
15
|
+
background: `color-mix(in srgb, ${o.value.crosshair.labelBackground} 80%, transparent)`,
|
|
16
|
+
color: o.value.crosshair.labelTextColor,
|
|
17
|
+
fontSize: o.value.axis.fontSize + "px",
|
|
18
|
+
fontFamily: o.value.typography.fontFamily,
|
|
20
19
|
fontVariantNumeric: "tabular-nums",
|
|
21
20
|
padding: "2px 6px",
|
|
22
21
|
borderRadius: "2px",
|
|
@@ -26,28 +25,28 @@ const F = /* @__PURE__ */ v({
|
|
|
26
25
|
// live last-value stays visible when the crosshair crosses its row.
|
|
27
26
|
zIndex: 2
|
|
28
27
|
}));
|
|
29
|
-
return (
|
|
30
|
-
|
|
31
|
-
style:
|
|
28
|
+
return (_, I) => t(a) ? (y(), g(x, { key: 0 }, [
|
|
29
|
+
c("div", {
|
|
30
|
+
style: m({
|
|
32
31
|
position: "absolute",
|
|
33
32
|
right: "0",
|
|
34
|
-
top: t(
|
|
33
|
+
top: t(a).mediaY + "px",
|
|
35
34
|
transform: "translateY(-50%)",
|
|
36
35
|
...s.value
|
|
37
36
|
})
|
|
38
|
-
}, u(t(e).yScale.formatY(t(
|
|
39
|
-
|
|
40
|
-
style:
|
|
37
|
+
}, u(t(e).yScale.formatY(t(a).y)), 5),
|
|
38
|
+
c("div", {
|
|
39
|
+
style: m({
|
|
41
40
|
position: "absolute",
|
|
42
41
|
bottom: "0",
|
|
43
|
-
left: t(
|
|
42
|
+
left: t(a).mediaX + "px",
|
|
44
43
|
transform: "translateX(-50%)",
|
|
45
44
|
...s.value
|
|
46
45
|
})
|
|
47
|
-
}, u(t(
|
|
46
|
+
}, u(t(e).timeScale.formatX(t(a).time, p.value)), 5)
|
|
48
47
|
], 64)) : b("", !0);
|
|
49
48
|
}
|
|
50
49
|
});
|
|
51
50
|
export {
|
|
52
|
-
|
|
51
|
+
E as default
|
|
53
52
|
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { defineComponent as x, computed as a, ref as g, onMounted as b, onUnmounted as y, unref as _, openBlock as k, createElementBlock as I, normalizeStyle as n, createElementVNode as r, toDisplayString as v, createCommentVNode as H } from "vue";
|
|
2
|
+
import { defaultHeatmapFormat as T, resolveHeatmapSeriesId as C, HEATMAP_TOOLTIP_WIDTH as S, HEATMAP_TOOLTIP_HEIGHT as W } from "../core/dist/heatmap-tooltip.js";
|
|
3
|
+
import { computeTooltipPosition as F } from "../core/dist/tooltip-position.js";
|
|
4
|
+
import { useCrosshairPosition as P } from "../composables.js";
|
|
5
|
+
import { useChartInstance as z } from "../context.js";
|
|
6
|
+
const E = { style: { display: "flex", alignItems: "center", gap: "8px" } }, M = { style: { fontWeight: 600 } }, w = { style: { marginLeft: "auto", fontWeight: 600 } }, N = /* @__PURE__ */ x({
|
|
7
|
+
__name: "HeatmapTooltip",
|
|
8
|
+
props: {
|
|
9
|
+
seriesId: {},
|
|
10
|
+
format: { type: Function }
|
|
11
|
+
},
|
|
12
|
+
setup(m) {
|
|
13
|
+
const u = m, f = a(() => u.format ?? T), t = z(), l = P(t), i = g(0), d = () => {
|
|
14
|
+
i.value++;
|
|
15
|
+
};
|
|
16
|
+
b(() => {
|
|
17
|
+
t.on("overlayChange", d);
|
|
18
|
+
}), y(() => {
|
|
19
|
+
t.off("overlayChange", d);
|
|
20
|
+
});
|
|
21
|
+
const o = a(() => (i.value, t.getTheme())), c = a(() => (i.value, C(t, u.seriesId))), e = a(() => (l.value, i.value, c.value === null ? null : t.getHoverInfo(c.value))), h = a(() => e.value ? Math.max(2, Math.min(100, e.value.percent)) : 0), s = a(() => {
|
|
22
|
+
if (!l.value || !e.value) return null;
|
|
23
|
+
const p = t.getMediaSize();
|
|
24
|
+
return F({
|
|
25
|
+
x: l.value.mediaX,
|
|
26
|
+
y: l.value.mediaY,
|
|
27
|
+
chartWidth: p.width,
|
|
28
|
+
chartHeight: p.height,
|
|
29
|
+
tooltipWidth: S,
|
|
30
|
+
tooltipHeight: W,
|
|
31
|
+
offsetX: 16,
|
|
32
|
+
offsetY: 16
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
return (p, A) => e.value && _(l) && s.value ? (k(), I("div", {
|
|
36
|
+
key: 0,
|
|
37
|
+
style: n({
|
|
38
|
+
position: "absolute",
|
|
39
|
+
left: s.value.left + "px",
|
|
40
|
+
top: s.value.top + "px",
|
|
41
|
+
pointerEvents: "none",
|
|
42
|
+
background: o.value.tooltip.background,
|
|
43
|
+
backdropFilter: "blur(12px)",
|
|
44
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
45
|
+
border: "1px solid " + o.value.tooltip.borderColor,
|
|
46
|
+
borderRadius: "8px",
|
|
47
|
+
padding: "10px 14px",
|
|
48
|
+
boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
|
|
49
|
+
fontSize: o.value.typography.fontSize + "px",
|
|
50
|
+
fontFamily: o.value.typography.fontFamily,
|
|
51
|
+
color: o.value.tooltip.textColor,
|
|
52
|
+
zIndex: 10,
|
|
53
|
+
display: "flex",
|
|
54
|
+
flexDirection: "column",
|
|
55
|
+
gap: "6px",
|
|
56
|
+
minWidth: "120px"
|
|
57
|
+
})
|
|
58
|
+
}, [
|
|
59
|
+
r("div", E, [
|
|
60
|
+
r("span", {
|
|
61
|
+
style: n({
|
|
62
|
+
width: "10px",
|
|
63
|
+
height: "10px",
|
|
64
|
+
borderRadius: "3px",
|
|
65
|
+
background: e.value.color,
|
|
66
|
+
flexShrink: 0
|
|
67
|
+
})
|
|
68
|
+
}, null, 4),
|
|
69
|
+
r("span", M, v(e.value.label), 1),
|
|
70
|
+
r("span", w, v(f.value(e.value.value)), 1)
|
|
71
|
+
]),
|
|
72
|
+
r("div", {
|
|
73
|
+
style: n({
|
|
74
|
+
position: "relative",
|
|
75
|
+
height: "4px",
|
|
76
|
+
borderRadius: "2px",
|
|
77
|
+
background: o.value.tooltip.borderColor,
|
|
78
|
+
overflow: "hidden"
|
|
79
|
+
})
|
|
80
|
+
}, [
|
|
81
|
+
r("div", {
|
|
82
|
+
style: n({
|
|
83
|
+
position: "absolute",
|
|
84
|
+
inset: "0",
|
|
85
|
+
width: h.value + "%",
|
|
86
|
+
borderRadius: "2px",
|
|
87
|
+
background: e.value.color
|
|
88
|
+
})
|
|
89
|
+
}, null, 4)
|
|
90
|
+
], 4)
|
|
91
|
+
], 4)) : H("", !0);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
export {
|
|
95
|
+
N as default
|
|
96
|
+
};
|