Merge pull request #1780 from kleros/refactor/charts

refactor(web): charts-improvements
kleros · Dec 10, 2024 · f64808c · f64808c
2 parents 039d745 + a194f04
commit f64808c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/web/src/pages/Home/CourtOverview/BarChart.tsx b/web/src/pages/Home/CourtOverview/BarChart.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import styled, { useTheme } from "styled-components";
+
 import {
   Chart as ChartJS,
   BarElement,
@@ -44,6 +45,16 @@ const BarChart: React.FC<IBarChartProps> = ({ chartData }) => {
 
   const formatPNKValue = useCallback((value: number) => formatter.format(value), []);
 
+  const sortedData = useMemo(() => {
+    const sortedIndices = chartData.data.map((value, index) => ({ value, index })).sort((a, b) => b.value - a.value);
+
+    return {
+      labels: sortedIndices.map((item) => chartData.labels[item.index]),
+      data: sortedIndices.map((item) => chartData.data[item.index]),
+      total: chartData.total,
+    };
+  }, [chartData]);
+
   const tickSize = 5; // suggested, if that many labels can't fit, chart will use even labels
 
   const options: ChartOptions<"bar"> = {
@@ -95,13 +106,14 @@ const BarChart: React.FC<IBarChartProps> = ({ chartData }) => {
     <BarContainer>
       <Bar
         data={{
-          labels: chartData.labels,
+          labels: sortedData.labels,
           datasets: [
             {
-              data: chartData.data,
+              data: sortedData.data,
               backgroundColor: theme.secondaryPurple,
               hoverBackgroundColor: theme.primaryBlue,
               maxBarThickness: 60,
+              borderRadius: 3,
             },
           ],
         }}

diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx
@@ -12,8 +12,8 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 
-import StakedPNKByCourtsChart, { StakedPNKByCourtsChartData } from "./StakedPNKByCourtsChart";
 import CasesByCourtsChart, { CasesByCourtsChartData } from "./CasesByCourtsChart";
+import StakedPNKByCourtsChart, { StakedPNKByCourtsChartData } from "./StakedPNKByCourtsChart";
 import TimeSeriesChart from "./TimeSeriesChart";
 
 const Container = styled.div`
@@ -74,22 +74,28 @@ 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),
-      };
+      if (BigInt(current.numberDisputes) > 0) {
+        return {
+          labels: [...accData.labels, current.name ?? ""],
+          cases: [...accData.cases, current.numberDisputes],
+          totalCases: accData.totalCases + parseInt(current.numberDisputes, 10),
+        };
+      }
+      return accData;
     },
     { labels: [], cases: [], totalCases: 0 }
   );
 
   const processedStakedPNKData = courtsChartData?.reduce(
     (accData: StakedPNKByCourtsChartData, current) => {
-      return {
-        labels: [...accData.labels, current.name ?? ""],
-        stakes: [...accData.stakes, parseFloat(formatUnits(current.stake, 18))],
-        totalStake: accData.totalStake + parseFloat(formatUnits(current.stake, 18)),
-      };
+      if (BigInt(current.stake) > 0) {
+        return {
+          labels: [...accData.labels, current.name ?? ""],
+          stakes: [...accData.stakes, parseFloat(formatUnits(current.stake, 18))],
+          totalStake: accData.totalStake + parseFloat(formatUnits(current.stake, 18)),
+        };
+      }
+      return accData;
     },
     { labels: [], stakes: [], totalStake: 0 }
   );

diff --git a/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx b/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx
@@ -48,6 +48,8 @@ const TimeSeriesChart: React.FC<ITimeSeriesChart> = ({ data }) => {
         grid: { display: false },
         ticks: {
           color: theme.secondaryText,
+          autoSkipPadding: 10,
+          maxRotation: 0,
         },
       },
       y: {