import { Chart } from "@antv/g2";
/**
 * 漏斗图
 *
 *
 *
 */
export function ldChart (dom, data) {
  let ldChart = new Chart({
    container: dom, //chart容器id
    autoFit: true,
    // width:230,
    // height: 240,
    padding: [10, 60, 15],
  });
  setTimeout(() => {
    ldChart.data(data);
    ldChart.axis(false);
    ldChart.legend(false);
    ldChart.tooltip({
      showTitle: false,
      showMarkers: false,
      itemTpl: '<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + "{name}<br/>" + '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{pv}</span><br/>' + "</li>",
    });
    ldChart.interaction("active-region");
    ldChart.coordinate("rect").transpose().scale(1, -1);
    ldChart
      .interval()
      .adjust("symmetric")
      .position("action*pv")
      .shape("funnel")
      .color("action", ["#0050B3", "#1890FF", "#40A9FF", "#69C0FF", "#BAE7FF"])
      .label(
        "action*pv",
        (action, pv) => {
          return {
            content: `${action} ${pv}`,
          };
        },
        {
          offset: 35,
          labelLine: {
            style: {
              lineWidth: 1,
              stroke: "rgba(0, 0, 0, 0.15)",
            },
          },
        }
      )
      .tooltip("action*pv", (action, pv) => {
        return {
          name: action,
          // percent: +percent * 100 + '%',
          pv,
        };
      })
      .animate({
        appear: {
          animation: "fade-in",
        },
        update: {
          annotation: "fade-in",
        },
      });
    ldChart.interaction("element-active");
    ldChart.render();
    return ldChart;
  }, 100);
}
/**
 * 环形图
 *
 *
 *
 */
export function annulusChart (dom, data) {
  const chart = new Chart({
    container: dom,
    autoFit: true,
    padding: [10, 10, 10],
  });
  chart.data(data);
  chart.scale("percent", {
    formatter: (val) => {
      val = val * 100 + "%";
      return val;
    },
  });
  chart.coordinate("theta", {
    radius: 0.75,
    innerRadius: 0.6,
  });
  chart.tooltip({
    showTitle: false,
    showMarkers: false,
    itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
  });
  chart.legend(false);
  // 辅助文本
  chart
    .annotation()
    .text({
      position: ["50%", "60%"],
      content: "职位总数",
      style: {
        fontSize: 12,
        fill: "#8c8c8c",
        textAlign: "center",
      },
      offsetY: -20,
    })
    .text({
      position: ["51%", "50%"],
      content: "200",
      style: {
        fontSize: 12,
        fill: "#8c8c8c",
        textAlign: "center",
      },
      offsetX: -10,
      offsetY: 20,
    })
    .text({
      position: ["46%", "50%"],
      content: "%",
      style: {
        fontSize: 12,
        fill: "#8c8c8c",
        textAlign: "center",
      },
      offsetY: 20,
      offsetX: 20,
    });
  chart
    .interval()
    .adjust("stack")
    .position("percent")
    .color("item")
    .label("percent", (percent) => {
      return {
        content: (data) => {
          return `${data.item}: ${percent * 100}%`;
        },
      };
    })
    .tooltip("item*percent", (item, percent) => {
      percent = percent * 100 + "%";
      return {
        name: item,
        value: percent,
      };
    });

  chart.interaction("element-active");

  chart.render();
}
/**
 * 折线图无坐标轴版
 *
 *
 *
 *
 */
export function brokenLineChart (dom, data) {
  const chart = new Chart({
    container: dom,
    autoFit: true,
    padding: [10, 10, 10],
  });




  chart.data(data);
  chart.legend(false);
  chart.axis(false);
  chart.scale({
    month: {
      range: [0, 1],
    },
    temperature: {
      nice: true,
      alias: 'value',
    },
  });

  // chart.tooltip(false); 
  chart.tooltip({
    showCrosshairs: false, // 是否显示十字定位线
    // shared: true,
    showTitle: true,
    showMarkers: false,
    // title: (title, datum) => datum['value'],
    // itemTpl: '{month}{temperature}<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + "{month}<br/>" + '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{temperature}</span><br/>' + "</li>",
  });

  // chart.axis("temperature", {
  // 	label: {
  // 		formatter: (val) => {
  // 			return val + " °C";
  // 		},
  // 	},
  // });

  chart // 设置折线
    .line()
    .position("month*temperature")
    .color("#9C66E5")
    .shape("smooth").animate({
      appear: {
        // 初始入场动画配置
        delay: 0,
        duration: 200
      },
      enter: {
        // 更新时出现动画配置
        delay: 0,
        duration: 200
      },
      leave: {
        // 更新时销毁动画配置
        delay: 0,
        duration: 200
      },
      update: {
        // 更新时改变动画配置
        delay: 0,
        duration: 200
      }
    });

  chart.area().position("month*temperature").shape("smooth").color("l(270) 0:#ffffff 0.6:#9C66E5 0.8:#9C66E5 1 :#bb7ff3").animate({
    appear: {
      // 初始入场动画配置
      delay: 0,
      duration: 200
    },
    enter: {
      // 更新时出现动画配置
      delay: 0,
      duration: 200
    },
    leave: {
      // 更新时销毁动画配置
      delay: 0,
      duration: 200
    },
    update: {
      // 更新时改变动画配置
      delay: 0,
      duration: 200
    }
  }); // 设置色块区域

  // chart // 设置折线节点
  //   .point()
  //   .position('month*temperature')
  //   .color('city')
  //   .shape('circle');

  chart.render();
  return chart;
}
/**
 * 柱状图
 *
 *
 */
export function histogramChart (dom, data) {
  const chart = new Chart({
    container: dom,
    autoFit: true,
    padding: [10, 30, 20],
  });

  chart.data(data);
  chart.scale("sales", {
    nice: true,
  });

  chart.tooltip({
    showMarkers: false,
  });
  chart.interaction("active-region");

  chart.interval().position("year*sales");

  chart.render();
}
/**
 * 折线图有坐标轴版
 *
 *
 */
export function brokenLineChartWithAxis (dom, data, linecolor) {
  const chart = new Chart({
    container: dom,
    autoFit: true,
    padding: [30, 30, 30, 30],
  });

  chart.data(data);
  chart.legend(false);
  chart.scale({
    month: {
      range: [0, 1],
    },
    temperature: {
      nice: true,
    },
  });

  chart.tooltip({
    showCrosshairs: true,
    shared: true,
  });

  chart.axis("temperature", {
    label: {
      formatter: (val) => {
        return val;
      },
    },
  });

  chart.area().position("month*temperature").color(`l(270) 0:#ffffff 0.5:${linecolor} `).shape("smooth");
  chart.line().position("month*temperature").color(`${linecolor}`).shape("smooth");

  chart.point().position("month*temperature").color(`${linecolor}`).shape("circle");

  chart.render();

  return chart;
}