"DashboardAnalysis/src/components/TopSearch.tsx" did not exist on "bd910cab246c18b94f6609456cf172107c6c79a3"
TopSearch.tsx 3.66 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
陈帅's avatar
陈帅 committed
2
import { FormattedMessage } from 'umi-plugin-react/locale';
陈帅's avatar
陈帅 committed
3
import React from 'react';
陈帅's avatar
陈帅 committed
4
import numeral from 'numeral';
陈帅's avatar
陈帅 committed
5 6
import { ISearchData, IVisitData2 } from '../data';

陈帅's avatar
陈帅 committed
7 8
import Charts from './Charts';
import NumberInfo from './NumberInfo';
陈帅's avatar
陈帅 committed
9
import Trend from './Trend';
10 11 12
import styles from '../style.less';

const { MiniArea } = Charts;
陈帅's avatar
陈帅 committed
13 14 15

const columns = [
  {
16
    title: <FormattedMessage id="BLOCK_NAME.table.rank" defaultMessage="Rank" />,
陈帅's avatar
陈帅 committed
17 18 19 20 21
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: (
22
      <FormattedMessage id="BLOCK_NAME.table.search-keyword" defaultMessage="Search keyword" />
陈帅's avatar
陈帅 committed
23 24 25
    ),
    dataIndex: 'keyword',
    key: 'keyword',
陈帅's avatar
陈帅 committed
26
    render: (text: React.ReactNode) => <a href="/">{text}</a>,
陈帅's avatar
陈帅 committed
27 28
  },
  {
29
    title: <FormattedMessage id="BLOCK_NAME.table.users" defaultMessage="Users" />,
陈帅's avatar
陈帅 committed
30 31
    dataIndex: 'count',
    key: 'count',
陈帅's avatar
陈帅 committed
32
    sorter: (a: { count: number }, b: { count: number }) => a.count - b.count,
陈帅's avatar
陈帅 committed
33 34 35
    className: styles.alignRight,
  },
  {
36
    title: <FormattedMessage id="BLOCK_NAME.table.weekly-range" defaultMessage="Weekly Range" />,
陈帅's avatar
陈帅 committed
37 38
    dataIndex: 'range',
    key: 'range',
陈帅's avatar
陈帅 committed
39 40
    sorter: (a: { range: number }, b: { range: number }) => a.range - b.range,
    render: (text: React.ReactNode, record: { status: number }) => (
陈帅's avatar
陈帅 committed
41 42 43 44 45 46 47
      <Trend flag={record.status === 1 ? 'down' : 'up'}>
        <span style={{ marginRight: 4 }}>{text}%</span>
      </Trend>
    ),
  },
];

陈帅's avatar
陈帅 committed
48 49 50 51 52 53 54 55 56 57 58
const TopSearch = ({
  loading,
  visitData2,
  searchData,
  dropdownGroup,
}: {
  loading: boolean;
  visitData2: IVisitData2[];
  dropdownGroup: React.ReactNode;
  searchData: ISearchData[];
}) => (
陈帅's avatar
陈帅 committed
59 60 61 62
  <Card
    loading={loading}
    bordered={false}
    title={
xiaohuoni's avatar
xiaohuoni committed
63 64 65 66
      <FormattedMessage
        id="BLOCK_NAME.analysis.online-top-search"
        defaultMessage="Online Top Search"
      />
陈帅's avatar
陈帅 committed
67 68 69 70 71 72 73 74 75
    }
    extra={dropdownGroup}
    style={{ marginTop: 24 }}
  >
    <Row gutter={68}>
      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
        <NumberInfo
          subTitle={
            <span>
xiaohuoni's avatar
xiaohuoni committed
76 77 78 79
              <FormattedMessage
                id="BLOCK_NAME.analysis.search-users"
                defaultMessage="search users"
              />
陈帅's avatar
陈帅 committed
80
              <Tooltip
xiaohuoni's avatar
xiaohuoni committed
81 82 83
                title={
                  <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="introduce" />
                }
陈帅's avatar
陈帅 committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
              >
                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
              </Tooltip>
            </span>
          }
          gap={8}
          total={numeral(12321).format('0,0')}
          status="up"
          subTotal={17.1}
        />
        <MiniArea line height={45} data={visitData2} />
      </Col>
      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
        <NumberInfo
          subTitle={
            <span>
              <FormattedMessage
101
                id="BLOCK_NAME.analysis.per-capita-search"
陈帅's avatar
陈帅 committed
102 103 104
                defaultMessage="Per Capita Search"
              />
              <Tooltip
xiaohuoni's avatar
xiaohuoni committed
105 106 107
                title={
                  <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="introduce" />
                }
陈帅's avatar
陈帅 committed
108 109 110 111 112 113 114 115 116 117 118 119 120
              >
                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
              </Tooltip>
            </span>
          }
          total={2.7}
          status="down"
          subTotal={26.2}
          gap={8}
        />
        <MiniArea line height={45} data={visitData2} />
      </Col>
    </Row>
陈帅's avatar
陈帅 committed
121
    <Table<any>
陈帅's avatar
陈帅 committed
122 123 124 125 126 127 128 129 130 131
      rowKey={record => record.index}
      size="small"
      columns={columns}
      dataSource={searchData}
      pagination={{
        style: { marginBottom: 0 },
        pageSize: 5,
      }}
    />
  </Card>
陈帅's avatar
陈帅 committed
132
);
陈帅's avatar
陈帅 committed
133 134

export default TopSearch;