From 4809674d9ae2ad2f978fbc6a609970bd01a792a2 Mon Sep 17 00:00:00 2001 From: zhenglingpeng <2472931959@qq.com> Date: Fri, 31 May 2024 10:52:43 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/examples/general/rose/demo/donut-rose.ts | 58 ++++++ site/examples/general/rose/demo/meta.json | 32 ++++ .../general/rose/demo/nightingale-rose.ts | 48 +++++ .../examples/general/rose/demo/polar-stack.ts | 79 ++++++++ site/examples/general/rose/demo/wind-rose.ts | 169 ++++++++++++++++++ 5 files changed, 386 insertions(+) create mode 100644 site/examples/general/rose/demo/donut-rose.ts create mode 100644 site/examples/general/rose/demo/nightingale-rose.ts create mode 100644 site/examples/general/rose/demo/polar-stack.ts create mode 100644 site/examples/general/rose/demo/wind-rose.ts diff --git a/site/examples/general/rose/demo/donut-rose.ts b/site/examples/general/rose/demo/donut-rose.ts new file mode 100644 index 0000000000..ca70f9629d --- /dev/null +++ b/site/examples/general/rose/demo/donut-rose.ts @@ -0,0 +1,58 @@ +import { Chart } from '@antv/g2'; +const data = [ + { year: '2001', population: 41.8 }, + { year: '2002', population: 38 }, + { year: '2003', population: 33.7 }, + { year: '2004', population: 30.7 }, + { year: '2005', population: 25.8 }, + { year: '2006', population: 31.7 }, + { year: '2007', population: 33 }, + { year: '2008', population: 46 }, + { year: '2009', population: 38.3 }, + { year: '2010', population: 28 }, + { year: '2011', population: 42.5 }, + { year: '2012', population: 30.3 }, +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, + width: 720, + height: 720, +}); +chart.coordinate({ type: 'polar', innerRadius: 0.2 }); +chart + .interval() + .data(data) + .encode('x', 'year') + .encode('y', 'population') + .encode('color', 'year') + .scale('x', { padding: 0 }) + + .axis(false) + .tooltip({ + title: (d) => d.year, + items: [ + (d, i, data, column) => ({ + name: d.year, + value: d.population, + channel: 'y', + }), + ], + }) + .legend({ + color: { + position: 'right', + layout: { + justifyContent: 'center', + }, + }, + }) + .state('active', { stroke: 'black', lineWidth: 1, zIndex: 101 }) + .state('inactive', { opacity: 0.5, zIndex: 100 }) + .style({ + lineWidth: 1, + stroke: '#fff', + }); +chart.interaction('elementHighlight', true); +chart.render(); diff --git a/site/examples/general/rose/demo/meta.json b/site/examples/general/rose/demo/meta.json index 06df7c05d0..665b96ab06 100644 --- a/site/examples/general/rose/demo/meta.json +++ b/site/examples/general/rose/demo/meta.json @@ -27,6 +27,38 @@ "en": "Rose Chart, Label" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rS9YT4GTFLgAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "wind-rose.ts", + "title": { + "en": "Wind Rose", + "zh": "Wind Rose" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Trl1TqdieqIAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "nightingale-rose.ts", + "title": { + "zh": "南丁格尔玫瑰图", + "en": "Nightingale Rose" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*jiIFQo6AS_kAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "donut-rose.ts", + "title": { + "zh": "南丁格尔玫瑰环图", + "en": "" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*zzxWR4deKaYAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "polar-stack.ts", + "title": { + "en": "stacked column chart in polar coordinate", + "zh": "极坐标下的层叠柱状图" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*bwKcRJFFUBAAAAAAAAAAAABkARQnAQ" } ] } diff --git a/site/examples/general/rose/demo/nightingale-rose.ts b/site/examples/general/rose/demo/nightingale-rose.ts new file mode 100644 index 0000000000..ad999f5689 --- /dev/null +++ b/site/examples/general/rose/demo/nightingale-rose.ts @@ -0,0 +1,48 @@ +import { Chart } from '@antv/g2'; +const data = [ + { year: '2001', population: 41.8 }, + { year: '2002', population: 38 }, + { year: '2003', population: 33.7 }, + { year: '2004', population: 30.7 }, + { year: '2005', population: 25.8 }, + { year: '2006', population: 31.7 }, + { year: '2007', population: 33 }, + { year: '2008', population: 46 }, + { year: '2009', population: 38.3 }, + { year: '2010', population: 28 }, + { year: '2011', population: 42.5 }, + { year: '2012', population: 30.3 }, +]; +const chart = new Chart({ + container: 'container', + autoFit: true, + height: 720, + width: 720, +}); +chart.coordinate({ type: 'polar' }); +chart + .interval() + .data(data) + .encode('x', 'year') + .encode('y', 'population') + .scale('x', { padding: 0 }) + .style({ + lineWidth: 1, + stroke: '#fff', + }) + .axis(false) + .label({ + text: 'year', + fontSize: 16, + fontWeight: 800, + position: 'inside', + }) + .state('active', { + fill: '#288AFF', + stroke: 'black', + lineWidth: 1, + zIndex: 101, + }) + .state('inactive', { opacity: 0.5, zIndex: 100 }); +chart.interaction('elementHighlight', true); +chart.render(); diff --git a/site/examples/general/rose/demo/polar-stack.ts b/site/examples/general/rose/demo/polar-stack.ts new file mode 100644 index 0000000000..50bc84aff7 --- /dev/null +++ b/site/examples/general/rose/demo/polar-stack.ts @@ -0,0 +1,79 @@ +import { Chart } from '@antv/g2'; + +const data = [ + { year: '2000', '类型 A': 21.0, '类型 B': 16, '类型 C': 8 }, + { year: '2001', '类型 A': 25.0, '类型 B': 16, '类型 C': 8 }, + { year: '2002', '类型 A': 25.0, '类型 B': 15, '类型 C': 8 }, + { year: '2003', '类型 A': 25.0, '类型 B': 14, '类型 C': 7 }, + { year: '2004', '类型 A': 25.0, '类型 B': 14, '类型 C': 7 }, + { year: '2005', '类型 A': 24.0, '类型 B': 13, '类型 C': 8 }, + { year: '2006', '类型 A': 24.0, '类型 B': 14, '类型 C': 7 }, + { year: '2007', '类型 A': 26.0, '类型 B': 16, '类型 C': 7 }, + { year: '2008', '类型 A': 26.0, '类型 B': 15.2, '类型 C': 8 }, + { year: '2009', '类型 A': 27.1, '类型 B': 15.2, '类型 C': 10 }, + { year: '2010', '类型 A': 27.5, '类型 B': 15.4, '类型 C': 8 }, + { year: '2011', '类型 A': 26.4, '类型 B': 15.2, '类型 C': 9 }, + { year: '2012', '类型 A': 28.8, '类型 B': 15.4, '类型 C': 9 }, + { year: '2013', '类型 A': 33.3, '类型 B': 16.7, '类型 C': 12 }, + { year: '2014', '类型 A': 38.2, '类型 B': 19.5, '类型 C': 18 }, +]; +const chart = new Chart({ + container: 'container', + autoFit: true, + width: 720, + height: 720, +}); +chart.coordinate({ type: 'polar', innerRadius: 0.1 }); +chart + .interval() + // .line() + .data({ + value: data, + transform: [ + { + type: 'fold', + fields: ['类型 A', '类型 B', '类型 C'], + key: '难民类型', + value: 'count', + }, + ], + }) + + .encode('x', 'year') + .encode('y', 'count') + .encode('color', '难民类型') + .scale('x', { padding: 0 }) + .style({ + lineWidth: 1, + stroke: '#fff', + }) + .transform([{ type: 'stackY' }]) + .axis('x', { + line: true, + grid: true, + gridLineDash: [0, 0], + gridLineWidth: 1, + }) + .axis('y', { + title: false, + line: true, + gridLineWidth: 1, + }) + .legend({ + color: { + position: 'bottom', + layout: { + justifyContent: 'center', + }, + }, + }) + .state('active', { stroke: 'black', lineWidth: 1, zIndex: 101 }) + .state('inactive', { opacity: 0.5, zIndex: 100 }); +chart.interaction('tooltip', { + body: false, + crosshairsStroke: 'red', + crosshairsStrokeWidth: 4, +}); +chart.interaction('elementHighlight', true); + +chart.render(); diff --git a/site/examples/general/rose/demo/wind-rose.ts b/site/examples/general/rose/demo/wind-rose.ts new file mode 100644 index 0000000000..31a0b8680a --- /dev/null +++ b/site/examples/general/rose/demo/wind-rose.ts @@ -0,0 +1,169 @@ +import { Chart } from '@antv/g2'; + +const data = [ + { direction: 'N', level: '< 0.5 m/s', value: 1.81 }, + { direction: 'N', level: '0.5-2 m/s', value: 1.78 }, + { direction: 'N', level: '2-4 m/s', value: 0.16 }, + { direction: 'N', level: '4-6 m/s', value: 0.0 }, + { direction: 'N', level: '6-8 m/s', value: 0.0 }, + { direction: 'N', level: '8-10 m/s', value: 0.0 }, + { direction: 'N', level: '> 10 m/s', value: 0.0 }, + { direction: 'NNE', level: '< 0.5 m/s', value: 0.62 }, + { direction: 'NNE', level: '0.5-2 m/s', value: 1.09 }, + { direction: 'NNE', level: '2-4 m/s', value: 0.0 }, + { direction: 'NNE', level: '4-6 m/s', value: 0.0 }, + { direction: 'NNE', level: '6-8 m/s', value: 0.0 }, + { direction: 'NNE', level: '8-10 m/s', value: 0.0 }, + { direction: 'NNE', level: '> 10 m/s', value: 0.0 }, + { direction: 'NE', level: '< 0.5 m/s', value: 0.82 }, + { direction: 'NE', level: '0.5-2 m/s', value: 0.82 }, + { direction: 'NE', level: '2-4 m/s', value: 0.07 }, + { direction: 'NE', level: '4-6 m/s', value: 0.0 }, + { direction: 'NE', level: '6-8 m/s', value: 0.0 }, + { direction: 'NE', level: '8-10 m/s', value: 0.0 }, + { direction: 'NE', level: '> 10 m/s', value: 0.0 }, + { direction: 'ENE', level: '< 0.5 m/s', value: 0.59 }, + { direction: 'ENE', level: '0.5-2 m/s', value: 1.22 }, + { direction: 'ENE', level: '2-4 m/s', value: 0.07 }, + { direction: 'ENE', level: '4-6 m/s', value: 0.0 }, + { direction: 'ENE', level: '6-8 m/s', value: 0.0 }, + { direction: 'ENE', level: '8-10 m/s', value: 0.0 }, + { direction: 'ENE', level: '> 10 m/s', value: 0.0 }, + { direction: 'E', level: '< 0.5 m/s', value: 0.62 }, + { direction: 'E', level: '0.5-2 m/s', value: 2.2 }, + { direction: 'E', level: '2-4 m/s', value: 0.49 }, + { direction: 'E', level: '4-6 m/s', value: 0.0 }, + { direction: 'E', level: '6-8 m/s', value: 0.0 }, + { direction: 'E', level: '8-10 m/s', value: 0.0 }, + { direction: 'E', level: '> 10 m/s', value: 0.0 }, + { direction: 'ESE', level: '< 0.5 m/s', value: 1.22 }, + { direction: 'ESE', level: '0.5-2 m/s', value: 2.01 }, + { direction: 'ESE', level: '2-4 m/s', value: 1.55 }, + { direction: 'ESE', level: '4-6 m/s', value: 0.3 }, + { direction: 'ESE', level: '6-8 m/s', value: 0.13 }, + { direction: 'ESE', level: '8-10 m/s', value: 0.0 }, + { direction: 'ESE', level: '> 10 m/s', value: 0.0 }, + { direction: 'SE', level: '< 0.5 m/s', value: 1.61 }, + { direction: 'SE', level: '0.5-2 m/s', value: 3.06 }, + { direction: 'SE', level: '2-4 m/s', value: 2.37 }, + { direction: 'SE', level: '4-6 m/s', value: 2.14 }, + { direction: 'SE', level: '6-8 m/s', value: 1.74 }, + { direction: 'SE', level: '8-10 m/s', value: 0.39 }, + { direction: 'SE', level: '> 10 m/s', value: 0.13 }, + { direction: 'SSE', level: '< 0.5 m/s', value: 2.04 }, + { direction: 'SSE', level: '0.5-2 m/s', value: 3.42 }, + { direction: 'SSE', level: '2-4 m/s', value: 1.97 }, + { direction: 'SSE', level: '4-6 m/s', value: 0.86 }, + { direction: 'SSE', level: '6-8 m/s', value: 0.53 }, + { direction: 'SSE', level: '8-10 m/s', value: 0.49 }, + { direction: 'SSE', level: '> 10 m/s', value: 0.0 }, + { direction: 'S', level: '< 0.5 m/s', value: 2.66 }, + { direction: 'S', level: '0.5-2 m/s', value: 4.74 }, + { direction: 'S', level: '2-4 m/s', value: 0.64 }, + { direction: 'S', level: '4-6 m/s', value: 0.0 }, + { direction: 'S', level: '6-8 m/s', value: 0.0 }, + { direction: 'S', level: '8-10 m/s', value: 0.49 }, + { direction: 'S', level: '> 10 m/s', value: 0.0 }, + { direction: 'SSW', level: '< 0.5 m/s', value: 2.96 }, + { direction: 'SSW', level: '0.5-2 m/s', value: 4.23 }, + { direction: 'SSW', level: '2-4 m/s', value: 0.34 }, + { direction: 'SSW', level: '4-6 m/s', value: 1.03 }, + { direction: 'SSW', level: '6-8 m/s', value: 0.3 }, + { direction: 'SSW', level: '8-10 m/s', value: 0.0 }, + { direction: 'SSW', level: '> 10 m/s', value: 0.0 }, + { direction: 'SW', level: '< 0.5 m/s', value: 2.53 }, + { direction: 'SW', level: '0.5-2 m/s', value: 4.01 }, + { direction: 'SW', level: '2-4 m/s', value: 1.22 }, + { direction: 'SW', level: '4-6 m/s', value: 0.49 }, + { direction: 'SW', level: '6-8 m/s', value: 0.13 }, + { direction: 'SW', level: '8-10 m/s', value: 0.0 }, + { direction: 'SW', level: '> 10 m/s', value: 0.0 }, + { direction: 'WSW', level: '< 0.5 m/s', value: 1.97 }, + { direction: 'WSW', level: '0.5-2 m/s', value: 2.66 }, + { direction: 'WSW', level: '2-4 m/s', value: 1.97 }, + { direction: 'WSW', level: '4-6 m/s', value: 0.79 }, + { direction: 'WSW', level: '6-8 m/s', value: 0.3 }, + { direction: 'WSW', level: '8-10 m/s', value: 0.0 }, + { direction: 'WSW', level: '> 10 m/s', value: 0.0 }, + { direction: 'W', level: '< 0.5 m/s', value: 1.64 }, + { direction: 'W', level: '0.5-2 m/s', value: 1.71 }, + { direction: 'W', level: '2-4 m/s', value: 0.92 }, + { direction: 'W', level: '4-6 m/s', value: 1.45 }, + { direction: 'W', level: '6-8 m/s', value: 0.26 }, + { direction: 'W', level: '8-10 m/s', value: 0.1 }, + { direction: 'W', level: '> 10 m/s', value: 0.0 }, + { direction: 'WNW', level: '< 0.5 m/s', value: 1.32 }, + { direction: 'WNW', level: '0.5-2 m/s', value: 2.4 }, + { direction: 'WNW', level: '2-4 m/s', value: 0.99 }, + { direction: 'WNW', level: '4-6 m/s', value: 1.61 }, + { direction: 'WNW', level: '6-8 m/s', value: 0.33 }, + { direction: 'WNW', level: '8-10 m/s', value: 0.0 }, + { direction: 'WNW', level: '> 10 m/s', value: 0.0 }, + { direction: 'NW', level: '< 0.5 m/s', value: 1.58 }, + { direction: 'NW', level: '0.5-2 m/s', value: 4.28 }, + { direction: 'NW', level: '2-4 m/s', value: 1.28 }, + { direction: 'NW', level: '4-6 m/s', value: 0.76 }, + { direction: 'NW', level: '6-8 m/s', value: 0.66 }, + { direction: 'NW', level: '8-10 m/s', value: 0.69 }, + { direction: 'NW', level: '> 10 m/s', value: 0.03 }, + { direction: 'NNW', level: '< 0.5 m/s', value: 1.51 }, + { direction: 'NNW', level: '0.5-2 m/s', value: 5.0 }, + { direction: 'NNW', level: '2-4 m/s', value: 1.32 }, + { direction: 'NNW', level: '4-6 m/s', value: 0.13 }, + { direction: 'NNW', level: '6-8 m/s', value: 0.23 }, + { direction: 'NNW', level: '8-10 m/s', value: 0.13 }, + { direction: 'NNW', level: '> 10 m/s', value: 0.07 }, +]; + +const colors = [ + '#E3F4BF', + '#BEF7C8', + '#86E6C8', + '#36CFC9', + '#209BDD', + '#1581E6', + '#0860BF', +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, + height: 720, + padding: 50, +}); +chart.coordinate({ type: 'polar' }); + +chart + .interval() + .data(data) + .encode('x', 'direction') + .encode('y', 'value') + .encode('color', 'level') + .encode('size', 18) + .transform([{ type: 'stackY' }]) + .tooltip({ + title: (d) => d.direction, + items: [ + (d, i, data, column) => ({ + name: d.level, + value: d.value, + channel: 'y', + }), + ], + }) + .interaction('tooltip', { + shared: true, + }) + .scale('color', { range: colors }) + .axis('x', { + line: true, + grid: true, + gridLineDash: [0, 0], + gridLineWidth: 1, + }) + .axis('y', { + title: false, + line: true, + gridLineWidth: 1, + }); +chart.render(); From 20594dc4972294ce53140fba7d75506245a8cf67 Mon Sep 17 00:00:00 2001 From: zhenglingpeng <2472931959@qq.com> Date: Fri, 31 May 2024 12:32:04 +0800 Subject: [PATCH 02/10] docs: migrate 4.0 Simple Rose diagram (#5900) --- site/examples/general/rose/demo/donut-rose.ts | 4 ++++ site/examples/general/rose/demo/meta.json | 8 ++++---- site/examples/general/rose/demo/nightingale-rose.ts | 3 +++ site/examples/general/rose/demo/polar-stack.ts | 5 ++++- site/examples/general/rose/demo/wind-rose.ts | 2 ++ 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/site/examples/general/rose/demo/donut-rose.ts b/site/examples/general/rose/demo/donut-rose.ts index ca70f9629d..b6781ff10b 100644 --- a/site/examples/general/rose/demo/donut-rose.ts +++ b/site/examples/general/rose/demo/donut-rose.ts @@ -20,7 +20,9 @@ const chart = new Chart({ width: 720, height: 720, }); + chart.coordinate({ type: 'polar', innerRadius: 0.2 }); + chart .interval() .data(data) @@ -54,5 +56,7 @@ chart lineWidth: 1, stroke: '#fff', }); + chart.interaction('elementHighlight', true); + chart.render(); diff --git a/site/examples/general/rose/demo/meta.json b/site/examples/general/rose/demo/meta.json index 665b96ab06..de621db64a 100644 --- a/site/examples/general/rose/demo/meta.json +++ b/site/examples/general/rose/demo/meta.json @@ -34,7 +34,7 @@ "en": "Wind Rose", "zh": "Wind Rose" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Trl1TqdieqIAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pu1LTrmzMyUAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "nightingale-rose.ts", @@ -42,7 +42,7 @@ "zh": "南丁格尔玫瑰图", "en": "Nightingale Rose" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*jiIFQo6AS_kAAAAAAAAAAABkARQnAQ" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dHw7RYx7V3cAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "donut-rose.ts", @@ -50,7 +50,7 @@ "zh": "南丁格尔玫瑰环图", "en": "" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*zzxWR4deKaYAAAAAAAAAAABkARQnAQ" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FZtzRbGNkRMAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "polar-stack.ts", @@ -58,7 +58,7 @@ "en": "stacked column chart in polar coordinate", "zh": "极坐标下的层叠柱状图" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*bwKcRJFFUBAAAAAAAAAAAABkARQnAQ" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JWPuSIRzU_MAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/site/examples/general/rose/demo/nightingale-rose.ts b/site/examples/general/rose/demo/nightingale-rose.ts index ad999f5689..6d59041908 100644 --- a/site/examples/general/rose/demo/nightingale-rose.ts +++ b/site/examples/general/rose/demo/nightingale-rose.ts @@ -20,6 +20,7 @@ const chart = new Chart({ width: 720, }); chart.coordinate({ type: 'polar' }); + chart .interval() .data(data) @@ -44,5 +45,7 @@ chart zIndex: 101, }) .state('inactive', { opacity: 0.5, zIndex: 100 }); + chart.interaction('elementHighlight', true); + chart.render(); diff --git a/site/examples/general/rose/demo/polar-stack.ts b/site/examples/general/rose/demo/polar-stack.ts index 50bc84aff7..c04ad1ea30 100644 --- a/site/examples/general/rose/demo/polar-stack.ts +++ b/site/examples/general/rose/demo/polar-stack.ts @@ -23,10 +23,11 @@ const chart = new Chart({ width: 720, height: 720, }); + chart.coordinate({ type: 'polar', innerRadius: 0.1 }); + chart .interval() - // .line() .data({ value: data, transform: [ @@ -69,11 +70,13 @@ chart }) .state('active', { stroke: 'black', lineWidth: 1, zIndex: 101 }) .state('inactive', { opacity: 0.5, zIndex: 100 }); + chart.interaction('tooltip', { body: false, crosshairsStroke: 'red', crosshairsStrokeWidth: 4, }); + chart.interaction('elementHighlight', true); chart.render(); diff --git a/site/examples/general/rose/demo/wind-rose.ts b/site/examples/general/rose/demo/wind-rose.ts index 31a0b8680a..ee76d98ec4 100644 --- a/site/examples/general/rose/demo/wind-rose.ts +++ b/site/examples/general/rose/demo/wind-rose.ts @@ -131,6 +131,7 @@ const chart = new Chart({ height: 720, padding: 50, }); + chart.coordinate({ type: 'polar' }); chart @@ -166,4 +167,5 @@ chart line: true, gridLineWidth: 1, }); + chart.render(); From 2565e505d198e7b1a022536574fef8b3f8a2fae5 Mon Sep 17 00:00:00 2001 From: the-lemonboy Date: Wed, 19 Jun 2024 16:46:32 +0800 Subject: [PATCH 03/10] docs: add bar range demo #6276 --- .../annotation/range/demo/bar-range.ts | 62 +++++++++++++++++++ site/examples/annotation/range/demo/meta.json | 8 +++ 2 files changed, 70 insertions(+) create mode 100644 site/examples/annotation/range/demo/bar-range.ts diff --git a/site/examples/annotation/range/demo/bar-range.ts b/site/examples/annotation/range/demo/bar-range.ts new file mode 100644 index 0000000000..e2f810f580 --- /dev/null +++ b/site/examples/annotation/range/demo/bar-range.ts @@ -0,0 +1,62 @@ +/** + * A recreation of this demo: https://vega.github.io/vega-lite/examples/layer_falkensee.html + */ +import { Chart } from '@antv/g2'; + +const data = [ + { city: '北京', 职业: '教师', 平均年收入: 12 }, + { city: '北京', 职业: '医生', 平均年收入: 30 }, + { city: '北京', 职业: '销售', 平均年收入: 18 }, + { city: '北京', 职业: '公务员', 平均年收入: 15 }, + { city: '北京', 职业: '律师', 平均年收入: 40 }, + { city: '北京', 职业: '程序员', 平均年收入: 35 }, + { city: '上海', 职业: '教师', 平均年收入: 13 }, + { city: '上海', 职业: '医生', 平均年收入: 29 }, + { city: '上海', 职业: '销售', 平均年收入: 19 }, + { city: '上海', 职业: '公务员', 平均年收入: 16 }, + { city: '上海', 职业: '律师', 平均年收入: 42 }, + { city: '上海', 职业: '程序员', 平均年收入: 36 }, + { city: '杭州', 职业: '教师', 平均年收入: 11 }, + { city: '杭州', 职业: '医生', 平均年收入: 25 }, + { city: '杭州', 职业: '销售', 平均年收入: 16 }, + { city: '杭州', 职业: '公务员', 平均年收入: 14 }, + { city: '杭州', 职业: '律师', 平均年收入: 35 }, + { city: '杭州', 职业: '程序员', 平均年收入: 28 }, +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, + height: 500, +}); + +chart + .data([ + { y: [0, 25], region: '1' }, + { y: [25, 50], region: '2' }, + ]) + .rangeY() + .encode('y', 'y') + .style('fill', (d) => (d.region === '1' ? '#d8d0c0' : '#a3dda1')) + .style('fillOpacity', 0.4) + .animate('enter', { type: 'fadeIn' }); + +chart + .interval() + .data(data) + .encode('x', '职业') + .encode('y', '平均年收入') + .encode('color', 'city') + .transform({ type: 'dodgeX' }) + .axis('y', { title: '平均年收入', labelFormatter: (d) => d + '万' }) + .tooltip({ + items: [ + (d) => ({ + name: '平均年收入', + value: d.平均年收入 + '万', + channel: 'y', + }), + ], + }); + +chart.render(); diff --git a/site/examples/annotation/range/demo/meta.json b/site/examples/annotation/range/demo/meta.json index 0280cedb34..6af575d3cd 100644 --- a/site/examples/annotation/range/demo/meta.json +++ b/site/examples/annotation/range/demo/meta.json @@ -19,6 +19,14 @@ "en": "Line, Range Annotation" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OCgJSIpz7KMAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "bar-range.ts", + "title": { + "zh": "区间标注的柱状图", + "en": "bar, Range Annotation" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OCgJSIpz7KMAAAAAAAAAAAAADmJ7AQ/original" } ] } From d38ff2ff4b0271116540092e42069881439ecf26 Mon Sep 17 00:00:00 2001 From: the-lemonboy Date: Wed, 19 Jun 2024 17:25:44 +0800 Subject: [PATCH 04/10] docs: add bar-range screenshot --- site/examples/annotation/range/demo/bar-range.ts | 3 --- site/examples/annotation/range/demo/meta.json | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/site/examples/annotation/range/demo/bar-range.ts b/site/examples/annotation/range/demo/bar-range.ts index e2f810f580..adf0f01add 100644 --- a/site/examples/annotation/range/demo/bar-range.ts +++ b/site/examples/annotation/range/demo/bar-range.ts @@ -1,6 +1,3 @@ -/** - * A recreation of this demo: https://vega.github.io/vega-lite/examples/layer_falkensee.html - */ import { Chart } from '@antv/g2'; const data = [ diff --git a/site/examples/annotation/range/demo/meta.json b/site/examples/annotation/range/demo/meta.json index 6af575d3cd..2265ea8331 100644 --- a/site/examples/annotation/range/demo/meta.json +++ b/site/examples/annotation/range/demo/meta.json @@ -26,7 +26,7 @@ "zh": "区间标注的柱状图", "en": "bar, Range Annotation" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OCgJSIpz7KMAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ndr8RaUhEO4AAAAAAAAAAAAADmJ7AQ/original" } ] } From febc1e98bc672763b62460e35402250455a6c743 Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Mon, 1 Jul 2024 15:48:03 +0800 Subject: [PATCH 05/10] fix: the liquid demo value of docs is NaN #6145 --- site/docs/spec/mark/liquid.zh.md | 2 +- .../general/Liquid/demo/liquid-background.ts | 9 +++------ site/examples/general/Liquid/demo/liquid-content.ts | 2 +- .../general/Liquid/demo/liquid-custom-shape.ts | 2 +- site/examples/general/Liquid/demo/liquid-default.ts | 13 +++++-------- site/examples/general/Liquid/demo/liquid-pin.ts | 2 +- 6 files changed, 12 insertions(+), 18 deletions(-) diff --git a/site/docs/spec/mark/liquid.zh.md b/site/docs/spec/mark/liquid.zh.md index 7bb3e4d32a..5b84174de3 100644 --- a/site/docs/spec/mark/liquid.zh.md +++ b/site/docs/spec/mark/liquid.zh.md @@ -20,7 +20,7 @@ const chart = new Chart({ chart .liquid() - .data(.3) + .data({value:.3}) .style({ outlineBorder: 4, outlineDistance: 8, diff --git a/site/examples/general/Liquid/demo/liquid-background.ts b/site/examples/general/Liquid/demo/liquid-background.ts index f92dd1652a..13c239fada 100644 --- a/site/examples/general/Liquid/demo/liquid-background.ts +++ b/site/examples/general/Liquid/demo/liquid-background.ts @@ -5,11 +5,8 @@ const chart = new Chart({ autoFit: true, }); -chart - .liquid() - .data(0.3) - .style({ - backgroundFill: 'pink', - }); +chart.liquid().data({ value: 0.3 }).style({ + backgroundFill: 'pink', +}); chart.render(); diff --git a/site/examples/general/Liquid/demo/liquid-content.ts b/site/examples/general/Liquid/demo/liquid-content.ts index e7f9051395..74ffa9f5bf 100644 --- a/site/examples/general/Liquid/demo/liquid-content.ts +++ b/site/examples/general/Liquid/demo/liquid-content.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data(0.581).style({ +chart.liquid().data({ value: 0.581 }).style({ contentFill: '#000', contentText: 'center text', contentStroke: '#fff', diff --git a/site/examples/general/Liquid/demo/liquid-custom-shape.ts b/site/examples/general/Liquid/demo/liquid-custom-shape.ts index 4b45d05900..df74ca9c17 100644 --- a/site/examples/general/Liquid/demo/liquid-custom-shape.ts +++ b/site/examples/general/Liquid/demo/liquid-custom-shape.ts @@ -7,7 +7,7 @@ const chart = new Chart({ chart .liquid() - .data(0.3) + .data({ value: 0.3 }) .style({ shape: (x, y, r) => { const path = []; diff --git a/site/examples/general/Liquid/demo/liquid-default.ts b/site/examples/general/Liquid/demo/liquid-default.ts index cbd34c8d4d..3c946e1380 100644 --- a/site/examples/general/Liquid/demo/liquid-default.ts +++ b/site/examples/general/Liquid/demo/liquid-default.ts @@ -5,13 +5,10 @@ const chart = new Chart({ autoFit: true, }); -chart - .liquid() - .data(0.3) - .style({ - outlineBorder: 4, - outlineDistance: 8, - waveLength: 128, - }); +chart.liquid().data({ value: 0.3 }).style({ + outlineBorder: 4, + outlineDistance: 8, + waveLength: 128, +}); chart.render(); diff --git a/site/examples/general/Liquid/demo/liquid-pin.ts b/site/examples/general/Liquid/demo/liquid-pin.ts index b9b3e4b9cb..06b6b22559 100644 --- a/site/examples/general/Liquid/demo/liquid-pin.ts +++ b/site/examples/general/Liquid/demo/liquid-pin.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data(0.581).style({ +chart.liquid().data({ value: 0.581 }).style({ shape: 'pin', // Build-in shapes: rect, circle, pin, diamond, triangle. contentFill: '#fff', outlineBorder: 4, From 08c941b127381d131e6cc9e2bb9ab74211a8f7a3 Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Mon, 22 Jul 2024 19:20:52 +0800 Subject: [PATCH 06/10] fix: liquid data is not in object form #6145 --- site/docs/spec/mark/liquid.zh.md | 2 +- site/examples/general/Liquid/demo/liquid-background.ts | 2 +- site/examples/general/Liquid/demo/liquid-content.ts | 2 +- site/examples/general/Liquid/demo/liquid-custom-shape.ts | 2 +- site/examples/general/Liquid/demo/liquid-default.ts | 2 +- site/examples/general/Liquid/demo/liquid-pin.ts | 2 +- src/composition/utils.ts | 5 +++-- 7 files changed, 9 insertions(+), 8 deletions(-) diff --git a/site/docs/spec/mark/liquid.zh.md b/site/docs/spec/mark/liquid.zh.md index 5b84174de3..ed1e016226 100644 --- a/site/docs/spec/mark/liquid.zh.md +++ b/site/docs/spec/mark/liquid.zh.md @@ -20,7 +20,7 @@ const chart = new Chart({ chart .liquid() - .data({value:.3}) + .data(0.3) .style({ outlineBorder: 4, outlineDistance: 8, diff --git a/site/examples/general/Liquid/demo/liquid-background.ts b/site/examples/general/Liquid/demo/liquid-background.ts index 13c239fada..1e7d628e76 100644 --- a/site/examples/general/Liquid/demo/liquid-background.ts +++ b/site/examples/general/Liquid/demo/liquid-background.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data({ value: 0.3 }).style({ +chart.liquid().data(0.3).style({ backgroundFill: 'pink', }); diff --git a/site/examples/general/Liquid/demo/liquid-content.ts b/site/examples/general/Liquid/demo/liquid-content.ts index 74ffa9f5bf..e7f9051395 100644 --- a/site/examples/general/Liquid/demo/liquid-content.ts +++ b/site/examples/general/Liquid/demo/liquid-content.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data({ value: 0.581 }).style({ +chart.liquid().data(0.581).style({ contentFill: '#000', contentText: 'center text', contentStroke: '#fff', diff --git a/site/examples/general/Liquid/demo/liquid-custom-shape.ts b/site/examples/general/Liquid/demo/liquid-custom-shape.ts index df74ca9c17..4b45d05900 100644 --- a/site/examples/general/Liquid/demo/liquid-custom-shape.ts +++ b/site/examples/general/Liquid/demo/liquid-custom-shape.ts @@ -7,7 +7,7 @@ const chart = new Chart({ chart .liquid() - .data({ value: 0.3 }) + .data(0.3) .style({ shape: (x, y, r) => { const path = []; diff --git a/site/examples/general/Liquid/demo/liquid-default.ts b/site/examples/general/Liquid/demo/liquid-default.ts index 3c946e1380..1fb475480d 100644 --- a/site/examples/general/Liquid/demo/liquid-default.ts +++ b/site/examples/general/Liquid/demo/liquid-default.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data({ value: 0.3 }).style({ +chart.liquid().data(0.3).style({ outlineBorder: 4, outlineDistance: 8, waveLength: 128, diff --git a/site/examples/general/Liquid/demo/liquid-pin.ts b/site/examples/general/Liquid/demo/liquid-pin.ts index 06b6b22559..b9b3e4b9cb 100644 --- a/site/examples/general/Liquid/demo/liquid-pin.ts +++ b/site/examples/general/Liquid/demo/liquid-pin.ts @@ -5,7 +5,7 @@ const chart = new Chart({ autoFit: true, }); -chart.liquid().data({ value: 0.581 }).style({ +chart.liquid().data(0.581).style({ shape: 'pin', // Build-in shapes: rect, circle, pin, diamond, triangle. contentFill: '#fff', outlineBorder: 4, diff --git a/src/composition/utils.ts b/src/composition/utils.ts index f3edf48f10..6b7f6d35bb 100644 --- a/src/composition/utils.ts +++ b/src/composition/utils.ts @@ -1,4 +1,4 @@ -import { deepMix } from '@antv/util'; +import { deepMix, isNumber } from '@antv/util'; type Adapter = (options: T, ...rest: any[]) => T; @@ -17,11 +17,12 @@ export function useOverrideAdaptor(adaptor: Adapter): Adapter { } export function mergeData( - dataDescriptor: any[] | { value: any; [key: string]: any }, + dataDescriptor: any[] | { value: any; [key: string]: any } | number, dataValue: any[], ) { if (!dataDescriptor) return dataValue; if (Array.isArray(dataDescriptor)) return dataDescriptor; + if (isNumber(dataDescriptor)) return dataDescriptor; const { value = dataValue, ...rest } = dataDescriptor; return { ...rest, value }; } From 33c9f131474276bd80c2f20af9d909feba65c590 Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Tue, 23 Jul 2024 10:31:41 +0800 Subject: [PATCH 07/10] fix: liquid data is not in object form antvis #6145 --- src/composition/utils.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/composition/utils.ts b/src/composition/utils.ts index 6b7f6d35bb..d74b53ea93 100644 --- a/src/composition/utils.ts +++ b/src/composition/utils.ts @@ -1,4 +1,4 @@ -import { deepMix, isNumber } from '@antv/util'; +import { deepMix } from '@antv/util'; type Adapter = (options: T, ...rest: any[]) => T; @@ -16,13 +16,19 @@ export function useOverrideAdaptor(adaptor: Adapter): Adapter { return (options?, ...rest) => deepMix({}, options, adaptor(options, ...rest)); } +export function isObject(d) { + if (d instanceof Date) return false; + return typeof d === 'object'; +} export function mergeData( - dataDescriptor: any[] | { value: any; [key: string]: any } | number, + dataDescriptor: any[] | { value: any; [key: string]: any }, dataValue: any[], ) { if (!dataDescriptor) return dataValue; if (Array.isArray(dataDescriptor)) return dataDescriptor; - if (isNumber(dataDescriptor)) return dataDescriptor; - const { value = dataValue, ...rest } = dataDescriptor; - return { ...rest, value }; + if (isObject(dataDescriptor)) { + const { value, ...rest } = dataDescriptor; + return { ...rest, value: dataValue }; + } + return dataDescriptor; } From 5fc01a61a9492c11f33491f2bf3d33588a688a20 Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Tue, 23 Jul 2024 10:41:26 +0800 Subject: [PATCH 08/10] test: liquid number #6145 --- __tests__/plots/static/index.ts | 1 + __tests__/plots/static/liquid-number.ts | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 __tests__/plots/static/liquid-number.ts diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 7f3fce3719..cfd9d2620a 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -301,6 +301,7 @@ export { liquidDiamond } from './liquid-diamond'; export { liquidContent } from './liquid-content'; export { liquidTriangle } from './liquid-triangle'; export { liquidCustomShape } from './liquid-custom-shape'; +export { liquidNumber } from './liquid-number'; export { alphabetIntervalAxisOptions } from './alphabet-interval-axis-options'; export { profitIntervalAxisTransform } from './profit-interval-axis-transform'; export { intervalPointBullet } from './interval-point-bullet'; diff --git a/__tests__/plots/static/liquid-number.ts b/__tests__/plots/static/liquid-number.ts new file mode 100644 index 0000000000..9509ac981b --- /dev/null +++ b/__tests__/plots/static/liquid-number.ts @@ -0,0 +1,11 @@ +import { G2Spec } from '../../../src'; + +export function liquidNumber(): G2Spec { + return { + type: 'view', + data: 0.3, + children: [{ type: 'liquid' }], + }; +} + +liquidNumber.skip = true; From cf6d161fe3760ce2795fcba45d8e460dba1f1efb Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Tue, 23 Jul 2024 11:04:49 +0800 Subject: [PATCH 09/10] fix: liquid data is not in object form #6145 --- src/composition/utils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/composition/utils.ts b/src/composition/utils.ts index d74b53ea93..7a865e9708 100644 --- a/src/composition/utils.ts +++ b/src/composition/utils.ts @@ -20,6 +20,7 @@ export function isObject(d) { if (d instanceof Date) return false; return typeof d === 'object'; } + export function mergeData( dataDescriptor: any[] | { value: any; [key: string]: any }, dataValue: any[], @@ -28,7 +29,7 @@ export function mergeData( if (Array.isArray(dataDescriptor)) return dataDescriptor; if (isObject(dataDescriptor)) { const { value, ...rest } = dataDescriptor; - return { ...rest, value: dataValue }; + return { ...rest, value }; } return dataDescriptor; } From 7b6a4b6e5ef23207782d261bcfaf6310dcf6f1da Mon Sep 17 00:00:00 2001 From: zhenglingpeng Date: Tue, 23 Jul 2024 12:02:06 +0800 Subject: [PATCH 10/10] fix: liquid data is not in object form #6145 --- src/composition/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/composition/utils.ts b/src/composition/utils.ts index 7a865e9708..83aaae7a71 100644 --- a/src/composition/utils.ts +++ b/src/composition/utils.ts @@ -28,7 +28,7 @@ export function mergeData( if (!dataDescriptor) return dataValue; if (Array.isArray(dataDescriptor)) return dataDescriptor; if (isObject(dataDescriptor)) { - const { value, ...rest } = dataDescriptor; + const { value = dataValue, ...rest } = dataDescriptor; return { ...rest, value }; } return dataDescriptor;