fix(console): dashboard chart style (#1177)

* fix(console): dashboard chart style

* fix(console): dashboard chart tooltip (#1178)

packages/console/src/pages/Dashboard/components/ChartTooltip/index.module.scss

@@ -0,0 +1,20 @@
+@use '@/scss/underscore' as _;
+
+.chartTooltip {
+  background: var(--color-on-primary);
+  border: 1px solid var(--color-divider);
+  box-shadow: var(--shadow-2);
+  border-radius: 4px;
+  padding: _.unit(2) _.unit(3);
+  text-align: center;
+
+  .value {
+    font: var(--font-subhead-2);
+    color: var(--color-text);
+  }
+
+  .label {
+    font: var(--font-body-small);
+    color: var(--color-icon);
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { formatNumberWithComma } from '@/utilities/number';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  label?: string;
+  payload?: Array<{ payload: { count: number; date: string } }>;
+};
+
+const ChartTooltip = ({ label, payload }: Props) => {
+  if (!label || !payload?.[0]) {
+    return null;
+  }
+
+  return (
+    <div className={styles.chartTooltip}>
+      <div className={styles.value}>{formatNumberWithComma(payload[0].payload.count)}</div>
+      <div className={styles.label}>{label}</div>
+    </div>
+  );
+};
+
+export default ChartTooltip;

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

@@ -18,10 +18,17 @@ import TextInput from '@/components/TextInput';
 import { RequestError } from '@/hooks/use-api';
 
 import Block from './components/Block';
+import ChartTooltip from './components/ChartTooltip';
 import Skeleton from './components/Skeleton';
 import * as styles from './index.module.scss';
 import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
 
+const tickStyle = {
+  fill: 'var(--color-caption)',
+  fontSize: 11,
+  fontFamily: 'var(--font-family)',
+};
+
 const Dashboard = () => {
   const { data: totalData, error: totalError } = useSWR<TotalUsersResponse, RequestError>(
     '/api/dashboard/users/total'
@@ -98,13 +105,13 @@ const Dashboard = () => {
                   <Area
                     type="monotone"
                     dataKey="count"
-                    stroke="#5D34F2"
+                    stroke="var(--color-primary)"
                     strokeWidth={2}
-                    fill="#F2EFFD"
+                    fill="var(--color-hover-variant)"
                   />
-                  <XAxis dataKey="date" />
-                  <YAxis orientation="right" axisLine={false} tickLine={false} />
-                  <Tooltip />
+                  <XAxis dataKey="date" tickLine={false} tick={tickStyle} />
+                  <YAxis orientation="right" axisLine={false} tickLine={false} tick={tickStyle} />
+                  <Tooltip content={<ChartTooltip />} cursor={{ stroke: 'var(--color-primary' }} />
                 </AreaChart>
               </ResponsiveContainer>
             </div>

packages/shared/scss/_fonts.scss

@@ -11,6 +11,7 @@ $font-family:
   'Apple Color Emoji';
 
 :root {
+  --font-family: #{$font-family};
   --font-headline-large: 600 32px/40px #{$font-family};
   --font-headline-medium: 600 28px/36px #{$font-family};
   --font-headline-small: 600 24px/32px #{$font-family};