type: beter type

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<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

@@ -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

@@ -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

 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);