Skip to content

Commit

Permalink
fix(progress): 迷你进度条重新修改 (#3268)
Browse files Browse the repository at this point in the history
Co-authored-by: ai-qing-hai <wb-xcf804241@antgroup.com>
  • Loading branch information
ai-qing-hai and ai-qing-hai authored Jun 30, 2022
1 parent 4bf3add commit c15b9c2
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 42 deletions.
24 changes: 12 additions & 12 deletions __tests__/unit/plots/progress/index-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');

progress.update({
Expand All @@ -27,7 +27,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');

progress.destroy();
Expand All @@ -47,7 +47,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');

progress.update({
Expand All @@ -58,7 +58,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');

progress.destroy();
Expand All @@ -85,13 +85,13 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);

const progressStyle = ({ percent, type }) => {
const progressStyle = ({ current, percent, type }) => {
if (type === 'current') {
return percent > 0.5
? {
Expand All @@ -105,7 +105,7 @@ describe('progress', () => {
lineDash: [4, 4],
};
} else if (type === 'target') {
return percent >= 0.5
return percent - current >= 0.5
? {
stroke: '#654321',
lineWidth: 4,
Expand All @@ -130,7 +130,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
Expand All @@ -148,7 +148,7 @@ describe('progress', () => {
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
Expand Down Expand Up @@ -222,14 +222,14 @@ describe('progress', () => {

progress.render();

expect(progress.chart.getData()).toEqual([
expect(progress.chart.getData()).toMatchObject([
{
type: 'current',
percent: 1,
},
{
type: 'target',
percent: 0,
percent: 1,
},
]);

Expand All @@ -238,7 +238,7 @@ describe('progress', () => {
percent: -1.65,
});

expect(progress.chart.getData()).toEqual([
expect(progress.chart.getData()).toMatchObject([
{
type: 'current',
percent: 0,
Expand Down
28 changes: 14 additions & 14 deletions __tests__/unit/plots/progress/utils-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@ import { getProgressData } from '../../../../src/plots/progress/utils';
describe('getProgressData', () => {
it('getProgressData', () => {
expect(getProgressData(0)).toEqual([
{ type: 'current', percent: 0 },
{ type: 'target', percent: 1 },
{ current: '0', type: 'current', percent: 0 },
{ current: '0', type: 'target', percent: 1 },
]);

expect(getProgressData(1)).toEqual([
{ type: 'current', percent: 1 },
{ type: 'target', percent: 0 },
{ current: '1', type: 'current', percent: 1 },
{ current: '1', type: 'target', percent: 1 },
]);

expect(getProgressData(0.4)).toEqual([
{ type: 'current', percent: 0.4 },
{ type: 'target', percent: 0.6 },
{ current: '0.4', type: 'current', percent: 0.4 },
{ current: '0.4', type: 'target', percent: 1 },
]);

expect(getProgressData(-1)).toEqual([
{ type: 'current', percent: 0 },
{ type: 'target', percent: 1 },
{ current: '0', type: 'current', percent: 0 },
{ current: '0', type: 'target', percent: 1 },
]);

expect(getProgressData(2)).toEqual([
{ type: 'current', percent: 1 },
{ type: 'target', percent: 0 },
{ current: '1', type: 'current', percent: 1 },
{ current: '1', type: 'target', percent: 1 },
]);

expect(getProgressData(NaN)).toEqual([
{ type: 'current', percent: 0 },
{ type: 'target', percent: 1 },
{ current: '0', type: 'current', percent: 0 },
{ current: '0', type: 'target', percent: 1 },
]);

expect(getProgressData(null)).toEqual([
{ type: 'current', percent: 0 },
{ type: 'target', percent: 1 },
{ current: '0', type: 'current', percent: 0 },
{ current: '0', type: 'target', percent: 1 },
]);
});
});
26 changes: 13 additions & 13 deletions __tests__/unit/plots/ring-progress/index-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');

ringProgress.update({
Expand All @@ -39,7 +39,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');

ringProgress.destroy();
Expand All @@ -61,7 +61,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');

ringProgress.update({
Expand All @@ -72,7 +72,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');

ringProgress.destroy();
Expand Down Expand Up @@ -101,13 +101,13 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);

const progressStyle = ({ percent, type }) => {
const progressStyle = ({ current, percent, type }) => {
if (type === 'current') {
return percent > 0.5
? {
Expand All @@ -121,7 +121,7 @@ describe('ring-progress', () => {
lineDash: [4, 4],
};
} else if (type === 'target') {
return percent >= 0.5
return percent - current >= 0.5
? {
stroke: '#654321',
lineWidth: 4,
Expand All @@ -146,7 +146,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
Expand All @@ -164,7 +164,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
Expand All @@ -189,7 +189,7 @@ describe('ring-progress', () => {
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');

ringProgress.destroy();
Expand Down Expand Up @@ -246,14 +246,14 @@ describe('ring-progress', () => {

ring.render();

expect(ring.chart.getData()).toEqual([
expect(ring.chart.getData()).toMatchObject([
{
type: 'current',
percent: 1,
},
{
type: 'target',
percent: 0,
percent: 1,
},
]);

Expand All @@ -262,7 +262,7 @@ describe('ring-progress', () => {
percent: -1.65,
});

expect(ring.chart.getData()).toEqual([
expect(ring.chart.getData()).toMatchObject([
{
type: 'current',
percent: 0,
Expand Down
3 changes: 1 addition & 2 deletions src/plots/progress/adaptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,9 @@ export function geometry(params: Params<ProgressOptions>): Params<ProgressOption

const p = deepAssign({}, params, {
options: {
xField: '1',
xField: 'current',
yField: 'percent',
seriesField: 'type',
isStack: true,
widthRatio: barWidthRatio,
interval: {
style: progressStyle,
Expand Down
5 changes: 4 additions & 1 deletion src/plots/progress/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,15 @@ export function getProgressData(percent: number) {
const clampPercent = clamp(isRealNumber(percent) ? percent : 0, 0, 1);
return [
{
// 用于 progressStyle 的回调方法
current: `${clampPercent}`,
type: 'current',
percent: clampPercent,
},
{
current: `${clampPercent}`,
type: 'target',
percent: 1 - clampPercent,
percent: 1,
},
];
}

0 comments on commit c15b9c2

Please sign in to comment.