import React, { Component } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

class Chart4 extends Component {
  componentDidMount() {
    let root = am5.Root.new("Chart4");

    root._logo.dispose();
    root.setThemes([am5themes_Animated.new(root)]);

    // Create chart
    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
    let chart = root.container.children.push(am5percent.SlicedChart.new(root, {
      layout: root.verticalLayout
    }));


    // Create series
    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
    let series = chart.series.push(am5percent.PyramidSeries.new(root, {
      orientation: "vertical",
      valueField: "value",
      categoryField: "category"
    }));


    // Set data
    // https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
    series.data.setAll([
      { value: 10, category: "부계면" },
      { value: 9, category: "소보면" },
      { value: 6, category: "군위읍" },
      { value: 5, category: "우보면" },
      { value: 4, category: "의흥면" },
      { value: 3, category: "삼국유사면" },
      { value: 3, category: "산성면" },
      { value: 2, category: "효령면" }
    ].reverse());


    // Play initial series animation
    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
    series.appear();


    // Create legend
    // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
    let legend = chart.children.push(am5.Legend.new(root, {
      centerX: am5.percent(50),
      x: am5.percent(50),
      marginTop: 15,
      marginBottom: 15
    }));

    legend.data.setAll(am5.array.copy(series.dataItems).reverse());


    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    chart.appear(1000, 100);

    this.root = root;
  }
  componentWillUnmount() {
    if (this.root) {
      this.root.dispose();
    }
  }
  render() {
    return <div id="Chart4" style={{ width: "100%", height: "80%" }}></div>
  }
}

export default Chart4;