V5.0.x

packages/f2/src/components/geometry/index.tsx

@@ -13,7 +13,7 @@ import { ChartChildProps } from '../../chart';
 import Selection, { SelectionProps, SelectionState } from './selection';
 import { Adjust, Dodge, Jitter, Stack, Symmetric } from '../../deps/f2-adjust/src';
 import { toTimeStamp } from '../../util/index';
-import AttrController from '../../controller/attr';
+import AttrController, { ATTRS } from '../../controller/attr';
 import { Scale } from '../../deps/f2-scale/src';
 import { AnimationProps, isEqual } from '@antv/f-engine';
 import { AdjustType, AdjustProps } from './Adjust';
@@ -116,26 +116,39 @@ class Geometry<
     super(props, context);
     mix(this, this.getDefaultCfg());
 
-    const { chart, coord } = props;
+    const { chart } = props;
 
     const attrsRange = this._getThemeAttrsRange();
     this.attrController = new AttrController(chart.scale, attrsRange);
-    const { attrController, justifyContent } = this;
+    const { attrController } = this;
 
-    const attrOptions = attrController.getAttrOptions(props, !coord.isCyclic() || justifyContent);
+    const attrOptions = this.getAttrOptions(props);
     attrController.create(attrOptions);
   }
 
+  getAttrOptions(props) {
+    const { coord } = props;
+    const { attrController, justifyContent } = this;
+    const justifyContentCenter = !coord.isCyclic() || justifyContent;
+
+    const args = {};
+    ATTRS.forEach((d) => (args[d] = props[d]));
+
+    const attrOptions = attrController.getAttrOptions(
+      this.context.px2hd(args),
+      justifyContentCenter
+    );
+    return attrOptions;
+  }
+
   willReceiveProps(nextProps) {
-    const { props: lastProps, attrController, justifyContent } = this;
-    const { data: nextData, adjust: nextAdjust, coord, selection } = nextProps;
+    const { props: lastProps, attrController } = this;
+    const { data: nextData, adjust: nextAdjust, selection } = nextProps;
     const { data: lastData, adjust: lastAdjust, selection: lastSelection } = lastProps;
 
-    const justifyContentCenter = !coord.isCyclic() || justifyContent;
-    const lastAttrOptions = attrController.getAttrOptions(lastProps, justifyContentCenter);
-
+    const lastAttrOptions = this.getAttrOptions(lastProps);
     attrController.attrsRange = this._getThemeAttrsRange();
-    const nextAttrOptions = attrController.getAttrOptions(nextProps, justifyContentCenter);
+    const nextAttrOptions = this.getAttrOptions(nextProps);
 
     if (!isEqual(nextAttrOptions, lastAttrOptions)) {
       attrController.update(nextAttrOptions);
@@ -473,6 +486,7 @@ class Geometry<
     const defaultAttrValues = attrController.getDefaultAttrValues();
 
     const mappedRecords = [];
+
     for (let i = 0, len = records.length; i < len; i++) {
       const record = records[i];
       const { children } = record;

packages/f2/src/components/index.ts

@@ -31,3 +31,4 @@ export {
   withCandlestick,
   CandlestickView,
 } from './candlestick';
+export { default as Pictorial, PictorialProps } from './pictorial';

packages/f2/src/components/interval/withInterval.tsx

@@ -75,7 +75,6 @@ export default (Views) => {
 
     mapping() {
       const records = super.mapping();
-
       const { props } = this;
       const { coord, sizeZoom } = props;
       const y0 = this.getY0Value();

packages/f2/src/components/pictorial/index.tsx

@@ -0,0 +1,4 @@
+import Pictorial, { PictorialProps } from './pictorial';
+
+export { PictorialProps, Pictorial };
+export default Pictorial;

packages/f2/src/components/pictorial/pictorial.tsx

@@ -0,0 +1,35 @@
+import { jsx } from '@antv/f-engine';
+import { GeometryProps } from '../geometry';
+import { withInterval } from '../interval';
+import { DataRecord } from '../../chart/Data';
+export interface PictorialProps<TRecord extends DataRecord = DataRecord>
+  extends GeometryProps<TRecord> {
+  symbol?: any;
+}
+
+export default class Pictorial extends withInterval({}) {
+  props: PictorialProps;
+
+  render() {
+    const { props, context } = this;
+    const { px2hd } = context;
+    const { symbol: Symbol } = px2hd(props);
+    const records = this.mapping();
+
+    return (
+      <group>
+        {records.map((record) => {
+          const { key, children } = record;
+          return (
+            <group key={key}>
+              {children.map((item) => {
+                const { xMax, xMin, yMax, yMin } = item;
+                return <Symbol {...item} width={xMax - xMin} height={yMax - yMin} px2hd={px2hd} />;
+              })}
+            </group>
+          );
+        })}
+      </group>
+    );
+  }
+}

packages/f2/src/controller/attr.ts

@@ -18,7 +18,7 @@ type AttrsRange = {
 
 const { Identity, Linear, Category } = Attrs;
 // 需要映射的属性名
-const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
+export const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
 // 分组处理的属性
 const GROUP_ATTRS = ['color', 'size', 'shape'];
 
@@ -86,6 +86,7 @@ class AttrController {
     }
     const options = {};
     const ranges = this.attrsRange;
+
     ATTRS.forEach((attrName: Attr) => {
       if (!props[attrName]) return;
       const option = this.parseOption(props[attrName], attrName);

packages/f2/test/components/geometry/attr.test.tsx

@@ -456,6 +456,27 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(16);
   });
 
+  it('size 支持 px', async () => {
+    const ref = {};
+    const context = createContext('size 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Interval x="year" y="sales" size={'10px'}></Interval>
+          <Line x="year" y="sales" size={'5px'} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {field}  用size大小来做分类', async () => {
     const context = createContext('size = {field}  用size大小来做分类', { width: '380px' });
     const geometryRef = { current: null };
@@ -477,6 +498,33 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(3);
   });
 
+  it('size = {{ field, range }} 支持px', async () => {
+    const ref = {};
+    const context = createContext('size = {{ field, range }} 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Point
+            x="year"
+            y="sales"
+            size={{
+              field: 'sales',
+              range: ['5px', '30px'],
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {{ field, range }} 用size大小来做分类', async () => {
     const context = createContext('size = {{ field, range }} 用size大小来做分类', {
       width: '380px',

packages/f2/test/components/pictorial/basic.test.tsx

@@ -0,0 +1,124 @@
+import { jsx } from '../../../src';
+import { Canvas, Chart, Pictorial, Axis, Tooltip } from '../../../src';
+import { createContext, delay, gestureSimulator } from '../../util';
+const context = createContext();
+
+const data = [
+  {
+    x: '产品1',
+    value: 4927,
+  },
+  {
+    x: '产品2',
+    value: 11607,
+  },
+];
+
+describe('pictorial', () => {
+  it('image symbol', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="value" min={0}></Axis>
+
+          <Pictorial
+            x="x"
+            y="value"
+            symbol={({ xMin, xMax, yMin, yMax, px2hd }) => (
+              <group>
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMax - px2hd('20px') / 2,
+                    width: xMax - xMin,
+                    height: '20px',
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/76LdyFixxEmUqrGG6rmCG/tuoyuanxingbeifen_32.png',
+                  }}
+                />
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMin,
+                    width: xMax - xMin,
+                    height: yMax - yMin,
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/mNyB6MXFwnxLMwzfEWHYt/juxingbeifen_6.png',
+                  }}
+                />
+                <image
+                  style={{
+                    x: xMin,
+                    y: yMin - px2hd('20px') / 2,
+                    width: xMax - xMin,
+                    height: '20px',
+                    src:
+                      'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/VV9WVNGexcXLVYpQxjBFH/tuoyuanxingbeifen_13.png',
+                  }}
+                />
+              </group>
+            )}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('ellipse symbol', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="value" min={0}></Axis>
+          <Pictorial
+            x="x"
+            y="value"
+            symbol={({ xMin, xMax, yMin, yMax, width, height, origin }) => (
+              <group>
+                <ellipse
+                  style={{
+                    cx: xMin + width / 2,
+                    cy: yMax,
+                    rx: width / 2,
+                    ry: '20px',
+                    fill: 'l(90) 0:#1f7eff 1:#64adff',
+                  }}
+                />
+                <rect
+                  style={{
+                    x: xMin,
+                    y: yMin,
+                    width,
+                    height,
+                    fill: 'l(90) 0:#9cc1ff 1:#ecf5ff',
+                    fillOpacity: 0.9,
+                  }}
+                />
+                <ellipse
+                  style={{
+                    cx: xMin + width / 2,
+                    cy: yMin,
+                    rx: width / 2,
+                    ry: '20px',
+                    fill: 'l(90) 0:#1f7eff 1:#64adff',
+                  }}
+                />
+              </group>
+            )}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+});

site/.dumirc.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     defaultLanguage: 'zh',
     isAntVSite: false,
     githubUrl: repository.url, // GitHub 地址
+    footerTheme: 'light', // 白色 底部主题
     showSearch: true, // 是否显示搜索框
     showGithubCorner: true, // 是否显示头部的 GitHub icon
     showGithubStars: true, // 是否显示 GitHub star 数量
@@ -124,30 +125,40 @@ export default defineConfig({
       },
     ],
     detail: {
+      engine: {
+        zh: 'F2',
+        en: 'F2',
+      },
       title: {
-        zh: 'F2 移动端可视化引擎',
-        en: 'F2: Mobile visualization engine',
+        zh: 'F2·移动端可视化引擎',
+        en: 'F2·Mobile visualization engine',
       },
       description: {
         zh: 'F2 是一个专注于移动端，面向常规统计图表，开箱即用的可视化引擎，完美支持 H5 环境同时兼容多种环境（Node, 小程序），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。',
         en: 'F2 is an out-of-the-box visualization engine focused on the mobile terminal, oriented to conventional statistical charts, perfectly supporting the H5 environment and compatible with multiple environments (Node, applet), complete graphics grammar theory, to meet your various visualization needs , professional mobile design guidelines to bring you the best mobile graphics experience',
       },
       image:
-        'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/870e2e92-6187-4729-889c-232a7df0998a.png',
+        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wi05Q7Za5ZIAAAAAAAAAAAAADmJ7AQ/original',
+      imageStyle: {
+        marginLeft: '80px',
+        marginTop: '30px',
+        transform: 'scale(1.4)',
+      },
       buttons: [
         {
           text: {
-            zh: '图表示例',
-            en: 'Examples',
+            zh: '开始使用',
+            en: 'Getting Started',
           },
-          link: `/examples`,
+          link: `/tutorial/getting-started`,
+
         },
         {
           text: {
-            zh: '开始使用',
-            en: 'Getting Started',
+            zh: '图表示例',
+            en: 'Examples',
           },
-          link: `/tutorial/getting-started`,
+          link: `/examples`,
           type: 'primary',
         },
       ],

site/package.json

@@ -20,7 +20,7 @@
     "site:start": "npm run site:develop"
   },
   "dependencies": {
-    "@antv/dumi-theme-antv": "^0.3.5",
+    "@antv/dumi-theme-antv": "^0.4.3",
     "@antv/f-react": "~0.0.7",
     "@antv/f-test-utils": "1.0.3",
     "@antv/f2": "^5.0.4",