From 061a1e7d644125e9a379b4bc5dde13d525c89817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 15 Apr 2019 13:36:51 +0800 Subject: [PATCH] type: beter type --- Analysis/src/components/Charts/Pie/index.tsx | 39 ++++--- Analysis/src/components/OfflineData.tsx | 58 ++++++----- Analysis/src/components/ProportionSales.tsx | 102 ++++++++++--------- Analysis/src/utils/Yuan.tsx | 14 +-- 4 files changed, 116 insertions(+), 97 deletions(-) diff --git a/Analysis/src/components/Charts/Pie/index.tsx b/Analysis/src/components/Charts/Pie/index.tsx index cbf95909..47c83663 100644 --- a/Analysis/src/components/Charts/Pie/index.tsx +++ b/Analysis/src/components/Charts/Pie/index.tsx @@ -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 { state: IPieState = { legendData: [], @@ -74,7 +70,9 @@ class Pie extends Component { 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 { }); }; - root!: HTMLDivElement; - chart: G2.Chart | undefined; // for custom lengend view getLegendData = () => { if (!this.chart) return; @@ -94,7 +90,7 @@ class Pie extends Component { if (!geom) return; const items = geom.get('dataArray') || []; // 获取图形对应的 - const legendData = items.map((item: Array) => { + 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 { legendData, }); }; - handleRoot = (n: HTMLDivElement) => { this.root = n; }; @@ -128,6 +123,8 @@ class Pie extends Component { legendData, }); }; + root!: HTMLDivElement; + chart: G2.Chart | undefined; // for window resize auto responsive legend @Bind() @@ -139,7 +136,11 @@ class Pie extends Component { 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 { 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 { 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 { 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 { }), ]; - 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 { diff --git a/Analysis/src/components/OfflineData.tsx b/Analysis/src/components/OfflineData.tsx index a2f5c475..18992698 100755 --- a/Analysis/src/components/OfflineData.tsx +++ b/Analysis/src/components/OfflineData.tsx @@ -13,34 +13,36 @@ const CustomTab = ({ }: { data: IOfflineData; currentTabKey: string; -}) => ( - - - - } - gap={2} - total={`${data.cvr * 100}%`} - theme={currentKey !== data.name ? 'light' : undefined} - /> - - - - - -); +}) => { + return ( + + + + } + gap={2} + total={`${data.cvr * 100}%`} + theme={currentKey !== data.name ? 'light' : undefined} + /> + + + + + + ); +}; const { TabPane } = Tabs; diff --git a/Analysis/src/components/ProportionSales.tsx b/Analysis/src/components/ProportionSales.tsx index 29c7cf45..da2f3be1 100755 --- a/Analysis/src/components/ProportionSales.tsx +++ b/Analysis/src/components/ProportionSales.tsx @@ -21,57 +21,59 @@ const ProportionSales = ({ salesType: 'all' | 'online' | 'stores'; salesPieData: ISalesData[]; handleChangeSalesType?: (e: RadioChangeEvent) => void; -}) => ( - - } - bodyStyle={{ padding: 24 }} - extra={ -
- {dropdownGroup} -
- - - - - - - - - - - +}) => { + return ( + + } + bodyStyle={{ padding: 24 }} + extra={ +
+ {dropdownGroup} +
+ + + + + + + + + + + +
-
- } - style={{ marginTop: 24 }} - > -
-

- -

- } - total={() => {salesPieData.reduce((pre, now) => now.y + pre, 0)}} - data={salesPieData} - valueFormat={value => {value}} - height={248} - lineWidth={4} - /> -
- -); +
+

+ +

+ } + total={() => {salesPieData.reduce((pre, now) => now.y + pre, 0)}} + data={salesPieData} + valueFormat={value => {value}} + height={248} + lineWidth={4} + /> +
+ + ); +}; export default ProportionSales; diff --git a/Analysis/src/utils/Yuan.tsx b/Analysis/src/utils/Yuan.tsx index 415e9557..fe51f434 100644 --- a/Analysis/src/utils/Yuan.tsx +++ b/Analysis/src/utils/Yuan.tsx @@ -1,18 +1,20 @@ 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); -- GitLab