From 906d64e5144d8afe4b3864d6041bc9cb2c8de61b Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Tue, 9 Jul 2024 22:48:22 +0530
Subject: [PATCH] Fixed issues and uI details in charts.

---
 .../BreakdownOfLoadedResources.tsx                   |  6 +++---
 .../ResourceLoadedVsVisuallyComplete.tsx             | 11 ++++++-----
 .../DashboardList/NewDashModal/Examples/Trend.tsx    |  2 +-
 .../Dashboard/components/WidgetChart/WidgetChart.tsx |  1 +
 .../components/Funnels/FunnelWidget/FunnelBar.tsx    | 12 ++++++------
 .../components/Funnels/FunnelWidget/FunnelWidget.tsx |  2 +-
 frontend/app/styles/general.css                      |  6 ++++++
 frontend/app/styles/recharts.css                     |  5 +++++
 8 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
index 3a86cfe84..696c8ff9c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@@ -42,9 +42,9 @@ function BreakdownOfLoadedResources(props: Props) {
                 />
                 <Legend />
                 <Tooltip {...Styles.tooltip} />
-                <Bar minPointSize={1} name="CSS" dataKey="stylesheet" stackId="a" fill={Styles.colors[0]} />
-                <Bar name="Images" dataKey="img" stackId="a" fill={Styles.colors[2]} />
-                <Bar name="Scripts" dataKey="script" stackId="a" fill={Styles.colors[3]} />
+                <Bar minPointSize={1} name="CSS" dataKey="stylesheet" stackId="a" fill={Styles.compareColors[0]} />
+                <Bar name="Images" dataKey="img" stackId="a" fill={Styles.compareColors[1]} />
+                <Bar name="Scripts" dataKey="script" stackId="a" fill={Styles.compareColors[2]} />
               </BarChart>
           </ResponsiveContainer>
         </NoContent>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
index 15374577b..a7530b07c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@@ -55,16 +55,17 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
                   tickFormatter={val => Styles.tickFormatter(val)}
                 />
                 <Tooltip {...Styles.tooltip} />
-                <Legend />
-                <Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.colors[2]} />
-                <Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.colors[3]} />
-                <Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={Styles.colors[4]} />
+                <Legend  />
+                <Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.compareColors[0]} />
+                <Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.compareColors[1]} />
+                <Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={Styles.compareColors[2]} />
                 <Line
                   yAxisId="left"
                   name="Visually Complete"
                   type="monotone"
                   dataKey="avgTimeToRender"
-                  stroke={Styles.lineColor }
+                  stroke={Styles.strokeColor }
+                  
                   dot={false}
                   unit=" ms"
                   strokeWidth={2}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
index 4502bfa00..cd351cb36 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
@@ -26,7 +26,7 @@ function ExampleTrend(props: Props) {
             {/*<AreaChartCard data={props.data} label={props.data?.label}/>*/}
             <CustomMetricLineChart
                 data={props.data}
-                colors={Styles.customMetricColors}
+                colors={Styles.compareColors}
                 params={{
                     density: 21,
                 }}
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 7edefd0a3..6912fe605 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -177,6 +177,7 @@ function WidgetChart(props: Props) {
                         data={data}
                         // isTemplate={isTemplate}
                         isEdit={!isSaved && !isTemplate}
+                        
                     />
                 );
             }
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 704586cf5..3930493cc 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -22,10 +22,10 @@ function FunnelBar(props: Props) {
       <div
         style={{
           height: '25px',
-          width: '100%',
+          width: '99.8%',
           backgroundColor: '#f5f5f5',
           position: 'relative',
-          borderRadius: '3px',
+          borderRadius: '.5rem',
           overflow: 'hidden'
         }}
       >
@@ -37,7 +37,7 @@ function FunnelBar(props: Props) {
             top: 0,
             left: 0,
             bottom: 0,
-            backgroundColor: Styles.colors[0]
+            backgroundColor: Styles.compareColors[1]
           }}
         >
           <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
@@ -88,10 +88,10 @@ export function UxTFunnelBar(props: Props) {
       <div
         style={{
           height: '25px',
-          width: '100%',
+          width: '99.8%',
           backgroundColor: '#f5f5f5',
           position: 'relative',
-          borderRadius: '3px',
+          borderRadius: '.5rem',
           overflow: 'hidden'
         }}
       >
@@ -103,7 +103,7 @@ export function UxTFunnelBar(props: Props) {
             top: 0,
             left: 0,
             bottom: 0,
-            backgroundColor: '#00b5ad'
+            backgroundColor: '#6272FF'
           }}
         >
           <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 77467e59e..9d24c9a28 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -102,7 +102,7 @@ function FunnelWidget(props: Props) {
                 <div className="flex items-center">
                     <span className="text-base font-medium mr-2">Total conversion</span>
                     <Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
-                        <Tag bordered={false} color="cyan" className='text-lg font-medium rounded-lg'>
+                        <Tag bordered={false} color="green" className='text-lg font-medium rounded-lg'>
                         {funnel.totalConversions}
                         </Tag>
                     </Tooltip>
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 361268450..492568607 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -356,6 +356,8 @@ p {
   white-space: nowrap !important;
 }
 
+
+
 .stripes {
   background: repeating-linear-gradient(
     135deg,
@@ -425,3 +427,7 @@ p {
 .eg-card input[name="search"] {
   visibility: hidden !important;
 }
+
+.ant-segmented-group{
+  gap:0.25rem;
+}
diff --git a/frontend/app/styles/recharts.css b/frontend/app/styles/recharts.css
index 57d18f38d..b5a235272 100644
--- a/frontend/app/styles/recharts.css
+++ b/frontend/app/styles/recharts.css
@@ -1,7 +1,12 @@
 .recharts-legend-item {
   padding: 0 10px;
+  margin-right: 0;
 }
 
 .recharts-legend-item-text {
   user-select: none;
+}
+
+.recharts-legend-wrapper{ 
+  width: 388px !important;
 }
\ No newline at end of file