diff --git a/package.json b/package.json index 7f6eaa38..4df32ae9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@outerbase/astra-ui", - "version": "0.8.11", + "version": "0.8.13", "type": "module", "main": "dist/js/index.js", "module": "dist/js/index.js", diff --git a/src/components/charts/chart.ts b/src/components/charts/chart.ts index ca2cad07..56201b3c 100644 --- a/src/components/charts/chart.ts +++ b/src/components/charts/chart.ts @@ -29,6 +29,7 @@ import type { import { unsafeHTML } from 'lit/directives/unsafe-html.js' import { isDate } from '../../lib/format-date.js' import { OUTERBASE_API_DOMAIN } from '../../variables.js' +import { debounce } from 'lodash-es' // Register the required components echarts.use([ @@ -254,9 +255,7 @@ export default class AstraChart extends ClassifiedElement { override firstUpdated(_changedProperties: PropertyValueMap) { super.firstUpdated(_changedProperties) - this.initializeChart() - this.setupResizeObserver() } override updated(_changedProperties: PropertyValueMap | Map): void { @@ -334,6 +333,13 @@ export default class AstraChart extends ClassifiedElement { this.chartInstance = echarts.init(this.chartDiv, undefined, { renderer: 'canvas' }) this.chartInstance.setOption(this.getChartOptions()) + + if (this.resizeObserver) { + this.resizeObserver.disconnect() + delete this.resizeObserver + } + + this.setupResizeObserver() } private labelFormatter(value: unknown): string { @@ -543,7 +549,7 @@ export default class AstraChart extends ClassifiedElement { } private setupResizeObserver() { - this.resizeObserver = new ResizeObserver((entries) => { + const onResize = debounce((entries: ResizeObserverEntry[]) => { for (const entry of entries) { if (entry.target === this.chartDiv) { const { width, height } = entry.contentRect @@ -556,7 +562,9 @@ export default class AstraChart extends ClassifiedElement { } } } - }) + }, 50) + + this.resizeObserver = new ResizeObserver(onResize) if (this.chartDiv) { this.resizeObserver.observe(this.chartDiv) diff --git a/src/components/charts/composed.ts b/src/components/charts/composed.ts index bae70c0e..b41c71db 100644 --- a/src/components/charts/composed.ts +++ b/src/components/charts/composed.ts @@ -162,9 +162,7 @@ export default class AstraComposedChart extends AstraChart { // render chart const showNoDataLabel = (layer?.result === undefined || layer?.result?.length === 0) && layer?.type !== 'text' const chart = showNoDataLabel ? null : super.render() - const chartSection = html`
+ const chartSection = html`
${showNoDataLabel ? html`