From d022fd46fcb92bec1141f0af18c24e0c6d3187b4 Mon Sep 17 00:00:00 2001 From: hustcc Date: Sat, 5 Sep 2020 18:37:26 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E8=BF=B7=E4=BD=A0=E5=9B=BE=E8=B5=B0?= =?UTF-8?q?=E6=9F=A5=20+=20demo=20(#1528)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(tiny-line): add tiny demos * fix(tiny-line): remove tiny lineStyle callback params * docs(tiny-line): add tiny area demos * docs(tiny-column): add tiny column demos * docs(ring-progress): add tiny ring progress demos * docs(progress): add tiny progress demos * fix(progress): make ci passed --- __tests__/unit/plots/progress/index-spec.ts | 37 ++-- .../unit/plots/ring-progress/index-spec.ts | 208 ++++++++---------- __tests__/unit/plots/tiny-area/index-spec.ts | 3 +- .../unit/plots/tiny-column/index-spec.ts | 28 ++- __tests__/unit/plots/tiny-line/index-spec.ts | 23 +- examples/progress/basic/demo/meta.json | 40 ++++ .../basic/demo/progress-style-callback.ts | 16 ++ .../progress/basic/demo/progress-style.ts | 15 ++ .../progress/basic/demo/progress-width.ts | 11 + examples/progress/basic/demo/progress.ts | 10 + examples/progress/basic/design.en.md | 5 + examples/progress/basic/design.zh.md | 5 + examples/progress/basic/index.en.md | 4 + examples/progress/basic/index.zh.md | 4 + examples/ring-progress/basic/demo/meta.json | 40 ++++ .../basic/demo/ring-progress-radius.ts | 12 + .../demo/ring-progress-style-callback.ts | 16 ++ .../basic/demo/ring-progress-style.ts | 15 ++ .../ring-progress/basic/demo/ring-progress.ts | 10 + examples/ring-progress/basic/design.en.md | 5 + examples/ring-progress/basic/design.zh.md | 5 + examples/ring-progress/basic/index.en.md | 4 + examples/ring-progress/basic/index.zh.md | 4 + examples/tiny-area/basic/demo/area-style.ts | 18 ++ .../tiny-area/basic/demo/area-with-scale.ts | 21 ++ examples/tiny-area/basic/demo/area.ts | 14 ++ examples/tiny-area/basic/demo/meta.json | 32 +++ examples/tiny-area/basic/design.en.md | 5 + examples/tiny-area/basic/design.zh.md | 5 + examples/tiny-area/basic/index.en.md | 4 + examples/tiny-area/basic/index.zh.md | 4 + .../basic/demo/column-style-callback.ts | 15 ++ .../tiny-column/basic/demo/column-style.ts | 13 ++ .../basic/demo/column-width-ratio.ts | 17 ++ examples/tiny-column/basic/demo/column.ts | 13 ++ examples/tiny-column/basic/demo/meta.json | 40 ++++ examples/tiny-column/basic/design.en.md | 5 + examples/tiny-column/basic/design.zh.md | 5 + examples/tiny-column/basic/index.en.md | 4 + examples/tiny-column/basic/index.zh.md | 4 + .../basic/demo/line-style-callback.ts | 18 ++ examples/tiny-line/basic/demo/line-style.ts | 14 ++ .../tiny-line/basic/demo/line-with-scale.ts | 21 ++ examples/tiny-line/basic/demo/line.ts | 14 ++ examples/tiny-line/basic/demo/meta.json | 40 ++++ examples/tiny-line/basic/design.en.md | 5 + examples/tiny-line/basic/design.zh.md | 5 + examples/tiny-line/basic/index.en.md | 4 + examples/tiny-line/basic/index.zh.md | 4 + gatsby-config.js | 40 ++++ src/plots/progress/adaptor.ts | 94 ++------ src/plots/progress/index.ts | 7 + src/plots/progress/types.ts | 6 +- src/plots/ring-progress/adaptor.ts | 86 +++----- src/plots/ring-progress/index.ts | 11 +- src/plots/ring-progress/types.ts | 6 +- src/plots/tiny-area/adaptor.ts | 129 ++++------- src/plots/tiny-area/index.ts | 9 + src/plots/tiny-area/types.ts | 6 +- src/plots/tiny-column/adaptor.ts | 95 +++----- src/plots/tiny-column/index.ts | 9 + src/plots/tiny-column/types.ts | 6 +- src/plots/tiny-line/adaptor.ts | 120 +++------- src/plots/tiny-line/constants.ts | 3 +- src/plots/tiny-line/index.ts | 9 + src/plots/tiny-line/types.ts | 4 +- src/types/tooltip.ts | 2 + 67 files changed, 954 insertions(+), 552 deletions(-) create mode 100644 examples/progress/basic/demo/meta.json create mode 100644 examples/progress/basic/demo/progress-style-callback.ts create mode 100644 examples/progress/basic/demo/progress-style.ts create mode 100644 examples/progress/basic/demo/progress-width.ts create mode 100644 examples/progress/basic/demo/progress.ts create mode 100644 examples/progress/basic/design.en.md create mode 100644 examples/progress/basic/design.zh.md create mode 100644 examples/progress/basic/index.en.md create mode 100644 examples/progress/basic/index.zh.md create mode 100644 examples/ring-progress/basic/demo/meta.json create mode 100644 examples/ring-progress/basic/demo/ring-progress-radius.ts create mode 100644 examples/ring-progress/basic/demo/ring-progress-style-callback.ts create mode 100644 examples/ring-progress/basic/demo/ring-progress-style.ts create mode 100644 examples/ring-progress/basic/demo/ring-progress.ts create mode 100644 examples/ring-progress/basic/design.en.md create mode 100644 examples/ring-progress/basic/design.zh.md create mode 100644 examples/ring-progress/basic/index.en.md create mode 100644 examples/ring-progress/basic/index.zh.md create mode 100644 examples/tiny-area/basic/demo/area-style.ts create mode 100644 examples/tiny-area/basic/demo/area-with-scale.ts create mode 100644 examples/tiny-area/basic/demo/area.ts create mode 100644 examples/tiny-area/basic/demo/meta.json create mode 100644 examples/tiny-area/basic/design.en.md create mode 100644 examples/tiny-area/basic/design.zh.md create mode 100644 examples/tiny-area/basic/index.en.md create mode 100644 examples/tiny-area/basic/index.zh.md create mode 100644 examples/tiny-column/basic/demo/column-style-callback.ts create mode 100644 examples/tiny-column/basic/demo/column-style.ts create mode 100644 examples/tiny-column/basic/demo/column-width-ratio.ts create mode 100644 examples/tiny-column/basic/demo/column.ts create mode 100644 examples/tiny-column/basic/demo/meta.json create mode 100644 examples/tiny-column/basic/design.en.md create mode 100644 examples/tiny-column/basic/design.zh.md create mode 100644 examples/tiny-column/basic/index.en.md create mode 100644 examples/tiny-column/basic/index.zh.md create mode 100644 examples/tiny-line/basic/demo/line-style-callback.ts create mode 100644 examples/tiny-line/basic/demo/line-style.ts create mode 100644 examples/tiny-line/basic/demo/line-with-scale.ts create mode 100644 examples/tiny-line/basic/demo/line.ts create mode 100644 examples/tiny-line/basic/demo/meta.json create mode 100644 examples/tiny-line/basic/design.en.md create mode 100644 examples/tiny-line/basic/design.zh.md create mode 100644 examples/tiny-line/basic/index.en.md create mode 100644 examples/tiny-line/basic/index.zh.md diff --git a/__tests__/unit/plots/progress/index-spec.ts b/__tests__/unit/plots/progress/index-spec.ts index 89d847a97d..a9217ad007 100644 --- a/__tests__/unit/plots/progress/index-spec.ts +++ b/__tests__/unit/plots/progress/index-spec.ts @@ -19,10 +19,8 @@ describe('progress', () => { expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); progress.update({ - width: 200, - height: 100, + ...progress.options, percent: 0.5, - autoFit: false, }); expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current'); expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5); @@ -50,11 +48,8 @@ describe('progress', () => { expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321'); progress.update({ - width: 200, - height: 100, - percent: 0.6, - color: () => ['#654321', '#123456'], - autoFit: false, + ...progress.options, + color: ['#654321', '#123456'], }); expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current'); expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); @@ -91,7 +86,7 @@ describe('progress', () => { 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 = (x, percent, type) => { + const progressStyle = (percent, type) => { if (type === 'current') { return percent > 0.5 ? { @@ -120,11 +115,8 @@ describe('progress', () => { }; progress.update({ - width: 200, - height: 100, - percent: 0.6, + ...progress.options, progressStyle, - autoFit: false, }); expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current'); expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); @@ -140,11 +132,8 @@ describe('progress', () => { expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); progress.update({ - width: 200, - height: 100, + ...progress.options, percent: 0.4, - progressStyle, - autoFit: false, }); expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current'); @@ -160,4 +149,18 @@ describe('progress', () => { expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4); expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); }); + + it('barWidthRatio', () => { + const progress = new Progress(createDiv(), { + width: 200, + height: 100, + percent: 0.6, + barWidthRatio: 0.1, + autoFit: false, + }); + + progress.render(); + + expect(progress.chart.getTheme().columnWidthRatio).toBe(0.1); + }); }); diff --git a/__tests__/unit/plots/ring-progress/index-spec.ts b/__tests__/unit/plots/ring-progress/index-spec.ts index a854546f32..142b49f7b5 100644 --- a/__tests__/unit/plots/ring-progress/index-spec.ts +++ b/__tests__/unit/plots/ring-progress/index-spec.ts @@ -3,7 +3,7 @@ import { createDiv } from '../../../utils/dom'; describe('ring-progress', () => { it('data', () => { - const ringGrogress = new RingProgress(createDiv(), { + const ringProgress = new RingProgress(createDiv(), { radius: 1, innerRadius: 0.5, width: 200, @@ -12,38 +12,37 @@ describe('ring-progress', () => { autoFit: false, }); - ringGrogress.render(); - expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta'); - expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1); - expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); + ringProgress.render(); + expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta'); + expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(1); + expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.5); - ringGrogress.update({ - radius: 1, - innerRadius: 0.5, - width: 200, - height: 100, + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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].shape.attr('fill')).toBe('#E8EDF3'); + + ringProgress.update({ + ...ringProgress.options, + radius: 0.98, + innerRadius: 0.8, percent: 0.5, - autoFit: false, }); - expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta'); - expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1); - expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.5); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.5); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); + expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta'); + expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(0.98); + expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.8); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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].shape.attr('fill')).toBe('#E8EDF3'); }); it('data with color', () => { - const ringGrogress = new RingProgress(createDiv(), { + const ringProgress = new RingProgress(createDiv(), { radius: 1, innerRadius: 0.5, width: 200, @@ -53,33 +52,28 @@ describe('ring-progress', () => { autoFit: false, }); - ringGrogress.render(); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321'); + ringProgress.render(); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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].shape.attr('fill')).toBe('#654321'); - ringGrogress.update({ - radius: 1, - innerRadius: 0.5, - width: 200, - height: 100, - percent: 0.6, - color: () => ['#654321', '#123456'], - autoFit: false, + ringProgress.update({ + ...ringProgress.options, + color: ['#654321', '#123456'], }); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456'); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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].shape.attr('fill')).toBe('#123456'); }); it('data with progressStyle', () => { - const ringGrogress = new RingProgress(createDiv(), { + const ringProgress = new RingProgress(createDiv(), { radius: 1, innerRadius: 0.5, width: 200, @@ -93,21 +87,21 @@ describe('ring-progress', () => { autoFit: false, }); - ringGrogress.render(); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]); + ringProgress.render(); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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[0].shape.attr('stroke')).toBe('#123456'); + 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].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 = (x, percent, type) => { + const progressStyle = (percent, type) => { if (type === 'current') { return percent > 0.5 ? { @@ -135,69 +129,59 @@ describe('ring-progress', () => { } }; - ringGrogress.update({ - radius: 1, - innerRadius: 0.5, - width: 200, - height: 100, - percent: 0.6, + ringProgress.update({ + ...ringProgress.options, progressStyle, - autoFit: false, }); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#654321'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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[0].shape.attr('stroke')).toBe('#654321'); + 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].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); + expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); - ringGrogress.update({ - radius: 1, - innerRadius: 0.5, - width: 200, - height: 100, + ringProgress.update({ + ...ringProgress.options, percent: 0.4, - progressStyle, - autoFit: false, }); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456'); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321'); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.4); + expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); + expect(ringProgress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456'); + 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].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); + expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]); }); it('data without radius', () => { - const ringGrogress = new RingProgress(createDiv(), { + const ringProgress = new RingProgress(createDiv(), { width: 200, height: 100, percent: 0.6, autoFit: false, }); - ringGrogress.render(); - expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta'); - expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1); - expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.8); - expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current'); - expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6); - expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target'); - expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4); - expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3'); + ringProgress.render(); + expect(ringProgress.chart.geometries[0].coordinate.type).toBe('theta'); + expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(0.98); + expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.8); + expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current'); + 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].shape.attr('fill')).toBe('#E8EDF3'); }); }); diff --git a/__tests__/unit/plots/tiny-area/index-spec.ts b/__tests__/unit/plots/tiny-area/index-spec.ts index 7c45790349..17eaf95c50 100644 --- a/__tests__/unit/plots/tiny-area/index-spec.ts +++ b/__tests__/unit/plots/tiny-area/index-spec.ts @@ -113,7 +113,6 @@ describe('tiny-area', () => { return item.value; }), autoFit: false, - tooltip: true, }); tinyArea.render(); @@ -127,7 +126,7 @@ describe('tiny-area', () => { expect(tooltipOption.containerTpl).toBe('
'); expect(tooltipOption.domStyles).toEqual({ 'g2-tooltip': { - padding: '2px', + padding: '2px 4px', fontSize: '10px', }, }); diff --git a/__tests__/unit/plots/tiny-column/index-spec.ts b/__tests__/unit/plots/tiny-column/index-spec.ts index 42e50ffe73..828b8373e3 100644 --- a/__tests__/unit/plots/tiny-column/index-spec.ts +++ b/__tests__/unit/plots/tiny-column/index-spec.ts @@ -10,7 +10,7 @@ describe('tiny-column', () => { width: 200, height: 100, meta: { - value: { + y: { min: 0, max: 5000, }, @@ -86,7 +86,6 @@ describe('tiny-column', () => { return item.value; }), autoFit: false, - tooltip: true, }); tinyColumn.render(); @@ -100,7 +99,7 @@ describe('tiny-column', () => { expect(tooltipOption.containerTpl).toBe('
'); expect(tooltipOption.domStyles).toEqual({ 'g2-tooltip': { - padding: '2px', + padding: '2px 4px', fontSize: '10px', }, }); @@ -150,4 +149,27 @@ describe('tiny-column', () => { expect(geometryTooltipOption.fields).toEqual(['x', 'y']); expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' }); }); + + it('columnWidthRatio', () => { + const tinyColumn = new TinyColumn(createDiv(), { + width: 400, + height: 100, + meta: { + y: { + min: 0, + max: 5000, + }, + }, + data: partySupport + .filter((o) => o.type === 'FF') + .map((item) => { + return item.value; + }), + autoFit: false, + columnWidthRatio: 0.9, + }); + + tinyColumn.render(); + expect(tinyColumn.chart.getTheme().columnWidthRatio).toBe(0.9); + }); }); diff --git a/__tests__/unit/plots/tiny-line/index-spec.ts b/__tests__/unit/plots/tiny-line/index-spec.ts index a03bf94130..455495e0d1 100644 --- a/__tests__/unit/plots/tiny-line/index-spec.ts +++ b/__tests__/unit/plots/tiny-line/index-spec.ts @@ -9,18 +9,12 @@ describe('tiny-line', () => { const tinyLine = new TinyLine(createDiv(), { width: 80, height: 40, - meta: { - value: { - min: 0, - max: 5000, - }, - }, data: partySupport .filter((o) => o.type === 'FF') .map((item) => { return item.value; }), - autoFit: false, + autoFit: true, }); tinyLine.render(); @@ -32,7 +26,7 @@ describe('tiny-line', () => { width: 80, height: 40, meta: { - value: { + y: { min: 0, max: 5000, }, @@ -42,7 +36,7 @@ describe('tiny-line', () => { .map((item) => { return item.value; }), - autoFit: false, + autoFit: true, smooth: true, }); @@ -63,7 +57,11 @@ describe('tiny-line', () => { lineStyle: { lineDash: [2, 2], }, - autoFit: false, + tooltip: { + showCrosshairs: true, + showMarkers: true, + }, + autoFit: true, appendPadding: 10, }); @@ -91,8 +89,7 @@ describe('tiny-line', () => { .map((item) => { return item.value; }), - autoFit: false, - tooltip: true, + autoFit: true, }); tinyLine.render(); @@ -106,7 +103,7 @@ describe('tiny-line', () => { expect(tooltipOption.containerTpl).toBe('
'); expect(tooltipOption.domStyles).toEqual({ 'g2-tooltip': { - padding: '2px', + padding: '2px 4px', fontSize: '10px', }, }); diff --git a/examples/progress/basic/demo/meta.json b/examples/progress/basic/demo/meta.json new file mode 100644 index 0000000000..346359caec --- /dev/null +++ b/examples/progress/basic/demo/meta.json @@ -0,0 +1,40 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "progress.ts", + "title": { + "zh": "迷你进度条图", + "en": "basic Progress chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "progress-style.ts", + "title": { + "zh": "迷你进度条图样式", + "en": "Tiny Progress style" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "progress-style-callback.ts", + "title": { + "zh": "迷你进度条图回调样式", + "en": "Tiny Progress style callback" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "progress-width.ts", + "title": { + "zh": "迷你进度条图大小", + "en": "Tiny Progress width" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/progress/basic/demo/progress-style-callback.ts b/examples/progress/basic/demo/progress-style-callback.ts new file mode 100644 index 0000000000..5d08bd85c5 --- /dev/null +++ b/examples/progress/basic/demo/progress-style-callback.ts @@ -0,0 +1,16 @@ +import { Progress } from '@antv/g2plot'; + +const progress = new Progress('container', { + height: 100, + width: 300, + autoFit: false, + percent: 0.7, + progressStyle: (percent: number, type: string) => { + if (type === 'current') { + return { fill: 'green' }; + } + return { fill: '#999', lineDash: [1, 1], stroke: '#333' }; + }, +}); + +progress.render(); diff --git a/examples/progress/basic/demo/progress-style.ts b/examples/progress/basic/demo/progress-style.ts new file mode 100644 index 0000000000..584e48df56 --- /dev/null +++ b/examples/progress/basic/demo/progress-style.ts @@ -0,0 +1,15 @@ +import { Progress } from '@antv/g2plot'; + +const progress = new Progress('container', { + height: 100, + width: 300, + autoFit: false, + percent: 0.7, + progressStyle: { + stroke: 'grey', + lineDash: [4, 4], + lineWidth: 1, + }, +}); + +progress.render(); diff --git a/examples/progress/basic/demo/progress-width.ts b/examples/progress/basic/demo/progress-width.ts new file mode 100644 index 0000000000..08a994a6fb --- /dev/null +++ b/examples/progress/basic/demo/progress-width.ts @@ -0,0 +1,11 @@ +import { Progress } from '@antv/g2plot'; + +const progress = new Progress('container', { + height: 100, + width: 300, + autoFit: false, + percent: 0.7, + barWidthRatio: 0.1, +}); + +progress.render(); diff --git a/examples/progress/basic/demo/progress.ts b/examples/progress/basic/demo/progress.ts new file mode 100644 index 0000000000..ebe9d32aec --- /dev/null +++ b/examples/progress/basic/demo/progress.ts @@ -0,0 +1,10 @@ +import { Progress } from '@antv/g2plot'; + +const progress = new Progress('container', { + height: 100, + width: 300, + autoFit: false, + percent: 0.7, +}); + +progress.render(); diff --git a/examples/progress/basic/design.en.md b/examples/progress/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/progress/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/progress/basic/design.zh.md b/examples/progress/basic/design.zh.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/progress/basic/design.zh.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/progress/basic/index.en.md b/examples/progress/basic/index.en.md new file mode 100644 index 0000000000..863322de4a --- /dev/null +++ b/examples/progress/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 进度条图 +order: 0 +--- diff --git a/examples/progress/basic/index.zh.md b/examples/progress/basic/index.zh.md new file mode 100644 index 0000000000..863322de4a --- /dev/null +++ b/examples/progress/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 进度条图 +order: 0 +--- diff --git a/examples/ring-progress/basic/demo/meta.json b/examples/ring-progress/basic/demo/meta.json new file mode 100644 index 0000000000..59d64d8922 --- /dev/null +++ b/examples/ring-progress/basic/demo/meta.json @@ -0,0 +1,40 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "ring-progress.ts", + "title": { + "zh": "迷你进度环图", + "en": "basic Ring chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "ring-progress-style.ts", + "title": { + "zh": "迷你进度环图样式", + "en": "Tiny Ring style" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "ring-progress-style-callback.ts", + "title": { + "zh": "迷你进度环图回调样式", + "en": "Tiny Ring style callback" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "ring-progress-radius.ts", + "title": { + "zh": "迷你进度环图半径大小", + "en": "Tiny Ring radius" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/ring-progress/basic/demo/ring-progress-radius.ts b/examples/ring-progress/basic/demo/ring-progress-radius.ts new file mode 100644 index 0000000000..2a0630da56 --- /dev/null +++ b/examples/ring-progress/basic/demo/ring-progress-radius.ts @@ -0,0 +1,12 @@ +import { RingProgress } from '@antv/g2plot'; + +const ringProgress = new RingProgress('container', { + height: 100, + width: 100, + autoFit: false, + percent: 0.7, + innerRadius: 0.95, + radius: 0.95, +}); + +ringProgress.render(); diff --git a/examples/ring-progress/basic/demo/ring-progress-style-callback.ts b/examples/ring-progress/basic/demo/ring-progress-style-callback.ts new file mode 100644 index 0000000000..c2b7ecc40d --- /dev/null +++ b/examples/ring-progress/basic/demo/ring-progress-style-callback.ts @@ -0,0 +1,16 @@ +import { RingProgress } from '@antv/g2plot'; + +const ringProgress = new RingProgress('container', { + height: 100, + width: 100, + autoFit: false, + percent: 0.7, + progressStyle: (percent: number, type: string) => { + if (type === 'current') { + return { fill: 'green' }; + } + return { fill: '#999', lineDash: [1, 1], stroke: '#333' }; + }, +}); + +ringProgress.render(); diff --git a/examples/ring-progress/basic/demo/ring-progress-style.ts b/examples/ring-progress/basic/demo/ring-progress-style.ts new file mode 100644 index 0000000000..d22d3d5687 --- /dev/null +++ b/examples/ring-progress/basic/demo/ring-progress-style.ts @@ -0,0 +1,15 @@ +import { RingProgress } from '@antv/g2plot'; + +const ringProgress = new RingProgress('container', { + height: 100, + width: 100, + autoFit: false, + percent: 0.7, + progressStyle: { + stroke: 'grey', + lineDash: [4, 4], + lineWidth: 1, + }, +}); + +ringProgress.render(); diff --git a/examples/ring-progress/basic/demo/ring-progress.ts b/examples/ring-progress/basic/demo/ring-progress.ts new file mode 100644 index 0000000000..540f66bafe --- /dev/null +++ b/examples/ring-progress/basic/demo/ring-progress.ts @@ -0,0 +1,10 @@ +import { RingProgress } from '@antv/g2plot'; + +const ringProgress = new RingProgress('container', { + height: 100, + width: 100, + autoFit: false, + percent: 0.7, +}); + +ringProgress.render(); diff --git a/examples/ring-progress/basic/design.en.md b/examples/ring-progress/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/ring-progress/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/ring-progress/basic/design.zh.md b/examples/ring-progress/basic/design.zh.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/ring-progress/basic/design.zh.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/ring-progress/basic/index.en.md b/examples/ring-progress/basic/index.en.md new file mode 100644 index 0000000000..b3ab2c6525 --- /dev/null +++ b/examples/ring-progress/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 进度环图 +order: 0 +--- diff --git a/examples/ring-progress/basic/index.zh.md b/examples/ring-progress/basic/index.zh.md new file mode 100644 index 0000000000..b3ab2c6525 --- /dev/null +++ b/examples/ring-progress/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 进度环图 +order: 0 +--- diff --git a/examples/tiny-area/basic/demo/area-style.ts b/examples/tiny-area/basic/demo/area-style.ts new file mode 100644 index 0000000000..d9612ec6d4 --- /dev/null +++ b/examples/tiny-area/basic/demo/area-style.ts @@ -0,0 +1,18 @@ +import { TinyArea } from '@antv/g2plot'; + +const tinyArea = new TinyArea('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + lineStyle: { + lineDash: [2, 2], + stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff', + }, + areaStyle: { + fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff', + }, +}); + +tinyArea.render(); diff --git a/examples/tiny-area/basic/demo/area-with-scale.ts b/examples/tiny-area/basic/demo/area-with-scale.ts new file mode 100644 index 0000000000..b656c43f2a --- /dev/null +++ b/examples/tiny-area/basic/demo/area-with-scale.ts @@ -0,0 +1,21 @@ +import { TinyArea } from '@antv/g2plot'; + +const tinyArea = new TinyArea('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + tooltip: { + showCrosshairs: true, + showMarkers: true, + }, + meta: { + y: { + max: 150, + min: -50, + }, + }, +}); + +tinyArea.render(); diff --git a/examples/tiny-area/basic/demo/area.ts b/examples/tiny-area/basic/demo/area.ts new file mode 100644 index 0000000000..f93e35c953 --- /dev/null +++ b/examples/tiny-area/basic/demo/area.ts @@ -0,0 +1,14 @@ +import { TinyArea } from '@antv/g2plot'; + +const tinyArea = new TinyArea('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + tooltip: { + formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`, + }, +}); + +tinyArea.render(); diff --git a/examples/tiny-area/basic/demo/meta.json b/examples/tiny-area/basic/demo/meta.json new file mode 100644 index 0000000000..ead19a988b --- /dev/null +++ b/examples/tiny-area/basic/demo/meta.json @@ -0,0 +1,32 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "area.ts", + "title": { + "zh": "基础迷你面积图", + "en": "basic Line chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "area-style.ts", + "title": { + "zh": "迷你面积图样式", + "en": "Tiny Line style" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "area-with-scale.ts", + "title": { + "zh": "迷你面积图比例尺", + "en": "Tiny Line scale" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/tiny-area/basic/design.en.md b/examples/tiny-area/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-area/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-area/basic/design.zh.md b/examples/tiny-area/basic/design.zh.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-area/basic/design.zh.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-area/basic/index.en.md b/examples/tiny-area/basic/index.en.md new file mode 100644 index 0000000000..d57884b618 --- /dev/null +++ b/examples/tiny-area/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 迷你面积图 +order: 0 +--- diff --git a/examples/tiny-area/basic/index.zh.md b/examples/tiny-area/basic/index.zh.md new file mode 100644 index 0000000000..d57884b618 --- /dev/null +++ b/examples/tiny-area/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 迷你面积图 +order: 0 +--- diff --git a/examples/tiny-column/basic/demo/column-style-callback.ts b/examples/tiny-column/basic/demo/column-style-callback.ts new file mode 100644 index 0000000000..686ff34d6d --- /dev/null +++ b/examples/tiny-column/basic/demo/column-style-callback.ts @@ -0,0 +1,15 @@ +import { TinyColumn } from '@antv/g2plot'; + +const tinyColumn = new TinyColumn('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + columnStyle: (x, y) => { + return { + fill: y > 80 ? 'red' : 'green', + }; + }, +}); + +tinyColumn.render(); diff --git a/examples/tiny-column/basic/demo/column-style.ts b/examples/tiny-column/basic/demo/column-style.ts new file mode 100644 index 0000000000..908ef902fe --- /dev/null +++ b/examples/tiny-column/basic/demo/column-style.ts @@ -0,0 +1,13 @@ +import { TinyColumn } from '@antv/g2plot'; + +const tinyColumn = new TinyColumn('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + columnStyle: { + fill: '#222', + }, +}); + +tinyColumn.render(); diff --git a/examples/tiny-column/basic/demo/column-width-ratio.ts b/examples/tiny-column/basic/demo/column-width-ratio.ts new file mode 100644 index 0000000000..200ff56087 --- /dev/null +++ b/examples/tiny-column/basic/demo/column-width-ratio.ts @@ -0,0 +1,17 @@ +import { TinyColumn } from '@antv/g2plot'; + +const tinyColumn = new TinyColumn('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + columnWidthRatio: 0.9, + meta: { + y: { + max: 150, + min: -50, + }, + }, +}); + +tinyColumn.render(); diff --git a/examples/tiny-column/basic/demo/column.ts b/examples/tiny-column/basic/demo/column.ts new file mode 100644 index 0000000000..fe5e47891d --- /dev/null +++ b/examples/tiny-column/basic/demo/column.ts @@ -0,0 +1,13 @@ +import { TinyColumn } from '@antv/g2plot'; + +const tinyColumn = new TinyColumn('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + tooltip: { + formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`, + }, +}); + +tinyColumn.render(); diff --git a/examples/tiny-column/basic/demo/meta.json b/examples/tiny-column/basic/demo/meta.json new file mode 100644 index 0000000000..05a5d8bd4b --- /dev/null +++ b/examples/tiny-column/basic/demo/meta.json @@ -0,0 +1,40 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "column.ts", + "title": { + "zh": "基础迷你柱形图", + "en": "basic Column chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "column-style.ts", + "title": { + "zh": "迷你柱形图样式", + "en": "Tiny Column style" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "column-style-callback.ts", + "title": { + "zh": "迷你柱形图回调样式", + "en": "Tiny Column style callback" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "line-width-ratio.ts", + "title": { + "zh": "迷你柱形图比例尺", + "en": "Tiny Column scale" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/tiny-column/basic/design.en.md b/examples/tiny-column/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-column/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-column/basic/design.zh.md b/examples/tiny-column/basic/design.zh.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-column/basic/design.zh.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-column/basic/index.en.md b/examples/tiny-column/basic/index.en.md new file mode 100644 index 0000000000..7b93c235cd --- /dev/null +++ b/examples/tiny-column/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 迷你柱形图 +order: 0 +--- diff --git a/examples/tiny-column/basic/index.zh.md b/examples/tiny-column/basic/index.zh.md new file mode 100644 index 0000000000..7b93c235cd --- /dev/null +++ b/examples/tiny-column/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 迷你柱形图 +order: 0 +--- diff --git a/examples/tiny-line/basic/demo/line-style-callback.ts b/examples/tiny-line/basic/demo/line-style-callback.ts new file mode 100644 index 0000000000..161b559a0f --- /dev/null +++ b/examples/tiny-line/basic/demo/line-style-callback.ts @@ -0,0 +1,18 @@ +import { TinyLine } from '@antv/g2plot'; + +const tinyLine = new TinyLine('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + tooltip: false, + lineStyle: () => { + return { + stroke: 'green', + lineWidth: 1, + }; + }, +}); + +tinyLine.render(); diff --git a/examples/tiny-line/basic/demo/line-style.ts b/examples/tiny-line/basic/demo/line-style.ts new file mode 100644 index 0000000000..0b51508c4c --- /dev/null +++ b/examples/tiny-line/basic/demo/line-style.ts @@ -0,0 +1,14 @@ +import { TinyLine } from '@antv/g2plot'; + +const tinyLine = new TinyLine('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + lineStyle: { + lineDash: [2, 2], + }, +}); + +tinyLine.render(); diff --git a/examples/tiny-line/basic/demo/line-with-scale.ts b/examples/tiny-line/basic/demo/line-with-scale.ts new file mode 100644 index 0000000000..cf2510a25c --- /dev/null +++ b/examples/tiny-line/basic/demo/line-with-scale.ts @@ -0,0 +1,21 @@ +import { TinyLine } from '@antv/g2plot'; + +const tinyLine = new TinyLine('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + tooltip: { + showCrosshairs: true, + showMarkers: true, + }, + meta: { + y: { + max: 150, + min: -50, + }, + }, +}); + +tinyLine.render(); diff --git a/examples/tiny-line/basic/demo/line.ts b/examples/tiny-line/basic/demo/line.ts new file mode 100644 index 0000000000..64f2b519b2 --- /dev/null +++ b/examples/tiny-line/basic/demo/line.ts @@ -0,0 +1,14 @@ +import { TinyLine } from '@antv/g2plot'; + +const tinyLine = new TinyLine('container', { + height: 60, + width: 300, + autoFit: false, + data: new Array(100).fill(0).map(() => Math.random() * 100), + smooth: true, + tooltip: { + formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`, + }, +}); + +tinyLine.render(); diff --git a/examples/tiny-line/basic/demo/meta.json b/examples/tiny-line/basic/demo/meta.json new file mode 100644 index 0000000000..0b51b6193f --- /dev/null +++ b/examples/tiny-line/basic/demo/meta.json @@ -0,0 +1,40 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "line.ts", + "title": { + "zh": "基础迷你折线图", + "en": "basic Line chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "line-style.ts", + "title": { + "zh": "迷你折线图样式", + "en": "Tiny Line style" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "line-style-callback.ts", + "title": { + "zh": "迷你折线图回调样式", + "en": "Tiny Line style callback" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "line-with-scale.ts", + "title": { + "zh": "迷你折线图比例尺", + "en": "Tiny Line scale" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/tiny-line/basic/design.en.md b/examples/tiny-line/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-line/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-line/basic/design.zh.md b/examples/tiny-line/basic/design.zh.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/tiny-line/basic/design.zh.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/tiny-line/basic/index.en.md b/examples/tiny-line/basic/index.en.md new file mode 100644 index 0000000000..4d3493e766 --- /dev/null +++ b/examples/tiny-line/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: 迷你折线图 +order: 0 +--- diff --git a/examples/tiny-line/basic/index.zh.md b/examples/tiny-line/basic/index.zh.md new file mode 100644 index 0000000000..4d3493e766 --- /dev/null +++ b/examples/tiny-line/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 迷你折线图 +order: 0 +--- diff --git a/gatsby-config.js b/gatsby-config.js index b16ea66721..e3bb766d8a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -135,6 +135,46 @@ module.exports = { en: 'Funnel Charts', }, }, + { + slug: 'tiny-line', + icon: 'line', + title: { + zh: '迷你折线图', + en: 'Tiny Line', + }, + }, + { + slug: 'tiny-area', + icon: 'area', + title: { + zh: '迷你面积图', + en: 'Tiny Area', + }, + }, + { + slug: 'tiny-column', + icon: 'column', + title: { + zh: '迷你柱形图', + en: 'Tiny Column', + }, + }, + { + slug: 'ring-progress', + icon: 'other', + title: { + zh: '进度环图', + en: 'Ring Progress', + }, + }, + { + slug: 'progress', + icon: 'other', + title: { + zh: '进度条图', + en: 'Tiny Progress', + }, + }, // OTHERS { slug: 'general', diff --git a/src/plots/progress/adaptor.ts b/src/plots/progress/adaptor.ts index a17172acc8..be137ac064 100644 --- a/src/plots/progress/adaptor.ts +++ b/src/plots/progress/adaptor.ts @@ -1,101 +1,35 @@ -import { isFunction } from '@antv/util'; +import { isNil } from '@antv/util'; import { Params } from '../../core/adaptor'; import { flow } from '../../utils'; -import { scale } from '../../adaptor/common'; +import { scale, animation, theme } from '../../adaptor/common'; +import { geometry } from '../ring-progress/adaptor'; import { ProgressOptions } from './types'; /** - * 字段 - * @param params - */ -function field(params: Params): Params { - const { chart, options } = params; - const { percent, color } = options; - - const data = [ - { - type: 'current', - percent: percent, - }, - { - type: 'target', - percent: 1 - percent, - }, - ]; - - chart.data(data); - - const geometry = chart.interval().position('1*percent').adjust('stack'); - const values = isFunction(color) ? color(percent) : color || ['#FAAD14', '#E8EDF3']; - - geometry.color('type', values); - - return params; -} - -/** - * axis 配置 - * @param params - */ -function axis(params: Params): Params { - const { chart } = params; - - chart.axis(false); - - return params; -} - -/** - * legend 配置 - * @param params - */ -function legend(params: Params): Params { - const { chart } = params; - - chart.legend(false); - - return params; -} - -/** - * tooltip 配置 + * coordinate 配置 * @param params */ -function tooltip(params: Params): Params { +function coordinate(params: Params): Params { const { chart } = params; - chart.tooltip(false); + chart.coordinate('rect').transpose(); return params; } /** - * 样式 + * widthRatio 配置 * @param params */ -function style(params: Params): Params { +function widthRatio(params: Params): Params { const { chart, options } = params; - const { progressStyle } = options; + const { barWidthRatio } = options; - const geometry = chart.geometries[0]; - if (progressStyle && geometry) { - if (isFunction(progressStyle)) { - geometry.style('1*percent*type', progressStyle); - } else { - geometry.style(progressStyle); - } + if (!isNil(widthRatio)) { + chart.theme({ + columnWidthRatio: barWidthRatio, + }); } - return params; -} - -/** - * coordinate 配置 - * @param params - */ -function coordinate(params: Params): Params { - const { chart } = params; - - chart.coordinate('rect').transpose(); return params; } @@ -106,5 +40,5 @@ function coordinate(params: Params): Params { * @param options */ export function adaptor(params: Params) { - return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params); + return flow(geometry, scale({}), coordinate, widthRatio, animation, theme)(params); } diff --git a/src/plots/progress/index.ts b/src/plots/progress/index.ts index 39b54d1d31..49c33b5386 100644 --- a/src/plots/progress/index.ts +++ b/src/plots/progress/index.ts @@ -9,6 +9,13 @@ export class Progress extends Plot { /** 图表类型 */ public type: string = 'process'; + protected getDefaultOptions() { + return { + percent: 0.2, + color: ['#FAAD14', '#E8EDF3'], + }; + } + /** * 获取 进度图 的适配器 */ diff --git a/src/plots/progress/types.ts b/src/plots/progress/types.ts index ed933c21c7..459ffe0e40 100644 --- a/src/plots/progress/types.ts +++ b/src/plots/progress/types.ts @@ -5,8 +5,10 @@ import { ShapeStyle } from '../../types/style'; export interface ProgressOptions extends Omit { /** 进度百分比 */ readonly percent: number; + /** 条图宽度占比 [0-1] */ + readonly barWidthRatio?: number; /** 进度条颜色 */ - readonly color?: string[] | ((percent: number) => string[]); + readonly color?: string | string[] | ((percent: number, type: string) => string); /** 进度条样式 */ - readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle); + readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle); } diff --git a/src/plots/ring-progress/adaptor.ts b/src/plots/ring-progress/adaptor.ts index 4b549b1214..cfd5731606 100644 --- a/src/plots/ring-progress/adaptor.ts +++ b/src/plots/ring-progress/adaptor.ts @@ -1,16 +1,16 @@ -import { isFunction } from '@antv/util'; +import { isFunction, isArray } from '@antv/util'; import { Params } from '../../core/adaptor'; import { flow } from '../../utils'; -import { scale } from '../../adaptor/common'; +import { scale, animation, theme } from '../../adaptor/common'; import { RingProgressOptions } from './types'; /** - * 字段 + * 图形 * @param params */ -function field(params: Params): Params { +export function geometry(params: Params): Params { const { chart, options } = params; - const { percent, color } = options; + const { percent, color, progressStyle } = options; const data = [ { @@ -25,77 +25,43 @@ function field(params: Params): Params chart.data(data); + // geometry const geometry = chart.interval().position('1*percent').adjust('stack'); - const values = isFunction(color) ? color(percent) : color || ['#FAAD14', '#E8EDF3']; - geometry.color('type', values); - - return params; -} + // color + if (color) { + if (isArray(color)) { + geometry.color('type', color); + } else { + geometry.color('type', (type: string): string => { + return isFunction(color) ? color(percent, type) : color; + }); + } + } -/** - * axis 配置 - * @param params - */ -function axis(params: Params): Params { - const { chart } = params; + // style + if (progressStyle) { + geometry.style('percent*type', (percent: number, type: string) => { + return isFunction(progressStyle) ? progressStyle(percent, type) : progressStyle; + }); + } + chart.tooltip(false); chart.axis(false); - - return params; -} - -/** - * legend 配置 - * @param params - */ -function legend(params: Params): Params { - const { chart } = params; - chart.legend(false); return params; } -/** - * tooltip 配置 - * @param params - */ -function tooltip(params: Params): Params { - const { chart } = params; - - chart.tooltip(false); - - return params; -} - -/** - * 样式 - * @param params - */ -function style(params: Params): Params { - const { chart, options } = params; - const { progressStyle } = options; - - const geometry = chart.geometries[0]; - if (progressStyle && geometry) { - if (isFunction(progressStyle)) { - geometry.style('1*percent*type', progressStyle); - } else { - geometry.style(progressStyle); - } - } - return params; -} - /** * coordinate 配置 * @param params */ function coordinate(params: Params): Params { const { chart, options } = params; - const { innerRadius = 0.8, radius = 1 } = options; + const { innerRadius, radius } = options; + // coordinate chart.coordinate('theta', { innerRadius, radius, @@ -110,5 +76,5 @@ function coordinate(params: Params): Params) { - return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params); + return flow(geometry, scale({}), coordinate, animation, theme)(params); } diff --git a/src/plots/ring-progress/index.ts b/src/plots/ring-progress/index.ts index 236edf4648..295b9988e6 100644 --- a/src/plots/ring-progress/index.ts +++ b/src/plots/ring-progress/index.ts @@ -7,7 +7,16 @@ export { RingProgressOptions }; export class RingProgress extends Plot { /** 图表类型 */ - public type: string = 'process'; + public type: string = 'ring-process'; + + protected getDefaultOptions() { + return { + percent: 0.2, + innerRadius: 0.8, + radius: 0.98, + color: ['#FAAD14', '#E8EDF3'], + }; + } /** * 获取 环形进度图 的适配器 diff --git a/src/plots/ring-progress/types.ts b/src/plots/ring-progress/types.ts index dc0480da6f..1c3bdb45a4 100644 --- a/src/plots/ring-progress/types.ts +++ b/src/plots/ring-progress/types.ts @@ -2,7 +2,7 @@ import { Options } from '../../types'; import { ShapeStyle } from '../../types/style'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ -export interface RingProgressOptions extends Omit { +export interface RingProgressOptions extends Omit { /** 进度百分比 */ readonly percent: number; /** 外环的半径 */ @@ -10,7 +10,7 @@ export interface RingProgressOptions extends Omit { /** 内环的半径 */ readonly innerRadius?: number; /** 进度条颜色 */ - readonly color?: string[] | ((percent: number) => string[]); + readonly color?: string | string[] | ((percent: number, type: string) => string); /** 进度条样式 */ - readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle); + readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle); } diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts index 24e836da83..3caabb04f3 100644 --- a/src/plots/tiny-area/adaptor.ts +++ b/src/plots/tiny-area/adaptor.ts @@ -1,17 +1,17 @@ import { isFunction } from '@antv/util'; -import { theme, scale } from '../../adaptor/common'; +import { theme, scale, animation } from '../../adaptor/common'; import { Params } from '../../core/adaptor'; import { flow } from '../../utils'; -import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants'; +import { TinyTooltipOption } from '../../types'; import { TinyAreaOptions } from './types'; /** * 字段 * @param params */ -function field(params: Params): Params { +function geometry(params: Params): Params { const { chart, options } = params; - const { data } = options; + const { data, lineStyle, areaStyle, smooth } = options; const seriesData = data.map((y: number, x: number) => { return { x, y }; @@ -19,31 +19,31 @@ function field(params: Params): Params { chart.data(seriesData); - chart.area().position('x*y'); - chart.line().position('x*y'); + const areaGeometry = chart + .area() + .position('x*y') + .shape(smooth ? 'smooth' : 'area'); - return params; -} - -/** - * axis 配置 - * @param params - */ -function axis(params: Params): Params { - const { chart } = params; + // area style + if (areaStyle) { + areaGeometry.style('x*y', () => { + return isFunction(areaStyle) ? areaStyle() : areaStyle; + }); + } - chart.axis(false); + const lineGeometry = chart + .line() + .position('x*y') + .shape(smooth ? 'smooth' : 'line'); - return params; -} - -/** - * legend 配置 - * @param params - */ -function legend(params: Params): Params { - const { chart } = params; + // line style + if (lineStyle) { + lineGeometry.style('x*y', () => { + return isFunction(lineStyle) ? lineStyle() : lineStyle; + }); + } + chart.axis(false); chart.legend(false); return params; @@ -55,76 +55,23 @@ function legend(params: Params): Params { */ export function tooltip(params: Params): Params { const { chart, options } = params; - const { tooltip = false } = options; + const { tooltip } = options; - if (tooltip) { - if (typeof tooltip === 'object') { - const { formatter, domStyles, position, offset, showCrosshairs } = tooltip; - chart.tooltip({ - ...DEFAULT_TOOLTIP_OPTIONS, - showCrosshairs, - domStyles, - position, - offset, - }); - chart.geometries.map((geometry) => { - geometry.tooltip('x*y', (x, y) => { - return { - value: formatter(x, y), - }; - }); - }); - } else { - chart.tooltip(DEFAULT_TOOLTIP_OPTIONS); - } - } else { + // false 则关闭 + if (tooltip === false) { chart.tooltip(false); - } - - return params; -} - -/** - * 样式 - * @param params - */ -function style(params: Params): Params { - const { chart, options } = params; - const { lineStyle, areaStyle } = options; + } else { + // 是如果 object，那么传入 + const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption; - const areaGeometry = chart.geometries[0]; - if (areaStyle && areaGeometry) { - if (isFunction(areaStyle)) { - areaGeometry.style('x*y', areaStyle); - } else { - areaGeometry.style(areaStyle); - } - } + chart.tooltip(otherTooltip); - const lineGeometry = chart.geometries[1]; - if (lineStyle && lineGeometry) { - if (isFunction(lineStyle)) { - lineGeometry.style('x*y', lineStyle); - } else { - lineGeometry.style(lineStyle); - } + chart.geometries.map((g) => { + g.tooltip('x*y', (x, y) => ({ + value: formatter(x, y), + })); + }); } - return params; -} - -/** - * shape 的配置处理 - * @param params - */ -function shape(params: Params): Params { - const { chart, options } = params; - const { smooth } = options; - - const areaGeometry = chart.geometries[0]; - areaGeometry.shape(smooth ? 'smooth' : 'area'); - - const lineGeometry = chart.geometries[1]; - lineGeometry.shape(smooth ? 'smooth' : 'line'); return params; } @@ -135,5 +82,5 @@ function shape(params: Params): Params { * @param options */ export function adaptor(params: Params) { - return flow(field, scale({}), axis, legend, tooltip, style, shape, theme)(params); + return flow(geometry, scale({}), tooltip, theme, animation)(params); } diff --git a/src/plots/tiny-area/index.ts b/src/plots/tiny-area/index.ts index bcc5f47b2b..141ed764ad 100644 --- a/src/plots/tiny-area/index.ts +++ b/src/plots/tiny-area/index.ts @@ -1,5 +1,6 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; +import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants'; import { TinyAreaOptions } from './types'; import { adaptor } from './adaptor'; @@ -9,6 +10,14 @@ export class TinyArea extends Plot { /** 图表类型 */ public type: string = 'tiny-area'; + protected getDefaultOptions() { + return { + tooltip: { + ...DEFAULT_TOOLTIP_OPTIONS, + }, + }; + } + /** * 获取 迷你面积图 的适配器 */ diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts index b41eba6c83..1955913ab9 100644 --- a/src/plots/tiny-area/types.ts +++ b/src/plots/tiny-area/types.ts @@ -3,15 +3,15 @@ import { ShapeStyle } from '../../types/style'; import { TinyTooltipOption } from '../../types/tooltip'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ -export interface TinyAreaOptions extends Omit { +export interface TinyAreaOptions extends Omit { /** 具体的数据 */ readonly data: number[]; /** 是否平滑 */ readonly smooth?: boolean; /** 面积折线图形样式 */ - readonly lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle); + readonly lineStyle?: ShapeStyle | (() => ShapeStyle); /** 面积填充图形样式 */ - readonly areaStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle); + readonly areaStyle?: ShapeStyle | (() => ShapeStyle); /** tooltip配置 */ readonly tooltip?: boolean | TinyTooltipOption; } diff --git a/src/plots/tiny-column/adaptor.ts b/src/plots/tiny-column/adaptor.ts index 81e2e10c44..08ef09c231 100644 --- a/src/plots/tiny-column/adaptor.ts +++ b/src/plots/tiny-column/adaptor.ts @@ -1,17 +1,16 @@ -import { isFunction } from '@antv/util'; -import { theme, scale } from '../../adaptor/common'; +import { isFunction, isNil } from '@antv/util'; +import { theme, scale, animation } from '../../adaptor/common'; import { Params } from '../../core/adaptor'; import { flow } from '../../utils'; -import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants'; +import { TinyTooltipOption } from '../../types'; import { TinyColumnOptions } from './types'; - /** * 字段 * @param params */ -function field(params: Params): Params { +function geometry(params: Params): Params { const { chart, options } = params; - const { data } = options; + const { data, columnStyle, columnWidthRatio } = options; const seriesData = data.map((y: number, x: number) => { return { x, y }; @@ -19,30 +18,22 @@ function field(params: Params): Params { chart.data(seriesData); - chart.interval().position('x*y'); + const geometry = chart.interval().position('x*y'); - return params; -} + // line style + if (columnStyle) { + geometry.style('x*y', (x: number, y: number) => { + return isFunction(columnStyle) ? columnStyle(x, y) : columnStyle; + }); + } -/** - * axis 配置 - * @param params - */ -function axis(params: Params): Params { - const { chart } = params; + if (!isNil(columnWidthRatio)) { + chart.theme({ + columnWidthRatio, + }); + } chart.axis(false); - - return params; -} - -/** - * legend 配置 - * @param params - */ -function legend(params: Params): Params { - const { chart } = params; - chart.legend(false); return params; @@ -54,50 +45,22 @@ function legend(params: Params): Params { */ export function tooltip(params: Params): Params { const { chart, options } = params; - const { tooltip = false } = options; + const { tooltip } = options; - if (tooltip) { - if (typeof tooltip === 'object') { - const { formatter, domStyles, position, offset, showCrosshairs } = tooltip; - chart.tooltip({ - ...DEFAULT_TOOLTIP_OPTIONS, - showCrosshairs, - domStyles, - position, - offset, - }); - const geometry = chart.geometries[0]; - geometry.tooltip('x*y', (x, y) => { - return { - value: formatter(x, y), - }; - }); - } else { - chart.tooltip(DEFAULT_TOOLTIP_OPTIONS); - } - } else { + // false 则关闭 + if (tooltip === false) { chart.tooltip(false); - } - - return params; -} + } else { + // 是如果 object，那么传入 + const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption; -/** - * 样式 - * @param params - */ -function style(params: Params): Params { - const { chart, options } = params; - const { columnStyle } = options; + chart.tooltip(otherTooltip); - const geometry = chart.geometries[0]; - if (columnStyle && geometry) { - if (isFunction(columnStyle)) { - geometry.style('x*y', columnStyle); - } else { - geometry.style(columnStyle); - } + chart.geometries[0].tooltip('x*y', (x, y) => ({ + value: formatter(x, y), + })); } + return params; } @@ -107,5 +70,5 @@ function style(params: Params): Params { * @param options */ export function adaptor(params: Params) { - return flow(field, scale({}), axis, legend, tooltip, style, theme)(params); + return flow(geometry, scale({}), tooltip, theme, animation)(params); } diff --git a/src/plots/tiny-column/index.ts b/src/plots/tiny-column/index.ts index 552b475199..aadd5a4fd6 100644 --- a/src/plots/tiny-column/index.ts +++ b/src/plots/tiny-column/index.ts @@ -1,5 +1,6 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; +import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants'; import { TinyColumnOptions } from './types'; import { adaptor } from './adaptor'; @@ -9,6 +10,14 @@ export class TinyColumn extends Plot { /** 图表类型 */ public type: string = 'tiny-column'; + protected getDefaultOptions() { + return { + tooltip: { + ...DEFAULT_TOOLTIP_OPTIONS, + }, + }; + } + /** * 获取 迷你柱形图 的适配器 */ diff --git a/src/plots/tiny-column/types.ts b/src/plots/tiny-column/types.ts index 484703cb3b..fc55c89986 100644 --- a/src/plots/tiny-column/types.ts +++ b/src/plots/tiny-column/types.ts @@ -3,11 +3,13 @@ import { ShapeStyle } from '../../types/style'; import { TinyTooltipOption } from '../../types/tooltip'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ -export interface TinyColumnOptions extends Omit { +export interface TinyColumnOptions extends Omit { /** 具体的数据 */ readonly data: number[]; + /** 柱状图宽度占比 [0-1] */ + readonly columnWidthRatio?: number; /** 迷你柱形图形样式 */ - readonly columnStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle); + readonly columnStyle?: ShapeStyle | ((x: number, y: number) => ShapeStyle); /** tooltip配置 */ readonly tooltip?: boolean | TinyTooltipOption; } diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts index adc6e1274a..21a721b71b 100644 --- a/src/plots/tiny-line/adaptor.ts +++ b/src/plots/tiny-line/adaptor.ts @@ -1,17 +1,17 @@ import { isFunction } from '@antv/util'; import { Params } from '../../core/adaptor'; import { flow } from '../../utils'; -import { scale } from '../../adaptor/common'; +import { scale, theme, animation } from '../../adaptor/common'; +import { TinyTooltipOption } from '../../types'; import { TinyLineOptions } from './types'; -import { DEFAULT_TOOLTIP_OPTIONS } from './constants'; /** * 字段 * @param params */ -function field(params: Params): Params { +function geometry(params: Params): Params { const { chart, options } = params; - const { data, connectNulls } = options; + const { data, connectNulls, lineStyle, smooth } = options; const seriesData = data.map((y: number, x: number) => { return { x, y }; @@ -19,19 +19,20 @@ function field(params: Params): Params { chart.data(seriesData); - chart.line({ connectNulls }).position('x*y'); + const geometry = chart + .line({ connectNulls }) + .position('x*y') + .shape(smooth ? 'smooth' : 'line'); - return params; -} - -/** - * axis 配置 - * @param params - */ -function axis(params: Params): Params { - const { chart } = params; + // line style + if (lineStyle) { + geometry.style('x*y', () => { + return isFunction(lineStyle) ? lineStyle() : lineStyle; + }); + } chart.axis(false); + chart.legend(false); return params; } @@ -42,91 +43,22 @@ function axis(params: Params): Params { */ export function tooltip(params: Params): Params { const { chart, options } = params; - const { tooltip = false } = options; + const { tooltip } = options; - if (tooltip) { - if (typeof tooltip === 'object') { - const { formatter, domStyles, position, offset, showCrosshairs } = tooltip; - chart.tooltip({ - ...DEFAULT_TOOLTIP_OPTIONS, - showCrosshairs, - domStyles, - position, - offset, - }); - const geometry = chart.geometries[0]; - geometry.tooltip('x*y', (x, y) => { - return { - value: formatter(x, y), - }; - }); - } else { - chart.tooltip(DEFAULT_TOOLTIP_OPTIONS); - } - } else { + // false 则关闭 + if (tooltip === false) { chart.tooltip(false); - } - - return params; -} - -/** - * legend 配置 - * @param params - */ -function legend(params: Params): Params { - const { chart } = params; - - chart.legend(false); - - return params; -} + } else { + // 是如果 object，那么传入 + const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption; -/** - * 样式 - * @param params - */ -function style(params: Params): Params { - const { chart, options } = params; - const { lineStyle } = options; + chart.tooltip(otherTooltip); - const geometry = chart.geometries[0]; - if (lineStyle && geometry) { - if (isFunction(lineStyle)) { - geometry.style('x*y', lineStyle); - } else { - geometry.style(lineStyle); - } + chart.geometries[0].tooltip('x*y', (x, y) => ({ + value: formatter(x, y), + })); } - return params; -} - -/** - * shape 的配置处理 - * @param params - */ -function shape(params: Params): Params { - const { chart, options } = params; - const { smooth } = options; - - const lineGeometry = chart.geometries[0]; - - lineGeometry.shape(smooth ? 'smooth' : 'line'); - return params; -} -/** - * 设置全局主题配置 - * @param params - */ -export function theme(params: Params): Params { - const { chart, options } = params; - const { theme } = options; - - // 存在主题才设置主题 - if (theme) { - chart.theme(theme); - } return params; } @@ -136,5 +68,5 @@ export function theme(params: Params): Params * @param options */ export function adaptor(params: Params) { - return flow(field, scale({}), theme, axis, legend, tooltip, style, shape)(params); + return flow(geometry, scale({}), theme, tooltip, animation)(params); } diff --git a/src/plots/tiny-line/constants.ts b/src/plots/tiny-line/constants.ts index 6c571db747..36efe1a4e2 100644 --- a/src/plots/tiny-line/constants.ts +++ b/src/plots/tiny-line/constants.ts @@ -6,8 +6,9 @@ export const DEFAULT_TOOLTIP_OPTIONS = { itemTpl: '{value}', domStyles: { 'g2-tooltip': { - padding: '2px', + padding: '2px 4px', fontSize: '10px', }, }, + formatter: (x: number, y: number) => y.toFixed(1), }; diff --git a/src/plots/tiny-line/index.ts b/src/plots/tiny-line/index.ts index f8b0127028..61af563812 100644 --- a/src/plots/tiny-line/index.ts +++ b/src/plots/tiny-line/index.ts @@ -2,6 +2,7 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; import { TinyLineOptions } from './types'; import { adaptor } from './adaptor'; +import { DEFAULT_TOOLTIP_OPTIONS } from './constants'; export { TinyLineOptions }; @@ -9,6 +10,14 @@ export class TinyLine extends Plot { /** 图表类型 */ public type: string = 'tiny-line'; + protected getDefaultOptions() { + return { + tooltip: { + ...DEFAULT_TOOLTIP_OPTIONS, + }, + }; + } + /** * 获取 迷你折线图 的适配器 */ diff --git a/src/plots/tiny-line/types.ts b/src/plots/tiny-line/types.ts index fc28598dd4..a78b049396 100644 --- a/src/plots/tiny-line/types.ts +++ b/src/plots/tiny-line/types.ts @@ -3,7 +3,7 @@ import { ShapeStyle } from '../../types/style'; import { TinyTooltipOption } from '../../types/tooltip'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ -export interface TinyLineOptions extends Omit { +export interface TinyLineOptions extends Omit { /** 具体的数据 */ readonly data: number[]; /** 是否平滑 */ @@ -11,7 +11,7 @@ export interface TinyLineOptions extends Omit { /** 是否连接空数据 */ readonly connectNulls?: boolean; /** 折线extra图形样式 */ - readonly lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle); + readonly lineStyle?: ShapeStyle | (() => ShapeStyle); /** tooltip配置 */ readonly tooltip?: boolean | TinyTooltipOption; } diff --git a/src/types/tooltip.ts b/src/types/tooltip.ts index 11511f6668..e647882b1b 100644 --- a/src/types/tooltip.ts +++ b/src/types/tooltip.ts @@ -13,4 +13,6 @@ export type TinyTooltipOption = { readonly offset?: number; /** 是否显示交叉线 */ readonly showCrosshairs?: boolean; + /** 是否显示 tooltip 数据点 marker */ + readonly showMarkers?: boolean; };