mirror of
https://github.com/chenasraf/DefinitelyTyped.git
synced 2026-05-18 01:49:01 +00:00
[chroma.js]Add missing method and property. (#60844)
* [chroma.js]Add missing method. Add hcl() in ChromaStatic interface. Add clipped() and _rgb._unclipped in Color interface. According to vis4.net/chromajs/ * Format file using Prettier . Co-authored-by: charlie <charliezm88@gmail.com>
This commit is contained in:
CharlieZhuo
@@ -1,12 +1,12 @@
|
||||
import { Color } from "chroma-js";
|
||||
import chroma = require("chroma-js");
|
||||
import { Color } from 'chroma-js';
|
||||
import chroma = require('chroma-js');
|
||||
|
||||
function test_chroma() {
|
||||
chroma('hotpink');
|
||||
chroma('#ff3399');
|
||||
chroma('F39');
|
||||
chroma(chroma('#ff3399'));
|
||||
chroma.hex("#fff");
|
||||
chroma.hex('#fff');
|
||||
chroma.valid(0);
|
||||
chroma.valid('');
|
||||
chroma.valid({});
|
||||
@@ -20,6 +20,7 @@ function test_chroma() {
|
||||
chroma([255, 51, 153]);
|
||||
chroma(330, 1, 0.6, 'hsl');
|
||||
chroma.hsl(330, 1, 0.6);
|
||||
chroma.hcl(50, 40, 40);
|
||||
chroma.lch(80, 40, 130);
|
||||
chroma(80, 40, 130, 'lch');
|
||||
chroma.cmyk(0.2, 0.8, 0, 0);
|
||||
@@ -45,9 +46,9 @@ function test_chroma() {
|
||||
chroma.contrast('pink', 'hotpink');
|
||||
chroma.contrast('pink', 'purple');
|
||||
chroma.brewer.OrRd;
|
||||
const data = [3.0, 3.5, 3.6, 3.8, 3.8, 4.1, 4.3, 4.4,
|
||||
4.6, 4.9, 5.2, 5.3, 5.4, 5.7, 5.8, 5.9,
|
||||
6.2, 6.5, 6.8, 7.2, 9];
|
||||
const data = [
|
||||
3.0, 3.5, 3.6, 3.8, 3.8, 4.1, 4.3, 4.4, 4.6, 4.9, 5.2, 5.3, 5.4, 5.7, 5.8, 5.9, 6.2, 6.5, 6.8, 7.2, 9,
|
||||
];
|
||||
chroma.limits(data, 'e', 5);
|
||||
chroma.limits(data, 'q', 5);
|
||||
chroma.limits(data, 'k', 5);
|
||||
@@ -118,6 +119,8 @@ function test_color() {
|
||||
chroma('#cbdbff').temperature();
|
||||
chroma('#b3ccff').temperature();
|
||||
chroma('33cc00').gl();
|
||||
chroma(50, 40, 20, 'hcl').clipped();
|
||||
chroma(50, 40, 20, 'hcl')._rgb._unclipped;
|
||||
|
||||
chroma('teal').alpha(0.5).css();
|
||||
chroma('teal').css('hsl');
|
||||
@@ -146,8 +149,7 @@ function test_scale() {
|
||||
// set domain to [0,100]
|
||||
chroma.scale(['yellow', '008ae5']).domain([0, 100]);
|
||||
// default domain is [0,1]
|
||||
chroma.scale(['yellow', 'lightgreen', '008ae5'])
|
||||
.domain([0, 0.25, 1]);
|
||||
chroma.scale(['yellow', 'lightgreen', '008ae5']).domain([0, 0.25, 1]);
|
||||
chroma.scale(['yellow', '008ae5']);
|
||||
chroma.scale(['yellow', 'navy']);
|
||||
chroma.scale(['yellow', 'navy']).mode('lab');
|
||||
@@ -160,26 +162,20 @@ function test_scale() {
|
||||
chroma.brewer.OrRd;
|
||||
chroma.scale(['yellow', '008ae5']).mode('lch');
|
||||
|
||||
chroma.scale(['yellow', '008ae5'])
|
||||
.mode('lch')
|
||||
.correctLightness();
|
||||
chroma.scale(['yellow', '008ae5']).mode('lch').correctLightness();
|
||||
// linear interpolation
|
||||
chroma.scale(['yellow', 'red', 'black']);
|
||||
// bezier interpolation
|
||||
chroma.bezier(['yellow', 'red', 'black']);
|
||||
// convert bezier interpolator into chroma.scale
|
||||
chroma.bezier(['yellow', 'red', 'black'])
|
||||
.scale().colors(5);
|
||||
chroma.bezier(['yellow', 'red', 'black']).scale().colors(5);
|
||||
// use the default helix...
|
||||
chroma.cubehelix();
|
||||
// or customize it
|
||||
chroma.cubehelix()
|
||||
.start(200)
|
||||
.rotations(-0.5)
|
||||
.gamma(0.8)
|
||||
.lightness([0.3, 0.8]);
|
||||
chroma.cubehelix().start(200).rotations(-0.5).gamma(0.8).lightness([0.3, 0.8]);
|
||||
|
||||
chroma.cubehelix()
|
||||
chroma
|
||||
.cubehelix()
|
||||
.start(200)
|
||||
.rotations(-0.35)
|
||||
.gamma(0.7)
|
||||
@@ -197,7 +193,8 @@ function test_scale() {
|
||||
chroma.scale('OrRd').classes(5);
|
||||
chroma.scale('OrRd').classes(8);
|
||||
|
||||
chroma.cubehelix()
|
||||
chroma
|
||||
.cubehelix()
|
||||
.start(200)
|
||||
.rotations(-0.35)
|
||||
.gamma(0.7)
|
||||
|
||||
43
types/chroma-js/index.d.ts
vendored
43
types/chroma-js/index.d.ts
vendored
@@ -1,6 +1,6 @@
|
||||
// Type definitions for Chroma.js 2.1
|
||||
// Project: https://github.com/gka/chroma.js
|
||||
// Definitions by: Sebastian Brückner <https://github.com/invliD>, Marcin Pacholec <https://github.com/mpacholec>
|
||||
// Definitions by: Sebastian Brückner <https://github.com/invliD>, Marcin Pacholec <https://github.com/mpacholec>, Charlie Zhuo <https://github.com/CharlieZhuo>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
/**
|
||||
@@ -20,7 +20,7 @@ declare namespace chroma {
|
||||
gl: [number, number, number, number];
|
||||
}
|
||||
|
||||
type InterpolationMode = "rgb" | "hsl" | "hsv" | "hsi" | "lab" | "lch" | "hcl" | "lrgb";
|
||||
type InterpolationMode = 'rgb' | 'hsl' | 'hsv' | 'hsi' | 'lab' | 'lch' | 'hcl' | 'lrgb';
|
||||
|
||||
interface ChromaStatic {
|
||||
/**
|
||||
@@ -71,6 +71,11 @@ declare namespace chroma {
|
||||
|
||||
lch(l: number, c: number, h: number): Color;
|
||||
|
||||
/**
|
||||
* Same meaning as lch(), but in different order.
|
||||
*/
|
||||
hcl(h: number, c: number, l: number): Color;
|
||||
|
||||
rgb(r: number, g: number, b: number): Color;
|
||||
|
||||
/**
|
||||
@@ -108,8 +113,11 @@ declare namespace chroma {
|
||||
/**
|
||||
* Blends two colors using RGB channel-wise blend functions.
|
||||
*/
|
||||
blend(color1: string | Color, color2: string | Color,
|
||||
blendMode: 'multiply' | 'darken' | 'lighten' | 'screen' | 'overlay' | 'burn' | 'dodge'): Color;
|
||||
blend(
|
||||
color1: string | Color,
|
||||
color2: string | Color,
|
||||
blendMode: 'multiply' | 'darken' | 'lighten' | 'screen' | 'overlay' | 'burn' | 'dodge',
|
||||
): Color;
|
||||
|
||||
/**
|
||||
* Returns a random color.
|
||||
@@ -199,7 +207,7 @@ declare namespace chroma {
|
||||
* colors in Lab space. The input range of the function is [0..1].
|
||||
* You can convert it to a scale instance by calling <code>chroma.bezier(...).scale()</code>
|
||||
*/
|
||||
bezier(colors: string[]): { (t: number): Color, scale(): Scale};
|
||||
bezier(colors: string[]): { (t: number): Color; scale(): Scale };
|
||||
|
||||
scale(name: string | Color): Scale;
|
||||
|
||||
@@ -408,6 +416,26 @@ declare namespace chroma {
|
||||
* chroma('33cc00').gl() === [0.2,0.8,0,1]
|
||||
*/
|
||||
gl: () => ColorSpaces['gl'];
|
||||
|
||||
/**
|
||||
* Test if a color has been clipped or not.
|
||||
* Colors generated from CIELab color space may have their RGB
|
||||
* channels clipped to the range of [0..255].
|
||||
* Colors outside that range may exist in nature but are not
|
||||
* displayable on RGB monitors (such as ultraviolet).
|
||||
*
|
||||
* @example
|
||||
* chroma.hcl(50, 40, 20).clipped() === true
|
||||
*/
|
||||
clipped: () => boolean;
|
||||
|
||||
/**
|
||||
* The unclipped RGB components.
|
||||
*
|
||||
* @example
|
||||
* chroma.hcl(50, 40, 100)._rgb._unclipped === [322.65,235.24,196.7,1]
|
||||
*/
|
||||
_rgb: { _unclipped: ColorSpaces['rgb'] };
|
||||
}
|
||||
|
||||
interface Scale<OutType = Color> {
|
||||
@@ -431,7 +459,10 @@ declare namespace chroma {
|
||||
* You can call scale.colors(n) to quickly grab `c` equi-distant colors from a color scale. If called with no
|
||||
* arguments, scale.colors returns the original array of colors used to create the scale.
|
||||
*/
|
||||
colors(c: number | undefined, format: undefined | null | 'alpha' | 'darken' | 'brighten' | 'saturate' | 'desaturate'): Color[];
|
||||
colors(
|
||||
c: number | undefined,
|
||||
format: undefined | null | 'alpha' | 'darken' | 'brighten' | 'saturate' | 'desaturate',
|
||||
): Color[];
|
||||
colors(c: number | undefined, format: 'luminance' | 'temperature'): number[];
|
||||
colors<K extends keyof ColorSpaces>(c: number | undefined, format: K): Array<ColorSpaces[K]>;
|
||||
colors(c: number | undefined, format?: 'hex' | 'name'): string[];
|
||||
|
||||
Reference in New Issue
Block a user