import {Component} from '@angular/core';

@Component({
  selector: 'app-page-chart-home',
  templateUrl: './page-chart-home.component.html',
  styleUrls: ['./page-chart-home.component.scss']
})
export class PageChartHomeComponent {
  constructor() {
    this.genRoleOptions()
  }

  roleOptions: any = null

  /**
   * 悲惨世界角色关系环形图
   * @desc 带有数据请求的示例
   * 1. 需要打开网络请求,将数据请求赋值为fetch
   * 2. 将数据结果添加到 src/assets/charts/data/role-graph.json
   * 3. 合理编写options赋值前的数据处理逻辑
   * 4. options赋值并调用插件战术
   * @see
   * http://echarts.apache.org/examples/zh/editor.html?c=graph-circular-layout
   */
  async genRoleOptions() {
    let response = await fetch("/assets/charts/data/role-graph.json", {});
    let graph: any = await response.json();
    graph.nodes.forEach(function (node: any) {
      node.label = {
        show: node.symbolSize > 30
      };
    });
    this.roleOptions = {
      title: {
        text: 'Les Miserables',
        subtext: 'Circular layout',
        top: 'bottom',
        left: 'right'
      },
      tooltip: {},
      legend: [
        {
          data: graph.categories.map(function (a: any) {
            return a.name;
          })
        }
      ],
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          name: 'Les Miserables',
          type: 'graph',
          layout: 'circular',
          circular: {
            rotateLabel: true
          },
          data: graph.nodes,
          links: graph.links,
          categories: graph.categories,
          roam: true,
          label: {
            position: 'right',
            formatter: '{b}'
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          }
        }
      ]
    };
  }

  pieOptions = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      data: [
        'Direct',
        'Marketing',
        'Search Engine',
        'Email',
        'Union Ads',
        'Video Ads',
        'Baidu',
        'Google',
        'Bing',
        'Others'
      ]
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],
        label: {
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 1548, name: 'Search Engine'},
          {value: 775, name: 'Direct'},
          {value: 679, name: 'Marketing', selected: true}
        ]
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        labelLine: {
          length: 30
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: [
          {value: 1048, name: 'Baidu'},
          {value: 335, name: 'Direct'},
          {value: 310, name: 'Email'},
          {value: 251, name: 'Google'},
          {value: 234, name: 'Union Ads'},
          {value: 147, name: 'Bing'},
          {value: 135, name: 'Video Ads'},
          {value: 102, name: 'Others'}
        ]
      }
    ]
  };
  lineOptions = {
    title: {
      text: 'ECharts Getting Started Example'
    },
    tooltip: {},
    legend: {
      data: ['sales']
    },
    xAxis: {
      data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
    },
    yAxis: {},
    series: [
      {
        name: 'sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };

}
