From 1a28b3d8182b75a25cccf12a6d2a1f9ff8096f6d Mon Sep 17 00:00:00 2001
From: deletenothing <55045285+deletenothing@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:24:33 +0800
Subject: [PATCH] feat(rangeX and rangeY): add syntactic sugar for data (#5914)
* feat(rangeX and rangeY): add syntactic sugar for data
* docs(rangeX and rangeY): add syntactic sugar content
---
.../snapshots/static/aaplLineRrangeXY.svg | 1041 +++++++++++++++++
__tests__/plots/static/aapl-line-rangeXY.ts | 28 +
__tests__/plots/static/index.ts | 1 +
site/docs/spec/mark/rangeX.zh.md | 14 +
site/docs/spec/mark/rangeY.zh.md | 14 +
src/mark/rangeX.ts | 3 +-
src/mark/rangeY.ts | 3 +-
src/transform/index.ts | 2 +
src/transform/maybeDefaultX.ts | 36 +
src/transform/maybeDefaultY.ts | 36 +
10 files changed, 1176 insertions(+), 2 deletions(-)
create mode 100644 __tests__/integration/snapshots/static/aaplLineRrangeXY.svg
create mode 100644 __tests__/plots/static/aapl-line-rangeXY.ts
create mode 100644 src/transform/maybeDefaultX.ts
create mode 100644 src/transform/maybeDefaultY.ts
diff --git a/__tests__/integration/snapshots/static/aaplLineRrangeXY.svg b/__tests__/integration/snapshots/static/aaplLineRrangeXY.svg
new file mode 100644
index 0000000000..8dc29604b7
--- /dev/null
+++ b/__tests__/integration/snapshots/static/aaplLineRrangeXY.svg
@@ -0,0 +1,1041 @@
+
\ No newline at end of file
diff --git a/__tests__/plots/static/aapl-line-rangeXY.ts b/__tests__/plots/static/aapl-line-rangeXY.ts
new file mode 100644
index 0000000000..d15b8fdb10
--- /dev/null
+++ b/__tests__/plots/static/aapl-line-rangeXY.ts
@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function aaplLineRrangeXY(): G2Spec {
+ return {
+ type: 'view',
+ children: [
+ {
+ type: 'line',
+ data: {
+ type: 'fetch',
+ value: 'data/aapl.csv',
+ },
+ encode: { x: 'date', y: 'close' },
+ },
+ {
+ type: 'rangeX',
+ data: [new Date('2010'), new Date('2011')],
+ },
+ {
+ type: 'rangeY',
+ data: [
+ [350, 400],
+ [500, 600],
+ ],
+ },
+ ],
+ };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index f2fac717e3..2c2a520d59 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -309,3 +309,4 @@ export { mockLineCloseX } from './mock-line-close-x';
export { premierLeagueTable } from './premier-league-table';
export { singlePointBasic } from './single-point-basic';
export { populationFlowChordDefault } from './population-flow-chord-default';
+export { aaplLineRrangeXY } from './aapl-line-rangeXY';
diff --git a/site/docs/spec/mark/rangeX.zh.md b/site/docs/spec/mark/rangeX.zh.md
index e2b5025c6c..c6b5c7b734 100644
--- a/site/docs/spec/mark/rangeX.zh.md
+++ b/site/docs/spec/mark/rangeX.zh.md
@@ -51,6 +51,20 @@ chart
.style('lineWidth', 1.5);
chart.render();
+
+```
+此外，rangeX 还提供了简便写法：
+
+```ts
+chart
+ .rangeX()
+ .data([[new Date('2010'), new Date('2011')]])
+ .encode('x', d => d);
+
+// it can be simplified as follows:
+chart
+ .rangeX()
+ .data([new Date('2010'), new Date('2011')]);
```
更多的案例，可以查看[图表示例](/examples)页面。
diff --git a/site/docs/spec/mark/rangeY.zh.md b/site/docs/spec/mark/rangeY.zh.md
index 47d21c325b..6ead78792c 100644
--- a/site/docs/spec/mark/rangeY.zh.md
+++ b/site/docs/spec/mark/rangeY.zh.md
@@ -35,6 +35,20 @@ chart
chart.render();
```
+此外，rangeY 还提供了简便写法：
+
+```ts
+chart
+ .rangeY()
+ .data([[54, 60], [65, 72]])
+ .encode('y', d => d);
+
+// it can be simplified as follows:
+chart
+ .rangeY()
+ .data([[54, 60], [65, 72]]);
+```
+
更多的案例，可以查看[图表示例](/examples)页面。
## 选项
diff --git a/src/mark/rangeX.ts b/src/mark/rangeX.ts
index 2b62966055..5de518ac33 100644
--- a/src/mark/rangeX.ts
+++ b/src/mark/rangeX.ts
@@ -1,6 +1,7 @@
import { MarkComponent as MC } from '../runtime';
import { RangeXMark } from '../spec';
import { RangeShape } from '../shape';
+import { MaybeDefaultX } from '../transform';
import {
baseAnnotationChannels,
basePostInference,
@@ -27,6 +28,6 @@ RangeX.props = {
...baseAnnotationChannels({ shapes: Object.keys(shape) }),
{ name: 'x', required: true },
],
- preInference: [...basePreInference()],
+ preInference: [...basePreInference(), { type: MaybeDefaultX }],
postInference: [...basePostInference()],
};
diff --git a/src/mark/rangeY.ts b/src/mark/rangeY.ts
index 3cb6bdaff8..9728026108 100644
--- a/src/mark/rangeY.ts
+++ b/src/mark/rangeY.ts
@@ -1,6 +1,7 @@
import { MarkComponent as MC } from '../runtime';
import { RangeYMark } from '../spec';
import { RangeShape } from '../shape';
+import { MaybeDefaultY } from '../transform';
import {
baseAnnotationChannels,
basePostInference,
@@ -27,6 +28,6 @@ RangeY.props = {
...baseAnnotationChannels({ shapes: Object.keys(shape) }),
{ name: 'y', required: true },
],
- preInference: [...basePreInference()],
+ preInference: [...basePreInference(), { type: MaybeDefaultY }],
postInference: [...basePostInference()],
};
diff --git a/src/transform/index.ts b/src/transform/index.ts
index 73f9e30aaf..37a41d247f 100644
--- a/src/transform/index.ts
+++ b/src/transform/index.ts
@@ -11,6 +11,8 @@ export { MaybeTupleY } from './maybeTupleY';
export { MaybeTupleX } from './maybeTupleX';
export { MaybeIdentityY } from './maybeIdentityY';
export { MaybeIdentityX } from './maybeIdentityX';
+export { MaybeDefaultX } from './maybeDefaultX';
+export { MaybeDefaultY } from './maybeDefaultY';
export { MaybeTooltip } from './maybeTooltip';
export { MaybeZeroPadding } from './maybeZeroPadding';
export { MaybeVisualPosition } from './maybeVisualPosition';
diff --git a/src/transform/maybeDefaultX.ts b/src/transform/maybeDefaultX.ts
new file mode 100644
index 0000000000..c7e67e0af2
--- /dev/null
+++ b/src/transform/maybeDefaultX.ts
@@ -0,0 +1,36 @@
+import { deepMix } from '@antv/util';
+import { TransformComponent as TC } from '../runtime';
+import { column, isObject } from './utils/helper';
+
+export type MaybeDefaultXOptions = Record;
+
+/**
+ * Add a default encode for rangeX
+ * when data is just an array
+ */
+export const MaybeDefaultX: TC = () => {
+ return (I, mark) => {
+ const { data } = mark;
+ if (
+ Array.isArray(data) &&
+ (data.every(Array.isArray) || !data.some(isObject))
+ ) {
+ const extractX = (data, index: number) =>
+ Array.isArray(data[0])
+ ? data.map((item) => item[index])
+ : [data[index]];
+ return [
+ I,
+ deepMix({}, mark, {
+ encode: {
+ x: column(extractX(data, 0)),
+ x1: column(extractX(data, 1)),
+ },
+ }),
+ ];
+ }
+ return [I, mark];
+ };
+};
+
+MaybeDefaultX.props = {};
diff --git a/src/transform/maybeDefaultY.ts b/src/transform/maybeDefaultY.ts
new file mode 100644
index 0000000000..6373c7fbc1
--- /dev/null
+++ b/src/transform/maybeDefaultY.ts
@@ -0,0 +1,36 @@
+import { deepMix } from '@antv/util';
+import { Primitive, TransformComponent as TC } from '../runtime';
+import { column, isObject } from './utils/helper';
+
+export type MaybeDefaultYOptions = Record;
+
+/**
+ * Add a default encode for rangeY
+ * when data is just an array
+ */
+export const MaybeDefaultY: TC = () => {
+ return (I, mark) => {
+ const { data } = mark;
+ if (
+ Array.isArray(data) &&
+ (data.every(Array.isArray) || !data.some(isObject))
+ ) {
+ const extractY = (data, index: number) =>
+ Array.isArray(data[0])
+ ? data.map((item) => item[index])
+ : [data[index]];
+ return [
+ I,
+ deepMix({}, mark, {
+ encode: {
+ y: column(extractY(data, 0)),
+ y1: column(extractY(data, 1)),
+ },
+ }),
+ ];
+ }
+ return [I, mark];
+ };
+};
+
+MaybeDefaultY.props = {};