IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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)'); 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'); 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', () => { it('throw on invalid colors', () => {
expect(() => { expect(() => {
alpha('white', 0.4); 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); 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[0] === '#') {
if (color.length === 9) { if (color.length === 9) {
color = color.substring(0, 7); 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 ( return (

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

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