@czi-sds/data-viz 2.2.0 → 2.4.0

package/dist/shared/HeatmapChart.cjs.js

@@ -0,0 +1,349 @@
+"use client";
+const require_objectSpread2 = require("./objectSpread2.cjs.js");
+let echarts = require("echarts");
+let react = require("react");
+let lodash = require("lodash");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_objectSpread2.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/common/utils.ts
+const EMPTY_OBJECT = {};
+//#endregion
+//#region src/core/HeatmapChart/hooks/utils.ts
+const _excluded$1 = [
+	"axisPointer",
+	"dataZoom",
+	"series",
+	"xAxis",
+	"yAxis"
+];
+const DEFAULT_ITEM_STYLE = { color() {
+	return "rgb(0, 0, 0)";
+} };
+function createChartOptions(props) {
+	const { axisPointer, camera, data, dataZoom, emphasis, encode, grid: gridProp, itemStyle = DEFAULT_ITEM_STYLE, options, symbolSize, symbol = "rect" } = props;
+	const { defaultAxisPointer, defaultDataZoom, defaultEmphasis, defaultGrid, defaultXAxis, defaultYAxis } = generateDefaultValues(props);
+	const customGrid = typeof gridProp === "function" ? gridProp(defaultGrid) : gridProp;
+	const _ref = options || {}, { axisPointer: optionsAxisPointer, dataZoom: optionsDataZoom, series: optionsSeries, xAxis: optionsXAxis, yAxis: optionsYAxis } = _ref, optionsRest = require_objectSpread2._objectWithoutProperties(_ref, _excluded$1);
+	return require_objectSpread2._objectSpread2({
+		animation: false,
+		axisPointer: mergeAxisPointer(defaultAxisPointer, axisPointer, optionsAxisPointer),
+		dataZoom: (camera === null || camera === void 0 ? void 0 : camera.active) ? mergeDataZoom(defaultDataZoom, dataZoom, optionsDataZoom) : [],
+		dataset: { source: data },
+		grid: customGrid || defaultGrid,
+		series: [Object.assign({
+			emphasis: Object.assign(defaultEmphasis, emphasis),
+			encode,
+			itemStyle,
+			legendHoverLink: false,
+			symbol,
+			symbolSize
+		}, optionsSeries ? Array.isArray(optionsSeries) ? optionsSeries[0] : optionsSeries : [], {
+			symbol,
+			type: "scatter"
+		})],
+		xAxis: [Object.assign(defaultXAxis, optionsXAxis ? Array.isArray(optionsXAxis) ? optionsXAxis[0] : optionsXAxis : {})],
+		yAxis: [Object.assign(defaultYAxis, optionsYAxis ? Array.isArray(optionsYAxis) ? optionsYAxis[0] : optionsYAxis : {})]
+	}, optionsRest);
+}
+function mergeAxisPointer(defaultAxisPointer, axisPointer, optionsAxisPointer) {
+	const finalAxisPointer = Array.isArray(axisPointer) ? axisPointer : [axisPointer, axisPointer];
+	const finalOptionsAxisPointer = Array.isArray(optionsAxisPointer) ? optionsAxisPointer : [optionsAxisPointer, optionsAxisPointer];
+	return [require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultAxisPointer), finalAxisPointer[0]), finalOptionsAxisPointer === null || finalOptionsAxisPointer === void 0 ? void 0 : finalOptionsAxisPointer[0]), require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultAxisPointer), finalAxisPointer[1]), finalOptionsAxisPointer[1])];
+}
+function mergeDataZoom(defaultDataZoom, dataZoom, optionsDataZoom) {
+	const finalDataZoom = Array.isArray(dataZoom) ? dataZoom : [dataZoom, dataZoom];
+	const finalOptionsDataZoom = Array.isArray(optionsDataZoom) ? optionsDataZoom : [optionsDataZoom, optionsDataZoom];
+	return [require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultDataZoom[0]), finalDataZoom[0]), finalOptionsDataZoom === null || finalOptionsDataZoom === void 0 ? void 0 : finalOptionsDataZoom[0]), require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultDataZoom[1]), finalDataZoom[1]), finalOptionsDataZoom[1])];
+}
+function generateDefaultValues(props) {
+	const { camera, height, symbol, width, xAxisData, yAxisData } = props;
+	const defaultGrid = {
+		height: `${height}px`,
+		left: 0,
+		top: 0,
+		width: `${width}px`
+	};
+	const defaultAxisPointer = {
+		label: { show: false },
+		show: false,
+		triggerOn: "mousemove"
+	};
+	const defaultXAxis = {
+		axisLabel: {
+			fontSize: 0,
+			rotate: 90
+		},
+		axisLine: { show: false },
+		axisTick: { show: false },
+		boundaryGap: true,
+		data: xAxisData,
+		splitLine: { show: false },
+		type: "category"
+	};
+	const defaultYAxis = {
+		axisLabel: { fontSize: 0 },
+		axisLine: { show: false },
+		axisTick: { show: false },
+		boundaryGap: true,
+		data: yAxisData,
+		splitLine: { show: false }
+	};
+	const defaultEmphasis = {
+		itemStyle: {
+			borderColor: symbol === "circle" ? "black" : "white",
+			borderType: "solid",
+			borderWidth: symbol === "circle" ? 2 : 4,
+			opacity: 1
+		},
+		scale: false
+	};
+	const defaultCamera = {
+		height: camera && camera.height ? camera.height : 20,
+		width: camera && camera.width ? camera.width : 40
+	};
+	return {
+		defaultAxisPointer,
+		defaultDataZoom: [{
+			endValue: defaultCamera.width - 1,
+			filterMode: "filter",
+			moveOnMouseMove: true,
+			moveOnMouseWheel: false,
+			orient: "horizontal",
+			preventDefaultMouseMove: true,
+			startValue: 0,
+			throttle: 0,
+			type: "inside",
+			xAxisIndex: 0,
+			zoomOnMouseWheel: false
+		}, {
+			endValue: defaultCamera.height - 1,
+			filterMode: "filter",
+			moveOnMouseMove: true,
+			moveOnMouseWheel: true,
+			orient: "vertical",
+			preventDefaultMouseMove: true,
+			startValue: 0,
+			throttle: 0,
+			type: "inside",
+			yAxisIndex: 0,
+			zoomOnMouseWheel: false
+		}],
+		defaultEmphasis,
+		defaultGrid,
+		defaultXAxis,
+		defaultYAxis
+	};
+}
+//#endregion
+//#region src/core/HeatmapChart/hooks/useUpdateChart.ts
+const UPDATE_THROTTLE_MS = 100;
+function useUpdateChart({ axisPointer, camera, chart, data, dataZoom, emphasis, xAxisData, yAxisData, width, height, encode, itemStyle, symbol, symbolSize, grid, options, onEvents }) {
+	const throttledUpdateChart = (0, react.useMemo)(() => {
+		return (0, lodash.throttle)(() => {
+			if (!chart || !data || !xAxisData || !yAxisData) return;
+			chart.resize();
+			const chartOptions = createChartOptions({
+				axisPointer,
+				camera,
+				data,
+				dataZoom,
+				emphasis,
+				encode,
+				grid,
+				height,
+				itemStyle,
+				options,
+				symbol,
+				symbolSize,
+				width,
+				xAxisData,
+				yAxisData
+			});
+			chart.setOption(chartOptions, { replaceMerge: ["dataZoom", "tooltip"] });
+			/**
+			* We need to remove old event listeners and bind new ones to
+			* make sure that the event listeners are updated when the props change.
+			*/
+			if (onEvents) {
+				for (const eventName in onEvents) if (Object.prototype.hasOwnProperty.call(onEvents, eventName) && typeof eventName === "string" && typeof onEvents[eventName] === "function") {
+					chart.off(eventName);
+					chart.on(eventName, (event) => {
+						onEvents[eventName](event, chart);
+					});
+				}
+			}
+		}, UPDATE_THROTTLE_MS, { trailing: true });
+	}, [
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		xAxisData,
+		yAxisData,
+		width,
+		height,
+		encode,
+		itemStyle,
+		symbol,
+		symbolSize,
+		grid,
+		options,
+		onEvents
+	]);
+	(0, react.useEffect)(() => {
+		return () => throttledUpdateChart.cancel();
+	}, [throttledUpdateChart]);
+	(0, react.useEffect)(() => {
+		throttledUpdateChart();
+	}, [
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		xAxisData,
+		yAxisData,
+		throttledUpdateChart,
+		width,
+		height,
+		encode,
+		itemStyle,
+		symbol,
+		symbolSize,
+		grid,
+		options,
+		onEvents
+	]);
+}
+//#endregion
+//#region src/core/HeatmapChart/style.ts
+const ChartContainer = (0, _emotion_styled.default)("div")`
+  ${getWidthAndHeight}
+`;
+function getWidthAndHeight({ width, height }) {
+	return `
+    width: ${width}px;
+    height: ${height}px;
+  `;
+}
+//#endregion
+//#region src/core/HeatmapChart/index.tsx
+const _excluded = [
+	"axisPointer",
+	"width",
+	"height",
+	"echartsRendererMode",
+	"camera",
+	"dataZoom",
+	"onEvents",
+	"xAxisData",
+	"yAxisData",
+	"data",
+	"encode",
+	"emphasis",
+	"itemStyle",
+	"symbol",
+	"symbolSize",
+	"grid",
+	"options"
+];
+const HeatmapChart = (0, react.forwardRef)((props, ref) => {
+	const { axisPointer, width, height, echartsRendererMode = "svg", camera, dataZoom, onEvents, xAxisData, yAxisData, data, encode, emphasis, itemStyle, symbol, symbolSize = 5, grid, options } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	if (!width || !height) throw Error("Heatmap must have width and height bigger than Zero!");
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* (thuang): We need both a state and a ref to store the chart instance, so
+	* some hooks can opt out of re-rendering when the chart instance changes.
+	*/
+	const [chart, setChart] = (0, react.useState)(null);
+	const chartRef = (0, react.useRef)(chart);
+	/**
+	* (thuang): Use this ref to store the onEvents prop to prevent
+	* unnecessary re-renders when the onEvents prop changes.
+	* NOTE: This implies that `onEvents` prop changes alone from the parent
+	* won't re-render the chart
+	*/
+	const onEventsRef = (0, react.useRef)(onEvents);
+	/**
+	* (thuang): Use this function to dispose the chart instance for both
+	* the state and the ref. This is to prevent memory leaks.
+	*/
+	const disposeChart = (0, react.useCallback)(() => {
+		var _chartRef$current;
+		(_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 || _chartRef$current.dispose();
+		chartRef.current = null;
+		setChart(null);
+	}, []);
+	const initChart = (0, react.useCallback)(() => {
+		const onEventsCurrent = onEventsRef.current;
+		const { current } = innerRef;
+		if (!current || chartRef.current || (current === null || current === void 0 ? void 0 : current.getAttribute("height")) === "0" || (current === null || current === void 0 ? void 0 : current.getAttribute("width")) === "0") return;
+		const rawChart = (0, echarts.init)(current, EMPTY_OBJECT, {
+			renderer: echartsRendererMode,
+			useDirtyRect: true
+		});
+		if (onEventsCurrent) bindEvents(rawChart, onEventsCurrent);
+		setChart(rawChart);
+		chartRef.current = rawChart;
+		return () => {
+			disposeChart();
+			if (onEventsCurrent) {
+				for (const eventName in onEventsCurrent) if (Object.prototype.hasOwnProperty.call(onEventsCurrent, eventName) && typeof eventName === "string" && typeof onEventsCurrent[eventName] === "function") rawChart.off(eventName, onEventsCurrent[eventName]);
+			}
+		};
+	}, [echartsRendererMode, disposeChart]);
+	(0, react.useEffect)(() => {
+		disposeChart();
+		initChart();
+	}, [initChart, disposeChart]);
+	useUpdateChart({
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		encode,
+		grid,
+		height,
+		itemStyle,
+		onEvents,
+		options,
+		symbol,
+		symbolSize,
+		width,
+		xAxisData,
+		yAxisData
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartContainer, require_objectSpread2._objectSpread2({
+		height,
+		width,
+		ref: handleRef
+	}, rest));
+	function bindEvents(instance, events) {
+		function innerBindEvent(eventName, func) {
+			if (typeof eventName === "string" && typeof func === "function") instance.on(eventName, (param) => {
+				func(param, instance);
+			});
+		}
+		for (const eventName in events) if (Object.prototype.hasOwnProperty.call(events, eventName)) innerBindEvent(eventName, events[eventName]);
+	}
+	function handleRef(element) {
+		innerRef.current = element;
+		if (!ref) return;
+		if (typeof ref === "function") ref(element);
+		else ref.current = element;
+	}
+});
+var HeatmapChart_default = (0, react.memo)(HeatmapChart);
+//#endregion
+Object.defineProperty(exports, "HeatmapChart_default", {
+	enumerable: true,
+	get: function() {
+		return HeatmapChart_default;
+	}
+});

package/dist/shared/HeatmapChart.esm.js

@@ -0,0 +1,342 @@
+"use client";
+import { n as _objectWithoutProperties, t as _objectSpread2 } from "./objectSpread2.esm.js";
+import { init } from "echarts";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { throttle } from "lodash";
+import styled from "@emotion/styled";
+import { jsx } from "react/jsx-runtime";
+//#region src/common/utils.ts
+const EMPTY_OBJECT = {};
+//#endregion
+//#region src/core/HeatmapChart/hooks/utils.ts
+const _excluded$1 = [
+	"axisPointer",
+	"dataZoom",
+	"series",
+	"xAxis",
+	"yAxis"
+];
+const DEFAULT_ITEM_STYLE = { color() {
+	return "rgb(0, 0, 0)";
+} };
+function createChartOptions(props) {
+	const { axisPointer, camera, data, dataZoom, emphasis, encode, grid: gridProp, itemStyle = DEFAULT_ITEM_STYLE, options, symbolSize, symbol = "rect" } = props;
+	const { defaultAxisPointer, defaultDataZoom, defaultEmphasis, defaultGrid, defaultXAxis, defaultYAxis } = generateDefaultValues(props);
+	const customGrid = typeof gridProp === "function" ? gridProp(defaultGrid) : gridProp;
+	const _ref = options || {}, { axisPointer: optionsAxisPointer, dataZoom: optionsDataZoom, series: optionsSeries, xAxis: optionsXAxis, yAxis: optionsYAxis } = _ref, optionsRest = _objectWithoutProperties(_ref, _excluded$1);
+	return _objectSpread2({
+		animation: false,
+		axisPointer: mergeAxisPointer(defaultAxisPointer, axisPointer, optionsAxisPointer),
+		dataZoom: (camera === null || camera === void 0 ? void 0 : camera.active) ? mergeDataZoom(defaultDataZoom, dataZoom, optionsDataZoom) : [],
+		dataset: { source: data },
+		grid: customGrid || defaultGrid,
+		series: [Object.assign({
+			emphasis: Object.assign(defaultEmphasis, emphasis),
+			encode,
+			itemStyle,
+			legendHoverLink: false,
+			symbol,
+			symbolSize
+		}, optionsSeries ? Array.isArray(optionsSeries) ? optionsSeries[0] : optionsSeries : [], {
+			symbol,
+			type: "scatter"
+		})],
+		xAxis: [Object.assign(defaultXAxis, optionsXAxis ? Array.isArray(optionsXAxis) ? optionsXAxis[0] : optionsXAxis : {})],
+		yAxis: [Object.assign(defaultYAxis, optionsYAxis ? Array.isArray(optionsYAxis) ? optionsYAxis[0] : optionsYAxis : {})]
+	}, optionsRest);
+}
+function mergeAxisPointer(defaultAxisPointer, axisPointer, optionsAxisPointer) {
+	const finalAxisPointer = Array.isArray(axisPointer) ? axisPointer : [axisPointer, axisPointer];
+	const finalOptionsAxisPointer = Array.isArray(optionsAxisPointer) ? optionsAxisPointer : [optionsAxisPointer, optionsAxisPointer];
+	return [_objectSpread2(_objectSpread2(_objectSpread2({}, defaultAxisPointer), finalAxisPointer[0]), finalOptionsAxisPointer === null || finalOptionsAxisPointer === void 0 ? void 0 : finalOptionsAxisPointer[0]), _objectSpread2(_objectSpread2(_objectSpread2({}, defaultAxisPointer), finalAxisPointer[1]), finalOptionsAxisPointer[1])];
+}
+function mergeDataZoom(defaultDataZoom, dataZoom, optionsDataZoom) {
+	const finalDataZoom = Array.isArray(dataZoom) ? dataZoom : [dataZoom, dataZoom];
+	const finalOptionsDataZoom = Array.isArray(optionsDataZoom) ? optionsDataZoom : [optionsDataZoom, optionsDataZoom];
+	return [_objectSpread2(_objectSpread2(_objectSpread2({}, defaultDataZoom[0]), finalDataZoom[0]), finalOptionsDataZoom === null || finalOptionsDataZoom === void 0 ? void 0 : finalOptionsDataZoom[0]), _objectSpread2(_objectSpread2(_objectSpread2({}, defaultDataZoom[1]), finalDataZoom[1]), finalOptionsDataZoom[1])];
+}
+function generateDefaultValues(props) {
+	const { camera, height, symbol, width, xAxisData, yAxisData } = props;
+	const defaultGrid = {
+		height: `${height}px`,
+		left: 0,
+		top: 0,
+		width: `${width}px`
+	};
+	const defaultAxisPointer = {
+		label: { show: false },
+		show: false,
+		triggerOn: "mousemove"
+	};
+	const defaultXAxis = {
+		axisLabel: {
+			fontSize: 0,
+			rotate: 90
+		},
+		axisLine: { show: false },
+		axisTick: { show: false },
+		boundaryGap: true,
+		data: xAxisData,
+		splitLine: { show: false },
+		type: "category"
+	};
+	const defaultYAxis = {
+		axisLabel: { fontSize: 0 },
+		axisLine: { show: false },
+		axisTick: { show: false },
+		boundaryGap: true,
+		data: yAxisData,
+		splitLine: { show: false }
+	};
+	const defaultEmphasis = {
+		itemStyle: {
+			borderColor: symbol === "circle" ? "black" : "white",
+			borderType: "solid",
+			borderWidth: symbol === "circle" ? 2 : 4,
+			opacity: 1
+		},
+		scale: false
+	};
+	const defaultCamera = {
+		height: camera && camera.height ? camera.height : 20,
+		width: camera && camera.width ? camera.width : 40
+	};
+	return {
+		defaultAxisPointer,
+		defaultDataZoom: [{
+			endValue: defaultCamera.width - 1,
+			filterMode: "filter",
+			moveOnMouseMove: true,
+			moveOnMouseWheel: false,
+			orient: "horizontal",
+			preventDefaultMouseMove: true,
+			startValue: 0,
+			throttle: 0,
+			type: "inside",
+			xAxisIndex: 0,
+			zoomOnMouseWheel: false
+		}, {
+			endValue: defaultCamera.height - 1,
+			filterMode: "filter",
+			moveOnMouseMove: true,
+			moveOnMouseWheel: true,
+			orient: "vertical",
+			preventDefaultMouseMove: true,
+			startValue: 0,
+			throttle: 0,
+			type: "inside",
+			yAxisIndex: 0,
+			zoomOnMouseWheel: false
+		}],
+		defaultEmphasis,
+		defaultGrid,
+		defaultXAxis,
+		defaultYAxis
+	};
+}
+//#endregion
+//#region src/core/HeatmapChart/hooks/useUpdateChart.ts
+const UPDATE_THROTTLE_MS = 100;
+function useUpdateChart({ axisPointer, camera, chart, data, dataZoom, emphasis, xAxisData, yAxisData, width, height, encode, itemStyle, symbol, symbolSize, grid, options, onEvents }) {
+	const throttledUpdateChart = useMemo(() => {
+		return throttle(() => {
+			if (!chart || !data || !xAxisData || !yAxisData) return;
+			chart.resize();
+			const chartOptions = createChartOptions({
+				axisPointer,
+				camera,
+				data,
+				dataZoom,
+				emphasis,
+				encode,
+				grid,
+				height,
+				itemStyle,
+				options,
+				symbol,
+				symbolSize,
+				width,
+				xAxisData,
+				yAxisData
+			});
+			chart.setOption(chartOptions, { replaceMerge: ["dataZoom", "tooltip"] });
+			/**
+			* We need to remove old event listeners and bind new ones to
+			* make sure that the event listeners are updated when the props change.
+			*/
+			if (onEvents) {
+				for (const eventName in onEvents) if (Object.prototype.hasOwnProperty.call(onEvents, eventName) && typeof eventName === "string" && typeof onEvents[eventName] === "function") {
+					chart.off(eventName);
+					chart.on(eventName, (event) => {
+						onEvents[eventName](event, chart);
+					});
+				}
+			}
+		}, UPDATE_THROTTLE_MS, { trailing: true });
+	}, [
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		xAxisData,
+		yAxisData,
+		width,
+		height,
+		encode,
+		itemStyle,
+		symbol,
+		symbolSize,
+		grid,
+		options,
+		onEvents
+	]);
+	useEffect(() => {
+		return () => throttledUpdateChart.cancel();
+	}, [throttledUpdateChart]);
+	useEffect(() => {
+		throttledUpdateChart();
+	}, [
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		xAxisData,
+		yAxisData,
+		throttledUpdateChart,
+		width,
+		height,
+		encode,
+		itemStyle,
+		symbol,
+		symbolSize,
+		grid,
+		options,
+		onEvents
+	]);
+}
+//#endregion
+//#region src/core/HeatmapChart/style.ts
+const ChartContainer = styled("div")`
+  ${getWidthAndHeight}
+`;
+function getWidthAndHeight({ width, height }) {
+	return `
+    width: ${width}px;
+    height: ${height}px;
+  `;
+}
+//#endregion
+//#region src/core/HeatmapChart/index.tsx
+const _excluded = [
+	"axisPointer",
+	"width",
+	"height",
+	"echartsRendererMode",
+	"camera",
+	"dataZoom",
+	"onEvents",
+	"xAxisData",
+	"yAxisData",
+	"data",
+	"encode",
+	"emphasis",
+	"itemStyle",
+	"symbol",
+	"symbolSize",
+	"grid",
+	"options"
+];
+var HeatmapChart_default = memo(forwardRef((props, ref) => {
+	const { axisPointer, width, height, echartsRendererMode = "svg", camera, dataZoom, onEvents, xAxisData, yAxisData, data, encode, emphasis, itemStyle, symbol, symbolSize = 5, grid, options } = props, rest = _objectWithoutProperties(props, _excluded);
+	if (!width || !height) throw Error("Heatmap must have width and height bigger than Zero!");
+	const innerRef = useRef(null);
+	/**
+	* (thuang): We need both a state and a ref to store the chart instance, so
+	* some hooks can opt out of re-rendering when the chart instance changes.
+	*/
+	const [chart, setChart] = useState(null);
+	const chartRef = useRef(chart);
+	/**
+	* (thuang): Use this ref to store the onEvents prop to prevent
+	* unnecessary re-renders when the onEvents prop changes.
+	* NOTE: This implies that `onEvents` prop changes alone from the parent
+	* won't re-render the chart
+	*/
+	const onEventsRef = useRef(onEvents);
+	/**
+	* (thuang): Use this function to dispose the chart instance for both
+	* the state and the ref. This is to prevent memory leaks.
+	*/
+	const disposeChart = useCallback(() => {
+		var _chartRef$current;
+		(_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 || _chartRef$current.dispose();
+		chartRef.current = null;
+		setChart(null);
+	}, []);
+	const initChart = useCallback(() => {
+		const onEventsCurrent = onEventsRef.current;
+		const { current } = innerRef;
+		if (!current || chartRef.current || (current === null || current === void 0 ? void 0 : current.getAttribute("height")) === "0" || (current === null || current === void 0 ? void 0 : current.getAttribute("width")) === "0") return;
+		const rawChart = init(current, EMPTY_OBJECT, {
+			renderer: echartsRendererMode,
+			useDirtyRect: true
+		});
+		if (onEventsCurrent) bindEvents(rawChart, onEventsCurrent);
+		setChart(rawChart);
+		chartRef.current = rawChart;
+		return () => {
+			disposeChart();
+			if (onEventsCurrent) {
+				for (const eventName in onEventsCurrent) if (Object.prototype.hasOwnProperty.call(onEventsCurrent, eventName) && typeof eventName === "string" && typeof onEventsCurrent[eventName] === "function") rawChart.off(eventName, onEventsCurrent[eventName]);
+			}
+		};
+	}, [echartsRendererMode, disposeChart]);
+	useEffect(() => {
+		disposeChart();
+		initChart();
+	}, [initChart, disposeChart]);
+	useUpdateChart({
+		axisPointer,
+		camera,
+		chart,
+		data,
+		dataZoom,
+		emphasis,
+		encode,
+		grid,
+		height,
+		itemStyle,
+		onEvents,
+		options,
+		symbol,
+		symbolSize,
+		width,
+		xAxisData,
+		yAxisData
+	});
+	return /* @__PURE__ */ jsx(ChartContainer, _objectSpread2({
+		height,
+		width,
+		ref: handleRef
+	}, rest));
+	function bindEvents(instance, events) {
+		function innerBindEvent(eventName, func) {
+			if (typeof eventName === "string" && typeof func === "function") instance.on(eventName, (param) => {
+				func(param, instance);
+			});
+		}
+		for (const eventName in events) if (Object.prototype.hasOwnProperty.call(events, eventName)) innerBindEvent(eventName, events[eventName]);
+	}
+	function handleRef(element) {
+		innerRef.current = element;
+		if (!ref) return;
+		if (typeof ref === "function") ref(element);
+		else ref.current = element;
+	}
+}));
+//#endregion
+export { HeatmapChart_default as t };