<template>
  <div ref="Dounutchart" style="width: 500px; height: 500px;"></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export default {
  name: "Dounutchart",
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      // Initialize root
      const root = am5.Root.new(this.$refs.Dounutchart);

      // Apply themes
      root.setThemes([
        am5themes_Animated.new(root)
      ]);

      // Create chart
      const chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout,
        innerRadius: am5.percent(50)  // Adjusted innerRadius for a donut chart
      }));

      // Create series
      const series = chart.series.push(am5percent.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category",
        alignLabels: false
      }));

      // Add static label
      // const label = chart.plotContainer.children.push(am5.Label.new(root, {
      //   text: "Total",
      //   x: am5.p50,
      //   y: am5.p50,
      //   centerX: am5.p50,
      //   centerY: am5.p50,
      //   fill: am5.color(0x000000),
      //   fontSize: 20,
      //   fontWeight: "bold"
      // }));

      series.labels.template.setAll({
        textType: "circular",
        centerX: am5.p50,
        centerY: am5.p50
      });

      // Set data
      series.data.setAll([
        { value: 10, category: "One" },
        { value: 9, category: "Two" },
      ]);

      // Create legend
      const legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.p50,
        x: am5.p50,
        marginTop: 15,
        marginBottom: 15
      }));

      legend.data.setAll(series.dataItems);

      // Play initial series animation
      series.appear(1000, 100);
    }
  }
};
</script>

<style scoped>
/* Add necessary styles here */
</style>
