[Feature] discrete legend support set custom field

[visactor]

[Feature] discrete legend support set custom field

[xuefei1313]

The design of this function is support discrete legend bind a glabol scale, followed Grammar Design.

/** spec */
export type IDiscreteLegendSpec = {
  // ...others
  /**
   * scaleName must match the id of the scale configured in **scales**
   */
  scaleName?: string;
  /**
   * After the legend is bound to the scale, the dimension associated with the series data and the legend can be configured through field.
   * If the field is not configured, the first item of fields in the domain of scale is used by default
   * If the domain of the scale is not dependent on data statistics, series.getSeriesField() is used by default
   */
  field?: string;
}

example spec:

const spec = {
    type: 'scatter',
    data: {
      id: 'lineData',
      values: [
        { type: 'Nail polish', country: 'Africa', value: -4229, shape: 'A' },
        { type: 'Nail polish', country: 'EU', value: -4376, shape: 'A' },
        { type: 'Eyebrow pencil', country: 'Africa', value: -3932, shape: 'A' },
        { type: 'Eyebrow pencil', country: 'EU', value: -3987, shape: 'A' },
        { type: 'Nail polish', country: 'Africa', value: -4229, shape: 'B' },
        { type: 'Nail polish', country: 'EU', value: -4376, shape: 'B' },
        { type: 'Eyebrow pencil', country: 'Africa', value: -3932, shape: 'B' },
        { type: 'Eyebrow pencil', country: 'EU', value: -3987, shape: 'B' }
      ]
    },
    title: {
      visible: true,
      text: 'Stacked line chart'
    },
    stack: true,
    xField: 'type',
    yField: 'value',
    seriesField: 'country',
    point: {
      style: {
        fillOpacity: 1,
        symbolType: {
          scale: 'shapeScale',
          field: 'shape'
        }
      },
      state: {
        custom_unSelected: {
          fillOpacity: 0.5
        }
      }
    },
    scales: [
      {
        id: 'shapeScale',
        type: 'ordinal',
        domain: [
          {
            dataId: 'lineData',
            fields: ['shape']
          }
        ],
        range: ['triangle', 'diamond']
      }
    ],
    legends: [
      {
        visible: true,
        position: 'middle',
        orient: 'bottom',
        offsetX: -100,
        item: {
          shape: {
            style: {
              symbolType: 'circle'
            }
          }
        }
      },
      {
        visible: true,
        position: 'middle',
        orient: 'bottom',
        scaleName: 'shapeScale',
        item: {
          shape: {
            style: {
              fill: 'red'
            }
          }
        }
      }
    ],
    region: [{}],
    axes: [
      {
        orient: 'bottom',
        visible: false
      },
      {
        orient: 'bottom',
        visible: true,
        seriesIndex: [],
        type: 'linear',
        min: 0,
        max: 100
      }
    ]
  }

[xuefei1313]