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