fix: Fix assets chart counts not ordered correctly

apps/visualizator-be/src/messages/messages.service.ts

@@ -218,7 +218,7 @@ export class MessageService {
         WHERE symbol IS NOT NULL
           AND symbol <> ''
         GROUP BY origin_para_id, symbol
-        ORDER BY origin_para_id, count DESC;
+        ORDER BY count DESC, origin_para_id;
       `;
       queryParameters.push(paraIds);
     } else {

apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.tsx

@@ -1,82 +1,48 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { FC } from 'react';
-import { AssetCountsBySymbolQuery } from '../../gql/graphql';
-import { getParachainById } from '../../utils/utils';
-import { BarChart } from '@mantine/charts';
+import { FC, ReactNode, useMemo } from 'react';
+import { aggregateDataByParachain } from './utils/aggregateDataByParachain';
+import { TAssetCounts } from '../../types/types';
 import { useTranslation } from 'react-i18next';
-
-const fixedPalette = [
-  '#FF6384',
-  '#36A2EB',
-  '#FFCE56',
-  '#4BC0C0',
-  '#9966FF',
-  '#FF9F40',
-  '#E7E9ED',
-  '#70D6FF',
-  '#FF70A6',
-  '#FF9770',
-  '#FFD670',
-  '#E9FF70',
-  '#8AEFFF',
-  '#B5E85E',
-  '#FF7575',
-  '#B28DFF',
-  '#FFC0CB',
-  '#C0C0FF',
-  '#C4FAF8',
-  '#F2D7D5'
-];
+import { generateSeries } from './utils/generateSeries';
+import { BarChart, ChartTooltip } from '@mantine/charts';
 
 type Props = {
-  counts: AssetCountsBySymbolQuery['assetCountsBySymbol'];
+  counts: TAssetCounts;
 };
 
 const AssetsTransferredPlot: FC<Props> = ({ counts }) => {
   const { t } = useTranslation();
-  const processData = () => {
-    const dataByParachain = counts.reduce((acc: any, item) => {
-      const parachainKey = item.paraId
-        ? getParachainById(item.paraId) || `ID ${item.paraId}`
-        : t('total');
-      if (!acc[parachainKey]) {
-        acc[parachainKey] = { parachain: parachainKey };
-      }
-      acc[parachainKey][item.symbol] = (acc[parachainKey][item.symbol] || 0) + item.count;
-      return acc;
-    }, {});
-
-    return Object.values(dataByParachain);
-  };
 
-  const data = processData();
+  const aggregatedData = useMemo(() => {
+    return Object.values(aggregateDataByParachain(counts, t));
+  }, [counts, t]);
 
-  const symbolColors: any = {};
-  counts.forEach((item: any, index) => {
-    if (item.symbol && !symbolColors[item.symbol]) {
-      symbolColors[item.symbol] = fixedPalette[index % fixedPalette.length];
-    }
-  });
+  const series = useMemo(() => {
+    return generateSeries(counts);
+  }, [counts]);
 
-  const series = Object.keys(symbolColors).map(symbol => ({
-    name: symbol,
-    color: symbolColors[symbol]
-  }));
+  const transformedData = useMemo(() => {
+    return aggregatedData.map(data => ({
+      parachain: data.parachain,
+      ...data.counts
+    }));
+  }, [aggregatedData]);
 
   return (
     <BarChart
-      data={data as any}
+      data={transformedData}
       series={series}
       type="stacked"
       dataKey="parachain"
       h="100%"
       w="100%"
       tooltipAnimationDuration={200}
+      tooltipProps={{
+        content: ({ label, payload }) => {
+          if (!payload || payload.length === 0) return null;
+          const sortedPayload = payload.sort((a, b) => b.value - a.value);
+          return <ChartTooltip label={label as ReactNode} payload={sortedPayload} />;
+        }
+      }}
     />
   );
 };

apps/visualizator-fe/src/components/AssetsTransferedPlot/color-pallete.ts

@@ -0,0 +1,22 @@
+export const colorPallete = [
+  '#FF6384',
+  '#36A2EB',
+  '#FFCE56',
+  '#4BC0C0',
+  '#9966FF',
+  '#FF9F40',
+  '#E7E9ED',
+  '#70D6FF',
+  '#FF70A6',
+  '#FF9770',
+  '#FFD670',
+  '#E9FF70',
+  '#8AEFFF',
+  '#B5E85E',
+  '#FF7575',
+  '#B28DFF',
+  '#FFC0CB',
+  '#C0C0FF',
+  '#C4FAF8',
+  '#F2D7D5'
+];

apps/visualizator-fe/src/components/AssetsTransferedPlot/utils/aggregateDataByParachain.ts

@@ -0,0 +1,19 @@
+import { TFunction } from 'i18next';
+import { TAssetCounts, TAggregatedData } from '../../../types/types';
+import { getParachainById } from '../../../utils/utils';
+
+export const aggregateDataByParachain = (counts: TAssetCounts, t: TFunction): TAggregatedData[] => {
+  const accumulator: Record<string, TAggregatedData> = {};
+  counts.forEach(asset => {
+    const parachainKey = asset.paraId
+      ? getParachainById(asset.paraId) || `ID ${asset.paraId}`
+      : t('total');
+    if (!accumulator[parachainKey]) {
+      accumulator[parachainKey] = { parachain: parachainKey, counts: {} };
+    }
+    const currentCount = accumulator[parachainKey].counts[asset.symbol] || 0;
+    accumulator[parachainKey].counts[asset.symbol] = currentCount + asset.count;
+  });
+
+  return Object.values(accumulator);
+};

apps/visualizator-fe/src/components/AssetsTransferedPlot/utils/generateSeries.ts

@@ -0,0 +1,17 @@
+import { BarChartSeries } from '@mantine/charts';
+import { TAssetCounts } from '../../../types/types';
+import { colorPallete } from '../color-pallete';
+
+export const generateSeries = (counts: TAssetCounts): BarChartSeries[] => {
+  const seenSymbols = new Set<string>();
+  return counts.reduce<BarChartSeries[]>((acc, asset, index) => {
+    if (!seenSymbols.has(asset.symbol)) {
+      seenSymbols.add(asset.symbol);
+      acc.push({
+        name: asset.symbol,
+        color: colorPallete[index % colorPallete.length]
+      });
+    }
+    return acc;
+  }, []);
+};

apps/visualizator-fe/src/types/types.ts

@@ -1,3 +1,5 @@
+import { AssetCountsBySymbolQuery } from '../gql/graphql';
+
 export type ChartDataItem = {
   name: string;
   value: number;
@@ -7,3 +9,10 @@ export interface CustomPoint extends Highcharts.Point {
   name: string;
   value: number;
 }
+
+export type TAssetCounts = AssetCountsBySymbolQuery['assetCountsBySymbol'];
+
+export type TAggregatedData = {
+  parachain: string;
+  counts: { [symbol: string]: number };
+};