heatmap legend and title fix

Author: devhelpr

src/components/componentMapper.tsx

@@ -259,25 +259,19 @@ export default function ComponentMapper({
                                 className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]"
                             >
                                 <div className="col-[1]">
-                                    <h2 className="pb-2">
-                                        {t('heatmap.realdata')}
-                                    </h2>
                                     <HeatMapChart
                                         columns={realColumns}
                                         key={index}
                                         data={convertedData}
-                                        title={resultItem.title ?? ''}
+                                        title={t('heatmap.realdata')}
                                     />
                                 </div>
                                 <div className="col-[1] lg:col-[2]">
-                                    <h2 className="pb-2">
-                                        {t('heatmap.syntheticdata')}
-                                    </h2>
                                     <HeatMapChart
                                         columns={synthticColumns}
                                         key={index}
                                         data={syntheticData}
-                                        title={resultItem.title ?? ''}
+                                        title={t('heatmap.syntheticdata')}
                                     />
                                 </div>
                             </div>

src/components/graphs/HeatMap.tsx

@@ -184,12 +184,15 @@ const HeatMapChart = ({ title, data, columns }: HeatMapChartProps) => {
 
     // Render the chart container and SVG element with horizontal scroll if needed
     return (
-        <div
-            ref={containerRef}
-            style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
-            className={`min-h-[${height}px] flex-col`}
-        >
-            <svg ref={svgRef}></svg>
+        <div className="flex flex-col gap-4">
+            <h3 className="text-center font-semibold text-base">{title}</h3>
+            <div
+                ref={containerRef}
+                style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
+                className={`min-h-[${height}px] flex-col`}
+            >
+                <svg ref={svgRef}></svg>
+            </div>
         </div>
     );
 };