Stats

import React from "react";

import { Card, Col, Grid, Row, Statistic, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

const stats = [
  {
    id: 1,
    name: "Income",
    value: "12467.22",
    prevValue: "8923.11",
    changeType: "increase",
    precision: 2,
    prefix: "$"
  },
  {
    id: 2,
    name: "Expenses",
    value: "7209.44",
    prevValue: "8654.33",
    changeType: "decrease",
    precision: 2,
    prefix: "$"
  },
  {
    id: 3,
    name: "Net Profit",
    value: "634.22",
    prevValue: "3812.89",
    changeType: "decrease",
    precision: 2,
    prefix: "$"
  },
  {
    id: 4,
    name: "Customers",
    value: "2456",
    prevValue: "2123",
    changeType: "increase",
    precision: 0,
    prefix: ""
  }
];

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    card: {
      position: "relative"
    },
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Row
          gutter={[
            {
              xs: token.size,
              sm: token.size,
              md: token.size,
              lg: token.sizeLG,
              xl: token.sizeLG
            },
            token.size
          ]}
        >
          {stats.map((stat) => (
            <Col xs={24} sm={24} md={12} lg={6} xl={6}>
              <Card bodyStyle={styles.card}>
                <Statistic
                  title={stat.name}
                  value={stat.value}
                  precision={stat.precision}
                  valueStyle={{
                    color:
                      stat.changeType === "increase"
                        ? token.colorSuccessTextActive
                        : token.colorErrorTextActive
                  }}
                  prefix={stat.prefix}
                />
                <Text type="secondary">vs. ${stat.prevValue} last month</Text>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}

import React from "react";

import { Card, Col, Dropdown, Grid, Row, Statistic, Tag, theme, Typography } from "antd";

import { ArrowDownOutlined, ArrowUpOutlined, DollarOutlined, EyeOutlined, UserOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

const stats = [
  {
    id: 1,
    name: "Subscribers",
    value: "8724",
    precision: 0,
    prefix: "",
    increase: true,
    change: 8,
    icon: <UserOutlined />
  },
  {
    id: 2,
    name: "Views",
    value: "110944",
    precision: 0,
    increase: false,
    change: 11,
    icon: <EyeOutlined />
  },
  {
    id: 3,
    name: "Ad Revenue",
    value: "1634.22",
    precision: 2,
    prefix: "$",
    change: 2,
    increase: false,
    icon: <DollarOutlined />

  }
];

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    card: {
      position: "relative"
    },
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    iconWrapper: {
      backgroundColor: token.colorPrimary,
      borderRadius: token.borderRadius,
      color: token.colorTextLightSolid,
      display: "inline-block",
      fontSize: token.sizeMD,
      lineHeight: 1,
      marginBottom: token.margin,
      padding: token.paddingXS
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    },
    tag: {
      left: token.marginXXS,
      top: -token.marginXXS
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Row
          gutter={[
            {
              xs: token.size,
              sm: token.size,
              md: token.size,
              lg: token.sizeLG,
              xl: token.sizeLG
            },
            token.size
          ]}
        >
          {stats.map((stat) => (
            <Col xs={24} sm={24} md={24} lg={8} xl={8}>
              <Card bodyStyle={styles.card}>
                <div style={styles.iconWrapper}>{stat.icon}</div>
                <Statistic
                  title={stat.name}
                  value={stat.value}
                  precision={stat.precision}
                  prefix={stat.prefix}
                  suffix={<Tag style={styles.tag} color={stat.increase ? "success" : "error" } icon={stat.increase ? <ArrowUpOutlined /> : <ArrowDownOutlined />} bordered={false}>{stat.change}%</Tag>}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}

import React from "react";

import { Button, Card, Col, Grid, Row, Statistic, theme } from "antd";

import { DollarOutlined, EyeOutlined, PercentageOutlined, UserOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;

const stats = [
  {
    id: 1,
    name: "Sales",
    value: "1242",
    precision: 0,
    icon: <UserOutlined />,
  },
  {
    id: 2,
    name: "Views",
    value: "72044",
    icon: <EyeOutlined />,
  },
  {
    id: 3,
    name: "Affiliate Sales",
    value: "2634.22",
    precision: 2,
    prefix: "$",
    icon: <PercentageOutlined />,
  },
  {
    id: 3,
    name: "Total Sales",
    value: "4788.22",
    precision: 2,
    prefix: "$",
    icon: <DollarOutlined />,
  },
];

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    buttonWrapper: {
      position: "absolute",
      right: token.marginLG,
      textAlign: "right",
      top: token.marginLG
    },
    card: {
      backgroundColor: token.colorBgLayout,
      borderRadius: token.borderRadius,
      position: "relative"
    },
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    divider: {
      margin: `${token.margin}px 0px`
    },
    iconWrapper: {
      alignItems: "center",
      backgroundColor: token.colorText,
      borderRadius: token.borderRadius,
      color: token.colorBgContainer,
      display: "flex",
      fontSize: token.sizeMD,
      height: token.controlHeight,
      justifyContent: "center",
      lineHeight: 1,
      marginBottom: token.margin,
      width: token.controlHeight
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <Row
          gutter={[
            {
              xs: token.size,
              sm: token.size,
              md: token.size,
              lg: token.sizeLG,
              xl: token.sizeLG,
            },
            token.size,
          ]}
        >
          {stats.map((stat) => (
            <Col xs={24} sm={24} md={12} lg={6} xl={6}>
              <Card bodyStyle={styles.card}>
                <div style={styles.iconWrapper}>{stat.icon}</div>
                <Statistic
                  title={stat.name}
                  value={stat.value}
                  precision={stat.precision}
                  prefix={stat.prefix}
                />

                <div style={styles.buttonWrapper}>
                  <Button>View details</Button>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}