Ant-design-pro: Pie Chart with Legend loads small before window resize

[bgold0]

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Anyone with any guidance would be greatly appreciated

Reproduction link

DOESN'T WORK: Put the pie inside of a Col
https://github.com/emaxedon/ant-pie-chart-bug

WORKS: If you put the pie outside of a Col
https://github.com/emaxedon/ant-pie-chart-bug/tree/working

https://streamable.com/6o3z5

Steps to reproduce

• Add Pie chart that is in demo to a Card
• Load Pie Chart with legend

What is expected?

The pie chart to be full width

What is actually happening?

Pie chart is very small

| Environment | Info |
|---|---|
| antd | 3.13.2 |
| React | 16.14.1 |
| System | OSX |
| Browser | Chrome |

[chenshuai2144]

How can I view the code?

[bgold0]

@chenshuai2144 here is a reproducible repo. Master branch doesn't work until you resize, and I made another branch that show if you put it outside of a Col it does work.

DOESN'T WORK: Put the pie inside of a Col
https://github.com/emaxedon/ant-pie-chart-bug

WORKS: If you put the pie outside of a Col
https://github.com/emaxedon/ant-pie-chart-bug/tree/working

This is for almost every type of graph. Not just PIE

[chenshuai2144]

Thank you for your help, I have found the problem, you can use it by delaying the home in this icon, wrapping it with ant's card, and this is loading=true. After the loading is complete, set loading=false

[bgold0]

@chenshuai2144 thank you for the response but I do not understand. Could you give example? How do you "delaying the home in this icon" and know when it is loaded?

[chenshuai2144]

look in IntroduceRow

class DEMO extends React.Component {
  state = {
    loading: true
  };
  componentDidMount() {
    this.setState({
      loading: false
    });
  }
  render() {
    const { loading } = this.state;
    return (
      <ChartCard
        bordered={false}
        loading={loading}
        title="Visits"
        contentHeight={46}
      >
        <MiniArea color="#975FE4" data={visitData} />
      </ChartCard>
    );
  }
}

[bgold0]

@chenshuai2144 I appreciate the suggestion but this does not work. This is very much a bug that needs to be fixed.

[emaxedon]

@chenshuai2144 Your delay technique works sometimes, and other times it does not. The main issue is that when a Pie component is placed inside a Col, the chart does not render properly.

import React, { Component } from "react";
import { Row, Col } from "antd";
import { ChartCard, Pie } from "ant-design-pro/lib/Charts";
import "ant-design-pro/dist/ant-design-pro.css";

import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        loading: false
      });
    }, 1000);
  }

  render() {
    const { loading } = this.state;

    const data = [
      {
        x: "Foo",
        y: 100
      },
      {
        x: "Bar",
        y: 200
      }
    ];

    return (
      <Row gutter={16}>
        <Col span={12} />
        <Col span={12}>
          <ChartCard
            title="Foo Chart"
            loading={loading}
            contentHeight={500}
            bordered={false}
          >
            <Pie data={data} colors={["#F04864", "#1790FF"]} hasLegend />
          </ChartCard>
        </Col>
      </Row>
    );
  }
}

export default App;

Please take a look at the above code. You'll notice on a widescreen it renders "ok", with the delay. When rendering on a smaller screen it renders improperly sometimes (see attached image).

Your delay fix works sometimes; what else can we do to make sure the Pie chart works all the time (including when resizing the screen, when on mobile, etc.). Please demonstrate a working example using the code above (wrapped in the Col).

[taditang]

Same problem.When container is small, pie chart render too small.When I set styles.hasLegend to false, it's OK, so I know why it happen. in css file there are these css code:
&.hasLegend .chart {
width: ~'calc(100% - 240px)';
}
It will calc chart width, so i add a custom classname 'my-pie' to Pie component, and add css
.my-pie > div{
width: 100% !important;
}

[geyuqiu]

@taditang

.antd-pro-charts-pie-pie .antd-pro-charts-pie-legend {
  min-width: 400px
}