const F2 = require('@antv/f2/lib/core');
const Legend = require('@antv/f2/lib/plugin/legend');
// Method 1: Global Registeration
F2.Chart.plugins.register(Legend); 
​
// Or Method2: Registeration for a Chart instance
const chart = new F2.Chart({
  id: 'canvas',
  plugins: Legend
});

chart.legend({
  position: 'right',
  itemFormatter(val) {
    return val + ' %';
  }
});

chart.legend({
  marker: {
    symbol: 'circle', // shape of the marker
    radius: 5 // radius of the circle
  }
});

chart.legend({
  /**
   * customize the shape of marker
   * @param  {number} x   x-axis of the marker
   * @param  {number} y   y-axis of the marker
   * @param  {number} r   radius of the marker
   * @param  {object} ctx context object of the canvas
   * @return {null}     
   */
  marker(x, y, r, ctx) {}
});

chart.legend('city', {
  marker(x, y, r, ctx) {
    ctx.lineWidth = 2;
    ctx.strokeStyle = ctx.fillStyle;
    ctx.moveTo(x - r - 3, y);
    ctx.lineTo(x + r + 3, y);
    ctx.stroke();
    ctx.arc(x, y, r, 0, Math.PI * 2, false);
    ctx.fill();
  }
});

chart.legend({
 /**
  * callback for clicking the legend, invalid when clickable is false.
  * @param  {object} event obejct
  * @return {null}
  */
 onClick: ev => {
    const { clickedItem } = ev; // get the clicked legend item
 }
});

{
  // Label that will be displayed as name
  name: String,
  
  // Label that will be displayed as value
  value: String / Number,
  
  // For marker, see Custom maker
  marker: String / Object / Function,
  
  // For setting the legend click style, if not set, the default is true
  checked: Boolean,
  
  // Fill style of the legend marker, you also can set in marker(when it is an object)
  fill: String
}

chart.legend({
  position: 'right',
  custom: true,
  items: [
    { name: 'TYPE A', value: '73.76%',  marker: { symbol: 'square', fill: '#1890FF', radius: 4 } },
    { name: 'TYPE B', value: '22.11%', marker: { symbol: 'square', fill: '#2FC25B', radius: 4 } },
    { name: 'TYPE C', value: '2.2%', marker: { symbol: 'square', fill: '#FACC14', radius: 4 } },
    { name: 'TYPE D', value: '1.93%', marker: { symbol: 'square', fill: '#F04864', radius: 4 } }
  ],
  nameStyle: {
    fill: '#808080'
  }, // For styling the name label
  valueStyle: {
    fill: '#333',
    fontWeight: 'bold' // For styling the value label
  }
});

chart.legend({
  custom: true,
  items: [
    { name: '个人分数', marker: 'square', fill: '#FACC14', checked: true }, 
    { name: '平均分数',
      marker: function marker(x, y, r, ctx) {
        ctx.lineWidth = 1;
        ctx.strokeStyle = ctx.fillStyle;
        ctx.moveTo(x - r - 3, y);
        ctx.lineTo(x + r + 3, y);
        ctx.stroke();
        ctx.arc(x, y, r, 0, Math.PI * 2, false);
        ctx.fill();
      },
      fill: '#000',
      checked: true
    }
  ],
  onClick(ev) {
    const item = ev.clickedItem;
    const name = item.get('name');
    const checked = item.get('checked');
    const children = item.get('children'); 
    if (checked) {
      const markerFill = children[0].attr('fill');
      const textFill = children[1].attr('fill');
      children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
      children[1].set('_originColor', textFill); // 缓存文本原来的颜色
    }
    const geoms = chart.get('geoms');
    const canvas = chart.get('canvas');
    for (let i = 0; i < geoms.length; i++) {
      const geom = geoms[i];
      const container = geom.get('container');
​
      if (geom.getYScale().alias === name)
        if (!checked) {
          container.show();
          children[0].attr('fill', children[0].get('_originColor'));
          children[1].attr('fill', children[1].get('_originColor'));
        } else {
          container.hide();
          children[0].attr('fill', '#bfbfbf'); // marker 置灰
          children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
        }
      item.set('checked', !checked);
      legendItems[findLegendItem(name)].checked = !checked;
    }
    canvas.draw();
  }
});