import {Component, OnInit} from '@angular/core';
import {fadeIn} from '../../animation/fade-in';
import {ApiService} from '../../service/api';
import {NzMessageService} from 'ng-zorro-antd';
import {TranslateService} from '@ngx-translate/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [fadeIn]
})
export class HomeComponent implements OnInit {

  constructor(private api: ApiService, private message: NzMessageService,
              private translate: TranslateService, private router: Router) {
  }

  chartRadarOption;
  charLineOption;

  ngOnInit() {
    this.init();
  }

  init() {
    this.chartRadarOption = {
      title: {
        text: '浏览器占比变化',
        subtext: '纯属虚构',
        top: 10,
        left: 10
      },
      tooltip: {
        trigger: 'item',
        backgroundColor : 'rgba(0,0,250,0.2)'
      },
      legend: {
        type: 'scroll',
        bottom: 10,
        data: (function (){
          var list = [];
          for (var i = 1; i <=28; i++) {
            list.push(i + 2000 + '');
          }
          return list;
        })()
      },
      visualMap: {
        top: 'middle',
        right: 10,
        color: ['blue', 'green'],
        calculable: true
      },
      radar: {
        indicator : [
          { text: '离线报警', max: 400},
          { text: '阈值报警', max: 400},
          { text: '', max: 400},
          { text: 'Firefox', max: 400},
          { text: 'Chrome', max: 400}
        ]
      },
      series : (function (){
        var series = [];
        for (var i = 1; i <= 1; i++) {
          series.push({
            name:'浏览器',
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 1
            },
            emphasis: {
              areaStyle: {
                color: 'rgba(0,250,0,0.3)'
              }
            },
            data:[
              {
                value:[
                  (40 - i) * 10,
                  (38 - i) * 4 + 60,
                  i * 5 + 10,
                  i * 9,
                  i * i /2
                ],
                name: i + 2000 + ''
              }
            ]
          });
        }
        return series;
      })()
    };

    this.charLineOption = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }]
    };
  }
}
