Statistic 统计组件

export function StatisticBasic() {  return (    <ElRow gutter={16}>      <ElCol xs={24} sm={12} md={6} style={colStyle}>        <ElStatistic title="Daily active users" value={268500} />      </ElCol>      <ElCol xs={24} sm={12} md={6} style={colStyle}>        <ElStatistic          value={138}          title={            <div style={{ display: "inline-flex", alignItems: "center" }}>              Ratio of men to women              <ElIcon size={12} style={{ marginLeft: 4 }}>                <Male />              </ElIcon>            </div>          }          suffix="/100"        />      </ElCol>      <ElCol xs={24} sm={12} md={6} style={colStyle}>        <ElStatistic title="Total Transactions" value={172000} />      </ElCol>      <ElCol xs={24} sm={12} md={6} style={colStyle}>        <ElStatistic          title="Feedback number"          value={562}          suffix={            <ElIcon style={{ verticalAlign: "-0.125em" }}>              <ChatLineRound />            </ElIcon>          }        />      </ElCol>    </ElRow>  );}

export function StatisticCountdown() {  const [value] = useState(() => Date.now() + 1000 * 60 * 60 * 7);  const [value1, setValue1] = useState(    () => Date.now() + 1000 * 60 * 60 * 24 * 2,  );  const [value2] = useState(() => dayjs().add(1, "month").startOf("month"));  const reset = () => {    setValue1(Date.now() + 1000 * 60 * 60 * 24 * 2);  };  return (    <ElRow gutter={16}>      <ElCol xs={24} sm={12} md={8} style={colStyle}>        <ElCountdown title="Start to grab" value={value} />      </ElCol>      <ElCol xs={24} sm={12} md={8} style={colStyle}>        <ElCountdown title="Remaining VIP time" format="HH:mm:ss" value={value1} />        <ElButton type="primary" style={footerStyle} onClick={reset}>          Reset        </ElButton>      </ElCol>      <ElCol xs={24} sm={12} md={8} style={colStyle}>        <ElCountdown          format="DD [days] HH:mm:ss"          value={value2}          title={            <span style={{ display: "inline-flex", alignItems: "center" }}>              <ElIcon size={12} style={{ marginRight: "4px" }}>                <Calendar />              </ElIcon>              Still to go until next month            </span>          }        />        <div style={footerStyle}>{value2.format("YYYY-MM-DD")}</div>      </ElCol>    </ElRow>  );}

export function StatisticCard() {  return (    <div style={{ width: "100%", backgroundColor: "var(--el-fill-color)" }}>      <ElRow gutter={16}>        <ElCol xs={24} sm={12} md={8} style={cardColStyle}>          <div style={cardStyle}>            <ElStatistic              value={98500}              style={statisticStyle}              title={cardTitle(                "Daily active users",                "Number of users who logged into the product in one day",              )}            />            <div style={statisticFooter}>              <div style={footerItem}>                <span>than yesterday</span>                <span style={{ ...footerValue, color: "var(--el-color-success)" }}>                  24%                  <ElIcon>                    <CaretTop />                  </ElIcon>                </span>              </div>            </div>          </div>        </ElCol>        <ElCol xs={24} sm={12} md={8} style={cardColStyle}>          <div style={cardStyle}>            <ElStatistic              value={693700}              style={statisticStyle}              title={cardTitle(                "Monthly Active Users",                "Number of users who logged into the product in one month",              )}            />            <div style={statisticFooter}>              <div style={footerItem}>                <span>month on month</span>                <span style={{ ...footerValue, color: "var(--el-color-error)" }}>                  12%                  <ElIcon>                    <CaretBottom />                  </ElIcon>                </span>              </div>            </div>          </div>        </ElCol>        <ElCol xs={24} sm={12} md={8} style={cardColStyle}>          <div style={cardStyle}>            <ElStatistic              value={72000}              style={statisticStyle}              title={                <div style={{ display: "inline-flex", alignItems: "center" }}>                  New transactions today                </div>              }            />            <div style={statisticFooter}>              <div style={footerItem}>                <span>than yesterday</span>                <span style={{ ...footerValue, color: "var(--el-color-success)" }}>                  16%                  <ElIcon>                    <CaretTop />                  </ElIcon>                </span>              </div>              <div style={footerItem}>                <ElIcon size={14}>                  <ArrowRight />                </ElIcon>              </div>            </div>          </div>        </ElCol>      </ElRow>    </div>  );}