Feat(#65): add status chart

dashboard/src/components/Accordion/Accordion.tsx

@@ -97,7 +97,7 @@ const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
         <ColoredCircle
           className="max-w-6"
           quantity={triggerInfo.buildErrors ?? 0}
-          type={ItemType.Error}
+          backgroundClassName={ItemType.Error}
         />
       </TableCell>
       <TableCell>{triggerInfo.buildTime}</TableCell>
@@ -120,11 +120,11 @@ const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
       <TableCell className="flex flex-row gap-1">
         <ColoredCircle
           quantity={triggerInfo.testErrors ?? 0}
-          type={ItemType.Error}
+          backgroundClassName={ItemType.Error}
         />
         <ColoredCircle
           quantity={triggerInfo.testSuccessfull ?? 0}
-          type={ItemType.Warning}
+          backgroundClassName={ItemType.Warning}
         />
       </TableCell>
       <TableCell>

dashboard/src/components/Cards/BaseCard.tsx

@@ -8,7 +8,7 @@ interface IBaseCard {
 }
 
 const containerClassName =
-  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black';
+  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black break-inside-avoid-column mb-6';
 
 const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => {
   return (

dashboard/src/components/CardsGroup/CardsGroup.tsx

@@ -5,13 +5,14 @@ import BaseCard from '../Cards/BaseCard';
 import ListingContent, {
   IListingContent,
 } from '../ListingContent/ListingContent';
+import StatusChartMemoized, { IStatusChart } from '../StatusChart/StatusCharts';
 
 interface ICardsGroup {
-  cards: (IListingContent | ISummary)[];
+  cards: (IListingContent | ISummary | IStatusChart)[];
 }
 
 interface ICardContent {
-  card: IListingContent | ISummary;
+  card: IListingContent | ISummary | IStatusChart;
 }
 
 const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
@@ -24,7 +25,7 @@ const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
       />
     ));
   }, [cards]);
-  return <div className="grid grid-cols-2 gap-8">{cardsList}</div>;
+  return <div className="columns-2">{cardsList}</div>;
 };
 
 const CardContent = ({ card }: ICardContent): JSX.Element => {
@@ -38,6 +39,8 @@ const CardContent = ({ card }: ICardContent): JSX.Element => {
         summaryBody={card?.summaryBody}
       />
     );
+  } else if (card.type === 'chart') {
+    return <StatusChartMemoized {...card} />;
   } else {
     return <></>;
   }

dashboard/src/components/ColoredCircle/ColoredCircle.tsx

@@ -1,30 +1,22 @@
 import classNames from 'classnames';
 
