Skip to content

Commit

Permalink
Merge pull request #83 from SVTeamB-POISON/feat/#74
Browse files Browse the repository at this point in the history 
Feat/#74 랭킹 차트 적용하기
  • Loading branch information
@nowrobin
nowrobin authored Feb 1, 2023
2 parents f4d659b + 3207d0e commit 26af027
Show file tree
Hide file tree
Showing 8 changed files with 468 additions and 62 deletions.
156 changes: 156 additions & 0 deletions src/components/BarChart/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import ApexCharts from "react-apexcharts";

type chartDataProp = {
ranklabel: string[];
rankdata: number[];
chartnumber: number;
};
export default function BarChart({
ranklabel,
rankdata,
chartnumber,
}: chartDataProp) {
const dataSet = [];
for (let n in ranklabel) {
dataSet.push({ x: ranklabel[n], y: rankdata[n] });
}
const graphType = chartnumber === 1 ? "bar" : "pie";
return (
<ApexCharts
type={"bar"}
height={"250"}
series={[
{
name: "검색수",
data: dataSet,
},
]}
options={{
theme: {
mode: "light",
},
chart: {
toolbar: {
show: false,
},
height: "100%",
background: "transparent",
zoom: {
enabled: false,
},
},
plotOptions: {
bar: {
horizontal: false,
borderRadius: 4,
columnWidth: " 50",
barHeight: "100%",
distributed: true,
},
},
dataLabels: {
style: {
colors: ["#fff"],
},
},
xaxis: {
categories: ranklabel,
type: "category",
labels: {
style: {
colors: "#fff",
},
},
title: {
text: "Flower",
offsetY: 140,
offsetX: -20,
style: {
color: "#fff",
},
},
},
yaxis: {
labels: {
formatter: function (val) {
return val + "회";
},
style: {
colors: "#fff",
},
},
title: {
text: "조회수",
rotate: 0,
offsetY: -100,
offsetX: 25,
style: {
fontSize: "12",
color: "#fff",
},
},
},
title: {
text: "검색랭킹",
align: "center",
style: {
color: "#fff",
},
},

colors: [
"#4ecdc4",
"#c7f464",
"#f9a3a4",
"#f46036",
"#00b1f2",
"#13D8AA",
],

stroke: {
curve: "smooth",
width: 1,
},
legend: {
labels: {
colors: ["#fff"],
},
},
responsive: [
{
breakpoint: 1000,
options: {
yaxis: {
labels: {
formatter: function (val: string) {
return val + "회";
},
style: {
colors: "#fff",
},
},
title: {
text: "조회수",
rotate: 0,
offsetY: -80,
offsetX: 25,
style: {
fontSize: "12",
color: "#fff",
},
},
},
Xaxis: {
title: {
text: "Flower",
offsetY: 85,
offsetX: -20,
},
},
},
},
],
}}
/>
);
}
65 changes: 65 additions & 0 deletions src/components/PieChart/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import ApexCharts from "react-apexcharts";

type chartDataProp = {
ranklabel: string[];
rankdata: number[];
chartnumber: number;
};
export default function PieChart({
ranklabel,
rankdata,
chartnumber,
}: chartDataProp) {
const dataSet = [];
for (let n in ranklabel) {
dataSet.push({ x: ranklabel[n], y: rankdata[n] });
}
const graphType = chartnumber === 1 ? "bar" : "pie";
return (
<ApexCharts
type="pie"
height={"250em"}
series={rankdata}
options={{
chart: {
width: "100%",
toolbar: {
show: false,
},
background: "transparent",
zoom: {
enabled: false,
},
},
plotOptions: {
pie: {
expandOnClick: true,
},
},
labels: ranklabel,
dataLabels: {
enabled: true,
formatter: function (val, opt) {
if (typeof val === "string") {
val = parseInt(val);
}
val = Math.round(val as number);
return val + "%";
},
},
legend: {
labels: {
colors: ["#fff"],
},
},
title: {
text: "검색랭킹",
align: "center",
style: {
color: "#fff",
},
},
}}
/>
);
}
14 changes: 8 additions & 6 deletions src/components/RankList/styles.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@import "@/media.scss";

.container {
align-items: center;
justify-items: center;
width: 40rem;
width: 33rem;
}

