Feat(vis1 d)/sort histogram

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>