Skip to content

[Bug] sankey chart supports setting Color in spec #1027

@pairone

Description

@pairone

Version

1.4.0

Link to Minimal Reproduction

null

Steps to Reproduce

img_v2_06730f21-8ee7-460f-abf3-979e99e6d88g

const spec = {
    type: 'sankey',
    data: [
      {
        name: 'data',
        values: [
          {
            nodes: [
              {
                // value: 100,
                name: 'A',
                children: [
                  {
                    name: 'top',
                    // value: 40,
                    children: [
                      { name: '00', value: 15 },
                      { name: '01', value: 10 },
                      { name: '02', value: 10 }
                    ]
                  },
                  {
                    name: 'middle',
                    // value: 30,
                    children: [
                      { name: '00', value: 10 },
                      { name: '01', value: 10 },
                      { name: '02', value: 10 }
                    ]
                  },
                  {
                    name: 'bottom',
                    value: 30
                  }
                ]
              },
              {
                // value: 80,
                name: 'B',
                children: [
                  {
                    name: 'top',
                    // value: 40,
                    children: [
                      { name: '00', value: 100 },
                      { name: '01', value: 40 }
                    ]
                  },
                  {
                    name: 'middle',
                    value: 10
                  },
                  {
                    name: 'bottom',
                    value: 30
                  }
                ]
              },
              {
                value: 50,
                name: 'C',
                children: [
                  {
                    name: 'top',
                    value: 20
                  },
                  {
                    name: 'middle',
                    value: 20
                  },
                  {
                    name: 'bottom',
                    value: 10
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    categoryField: 'name',
    valueField: 'value',
    color: {
      field: 'color',
      type: 'ordinal',
      domain: ['A', 'top', '00', '01', '02', 'middle', 'bottom', 'B', 'C'],
      range: ['#fd7f6f', '#7eb0d5', '#b2e061', '#bd7ebe', '#ffb55a', '#ffee65', '#beb9db', '#fdcce5', '#8bd3c7']
    },
    nodeAlign: 'left',
    nodeGap: 8,
    nodeWidth: 10,
    minNodeHeight: 4,
    nodeKey: datum => datum.name,

    label: {
      visible: true,
      formatMethod: (text, datum) => {
        // console.log('text', text);
        // console.log('datum', datum);
        return datum.name + '-' + datum.value;
      },
      state: {
        blur: {
          fill: '#e8e8e8',
          fillOpacity: 0.15
        }
      }
    },

    legends: {
      visible: true
    },

    node: {
      state: {
        hover: {
          fill: 'red'
        },
        blur: {
          fill: '#e8e8e8',
          fillOpacity: 0.15
        }
      }
    },

    link: {
      state: {
        selected: {
          backgroundStyle: { fill: '#e8e8e8' }
        },
        hover: {
          stroke: '#000000'
        },
        blur: {
          fill: '#e8e8e8'
        }
      }
    },

    emphasis: {
      enable: true,
      effect: 'related'
    }
  };

Current Behavior

Setting color in spec does not take effect

Expected Behavior

Setting color in spec takes effect

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bpbugSomething isn't working

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions