Skip to content

Commit

Permalink
Merge pull request #258 from thearyadev/pareto+gini
Browse files Browse the repository at this point in the history 
feat: show pareto line and gini coefficient for each bar chart
  • Loading branch information
@thearyadev
thearyadev authored Dec 29, 2024
2 parents 98d3a3a + 5acaa9d commit d2eb94e
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 0 deletions.
21 changes: 21 additions & 0 deletions frontend/app/components/charts/barChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,18 @@ import styles from "./barChart.module.scss";
import { HeroColors } from "@/app/components/charts/heroColors";
import classNames from "classnames";
import { BarChartData } from "@/app/server/actions";
import pareto from 'highcharts/modules/pareto';
import { IconPercentage30 } from "@tabler/icons-react";

if (typeof Highcharts === 'object') {
pareto(Highcharts)
}

interface BarChartProps extends HighchartsReact.Props {
title: string;
graph: BarChartData;
maxY: number;
giniCoefficient: number;
className?: string | string[];
}
const BarChart = (props: BarChartProps) => {
Expand All @@ -29,6 +36,10 @@ const BarChart = (props: BarChartProps) => {
categories: graph.labels,
},
series: [
{
type: 'pareto',
baseSeries: 1 // index of column series
},
{
type: "column",
name: "Occurrences",
Expand Down Expand Up @@ -74,6 +85,16 @@ const BarChart = (props: BarChartProps) => {
ref={chartComponentRef}
{...props}
/>
<div
className={`
text-center text-sm pb-2 font-mono
${props.giniCoefficient < 0.15 ? 'text-green-500' :
props.giniCoefficient < 0.30 ? 'text-gray-500' :
'text-red-500'}
`}
>
Gini Coefficient: {props.giniCoefficient.toFixed(2)}
</div>
</div>

<div
Expand Down
94 changes: 94 additions & 0 deletions frontend/app/season/[seasonNumber]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
get_occurrences,
get_season_list,
map_generic_kv_to_bar_chart_data,
calculateGiniCoefficient
} from "@/app/server/actions";
import { Tabs, TabsList, TabsTab, TabsPanel } from "@mantine/core";

Expand Down Expand Up @@ -64,6 +65,14 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
true
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.AMERICAS,
null,
params.seasonNumber,
true
),
))}
maxY={500}
/>
<BarChart
Expand All @@ -77,6 +86,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
true
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.EUROPE,
null,
params.seasonNumber,
true
),))}
maxY={500}
/>
<BarChart
Expand All @@ -90,6 +106,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
true
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.ASIA,
null,
params.seasonNumber,
true
)))}
maxY={500}
/>
<BarChart
Expand All @@ -103,6 +126,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
true
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
null,
null,
params.seasonNumber,
true
)))}
maxY={1200}
/>
</TabsPanel>
Expand All @@ -120,6 +150,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
false
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.AMERICAS,
null,
params.seasonNumber,
false
)))}
maxY={500}
/>
<BarChart
Expand All @@ -133,6 +170,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
false
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.EUROPE,
null,
params.seasonNumber,
false
)))}
maxY={500}
/>
<BarChart
Expand All @@ -146,6 +190,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
false
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
Region.ASIA,
null,
params.seasonNumber,
false
)))}
maxY={500}
/>
<BarChart
Expand All @@ -159,6 +210,13 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
false
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
null,
null,
null,
params.seasonNumber,
false
)))}
maxY={1200}
/>
</TabsPanel>
Expand All @@ -179,6 +237,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
region,
Slot.firstMostPlayed,
params.seasonNumber,
)))}
maxY={300}
/>
);
Expand All @@ -196,6 +260,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
null,
Slot.firstMostPlayed,
params.seasonNumber,
)))}
maxY={500}
/>
);
Expand All @@ -215,6 +285,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
region,
Slot.secondMostPlayed,
params.seasonNumber,
)))}
maxY={300}
/>
);
Expand All @@ -232,6 +308,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
null,
Slot.secondMostPlayed,
params.seasonNumber,
)))}
maxY={500}
/>
);
Expand All @@ -251,6 +333,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
region,
Slot.thirdMostPlayed,
params.seasonNumber,
),))}
maxY={300}
/>
);
Expand All @@ -268,6 +356,12 @@ const SeasonPage = async ({ params }: { params: { seasonNumber: number } }) => {
params.seasonNumber,
),
)}
giniCoefficient={calculateGiniCoefficient(Object.values(await get_occurrences(
role,
null,
Slot.thirdMostPlayed,
params.seasonNumber,
)))}
maxY={500}
/>
);
Expand Down

0 comments on commit d2eb94e

Please sign in to comment.