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

__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],
+        ],
+      },
+    ],
+  };
+}

__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';

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)页面。

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)页面。
 
 ## 选项

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()],
 };

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()],
 };

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';

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<string, never>;
+
+/**
+ * Add a default encode for rangeX
+ * when data is just an array
+ */
+export const MaybeDefaultX: TC<MaybeDefaultXOptions> = () => {
+  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 = {};

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<string, never>;
+
+/**
+ * Add a default encode for rangeY
+ * when data is just an array
+ */
+export const MaybeDefaultY: TC<MaybeDefaultYOptions> = () => {
+  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 = {};