-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0369805
commit 1760186
Showing
4 changed files
with
416 additions
and
416 deletions.
There are no files selected for viewing
28 changes: 14 additions & 14 deletions
28
src/app/list/[listId]/history/_component/__HistoryGraph.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| import { style } from '@vanilla-extract/css'; | ||
| import { vars } from '@/styles/__theme.css'; | ||
| import * as fonts from '@/styles/__font.css'; | ||
| // import { style } from '@vanilla-extract/css'; | ||
| // import { vars } from '@/styles/__theme.css'; | ||
| // import * as fonts from '@/styles/__font.css'; | ||
|
|
||
| export const container = style({ | ||
| width: '100%', | ||
| minWidth: 'calc(200vw - 54px)', | ||
| height: '345px', | ||
| padding: '20px', | ||
| // export const container = style({ | ||
| // width: '100%', | ||
| // minWidth: 'calc(200vw - 54px)', | ||
| // height: '345px', | ||
| // padding: '20px', | ||
|
|
||
| display: 'flex', | ||
| alignItems: 'center', | ||
| // display: 'flex', | ||
| // alignItems: 'center', | ||
|
|
||
| borderRadius: '20px', | ||
| backgroundColor: vars.color.white, | ||
| boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', | ||
| }); | ||
| // borderRadius: '20px', | ||
| // backgroundColor: vars.color.white, | ||
| // boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', | ||
| // }); |
282 changes: 141 additions & 141 deletions
282
src/app/list/[listId]/history/_component/__HistoryGraph.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,154 +1,154 @@ | ||
| import dynamic from 'next/dynamic'; | ||
| const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); | ||
| // import dynamic from 'next/dynamic'; | ||
| // const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); | ||
|
|
||
| import * as styles from './__HistoryGraph.css'; | ||
| import { HistoryType } from '@/lib/types/historyType'; | ||
| import timeDiff from '@/lib/utils/time-diff'; | ||
| import { useLanguage } from '@/store/useLanguage'; | ||
| import { listLocale } from '@/app/list/[listId]/locale'; | ||
| // import * as styles from './__HistoryGraph.css'; | ||
| // import { HistoryType } from '@/lib/types/historyType'; | ||
| // import timeDiff from '@/lib/utils/time-diff'; | ||
| // import { useLanguage } from '@/store/useLanguage'; | ||
| // import { listLocale } from '@/app/list/[listId]/locale'; | ||
|
|
||
| interface ItemType { | ||
| title: string; | ||
| history: (number | null)[]; | ||
| } | ||
| // interface ItemType { | ||
| // title: string; | ||
| // history: (number | null)[]; | ||
| // } | ||
|
|
||
| interface HistoryGraphProps { | ||
| histories: HistoryType[]; | ||
| } | ||
| // interface HistoryGraphProps { | ||
| // histories: HistoryType[]; | ||
| // } | ||
|
|
||
| function HistoryGraph({ histories }: HistoryGraphProps) { | ||
| const itemRankHistories: ItemType[] = []; | ||
| histories.map((history) => { | ||
| history.items.map((item) => { | ||
| if (!itemRankHistories.some((i) => i.title === item.title)) { | ||
| itemRankHistories.push({ title: item.title, history: [] }); | ||
| } | ||
| }); | ||
| }); | ||
| // function HistoryGraph({ histories }: HistoryGraphProps) { | ||
| // const itemRankHistories: ItemType[] = []; | ||
| // histories.map((history) => { | ||
| // history.items.map((item) => { | ||
| // if (!itemRankHistories.some((i) => i.title === item.title)) { | ||
| // itemRankHistories.push({ title: item.title, history: [] }); | ||
| // } | ||
| // }); | ||
| // }); | ||
|
|
||
| itemRankHistories.map((i) => { | ||
| histories.map((h) => { | ||
| i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); | ||
| }); | ||
| }); | ||
| // itemRankHistories.map((i) => { | ||
| // histories.map((h) => { | ||
| // i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); | ||
| // }); | ||
| // }); | ||
|
|
||
| return ( | ||
| <div className={styles.container}>{<Chart histories={histories} itemRankHistories={itemRankHistories} />}</div> | ||
| ); | ||
| } | ||
| // return ( | ||
| // <div className={styles.container}>{<Chart histories={histories} itemRankHistories={itemRankHistories} />}</div> | ||
| // ); | ||
| // } | ||
|
|
||
| interface ChartProps { | ||
| itemRankHistories: ItemType[]; | ||
| histories: HistoryType[]; | ||
| } | ||
| // interface ChartProps { | ||
| // itemRankHistories: ItemType[]; | ||
| // histories: HistoryType[]; | ||
| // } | ||
|
|
||
| interface Option { | ||
| chart: { | ||
| id: string; | ||
| width: string; | ||
| height: string; | ||
| zoom: { | ||
| enabled: boolean; | ||
| }; | ||
| }; | ||
| xaxis: { | ||
| categories: string[]; | ||
| tickPlacement: string; | ||
| type: 'category'; | ||
| }; | ||
| yaxis: { | ||
| categories: number[]; | ||
| reversed: boolean; | ||
| stepSize: number; | ||
| labels: { formatter: (val: number) => string }; | ||
| }; | ||
| grid: { | ||
| padding: { | ||
| left: number; | ||
| bottom: number; | ||
| }; | ||
| }; | ||
| legend: { | ||
| show: boolean; | ||
| horizontalAlign: 'left'; | ||
| }; | ||
| noData: { | ||
| text: string; | ||
| align: 'center'; | ||
| verticalAlign: 'bottom'; | ||
| offsetX: number; | ||
| offsetY: number; | ||
| style: { | ||
| fontSize: string; | ||
| }; | ||
| }; | ||
| stroke: { | ||
| curve: 'smooth'; | ||
| }; | ||
| } | ||
| // interface Option { | ||
| // chart: { | ||
| // id: string; | ||
| // width: string; | ||
| // height: string; | ||
| // zoom: { | ||
| // enabled: boolean; | ||
| // }; | ||
| // }; | ||
| // xaxis: { | ||
| // categories: string[]; | ||
| // tickPlacement: string; | ||
| // type: 'category'; | ||
| // }; | ||
| // yaxis: { | ||
| // categories: number[]; | ||
| // reversed: boolean; | ||
| // stepSize: number; | ||
| // labels: { formatter: (val: number) => string }; | ||
| // }; | ||
| // grid: { | ||
| // padding: { | ||
| // left: number; | ||
| // bottom: number; | ||
| // }; | ||
| // }; | ||
| // legend: { | ||
| // show: boolean; | ||
| // horizontalAlign: 'left'; | ||
| // }; | ||
| // noData: { | ||
| // text: string; | ||
| // align: 'center'; | ||
| // verticalAlign: 'bottom'; | ||
| // offsetX: number; | ||
| // offsetY: number; | ||
| // style: { | ||
| // fontSize: string; | ||
| // }; | ||
| // }; | ||
| // stroke: { | ||
| // curve: 'smooth'; | ||
| // }; | ||
| // } | ||
|
|
||
| export function Chart({ histories, itemRankHistories }: ChartProps) { | ||
| const { language } = useLanguage(); | ||
| // export function Chart({ histories, itemRankHistories }: ChartProps) { | ||
| // const { language } = useLanguage(); | ||
|
|
||
| const option: Option = { | ||
| chart: { | ||
| id: 'history graph', | ||
| width: '100%', | ||
| height: '100%', | ||
| zoom: { | ||
| enabled: true, | ||
| }, | ||
| }, | ||
| xaxis: { | ||
| categories: histories.map((history) => timeDiff(String(history.createdDate))), | ||
| tickPlacement: 'on', | ||
| type: 'category', | ||
| }, | ||
| yaxis: { | ||
| categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), | ||
| reversed: true, | ||
| stepSize: 1, | ||
| labels: { | ||
| formatter: (val: number) => { | ||
| return `${val.toFixed(0)}위`; | ||
| }, | ||
| }, | ||
| }, | ||
| grid: { | ||
| padding: { | ||
| left: 30, | ||
| bottom: 30, | ||
| }, | ||
| }, | ||
| stroke: { curve: 'smooth' }, | ||
| legend: { | ||
| show: true, | ||
| horizontalAlign: 'left', | ||
| }, | ||
| noData: { | ||
| text: listLocale[language].noHistory, | ||
| align: 'center', | ||
| verticalAlign: 'bottom', | ||
| offsetX: 0, | ||
| offsetY: 0, | ||
| style: { | ||
| fontSize: '20px', | ||
| }, | ||
| }, | ||
| }; | ||
| // const option: Option = { | ||
| // chart: { | ||
| // id: 'history graph', | ||
| // width: '100%', | ||
| // height: '100%', | ||
| // zoom: { | ||
| // enabled: true, | ||
| // }, | ||
| // }, | ||
| // xaxis: { | ||
| // categories: histories.map((history) => timeDiff(String(history.createdDate))), | ||
| // tickPlacement: 'on', | ||
| // type: 'category', | ||
| // }, | ||
| // yaxis: { | ||
| // categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), | ||
| // reversed: true, | ||
| // stepSize: 1, | ||
| // labels: { | ||
| // formatter: (val: number) => { | ||
| // return `${val.toFixed(0)}위`; | ||
| // }, | ||
| // }, | ||
| // }, | ||
| // grid: { | ||
| // padding: { | ||
| // left: 30, | ||
| // bottom: 30, | ||
| // }, | ||
| // }, | ||
| // stroke: { curve: 'smooth' }, | ||
| // legend: { | ||
| // show: true, | ||
| // horizontalAlign: 'left', | ||
| // }, | ||
| // noData: { | ||
| // text: listLocale[language].noHistory, | ||
| // align: 'center', | ||
| // verticalAlign: 'bottom', | ||
| // offsetX: 0, | ||
| // offsetY: 0, | ||
| // style: { | ||
| // fontSize: '20px', | ||
| // }, | ||
| // }, | ||
| // }; | ||
|
|
||
| const chartData = itemRankHistories.map((item) => { | ||
| return { | ||
| name: item.title, | ||
| data: item.history, | ||
| }; | ||
| }); | ||
| // const chartData = itemRankHistories.map((item) => { | ||
| // return { | ||
| // name: item.title, | ||
| // data: item.history, | ||
| // }; | ||
| // }); | ||
|
|
||
| return ( | ||
| <> | ||
| <ApexChart type="line" options={option} series={chartData} height={300} width={500} /> | ||
| </> | ||
| ); | ||
| } | ||
| // return ( | ||
| // <> | ||
| // <ApexChart type="line" options={option} series={chartData} height={300} width={500} /> | ||
| // </> | ||
| // ); | ||
| // } | ||
|
|
||
| export { HistoryGraph as Graph }; | ||
| // export { HistoryGraph as Graph }; |
Oops, something went wrong.