Created PieChartLegend test

src/visits/helpers/PieChartLegend.scss

@@ -1,6 +1,6 @@
 @import '../../utils/base';
 
-.default-chart__pie-chart-legend {
+.pie-chart-legend {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -10,11 +10,11 @@
   }
 }
 
-.default-chart__pie-chart-legend-item:not(:first-child) {
+.pie-chart-legend__item:not(:first-child) {
   margin-top: .3rem;
 }
 
-.default-chart__pie-chart-legend-item-color {
+.pie-chart-legend__item-color {
   width: 20px;
   min-width: 20px;
   height: 20px;
@@ -22,7 +22,7 @@
   border-radius: 10px;
 }
 
-.default-chart__pie-chart-legend-item-text {
+.pie-chart-legend__item-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/visits/helpers/PieChartLegend.tsx

@@ -2,21 +2,25 @@ import { FC } from 'react';
 import { Chart } from 'chart.js';
 import './PieChartLegend.scss';
 
-export const PieChartLegend: FC<{ chart: Chart }> = ({ chart }) => {
+interface PieChartLegendProps {
+  chart: Chart;
+}
+
+export const PieChartLegend: FC<PieChartLegendProps> = ({ chart }) => {
   const { config } = chart;
   const { labels = [], datasets = [] } = config.data ?? {};
-  const { defaultColor } = config.options ?? {} as any;
   const [{ backgroundColor: colors }] = datasets;
+  const { defaultColor } = config.options ?? {} as any;
 
   return (
-    <ul className="default-chart__pie-chart-legend">
+    <ul className="pie-chart-legend">
       {(labels as string[]).map((label, index) => (
-        <li key={label} className="default-chart__pie-chart-legend-item d-flex">
+        <li key={label} className="pie-chart-legend__item d-flex">
           <div
-            className="default-chart__pie-chart-legend-item-color"
-            style={{ backgroundColor: (colors as string[])[index] || defaultColor }}
+            className="pie-chart-legend__item-color"
+            style={{ backgroundColor: (colors as string[])[index] ?? defaultColor }}
           />
-          <small className="default-chart__pie-chart-legend-item-text flex-fill">{label}</small>
+          <small className="pie-chart-legend__item-text flex-fill">{label}</small>
         </li>
       ))}
     </ul>