Created PieChart component. Refactored charts.

src/components/charts/BarChart.tsx

@@ -0,0 +1,85 @@
+import { useTheme } from 'components/hooks';
+import Chart, { ChartProps } from 'components/charts/Chart';
+import { renderNumberLabels } from 'lib/charts';
+import { useState } from 'react';
+import BarChartTooltip from 'components/charts/BarChartTooltip';
+
+export interface BarChartProps extends ChartProps {
+  unit: string;
+  stacked?: boolean;
+  renderXLabel?: (label: string, index: number, values: any[]) => string;
+  renderYLabel?: (label: string, index: number, values: any[]) => string;
+  XAxisType?: string;
+  YAxisType?: string;
+}
+
+export function BarChart(props: BarChartProps) {
+  const [tooltip, setTooltip] = useState(null);
+  const { colors } = useTheme();
+  const {
+    renderXLabel,
+    renderYLabel,
+    unit,
+    XAxisType = 'time',
+    YAxisType = 'linear',
+    stacked = false,
+  } = props;
+
+  const options = {
+    scales: {
+      x: {
+        type: XAxisType,
+        stacked: true,
+        time: {
+          unit,
+        },
+        grid: {
+          display: false,
+        },
+        border: {
+          color: colors.chart.line,
+        },
+        ticks: {
+          color: colors.chart.text,
+          autoSkip: false,
+          maxRotation: 0,
+          callback: renderXLabel,
+        },
+      },
+      y: {
+        type: YAxisType,
+        min: 0,
+        beginAtZero: true,
+        stacked,
+        grid: {
+          color: colors.chart.line,
+        },
+        border: {
+          color: colors.chart.line,
+        },
+        ticks: {
+          color: colors.chart.text,
+          callback: renderYLabel || renderNumberLabels,
+        },
+      },
+    },
+  };
+
+  const handleTooltip = ({ tooltip }: { tooltip: any }) => {
+    const { opacity } = tooltip;
+
+    setTooltip(opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} /> : null);
+  };
+
+  return (
+    <Chart
+      {...props}
+      type="bar"
+      chartOptions={options}
+      tooltip={tooltip}
+      onTooltip={handleTooltip}
+    />
+  );
+}
+
+export default BarChart;