Skip to content

Commit

Permalink
fix: 淇敼api
Browse files Browse the repository at this point in the history
  • Loading branch information
xuying.xu committed May 29, 2024
1 parent 3254d1f commit 45386bc
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 153 deletions.
80 changes: 3 additions & 77 deletions packages/f2/src/components/pictorial/pictorial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,29 @@ import { jsx } from '@antv/f-engine';
import { GeometryProps } from '../geometry';
import { withInterval } from '../interval';
import { DataRecord } from '../../chart/Data';
import { deepMix } from '@antv/util';

const parsePercent = (value: number | string, total: number) => {
if (typeof value === 'number') {
return value;
} else if (typeof value === 'string') {
if (value.endsWith('%')) {
return (parseFloat(value) / 100) * total;
} else {
return 0;
}
}
};

export interface PictorialProps<TRecord extends DataRecord = DataRecord>
extends GeometryProps<TRecord> {
symbol?: any;
symbolSize?: (number | string)[];
symbolOffset?: (number | string)[];
}

export default class Pictorial extends withInterval({}) {
props: PictorialProps;
// 榛樿鍒濆澶у皬
symbolDefaultSize: number = 400;

defalutBound(type) {
switch (type) {
case 'ellipse':
return {
rx: this.symbolDefaultSize / 2,
ry: this.symbolDefaultSize / 2,
};

default:
return {
width: this.symbolDefaultSize,
height: this.symbolDefaultSize,
};
}
}

preSymbolBound(symbol) {
symbol.props = deepMix(
{
style: this.defalutBound(symbol?.type),
},
symbol.props
);

return {
width: this.symbolDefaultSize,
height: this.symbolDefaultSize,
};
}

parsePercentArray(array, [w, h]) {
const x = parsePercent(array[0], w);
const y = parsePercent(array[1], h);
return [x, y];
}

render() {
const { props, context } = this;
const { px2hd } = context;
const { symbol, symbolSize = ['100%', '100%'], symbolOffset = [0, 0] } = px2hd(props);
const { symbol: Symbol } = px2hd(props);
const records = this.mapping();

const { width: symbolW, height: symbolH } = this.preSymbolBound(symbol);

return (
<group>
{records.map((record) => {
const { key, children } = record;
return (
<group key={key}>
{children.map((item) => {
const [width, height] = this.parsePercentArray(symbolSize, [
item.xMax - item.xMin,
item.yMax - item.yMin,
]);
const [offsetX, offsetY] = this.parsePercentArray(symbolOffset, [width, height]);
const position = [item.xMin + offsetX, item.yMin + offsetY];

const symbolScale = [width / symbolW, height / symbolH];
const transform = `translate(${position[0]},${position[1]}) scale(${symbolScale[0]},${symbolScale[1]})`;

return deepMix(
{
props: {
style: {
transform,
},
},
},
symbol
);
const { xMax, xMin, yMax, yMin } = item;
return <Symbol {...item} width={xMax - xMin} height={yMax - yMin} px2hd={px2hd} />;
})}
</group>
);
Expand Down
142 changes: 66 additions & 76 deletions packages/f2/test/components/pictorial/basic.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,14 @@ import { Canvas, Chart, Pictorial, Axis, Tooltip } from '../../../src';
import { createContext, delay, gestureSimulator } from '../../util';
const context = createContext();

const symbol = (
<image
style={{
src:
'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/mNyB6MXFwnxLMwzfEWHYt/juxingbeifen_6.png',
}}
/>
);

const symbolTop = (
<image
style={{
src:
'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/VV9WVNGexcXLVYpQxjBFH/tuoyuanxingbeifen_13.png',
}}
/>
);

const symbolBottom = (
<image
style={{
src:
'https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/76LdyFixxEmUqrGG6rmCG/tuoyuanxingbeifen_32.png',
}}
/>
);
const data = [
{
x: '浜у搧1',
value: 4927,
bValue: 0,
},
{
x: '浜у搧2',
value: 11607,
bValue: 0,
},
];

Expand All @@ -49,21 +21,43 @@ describe('pictorial', () => {
<Chart data={data}>
<Axis field="value" min={0}></Axis>

<Pictorial
x="x"
y="bValue"
symbol={symbolBottom}
symbolOffset={[0, '-50%']}
symbolSize={['100%', '20px']}
/>

<Pictorial x="x" y="value" symbol={symbol} />
<Pictorial
x="x"
y="value"
symbol={symbolTop}
symbolSize={['100%', '20px']}
symbolOffset={[0, '-50%']}
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>
Expand All @@ -81,45 +75,41 @@ describe('pictorial', () => {
<Canvas context={context} pixelRatio={1}>
<Chart data={data}>
<Axis field="value" min={0}></Axis>

<Pictorial
x="x"
y="bValue"
symbol={
<ellipse
style={{
fill: 'l(90) 0:#1f7eff 1:#64adff',
}}
/>
}
symbolOffset={['50%', 0]}
symbolSize={['100%', '40px']}
/>

<Pictorial
x="x"
y="value"
symbol={
<rect
style={{
fill: 'l(90) 0:#9cc1ff 1:#ecf5ff',
fillOpacity: 0.9,
}}
/>
}
/>
<Pictorial
x="x"
y="value"
symbol={
<ellipse
style={{
fill: 'l(90) 0:#1f7eff 1:#64adff',
}}
/>
}
symbolSize={['100%', '40px']}
symbolOffset={['50%', 0]}
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>
Expand Down

0 comments on commit 45386bc

Please sign in to comment.