import Component from "@glimmer/component";
import { action } from "@ember/object";
import { select } from "d3-selection";

interface D3HelloWorldArgs {}

export default class D3HelloWorld extends Component<D3HelloWorldArgs> {
  @action
  hello() {
    select(".d3-hello").text("HELLOWORLD BY D3");
  }
}

// d3/bind-data.ts
import Component from "@glimmer/component";
import { selectAll } from "d3-selection";
import { action } from "@ember/object";

interface D3BindDataArgs {}

const STR = "DATABIND";
const ARR = ["落霞与孤鹜齐飞", "秋水共长天一色"];
export default class D3BindData extends Component<D3BindDataArgs> {
  @action
  dataBind() {
    let p = selectAll(".d3-bind");
    p.datum(STR);
    p.text(function (d, i) {
      return `✨第 ${i} 个元素绑定的值是 ${d}✨`;
    });
  }
  @action
  dataBind2() {
    let ps = selectAll(".d3-bind2");
    ps.data(ARR).text(function (d) {
      return d;
    });
  }
}

// d3/basic-histogram.ts
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { select } from "d3-selection";

interface D3BasicHistogramArgs {}

export default class D3BasicHistogram extends Component<D3BasicHistogramArgs> {
  @action
  appendSvg() {
    let container = select(".basic-svg-container");
    container
      .append("svg")
      .attr("width", 200)
      .attr("height", 123.6)
      .style("background-color", "orange");
  }
}

// d3/basic-histogram.ts
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { select } from "d3-selection";

interface D3BasicHistogramArgs {}

const DATASET = [250, 210, 170, 130, 90]; //数据（表示矩形的宽度）;
const RECTHEIGHT = 25; //每个矩形所占的像素高度(包括空白)
export default class D3BasicHistogram extends Component<D3BasicHistogramArgs> {
  @action
  appendSvg() {
    let container = select(".basic-svg-container");
    container
      .append("svg")
      .attr("width", 300)
      .attr("height", 185.4)
      .style("background-color", "orange");
  }

  @action
  initHistogram() {
    const barContainer = select(".bar-container");

    barContainer
      .attr("width", 300)
      .attr("heigt", 185.4)
      .selectAll("rect")
      .data(DATASET)
      .enter()
      .append("rect")
      .attr("x", 20)
      .attr("y", function (d, i) {
        return i * RECTHEIGHT;
      })
      .attr("width", function (d) {
        return d;
      })
      .attr("height", RECTHEIGHT - 2)
      .attr("fill", "#579AFF");
  }
}

// d3/basic-histogram.ts
// ...
@action
initScale() {
    const dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

    let linear = scaleLinear()
    .domain([0, max(dataset,null)])
    .range([0, 250]);

    const barContainer = select(".scale");

    barContainer
        .attr("width", 300)
        .attr("heigt", 185.4)
        .selectAll("rect")
        .data(dataset)
        .attr("x", 20)
        .attr("y", function (d, i) {
        return i * RECTHEIGHT
    })
        .attr("width", function (d) {
        return linear(d);
    })
        .attr("height", RECTHEIGHT - 2)
        .attr("fill", "#C2DAFF")
    // 为何重复设置 attr 见下文解释
        .enter()
        .append("rect")
        .attr("x", 20)
        .attr("y", function (d, i) {
        return i * RECTHEIGHT
    })
        .attr("width", function (d) {
        return linear(d);
    })
        .attr("height", RECTHEIGHT - 2)
        .attr("fill", "#C2DAFF");
}
// ...

// d3/basic-histogram.ts
// ...
@action
initAxes() {
    const linear = scaleLinear()
    .domain([0, max(dataset)])
    .range([0, 250]);


    let svgContainer = select(".coordinate");

    svgContainer
    // 样式放入了类中进行控制
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", 20)
        .attr("y", (d, i: number) => i * RECTHEIGHT)
        .attr("width", d => linear(d))
        .attr("height", RECTHEIGHT - 2)
        .attr("fill", "#FFC400");

    const axis = axisBottom(linear)
    .ticks(7);

    svgContainer.append("g")
        .attr("class","pb-tm-axis")
        .attr("transform","translate(20,130)").call(axis)

}
// ...

// d3/bp-bar.ts
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { select } from "d3-selection";
import { scaleLinear, scaleBand } from "d3-scale";
import { max } from "d3-array";
import { axisBottom, axisLeft } from "d3-axis";

interface D3BpBarArgs {}

const DATASET = [
  ["2018Q1", 2263262.25, 2584466.75, "0.8757", "all", null],
  ["2018Q2", 2194822.96875, 2643496, "0.8303", "all", null],
  ["2018Q3", 2359731.25, 2770609.75, "0.8517", "all", null],
  ["2018Q4", 2165844.0625, 2914783.4375, "0.7431", "all", null],
  ["201Q91", 704715.671875, 2274136, "0.3099", "all", null],
  ["201Q92", 677539.40625, 2806879, "0.2414", "all", null],
  ["201Q93", 679346.203125, 2975934, "0.2283", "all", null],
];

