Merge pull request #1650 from kleros/feat/cases-by-court-chart

Feat/cases by court chart

Author: alcercu

web/package.json

@@ -93,6 +93,7 @@
     "amqplib": "^0.10.3",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "core-js": "^3.35.0",
     "ethers": "^5.7.2",
     "graphql": "^16.8.1",

web/src/hooks/queries/useHomePageQuery.ts

@@ -19,6 +19,10 @@ const homePageQuery = graphql(`
       activeJurors
       cases
     }
+    courts {
+      name
+      numberDisputes
+    }
   }
 `);
 

web/src/pages/Home/CourtOverview/CasesByCourtsChart.tsx

@@ -0,0 +1,101 @@
+import React, { useCallback } from "react";
+import styled, { useTheme } from "styled-components";
+
+import { Chart as ChartJS, BarElement } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { Bar } from "react-chartjs-2";
+import "chartjs-adapter-moment";
+
+const BarContainer = styled.div`
+  height: 220px;
+  margin-top: 16px;
+`;
+
+ChartJS.register(BarElement);
+
+export type CasesByCourtsChartData = { labels: string[]; cases: number[]; totalCases: number };
+
+interface ICasesByCourtsChart {
+  data: CasesByCourtsChartData;
+}
+
+const CasesByCourtsChart: React.FC<ICasesByCourtsChart> = ({ data }) => {
+  const theme = useTheme();
+  const getPercentValue = useCallback((value: number) => `${Math.floor((value * 100) / data.totalCases)} %`, [data]);
+  const tickSize = 5; // this is suggested, if that many labels can't fit, chart will use even labels
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    tooltips: {
+      position: "nearest",
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        ticks: {
+          color: theme.secondaryText,
+        },
+      },
+      y: {
+        grid: { color: theme.stroke, borderDash: [4, 4] },
+        ticks: {
+          color: theme.secondaryText,
+          stepSize: (data.totalCases * tickSize) / 100,
+          callback: (value) => getPercentValue(value),
+        },
+        max: data.totalCases,
+      },
+    },
+    plugins: {
+      datalabels: {
+        anchor: "end",
+        align: "top",
+        offset: -4,
+        color: theme.primaryText,
+        font: {
+          weight: "bold",
+        },
+      },
+      tooltip: {
+        backgroundColor: theme.whiteBackground,
+        titleColor: theme.primaryText,
+        borderColor: theme.stroke,
+        borderWidth: 1,
+        displayColors: false,
+        callbacks: {
+          label: (context) => getPercentValue(context.parsed.y),
+          labelTextColor: () => theme.primaryText,
+        },
+      },
+    },
+  };
+
+  return (
+    <BarContainer>
+      {
+        // eslint-disable-next-line
+        // @ts-ignore
+        <Bar
+          {...{
+            data: {
+              labels: data.labels,
+              datasets: [
+                {
+                  data: data.cases,
+                  backgroundColor: theme.secondaryPurple,
+                  hoverBackgroundColor: theme.primaryBlue,
+                  maxBarThickness: 60,
+                },
+              ],
+            },
+            options,
+          }}
+          plugins={[ChartDataLabels]}
+        />
+      }
+    </BarContainer>
+  );
+};
+
+export default CasesByCourtsChart;

web/src/pages/Home/CourtOverview/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { formatUnits } from "viem";
@@ -11,6 +11,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 
+import CasesByCourtsChart, { CasesByCourtsChartData } from "./CasesByCourtsChart";
 import TimeSeriesChart from "./TimeSeriesChart";
 
 const Container = styled.div`
@@ -27,7 +28,7 @@ const StyledDropdown = styled(DropdownSelect)`
 const CHART_OPTIONS = [
   { text: "Staked PNK", value: "stakedPNK" },
   { text: "Cases", value: "cases" },
-  { text: "Cases per court", value: 2 },
+  { text: "Cases per court", value: "casesPerCourt" },
 ];
 
 const ChartOptionsDropdown: React.FC<{
@@ -56,6 +57,8 @@ const Chart: React.FC = () => {
   const [chartOption, setChartOption] = useState("stakedPNK");
   const { data } = useHomePageContext();
   const chartData = data?.counters;
+  const courtsChartData = data?.courts;
+
   const processedData = chartData?.reduce((accData: IChartData[], counter) => {
     return [
       ...accData,
@@ -66,10 +69,34 @@ const Chart: React.FC = () => {
     ];
   }, []);
 
+  const processedCourtsData = courtsChartData?.reduce(
+    (accData: CasesByCourtsChartData, current) => {
+      return {
+        labels: [...accData.labels, current.name ?? ""],
+        cases: [...accData.cases, current.numberDisputes],
+        totalCases: accData.totalCases + parseInt(current.numberDisputes, 10),
+      };
+    },
+    { labels: [], cases: [], totalCases: 0 }
+  );
+
+  const ChartComponent = useMemo(() => {
+    switch (chartOption) {
+      case "casesPerCourt":
+        return processedCourtsData ? (
+          <CasesByCourtsChart data={processedCourtsData} />
+        ) : (
+          <StyledSkeleton height={233} />
+        );
+      default:
+        return processedData ? <TimeSeriesChart data={processedData} /> : <StyledSkeleton height={233} />;
+    }
+  }, [processedCourtsData, processedData, chartOption]);
+
   return (
     <Container>
       <ChartOptionsDropdown {...{ setChartOption }} />
-      {processedData ? <TimeSeriesChart data={processedData} /> : <StyledSkeleton height={233} />}
+      {ChartComponent}
     </Container>
   );
 };

web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx

@@ -49,6 +49,18 @@ const TimeSeriesChart: React.FC<ITimeSeriesChart> = ({ data }) => {
         suggestedMin: 0,
       },
     },
+    plugins: {
+      tooltip: {
+        backgroundColor: theme.whiteBackground,
+        titleColor: theme.primaryText,
+        borderColor: theme.stroke,
+        borderWidth: 1,
+        displayColors: false,
+        callbacks: {
+          labelTextColor: () => theme.primaryText,
+        },
+      },
+    },
   };
 
   return (

yarn.lock

@@ -6653,6 +6653,7 @@ __metadata:
     amqplib: "npm:^0.10.3"
     chart.js: "npm:^3.9.1"
     chartjs-adapter-moment: "npm:^1.0.1"
+    chartjs-plugin-datalabels: "npm:^2.2.0"
     core-js: "npm:^3.35.0"
     eslint: "npm:^8.56.0"
     eslint-config-prettier: "npm:^8.10.0"
@@ -15309,6 +15310,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chartjs-plugin-datalabels@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "chartjs-plugin-datalabels@npm:2.2.0"
+  peerDependencies:
+    chart.js: ">=3.0.0"
+  checksum: e87c2f30d4f6f84b4b1a28c00d1b032d0100f87f8f296a498507047bd2f7fe98eced583a2c09f30e55806e79a0ca7e0db027cc3bed9b27688980e55701a6945f
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^1.0.2":
   version: 1.0.2
   resolution: "check-error@npm:1.0.2"