feat: handle bubble chartsettings

This commit is contained in:
Yann Amsellem
2025-05-06 17:09:10 +02:00
parent 790854254e
commit fe9dfd4c47
3 changed files with 27 additions and 8 deletions

12
package-lock.json generated
View File

@@ -1,16 +1,16 @@
{
"name": "agx",
"version": "0.1.0",
"version": "0.2.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "agx",
"version": "0.1.0",
"version": "0.2.0",
"license": "MIT",
"dependencies": {
"@agnosticeng/cache": "^0.0.3",
"@agnosticeng/dv": "^0.0.12",
"@agnosticeng/dv": "^0.0.14",
"@agnosticeng/migrate": "^0.0.2",
"@agnosticeng/sqlite": "^0.0.5",
"@floating-ui/dom": "^1.6.13",
@@ -54,9 +54,9 @@
"integrity": "sha512-sSi8wX3UkcG/1rXcDPGi2PQc8SP9arFM2ycKmbFqIwR2cmaYaZjUXIphZLXf8XywGSqxSzbbr2AR62KM2MwctA=="
},
"node_modules/@agnosticeng/dv": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.12.tgz",
"integrity": "sha512-fUcXuQZOi7M6nf1QcxQuYlykSFhyo6JKzUe/pRaGIC9JyFKvKYKeYFkkX1HqRYqCbiCQ8VYtqiHEwJYDkloFRw==",
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.14.tgz",
"integrity": "sha512-mXwUTiaLUZvI2N4NZQOpmTPcxaSPsw9QLh8L6L8SG4qj8krzdOeAUEpGrK8H5Sm1xNZUKilpBumZN6OZdR1EGw==",
"dependencies": {
"@observablehq/plot": "^0.6.17",
"d3": "^7.9.0"

View File

@@ -16,7 +16,7 @@
"license": "MIT",
"dependencies": {
"@agnosticeng/cache": "^0.0.3",
"@agnosticeng/dv": "^0.0.12",
"@agnosticeng/dv": "^0.0.14",
"@agnosticeng/migrate": "^0.0.2",
"@agnosticeng/sqlite": "^0.0.5",
"@floating-ui/dom": "^1.6.13",

View File

@@ -42,6 +42,13 @@
settings.z = options[select.selectedIndex];
if (!settings.z) settings.z = undefined;
};
const handleLegendChange = (event: Event) => {
const select = event.target as HTMLSelectElement;
const options = Array.from(select.options).map((o) => o.value);
settings.legend = options[select.selectedIndex] as 'x' | 'y' | 'z';
if (!settings.legend) settings.legend = undefined;
};
</script>
{#if showChartSettings}
@@ -49,11 +56,12 @@
<form>
<div class="setting">
<span>type</span>
<select value={settings.type} onchange={handleChartTypeChange} size={4}>
<select value={settings.type} onchange={handleChartTypeChange} size={5}>
<option value="line">line</option>
<option value="candle">candle</option>
<option value="bar">bar</option>
<option value="h-bar">h-bar</option>
<option value="bubble">bubble</option>
</select>
</div>
@@ -95,6 +103,17 @@
</select>
</div>
</div>
<div class="setting">
<span>legend</span>
<div style="display: flex; gap: 5px;">
<select value={settings.legend} onchange={handleLegendChange} size={4}>
<option value="">none</option>
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
</select>
</div>
</div>
{/if}
</form>
</section>