Skip to content

GitLab

P
pro-blocks
Commit 061a1e7d authored by 陈帅's avatar 陈帅
Browse files
Options

type: beter type

parent 278a1ce9
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 97 deletions
Analysis/src/components/Charts/Pie/index.tsx
View file @ 061a1e7d
......@@ -34,14 +34,10 @@ export interface IPieProps {
valueFormat?: (value: string) => string | React.ReactNode;
subTitle?: React.ReactNode;
}
/* eslint react/no-danger:0 */
interface IPieState {
legendData: Array<{ checked: boolean; x: string; color: string; percent: number; y: string }>;
legendBlock: boolean;
}
class Pie extends Component<IPieProps, IPieState> {
state: IPieState = {
legendData: [],
......@@ -74,7 +70,9 @@ class Pie extends Component<IPieProps, IPieState> {
window.cancelAnimationFrame(this.requestRef);
}
window.removeEventListener('resize', this.resize);
(this.resize as any).cancel();
if (this.resize) {
(this.resize as any).cancel();
}
}
getG2Instance = (chart: G2.Chart) => {
......@@ -85,8 +83,6 @@ class Pie extends Component<IPieProps, IPieState> {
});
};
root!: HTMLDivElement;
chart: G2.Chart | undefined;
// for custom lengend view
getLegendData = () => {
if (!this.chart) return;
......@@ -94,7 +90,7 @@ class Pie extends Component<IPieProps, IPieState> {
if (!geom) return;
const items = geom.get('dataArray') || []; // 获取图形对应的
const legendData = items.map((item: Array<any>) => {
const legendData = items.map((item: { color: any; _origin: any }[]) => {
/* eslint no-underscore-dangle:0 */
const origin = item[0]._origin;
origin.color = item[0].color;
......@@ -106,7 +102,6 @@ class Pie extends Component<IPieProps, IPieState> {
legendData,
});
};
handleRoot = (n: HTMLDivElement) => {
this.root = n;
};
......@@ -128,6 +123,8 @@ class Pie extends Component<IPieProps, IPieState> {
legendData,
});
};
root!: HTMLDivElement;
chart: G2.Chart | undefined;
// for window resize auto responsive legend
@Bind()
......@@ -139,7 +136,11 @@ class Pie extends Component<IPieProps, IPieState> {
window.removeEventListener('resize', this.resize);
return;
}
if ((this.root!.parentNode! as HTMLDivElement).clientWidth <= 380) {
if (
this.root &&
this.root.parentNode &&
(this.root.parentNode as HTMLElement).clientWidth <= 380
) {
if (!legendBlock) {
this.setState({
legendBlock: true,
......@@ -160,11 +161,13 @@ class Pie extends Component<IPieProps, IPieState> {
hasLegend = false,
className,
style,
height = 1,
height = 0,
forceFit = true,
percent,
color,
inner = 0.75,
animate = true,
colors,
lineWidth = 1,
} = this.props;
......@@ -183,9 +186,12 @@ class Pie extends Component<IPieProps, IPieState> {
let data = propsData || [];
let selected = propsSelected;
let tooltip = propsTooltip;
const defaultColors = colors;
data = data || [];
selected = selected || true;
tooltip = tooltip || true;
let formatColor;
const scale = {
x: {
......@@ -200,6 +206,12 @@ class Pie extends Component<IPieProps, IPieState> {
if (percent || percent === 0) {
selected = false;
tooltip = false;
formatColor = (value: string) => {
if (value === '占比') {
return color || 'rgba(24, 144, 255, 0.85)';
}
return '#F0F2F5';
};
data = [
{
......@@ -221,7 +233,7 @@ class Pie extends Component<IPieProps, IPieState> {
}),
];
const padding: [number, number, number, number] = [12, 0, 12, 0];
const padding = [12, 0, 12, 0] as [number, number, number, number];
const dv = new DataView();
dv.source(data).transform({
......@@ -248,9 +260,10 @@ class Pie extends Component<IPieProps, IPieState> {
<Coord type="theta" innerRadius={inner} />
<Geom
style={{ lineWidth, stroke: '#fff' }}
tooltip={tooltip && tooltipFormat}
tooltip={tooltip ? tooltipFormat : undefined}
type="intervalStack"
position="percent"
color={['x', percent || percent === 0 ? formatColor : defaultColors] as any}
selected={selected}
/>
</Chart>
......
Analysis/src/components/OfflineData.tsx
View file @ 061a1e7d
......@@ -13,34 +13,36 @@ const CustomTab = ({
}: {
data: IOfflineData;
currentTabKey: string;
}) => (
<Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
<Col span={12}>
<NumberInfo
title={data.name}
subTitle={
<FormattedMessage
id="BLOCK_NAME.analysis.conversion-rate"
defaultMessage="Conversion Rate"
/>
}
gap={2}
total={`${data.cvr * 100}%`}
theme={currentKey !== data.name ? 'light' : undefined}
/>
</Col>
<Col span={12} style={{ paddingTop: 36 }}>
<Pie
animate={false}
inner={0.55}
tooltip={false}
margin={[0, 0, 0, 0]}
percent={data.cvr * 100}
height={64}
/>
</Col>
</Row>
);
}) => {
return (
<Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
<Col span={12}>
<NumberInfo
title={data.name}
subTitle={
<FormattedMessage
id="BLOCK_NAME.analysis.conversion-rate"
defaultMessage="Conversion Rate"
/>
}
gap={2}
total={`${data.cvr * 100}%`}
theme={currentKey !== data.name ? 'light' : undefined}
/>
</Col>
<Col span={12} style={{ paddingTop: 36 }}>
<Pie
animate={false}
inner={0.55}
tooltip={false}
margin={[0, 0, 0, 0]}
percent={data.cvr * 100}
height={64}
/>
</Col>
</Row>
);
};
const { TabPane } = Tabs;
......
Analysis/src/components/ProportionSales.tsx
View file @ 061a1e7d
......@@ -21,57 +21,59 @@ const ProportionSales = ({
salesType: 'all' | 'online' | 'stores';
salesPieData: ISalesData[];
handleChangeSalesType?: (e: RadioChangeEvent) => void;
}) => (
<Card
loading={loading}
className={styles.salesCard}
bordered={false}
title={
<FormattedMessage
id="BLOCK_NAME.analysis.the-proportion-of-sales"
defaultMessage="The Proportion of Sales"
/>
}
bodyStyle={{ padding: 24 }}
extra={
<div className={styles.salesCardExtra}>
{dropdownGroup}
<div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={handleChangeSalesType}>
<Radio.Button value="all">
<FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
</Radio.Button>
<Radio.Button value="online">
<FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
</Radio.Button>
<Radio.Button value="stores">
<FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
</Radio.Button>
</Radio.Group>
}) => {
return (
<Card
loading={loading}
className={styles.salesCard}
bordered={false}
title={
<FormattedMessage
id="BLOCK_NAME.analysis.the-proportion-of-sales"
defaultMessage="The Proportion of Sales"
/>
}
bodyStyle={{ padding: 24 }}
extra={
<div className={styles.salesCardExtra}>
{dropdownGroup}
<div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={handleChangeSalesType}>
<Radio.Button value="all">
<FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
</Radio.Button>
<Radio.Button value="online">
<FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
</Radio.Button>
<Radio.Button value="stores">
<FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
</Radio.Button>
</Radio.Group>
</div>
</div>
</div>
}
style={{ marginTop: 24 }}
>
<div
style={{
minHeight: 380,
}}
}
style={{ marginTop: 24 }}
>
<h4 style={{ marginTop: 8, marginBottom: 32 }}>
<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
</h4>
<Pie
hasLegend
subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
data={salesPieData}
valueFormat={value => <Yuan>{value}</Yuan>}
height={248}
lineWidth={4}
/>
</div>
</Card>
);
<div
style={{
minHeight: 380,
}}
>
<h4 style={{ marginTop: 8, marginBottom: 32 }}>
<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
</h4>
<Pie
hasLegend
subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
data={salesPieData}
valueFormat={value => <Yuan>{value}</Yuan>}
height={248}
lineWidth={4}
/>
</div>
</Card>
);
};
export default ProportionSales;
Analysis/src/utils/Yuan.tsx
View file @ 061a1e7d
import React from 'react';
import { yuan } from 'ant-design-pro/lib/Charts';
import { yuan } from '../components/Charts';
/**
* 减少使用 dangerouslySetInnerHTML
*/
export default class Yuan extends React.PureComponent {
export default class Yuan extends React.Component<{
children: React.ReactText;
}> {
componentDidMount() {
this.rendertoHtml();
this.renderToHtml();
}
componentDidUpdate() {
this.rendertoHtml();
this.renderToHtml();
}
rendertoHtml = () => {
main: HTMLSpanElement | undefined | null;
renderToHtml = () => {
const { children } = this.props;
if (this.main) {
this.main.innerHTML = yuan(children);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment