obsidian-plugin/h-sphere_sql-seal-charts
1
0
Fork 0
mirror of https://github.com/h-sphere/sql-seal-charts.git synced 2026-07-22 05:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: chart now reacts to resizes

Browse source
This commit is contained in:
Kacper Kula 2025-08-13 12:34:34 +01:00
parent ccf7b02733
commit c3e8e6c6a9
1 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/chartRenderer.ts
View file

@ -39,6 +39,7 @@ export class ChartRenderer implements RendererConfig {
render(config: Config, el: HTMLElement) {
let isRendered: boolean = false
let chart: echarts.ECharts | null = null
let resizeObserver: ResizeObserver | null = null
return {
render: ({ columns, data, flags }: { columns: string[], data: Record<string, unknown>[], flags: Record<string, boolean> }) => {
@ -78,17 +79,40 @@ export class ChartRenderer implements RendererConfig {
el.empty()
const container = el.createDiv({ cls: 'sqlseal-charts-container' })
const chartDiv = container.createDiv()
requestAnimationFrame(() => {
const box = container.getBoundingClientRect()
const width = box.width
const height = box.height
chart = echarts.init(chartDiv, null, { height: height, width: width, })
chart = echarts.init(chartDiv, null, { height: height, width: width })
chart.setOption(configRecord)
isRendered = true
// Set up ResizeObserver to handle container size changes
resizeObserver = new ResizeObserver((entries) => {
if (chart && entries.length > 0) {
const entry = entries[0]
const { width: newWidth } = entry.contentRect
// Maintain 16:9 aspect ratio
const newHeight = (newWidth * 9) / 16
chart.resize({ width: newWidth, height: newHeight })
}
})
resizeObserver.observe(container)
})
},
error: (error: string) => {
return createDiv({ text: error, cls: 'sqlseal-error' })
},
destroy: () => {
if (resizeObserver) {
resizeObserver.disconnect()
resizeObserver = null
}
if (chart) {
chart.dispose()
chart = null
}
}
}
}