export default class D3BpBar extends Component<D3BpBarArgs> {
  @action
  initBar() {
    // 声明变量
    const svgContainer = select(".bp-bar");
    const width: number = Number(svgContainer.style("width").split("p")[0]);
    const height: number = Number(svgContainer.style("height").split("p")[0]);
    const padding = { top: 24, right: 24, bottom: 24, left: 84 };
    const barWidth = 16;
    /**
     * 添加 svg 画布
     */
    const svg = svgContainer
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    /**
     * x 轴的比例尺
     */
    let xAxisData = DATASET.map((ele: any[]): string => ele[0]);
    console.log(xAxisData);
    const xScale = scaleBand()
      .domain(xAxisData)
      .range([0, width - padding.left]);
    /**
     * y 轴的比例尺
     */
    let yAxisData = DATASET.map((ele: Array<any>): number => ele[1]);
    const yScale = scaleLinear()
      .domain([0, max(yAxisData)])
      .range([height - padding.top - padding.bottom, 0]);

    /**
     * 定义坐标轴
     */
    let xAxis = axisBottom(xScale);
    let yAxis = axisLeft(yScale);

    /**
     * 添加柱状图
     */
    svg
      .selectAll("rect")
      .data(DATASET)
      .enter()
      .append("rect")
      .classed("bp-bar-rect", true)
      .attr("transform", `translate(${padding.left},${padding.top})`)
      .attr("x", (d) => {
        return xScale(d[0]) + xScale.bandwidth() / 2 - barWidth / 2;
      })
      .attr("y", (d) => yScale(d[1]))
      .attr("width", barWidth + "px")
      .attr(
        "height",
        (d) => height - padding.top - padding.bottom - yScale(d[1])
      )
      .text((d: any) => d[4]);

    /***
     * 添加坐标轴
     */
    svg
      .append("g")
      .classed("x-axis", true)
      .attr(
        "transform",
        "translate(" + padding.left + "," + (height - padding.bottom) + ")"
      )
      .call(xAxis);

    svg
      .append("g")
      .classed("y-axis", true)
      .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
      .call(yAxis);
  }
}

// d3/bp-pie.ts
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { select } from "d3-selection";
import { tracked } from "@glimmer/tracking";
import { pie, arc } from "d3-shape";
import { schemeCategory10 } from "d3-scale-chromatic";

interface D3BpPieArgs {
  data: string | number[];
  // data: [
  //     ["癫痫竞品1", 2575385.5, null, "0.1952"],
  //     ["开浦兰", 679346.1875, null, "0.0515"],
  //     ["癫痫竞品2", 279866.65625, null, "0.0212"],
  //     ["维派特", 0, null, "0.0000"],
  //     ["其他竞品", 9662320.65625, null, "0.7322"]
  //   ]
}

export default class D3BpPie extends Component<D3BpPieArgs> {
  @tracked data = this.args.data;
  get layoutData() {
    const pieLayout = pie()
      // 设置如何从数据中获取要绘制的值
      .value((d: any) => d[1])
      // 设置排序规则 (null 表示原始排序)
      .sort(null)
      // 设置第一个数据的起始角度 (默认为 0)
      .startAngle(0)
      // 设置弧度的终止角度，(默认 2*Math.PI)
      // endAngle - startAngle 为 2 π 则表示一个整圆
      .endAngle(2 * Math.PI)
      // 弧度之间的空隙角度(默认 0)
      .padAngle(0);
    return pieLayout(this.data);
  }
  @action
  initPie() {
    const container = select(".bp-pie");
    // 声明变量
    const width: number = Number(container.style("width").split("p")[0]);
    const height: number = Number(container.style("height").split("p")[0]);
    const innerRadius = 84;
    const outerRadius = 100;
    // 生成 svg
    let svg = container
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    const pieData = this.layoutData;
    // 基础 rect 设置
    let arcins = arc().innerRadius(innerRadius).outerRadius(outerRadius);

    // hover 状态 rect 的设置
    let arcOver = arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius + 15);

    svg
      .selectAll("path.arc")
      .data(pieData)
      .enter()
      .append("path")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .attr("fill", (d: any, i: number) => schemeCategory10[i])
      .classed("arc", true)
      .attr("d", arcins);

    svg
      .selectAll("path.arc")
      .on("mouseover", function () {
        select(this).transition().duration(1000).attr("d", arcOver);
      })
      .on("mouseout", function () {
        select(this).transition().duration(100).attr("d", arcins);
      });
  }
}