Merge pull request #83 from agnosticeng/feat/update-dv

feat: update dv

package-lock.json

@@ -10,7 +10,7 @@
 			"license": "MIT",
 			"dependencies": {
 				"@agnosticeng/cache": "^0.0.3",
-				"@agnosticeng/dv": "^0.0.4",
+				"@agnosticeng/dv": "^0.0.5",
 				"@agnosticeng/migrate": "^0.0.2",
 				"@agnosticeng/sqlite": "^0.0.5",
 				"@observablehq/plot": "^0.6.16",
@@ -49,9 +49,9 @@
 			"integrity": "sha512-sSi8wX3UkcG/1rXcDPGi2PQc8SP9arFM2ycKmbFqIwR2cmaYaZjUXIphZLXf8XywGSqxSzbbr2AR62KM2MwctA=="
 		},
 		"node_modules/@agnosticeng/dv": {
-			"version": "0.0.4",
-			"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.4.tgz",
-			"integrity": "sha512-VZrA8mYrQpjNYVwysD6KOGIp7SQiTg6kSmKDcIjlCmGBufQm0PjUZClWkfUht1WuPJ2UT7URl6l2nTkWBwXFzw==",
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/@agnosticeng/dv/-/dv-0.0.5.tgz",
+			"integrity": "sha512-vcdZXbfPJQFeFqN/zaFb88sV9jUSOxYaNAv/AlEIDuX3J63FAiYkAFlU7HY3peXYtIUfBGRMaGSkzfEuIsmFuA==",
 			"dependencies": {
 				"@observablehq/plot": "^0.6.16",
 				"d3": "^7.9.0"

package.json

@@ -16,7 +16,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"@agnosticeng/cache": "^0.0.3",
-		"@agnosticeng/dv": "^0.0.4",
+		"@agnosticeng/dv": "^0.0.5",
 		"@agnosticeng/migrate": "^0.0.2",
 		"@agnosticeng/sqlite": "^0.0.5",
 		"@observablehq/plot": "^0.6.16",

src/lib/components/Chart/Container.svelte

@@ -26,24 +26,24 @@
 		);
 
 		if (dateColumn && hasCandleColumns) {
-			settings.chartType = 'candle';
-			settings.xAxis.series = [dateColumn];
-			settings.yAxis.series = candleColumns;
+			settings.type = 'candle';
+			settings.x = dateColumn;
+			settings.y = candleColumns;
 			return;
 		}
 
 		if (dateColumn && otherColumns.length > 0) {
-			settings.chartType = 'line';
-			settings.xAxis.series = [dateColumn];
-			settings.yAxis.series = otherColumns;
+			settings.type = 'line';
+			settings.x = dateColumn;
+			settings.y = otherColumns;
 			return;
 		}
 	}
 
 	let settings = $state<ChartSettingsType>({
-		chartType: 'line',
-		xAxis: { series: [] },
-		yAxis: { series: [] }
+		type: 'line',
+		x: '',
+		y: []
 	});
 
 	$effect(() => {
@@ -53,7 +53,7 @@
 	});
 
 	$effect(() => {
-		if (settings.xAxis.series.length === 0 && settings.yAxis.series.length === 0) {
+		if (settings.x.length === 0 && settings.y.length === 0) {
 			setDefaultSettings();
 		}
 	});

src/lib/components/Chart/Settings.svelte

@@ -18,19 +18,29 @@
 
 	const handleChartTypeChange = (event: Event) => {
 		const select = event.target as HTMLSelectElement;
-		settings.chartType = select.value as 'candle' | 'line';
+		settings.type = select.value as 'candle' | 'line' | 'bar';
+		if (settings.type !== 'bar') {
+			settings.z = undefined;
+		}
 	};
 
 	const handleXAxisChange = (event: Event) => {
 		const select = event.target as HTMLSelectElement;
-		const selectedOptions = Array.from(select.selectedOptions).map((option) => option.value);
-		settings.xAxis.series = selectedOptions;
+		const options = Array.from(select.options).map((o) => o.value);
+		settings.x = options[select.selectedIndex];
 	};
 
 	const handleYAxisChange = (event: Event) => {
 		const select = event.target as HTMLSelectElement;
 		const selectedOptions = Array.from(select.selectedOptions).map((option) => option.value);
-		settings.yAxis.series = selectedOptions;
+		settings.y = selectedOptions;
+	};
+
+	const handleZAxisChange = (event: Event) => {
+		const select = event.target as HTMLSelectElement;
+		const options = Array.from(select.options).map((o) => o.value);
+		settings.z = options[select.selectedIndex];
+		if (!settings.z) settings.z = undefined;
 	};
 </script>
 
@@ -39,14 +49,16 @@
 		<form>
 			<div class="setting">
 				<span>type</span>
-				<select multiple value={settings.chartType} onchange={handleChartTypeChange} size={2}>
+				<select multiple value={settings.type} onchange={handleChartTypeChange} size={3}>
 					<option value="line">line</option>
 					<option value="candle">candle</option>
+					<option value="bar">bar</option>
 				</select>
 			</div>
+
 			<div class="setting">
 				<span>x-axis</span>
-				<select multiple value={settings.xAxis.series} onchange={handleXAxisChange} size={4}>
+				<select value={settings.x} onchange={handleXAxisChange} size={columns.length}>
 					{#each columns as column}
 						<option value={column.name}>{column.name}</option>
 					{/each}
@@ -58,10 +70,10 @@
 				<div style="display: flex; gap: 5px;">
 					<select
 						multiple
-						value={settings.yAxis.series}
+						value={settings.y}
 						onchange={handleYAxisChange}
-						size={4}
-						disabled={settings.chartType === 'candle'}
+						size={columns.length}
+						disabled={settings.type === 'candle'}
 					>
 						{#each columns as column}
 							<option value={column.name}>{column.name}</option>
@@ -69,6 +81,23 @@
 					</select>
 				</div>
 			</div>
+
+			<div class="setting">
+				<span>z-axis</span>
+				<div style="display: flex; gap: 5px;">
+					<select
+						value={settings.z}
+						onchange={handleZAxisChange}
+						size={columns.length + 1}
+						disabled={settings.type !== 'bar'}
+					>
+						<option value="">none</option>
+						{#each columns as column}
+							<option value={column.name}>{column.name}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
 		</form>
 	</section>
 {/if}
@@ -94,7 +123,6 @@
 		position: absolute;
 		top: 10px;
 		right: 10px;
-		height: 170px;
 		width: 200px;
 		background: hsla(0, 0%, 5%, 0.8);
 		border: 1px solid hsl(0deg 0% 20%);