-import { ItemType } from '../ListingItem/ListingItem';
-
 interface IColoredCircle {
-  quantity: number;
-  type: ItemType;
+  quantity?: number;
   className?: string;
+  backgroundClassName: string;
 }
 
 const ColoredCircle = ({
   quantity,
-  type,
+  backgroundClassName,
   className,
 }: IColoredCircle): JSX.Element => {
-  const backgroundColor =
-    type === ItemType.Error
-      ? 'bg-lightRed'
-      : type === ItemType.Success
-        ? 'bg-lightGreen'
-        : 'bg-mediumGray';
   return (
     <div
       className={classNames(
-        backgroundColor,
         'rounded-full text-black h-6 min-w-6 flex justify-center px-1',
         className,
+        backgroundClassName,
       )}
     >
       <span className="text-sm">{quantity}</span>

dashboard/src/components/ListingItem/ListingItem.tsx

@@ -11,10 +11,10 @@ export interface IListingItem {
 }
 
 export enum ItemType {
-  Warning,
-  Error,
-  Success,
-  None,
+  Warning = 'bg-yellow',
+  Error = 'bg-lightRed',
+  Success = 'bg-lightGreen',
+  None = 'bg-mediumGray',
 }
 
 const ListingItem = ({
@@ -27,28 +27,34 @@ const ListingItem = ({
   const hasBorder = hasBottomBorder ? 'border-b' : '';
   const itemError =
     errors && errors > 0 ? (
-      <ColoredCircle quantity={errors} type={ItemType.Error} />
+      <ColoredCircle quantity={errors} backgroundClassName={ItemType.Error} />
     ) : (
       <></>
     );
 
   const itemWarning =
     warnings && warnings > 0 ? (
-      <ColoredCircle quantity={warnings} type={ItemType.Warning} />
+      <ColoredCircle
+        quantity={warnings}
+        backgroundClassName={ItemType.Warning}
+      />
     ) : (
       <></>
     );
 
   const itemNeutral =
     !errors || errors === 0 || !success || success === 0 ? (
-      <ColoredCircle quantity={0} type={ItemType.None} />
+      <ColoredCircle quantity={0} backgroundClassName={ItemType.None} />
     ) : (
       <></>
     );
 
   const itemSuccess =
     success && success > 0 ? (
-      <ColoredCircle quantity={success} type={ItemType.Success} />
+      <ColoredCircle
+        quantity={success}
+        backgroundClassName={ItemType.Success}
+      />
     ) : (
       <></>
     );

dashboard/src/components/StatusChart/StatusCharts.tsx

@@ -0,0 +1,205 @@
+import { PieChart } from '@mui/x-charts/PieChart';
+
+import { MdArrowDownward, MdArrowUpward } from 'react-icons/md';
+import React, { ReactElement, useMemo } from 'react';
+
+import { useDrawingArea } from '@mui/x-charts';
+import { styled } from '@mui/material';
+
+import ColoredCircle from '../ColoredCircle/ColoredCircle';
+
+type StatusChartValues = {
+  value: number;
+  label: string;
+  color: Colors;
+};
+
+export enum Colors {
+  Red = '#E15739',
+  Green = '#53D07C',
+  Yellow = '#FFD27C',
+  Gray = '#EAEAEA',
+}
+
+export interface IStatusChart {
+  elements: StatusChartValues[];
+  insideText?: StatusChartValues;
+  increaseElement?: StatusChartValues;
+  decreaseElement?: StatusChartValues;
+  pieCentralLabel?: string;
+  pieCentralDescription?: ReactElement;
+  title: ReactElement;
+  type: 'chart';
+}
+
+interface IChartLegend {
+  chartValues: (StatusChartValues | undefined)[];
+}
+
+interface IRegressionElement {
+  element: StatusChartValues;
+  icon: ReactElement;
+}
+
+interface IRegressionStatus {
+  increaseElement?: StatusChartValues;
+  decreaseElement?: StatusChartValues;
+}
+
+const StatusChart = ({
+  elements,
+  increaseElement,
+  decreaseElement,
+  pieCentralLabel,
+  pieCentralDescription,
+}: IStatusChart): JSX.Element => {
+  const showChart = elements.some(element => element.value > 0);
+
+  const dataSeries = useMemo(() => {
+    return [
+      {
+        data: elements,
+        innerRadius: 50,
+        outerRadius: 80,
+      },
+    ];
+  }, [elements]);
+
+  if (!showChart) {
+    return <></>;
+  }
+  return (
+    <div className="flex items-center">
+      <PieChart
+        series={dataSeries}
+        width={200}
+        height={200}
+        slotProps={{
+          legend: {
+            hidden: true,
+          },
+        }}
+      >
+        <PieCenterLabel
+          label={pieCentralLabel ?? ''}
+          description={pieCentralDescription ?? <></>}
+        />
+      </PieChart>
+      <div className="flex flex-row gap-4 pt-5">
+        <ChartLegend chartValues={elements} />
+        <RegressionsStatus
+          increaseElement={increaseElement}
+          decreaseElement={decreaseElement}
+        />
+      </div>
+    </div>
+  );
+};
+
+const StatusChartMemoized = React.memo(StatusChart);
+
+const getColorClassName = (color: Colors): string => {
+  switch (color) {
+    case Colors.Red:
+      return 'bg-red';
+    case Colors.Green:
+      return 'bg-green';
+    case Colors.Yellow:
+      return 'bg-yellow';
+    case Colors.Gray:
+      return 'bg-mediumGray';
+    default:
+      return '';
+  }
+};
+
+const ChartLegend = ({ chartValues }: IChartLegend): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-2">
+      {chartValues.map(chartValue => (
+        <div key={chartValue?.label} className="flex flex-row">
+          {chartValue && (
+            <div className="pt-1 pr-2">
+              <ColoredCircle
+                backgroundClassName={getColorClassName(chartValue.color)}
+              />
+            </div>
+          )}
+          <div className="flex flex-col gap-1">
+            <span className="font-bold">{chartValue?.value}</span>
+            <span>{chartValue?.label}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const RegressionsStatus = ({
+  increaseElement,
+  decreaseElement,
+}: IRegressionStatus): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-2">
+      {increaseElement && (
+        <RegressionElement
+          element={increaseElement}
+          icon={<MdArrowUpward color={Colors.Red} />}
+        />
+      )}
+      {decreaseElement && (
+        <RegressionElement
+          element={decreaseElement}
+          icon={<MdArrowDownward color={Colors.Green} />}
+        />
+      )}
+    </div>
+  );
+};
+
+const RegressionElement = ({
+  element,
+  icon,
+}: IRegressionElement): JSX.Element => {
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="pt-1">{icon}</div>
+      <div className="flex flex-col gap-1">
+        <span className="font-bold">{element.value}</span>
+        <span>{element.label}</span>
+      </div>
+    </div>
+  );
+};
+
+const PieCenterLabel = ({
+  label,
+  description,
+}: {
+  label: string;
+  description: ReactElement;
+}): JSX.Element => {
+  const { width, height, left, top } = useDrawingArea();
+  // eslint-disable-next-line no-magic-numbers
+  const yPositionLabel = 9 / 20;
+  // eslint-disable-next-line no-magic-numbers
+  const yPositionDescription = 11 / 20;
+  const xPosition = left + width / 2;
+  return (
+    <>
+      <StyledText x={xPosition} y={top + yPositionLabel * height}>
+        {label}
+      </StyledText>
+      <StyledText x={xPosition} y={top + yPositionDescription * height}>
+        {description}
+      </StyledText>
+    </>
+  );
+};
+
+const StyledText = styled('text')(() => ({
+  textAnchor: 'middle',
+  dominantBaseline: 'central',
+}));
+
+export default StatusChartMemoized;