feat(dashboard): add tooltip to dashboard items (#1089)

packages/console/src/pages/Dashboard/components/Block.module.scss

@@ -31,6 +31,15 @@
   .title {
     font: var(--font-title-medium);
     margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      margin-left: _.unit(1);
+      width: 16px;
+      height: 16px;
+      color: var(--color-caption);
+    }
   }
 
   .content {

packages/console/src/pages/Dashboard/components/Block.tsx

@@ -1,11 +1,13 @@
 import { AdminConsoleKey } from '@logto/phrases';
 import { conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Card from '@/components/Card';
+import Tooltip from '@/components/Tooltip';
 import { ArrowDown, ArrowUp } from '@/icons/Arrow';
+import Tip from '@/icons/Tip';
 import { formatNumberWithComma } from '@/utilities/number';
 
 import * as styles from './Block.module.scss';
@@ -14,17 +16,27 @@ type Props = {
   count: number;
   delta?: number;
   title: AdminConsoleKey;
+  tooltip?: AdminConsoleKey;
   varient?: 'bordered' | 'default' | 'plain';
 };
 
-const Block = ({ varient = 'default', count, delta, title }: Props) => {
+const Block = ({ varient = 'default', count, delta, title, tooltip }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const tipRef = useRef<HTMLDivElement>(null);
 
   const deltaLable = delta !== undefined && `${conditionalString(delta >= 0 && '+')}${delta}`;
 
   return (
     <Card className={classNames(styles.block, styles[varient])}>
-      <div className={styles.title}>{t(title)}</div>
+      <div className={styles.title}>
+        {t(title)}
+        {tooltip && (
+          <div ref={tipRef} className={styles.icon}>
+            <Tip />
+            <Tooltip anchorRef={tipRef} content={t(tooltip)} />
+          </div>
+        )}
+      </div>
       <div className={styles.content}>
         <div className={styles.number}>{formatNumberWithComma(count)}</div>
         {delta !== undefined && (

packages/console/src/pages/Dashboard/index.tsx

@@ -45,14 +45,20 @@ const Dashboard = () => {
       {!isLoading && (
         <>
           <div className={styles.blocks}>
-            <Block title="dashboard.total_users" count={totalData.totalUserCount} />
+            <Block
+              title="dashboard.total_users"
+              tooltip="dashboard.total_users_tip"
+              count={totalData.totalUserCount}
+            />
             <Block
               title="dashboard.new_users_today"
+              tooltip="dashboard.new_users_today_tip"
               count={newData.today.count}
               delta={newData.today.delta}
             />
             <Block
               title="dashboard.new_users_7_days"
+              tooltip="dashboard.new_users_7_days_tip"
               count={newData.last7Days.count}
               delta={newData.last7Days.delta}
             />
@@ -60,6 +66,7 @@ const Dashboard = () => {
           <Card className={styles.activeCard}>
             <Block
               title="dashboard.daily_active_users"
+              tooltip="dashboard.daily_active_users_tip"
               count={activeData.dau.count}
               delta={activeData.dau.delta}
               varient="plain"
@@ -95,12 +102,14 @@ const Dashboard = () => {
             <div className={styles.blocks}>
               <Block
                 title="dashboard.weekly_active_users"
+                tooltip="dashboard.weekly_active_users_tip"
                 count={activeData.wau.count}
                 delta={activeData.wau.delta}
                 varient="bordered"
               />
               <Block
                 title="dashboard.monthly_active_users"
+                tooltip="dashboard.monthly_active_users_tip"
                 count={activeData.mau.count}
                 delta={activeData.mau.delta}
                 varient="bordered"

packages/phrases/src/locales/en.ts

@@ -528,11 +528,17 @@ const translation = {
       title: 'Dashboard',
       description: 'Get an overview about your app performace',
       total_users: 'Total users',
+      total_users_tip: 'Total users',
       new_users_today: 'New users today',
+      new_users_today_tip: 'New users today',
       new_users_7_days: 'New users past 7 days',
+      new_users_7_days_tip: 'New users past 7 days',
       daily_active_users: 'Daily active users',
+      daily_active_users_tip: 'Daily active users',
       weekly_active_users: 'Weeky active users',
+      weekly_active_users_tip: 'Weeky active users',
       monthly_active_users: 'Monthly active users',
+      monthly_active_users_tip: 'Monthly active users',
     },
     logs: {
       title: 'Audit Logs',

packages/phrases/src/locales/zh-cn.ts

@@ -512,11 +512,17 @@ const translation = {
       title: '仪表盘',
       description: '查看运行总览',
       total_users: '总用户',
+      total_users_tip: '总用户',
       new_users_today: '今日新增',
+      new_users_today_tip: '今日新增',
       new_users_7_days: '7日新增',
+      new_users_7_days_tip: '7日新增',
       daily_active_users: '日活用户',
+      daily_active_users_tip: '日活用户',
       weekly_active_users: '周活用户',
+      weekly_active_users_tip: '周活用户',
       monthly_active_users: '月活用户',
+      monthly_active_users_tip: '月活用户',
     },
     logs: {
       title: '审计日志',