<template>
  <div class="detail-page__panel panels">
    <div id="chartdiv">      
    </div>
  </div>
</template>

<style>
#chartdiv {
  width: auto;
  height: auto;
}
</style>

<!-- <script src="https://cdn.amcharts.com/lib/5/index.js"></script> -->
<!-- <script src="https://cdn.amcharts.com/lib/5/hierarchy.js"></script> -->
<!-- <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> -->
<!-- <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script> -->

<script>
// import "assets/common/js/chart/index.js";
// import "assets/common/js/chart/hierarchy.js";
// import "assets/common/js/chart/Animated.js";

am5.ready(function() {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
  ]);


// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
  width: am5.percent(50),
  height: am5.percent(20),
  layout: root.verticalLayout
}));


// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
var series = container.children.push(am5hierarchy.Tree.new(root, {
  singleBranchOnly: false,
  downDepth: 1,
  initialDepth: 2,
  valueField: "value",
  categoryField: "name",
  childDataField: "children"
}));


// Generate and set data
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
// var maxLevels = 3;
// var maxNodes = 3;
// var maxValue = 100;

var data = {
  name: "جامعه",
  children: [
	{
		name: "فرهنگ",
		children: [
		  {
			name: "خدمات",
			children: []
		  },
		  {
			name: "صننعت",
			children: []
		  },
		  {
			name: "کشاورزی",
			children: []
		  }
		]
	},
	{
		name: "سیاست",
		children: []
	},
	{
		name: "اقتصاد",
		children: []
	}
  ]
}
//generateLevel(data, "", 0);

series.data.setAll([data]);
series.set("selectedDataItem", series.dataItems[0]);

// function generateLevel(data, name, level) {
//   for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
//     var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
//     var child;
//     if (level < maxLevels) {
//       child = {
//         name: nodeName + level
//       }

//       if (level > 0 && Math.random() < 0.5) {
//         child.value = Math.round(Math.random() * maxValue);
//       }
//       else {
//         child.children = [];
//         generateLevel(child, nodeName + i, level + 1)
//       }
//     }
//     else {
//       child = {
//         name: name + i,
//         value: Math.round(Math.random() * maxValue)
//       }
//     }
//     data.children.push(child);
//   }

//   level++;
//   return data;
// }


// Make stuff animate on load
series.appear(1000, 100);

}); // end am5.ready()


export default { 
  name: "charttreeOld",
};
</script>
