at the end of the day, it was inevitable

frontend/app/components/common/charts/ECharts.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import echarts from 'echarts'
+import cx from 'classnames'
+
+function ECharts(props) {
+  const { options, style, className, loading, message } = props
+  const [chart, setChart] = useState(null)
+  const chartRef = useRef()
+
+  useEffect(() => {
+    const chart = echarts.init(chartRef.current, 'westeros')
+    chart.setOption({ ...options, resizeObserver }, true) // second param is for 'noMerge'
+    setChart(chart)
+    if (resizeObserver) resizeObserver.observe(chartRef.current)
+  }, [options])
+
+  useEffect(() => {
+    if (!chart) {
+      return
+    }
+    if (loading) {
+      chart.showLoading()
+      return
+    }
+
+    chart.hideLoading()
+  }, [chart, loading])
+
+  useEffect(() => {
+    if (chart && options && message) {
+      chart.clear()
+    }
+  }, [message])
+
+  const newStyle = {
+    height: 350,
+    ...style
+  }
+
+  return (
+    <div className="echarts-parent position-relative">
+      <div
+        ref={chartRef}
+        style={newStyle}
+        className={cx('echarts-react', className)}
+      />
+      {message ? <div className="no-data">{message}</div> : null}
+    </div>
+  )
+}
+
+ECharts.propTypes = {
+  loading: PropTypes.bool,
+  options: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  message: PropTypes.any
+}
+
+const resizeObserver = new window.ResizeObserver((entries) => {
+  entries.map(({ target }) => {
+    const instance = echarts.getInstanceByDom(target)
+    if (instance) {
+      instance.resize()
+    }
+  })
+})
+
+export default React.memo(ECharts)