Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

128 add skeleton on chart load #129

Merged
merged 3 commits into from
Jan 24, 2024
Merged

128 add skeleton on chart load #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b10f35
Add loading animation for charts
thearyadev Jan 24, 2024
fb7d784
remove twmerge ref
thearyadev Jan 24, 2024
521d354
Fix formatting with tw 4
thearyadev Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions frontend/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"extends": "next/core-web-vitals",
"rules": {
"react/jsx-key": "off",
"react/no-unescaped-entities": "off"
}
"extends": "next/core-web-vitals",
"rules": {
"react/jsx-key": "off",
"react/no-unescaped-entities": "off"
}
}
16 changes: 8 additions & 8 deletions frontend/app/components/card/card.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
.card {
@apply border-2;
@apply p-3;
@apply rounded;
@apply mb-3;
@apply border-2;
@apply p-3;
@apply rounded;
@apply mb-3;
}

.heading-container {
}

.title {
@apply text-lg;
@apply font-bold;
@apply text-lg;
@apply font-bold;
}

.subtitle {
@apply font-extralight text-center;
@apply font-extralight text-center;
}

.cardBodyWrap {
@apply grid grid-cols-1 md:grid-cols-3 gap-4;
@apply grid grid-cols-1 md:grid-cols-3 gap-4;
}
45 changes: 24 additions & 21 deletions frontend/app/components/card/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,33 @@ import styles from "./card.module.scss";
import classNames from "classnames";

const Card = ({
children,
title,
subtitle,
nowrap,
className,
children,
title,
subtitle,
nowrap,
className,
}: {
children: React.ReactNode;
title: string;
subtitle?: string;
nowrap?: boolean;
className?: string | string[]
children: React.ReactNode;
title: string;
subtitle?: string;
nowrap?: boolean;
className?: string | string[];
}) => {
const cardStyle = classNames(styles.card, className);

const cardStyle = classNames(styles.card, className)

return (
<div className={cardStyle}>
<div className={styles.headingContainer}>
<h3 className={styles.title}>{title}</h3>
{subtitle ? <h4 className={styles.subtitle}>{subtitle}</h4> : null}
</div>
<div className={nowrap ? undefined : styles.cardBodyWrap}>{children}</div>
</div>
);
return (
<div className={cardStyle}>
<div className={styles.headingContainer}>
<h3 className={styles.title}>{title}</h3>
{subtitle ? (
<h4 className={styles.subtitle}>{subtitle}</h4>
) : null}
</div>
<div className={nowrap ? undefined : styles.cardBodyWrap}>
{children}
</div>
</div>
);
};

export default Card;
6 changes: 3 additions & 3 deletions frontend/app/components/charts/barChart.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.chartContainer {
.highcharts-title {
display: none;
}
.highcharts-title {
display: none;
}
}
131 changes: 76 additions & 55 deletions frontend/app/components/charts/barChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,92 @@

import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useRef } from "react";
import { useEffect, useRef, useState } from "react";
import styles from "./barChart.module.scss";
import { HeroColors } from "@/app/components/charts/heroColors";
import classNames from "classnames";

interface GraphData {
labels: string[];
values: number[];
labels: string[];
values: number[];
}

interface BarChartProps extends HighchartsReact.Props {
title: string;
graph: GraphData;
maxY: number;
className?: string | string[]
title: string;
graph: GraphData;
maxY: number;
className?: string | string[];
}

