"Can't get dom width or height" incorrectly fires for width/height values of 0.

Version

4.2.1

Steps to reproduce

This warning from echarts: https://github.com/apache/incubator-echarts/blob/b6ab21159617b45c8077d998d468977cdd87d146/src/echarts.js#L1999 seems to be triggered when !dom.clientWidth, however I believe it is valid for dom.clientWidth to have a value of 0.

I’m not sure why this warning was added, but I think the check should be dom.clientWidth === undefined if the check is for a failure of the clientWidth API to exist.

What is expected?

warning should not occur for element width/height of 0

What is actually happening?

warning is logged.

---

I’m happy to resolve this issue, but I’d like some confirmation my hunch is correct, or a clarification for why it is not.

[lougroshek]

I’m seeing this during jest testing and am providing parent width and height (and have also attempted to set window innerHeight and innerWidth in various ways). Just a warning, but would love if we could resolve somehow.

 console.warn
    Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

      at Object.init$1 [as init] (node_modules/echarts/lib/core/echarts.js:2226:15)
      at EChartsReact.Object.<anonymous>.EChartsReactCore.getEchartsInstance (node_modules/echarts-for-react/src/core.tsx:89:68)
      at EChartsReact.Object.<anonymous>.EChartsReactCore.updateEChartsOption (node_modules/echarts-for-react/src/core.tsx:160:33)
      at EChartsReact.Object.<anonymous>.EChartsReactCore.renderNewEcharts (node_modules/echarts-for-react/src/core.tsx:114:34)
      at EChartsReact.Object.<anonymous>.EChartsReactCore.componentDidMount (node_modules/echarts-for-react/src/core.tsx:31:10)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20663:24)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)

test('Renders scatter plot ReportWidget', () => {
  window.innerWidth = 1200
  window.innerHeight = 800
  render(
    <ApolloWrapper>
      <Router>
        <ThemeProvider theme={theme}>
          <div style={{ width: '600px', height: '400px' }}>
            <ReportWidget report="scatter" />
          </div>
        </ThemeProvider>
      </Router>
    </ApolloWrapper>
  )
})

Have also tried other ways of setting window size before the test, both in beforeEach() and in the test itself:

# Global provided by jest
global.innerHeight = 800
  global.innerWidth = 1200
# Object.defineProperty
  Object.defineProperty(window, 'innerWidth', {
    writable: true,
    configurable: true,
    value: 1200,
  })
  Object.defineProperty(window, 'innerHeight', {
    writable: true,
    configurable: true,
    value: 800,
  })

echarts 5.1.2 echarts-for-react 3.0.1 jest-dom 5.14.1

[bryanmillerph]

Version

4.2.1

Steps to reproduce

This warning from echarts: https://github.com/apache/incubator-echarts/blob/b6ab21159617b45c8077d998d468977cdd87d146/src/echarts.js#L1999 seems to be triggered when !dom.clientWidth, however I believe it is valid for dom.clientWidth to have a value of 0. I’m not sure why this warning was added, but I think the check should be dom.clientWidth === undefined if the check is for a failure of the clientWidth API to exist.

What is expected?

warning should not occur for element width/height of 0

What is actually happening?

warning is logged. I’m happy to resolve this issue, but I’d like some confirmation my hunch is correct, or a clarification for why it is not.

I got this warning because I using tab card, when page onload the container set by CSS with display:none . So I got this warning, but when switch the tab card, container will be assigned the width/height instead of 0. So for me just ignored this warn.

echarts-5.1.1: I was also getting this issue when a <div> containing the chart is initially set to display:none;