-
Notifications
You must be signed in to change notification settings - Fork 115
/
color_library_wrappers.ts
124 lines (102 loc) · 3.44 KB
/
color_library_wrappers.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import chroma from 'chroma-js';
import { rgb as d3Rgb, RGBColor as D3RGBColor } from 'd3-color';
import { Color } from '../utils/common';
type RGB = number;
type A = number;
/** @internal */
export type RgbTuple = [RGB, RGB, RGB, RGB?];
/** @public */
export type RgbObject = { r: RGB; g: RGB; b: RGB; opacity: A };
/** @internal */
export type RgbaTuple = [RGB, RGB, RGB, RGB];
/** @internal */
export const defaultColor: RgbObject = { r: 255, g: 0, b: 0, opacity: 1 };
/** @internal */
export const transparentColor: RgbObject = { r: 0, g: 0, b: 0, opacity: 0 };
/** @internal */
export const defaultD3Color: D3RGBColor = d3Rgb(defaultColor.r, defaultColor.g, defaultColor.b, defaultColor.opacity);
/** @internal */
export type OpacityFn = (opacity: number, seriesOpacity?: number) => number;
/** @internal */
export function stringToRGB(cssColorSpecifier?: string, opacity?: number | OpacityFn): RgbObject {
if (cssColorSpecifier === 'transparent') {
return transparentColor;
}
const color = getColor(cssColorSpecifier);
if (opacity === undefined) {
return color;
}
const opacityOverride = typeof opacity === 'number' ? opacity : opacity(color.opacity);
if (isNaN(opacityOverride)) {
return color;
}
return {
...color,
opacity: opacityOverride,
};
}
/**
* Returns color as RgbObject or default fallback.
*
* Handles issue in d3-color for hsla and rgba colors with alpha value of `0`
*
* @param cssColorSpecifier
*/
function getColor(cssColorSpecifier: string = ''): RgbObject {
const endRegEx = /,\s*0+(\.0*)?\s*\)$/;
// TODO: make this check more robust
const color: D3RGBColor =
/^(rgba|hsla)\(/i.test(cssColorSpecifier) && endRegEx.test(cssColorSpecifier)
? {
...d3Rgb(cssColorSpecifier.replace(endRegEx, ',1)')),
opacity: 0,
}
: d3Rgb(cssColorSpecifier);
return validateColor(color) ?? defaultColor;
}
/** @internal */
export function validateColor(color: D3RGBColor): D3RGBColor | null {
const { r, g, b, opacity } = color;
if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(opacity)) {
return null;
}
return color;
}
/** @internal */
export function argsToRGB(r: number, g: number, b: number, opacity: number): D3RGBColor {
return validateColor(d3Rgb(r, g, b, opacity)) ?? defaultD3Color;
}
/** @internal */
export function argsToRGBString(r: number, g: number, b: number, opacity: number): string {
// d3.rgb returns an Rgb instance, which has a specialized `toString` method
return argsToRGB(r, g, b, opacity).toString();
}
/** @internal */
export function RGBtoString(rgb: RgbObject): string {
const { r, g, b, opacity } = rgb;
return argsToRGBString(r, g, b, opacity);
}
/** @internal */
export function RGBATupleToString(rgba: RgbTuple): string {
if (rgba.length === 4) {
return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
}
return `rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`;
}
/** convert rgb to hex
* @internal */
export function RGBAToHex(rgba: Color) {
return chroma(rgba).hex();
}
/** convert hex to rgb
* @internal */
export function HexToRGB(hex: string) {
return chroma(hex).rgba();
}