const BarChart = (props: BarChartProps) => {
const { title, graph, maxY } = props;
const options: Highcharts.Options = {
title: {
// @ts-ignore
text: null,
margin: 0,
},
legend: {
enabled: false,
},
xAxis: {
categories: graph.labels,
},
series: [
{
type: "column",
name: "Occurrences",
data: graph.values.map((item, index) => {
return { y: item, color: HeroColors[graph.labels[index]] }; // do lookup
}),
},
],
credits: {
enabled: false,
},
yAxis: {
min: 0,
max: maxY,
title: {
text: null,
},
},
};
const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
const chartContainerStyle = classNames(styles.chartContainer, props.className)
return (
<div className={chartContainerStyle}>
<h5 className="text-center pb-2 capitalize">{title.toLowerCase()}</h5>
<HighchartsReact
id="gnomegnome"
highcharts={Highcharts}
options={options}
ref={chartComponentRef}
{...props}
/>
</div>
);
const { title, graph, maxY } = props;
const options: Highcharts.Options = {
title: {
// @ts-ignore
text: null,
margin: 0,
},
legend: {
enabled: false,
},
xAxis: {
categories: graph.labels,
},
series: [
{
type: "column",
name: "Occurrences",
data: graph.values.map((item, index) => {
return { y: item, color: HeroColors[graph.labels[index]] }; // do lookup
}),
},
],
credits: {
enabled: false,
},
yAxis: {
min: 0,
max: maxY,
title: {
text: null,
},
},
chart: {
events: {
load: () => {
setLoading(false);
},
},
},
};
const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
const chartContainerStyle = classNames(
styles.chartContainer,
props.className,
); // meow
const [loading, setLoading] = useState(true);
return (
<div className={chartContainerStyle}>
<h5 className="text-center pb-2 capitalize">
{title.toLowerCase()}
</h5>
<div className={loading ? "hidden" : ""}>
<HighchartsReact
id="gnomegnome"
highcharts={Highcharts}
options={options}
ref={chartComponentRef}
{...props}
/>
</div>

<div
role="status"
className={`max-w flex text-center justify-center items-center h-[18rem] animate-pulse ${loading ? "" : "hidden"}`}
>
<p>Loading...</p>
</div>
</div>
);
};

export default BarChart;
82 changes: 41 additions & 41 deletions frontend/app/components/charts/heroColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
interface HeroColor {
[key: string]: string;
[key: string]: string;
}
export const HeroColors: HeroColor = {
Ana: "#8796B6",
Ashe: "#808284",
Baptiste: "#7DB8CE",
Bastion: "#8c998c",
Blank: "#000000",
Brigitte: "#957D7E",
Cassidy: "#b77e80",
"D.Va": "#F59CC8",
Doomfist: "#947F80",
Echo: "#A4CFF9",
Genji: "#9FF67D",
Hanzo: "#BDB894",
Illari: "#B3A58A",
"Junker Queen": "#89B2D5",
Junkrat: "#F0BE7C",
Kiriko: "#D4868F",
Lucio: "#91CD7D",
Mei: "#81AFED",
Mercy: "#F4EFBF",
Moira: "#9d86e5",
Orisa: "#76967B",
Pharah: "#768BC8",
Ramattra: "#9B89CE",
Reaper: "#8D797E",
Reinhardt: "#9EA8AB",
Roadhog: "#BC977E",
Sigma: "#9CA7AA",
Sojourn: "#D88180",
"Soldier 76": "#838A9C",
Sombra: "#887EBC",
Symmetra: "#98C1D1",
Torbjorn: "#C38786",
Tracer: "#DE9D7D",
Widowmaker: "#A583AB",
Winston: "#A7AABE",
"Wrecking Ball": "#E09C7C",
Zarya: "#F291BB",
Zenyatta: "#F5EC91",
LifeWeaver: "#E0B6C5",
Mauga: "#E0B6C5",
Ana: "#8796B6",
Ashe: "#808284",
Baptiste: "#7DB8CE",
Bastion: "#8c998c",
Blank: "#000000",
Brigitte: "#957D7E",
Cassidy: "#b77e80",
"D.Va": "#F59CC8",
Doomfist: "#947F80",
Echo: "#A4CFF9",
Genji: "#9FF67D",
Hanzo: "#BDB894",
Illari: "#B3A58A",
"Junker Queen": "#89B2D5",
Junkrat: "#F0BE7C",
Kiriko: "#D4868F",
Lucio: "#91CD7D",
Mei: "#81AFED",
Mercy: "#F4EFBF",
Moira: "#9d86e5",
Orisa: "#76967B",
Pharah: "#768BC8",
Ramattra: "#9B89CE",
Reaper: "#8D797E",
Reinhardt: "#9EA8AB",
Roadhog: "#BC977E",
Sigma: "#9CA7AA",
Sojourn: "#D88180",
"Soldier 76": "#838A9C",
Sombra: "#887EBC",
Symmetra: "#98C1D1",
Torbjorn: "#C38786",
Tracer: "#DE9D7D",
Widowmaker: "#A583AB",
Winston: "#A7AABE",
"Wrecking Ball": "#E09C7C",
Zarya: "#F291BB",
Zenyatta: "#F5EC91",
LifeWeaver: "#E0B6C5",
Mauga: "#E0B6C5",
};
Loading
Loading