Skip to content

Commit

Permalink
feat: added pie chart to users list when showVotes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DustinRobison
DustinRobison committed May 25, 2023
1 parent b589e50 commit 2c13b27
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 16 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",
"@vercel/analytics": "^1.0.1",
"apexcharts": "^3.40.0",
"autoprefixer": "10.4.14",
"date-fns": "^2.30.0",
"eslint": "8.40.0",
Expand All @@ -23,6 +24,7 @@
"next": "13.4.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-apexcharts": "^1.4.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.2",
"typescript": "5.0.4"
Expand Down
24 changes: 13 additions & 11 deletions src/app/room/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,17 +143,19 @@ export default function Page({ params }: { params: { slug: string } }) {
<hr />
{/* Content: Vote Buttons and User List */}
<div className="grid md:grid-cols-2 gap-4 py-4">
{/* Vote Buttons */}
<div className="grid grid-cols-3 gap-4">
{ROOM_BUTTON_VALUES.map((buttonVal) => (
<button
key={`btn-${buttonVal}`}
className=" bg-blue text-white font-bold text-xl rounded-md hover:opacity-50 shadow-lg"
onClick={() => handleVote(buttonVal)}
>
{buttonVal}
</button>
))}
<div>
{/* Vote Buttons */}
<div className="grid grid-cols-3 gap-4">
{ROOM_BUTTON_VALUES.map((buttonVal) => (
<button
key={`btn-${buttonVal}`}
className=" bg-blue text-white font-bold text-xl rounded-md hover:opacity-50 shadow-lg"
onClick={() => handleVote(buttonVal)}
>
{buttonVal}
</button>
))}
</div>
</div>

{/* User List */}
Expand Down
8 changes: 4 additions & 4 deletions src/components/nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export default function Nav() {
</div>
</div>
<ul className="flex">
<li className="pr-4 border-r-2">
<Link href="/about">
<li className="pr-4 border-r-2 flex align-center">
<Link href="/about" className="flex align-center justify-center">
<button className="text-white hover:opacity-50">About</button>
</Link>
</li>
<li className="px-4 border-x-2">
<li className="px-4 border-x-2 flex align-center">
<a
href="https://github.com/DustinRobison/StoryPointPoker/issues"
target="_blank"
Expand All @@ -31,7 +31,7 @@ export default function Nav() {
</button>
</a>
</li>
<li className="px-4 border-l-2">
<li className="px-4 border-l-2 flex align-center justify-center">
<a
href="https://www.patreon.com/ScrumStoryPoints"
target="_blank"
Expand Down
45 changes: 45 additions & 0 deletions src/components/room/room-users-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
CheckIcon,
} from "@heroicons/react/24/outline";
import { simpleStringOnly } from "@/helpers/string-helpers";
import Chart from "react-apexcharts";

interface RoomUsersListProps {
showVotes: boolean;
Expand Down Expand Up @@ -90,6 +91,38 @@ export default function RoomUsersList({
setIsEditingName(false);
};

const convertVotesToApexSeries = () => {
const kvVotesQuantity = Object.keys(users).reduce((acc, uid) => {
let vote = isNaN(Number(users[uid].vote))
? "Abstain"
: `${users[uid].vote} Points`;
if (vote in acc) {
acc[vote] += 1;
return acc;
}
return { ...acc, [vote]: 1 };
}, {});

const totalVotes = Object.keys(users).length;
const arrayLabelsAndPercent = Object.keys(kvVotesQuantity).map(
(storyPointValue) => {
return {
label: storyPointValue,
percent:
Math.round((kvVotesQuantity[storyPointValue] / totalVotes) * 100) /
100,
};
}
);

return {
labels: arrayLabelsAndPercent.map((i) => i.label),
series: arrayLabelsAndPercent.map((i) => i.percent),
};
};

const apexOptions = showVotes && users ? convertVotesToApexSeries() : null;

return (
<div>
<div
Expand Down Expand Up @@ -180,6 +213,18 @@ export default function RoomUsersList({
})
: null}
</ul>
<div className={`${showVotes ? "block" : "hidden"} `}>
<hr className="mb-2" />
<Chart
options={{
labels: apexOptions?.labels || [],
chart: { id: "results-chart" },
}}
series={apexOptions?.series || []}
type="pie"
width="300"
/>
</div>
</div>
);
}
76 changes: 75 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -809,6 +809,18 @@ anymatch@~3.1.2:
normalize-path "^3.0.0"
picomatch "^2.0.4"

apexcharts@^3.40.0:
version "3.40.0"
resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.40.0.tgz#9eccb50e38f12ddaeb6803ec781fb26e161853e3"
integrity sha512-dSi3BUfCJkFd67uFp+xffrJVd3lDT7AAUUyRp0qPYiglJ76CeZLddVhM3FAk1P9GCzf8VewqGYUPCYQvXm+b9A==
dependencies:
svg.draggable.js "^2.2.2"
svg.easing.js "^2.0.0"
svg.filter.js "^2.0.2"
svg.pathmorphing.js "^0.1.3"
svg.resize.js "^1.4.3"
svg.select.js "^3.0.1"

arg@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
Expand Down Expand Up @@ -2673,7 +2685,7 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

prop-types@^15.8.1:
prop-types@^15.5.7, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -2729,6 +2741,13 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

react-apexcharts@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-apexcharts/-/react-apexcharts-1.4.0.tgz#e3619104b34750da67a2ca80289dc87085c2aa27"
integrity sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==
dependencies:
prop-types "^15.5.7"

react-dom@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
Expand Down Expand Up @@ -3031,6 +3050,61 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

svg.draggable.js@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
dependencies:
svg.js "^2.0.1"

svg.easing.js@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
integrity sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==
dependencies:
svg.js ">=2.3.x"

svg.filter.js@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
integrity sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==
dependencies:
svg.js "^2.2.5"

svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==

svg.pathmorphing.js@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
dependencies:
svg.js "^2.4.0"

svg.resize.js@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
dependencies:
svg.js "^2.6.5"
svg.select.js "^2.1.2"

svg.select.js@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
dependencies:
svg.js "^2.2.5"

svg.select.js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
dependencies:
svg.js "^2.6.5"

synckit@^0.8.5:
version "0.8.5"
resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
Expand Down

1 comment on commit 2c13b27

@vercel
Copy link

@vercel vercel bot commented on 2c13b27 May 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

story-point-poker – ./

story-point-poker-dustinrobison.vercel.app
story-point-poker-opal.vercel.app
storypointpoker.com
www.storypointpoker.com
story-point-poker-git-master-dustinrobison.vercel.app
scrumstorypoints.com
www.scrumstorypoints.com

Please sign in to comment.