mirrors/VChart
1
0
Fork 0
mirror of https://github.com/VisActor/VChart synced 2024-11-21 15:38:37 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: label should not update when label is set in series, related #2928

Browse Source
This commit is contained in:
xile611 2024-07-10 17:23:17 +08:00
parent 7c14ec26be
commit 76d1a7bbfc
4 changed files with 254 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
packages/vchart/__tests__/unit/core/update-spec.test.ts
View File

@ -1,5 +1,6 @@
import type { IBarChartSpec } from '../../../src';
import { default as VChart } from '../../../src';
import { series } from '../../../src/theme/builtin/common/series';
import { createDiv, removeDom } from '../../util/dom';
describe('vchart updateSpec test', () => {
@ -1003,4 +1004,248 @@ describe('vchart updateSpec of same spec', () => {
reTransformSpec: false
});
});
it('should not remake when label is in series', () => {
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{
name: 'Apple',
value: 214480
},
{
name: 'Google',
value: 155506
}
]
}
],
direction: 'horizontal',
series: [
{
type: 'bar',
xField: 'value',
yField: 'name',
label: {
visible: true
}
}
],
axes: [
{
orient: 'bottom',
visible: false
}
]
};
vchart = new VChart(spec, {
dom
});
vchart.renderSync();
const updateRes = (vchart as any)._updateSpec(spec, false);
expect(updateRes).toEqual({
change: false,
reCompile: false,
reMake: false,
reRender: true,
reSize: false,
reTransformSpec: false
});
});
it('should not remake when label is in chart', () => {
const spec = {
data: [
{
id: 'barData',
values: [
{
name: 'Apple',
value: 214480
},
{
name: 'Google',
value: 155506
}
]
}
],
direction: 'horizontal',
type: 'bar',
xField: 'value',
yField: 'name',
label: {
visible: true
},
axes: [
{
orient: 'bottom',
visible: false
}
]
};
vchart = new VChart(spec, {
dom
});
vchart.renderSync();
const updateRes = (vchart as any)._updateSpec(spec, false);
expect(updateRes).toEqual({
change: false,
reCompile: false,
reMake: false,
reRender: true,
reSize: false,
reTransformSpec: false
});
});
});
describe('vchart updateSpec of different about label', () => {
let container: HTMLElement;
let dom: HTMLElement;
let vchart: VChart;
beforeAll(() => {
container = createDiv();
dom = createDiv(container);
dom.id = 'container';
container.style.position = 'fixed';
container.style.width = '500px';
container.style.height = '500px';
container.style.top = '0px';
container.style.left = '0px';
});
afterAll(() => {
removeDom(container);
vchart.release();
});
it('should remake when label is in series update', () => {
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{
name: 'Apple',
value: 214480
},
{
name: 'Google',
value: 155506
}
]
}
],
direction: 'horizontal',
series: [
{
type: 'bar',
xField: 'value',
yField: 'name',
label: {
visible: true
}
}
],
axes: [
{
orient: 'bottom',
visible: false
}
]
};
vchart = new VChart(spec, {
dom
});
vchart.renderSync();
const updateRes = (vchart as any)._updateSpec(
{
...spec,
series: [
{
type: 'bar',
xField: 'value',
yField: 'name',
label: {
visible: true,
position: 'center'
}
}
]
},
false
);
expect(updateRes).toEqual({
change: false,
reCompile: false,
reMake: true,
reRender: true,
reSize: false,
reTransformSpec: false
});
});
it('should remake when label is in chart update', () => {
const spec = {
data: [
{
id: 'barData',
values: [
{
name: 'Apple',
value: 214480
},
{
name: 'Google',
value: 155506
}
]
}
],
direction: 'horizontal',
type: 'bar',
xField: 'value',
yField: 'name',
label: {
visible: true
},
axes: [
{
orient: 'bottom',
visible: false
}
]
};
vchart = new VChart(spec, {
dom
});
vchart.renderSync();
const updateRes = (vchart as any)._updateSpec(
{
...spec,
label: {
visible: true,
position: 'top'
}
},
false
);
expect(updateRes).toEqual({
change: false,
reCompile: false,
reMake: true,
reRender: true,
reSize: false,
reTransformSpec: false
});
});
});

2
packages/vchart/jest.config.js
View File

@ -17,7 +17,7 @@ module.exports = {
}
},
verbose: true,
collectCoverage: true,
// collectCoverage: true,
coverageReporters: ['json-summary', 'lcov', 'text'],
coveragePathIgnorePatterns: ['node_modules', '__tests__', 'interface.ts', '.d.ts', 'typings'],
collectCoverageFrom: [

5
packages/vchart/src/chart/base/base-chart.ts
View File

@ -874,9 +874,14 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
};
} = {};
this._components.forEach(c => {
if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) {
// label配置都会被解析到series中，所以不适合放在这里进行比对
return;
}
const compSpecKey = c.specKey || c.type;
// 每一个组件获取对应的speck
const cmpSpec = this._spec[compSpecKey] ?? {};
if (isArray(cmpSpec)) {
componentCache[compSpecKey] = componentCache[compSpecKey] || {
specCount: cmpSpec.length,

4
packages/vchart/src/component/label/label.ts
View File

@ -78,13 +78,15 @@ export class Label<T extends IChartSpec = any> extends BaseLabelComponent<T> {
const hasVisibleLabel = seriesIndexes.some(seriesIndex => {
const seriesInfo = chartSpecInfo.series[seriesIndex];
const { markLabelSpec = {} } = seriesInfo;
return Object.values(markLabelSpec).some(
labelSpecList => Array.isArray(labelSpecList) && isLabelVisible(labelSpecList)
);
});
if (hasVisibleLabel) {
specInfo.push({
spec: chartSpec,
spec: {},
type: ComponentTypeEnum.label,
specInfoPath: ['component', this.specKey, i],
regionIndexes: [i]