From 0bb925d049db2971816eaf7948cbb4a9d27b17b1 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Tue, 23 Jul 2024 22:39:37 +0800 Subject: [PATCH 1/7] feat: export registerSymbol --- src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index dc0329efad..0b50a81c8e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,8 +2,9 @@ import { corelib, plotlib, graphlib, geolib, stdlib } from './lib'; import { extend, Runtime } from './api'; import { API, CompositionAPI } from './api/extend'; import { G2Spec } from './spec'; +import { registerSymbol } from './utils/marker'; -export { corelib, plotlib, graphlib, geolib, stdlib }; +export { corelib, plotlib, graphlib, geolib, stdlib, registerSymbol }; export * from './exports'; From 55ea43b8d595f85f499226e3d080f08f1b0be54f Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 15:42:58 +0800 Subject: [PATCH 2/7] feat(register): custom symbol --- src/api/library.ts | 9 ++++++--- src/index.ts | 3 +-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/api/library.ts b/src/api/library.ts index 1bed1abc28..5d0af0a5f8 100644 --- a/src/api/library.ts +++ b/src/api/library.ts @@ -1,11 +1,14 @@ import { G2ComponentNamespaces, G2Component } from '../runtime'; +import { registerSymbol, type SymbolFactor } from '../utils/marker'; export const library = {}; // @todo Warn if override existing key. export function register( - key: `${G2ComponentNamespaces}.${any}`, - component: G2Component, + key: `${G2ComponentNamespaces | 'symbol'}.${any}`, + component: G2Component | SymbolFactor, ) { - Object.assign(library, { [key]: component }); + if (key.startsWith('symbol.')) + registerSymbol(key.split('.').pop(), component as SymbolFactor); + else Object.assign(library, { [key]: component }); } diff --git a/src/index.ts b/src/index.ts index 0b50a81c8e..dc0329efad 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,9 +2,8 @@ import { corelib, plotlib, graphlib, geolib, stdlib } from './lib'; import { extend, Runtime } from './api'; import { API, CompositionAPI } from './api/extend'; import { G2Spec } from './spec'; -import { registerSymbol } from './utils/marker'; -export { corelib, plotlib, graphlib, geolib, stdlib, registerSymbol }; +export { corelib, plotlib, graphlib, geolib, stdlib }; export * from './exports'; From 6c2ce270b7fa93b6813276190e86c221e1e2551c Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 16:09:51 +0800 Subject: [PATCH 3/7] test: add registerSymbol --- __tests__/plots/api/index.ts | 1 + __tests__/plots/api/register-symbol.ts | 55 ++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 __tests__/plots/api/register-symbol.ts diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 8ff1af5a52..975052d695 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -1,5 +1,6 @@ export { registerDataTransform } from './register-data-transform'; export { registerShape } from './register-shape'; +export { registerSymbol } from './register-symbol'; export { chartChangeSize } from './chart-change-size'; export { chartAutoFit } from './chart-auto-fit'; export { markChangeData } from './mark-change-data'; diff --git a/__tests__/plots/api/register-symbol.ts b/__tests__/plots/api/register-symbol.ts new file mode 100644 index 0000000000..2c78794c69 --- /dev/null +++ b/__tests__/plots/api/register-symbol.ts @@ -0,0 +1,55 @@ +import { register, Chart } from '../../../src'; +import type { SymbolFactor } from '../../../src/utils/marker'; + +export function registerSymbol(context) { + const { container, canvas } = context; + + const triangle: SymbolFactor = (x, y, r) => { + const diffY = r * Math.sin((1 / 3) * Math.PI); + return [ + ['M', x - r, y + diffY], + ['L', x, y - diffY], + ['L', x + r, y + diffY], + ['Z'], + ]; + }; + triangle.style = ['fill']; + + register('symbol.customTriangle', triangle); + + const chart = new Chart({ container, canvas }); + + chart.data([ + { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, + { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, + { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, + { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, + { name: 'London', 月份: 'May', 月均降雨量: 47 }, + { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, + { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, + { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, + { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, + { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, + { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, + { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, + { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, + { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, + { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, + { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, + ]); + + chart + .interval() + .encode('x', '月份') + .encode('y', '月均降雨量') + .encode('color', 'name') + .transform({ type: 'stackY' }) + .legend({ + color: { + itemMarker: 'customTriangle', + }, + }); + + const finished = chart.render(); + return { finished }; +} From 3295e0bcf024af5302f5bbf1370b8188f1961207 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 17:10:42 +0800 Subject: [PATCH 4/7] test: move file --- __tests__/plots/api/index.ts | 1 - __tests__/plots/api/register-symbol.ts | 55 ------------------- __tests__/plots/static/index.ts | 1 + .../static/mock-interval-legend-marker.ts | 51 +++++++++++++++++ src/index.ts | 3 +- 5 files changed, 54 insertions(+), 57 deletions(-) delete mode 100644 __tests__/plots/api/register-symbol.ts create mode 100644 __tests__/plots/static/mock-interval-legend-marker.ts diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 975052d695..8ff1af5a52 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -1,6 +1,5 @@ export { registerDataTransform } from './register-data-transform'; export { registerShape } from './register-shape'; -export { registerSymbol } from './register-symbol'; export { chartChangeSize } from './chart-change-size'; export { chartAutoFit } from './chart-auto-fit'; export { markChangeData } from './mark-change-data'; diff --git a/__tests__/plots/api/register-symbol.ts b/__tests__/plots/api/register-symbol.ts deleted file mode 100644 index 2c78794c69..0000000000 --- a/__tests__/plots/api/register-symbol.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { register, Chart } from '../../../src'; -import type { SymbolFactor } from '../../../src/utils/marker'; - -export function registerSymbol(context) { - const { container, canvas } = context; - - const triangle: SymbolFactor = (x, y, r) => { - const diffY = r * Math.sin((1 / 3) * Math.PI); - return [ - ['M', x - r, y + diffY], - ['L', x, y - diffY], - ['L', x + r, y + diffY], - ['Z'], - ]; - }; - triangle.style = ['fill']; - - register('symbol.customTriangle', triangle); - - const chart = new Chart({ container, canvas }); - - chart.data([ - { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, - { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, - { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, - { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, - { name: 'London', 月份: 'May', 月均降雨量: 47 }, - { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, - { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, - { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, - { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, - { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, - { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, - { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, - { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, - { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, - { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, - { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, - ]); - - chart - .interval() - .encode('x', '月份') - .encode('y', '月均降雨量') - .encode('color', 'name') - .transform({ type: 'stackY' }) - .legend({ - color: { - itemMarker: 'customTriangle', - }, - }); - - const finished = chart.render(); - return { finished }; -} diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index cfd9d2620a..0c179c7152 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -345,3 +345,4 @@ export { mockPieSpiderHide } from './mock-pie-spider-hide'; export { mockPieSpiderExceed } from './mock-pie-spider-exceed'; export { mockFacetPieLegend } from './mock-facet-pie-legend'; export { weatherLineMultiAxesSync } from './weather-line-multi-axes-sync'; +export { mockIntervalLegendMarker } from './mock-interval-legend-marker'; diff --git a/__tests__/plots/static/mock-interval-legend-marker.ts b/__tests__/plots/static/mock-interval-legend-marker.ts new file mode 100644 index 0000000000..a9dfb88614 --- /dev/null +++ b/__tests__/plots/static/mock-interval-legend-marker.ts @@ -0,0 +1,51 @@ +import { G2Spec, register, type SymbolFactor } from '../../../src'; + +export function mockIntervalLegendMarker(): G2Spec { + const triangle = Object.assign>( + (x, y, r) => { + const diffY = r * Math.sin((1 / 3) * Math.PI); + return [ + ['M', x - r, y + diffY], + ['L', x, y - diffY], + ['L', x + r, y + diffY], + ['Z'], + ]; + }, + { style: ['fill'] }, + ); + + register('symbol.customTriangle', triangle); + + return { + type: 'interval', + data: [ + { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, + { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, + { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, + { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, + { name: 'London', 月份: 'May', 月均降雨量: 47 }, + { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, + { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, + { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, + { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, + { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, + { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, + { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, + { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, + { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, + { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, + { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, + ], + encode: { + x: '月份', + y: '月均降雨量', + color: 'name', + }, + transform: [{ type: 'stackY' }], + legend: { + color: { + itemMarker: 'customTriangle', + }, + }, + }; +} diff --git a/src/index.ts b/src/index.ts index dc0329efad..84aa48f721 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,7 @@ import { corelib, plotlib, graphlib, geolib, stdlib } from './lib'; import { extend, Runtime } from './api'; import { API, CompositionAPI } from './api/extend'; import { G2Spec } from './spec'; +import type { SymbolFactor } from './utils/marker'; export { corelib, plotlib, graphlib, geolib, stdlib }; @@ -11,7 +12,7 @@ export * from './exports'; * G2 standard library initial all the libs except 3D and auto. */ const library = { ...stdlib() }; - +export type { SymbolFactor }; export const Chart = extend(Runtime, library); export interface Chart extends API {} export interface CompositionNode extends CompositionAPI {} From 3067e4b21cff1b06124bd9cbe44813d761a15473 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 17:59:25 +0800 Subject: [PATCH 5/7] test: add mockIntervalLegendMarker snapshots --- .../static/mockIntervalLegendMarker.svg | 1311 +++++++++++++++++ 1 file changed, 1311 insertions(+) create mode 100644 __tests__/integration/snapshots/static/mockIntervalLegendMarker.svg diff --git a/__tests__/integration/snapshots/static/mockIntervalLegendMarker.svg b/__tests__/integration/snapshots/static/mockIntervalLegendMarker.svg new file mode 100644 index 0000000000..512649145c --- /dev/null +++ b/__tests__/integration/snapshots/static/mockIntervalLegendMarker.svg @@ -0,0 +1,1311 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + London + + + + + + + + + + + + + + + + + + + + Berlin + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Jan. + + + + + + + Feb. + + + + + + + Mar. + + + + + + + Apr. + + + + + + + May + + + + + + + Jun. + + + + + + + Jul. + + + + + + + Aug. + + + + + + + + + 月份 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 50 + + + + + + + 100 + + + + + + + 150 + + + + + + + + + 月均降雨量 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From e8f3c3524f97ce99a1ccc9ec863fb3a45ed6edc5 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 18:06:26 +0800 Subject: [PATCH 6/7] =?UTF-8?q?docs:=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7=EF=BC=88Symbol=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manual/extra-topics/customization.zh.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/site/docs/manual/extra-topics/customization.zh.md b/site/docs/manual/extra-topics/customization.zh.md index f30f42aea3..999a6a8bc2 100644 --- a/site/docs/manual/extra-topics/customization.zh.md +++ b/site/docs/manual/extra-topics/customization.zh.md @@ -103,6 +103,49 @@ chart.interval().style('shape', 'triangle'); })(); ``` +## 自定义符号（Symbol） + +每一个符号都可以自定义，主要分为三步： + +- 定义符号路径。 +- 注册符号。 +- 使用符号。 + +首先我们来看看如何定义符号路径。一个符号路径是一个函数，该函数接受起始点的横向坐标 x、纵向坐标 y 和绘制半径，返回一个路径。 + +```js +import { type SymbolFactor } from '@antv/g2'; + +const triangle: SymbolFactor = (x, y, r) => { + const diffY = r * Math.sin((1 / 3) * Math.PI); + return [ + ['M', x - r, y + diffY], + ['L', x, y - diffY], + ['L', x + r, y + diffY], + ['Z'], + ]; +}; +triangle.style = ['fill']; +``` + +接下来就是注册符号，通过调用 `G2.register('symbol.${symbol}', Symbol)` 来完成注册。其中 `symbol` 是符号的名字，`Symbol` 是定义好的符号路径。比如注册一个三角形的符号： + +```js +import { register } from '@antv/g2'; + +register('symbol.customTriangle', triangle); +``` + +最后就是使用该符号了 + +```js +legend: { + color: { + itemMarker: 'triangle' + } +} +``` + ## 自定义提示（Tooltip） 有时候内置的 Tooltip 无法满足需求，这时候可以通过 `mark.interaction.tooltip.render` 或者 `view.interaction.tooltip.render` 的 _render_ 函数来渲染自定义的提示。 From c35a06fedf3c383322d1d16a3a0a460974fef634 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Thu, 25 Jul 2024 18:08:18 +0800 Subject: [PATCH 7/7] =?UTF-8?q?docs:=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7=EF=BC=88Symbol=EF=BC=89=EF=BC=8C=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/docs/manual/extra-topics/customization.zh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/manual/extra-topics/customization.zh.md b/site/docs/manual/extra-topics/customization.zh.md index 999a6a8bc2..594fda52da 100644 --- a/site/docs/manual/extra-topics/customization.zh.md +++ b/site/docs/manual/extra-topics/customization.zh.md @@ -141,7 +141,7 @@ register('symbol.customTriangle', triangle); ```js legend: { color: { - itemMarker: 'triangle' + itemMarker: 'customTriangle' } } ```