From cac407b28f005ba17460e86b01800fd1802db26d Mon Sep 17 00:00:00 2001
From: Tabhi109 <tabhinav109@gmail.com>
Date: Sun, 13 Aug 2023 15:59:30 +0530
Subject: [PATCH 1/3] added new types for the names of labels & dimensions

---
 src/components/graph/AreaChart/AreaChart.tsx | 2 ++
 src/components/utils/ChartInterface.tsx      | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/graph/AreaChart/AreaChart.tsx b/src/components/graph/AreaChart/AreaChart.tsx
index 58d6339..af5f44e 100644
--- a/src/components/graph/AreaChart/AreaChart.tsx
+++ b/src/components/graph/AreaChart/AreaChart.tsx
@@ -13,6 +13,8 @@ const AreaChart: React.FC<AreaChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
diff --git a/src/components/utils/ChartInterface.tsx b/src/components/utils/ChartInterface.tsx
index fd4dcdf..4d43c28 100644
--- a/src/components/utils/ChartInterface.tsx
+++ b/src/components/utils/ChartInterface.tsx
@@ -2,6 +2,8 @@ export interface ChartInterface {
     data: any[];
     dimensions: string[];
     metrics: string[];
+    labelNames: string[];
+    dimensionsName: string[];
     className?: string;
     colors?: string[];
     margin?: Margin;

From ad6ab4f40546565d60ebb6101d32f12f0c09d3d9 Mon Sep 17 00:00:00 2001
From: Tabhi109 <tabhinav109@gmail.com>
Date: Sun, 13 Aug 2023 16:03:51 +0530
Subject: [PATCH 2/3] added ToolTip , to see the names

---
 src/components/graph/AreaChart/AreaChart.tsx | 25 +++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/graph/AreaChart/AreaChart.tsx b/src/components/graph/AreaChart/AreaChart.tsx
index af5f44e..54620fb 100644
--- a/src/components/graph/AreaChart/AreaChart.tsx
+++ b/src/components/graph/AreaChart/AreaChart.tsx
@@ -13,7 +13,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
   data,
   metrics,
   dimensions,
-  labelNames,
+  labelNames,    
   dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
@@ -46,10 +46,29 @@ const AreaChart: React.FC<AreaChartProps> = ({
             <Area type="monotone" key={index} dataKey={metric} stroke={colors[index % colors.length]} fillOpacity={1} fill={`url(#color${index})`} />
           ))}
 
+          {dimensions.map((dimension, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : entry[dimensions[0]]; // Assuming the first dimension is used as the label
+
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RAreaChart>
       </ResponsiveContainer>
     </div>
   );
 };
-
-export default AreaChart;
+export default AreaChart;
\ No newline at end of file

From 990efc43bd00df52db1bfda478e8f4b790649202 Mon Sep 17 00:00:00 2001
From: Tabhi109 <tabhinav109@gmail.com>
Date: Mon, 14 Aug 2023 20:58:50 +0530
Subject: [PATCH 3/3] added dimensionsNames & labelNames , in all the charts
 with X and Y asix

---
 src/components/graph/AreaChart/AreaChart.tsx  |  6 ++---
 src/components/graph/BarChart/BarChart.tsx    | 22 ++++++++++++++++++
 .../graph/BubbleChart/BubbleChart.tsx         | 21 +++++++++++++++++
 src/components/graph/LineChart/LineChart.tsx  | 23 +++++++++++++++++++
 .../graph/ScatterChart/ScatterChart.tsx       | 21 +++++++++++++++++
 src/components/utils/AxisFormatter.tsx        |  2 +-
 src/components/utils/ChartInterface.tsx       |  4 +++-
 7 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/src/components/graph/AreaChart/AreaChart.tsx b/src/components/graph/AreaChart/AreaChart.tsx
index 54620fb..3a5b694 100644
--- a/src/components/graph/AreaChart/AreaChart.tsx
+++ b/src/components/graph/AreaChart/AreaChart.tsx
@@ -46,7 +46,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
             <Area type="monotone" key={index} dataKey={metric} stroke={colors[index % colors.length]} fillOpacity={1} fill={`url(#color${index})`} />
           ))}
 
