IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

1) Keep the selected columns for the X and Y-axis.

Browse Source 
2) Lighten the color of the stacked line chart.
This commit is contained in:
Akshay Joshi 2022-07-06 18:58:15 +05:30
parent 59f5c0d955
commit 9cdcad7a88
2 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/pgadmin/static/js/chartjs/index.jsx
View File

@ -222,3 +222,37 @@ export function ConvertHexToRGBA(hex, opacity) {
return `rgba(${r},${g},${b},${opacity / 100})`;
}
// This function is used to Lighten/Darken color.
export function LightenDarkenColor(color, amount) {
let usePound = false;
if (color[0] == '#') {
color = color.slice(1);
usePound = true;
}
let num = parseInt(color, 16);
let r = (num >> 16) + amount;
if (r > 255) {
r = 255;
} else if (r < 0) {
r = 0;
}
let b = ((num >> 8) & 0x00FF) + amount;
if (b > 255) {
b = 255;
} else if (b < 0) {
b = 0;
}
let g = (num & 0x0000FF) + amount;
if (g > 255) {
g = 255;
} else if (g < 0) {
g = 0;
}
return (usePound?'#':'') + (g | (b << 8) | (r << 16)).toString(16);
}

25
web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
View File

@ -21,7 +21,7 @@ import SaveAltIcon from '@material-ui/icons/SaveAlt';
import { InputSelect } from '../../../../../../static/js/components/FormComponents';
import { DefaultButton, PgButtonGroup, PgIconButton} from '../../../../../../static/js/components/Buttons';
import { LineChart, BarChart, PieChart, DATA_POINT_STYLE, DATA_POINT_SIZE,
CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, ConvertHexToRGBA} from 'sources/chartjs';
CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, LightenDarkenColor} from 'sources/chartjs';
import { QueryToolEventsContext, QueryToolContext } from '../QueryToolComponent';
import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants';
import { LayoutHelper } from '../../../../../../static/js/helpers/Layout';
@ -160,7 +160,7 @@ function getLineChartData(graphType, rows, colName, colPosition, color, colorInd
return {
label: colName,
data: rows.map((r)=>r[colPosition]),
backgroundColor: graphType == 'SL' ? ConvertHexToRGBA(color, 30) : color,
backgroundColor: graphType == 'SL' ? LightenDarkenColor(color, 135) : color,
borderColor:color,
pointHitRadius: DATA_POINT_SIZE,
pointHoverRadius: 5,
@ -300,8 +300,25 @@ export function GraphVisualiser({initColumns}) {
const resetGraphVisualiser = (newColumns)=>{
setGraphData([{'datasets': []}, 0]);
setXAxis(null);
setYAxis([]);
// Check the previously selected X axis column is exist in the list of
// new columns. If exists then set that as it is.
setXAxis((prevXAxis)=>{
if (prevXAxis === '<Row Number>') {
return prevXAxis;
} else if (newColumns.map((c)=>c.name).includes(prevXAxis)) {
return prevXAxis;
}
return null;
});
// Check the previously selected Y axis columns are exist in the list of
// new columns. If exists then set all those columns as it is.
setYAxis((prevYAxis)=>{
return newColumns.map((c)=>c.name).filter((colName)=>{
return prevYAxis.includes(colName);
});
});
setColumns(newColumns);
};