import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';

/**
 * data 图数据
 * id 图id
 * height 图高
 * margin {top: 80, right: 20, bottom: 30, left: 60} 外边距
 * title 图标题
 * titleY 图的Y轴标题
 */
const D3SimpleBarChart = (params) => {
  const {
    data,
    id,
    height,
    margin,
    title,
    titleY
  } = params;
  const marginTop = margin && margin.top ? margin.top : 0;
  const marginBottom = margin && margin.bottom ? margin.bottom : 0;
  const marginLeft = margin && margin.left ? margin.left : 0;
  const marginRight = margin && margin.right ? margin.right : 0;

  const container = document.getElementById(`${id}`);
  if (!container) return;
  const width = container.offsetWidth;
  const _width = width - marginLeft - marginRight;
  const _height = height - marginTop - marginBottom;

  let svg = d3.select(`#${id}`)
    .append('svg')
    .attr('width',  _width + marginLeft + marginRight)
    .attr('height', _height + marginTop + marginBottom); 
  // 设置x轴
  let x = d3.scaleBand()
    .rangeRound([0, _width])
    .padding(0.1)
    .domain(
      data.map(function(d) {
        return d.label
      })
    );
  // 设置y轴
  let y = d3.scaleLinear()
    .rangeRound([_height, 0])
    .domain([ 0, d3.max(data, function(d) {
      return d.value
    })]);
  // 用于绘制每条柱
  const barWidth = (_width / data.length) * 0.9;
  // 用于生成背景柱
  const stepArray = d3.ticks(0, d3.max(data, d => d.value), 10);
  // 用于生成背景柱
  const colors = ['#ccc', '#ddd'];
  // 设置tip
  let tip = d3Tip().attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return (
        '<strong>' +
        d.label +
        "<br>"+titleY+":</strong> <span style='color:#ffeb3b'>" +
        (d.value * 100).toFixed(2) +
        '%</span>'
      )
    });
  svg.call(tip);
  // 设最外包层在总图上的相对位置
  let g = svg.append('g')
    .attr('transform', 'translate(' + marginLeft + ',' + marginTop + ')');
  // 设置x轴
  g.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + _height + ')')
    .call(d3.axisBottom(x));
  // 设置y轴
  g.append('g')
    .attr('class', 'axis axis--y')
    .call(d3.axisLeft(y).ticks(10, '%'))
    .append('text')
    .attr('y', -16)
    .attr('dy', '.71em')
    .style('text-anchor', 'middle')
    .style('fill', '#fff')
    .text(`${titleY} (%)`);
  // 设置背景柱
  g.append('g')
    .attr('class', 'bar--bg-bar')
    .selectAll('rect')
    .data(d3.range(stepArray.length - 1))
    .enter()
    .append('rect')
    .attr('stroke', 'none')
    .attr('stroke-width', 0)
    .attr('fill', function(d, i) {
      return colors[i % 2]
    })
    .attr('x', 1)
    .attr('width', _width)
    .attr('height', function(d, i) {
      return y(stepArray[i]) - y(stepArray[i + 1])
    })
    .attr('y', function(d, i) {
      return y((i + 1) * stepArray[1])
    });
  // 画柱图
  g.selectAll('.bar')
    .data(data)
    .enter()
    .append('rect')
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    .attr('class', 'bar')
    .attr('fill', '#8a2be2')
    .attr('x', function(d) {
      return x(d.label)
    })
    .attr('y', _height) // 控制动画由下而上
    .attr('width', x.bandwidth())
    .attr('height', 0) // 控制动画由下而上
    .transition()
    .duration(200)
    .ease(d3.easeBounceInOut)
    .delay(function(d, i) {
      return i * 200
    })
    .attr('y', function(d) {
      return y(d.value)
    })
    .attr('height', function(d) {
      return _height - y(d.value)
    });
  // 输出柱图上的数值
  g.append('g')
    .attr('class', 'bar--text')
    .selectAll('text')
    .data(data)
    .enter()
    .append('text')
    .attr('fill', 'orange')
    .attr('font-size', '14px')
    .attr('text-anchor', 'middle')
    .attr('x', function(d, i) {
      return x(d.label)
    })
    .attr('y', function(d) {
      return y(d.value)
    })
    .attr('dx', barWidth / 2)
    .attr('dy', '1em')
    .text(function(d) {
      return (d.value * 100).toFixed(2) + '%'
    })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);
  // 输出标题
  svg.append('g')
    .attr('class', 'bar--title')
    .append('text')
    .attr('fill', '#000')
    .attr('font-size', '16px')
    .attr('font-weight', '700')
    .attr('text-anchor', 'middle')
    .attr('x', containerWidth / 2)
    .attr('y', 20)
    .text(title);
}

export default D3SimpleBarChart;