-          {dimensions.map((dimension, index) => (
+          {dimensionsNames.map((dimension, index) => (
             <Tooltip
               key={index}
               contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
@@ -54,10 +54,10 @@ const AreaChart: React.FC<AreaChartProps> = ({
                 const customDimensionName = dimensionsNames && dimensionsNames[index]
                   ? dimensionsNames[index]
                   : name;
-
+                  const typedEntry = entry as any;
                 const customLabelName = labelNames && labelNames[index]
                   ? labelNames[index]
-                  : entry[dimensions[0]]; // Assuming the first dimension is used as the label
+                  : typedEntry[dimensionsNames[0]];
 
                 return [customDimensionName, customLabelName, value];
               }}
diff --git a/src/components/graph/BarChart/BarChart.tsx b/src/components/graph/BarChart/BarChart.tsx
index e8a3819..9f3a655 100644
--- a/src/components/graph/BarChart/BarChart.tsx
+++ b/src/components/graph/BarChart/BarChart.tsx
@@ -8,6 +8,8 @@ const BarChart: React.FC<BarChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
@@ -35,6 +37,26 @@ const BarChart: React.FC<BarChartProps> = ({
             <Bar dataKey={metric} key={index} fill={colors[index % colors.length]} />
           ))}
 
+{dimensionsNames.map((dimension, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dimensionsNames[0]];
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
+
         </RBarChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/BubbleChart/BubbleChart.tsx b/src/components/graph/BubbleChart/BubbleChart.tsx
index 0b48572..c7aecb9 100644
--- a/src/components/graph/BubbleChart/BubbleChart.tsx
+++ b/src/components/graph/BubbleChart/BubbleChart.tsx
@@ -8,6 +8,8 @@ const BubbleChart: React.FC<BubbleChartProps> = ({
   data,
   xKey: xDimension,
   yKey: yDimension,
+  labelNames,
+  dimensionsNames,
   dataKey = "",
   className = "w-full h-80",
   colors = QualitativeColorPallete,
@@ -56,7 +58,26 @@ const BubbleChart: React.FC<BubbleChartProps> = ({
           <Tooltip content={<FrolicTooltip />} />
           <Legend iconType="circle" />
           <Scatter name={dataKey} dataKey={dataKey} fill={colors[0 % colors.length]} />
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dataKey]; // Assuming the dataKey is used as the label
 
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RScatterChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/LineChart/LineChart.tsx b/src/components/graph/LineChart/LineChart.tsx
index ad3e85c..cad854e 100644
--- a/src/components/graph/LineChart/LineChart.tsx
+++ b/src/components/graph/LineChart/LineChart.tsx
@@ -8,6 +8,8 @@ const LineChart: React.FC<LineChartProps> = ({
   data,
   metrics,
   dimensions,
+  labelNames,
+  dimensionsNames,
   className = "w-full h-80",
   colors = QualitativeColorPallete,
   margin = DefaultMargins,
@@ -32,6 +34,27 @@ const LineChart: React.FC<LineChartProps> = ({
             </>
           ))}
 
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry) => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dimensions[0]]; // Assuming the first dimension is used as the label
+
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
+
         </RLineChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/graph/ScatterChart/ScatterChart.tsx b/src/components/graph/ScatterChart/ScatterChart.tsx
index 0ff226d..f2f84b8 100644
--- a/src/components/graph/ScatterChart/ScatterChart.tsx
+++ b/src/components/graph/ScatterChart/ScatterChart.tsx
@@ -8,6 +8,8 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
   data,
   xKey: xDimension,
   yKey: yDimension,
+  labelNames,
+  dimensionsNames,
   dataKey = "",
   className = "w-full h-80",
   colors = QualitativeColorPallete,
@@ -28,7 +30,26 @@ const ScatterChart: React.FC<ScatterChartProps> = ({
           <Legend iconType="circle" />
 
           <Scatter name={dataKey} fill={colors[0 % colors.length]} />
+          {dimensionsNames.map((dimensionName, index) => (
+            <Tooltip
+              key={index}
+              contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc" }}
+              formatter={(value, name, entry)  => {
+                const customDimensionName = dimensionsNames && dimensionsNames[index]
+                  ? dimensionsNames[index]
+                  : name;
+                  const typedEntry = entry as any;
+                const customLabelName = labelNames && labelNames[index]
+                  ? labelNames[index]
+                  : typedEntry[dataKey];
 
+                return [customDimensionName, customLabelName, value];
+              }}
+              labelFormatter={() => null}
+              separator=""
+              position={{ x: 0, y: 0 }}
+            />
+          ))}
         </RScatterChart>
       </ResponsiveContainer>
     </div>
diff --git a/src/components/utils/AxisFormatter.tsx b/src/components/utils/AxisFormatter.tsx
index 9ffca75..79e3948 100644
--- a/src/components/utils/AxisFormatter.tsx
+++ b/src/components/utils/AxisFormatter.tsx
@@ -34,7 +34,7 @@ export const FrolicTooltip: React.FC<CustomTooltipProps> = ({ active, payload, l
                     </>
                 }
 
-                {payload.map((entry, index) => (
+                {payload.map((entry , index) => (
                     <div className='flex flex-row gap-1 items-center'>
                         <div className='w-1 h-4 rounded-sm' style={{ background: entry.color }}>
                         </div>
diff --git a/src/components/utils/ChartInterface.tsx b/src/components/utils/ChartInterface.tsx
index 4d43c28..b0115ce 100644
--- a/src/components/utils/ChartInterface.tsx
+++ b/src/components/utils/ChartInterface.tsx
@@ -3,7 +3,7 @@ export interface ChartInterface {
     dimensions: string[];
     metrics: string[];
     labelNames: string[];
-    dimensionsName: string[];
+    dimensionsNames: string[];
     className?: string;
     colors?: string[];
     margin?: Margin;
@@ -13,6 +13,8 @@ export interface ScatterChartInterface {
     data: any[];
     xKey: string;
     yKey: string;
+    labelNames: string[];
+    dimensionsNames: string[];
     dataKey?: string;
     className?: string;
     colors?: string[];