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

Color utils: optimize colorManipulator/alpha() for common cases (#34948)

Browse Source
This commit is contained in:
Leon Sorokin 2021-06-01 12:52:58 -05:00 committed by GitHub
parent 4d574bb8aa
commit 878474a808
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -260,7 +260,7 @@ describe('utils/colorManipulator', () => {
describe('alpha', () => { describe('alpha', () => {
it('converts an rgb color to an rgba color with the value provided', () => { it('converts an rgb color to an rgba color with the value provided', () => {
expect(alpha('rgb(1, 2, 3)', 0.4)).toEqual('rgba(1, 2, 3, 0.4)'); expect(alpha('rgb(1, 2, 3)', 0.4)).toEqual('rgb(1, 2, 3, 0.4)');
}); });
it('updates an CSS4 color with the alpha value provided', () => { it('updates an CSS4 color with the alpha value provided', () => {
@ -272,7 +272,7 @@ describe('utils/colorManipulator', () => {
}); });
it('converts an hsl color to an hsla color with the value provided', () => { it('converts an hsl color to an hsla color with the value provided', () => {
expect(alpha('hsl(0, 100%, 50%)', 0.1)).toEqual('hsla(0, 100%, 50%, 0.1)'); expect(alpha('hsl(0, 100%, 50%)', 0.1)).toEqual('hsl(0, 100%, 50%, 0.1)');
}); });
it('updates an hsla color with the alpha value provided', () => { it('updates an hsla color with the alpha value provided', () => {

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

@ -240,12 +240,29 @@ export function emphasize(color: string, coefficient = 0.15) {
* @beta * @beta
*/ */
export function alpha(color: string, value: number) { export function alpha(color: string, value: number) {
const parts = decomposeColor(color);
value = clamp(value); value = clamp(value);
if (parts.type === 'rgb' || parts.type === 'hsl') { // hex 6, hex 8 (w/alpha)
parts.type += 'a'; if (color[0] === '#') {
if (color.length === 9) {
color = color.substring(0, 7);
}
return color + Math.round(value * 255).toString(16);
} }
// rgb(, hsl(
else if (color[3] === '(') {
// rgb() and hsl() do not require the "a" suffix to accept alpha values in modern browsers:
// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()#accepts_alpha_value
return color.replace(')', `, ${value})`);
}
// rgba(, hsla(
else if (color[4] === '(') {
return color.substring(0, color.lastIndexOf(',')) + `, ${value})`;
}
const parts = decomposeColor(color);
if (parts.type === 'color') { if (parts.type === 'color') {
parts.values[3] = `/${value}`; parts.values[3] = `/${value}`;
} else { } else {

4
public/app/plugins/panel/state-timeline/timeline.ts
View File

@ -5,7 +5,7 @@ import { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute
import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types'; import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types';
import { GrafanaTheme2, TimeRange } from '@grafana/data'; import { GrafanaTheme2, TimeRange } from '@grafana/data';
import { BarValueVisibility } from '@grafana/ui'; import { BarValueVisibility } from '@grafana/ui';
import tinycolor from 'tinycolor2'; import { alpha } from '@grafana/data/src/themes/colorManipulator';
const { round, min, ceil } = Math; const { round, min, ceil } = Math;
@ -523,5 +523,5 @@ export function getConfig(opts: TimelineCoreOptions) {
function getFillColor(fieldConfig: TimelineFieldConfig, color: string) { function getFillColor(fieldConfig: TimelineFieldConfig, color: string) {
const opacityPercent = (fieldConfig.fillOpacity ?? 100) / 100; const opacityPercent = (fieldConfig.fillOpacity ?? 100) / 100;
return tinycolor(color).setAlpha(opacityPercent).toString(); return alpha(color, opacityPercent);
} }