From 0fc2cf0c5b7c9b7bcaa1b51c9d7e5ee2efae0d8e Mon Sep 17 00:00:00 2001 From: Eunwoo Choi Date: Fri, 28 Jul 2023 01:50:03 +0900 Subject: [PATCH] feat: implement basic analytics ui --- components/Form/DateSelect.tsx | 23 ++++++++ components/StatisticsCard.tsx | 30 +++++++++++ package.json | 2 + pages/developers/applications/bots/[id].tsx | 39 ++++++++++++++ yarn.lock | 58 ++++++++++++++++++++- 5 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 components/Form/DateSelect.tsx create mode 100644 components/StatisticsCard.tsx diff --git a/components/Form/DateSelect.tsx b/components/Form/DateSelect.tsx new file mode 100644 index 0000000..b7d9d78 --- /dev/null +++ b/components/Form/DateSelect.tsx @@ -0,0 +1,23 @@ +import DatePicker, { registerLocale } from 'react-datepicker' +import { ko } from 'date-fns/locale' + +import 'react-datepicker/dist/react-datepicker.css' + +registerLocale('ko', ko) + +const DateSelect: React.FC = ({ ...props }) => { + return +} + + +interface DateSelectProps { + [key: string]: unknown +} + + +export default DateSelect diff --git a/components/StatisticsCard.tsx b/components/StatisticsCard.tsx new file mode 100644 index 0000000..8a89f85 --- /dev/null +++ b/components/StatisticsCard.tsx @@ -0,0 +1,30 @@ +const StatisticsCard: React.FC = ({name, currentValue, diff, icon, range}) => { + return
+

+ {name} +

+
+ {icon} +

+ {currentValue} +

+
+

0 ? 'text-green-600' : diff == 0 ? 'text-gray-500' : 'text-red-600')}> + {diff > 0 ? '+' : diff == 0 ? '-' : ''}{diff} +

+
+

+ {range === 'day' ? '어제 대비' : range === 'week' ? '저번주 대비' : range === 'month' ? '저번 달 대비' : range} +

+
+} + +interface StatisticsCardProps { + name: string + currentValue: number | string + diff: number + icon: JSX.Element + range: 'day' | 'week' | 'month' | string +} + +export default StatisticsCard \ No newline at end of file diff --git a/package.json b/package.json index 2a3f232..334bba7 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "cookie": "0.5.0", "csrf": "3.1.0", "dataloader": "2.2.2", + "date-fns": "^2.30.0", "dayjs": "^1.10.6", "dd-trace": "^4.3.0", "difflib": "0.2.4", @@ -49,6 +50,7 @@ "rc-tooltip": "5.1.1", "react": "17.0.2", "react-adsense": "0.1.0", + "react-datepicker": "^4.16.0", "react-dom": "17.0.2", "react-ga": "^3.3.1", "react-hotkeys": "2.0.0", diff --git a/pages/developers/applications/bots/[id].tsx b/pages/developers/applications/bots/[id].tsx index 921dc84..cc4ab9a 100644 --- a/pages/developers/applications/bots/[id].tsx +++ b/pages/developers/applications/bots/[id].tsx @@ -26,15 +26,35 @@ const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout')) const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const Message = dynamic(() => import('@components/Message')) const Modal = dynamic(() => import('@components/Modal')) +const StatisticsCard = dynamic(() => import('@components/StatisticsCard')) +const Select = dynamic(() => import('@components/Form/Select')) +const DateSelect = dynamic(() => import('@components/Form/DateSelect')) const BotApplication: NextPage = ({ user, spec, bot, theme, csrfToken }) => { const router = useRouter() const [ data, setData ] = useState>(null) const [ modalOpened, setModalOpen ] = useState(false) const [ showToken, setShowToken ] = useState(false) + const [ range, setRange ] = useState('day') + const [ startDate, setStartDate ] = useState(new Date()) + const [ endDate, setEndDate ] = useState(new Date()) const [ tokenCopied, setTokenCopied ] = useClipboard(spec?.token, { successDuration: 1000 }) + const availableRanges = [ + { + label: '일간', + value: 'day' + }, + { + label: '주간', + value: 'week' + }, + { + label: '월간', + value: 'month' + }, + ] async function updateApplication(d: DeveloperBot) { const res = await Fetch(`/applications/bots/${bot.id}`, { method: 'PATCH', @@ -140,6 +160,25 @@ const BotApplication: NextPage = ({ user, spec, bot, theme,

봇 통계

+
+
+