feat(bug by usecase): center chart & use right title

Author: iacopolea

src/pages/Campaign/widgets/UniqueBugs4UseCase/ChartUniqueBugs4UseCase.tsx

@@ -1,4 +1,4 @@
-import { PieChart, Skeleton } from '@appquality/unguess-design-system';
+import { PieChart, Skeleton, theme } from '@appquality/unguess-design-system';
 import { BugsByUseCaseVisualizationProps } from './types';
 import { useBugsByUsecase } from './useBugsByUsecase';
 import { useMaxItems } from './useMaxItems';
@@ -13,11 +13,12 @@ export const ChartUniqueBugs4UseCase = ({
     return <Skeleton />;
   }
   return (
-    <div
-      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
-    >
+    <div style={{ marginBottom: theme.space.lg }}>
       <PieChart
-        legend
+        legend={{
+          width: '100%',
+          columns: 2,
+        }}
         width="100%"
         height="270px"
         centerItem={{ label: 'Tot. Bugs', value: total.toString() }}

src/pages/Campaign/widgets/UniqueBugs4UseCase/useBugsByUsecase.ts

@@ -1,7 +1,39 @@
 import { useState, useEffect } from 'react';
-import { useGetCampaignsByCidWidgetsQuery } from 'src/features/api';
+import {
+  useGetCampaignsByCidWidgetsQuery,
+  WidgetBugsByUseCase,
+} from 'src/features/api';
+
 import { WidgetItem } from './types';
 
+function abbreviateUsecase(string: string): string {
+  return string
+    .toLowerCase()
+    .replace(/use case /, 'UC')
+    .replace(/caso d'uso /, 'UC');
+}
+
+function getSimpleTitle(title: WidgetBugsByUseCase['data'][0]['title']) {
+  if (title.simple) {
+    return title.simple.toLowerCase();
+  }
+  return title.full
+    .replace(/\[(.*?)\]/, '')
+    .replace(/use case\s?[0-9]*:*/i, '')
+    .replace(/caso d'uso\s?[0-9]*:*/i, '')
+    .toLowerCase();
+}
+function getArcLinkLabel(title: WidgetBugsByUseCase['data'][0]['title']) {
+  return abbreviateUsecase(title.full);
+}
+
+function getLegendLabel(title: WidgetBugsByUseCase['data'][0]['title']) {
+  if (title.prefix && title.simple) {
+    return `${title.prefix} ${title.simple}`;
+  }
+  return getSimpleTitle(title);
+}
+
 export const useBugsByUsecase = (campaignId: string) => {
   const { data, isFetching, isLoading, isError } =
     useGetCampaignsByCidWidgetsQuery({
@@ -20,18 +52,11 @@ export const useBugsByUsecase = (campaignId: string) => {
       setTotal(currentTotal);
       setItems(
         data.data.map((item) => ({
-          id: item.title
-            .replace(/use case/i, 'UC')
-            .replace(/caso d'uso/i, 'UC')
-            .toLowerCase(),
-          label: item.title
-            .replace(/\[(.*?)\]/, '')
-            .replace(/use case\s?[0-9]*:*/i, '')
-            .replace(/caso d'uso\s?[0-9]*:*/i, '')
-            .toLowerCase(),
+          id: getArcLinkLabel(item.title),
+          label: getLegendLabel(item.title),
           value: item.bugs,
           key: item.usecase_id,
-          children: item.title,
+          children: item.title.full,
           numerator: item.bugs,
           denominator: currentTotal,
         }))

src/pages/Campaign/widgets/widgetCards/FlipCard/FlipCardBody.tsx

@@ -15,6 +15,11 @@ const WidgetCardFaceContent = styled.div`
 
   background-color: white;
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   &.face-enter {
     opacity: 0;