feat: cherry pick

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);
@@ -516,6 +529,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

@@ -32,3 +32,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();
+ });
+});