chartgpu 0.1.0 → 0.1.3
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/LICENSE +1 -1
- package/README.md +141 -9
- package/dist/ChartGPU.d.ts +5 -3
- package/dist/ChartGPU.d.ts.map +1 -1
- package/dist/assets/ChartGPU-zgkjfPqp.js +15 -0
- package/dist/assets/GPUContext-CgqhC6W6.js +1 -0
- package/dist/assets/basic-line-DfRo2Pom.js +1 -0
- package/dist/assets/chart-sync-Bjf8c5Oo.js +1 -0
- package/dist/assets/createChartSync-BUGadH_x.js +1 -0
- package/dist/assets/createDataZoomSlider-DLbAKjVh.js +162 -0
- package/dist/assets/data-update-animation-BYhFrQqE.js +1 -0
- package/dist/assets/grid-test-6lXNOD1c.js +1 -0
- package/dist/assets/grouped-bar-pr-ZGxGI.js +1 -0
- package/dist/assets/hello-world-B3dB8WNo.js +9 -0
- package/dist/assets/interactive-aPGxN-b-.js +14 -0
- package/dist/assets/live-streaming-N4vKWEcJ.js +1 -0
- package/dist/assets/million-points-DVnJu39j.js +1 -0
- package/dist/assets/pie-BR5SmRvW.js +1 -0
- package/dist/assets/pie-c06rKDKR.js +321 -0
- package/dist/assets/sampling-F-iafT6-.js +1 -0
- package/dist/assets/scales-D-5MHN10.js +37 -0
- package/dist/assets/scatter-CVFSpSfu.js +1 -0
- package/dist/components/formatTooltip.d.ts +7 -0
- package/dist/components/formatTooltip.d.ts.map +1 -1
- package/dist/config/OptionResolver.d.ts +21 -2
- package/dist/config/OptionResolver.d.ts.map +1 -1
- package/dist/config/defaults.d.ts +16 -0
- package/dist/config/defaults.d.ts.map +1 -1
- package/dist/config/types.d.ts +49 -4
- package/dist/config/types.d.ts.map +1 -1
- package/dist/core/createRenderCoordinator.d.ts +2 -2
- package/dist/core/createRenderCoordinator.d.ts.map +1 -1
- package/dist/data/ohlcSample.d.ts +21 -0
- package/dist/data/ohlcSample.d.ts.map +1 -0
- package/dist/examples/basic-line/index.html +90 -0
- package/dist/examples/chart-sync/index.html +102 -0
- package/dist/examples/data-update-animation/index.html +193 -0
- package/dist/examples/grid-test/index.html +90 -0
- package/dist/examples/grouped-bar/index.html +91 -0
- package/dist/examples/hello-world/index.html +32 -0
- package/dist/examples/index.html +142 -0
- package/dist/examples/interactive/index.html +101 -0
- package/dist/examples/live-streaming/index.html +150 -0
- package/dist/examples/million-points/index.html +220 -0
- package/dist/examples/pie/index.html +132 -0
- package/dist/examples/sampling/index.html +249 -0
- package/dist/examples/scatter/index.html +91 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4035 -2996
- package/dist/index.js.map +1 -1
- package/dist/interaction/createInsideZoom.d.ts.map +1 -1
- package/dist/interaction/findCandlestick.d.ts +41 -0
- package/dist/interaction/findCandlestick.d.ts.map +1 -0
- package/dist/renderers/createAxisRenderer.d.ts +1 -1
- package/dist/renderers/createAxisRenderer.d.ts.map +1 -1
- package/dist/renderers/createCandlestickRenderer.d.ts +19 -0
- package/dist/renderers/createCandlestickRenderer.d.ts.map +1 -0
- package/package.json +3 -1
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Pie / Donut - ChartGPU</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root { color-scheme: dark; }
|
|
9
|
+
html, body { height: 100%; }
|
|
10
|
+
body {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
background-color: #0a0a0a;
|
|
14
|
+
color: #e0e0e0;
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
+
}
|
|
17
|
+
.page {
|
|
18
|
+
min-height: 100%;
|
|
19
|
+
display: grid;
|
|
20
|
+
grid-template-rows: auto 1fr;
|
|
21
|
+
gap: 16px;
|
|
22
|
+
padding: 20px;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
max-width: 1200px;
|
|
25
|
+
margin: 0 auto;
|
|
26
|
+
}
|
|
27
|
+
header h1 {
|
|
28
|
+
margin: 0;
|
|
29
|
+
font-size: 1.4rem;
|
|
30
|
+
color: #fff;
|
|
31
|
+
}
|
|
32
|
+
header p {
|
|
33
|
+
margin: 8px 0 0;
|
|
34
|
+
color: #aaa;
|
|
35
|
+
line-height: 1.4;
|
|
36
|
+
}
|
|
37
|
+
.back {
|
|
38
|
+
display: inline-block;
|
|
39
|
+
margin-top: 10px;
|
|
40
|
+
color: #aaa;
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
}
|
|
43
|
+
.back:hover { color: #fff; }
|
|
44
|
+
.grid {
|
|
45
|
+
display: grid;
|
|
46
|
+
grid-template-columns: 1fr;
|
|
47
|
+
gap: 14px;
|
|
48
|
+
align-items: stretch;
|
|
49
|
+
}
|
|
50
|
+
@media (min-width: 940px) {
|
|
51
|
+
.grid {
|
|
52
|
+
grid-template-columns: 1fr 1fr;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
.chart-shell {
|
|
56
|
+
border: 1px solid #333;
|
|
57
|
+
border-radius: 12px;
|
|
58
|
+
background: #0f0f14;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
height: clamp(320px, 48vh, 540px);
|
|
63
|
+
min-height: 320px;
|
|
64
|
+
}
|
|
65
|
+
.chart-head {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: baseline;
|
|
68
|
+
justify-content: space-between;
|
|
69
|
+
gap: 12px;
|
|
70
|
+
padding: 12px 14px;
|
|
71
|
+
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
72
|
+
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));
|
|
73
|
+
}
|
|
74
|
+
.chart-title {
|
|
75
|
+
font-size: 0.95rem;
|
|
76
|
+
font-weight: 650;
|
|
77
|
+
color: #fff;
|
|
78
|
+
letter-spacing: 0.01em;
|
|
79
|
+
}
|
|
80
|
+
.chart-subtitle {
|
|
81
|
+
font-size: 0.85rem;
|
|
82
|
+
color: #9aa0aa;
|
|
83
|
+
}
|
|
84
|
+
.chart {
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
flex: 1 1 auto;
|
|
88
|
+
}
|
|
89
|
+
.error {
|
|
90
|
+
padding: 16px;
|
|
91
|
+
color: #ffb4b4;
|
|
92
|
+
white-space: pre-wrap;
|
|
93
|
+
}
|
|
94
|
+
</style>
|
|
95
|
+
<script type="module" crossorigin src="/chartgpu/assets/pie-BR5SmRvW.js"></script>
|
|
96
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
97
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
98
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
99
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
|
|
100
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<div class="page">
|
|
104
|
+
<header>
|
|
105
|
+
<h1>Pie / Donut</h1>
|
|
106
|
+
<p>Two charts side-by-side: a pie (inner radius 0) and a donut (inner radius > 0). Each slice sets its own <code>color</code>.</p>
|
|
107
|
+
<a class="back" href="../index.html">← Back to examples</a>
|
|
108
|
+
</header>
|
|
109
|
+
|
|
110
|
+
<div class="grid">
|
|
111
|
+
<div class="chart-shell">
|
|
112
|
+
<div class="chart-head">
|
|
113
|
+
<div class="chart-title">Pie</div>
|
|
114
|
+
<div class="chart-subtitle">radius: [0, '72%']</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div id="chart-pie" class="chart"></div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="chart-shell">
|
|
120
|
+
<div class="chart-head">
|
|
121
|
+
<div class="chart-title">Donut</div>
|
|
122
|
+
<div class="chart-subtitle">radius: ['40%', '72%']</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div id="chart-donut" class="chart"></div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div id="error" class="error" style="display:none;"></div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Zoom-aware sampling - ChartGPU</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: dark;
|
|
10
|
+
}
|
|
11
|
+
html, body {
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
background-color: #0a0a0a;
|
|
18
|
+
color: #e0e0e0;
|
|
19
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
.page {
|
|
22
|
+
min-height: 100%;
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-rows: auto auto 1fr;
|
|
25
|
+
gap: 16px;
|
|
26
|
+
padding: 20px;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
max-width: 1200px;
|
|
29
|
+
margin: 0 auto;
|
|
30
|
+
}
|
|
31
|
+
header h1 {
|
|
32
|
+
margin: 0;
|
|
33
|
+
font-size: 1.4rem;
|
|
34
|
+
color: #fff;
|
|
35
|
+
}
|
|
36
|
+
header p {
|
|
37
|
+
margin: 8px 0 0;
|
|
38
|
+
color: #aaa;
|
|
39
|
+
line-height: 1.4;
|
|
40
|
+
max-width: 72ch;
|
|
41
|
+
}
|
|
42
|
+
.back {
|
|
43
|
+
display: inline-block;
|
|
44
|
+
margin-top: 10px;
|
|
45
|
+
color: #aaa;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
}
|
|
48
|
+
.back:hover {
|
|
49
|
+
color: #fff;
|
|
50
|
+
}
|
|
51
|
+
.controls {
|
|
52
|
+
display: grid;
|
|
53
|
+
grid-template-columns: 1fr;
|
|
54
|
+
gap: 12px;
|
|
55
|
+
border: 1px solid #333;
|
|
56
|
+
border-radius: 12px;
|
|
57
|
+
background: #0f0f14;
|
|
58
|
+
padding: 14px;
|
|
59
|
+
}
|
|
60
|
+
.controls-row {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-wrap: wrap;
|
|
63
|
+
gap: 10px 14px;
|
|
64
|
+
align-items: center;
|
|
65
|
+
}
|
|
66
|
+
label {
|
|
67
|
+
display: inline-flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
gap: 8px;
|
|
70
|
+
color: #ddd;
|
|
71
|
+
font-size: 0.95rem;
|
|
72
|
+
}
|
|
73
|
+
select, input[type="number"], button {
|
|
74
|
+
font: inherit;
|
|
75
|
+
color: #e0e0e0;
|
|
76
|
+
background: #141420;
|
|
77
|
+
border: 1px solid #2b2b3a;
|
|
78
|
+
border-radius: 10px;
|
|
79
|
+
padding: 8px 10px;
|
|
80
|
+
outline: none;
|
|
81
|
+
}
|
|
82
|
+
select:focus, input[type="number"]:focus, button:focus {
|
|
83
|
+
border-color: #4a9eff;
|
|
84
|
+
box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
|
|
85
|
+
}
|
|
86
|
+
button {
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
border-color: #2b2b3a;
|
|
89
|
+
background: linear-gradient(180deg, #1b1b2a 0%, #141420 100%);
|
|
90
|
+
}
|
|
91
|
+
button:hover {
|
|
92
|
+
border-color: #3a3a50;
|
|
93
|
+
background: linear-gradient(180deg, #23233a 0%, #151525 100%);
|
|
94
|
+
}
|
|
95
|
+
.readouts {
|
|
96
|
+
display: grid;
|
|
97
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
98
|
+
gap: 12px;
|
|
99
|
+
}
|
|
100
|
+
.readout-card {
|
|
101
|
+
border: 1px solid #2b2b3a;
|
|
102
|
+
border-radius: 12px;
|
|
103
|
+
padding: 12px;
|
|
104
|
+
background: rgba(255, 255, 255, 0.02);
|
|
105
|
+
min-width: 0;
|
|
106
|
+
}
|
|
107
|
+
.readout-title {
|
|
108
|
+
font-weight: 600;
|
|
109
|
+
color: #fff;
|
|
110
|
+
margin: 0 0 8px;
|
|
111
|
+
font-size: 0.95rem;
|
|
112
|
+
}
|
|
113
|
+
.kv {
|
|
114
|
+
display: grid;
|
|
115
|
+
grid-template-columns: 160px 1fr;
|
|
116
|
+
gap: 6px 10px;
|
|
117
|
+
font-size: 0.92rem;
|
|
118
|
+
color: #cfcfe6;
|
|
119
|
+
}
|
|
120
|
+
.kv .k {
|
|
121
|
+
color: #a8a8c8;
|
|
122
|
+
}
|
|
123
|
+
.note {
|
|
124
|
+
color: #aaa;
|
|
125
|
+
font-size: 0.9rem;
|
|
126
|
+
line-height: 1.35;
|
|
127
|
+
}
|
|
128
|
+
.note kbd {
|
|
129
|
+
font: inherit;
|
|
130
|
+
font-variant-numeric: tabular-nums;
|
|
131
|
+
border: 1px solid #2b2b3a;
|
|
132
|
+
background: rgba(255, 255, 255, 0.03);
|
|
133
|
+
border-bottom-color: rgba(255, 255, 255, 0.12);
|
|
134
|
+
padding: 2px 6px;
|
|
135
|
+
border-radius: 8px;
|
|
136
|
+
}
|
|
137
|
+
.charts {
|
|
138
|
+
display: grid;
|
|
139
|
+
grid-template-columns: 1fr;
|
|
140
|
+
gap: 14px;
|
|
141
|
+
}
|
|
142
|
+
.chart-shell {
|
|
143
|
+
border: 1px solid #333;
|
|
144
|
+
border-radius: 12px;
|
|
145
|
+
background: #0f0f14;
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
min-height: 360px;
|
|
148
|
+
height: min(44vh, 520px);
|
|
149
|
+
position: relative;
|
|
150
|
+
}
|
|
151
|
+
.chart {
|
|
152
|
+
width: 100%;
|
|
153
|
+
height: 100%;
|
|
154
|
+
}
|
|
155
|
+
.error {
|
|
156
|
+
padding: 16px;
|
|
157
|
+
color: #ffb4b4;
|
|
158
|
+
white-space: pre-wrap;
|
|
159
|
+
position: absolute;
|
|
160
|
+
inset: 0;
|
|
161
|
+
background: rgba(10, 10, 10, 0.85);
|
|
162
|
+
}
|
|
163
|
+
@media (max-width: 900px) {
|
|
164
|
+
.readouts {
|
|
165
|
+
grid-template-columns: 1fr;
|
|
166
|
+
}
|
|
167
|
+
.kv {
|
|
168
|
+
grid-template-columns: 140px 1fr;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
</style>
|
|
172
|
+
<script type="module" crossorigin src="/chartgpu/assets/sampling-F-iafT6-.js"></script>
|
|
173
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
174
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
175
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
176
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
|
|
177
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
|
|
178
|
+
</head>
|
|
179
|
+
<body>
|
|
180
|
+
<div class="page">
|
|
181
|
+
<header>
|
|
182
|
+
<h1>Zoom-aware sampling</h1>
|
|
183
|
+
<p>
|
|
184
|
+
This demo makes ChartGPU’s <strong>zoom-aware sampling</strong> visually obvious: when you zoom in, the chart keeps more points
|
|
185
|
+
so high-frequency detail and spikes reappear; when you zoom out, it down-samples aggressively to stay fast.
|
|
186
|
+
</p>
|
|
187
|
+
<a class="back" href="../index.html">← Back to examples</a>
|
|
188
|
+
</header>
|
|
189
|
+
|
|
190
|
+
<section class="controls">
|
|
191
|
+
<div class="controls-row">
|
|
192
|
+
<label>
|
|
193
|
+
Sampling mode
|
|
194
|
+
<select id="samplingMode">
|
|
195
|
+
<option value="none">none</option>
|
|
196
|
+
<option value="lttb">lttb</option>
|
|
197
|
+
<option value="average">average</option>
|
|
198
|
+
<option value="max">max</option>
|
|
199
|
+
<option value="min">min</option>
|
|
200
|
+
</select>
|
|
201
|
+
</label>
|
|
202
|
+
|
|
203
|
+
<label>
|
|
204
|
+
samplingThreshold
|
|
205
|
+
<input id="samplingThreshold" type="number" min="2" step="1" inputmode="numeric" />
|
|
206
|
+
</label>
|
|
207
|
+
|
|
208
|
+
<button id="apply">Apply (setOption)</button>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
<div class="readouts">
|
|
212
|
+
<div class="readout-card">
|
|
213
|
+
<div class="readout-title">Dataset</div>
|
|
214
|
+
<div class="kv">
|
|
215
|
+
<div class="k">Total points</div><div id="totalPoints">—</div>
|
|
216
|
+
<div class="k">X domain</div><div id="xDomain">—</div>
|
|
217
|
+
<div class="k">Sampling</div><div id="samplingResolved">—</div>
|
|
218
|
+
<div class="k">samplingThreshold</div><div id="samplingThresholdResolved">—</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="readout-card">
|
|
223
|
+
<div class="readout-title">Zoom window (drives zoom-aware sampling)</div>
|
|
224
|
+
<div class="kv">
|
|
225
|
+
<div class="k">Zoom range</div><div id="zoomRange">—</div>
|
|
226
|
+
<div class="k">Span</div><div id="zoomSpan">—</div>
|
|
227
|
+
<div class="k">Visible raw points (approx)</div><div id="visibleRawPoints">—</div>
|
|
228
|
+
<div class="k">Target sampled points (approx)</div><div id="targetPoints">—</div>
|
|
229
|
+
<div class="k">Expected rendered points (approx)</div><div id="expectedRendered">—</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="note">
|
|
235
|
+
Gestures: mouse wheel zooms (inside plot); <kbd>Shift</kbd> + drag pans (inside plot). The slider below the x-axis controls the same window.
|
|
236
|
+
Sampling affects rendering + cartesian hit-testing only; axis bounds use raw (unsampled) data.
|
|
237
|
+
</div>
|
|
238
|
+
</section>
|
|
239
|
+
|
|
240
|
+
<section class="charts">
|
|
241
|
+
<div class="chart-shell">
|
|
242
|
+
<div id="chart" class="chart"></div>
|
|
243
|
+
<div id="error" class="error" style="display:none;"></div>
|
|
244
|
+
</div>
|
|
245
|
+
</section>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
</body>
|
|
249
|
+
</html>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Scatter - ChartGPU</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: dark;
|
|
10
|
+
}
|
|
11
|
+
html, body {
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
background-color: #0a0a0a;
|
|
18
|
+
color: #e0e0e0;
|
|
19
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
.page {
|
|
22
|
+
min-height: 100%;
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-rows: auto 1fr;
|
|
25
|
+
gap: 16px;
|
|
26
|
+
padding: 20px;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
max-width: 1100px;
|
|
29
|
+
margin: 0 auto;
|
|
30
|
+
}
|
|
31
|
+
header h1 {
|
|
32
|
+
margin: 0;
|
|
33
|
+
font-size: 1.4rem;
|
|
34
|
+
color: #fff;
|
|
35
|
+
}
|
|
36
|
+
header p {
|
|
37
|
+
margin: 8px 0 0;
|
|
38
|
+
color: #aaa;
|
|
39
|
+
line-height: 1.4;
|
|
40
|
+
}
|
|
41
|
+
.chart-shell {
|
|
42
|
+
border: 1px solid #333;
|
|
43
|
+
border-radius: 12px;
|
|
44
|
+
background: #0f0f14;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
min-height: 420px;
|
|
47
|
+
height: min(75vh, 820px);
|
|
48
|
+
}
|
|
49
|
+
.chart {
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
}
|
|
53
|
+
.error {
|
|
54
|
+
padding: 16px;
|
|
55
|
+
color: #ffb4b4;
|
|
56
|
+
white-space: pre-wrap;
|
|
57
|
+
}
|
|
58
|
+
.back {
|
|
59
|
+
display: inline-block;
|
|
60
|
+
margin-top: 10px;
|
|
61
|
+
color: #aaa;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
}
|
|
64
|
+
.back:hover {
|
|
65
|
+
color: #fff;
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
<script type="module" crossorigin src="/chartgpu/assets/scatter-CVFSpSfu.js"></script>
|
|
69
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
70
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
71
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
72
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
|
|
73
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
|
|
74
|
+
</head>
|
|
75
|
+
<body>
|
|
76
|
+
<div class="page">
|
|
77
|
+
<header>
|
|
78
|
+
<h1>Scatter</h1>
|
|
79
|
+
<p>Scatter plot with thousands of points. Demonstrates fixed <code>symbolSize</code>, per-point <code>[x, y, size]</code>, and optional functional <code>symbolSize</code>.</p>
|
|
80
|
+
<a class="back" href="../index.html">← Back to examples</a>
|
|
81
|
+
</header>
|
|
82
|
+
|
|
83
|
+
<div class="chart-shell">
|
|
84
|
+
<div id="chart" class="chart"></div>
|
|
85
|
+
<div id="error" class="error" style="display:none;"></div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
</body>
|
|
90
|
+
</html>
|
|
91
|
+
|
package/dist/index.d.ts
CHANGED
|
@@ -6,10 +6,10 @@ export { ChartGPU } from './ChartGPU';
|
|
|
6
6
|
export { createChartGPU as createChart } from './ChartGPU';
|
|
7
7
|
export type { ChartGPUInstance } from './ChartGPU';
|
|
8
8
|
export type { ChartGPUEventName, ChartGPUEventPayload, ChartGPUCrosshairMovePayload, ChartGPUEventCallback, ChartGPUCrosshairMoveCallback, } from './ChartGPU';
|
|
9
|
-
export type { AreaStyleConfig, AnimationConfig, BarItemStyleConfig, AxisConfig, AxisType, ChartGPUOptions, DataZoomConfig, DataPoint, GridConfig, LineStyleConfig, AreaSeriesConfig, LineSeriesConfig, BarSeriesConfig, PieCenter, PieDataItem, PieItemStyleConfig, PieRadius, PieSeriesConfig, ScatterSeriesConfig, ScatterSymbol, ScatterPointTuple, SeriesConfig, SeriesSampling, SeriesType, TooltipParams, } from './config/types';
|
|
10
|
-
export { defaultOptions } from './config/defaults';
|
|
9
|
+
export type { AreaStyleConfig, AnimationConfig, BarItemStyleConfig, AxisConfig, AxisType, CandlestickItemStyleConfig, CandlestickSeriesConfig, CandlestickStyle, ChartGPUOptions, DataZoomConfig, DataPoint, GridConfig, LineStyleConfig, AreaSeriesConfig, LineSeriesConfig, BarSeriesConfig, OHLCDataPoint, PieCenter, PieDataItem, PieItemStyleConfig, PieRadius, PieSeriesConfig, ScatterSeriesConfig, ScatterSymbol, ScatterPointTuple, SeriesConfig, SeriesSampling, SeriesType, TooltipParams, } from './config/types';
|
|
10
|
+
export { candlestickDefaults, defaultOptions } from './config/defaults';
|
|
11
11
|
export { OptionResolver, resolveOptions } from './config/OptionResolver';
|
|
12
|
-
export type { ResolvedChartGPUOptions, ResolvedAreaSeriesConfig, ResolvedAreaStyleConfig, ResolvedGridConfig, ResolvedLineSeriesConfig, ResolvedLineStyleConfig, ResolvedSeriesConfig, } from './config/OptionResolver';
|
|
12
|
+
export type { ResolvedCandlestickSeriesConfig, ResolvedChartGPUOptions, ResolvedAreaSeriesConfig, ResolvedAreaStyleConfig, ResolvedGridConfig, ResolvedLineSeriesConfig, ResolvedLineStyleConfig, ResolvedSeriesConfig, } from './config/OptionResolver';
|
|
13
13
|
export type { ThemeConfig } from './themes/types';
|
|
14
14
|
export { darkTheme, lightTheme, getTheme } from './themes';
|
|
15
15
|
export type { ThemeName } from './themes';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,OAAO,UAAU,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,4BAA4B,EAC5B,qBAAqB,EACrB,6BAA6B,GAC9B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,cAAc,EACd,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,OAAO,UAAU,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,4BAA4B,EAC5B,qBAAqB,EACrB,6BAA6B,GAC9B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,0BAA0B,EAC1B,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,YAAY,EACV,+BAA+B,EAC/B,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACxE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}
|