All files / src/metricsboard/_example MetricsBoardExample.jsx

50% Statements 1/2
100% Branches 0/0
50% Functions 1/2
50% Lines 1/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81                1x                                                                                                                                                
import React from "react";
import { Row, Col } from "@tencent/tea-component/lib/grid";
import { Card } from "@tencent/tea-component/lib/card";
import { MetricsBoard } from "@tencent/tea-component/lib/metricsboard";
import { Icon } from "@tencent/tea-component/lib/icon";
import { Text } from "@tencent/tea-component/lib/text";
 
export default function MetricsBoardExample() {
  return (
    <Card>
      <Card.Body title="昨日数据">
        <Row showSplitLine>
          <Col>
            <MetricsBoard
              title="语音时长"
              unit="分钟"
              value={7890}
              infos={[
                <>
                  比较前天 <Icon type="trenddown" /> 0%
                </>,
              ]}
              onClick={event => console.log(event)}
            />
          </Col>
          <Col>
            <MetricsBoard
              title="语音 DAU 总人数"
              value={456}
              infos={[
                <>
                  比较前天 <Icon type="trendup" /> 0%
                </>,
                <>
                  比较上周 <Icon type="trenddown" /> 0%
                </>,
                <>
                  比较上月 <Icon type="trenddown" /> 0%
                </>,
              ]}
            />
          </Col>
          <Col>
            <MetricsBoard
              title="语音 DAU 总人数"
              value={789}
              infos={[
                <>
                  <MetricsBoard.InfoLabel>标清</MetricsBoard.InfoLabel>
                  <MetricsBoard.InfoKey>
                    <Text theme="danger">23</Text>
                  </MetricsBoard.InfoKey>
                </>,
                <>
                  <MetricsBoard.InfoLabel>高清</MetricsBoard.InfoLabel>
                  <MetricsBoard.InfoKey>23</MetricsBoard.InfoKey>
                </>,
                <>
                  <MetricsBoard.InfoLabel>1080P</MetricsBoard.InfoLabel>
                  <MetricsBoard.InfoKey>23</MetricsBoard.InfoKey>
                </>,
              ]}
            />
          </Col>
          <Col>
            <MetricsBoard
              title="语音 DAU 总人数"
              value="00"
              infos={[
                <>
                  比较前天 <Icon type="trendup" /> 0%
                </>,
              ]}
            />
          </Col>
        </Row>
      </Card.Body>
    </Card>
  );
}