Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] domain of legends will not update after updateSpec() if lockStatisticsByDomain=true #829

Closed
da730 opened this issue Sep 6, 2023 · 1 comment · Fixed by #871
Closed

[Bug] domain of legends will not update after updateSpec() if lockStatisticsByDomain=true #829

da730 opened this issue Sep 6, 2023 · 1 comment · Fixed by #871
Assignees
@kkxxkk2019
Labels
bp bug Something isn't working
Milestone
v1.3.2

Comments

@da730
Copy link
Contributor

da730 commented Sep 6, 2023

Version

1.3.1

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
    type: 'pie',
    categoryField: '20001',
    valueField: '230906174122024',
    seriesField: '20001',
    padding: 0,
    data: [
      {
        id: 'data',
        values: [
          {
            '20001': '家具-消费者',
            '230906174122024': '2788714.4288902283',
            '230906174546011': '家具',
            '230906175504009': '消费者'
          },
          {
            '20001': '技术-消费者',
            '230906174122024': '2692828.4352111816',
            '230906174546011': '技术',
            '230906175504009': '消费者'
          },
          {
            '20001': '办公-消费者',
            '230906174122024': '2543529.3300714493',
            '230906174546011': '办公',
            '230906175504009': '消费者'
          },
          {
            '20001': '家具-公司',
            '230906174122024': '1903622.758113861',
            '230906174546011': '家具',
            '230906175504009': '公司'
          },
          {
            '20001': '技术-公司',
            '230906174122024': '1764574.614578247',
            '230906174546011': '技术',
            '230906175504009': '公司'
          },
          {
            '20001': '办公-公司',
            '230906174122024': '1484595.9238786697',
            '230906174546011': '办公',
            '230906175504009': '公司'
          },
          {
            '20001': '家具-小型企业',
            '230906174122024': '1042003.6409912109',
            '230906174546011': '家具',
            '230906175504009': '小型企业'
          },
          {
            '20001': '技术-小型企业',
            '230906174122024': '1011620.4553604126',
            '230906174546011': '技术',
            '230906175504009': '小型企业'
          },
          {
            '20001': '办公-小型企业',
            '230906174122024': '837464.545838356',
            '230906174546011': '办公',
            '230906175504009': '小型企业'
          }
        ],
        fields: {
          '20001': {
            alias: '图例项 ',
            domain: [
              '家具-消费者',
              '家具-公司',
              '家具-小型企业',
              '技术-消费者',
              '技术-公司',
              '技术-小型企业',
              '办公-消费者',
              '办公-公司',
              '办公-小型企业'
            ],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230906174122024': {
            alias: '销售额'
          },
          '230906174546011': {
            alias: '类别'
          },
          '230906175504009': {
            alias: '细分'
          }
        }
      }
    ],
    outerRadius: 0.75,
    label: {
      visible: false,
      overlap: {
        hideOnHit: true
      },
      style: {
        fontSize: 12,
        fill: '#363839',
        stroke: 'rgba(255, 255, 255, 0.8)',
        lineWidth: 2,
        strokeOpacity: 1,
        angle: 0
      },
      position: 'outside',
      interactive: false
    },
    color: {
      field: '20001',
      type: 'ordinal',
      range: ['#009db5', '#f2b823', '#eb7006', '#1f5273', '#3da241', '#77bfc8', '#d44977', '#ef85a7', '#675dae'],
      specified: {},
      domain: [
        '家具-消费者',
        '家具-公司',
        '家具-小型企业',
        '技术-消费者',
        '技术-公司',
        '技术-小型企业',
        '办公-消费者',
        '办公-公司',
        '办公-小型企业'
      ]
    },
    legends: [
      {
        type: 'discrete',
        id: 'legend',
        orient: 'right',
        position: 'start',
        layoutType: 'normal',
        visible: true,
        maxCol: 2,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 397,
          spaceRow: 0,
          spaceCol: 0,
          padding: {
            top: 1,
            bottom: 2,
            left: 3,
            right: 2
          },
          background: {
            visible: false,
            style: {
              fillOpacity: 0.001
            }
          },
          label: {
            style: {
              fontSize: 12,
              fill: '#6F6F6F'
            }
          },
          shape: {
            style: {
              lineWidth: 0,
              symbolType: 'square'
            }
          }
        },
        pager: {
          layout: 'horizontal',
          padding: {
            left: -18
          },
          textStyle: {},
          space: 0,
          handler: {
            preShape: 'triangleLeft',
            nextShape: 'triangleRight',
            style: {},
            state: {
              disable: {}
            }
          }
        },
        padding: {
          top: 0,
          bottom: 0,
          left: 16,
          right: 0
        }
      }
    ],
    hover: {
      enable: true
    },
    select: {
      enable: true
    },
    pie: {
      state: {
        hover: {
          cursor: 'pointer',
          fillOpacity: 0.8,
          stroke: '#58595B',
          lineWidth: 1,
          zIndex: 500,
          outerRadius: 0.8
        },
        selected: {
          cursor: 'pointer',
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1,
          outerRadius: 0.8
        },
        selected_reverse: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    tooltip: {
      handler: {}
    },
    background: 'rgba(255, 255, 255, 0)',
    rose: {},
    animation: false,
    hash: '91e813380369bd79fec6587c9ac6a5e8'
  };

  const spec2 = {
    type: 'pie',
    categoryField: '20001',
    valueField: '230906174122024',
    seriesField: '20001',
    padding: 0,
    data: [
      {
        id: 'data',
        values: [
          {
            '20001': '家具-消费者',
            '230906174122024': '2788714.4288902283',
            '230906174546011': '家具',
            '230906175504009': '消费者'
          },
          {
            '20001': '技术-消费者',
            '230906174122024': '2692828.4352111816',
            '230906174546011': '技术',
            '230906175504009': '消费者'
          },
          {
            '20001': '办公-消费者',
            '230906174122024': '2543529.3300714493',
            '230906174546011': '办公',
            '230906175504009': '消费者'
          },
          {
            '20001': '家具-小型企业',
            '230906174122024': '1042003.6409912109',
            '230906174546011': '家具',
            '230906175504009': '小型企业'
          },
          {
            '20001': '技术-小型企业',
            '230906174122024': '1011620.4553604126',
            '230906174546011': '技术',
            '230906175504009': '小型企业'
          },
          {
            '20001': '办公-小型企业',
            '230906174122024': '837464.545838356',
            '230906174546011': '办公',
            '230906175504009': '小型企业'
          }
        ],
        fields: {
          '20001': {
            alias: '图例项 ',
            domain: ['家具-消费者', '家具-小型企业', '技术-消费者', '技术-小型企业', '办公-消费者', '办公-小型企业'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230906174122024': {
            alias: '销售额'
          },
          '230906174546011': {
            alias: '类别'
          },
          '230906175504009': {
            alias: '细分'
          }
        }
      }
    ],
    outerRadius: 0.75,
    label: {
      visible: false,
      overlap: {
        hideOnHit: true
      },
      style: {
        fontSize: 12,
        fill: '#363839',
        stroke: 'rgba(255, 255, 255, 0.8)',
        lineWidth: 2,
        strokeOpacity: 1,
        angle: 0
      },
      position: 'outside',
      interactive: false
    },
    color: {
      field: '20001',
      type: 'ordinal',
      range: ['#009db5', '#f2b823', '#eb7006', '#1f5273', '#3da241', '#77bfc8'],
      specified: {},
      domain: ['家具-消费者', '家具-小型企业', '技术-消费者', '技术-小型企业', '办公-消费者', '办公-小型企业']
    },
    legends: [
      {
        type: 'discrete',
        id: 'legend',
        orient: 'right',
        position: 'start',
        layoutType: 'normal',
        visible: true,
        maxCol: 2,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 397,
          spaceRow: 0,
          spaceCol: 0,
          padding: {
            top: 1,
            bottom: 2,
            left: 3,
            right: 2
          },
          background: {
            visible: false,
            style: {
              fillOpacity: 0.001
            }
          },
          label: {
            style: {
              fontSize: 12,
              fill: '#6F6F6F'
            }
          },
          shape: {
            style: {
              lineWidth: 0,
              symbolType: 'square'
            }
          }
        },
        pager: {
          layout: 'horizontal',
          padding: {
            left: -18
          },
          textStyle: {},
          space: 0,
          handler: {
            preShape: 'triangleLeft',
            nextShape: 'triangleRight',
            style: {},
            state: {
              disable: {}
            }
          }
        },
        padding: {
          top: 0,
          bottom: 0,
          left: 16,
          right: 0
        }
      }
    ],
    hover: {
      enable: true
    },
    select: {
      enable: true
    },
    pie: {
      state: {
        hover: {
          cursor: 'pointer',
          fillOpacity: 0.8,
          stroke: '#58595B',
          lineWidth: 1,
          zIndex: 500,
          outerRadius: 0.8
        },
        selected: {
          cursor: 'pointer',
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1,
          outerRadius: 0.8
        },
        selected_reverse: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    tooltip: {
      handler: {}
    },
    background: 'rgba(255, 255, 255, 0)',
    rose: {},
    animation: false,
    hash: 'bf4fe0420343f1ff58d1e90fcb94577b'
  };

  const cs = new VChart(spec, {
    dataSet,
    dom: document.getElementById('chart') as HTMLElement,
    mode: isMobile ? 'mobile-browser' : 'desktop-browser'
  });
  console.time('renderTime');
  cs.renderAsync().then(() => {
    console.timeEnd('renderTime');
  });
  setTimeout(() => {
    cs.updateSpec(spec2);
  }, 2000);

Current Behavior

when upgrade vchart from 1.3.0 to 1.3.1, domain of the legends will not update after updateSpec if lockStatisticsByDomain=true:
image
image

Expected Behavior

just like 1.3.0:
image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@da730 da730 added bug Something isn't working bp labels Sep 6, 2023
@da730 da730 added this to the v1.3.2 milestone Sep 6, 2023
@kkxxkk2019 kkxxkk2019 assigned xuefei1313 and unassigned xuefei1313 Sep 8, 2023
@kkxxkk2019
Copy link
Collaborator

看了下是因为 updateSpec 的时候没有更新数据 fields 的配置，仍然保留了上一次的

@kkxxkk2019 kkxxkk2019 mentioned this issue Sep 8, 2023
Closed
xuefei1313 added a commit that referenced this issue Sep 8, 2023
@xuefei1313
fix: fix bug data fields are not updated when updateSpec, details in #…
d232244 
…829
@xuefei1313 xuefei1313 mentioned this issue Sep 8, 2023
Merged
20 tasks
kkxxkk2019 pushed a commit that referenced this issue Sep 8, 2023
@xuefei1313 @kkxxkk2019
fix: fix bug data fields are not updated when updateSpec, details in #…
11f8d6c 
…829
@github-actions github-actions bot mentioned this issue Sep 14, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkxxkk2019 kkxxkk2019

Labels
bp bug Something isn't working
Projects
None yet
Milestone
v1.3.2
Development

Successfully merging a pull request may close this issue.

Fix/mark static style un update in update spec VisActor/VChart
3 participants
@xuefei1313 @da730 @kkxxkk2019