import * as d3 from "d3";

export default {
  data() {
    return {
      data: [], // From randomData()
      chart: { // 畫布大小和預留的 padding
        width: 500,
        height: 500,
        paddingTop: 30,
        paddingRight: 30,
        paddingBottom: 100,
        paddingLeft: 60
      },
      hideTooltip: true // 控制 tooltip 顯示隱藏
    };
  },
  computed: {
    // 可視區域
    viewBox() {
      let viewW =
        this.chart.width + this.chart.paddingRight + this.chart.paddingLeft;
      let viewH =
        this.chart.height + this.chart.paddingTop + this.chart.paddingBottom;

      return `0 0 ${viewW} ${viewH}`;
    },
    // 畫圖起始點
    startPoint() {
      return `translate(${this.chart.paddingLeft}, ${this.chart.paddingTop})`;
    },
    ...
  }
}

methods: {
  randomData() {
    let min = 0; // 隨機產生數值的最小值
    let max = 500; // 隨機產生數值的最大值
    let random = [ // 資料結構
      {
        name: "鼓山區",
        value: [
          {
            month: "6月",
            number: "233"
          },
          {
            month: "7月",
            number: "412"
          },
          {
            month: "8月",
            number: "533"
          },
          {
            month: "9月",
            number: "267"
          },
          {
            month: "10月",
            number: "321"
          }
        ]
      },
      ...
    ];


    // 隨機產生資料
    for (let i = 0; i < 3; i++) {
      random[i].value.forEach((e) => {
        e.number = Math.floor(Math.random() * (max - min + 1)) + min;
      });
    }


    this.data = random;
    
    ...
    
  },
  ...
}

// X軸線性比例縮放
xScale() {
  return d3
    .scaleLinear() // 線性縮放函式
    .domain([0, this.data[0].value.length]) // 設定轉換後的定義域
    .range([0, this.chart.width]); // 設定轉換前的範圍
},
// X軸設定
xAxis() {
  return d3
    .axisBottom(this.xScale) // 下方座標軸函式
    .ticks(5) // 設定座標軸標註點個數 （6~10月，共 5 個標註點）
    .tickFormat((d, i) => { // 設定標註點呈現的文字陣列
      return this.xLabel[i];
    });
},

// Y軸線性比例縮放
yScale() {
  let Ymin = 0;
  let Ymax; // 找出所有Y值的最大
  let newArray = [];

  // 找出所有Y值的最大數
  this.data.forEach(function(e, i) {
    e.value.forEach(function(ev) {
      newArray.push(ev.number);
    });
  });
  Ymax = d3.max(newArray); // D3找最大值函數


  return d3
    .scaleLinear() // 線性縮放函式
    .domain([Ymin, Ymax]) // 設定轉換後的定義域
    .range([this.chart.height, 0]); // 設定轉換前的範圍
},
// Y軸設定
yAxis() {
  return d3
    .axisLeft(this.yScale) // 左方座標軸函式
    .tickSizeInner(-this.chart.height); // 設定内侧刻度大小
},

methods: {
  randomData() {
    ...
    //清除上一次的坐標軸
    document.querySelector('.chart .axisX').innerHTML = '';
    document.querySelector('.chart .axisY').innerHTML = '';

    // 插入X軸座標
    d3
      .select(".chart .axisX")
      .call(this.xAxis);
    
    // 插入Y軸座標
    d3
      .select(".chart .axisY")
      .call(this.yAxis);
  },
  ...
}

computed: {
  ...
  // 動態顏色
  color() {
    // 使用 D3 內建 10種顏色輪迴的函式
    return d3.scaleOrdinal(d3.schemeCategory10);
  },
  // 折線座標、顏色
  line() {
    let line = d3
      .line() // 折線函式
      .x((d, i) => {
        // 利用尺度運算資料索引，傳回 x 的位置
        return this.xScale(i + 1);
      })
      .y(d => {
        // 利用尺度運算資料的值，傳回 y 的位置
        return this.yScale(d);
      });
    let pathArray = [];

    this.dataArray.forEach((e, i) => {
      pathArray.push({d: line(e), color: this.color(i)});
    });

    return pathArray;
  },
}

computed: {
  // 折點座標、顏色
  dot() {
    let circleArray = [];

    this.dataArray.forEach((group, i) => {
      let circleGroup = [];

      // 設置點座標
      group.forEach((number, index) => {
        circleGroup.push({
          cx: this.xScale(index + 1),
          cy: this.yScale(number),
        });
      });

      // 同一群的點用相同顏色
      circleArray.push({
        circle: circleGroup,
        color: this.color(i)
      });
    });

    return circleArray;
  },
}

methods: {
  showTooltip(index1, index2, event) {
    let mouseX = event.clientX + 20;
    let mouseY = event.clientY;

    // 設置位置
    document.querySelector('.tooltip').setAttribute('style', `left: ${mouseX}px; top: ${mouseY}px;`);
    // 插入名稱
    document.querySelector('.tooltip .name').innerHTML = `${this.data[index1].name} / ${this.data[index1].value[index2].month}`;
    document.querySelector('.tooltip .value').innerHTML = `${this.data[index1].value[index2].number} 件`;

    // 顯示 tooltip
    this.hideTooltip = false;
  },
  hiddenTooltip() {
    this.hideTooltip = true;
  }
}