diff --git a/README.md b/README.md index fb9cea3aa9..4ff8d77ec8 100644 --- a/README.md +++ b/README.md @@ -159,6 +159,7 @@ This project follows the [all-contributors](https://github.com/all-contributors/ 钉钉群组号码: 30233731 + ## 🔗 Links diff --git a/README.zh-CN.md b/README.zh-CN.md index 7bdf2d51f7..0ee9d59312 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -169,6 +169,7 @@ bar.render(); 钉钉群组号码: 30233731 + ## 🔗 相关链接 diff --git a/__tests__/bugs/issue-2749-spec.ts b/__tests__/bugs/issue-2749-spec.ts index 2d221f70ba..65c91aced6 100644 --- a/__tests__/bugs/issue-2749-spec.ts +++ b/__tests__/bugs/issue-2749-spec.ts @@ -1,4 +1,4 @@ -import { Line, DualAxes } from '../../src'; +import { Line } from '../../src'; import { createDiv } from '../utils/dom'; describe('#2749', () => { diff --git a/docs/manual/contact.en.md b/docs/manual/contact.en.md index 0f7d882bc3..7558957597 100644 --- a/docs/manual/contact.en.md +++ b/docs/manual/contact.en.md @@ -18,3 +18,4 @@ If you have any questions, suggestions, feedback or willingness to communicate, - DingTalk Group Number: 30233731 + diff --git a/docs/manual/contact.zh.md b/docs/manual/contact.zh.md index 5b18121994..e7d894f0d1 100644 --- a/docs/manual/contact.zh.md +++ b/docs/manual/contact.zh.md @@ -18,3 +18,4 @@ order: 9 - 钉钉群组号码: 30233731 + diff --git a/examples/case/advanced/demo/conversion-analysis-bar.ts b/examples/case/advanced/demo/conversion-analysis-bar.ts new file mode 100644 index 0000000000..34580bb3a6 --- /dev/null +++ b/examples/case/advanced/demo/conversion-analysis-bar.ts @@ -0,0 +1,74 @@ +import { Bar, G2 } from '@antv/g2plot'; + +G2.registerInteraction('conversion-tag-active', { + start: [ + { + isEnable: (context) => { + const element = context.event.data?.element as G2.Element; + const href = element?.data?.href; + if (href) { + return true; + } + return false; + }, + trigger: 'conversion-tag-group:mouseenter', + action: (context) => { + const view = context.view; + // 设置鼠标样式 + view.getCanvas().setCursor('pointer'); + const tagGroup = context.event.gEvent.shape; + if (tagGroup) { + tagGroup.attr('fill', 'rgba(251,151,71,0.85)'); + } + }, + }, + { + trigger: 'conversion-tag-group:mousedown', + action: (context) => { + const element = context.event.data?.element; + const href = element?.data?.href; + window.open(href); + }, + }, + ], + end: [ + { + trigger: 'conversion-tag-group:mouseleave', + action: (context) => { + const view = context.view; + // 设置鼠标样式 + view.getCanvas().setCursor('default'); + const tagGroup = context.event.gEvent.shape; + if (tagGroup) { + tagGroup.attr('fill', '#efefef'); + } + }, + }, + ], +}); + +const plotData = [ + { action: '浏览网站', pv: 50000, href: 'https://github.com/antvis/g2plot' }, + { action: '放入购物车', pv: 35000 }, + { action: '生成订单', pv: 25000, href: 'https://github.com/antvis/g2' }, + { action: '支付订单', pv: 15000 }, + { action: '完成交易', pv: 8500 }, +]; + +const plot = new Bar('container', { + data: plotData, + xField: 'pv', + yField: 'action', + conversionTag: { + offset: 0, + spacing: 8, + arrow: { + style: { + fill: '#efefef', + }, + }, + }, + interactions: [{ type: 'active-region', enable: false }, { type: 'conversion-tag-active' }], +}); + +plot.render(); diff --git a/examples/case/advanced/demo/conversion-analysis.ts b/examples/case/advanced/demo/conversion-analysis.ts new file mode 100644 index 0000000000..2b7b3eb4e3 --- /dev/null +++ b/examples/case/advanced/demo/conversion-analysis.ts @@ -0,0 +1,79 @@ +import { Bar, G2 } from '@antv/g2plot'; + +// TODO 需要介绍下 convetsion-tag 的组成 +G2.registerInteraction('conversion-tag-active', { + start: [ + { + isEnable: (context) => { + const element = context.event.data?.element as G2.Element; + const href = element?.data?.href; + if (href) { + return true; + } + return false; + }, + trigger: 'conversion-tag-group:mouseenter', + action: (context) => { + const view = context.view; + // 设置鼠标样式 + view.getCanvas().setCursor('pointer'); + const tagArrow = context.event.gEvent.shape; + if (tagArrow.get('name') === 'conversion-tag-arrow') { + tagArrow.attr('fill', 'rgba(251,151,71,0.85)'); + } else { + const siblings = tagArrow.get('parent').getChildren(); + const shape = siblings[siblings.findIndex((c) => c.get('origin') === tagArrow.get('origin')) - 1]; + shape?.attr('fill', 'rgba(251,151,71,0.85)'); + } + }, + }, + { + trigger: 'conversion-tag-group:mousedown', + action: (context) => { + const element = context.event.data?.element; + const href = element?.data?.href; + window.open(href); + }, + }, + ], + end: [ + { + trigger: 'conversion-tag-group:mouseleave', + action: (context) => { + const view = context.view; + // 设置鼠标样式 + view.getCanvas().setCursor('default'); + const tagArrow = context.event.gEvent.shape; + if (tagArrow.get('name') === 'conversion-tag-arrow') { + tagArrow.attr('fill', '#efefef'); + } + }, + }, + ], +}); + +const plotData = [ + { action: '浏览网站', pv: 50000, href: 'https://github.com/antvis/g2plot' }, + { action: '放入购物车', pv: 35000 }, + { action: '生成订单', pv: 25000, href: 'https://github.com/antvis/g2' }, + { action: '支付订单', pv: 15000 }, + { action: '完成交易', pv: 8500 }, +]; + +const plot = new Bar('container', { + data: plotData, + xField: 'pv', + yField: 'action', + conversionTag: { + offset: 0, + spacing: 8, + arrow: { + style: { + fill: '#efefef', + }, + }, + }, + interactions: [{ type: 'active-region', enable: false }, { type: 'conversion-tag-active' }], +}); + +plot.render(); diff --git a/examples/case/advanced/demo/meta.json b/examples/case/advanced/demo/meta.json index 78fc95bf21..dd4a24bce3 100644 --- a/examples/case/advanced/demo/meta.json +++ b/examples/case/advanced/demo/meta.json @@ -21,6 +21,24 @@ }, "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tHF3bgalmB/association-filter.gif" + }, + { + "filename": "conversion-analysis-bar.ts", + "title": { + "zh": "带跳转转化分析图", + "en": "Conversion analysis bar" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/p8r96Xc9o0/conversion-analysis-bar.gif" + }, + { + "filename": "conversion-analysis.ts", + "title": { + "zh": "带跳转转化分析图2", + "en": "Conversion analysis bar2" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PojoRGFBN4/conversion-analysis-2.gif" } ] } \ No newline at end of file diff --git a/examples/dynamic-plots/brush/demo/meta.json b/examples/dynamic-plots/brush/demo/meta.json index 1b1fdd017a..bdc47023e1 100644 --- a/examples/dynamic-plots/brush/demo/meta.json +++ b/examples/dynamic-plots/brush/demo/meta.json @@ -10,7 +10,6 @@ "zh": "散点图刷选高亮", "en": "Brush highlight of scatter" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/BlpX0yZrRH/brush-highlight.gif" }, { @@ -19,7 +18,6 @@ "zh": "散点图刷选", "en": "Brush of scatter" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/x6%24CDJpPny/brush-x.gif" }, { @@ -28,7 +26,6 @@ "zh": "柱状图刷选高亮", "en": "Brush highlight of column" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/svUh77%263iZ/column-brush-highlight.gif" }, { @@ -37,7 +34,6 @@ "zh": "柱状图 y 方向刷选", "en": "Brush on y position of column" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Rf1WzUaySB/column-brush-y.gif" }, { @@ -46,7 +42,6 @@ "zh": "柱状图 y 方向刷选高亮", "en": "Brush highlight on y position of column" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cKc4Q6lOXQ/y-brush-column.gif" }, { @@ -55,7 +50,6 @@ "zh": "条形图刷选高亮", "en": "Brush highlight of bar" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/hksereLMdK/bar-brush-highlight.gif" }, { @@ -64,7 +58,6 @@ "zh": "刷选高级用法1", "en": "Advanced usage1 of brush" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/OLOyP6XI0e/brush-advanced-usage1.gif" }, { @@ -73,7 +66,6 @@ "zh": "刷选高级用法2", "en": "Advanced usage2 of brush" }, - "new": true, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2wHu3BD2s%26/brush-advanced-usage.gif" } ]