From 7414394ceb108243b76febe393d3d75cf554b018 Mon Sep 17 00:00:00 2001
From: Akshay Joshi <akshay.joshi@enterprisedb.com>
Date: Tue, 5 Jul 2022 18:44:20 +0530
Subject: [PATCH] Fixed the following issues in the Graph Visualiser:  1)
 Change all theme's color codes.  2) Bar graph for the first and last labels
 on the X-axis does not display all the bars.  3) Make the graphs always start
 from zero on the Y-axis.

---
 web/pgadmin/static/js/chartjs/index.jsx       | 24 +++++++++----------
 .../components/sections/GraphVisualiser.jsx   |  7 ++++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/web/pgadmin/static/js/chartjs/index.jsx b/web/pgadmin/static/js/chartjs/index.jsx
index df3854093..3f5f49798 100644
--- a/web/pgadmin/static/js/chartjs/index.jsx
+++ b/web/pgadmin/static/js/chartjs/index.jsx
@@ -15,20 +15,18 @@ import _ from 'lodash';
 export const DATA_POINT_STYLE = ['circle', 'cross', 'crossRot', 'rect',
   'rectRounded', 'rectRot', 'star', 'triangle'];
 export const DATA_POINT_SIZE = 3;
-export const CHART_THEME_COLORS_LENGTH = 24;
+export const CHART_THEME_COLORS_LENGTH = 20;
 export const CHART_THEME_COLORS = {
-  'standard':['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#0099C6',
-    '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99',
-    '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#651067', '#329262',
-    '#5574A6', '#3B3EAC', '#B77322', '#16D620', '#B91383', '#F4359E'],
-  'dark': ['#7371FC', '#3A86FF', '#979DAC', '#D4A276', '#2A9D8F', '#FFEE32',
-    '#70E000', '#FF477E', '#7DC9F1', '#52B788', '#E4E487', '#2EC4B6',
-    '#DB7C74', '#8AC926', '#FF8FA3', '#B388EB', '#FB5607', '#EEA236',
-    '#EDC531', '#D4D700', '#FFFB69', '#7FCC5C', '#50B0F0', '#00B4D8'],
-  'high_contrast': ['#FF6C49', '#00B4D8', '#45D48A', '#FFFB69', '#B388EB',
-    '#D4A276', '#2EC4B6', '#7DC9F1', '#50B0F0', '#52B788', '#70E000',
-    '#7FCC5C', '#8AC926', '#979DAC', '#D4D700', '#DEFF00', '#E4E487',
-    '#EDC531', '#EEA236', '#F8845F', '#FB4BF6', '#FF8FA3', '#FFEE32', '#FFFFFF']
+  'standard':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B',
+    '#E377C2', '#7F7F7F', '#BCBD22', '#17BECF', '#3366CC', '#DC3912', '#FF9900',
+    '#109618', '#990099', '#0099C6','#DD4477', '#66AA00', '#B82E2E', '#316395'],
+  'dark': ['#4878D0', '#EE854A', '#6ACC64', '#D65F5F', '#956CB4', '#8C613C',
+    '#DC7EC0', '#797979', '#D5BB67', '#82C6E2', '#7371FC', '#3A86FF', '#979DAC',
+    '#D4A276', '#2A9D8F', '#FFEE32', '#70E000', '#FF477E', '#7DC9F1', '#52B788'],
+  'high_contrast': ['#023EFF', '#FF7C00', '#1AC938', '#E8000B', '#8B2BE2',
+    '#9F4800', '#F14CC1', '#A3A3A3', '#FFC400', '#00D7FF', '#FF6C49', '#00B4D8',
+    '#45D48A', '#FFFB69', '#B388EB', '#D4A276', '#2EC4B6', '#7DC9F1', '#50B0F0',
+    '#52B788']
 };
 
 const defaultOptions = {
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
index ec410a0bf..c25f9d9ed 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -97,12 +97,14 @@ function GenerateGraph({graphType, graphData, ...props}) {
       x: {
         display: true,
         stacked: false,
+        offset: true,
         ticks: {
           display: true,
         },
       },
       y: {
         stacked: false,
+        beginAtZero: true,
       },
     },
   }));
@@ -123,6 +125,11 @@ function GenerateGraph({graphType, graphData, ...props}) {
           usePointStyle: (showDataPoints && useDiffPointStyle) ? true : false
         },
       },
+    },
+    scales: {
+      x: {
+        offset: false
+      }
     }
   }));