Created PieChart component. Refactored charts.

src/components/metrics/PageviewsChart.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import BarChart, { BarChartProps } from './BarChart';
+import BarChart, { BarChartProps } from 'components/charts/BarChart';
 import { useLocale, useTheme, useMessages } from 'components/hooks';
-import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
+import { renderDateLabels } from 'lib/charts';
 
 export interface PageviewsChartProps extends BarChartProps {
   data: {
@@ -17,33 +17,36 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
   const { colors } = useTheme();
   const { locale } = useLocale();
 
-  const datasets = useMemo(() => {
-    if (!data) return [];
+  const chartData = useMemo(() => {
+    if (!data) {
+      return {};
+    }
 
-    return [
-      {
-        label: formatMessage(labels.visitors),
-        data: data.sessions,
-        borderWidth: 1,
-        ...colors.chart.visitors,
-      },
-      {
-        label: formatMessage(labels.views),
-        data: data.pageviews,
-        borderWidth: 1,
-        ...colors.chart.views,
-      },
-    ];
-  }, [data, colors, formatMessage, labels]);
+    return {
+      datasets: [
+        {
+          label: formatMessage(labels.visitors),
+          data: data.sessions,
+          borderWidth: 1,
+          ...colors.chart.visitors,
+        },
+        {
+          label: formatMessage(labels.views),
+          data: data.pageviews,
+          borderWidth: 1,
+          ...colors.chart.views,
+        },
+      ],
+    };
+  }, [data]);
 
   return (
     <BarChart
       {...props}
-      datasets={datasets}
+      data={chartData}
       unit={unit}
       isLoading={isLoading}
       renderXLabel={renderDateLabels(unit, locale)}
-      renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
     />
   );
 }