Something went wrong. Try again.
svelte astro
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<script lang="ts"> // Minimal echarts scatter used as the corner inset for the 3D slice view. // No tooltip, no zoom, no axis selects: it just mirrors whatever points // are passed in, matching the X/Y columns currently picked in the 3D plot. import * as echarts from "echarts/core"; import { ScatterChart } from "echarts/charts"; import { CanvasRenderer } from "echarts/renderers";
echarts.use([ScatterChart, CanvasRenderer]);
let { data, color, xRange = [-1, 1], yRange = [-1, 1], }: { data: [number, number][]; color: string; xRange?: [number, number]; yRange?: [number, number]; } = $props();
let chart: echarts.ECharts | null = null; let resizeObserver: ResizeObserver | null = null;
function buildOption() { return { grid: { left: 0, right: 0, top: 0, bottom: 0 }, xAxis: { type: "value", min: xRange[0], max: xRange[1], axisLabel: { show: false }, axisTick: { show: false }, }, yAxis: { type: "value", min: yRange[0], max: yRange[1], axisLabel: { show: false }, axisTick: { show: false }, }, series: [ { type: "scatter", data, symbolSize: 4, itemStyle: { color, opacity: 1.0 }, large: true, animation: false, }, ], }; }
// Svelte action: init once on mount, dispose once on unmount. function mountChart(node: HTMLDivElement) { chart = echarts.init(node, null, { renderer: "canvas" }); chart.setOption(buildOption());
// Tracks this element's own box (the corner inset), so the chart // stays correctly sized even across the mobile CSS breakpoint. resizeObserver = new ResizeObserver(() => chart?.resize()); resizeObserver.observe(node);
return { destroy() { resizeObserver?.disconnect(); chart?.dispose(); chart = null; }, }; }
// Re-applies the option whenever `data` (or any other prop) changes, // which happens live as the slice sliders move. $effect(() => { if (chart) { chart.setOption(buildOption(), { notMerge: false }); } });</script>
<div class="slice-plot" use:mountChart></div>
<style> .slice-plot { width: 100%; height: 100%; }</style>