fix(deps): update dependency recharts to v3

apps/cli/package.json

@@ -1,6 +1,7 @@
 {
   "name": "auf-cli",
   "version": "1.0.10",
+  "type": "module",
   "bin": {
     "auf-cli": "./dist/auf-cli.js"
   },

apps/web/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/package.json

@@ -61,7 +61,7 @@
     "react-i18next": "^16.0.0",
     "react-select": "^5.10.2",
     "react-use": "^17.6.0",
-    "recharts": "^2.15.4",
+    "recharts": "^3.2.1",
     "sharp": "^0.34.4",
     "swiper": "^12.0.2",
     "tailwind-merge": "^3.3.1",

apps/web/src/entities/dashboard/ui/feedback-line-chart.ui.tsx

@@ -26,7 +26,13 @@ import {
   Icon,
 } from '@ufb/react';
 
-import { SimpleLineChart, useAllChannels, useOAIQuery } from '@/shared';
+import {
+  ChartCard,
+  Legend,
+  LineChart,
+  useAllChannels,
+  useOAIQuery,
+} from '@/shared';
 import type { Channel } from '@/entities/channel';
 
 import { useLineChartData } from '../lib';
@@ -73,47 +79,65 @@ const FeedbackLineChartWrapper: React.FC<IProps> = (props) => {
   );
 
   return (
-    <SimpleLineChart
+    <ChartCard
       title={t('chart.feedback-trend.title')}
       description={`${t('chart.feedback-trend.description')} (${dayjs(
         from,
       ).format('YYYY/MM/DD')} - ${dayjs(to).format('YYYY/MM/DD')})`}
-      height={400}
-      dataKeys={dataKeys}
-      data={chartData}
-      filterContent={
-        <Combobox>
-          <ComboboxTrigger>
-            <Icon name="RiFilter3Line" />
-            Filter
-          </ComboboxTrigger>
-          <ComboboxContent>
-            <ComboboxList maxHeight="200px">
-              {channels?.items.map((channel) => (
-                <ComboboxSelectItem
-                  key={channel.id}
-                  value={String(channel.id)}
-                  checked={currentChannels.some(({ id }) => id === channel.id)}
-                  onSelect={() => {
-                    const isChecked = currentChannels.some(
-                      ({ id }) => id === channel.id,
-                    );
-                    setCurrentChannels((prev) =>
-                      isChecked ? prev.filter(({ id }) => id !== channel.id)
-                      : prev.length === 5 ? [...prev.slice(1), channel]
-                      : [...prev, channel],
-                    );
-                  }}
-                >
-                  {channel.name}
-                </ComboboxSelectItem>
-              ))}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
+      extra={
+        <div className="flex gap-3">
+          <Legend dataKeys={dataKeys} />
+          <ChannelSelectCombobox
+            currentChannels={currentChannels}
+            setCurrentChannels={setCurrentChannels}
+            channels={channels}
+          />
+        </div>
       }
-      showLegend
-    />
+    >
+      <LineChart height={400} dataKeys={dataKeys} data={chartData} />
+    </ChartCard>
+  );
+};
+
+interface ChannelSelectComboboxProps {
+  channels?: { items: Channel[] };
+  currentChannels: Channel[];
+  setCurrentChannels: React.Dispatch<React.SetStateAction<Channel[]>>;
+}
+
+const ChannelSelectCombobox = (props: ChannelSelectComboboxProps) => {
+  const { channels, currentChannels, setCurrentChannels } = props;
+  return (
+    <Combobox>
+      <ComboboxTrigger>
+        <Icon name="RiFilter3Line" />
+        Filter
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxList maxHeight="200px">
+          {channels?.items.map((channel) => (
+            <ComboboxSelectItem
+              key={channel.id}
+              value={String(channel.id)}
+              checked={currentChannels.some(({ id }) => id === channel.id)}
+              onSelect={() => {
+                const isChecked = currentChannels.some(
+                  ({ id }) => id === channel.id,
+                );
+                setCurrentChannels((prev) =>
+                  isChecked ? prev.filter(({ id }) => id !== channel.id)
+                  : prev.length === 5 ? [...prev.slice(1), channel]
+                  : [...prev, channel],
+                );
+              }}
+            >
+              {channel.name}
+            </ComboboxSelectItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
   );
 };
 

apps/web/src/entities/dashboard/ui/issue-bar-chart.ui.tsx

@@ -19,10 +19,11 @@ import { useTranslation } from 'next-i18next';
 import { ToggleGroup, ToggleGroupItem } from '@ufb/react';
 
 import {
+  BarChart,
+  ChartCard,
   ISSUES,
   Path,
-  SimpleBarChart,
-  SimplePieChart,
+  PieChart,
   useOAIQuery,
 } from '@/shared';
 import type { IssueStatus } from '@/entities/issue';
@@ -44,7 +45,7 @@ const IssueBarChart: React.FC<IProps> = ({ projectId }) => {
   const { t } = useTranslation();
   const [type, setType] = useState('bar');
 
-  const { data } = useOAIQuery({
+  const { data: statisticsData } = useOAIQuery({
     path: '/api/admin/statistics/issue/count-by-status',
     variables: { projectId },
     queryOptions: {
@@ -57,82 +58,89 @@ const IssueBarChart: React.FC<IProps> = ({ projectId }) => {
   const onChangeType = (type: 'bar' | 'pie') => (v: string) => {
     setType(v === '' ? type : v);
   };
+  const data = ISSUES(t).map(({ key, name }) => ({
+    name,
+    value: +(
+      statisticsData?.statistics.find((v) => v.status === key)?.count ?? 0
+    ),
+    color: COLOR_MAP[key],
+  }));
+  const onClickIssue = (name: string | undefined) => {
+    if (!name) return;
+    const issue = ISSUES(t).find((v) => v.name === name);
+    window.open(
+      Path.ISSUE.replace('[projectId]', projectId.toString()) +
+        '?queries=' +
+        JSON.stringify([{ key: 'status', value: issue?.key, condition: 'IS' }]),
+      '_blank',
+    );
+  };
 
   return (
-    <>
+    <ChartCard
+      title={t('chart.issue-status-count.title')}
+      description={t('chart.issue-status-count.description')}
+      extra={
+        <ToggleGroup
+          type="single"
+          value={type}
+          onValueChange={onChangeType('pie')}
+        >
+          <ToggleGroupItem value="bar">Bar</ToggleGroupItem>
+          <ToggleGroupItem value="pie">Pie</ToggleGroupItem>
+        </ToggleGroup>
+      }
+    >
       {type === 'pie' && (
-        <SimplePieChart
-          data={ISSUES(t).map(({ key, name }) => ({
-            name,
-            value: +(
-              data?.statistics.find((v) => v.status === key)?.count ?? 0
-            ),
-            color: COLOR_MAP[key],
-          }))}
-          title={t('chart.issue-status-count.title')}
-          description={t('chart.issue-status-count.description')}
-          height={415}
-          filterContent={
-            <ToggleGroup
-              type="single"
-              value={type}
-              onValueChange={onChangeType('pie')}
-            >
-              <ToggleGroupItem value="bar">Bar</ToggleGroupItem>
-              <ToggleGroupItem value="pie">Pie</ToggleGroupItem>
-            </ToggleGroup>
-          }
-          onClick={(data) => {
-            if (!data) return;
-            const issue = ISSUES(t).find((v) => v.name === data.name);
-            window.open(
-              Path.ISSUE.replace('[projectId]', projectId.toString()) +
-                '?queries=' +
-                JSON.stringify([
-                  { key: 'status', value: issue?.key, condition: 'IS' },
-                ]),
-              '_blank',
-            );
-          }}
-        />
+        <div className="flex items-center">
+          <PieChart data={data} onClick={onClickIssue} height={415} />
+          <IssueLegend data={data} />
+        </div>
       )}
       {type === 'bar' && (
-        <SimpleBarChart
-          data={ISSUES(t).map(({ key, name }) => ({
-            name,
-            value: +(
-              data?.statistics.find((v) => v.status === key)?.count ?? 0
-            ),
-            color: COLOR_MAP[key],
-          }))}
-          title={t('chart.issue-status-count.title')}
-          description={t('chart.issue-status-count.description')}
-          height={415}
-          filterContent={
-            <ToggleGroup
-              type="single"
-              value={type}
-              onValueChange={onChangeType('bar')}
-            >
-              <ToggleGroupItem value="bar">Bar</ToggleGroupItem>
-              <ToggleGroupItem value="pie">Pie</ToggleGroupItem>
-            </ToggleGroup>
-          }
-          onClick={(data) => {
-            if (!data) return;
-            const issue = ISSUES(t).find((v) => v.name === data.name);
-            window.open(
-              Path.ISSUE.replace('[projectId]', projectId.toString()) +
-                '?queries=' +
-                JSON.stringify([
-                  { key: 'status', value: issue?.key, condition: 'IS' },
-                ]),
-              '_blank',
-            );
-          }}
-        />
+        <BarChart data={data} height={415} onClick={onClickIssue} />
       )}
-    </>
+    </ChartCard>
+  );
+};
+interface IssueLegendProps {
+  data?: { name: string; value: number; color: string }[];
+}
+
+const IssueLegend: React.FC<IssueLegendProps> = ({ data }) => {
+  return (
+    <div className="w-full">
+      <table className="table">
+        <thead>
+          <tr>
+            <th className="table-head !text-large-strong text-neutral-primary h-auto">
+              Status
+            </th>
+            <th className="table-head !text-large-strong text-neutral-primary h-auto">
+              Issue Count
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.map((item, index) => (
+            <tr key={`item-${index}`}>
+              <td className="!text-large-normal text-neutral-primary table-cell py-2">
+                <div className="flex items-center gap-2">
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <span>{item.name}</span>
+                </div>
+              </td>
+              <td className="!text-large-normal text-neutral-primary table-cell py-2">
+                {item.value}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };