Merge pull request #129 from thearyadev/128-add-skeleton-on-chart-load

128 add skeleton on chart load
thearyadev · Jan 24, 2024 · a058dda · a058dda
2 parents 37adcfb + 521d354
commit a058dda
Show file tree

Hide file tree

Showing 23 changed files with 5,380 additions and 5,336 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -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"
+    }
 }
diff --git a/frontend/app/components/card/card.module.scss b/frontend/app/components/card/card.module.scss
@@ -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;
 }
diff --git a/frontend/app/components/card/card.tsx b/frontend/app/components/card/card.tsx
@@ -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;
diff --git a/frontend/app/components/charts/barChart.module.scss b/frontend/app/components/charts/barChart.module.scss
@@ -1,5 +1,5 @@
 .chartContainer {
-  .highcharts-title {
-    display: none;
-  }
+    .highcharts-title {
+        display: none;
+    }
 }
diff --git a/frontend/app/components/charts/barChart.tsx b/frontend/app/components/charts/barChart.tsx
@@ -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;
diff --git a/frontend/app/components/charts/heroColors.ts b/frontend/app/components/charts/heroColors.ts
@@ -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",
 };