From 29956280bce072123609d621a7927eddcba60463 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Fri, 15 Nov 2024 11:08:21 +0100
Subject: [PATCH] feat: rebased

---
 .../vis1D/components/CustomChartPlotly.tsx    | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
index d1bb53326..2b9a9219d 100644
--- a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
+++ b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
@@ -80,13 +80,37 @@ export const getPlotData = (
         },
       ];
     case 'histogram':
-      return [
-        {
-          type: 'histogram',
-          x: xAxisData,
-          marker: { color: primaryColor },
-        },
-      ];
+      // !TODO: Apply for other data types?
+      if (typeof xAxisData[0] === 'string') {
+        const frequencyMap = xAxisData.reduce(
+          (acc, item) => {
+            acc[item] = (acc[item] || 0) + 1;
+            return acc;
+          },
+          {} as Record<string, number>,
+        );
+
+        const sortedEntries = Object.entries(frequencyMap).sort((a, b) => b[1] - a[1]);
+        const sortedLabels = sortedEntries.map(([label]) => label);
+        const sortedFrequencies = sortedEntries.map(([, frequency]) => frequency);
+
+        return [
+          {
+            type: 'bar',
+            x: sortedLabels,
+            y: sortedFrequencies,
+            marker: { color: primaryColor },
+          },
+        ];
+      } else {
+        return [
+          {
+            type: 'histogram',
+            x: xAxisData,
+            marker: { color: primaryColor },
+          },
+        ];
+      }
     case 'pie':
       return [
         {
@@ -206,6 +230,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
         onUnhover={handleUnhover}
       />
       {/* 
+
       {hoveredPoint && (
         <div>
           <Tooltip open={true} showArrow={true}>
@@ -216,6 +241,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
                 left: hoveredPoint.left,
                 top: hoveredPoint.top,
                 transform: 'translate(-50%, 0%)',
+                transform: 'translate(-50%, 0%)',
               }}
             >
               <div>
-- 
GitLab