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.
This commit is contained in:
Akshay Joshi
2022-07-05 18:44:20 +05:30
parent 8b62cd1f04
commit 7414394ceb
2 changed files with 18 additions and 13 deletions

View File

@@ -15,20 +15,18 @@ import _ from 'lodash';
export const DATA_POINT_STYLE = ['circle', 'cross', 'crossRot', 'rect', export const DATA_POINT_STYLE = ['circle', 'cross', 'crossRot', 'rect',
'rectRounded', 'rectRot', 'star', 'triangle']; 'rectRounded', 'rectRot', 'star', 'triangle'];
export const DATA_POINT_SIZE = 3; 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 = { export const CHART_THEME_COLORS = {
'standard':['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#0099C6', 'standard':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B',
'#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#E377C2', '#7F7F7F', '#BCBD22', '#17BECF', '#3366CC', '#DC3912', '#FF9900',
'#AAAA11', '#6633CC', '#E67300', '#8B0707', '#651067', '#329262', '#109618', '#990099', '#0099C6','#DD4477', '#66AA00', '#B82E2E', '#316395'],
'#5574A6', '#3B3EAC', '#B77322', '#16D620', '#B91383', '#F4359E'], 'dark': ['#4878D0', '#EE854A', '#6ACC64', '#D65F5F', '#956CB4', '#8C613C',
'dark': ['#7371FC', '#3A86FF', '#979DAC', '#D4A276', '#2A9D8F', '#FFEE32', '#DC7EC0', '#797979', '#D5BB67', '#82C6E2', '#7371FC', '#3A86FF', '#979DAC',
'#70E000', '#FF477E', '#7DC9F1', '#52B788', '#E4E487', '#2EC4B6', '#D4A276', '#2A9D8F', '#FFEE32', '#70E000', '#FF477E', '#7DC9F1', '#52B788'],
'#DB7C74', '#8AC926', '#FF8FA3', '#B388EB', '#FB5607', '#EEA236', 'high_contrast': ['#023EFF', '#FF7C00', '#1AC938', '#E8000B', '#8B2BE2',
'#EDC531', '#D4D700', '#FFFB69', '#7FCC5C', '#50B0F0', '#00B4D8'], '#9F4800', '#F14CC1', '#A3A3A3', '#FFC400', '#00D7FF', '#FF6C49', '#00B4D8',
'high_contrast': ['#FF6C49', '#00B4D8', '#45D48A', '#FFFB69', '#B388EB', '#45D48A', '#FFFB69', '#B388EB', '#D4A276', '#2EC4B6', '#7DC9F1', '#50B0F0',
'#D4A276', '#2EC4B6', '#7DC9F1', '#50B0F0', '#52B788', '#70E000', '#52B788']
'#7FCC5C', '#8AC926', '#979DAC', '#D4D700', '#DEFF00', '#E4E487',
'#EDC531', '#EEA236', '#F8845F', '#FB4BF6', '#FF8FA3', '#FFEE32', '#FFFFFF']
}; };
const defaultOptions = { const defaultOptions = {

View File

@@ -97,12 +97,14 @@ function GenerateGraph({graphType, graphData, ...props}) {
x: { x: {
display: true, display: true,
stacked: false, stacked: false,
offset: true,
ticks: { ticks: {
display: true, display: true,
}, },
}, },
y: { y: {
stacked: false, stacked: false,
beginAtZero: true,
}, },
}, },
})); }));
@@ -123,6 +125,11 @@ function GenerateGraph({graphType, graphData, ...props}) {
usePointStyle: (showDataPoints && useDiffPointStyle) ? true : false usePointStyle: (showDataPoints && useDiffPointStyle) ? true : false
}, },
}, },
},
scales: {
x: {
offset: false
}
} }
})); }));