From 3f6403681d298d8830b2c3aec25568c061e3454c Mon Sep 17 00:00:00 2001
From: Michael Absolon <absolon.mm@gmail.com>
Date: Tue, 9 Jul 2024 01:13:05 +0200
Subject: [PATCH] refactor(visualizator-fe): Add types for AccountsAmountPlot

---
 .../AccountsAmountPlot/AccountsAmountPlot.tsx | 21 ++++++++-----------
 apps/visualizator-fe/src/types/types.ts       |  9 ++++++++
 2 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 apps/visualizator-fe/src/types/types.ts

diff --git a/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx b/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx
index c4eaff2b..296e058e 100644
--- a/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx
+++ b/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx
@@ -1,12 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { FC } from 'react';
 import { AccountCountsQuery } from '../../gql/graphql';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import HC_more from 'highcharts/highcharts-more';
 import { useTranslation } from 'react-i18next';
+import { ChartDataItem, CustomPoint } from '../../types/types';
 HC_more(Highcharts);
 
 type Props = {
@@ -15,7 +13,7 @@ type Props = {
 
 const AccountsAmountPlot: FC<Props> = ({ counts }) => {
   const { t } = useTranslation();
-  const handlePointClick = (point: any) => {
+  const handlePointClick = (point: CustomPoint) => {
     void navigator.clipboard.writeText(point.name);
   };
 
@@ -32,7 +30,7 @@ const AccountsAmountPlot: FC<Props> = ({ counts }) => {
     series: [
       {
         type: 'packedbubble',
-        data: counts.map(item => ({ name: item.id, value: item.count }))
+        data: counts.map((item): ChartDataItem => ({ name: item.id, value: item.count }))
       }
     ],
     legend: {
@@ -44,11 +42,9 @@ const AccountsAmountPlot: FC<Props> = ({ counts }) => {
     tooltip: {
       useHTML: true,
       formatter: function () {
-        const idHash = this.point.name.startsWith('0x') ? this.point.name : '0x' + this.point.name;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const count = (this.point as any).value;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        return t('idHash', { idHash, count });
+        const point = this.point as CustomPoint;
+        const idHash = point.name.startsWith('0x') ? point.name : '0x' + point.name;
+        return t('idHash', { idHash, count: point.value });
       }
     },
     plotOptions: {
@@ -57,13 +53,14 @@ const AccountsAmountPlot: FC<Props> = ({ counts }) => {
         dataLabels: {
           enabled: true,
           formatter: function () {
-            return (this.point as any).value > 1000 ? `${this.point.name.substring(0, 10)}...` : '';
+            const point = this.point as CustomPoint;
+            return point.value > 1000 ? `${point.name.substring(0, 10)}...` : '';
           }
         },
         point: {
           events: {
             click: function () {
-              handlePointClick(this);
+              handlePointClick(this as CustomPoint);
             }
           }
         }
diff --git a/apps/visualizator-fe/src/types/types.ts b/apps/visualizator-fe/src/types/types.ts
new file mode 100644
index 00000000..7540b9ed
--- /dev/null
+++ b/apps/visualizator-fe/src/types/types.ts
@@ -0,0 +1,9 @@
+export type ChartDataItem = {
+  name: string;
+  value: number;
+};
+
+export interface CustomPoint extends Highcharts.Point {
+  name: string;
+  value: number;
+}