.image {
Expand All @@ -14,7 +16,7 @@

.labelContainer {
display: flex;
width: 80%;
width: 70%;
align-items: center;
justify-content: space-around;
& > div {
Expand All @@ -27,14 +29,14 @@

.poison {
position: fixed;
left: 5.5rem;
margin-top: 1.5rem;
left: 7rem;
margin-top: 2.2rem;
z-index: 700;
width: 3.5rem;
width: 3rem;
}

.line {
margin-top: 1rem;
width: 80%;
width: 70%;
height: 10px;
}
100 changes: 81 additions & 19 deletions src/components/RankModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { Rank } from "@/types/rank";
import React, { useState } from "react";
import icon_x from "@/assets/icon_x.png";
import { motion } from "framer-motion";

import BarChart from "@/components/BarChart";
import PieChart from "@/components/PieChart";
type RankModalProp = {
rankTotal: Rank[];
rankHour: Rank[];
Expand Down Expand Up @@ -34,10 +35,30 @@ export default function RankModal({
const topRank: Rank[] = rankHour.slice(0, 3);
const lowRank: Rank[] = rankHour.slice(3, 6);
[topRank[0], topRank[1]] = [topRank[1], topRank[0]];

let hourchartName: string[] = [];
for (let n in rankHour) {
hourchartName.push(rankHour[n].name);
}

let hourchartData: number[] = [];
for (let n in rankHour) {
hourchartData.push(rankHour[n]?.count as number);
}

//Ranking-Total
const topTotal: Rank[] = rankTotal.slice(0, 3);
const lowTotal: Rank[] = rankTotal.slice(3, 6);
[topTotal[0], topTotal[1]] = [topTotal[1], topTotal[0]];
let totalchartName: string[] = [];
for (let n in rankTotal) {
totalchartName.push(rankTotal[n].name);
}

let totalchartData: number[] = [];
for (let n in rankTotal) {
totalchartData.push(rankTotal[n]?.total_count as number);
}

return (
<div className={`drop-shadow-2xl flex flex-col ${styles.container}`}>
Expand All @@ -58,7 +79,7 @@ export default function RankModal({
</button>
</div>
<h1>판별 결과 랭킹</h1>
<img className={styles.crown} src={firstPlace} />
{/* <img className={styles.crown} src={firstPlace} /> */}

<button className={styles.closeBTN} id="close" onClick={closeClick}>
<img
Expand All @@ -69,23 +90,64 @@ export default function RankModal({
/>
</button>

<div className={`flex flex-row ${styles.subContainer1}`}>
{total
? topTotal?.map((result, idx) => (
<RankTop key={idx} result={result!} index={idx} clicked={total} />
))
: topRank?.map((result, idx) => (
<RankTop key={idx} result={result!} index={idx} clicked={total} />
))}
</div>
<div className={`flex flex-col ${styles.subContainer2}`}>
{total
? lowTotal?.map((result, idx) => (
<RankList key={idx} result={result} index={idx} clicked={total} /> // <RankList key={idx} result={result} />
))
: lowRank?.map((result, idx) => (
<RankList key={idx} result={result} index={idx} clicked={total} /> // <RankList key={idx} result={result} />
))}
<div className={` ${styles.subContainer}`}>
<div className={styles.ranksideContainer}>
<div className={`flex flex-row ${styles.rankContainer1}`}>
{total
? topTotal?.map((result, idx) => (
<RankTop
key={idx}
result={result!}
index={idx}
clicked={total}
/>
))
: topRank?.map((result, idx) => (
<RankTop
key={idx}
result={result!}
index={idx}
clicked={total}
/>
))}
</div>
<div className={`flex flex-col ${styles.rankContainer2}`}>
{total
? lowTotal?.map((result, idx) => (
<RankList
key={idx}
result={result}
index={idx}
clicked={total}
/>
))
: lowRank?.map((result, idx) => (
<RankList
key={idx}
result={result}
index={idx}
clicked={total}
/> // <RankList key={idx} result={result} />
))}
</div>
</div>

<div className={`flex flex-col ${styles.graphContainer}`}>
<div className={styles.barChart}>
<BarChart
ranklabel={total ? totalchartName : hourchartName}
rankdata={total ? totalchartData : hourchartData}
chartnumber={1}
/>
</div>
<div className={styles.pieChart}>
<PieChart
ranklabel={total ? totalchartName : hourchartName}
rankdata={total ? totalchartData : hourchartData}
chartnumber={2}
/>
</div>
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 26af027

Please sign in to comment.