IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 16:45:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Colors: fix by-value/hex3 & Single color schemes in Gradient mode (#38656)

Browse Source
This commit is contained in:
Leon Sorokin 2021-08-27 15:06:28 -05:00 committed by GitHub
parent 4e2516d12a
commit 3c72f1678f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-data/src/themes/colorManipulator.test.ts
View File

@ -279,10 +279,18 @@ describe('utils/colorManipulator', () => {
expect(alpha('hsla(0, 100%, 50%, 0.2)', 0.5)).toEqual('hsla(0, 100%, 50%, 0.5)');
});
it('converts an rgb hex color with the alpha value provided', () => {
it('converts an #rrggbb hex color with the alpha value provided', () => {
expect(alpha('#FFFFFF', 0)).toEqual('#FFFFFF00');
});
it('converts an #rgb color with the alpha value provided', () => {
expect(alpha('#fff', 0.5)).toEqual('#ffffff80');
});
it('converts an #rgba color with the alpha value provided', () => {
expect(alpha('#ffff', 0.5)).toEqual('#ffffff80');
});
it('throw on invalid colors', () => {
expect(() => {
alpha('white', 0.4);

8
packages/grafana-data/src/themes/colorManipulator.ts
View File

@ -261,10 +261,16 @@ export function alpha(color: string, value: number) {
value = clamp(value);
// hex 6, hex 8 (w/alpha)
// hex 3, hex 4 (w/alpha), hex 6, hex 8 (w/alpha)
if (color[0] === '#') {
if (color.length === 9) {
color = color.substring(0, 7);
} else if (color.length <= 5) {
let c = '#';
for (let i = 1; i < 4; i++) {
c += color[i] + color[i];
}
color = c;
}
return (

8
packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
View File

@ -3,6 +3,7 @@ import {
DataFrameFieldIndex,
FALLBACK_COLOR,
FieldColorMode,
FieldColorModeId,
GrafanaTheme2,
ThresholdsConfig,
} from '@grafana/data';
@ -139,7 +140,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
private getLineColor(): Series.Stroke {
const { lineColor, gradientMode, colorMode, thresholds, theme } = this.props;
if (gradientMode === GraphGradientMode.Scheme) {
if (gradientMode === GraphGradientMode.Scheme && colorMode?.id !== FieldColorModeId.Fixed) {
return getScaleGradientFn(1, theme, colorMode, thresholds);
}
@ -162,7 +163,10 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
case GraphGradientMode.Hue:
return getHueGradientFn((fillColor ?? lineColor)!, opacityPercent, theme);
case GraphGradientMode.Scheme:
return getScaleGradientFn(opacityPercent, theme, colorMode, thresholds);
if (colorMode?.id !== FieldColorModeId.Fixed) {
return getScaleGradientFn(opacityPercent, theme, colorMode, thresholds);
}
// intentional fall-through to handle Scheme with Fixed color
default:
if (opacityPercent > 0) {
return colorManipulator.alpha(lineColor ?? '', opacityPercent);