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,21 @@
|
|
|
1
|
+
import type { OHLCDataPoint } from '../config/types';
|
|
2
|
+
/**
|
|
3
|
+
* Downsamples OHLC (candlestick) data to a target number of points using bucket aggregation.
|
|
4
|
+
*
|
|
5
|
+
* Each bucket aggregates candles preserving OHLC semantics:
|
|
6
|
+
* - timestamp and open from the first candle in the bucket
|
|
7
|
+
* - close from the last candle in the bucket
|
|
8
|
+
* - high as the maximum of all highs in the bucket
|
|
9
|
+
* - low as the minimum of all lows in the bucket
|
|
10
|
+
*
|
|
11
|
+
* @param data - Array of OHLC data points (tuples or objects)
|
|
12
|
+
* @param targetPoints - Desired number of output points
|
|
13
|
+
* @returns Downsampled array; same reference if no sampling needed
|
|
14
|
+
*
|
|
15
|
+
* Edge cases:
|
|
16
|
+
* - If `data.length <= targetPoints` or `targetPoints < 2`, returns the original array (same reference)
|
|
17
|
+
* - First and last candles are always preserved exactly (same element references)
|
|
18
|
+
* - Output shape matches input shape (tuples → tuples, objects → objects)
|
|
19
|
+
*/
|
|
20
|
+
export declare function ohlcSample(data: ReadonlyArray<OHLCDataPoint>, targetPoints: number): ReadonlyArray<OHLCDataPoint>;
|
|
21
|
+
//# sourceMappingURL=ohlcSample.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ohlcSample.d.ts","sourceRoot":"","sources":["../../src/data/ohlcSample.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AAMzE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,EAClC,YAAY,EAAE,MAAM,GACnB,aAAa,CAAC,aAAa,CAAC,CAgG9B"}
|
|
@@ -0,0 +1,90 @@
|
|
|
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>Basic Line - 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(70vh, 720px);
|
|
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/basic-line-DfRo2Pom.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>Basic Line</h1>
|
|
79
|
+
<p>Single line series (100 points) - sine wave. Demonstrates grid, axes, and resize handling.</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>
|
|
@@ -0,0 +1,102 @@
|
|
|
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>Chart Sync - 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 1fr;
|
|
47
|
+
gap: 14px;
|
|
48
|
+
align-items: stretch;
|
|
49
|
+
}
|
|
50
|
+
.chart-shell {
|
|
51
|
+
border: 1px solid #333;
|
|
52
|
+
border-radius: 12px;
|
|
53
|
+
background: #0f0f14;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
min-height: 340px;
|
|
56
|
+
height: min(62vh, 620px);
|
|
57
|
+
}
|
|
58
|
+
.chart {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
}
|
|
62
|
+
.error {
|
|
63
|
+
padding: 16px;
|
|
64
|
+
color: #ffb4b4;
|
|
65
|
+
white-space: pre-wrap;
|
|
66
|
+
}
|
|
67
|
+
@media (max-width: 900px) {
|
|
68
|
+
.grid { grid-template-columns: 1fr; }
|
|
69
|
+
.chart-shell { height: min(48vh, 520px); }
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
<script type="module" crossorigin src="/chartgpu/assets/chart-sync-Bjf8c5Oo.js"></script>
|
|
73
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
74
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
75
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
76
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
|
|
77
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
|
|
78
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createChartSync-BUGadH_x.js">
|
|
79
|
+
</head>
|
|
80
|
+
<body>
|
|
81
|
+
<div class="page">
|
|
82
|
+
<header>
|
|
83
|
+
<h1>Chart Sync</h1>
|
|
84
|
+
<p>Move your mouse over either chart. Crosshair x-position and axis tooltip x-value sync across charts. Zoom is not synced.</p>
|
|
85
|
+
<a class="back" href="../index.html">← Back to examples</a>
|
|
86
|
+
</header>
|
|
87
|
+
|
|
88
|
+
<div class="grid">
|
|
89
|
+
<div class="chart-shell">
|
|
90
|
+
<div id="chart-a" class="chart"></div>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="chart-shell">
|
|
93
|
+
<div id="chart-b" class="chart"></div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div id="error" class="error" style="display:none;"></div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
102
|
+
|
|
@@ -0,0 +1,193 @@
|
|
|
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>Data Update Animation - 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 auto 1fr;
|
|
21
|
+
gap: 14px;
|
|
22
|
+
padding: 20px;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
max-width: 1300px;
|
|
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
|
+
max-width: 80ch;
|
|
37
|
+
}
|
|
38
|
+
.back {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
margin-top: 10px;
|
|
41
|
+
color: #aaa;
|
|
42
|
+
text-decoration: none;
|
|
43
|
+
}
|
|
44
|
+
.back:hover { color: #fff; }
|
|
45
|
+
|
|
46
|
+
.controls {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-wrap: wrap;
|
|
49
|
+
gap: 10px 14px;
|
|
50
|
+
align-items: center;
|
|
51
|
+
padding: 12px 14px;
|
|
52
|
+
border: 1px solid #333;
|
|
53
|
+
border-radius: 12px;
|
|
54
|
+
background: #0f0f14;
|
|
55
|
+
}
|
|
56
|
+
.controls button {
|
|
57
|
+
appearance: none;
|
|
58
|
+
border: 1px solid #3a3a3a;
|
|
59
|
+
background: #1a1a2e;
|
|
60
|
+
color: #e0e0e0;
|
|
61
|
+
padding: 10px 12px;
|
|
62
|
+
border-radius: 10px;
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
font-weight: 650;
|
|
65
|
+
letter-spacing: 0.01em;
|
|
66
|
+
transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
|
|
67
|
+
}
|
|
68
|
+
.controls button:hover {
|
|
69
|
+
background: #232344;
|
|
70
|
+
border-color: #555;
|
|
71
|
+
transform: translateY(-1px);
|
|
72
|
+
}
|
|
73
|
+
.controls label {
|
|
74
|
+
display: inline-flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 8px;
|
|
77
|
+
user-select: none;
|
|
78
|
+
color: #cfd3da;
|
|
79
|
+
font-size: 0.95rem;
|
|
80
|
+
}
|
|
81
|
+
.controls input[type="checkbox"] {
|
|
82
|
+
width: 16px;
|
|
83
|
+
height: 16px;
|
|
84
|
+
accent-color: #4a9eff;
|
|
85
|
+
}
|
|
86
|
+
.status {
|
|
87
|
+
color: #9aa0aa;
|
|
88
|
+
font-size: 0.9rem;
|
|
89
|
+
margin-left: auto;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.grid {
|
|
94
|
+
display: grid;
|
|
95
|
+
grid-template-columns: 1fr;
|
|
96
|
+
gap: 14px;
|
|
97
|
+
align-items: stretch;
|
|
98
|
+
}
|
|
99
|
+
@media (min-width: 980px) {
|
|
100
|
+
.grid {
|
|
101
|
+
grid-template-columns: 1.4fr 1fr;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
.chart-shell {
|
|
105
|
+
border: 1px solid #333;
|
|
106
|
+
border-radius: 12px;
|
|
107
|
+
background: #0f0f14;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
height: clamp(340px, 54vh, 640px);
|
|
112
|
+
min-height: 340px;
|
|
113
|
+
}
|
|
114
|
+
.chart-head {
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: baseline;
|
|
117
|
+
justify-content: space-between;
|
|
118
|
+
gap: 12px;
|
|
119
|
+
padding: 12px 14px;
|
|
120
|
+
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
121
|
+
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));
|
|
122
|
+
}
|
|
123
|
+
.chart-title {
|
|
124
|
+
font-size: 0.95rem;
|
|
125
|
+
font-weight: 650;
|
|
126
|
+
color: #fff;
|
|
127
|
+
letter-spacing: 0.01em;
|
|
128
|
+
}
|
|
129
|
+
.chart-subtitle {
|
|
130
|
+
font-size: 0.85rem;
|
|
131
|
+
color: #9aa0aa;
|
|
132
|
+
}
|
|
133
|
+
.chart {
|
|
134
|
+
width: 100%;
|
|
135
|
+
height: 100%;
|
|
136
|
+
flex: 1 1 auto;
|
|
137
|
+
}
|
|
138
|
+
.error {
|
|
139
|
+
padding: 16px;
|
|
140
|
+
color: #ffb4b4;
|
|
141
|
+
white-space: pre-wrap;
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
144
|
+
<script type="module" crossorigin src="/chartgpu/assets/data-update-animation-BYhFrQqE.js"></script>
|
|
145
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
146
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
147
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
148
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
|
|
149
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
|
|
150
|
+
</head>
|
|
151
|
+
<body>
|
|
152
|
+
<div class="page">
|
|
153
|
+
<header>
|
|
154
|
+
<h1>Data Update Animation</h1>
|
|
155
|
+
<p>
|
|
156
|
+
Visual check for Story 5.17: a second <code>setOption(...)</code> updates data and should animate smoothly.
|
|
157
|
+
The cartesian chart keeps point counts constant (match by index) and changes y-extents so axis scales/domain shift.
|
|
158
|
+
The pie chart keeps slice count constant and changes values so slice angles morph.
|
|
159
|
+
</p>
|
|
160
|
+
<a class="back" href="../index.html">← Back to examples</a>
|
|
161
|
+
</header>
|
|
162
|
+
|
|
163
|
+
<div class="controls">
|
|
164
|
+
<button id="btn-update" type="button">Randomize / Update Data</button>
|
|
165
|
+
<label><input id="toggle-animate" type="checkbox" checked /> Animate updates</label>
|
|
166
|
+
<label><input id="toggle-auto" type="checkbox" checked /> Auto update after load</label>
|
|
167
|
+
<div id="status" class="status">Waiting…</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="grid">
|
|
171
|
+
<div class="chart-shell">
|
|
172
|
+
<div class="chart-head">
|
|
173
|
+
<div class="chart-title">Cartesian</div>
|
|
174
|
+
<div class="chart-subtitle">bar + line (y interpolation + y-domain change)</div>
|
|
175
|
+
</div>
|
|
176
|
+
<div id="chart-cartesian" class="chart"></div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="chart-shell">
|
|
180
|
+
<div class="chart-head">
|
|
181
|
+
<div class="chart-title">Pie</div>
|
|
182
|
+
<div class="chart-subtitle">slice angles morph (value tween)</div>
|
|
183
|
+
</div>
|
|
184
|
+
<div id="chart-pie" class="chart"></div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div id="error" class="error" style="display:none;"></div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
</body>
|
|
192
|
+
</html>
|
|
193
|
+
|
|
@@ -0,0 +1,90 @@
|
|
|
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>Grid Renderer Test - ChartGPU</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 20px;
|
|
11
|
+
background-color: #0a0a0a;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
13
|
+
color: #fff;
|
|
14
|
+
}
|
|
15
|
+
.container {
|
|
16
|
+
max-width: 900px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
}
|
|
19
|
+
h1 {
|
|
20
|
+
text-align: center;
|
|
21
|
+
margin-bottom: 10px;
|
|
22
|
+
}
|
|
23
|
+
.description {
|
|
24
|
+
text-align: center;
|
|
25
|
+
color: #888;
|
|
26
|
+
margin-bottom: 30px;
|
|
27
|
+
}
|
|
28
|
+
canvas {
|
|
29
|
+
display: block;
|
|
30
|
+
width: 800px;
|
|
31
|
+
height: 600px;
|
|
32
|
+
border: 1px solid #333;
|
|
33
|
+
margin: 0 auto;
|
|
34
|
+
background-color: #1a1a1a;
|
|
35
|
+
}
|
|
36
|
+
.controls {
|
|
37
|
+
margin: 20px auto;
|
|
38
|
+
max-width: 800px;
|
|
39
|
+
display: grid;
|
|
40
|
+
grid-template-columns: 1fr 1fr;
|
|
41
|
+
gap: 20px;
|
|
42
|
+
}
|
|
43
|
+
.control-group {
|
|
44
|
+
background-color: #1a1a1a;
|
|
45
|
+
padding: 15px;
|
|
46
|
+
border-radius: 5px;
|
|
47
|
+
}
|
|
48
|
+
label {
|
|
49
|
+
display: block;
|
|
50
|
+
margin-bottom: 5px;
|
|
51
|
+
color: #ccc;
|
|
52
|
+
}
|
|
53
|
+
input[type="range"] {
|
|
54
|
+
width: 100%;
|
|
55
|
+
}
|
|
56
|
+
.value-display {
|
|
57
|
+
color: #4a9eff;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
61
|
+
<script type="module" crossorigin src="/chartgpu/assets/grid-test-6lXNOD1c.js"></script>
|
|
62
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
63
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
<div class="container">
|
|
67
|
+
<h1>Grid Renderer Test</h1>
|
|
68
|
+
<p class="description">Testing the WebGPU grid renderer with configurable line counts</p>
|
|
69
|
+
|
|
70
|
+
<canvas id="canvas"></canvas>
|
|
71
|
+
|
|
72
|
+
<div class="controls">
|
|
73
|
+
<div class="control-group">
|
|
74
|
+
<label for="horizontal">
|
|
75
|
+
Horizontal Lines: <span id="horizontal-value" class="value-display">5</span>
|
|
76
|
+
</label>
|
|
77
|
+
<input type="range" id="horizontal" min="0" max="20" value="5" step="1">
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="control-group">
|
|
81
|
+
<label for="vertical">
|
|
82
|
+
Vertical Lines: <span id="vertical-value" class="value-display">6</span>
|
|
83
|
+
</label>
|
|
84
|
+
<input type="range" id="vertical" min="0" max="20" value="6" step="1">
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
</body>
|
|
90
|
+
</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>Grouped Bar - 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(70vh, 720px);
|
|
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/grouped-bar-pr-ZGxGI.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>Grouped Bar</h1>
|
|
79
|
+
<p>Clustered + stacked bars (stack + spacing controls, includes negatives to validate downward stacking).</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
|
+
|
|
@@ -0,0 +1,32 @@
|
|
|
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>Hello World - ChartGPU</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
min-height: 100vh;
|
|
15
|
+
background-color: #0a0a0a;
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
17
|
+
}
|
|
18
|
+
canvas {
|
|
19
|
+
display: block;
|
|
20
|
+
width: 800px;
|
|
21
|
+
height: 600px;
|
|
22
|
+
border: 1px solid #333;
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
<script type="module" crossorigin src="/chartgpu/assets/hello-world-B3dB8WNo.js"></script>
|
|
26
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
|
|
27
|
+
<link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<canvas id="canvas"></canvas>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|