Skip to content

Commit 64d0da0

Browse files
graphierosgraphieros
committed
Add exposed utility functions
1 parent 803bba8 commit 64d0da0

File tree

3 files changed

+223
-1
lines changed

3 files changed

+223
-1
lines changed

‎src/exposedLib.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { convertColorToHex, darkenHexColor, lightenHexColor, shiftHue } from "./lib";
2+
3+
export function lightenColor(color, strength) {
4+
const hexColor = convertColorToHex(color);
5+
return lightenHexColor(hexColor, strength);
6+
}
7+
8+
export function darkenColor(color, strength) {
9+
const hexColor = convertColorToHex(color);
10+
return darkenHexColor(hexColor, strength);
11+
}
12+
13+
export function shiftColorHue(color, strength) {
14+
const hexColor = convertColorToHex(color);
15+
return shiftHue(hexColor, strength);
16+
}
17+
18+
const exposedLib = {
19+
lightenColor,
20+
darkenColor,
21+
shiftColorHue
22+
}
23+
24+
export default exposedLib;

‎src/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { defineAsyncComponent } from "vue";
22
import getVueDataUiConfig from "./getVueDataUiConfig";
33
import getThemeConfig from "./getThemeConfig";
4-
import { getPalette, createWordCloudDatasetFromPlainText } from "./lib";
4+
import { getPalette, createWordCloudDatasetFromPlainText, abbreviate } from "./lib";
5+
import { lightenColor, darkenColor, shiftColorHue } from "./exposedLib";
56

67
export const Arrow = defineAsyncComponent(() => import("./atoms/Arrow.vue"))
78
export const VueDataUi = defineAsyncComponent(() => import("./components/vue-data-ui.vue"))
@@ -66,8 +67,12 @@ export const VueUiBullet = defineAsyncComponent(() => import('./components/vue-u
6667
export const VueUiFunnel = defineAsyncComponent(() => import('./components/vue-ui-funnel.vue'))
6768
export const VueUiHistoryPlot = defineAsyncComponent(() => import('./components/vue-ui-history-plot.vue'))
6869
export {
70+
abbreviate,
6971
createWordCloudDatasetFromPlainText,
72+
darkenColor,
7073
getPalette,
7174
getThemeConfig,
7275
getVueDataUiConfig,
76+
lightenColor,
77+
shiftColorHue,
7378
}

‎tests/exposedLib.test.js‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import {
2+
expect,
3+
test,
4+
describe,
5+
} from "vitest";
6+
7+
import {
8+
lightenColor,
9+
darkenColor,
10+
shiftColorHue
11+
} from '../src/exposedLib';
12+
13+
describe('lightenColor', () => {
14+
test('returns a lightened hex color by a given strength from a rgb source', () => {
15+
const color = 'rgb(255,0,0)';
16+
expect(lightenColor(color, 0.1)).toBe('#ff1a1aff')
17+
expect(lightenColor(color, 0.2)).toBe('#ff3333ff')
18+
expect(lightenColor(color, 0.3)).toBe('#ff4d4dff')
19+
expect(lightenColor(color, 0.4)).toBe('#ff6666ff')
20+
expect(lightenColor(color, 0.5)).toBe('#ff8080ff')
21+
expect(lightenColor(color, 0.6)).toBe('#ff9999ff')
22+
expect(lightenColor(color, 0.7)).toBe('#ffb3b3ff')
23+
expect(lightenColor(color, 0.8)).toBe('#ffccccff')
24+
expect(lightenColor(color, 0.9)).toBe('#ffe6e6ff')
25+
expect(lightenColor(color, 1)).toBe('#ffffffff')
26+
});
27+
28+
test('returns a lightened hex color by a given strength from a rgba source', () => {
29+
const color = 'rgb(255,0,0,0.5)';
30+
expect(lightenColor(color, 0.1)).toBe('#ff1a1a80')
31+
expect(lightenColor(color, 0.2)).toBe('#ff333380')
32+
expect(lightenColor(color, 0.3)).toBe('#ff4d4d80')
33+
expect(lightenColor(color, 0.4)).toBe('#ff666680')
34+
expect(lightenColor(color, 0.5)).toBe('#ff808080')
35+
expect(lightenColor(color, 0.6)).toBe('#ff999980')
36+
expect(lightenColor(color, 0.7)).toBe('#ffb3b380')
37+
expect(lightenColor(color, 0.8)).toBe('#ffcccc80')
38+
expect(lightenColor(color, 0.9)).toBe('#ffe6e680')
39+
expect(lightenColor(color, 1)).toBe('#ffffff80')
40+
});
41+
42+
test('returns a lightened hex color by a given strength from a hex source', () => {
43+
const color = '#FF0000';
44+
expect(lightenColor(color, 0.1)).toBe('#ff1a1aff')
45+
expect(lightenColor(color, 0.2)).toBe('#ff3333ff')
46+
expect(lightenColor(color, 0.3)).toBe('#ff4d4dff')
47+
expect(lightenColor(color, 0.4)).toBe('#ff6666ff')
48+
expect(lightenColor(color, 0.5)).toBe('#ff8080ff')
49+
expect(lightenColor(color, 0.6)).toBe('#ff9999ff')
50+
expect(lightenColor(color, 0.7)).toBe('#ffb3b3ff')
51+
expect(lightenColor(color, 0.8)).toBe('#ffccccff')
52+
expect(lightenColor(color, 0.9)).toBe('#ffe6e6ff')
53+
expect(lightenColor(color, 1)).toBe('#ffffffff')
54+
});
55+
56+
test('returns a lightened hex color by a given strength from a hex source with alpha channel', () => {
57+
const color = '#FF000080';
58+
expect(lightenColor(color, 0.1)).toBe('#ff1a1a80')
59+
expect(lightenColor(color, 0.2)).toBe('#ff333380')
60+
expect(lightenColor(color, 0.3)).toBe('#ff4d4d80')
61+
expect(lightenColor(color, 0.4)).toBe('#ff666680')
62+
expect(lightenColor(color, 0.5)).toBe('#ff808080')
63+
expect(lightenColor(color, 0.6)).toBe('#ff999980')
64+
expect(lightenColor(color, 0.7)).toBe('#ffb3b380')
65+
expect(lightenColor(color, 0.8)).toBe('#ffcccc80')
66+
expect(lightenColor(color, 0.9)).toBe('#ffe6e680')
67+
expect(lightenColor(color, 1)).toBe('#ffffff80')
68+
});
69+
})
70+
71+
describe('darkenColor', () => {
72+
test('returns a darkened hex color by a given strength from a rgb source', () => {
73+
const color = 'rgb(255,0,0)';
74+
expect(darkenColor(color, 0.1)).toBe('#e60000ff')
75+
expect(darkenColor(color, 0.2)).toBe('#cc0000ff')
76+
expect(darkenColor(color, 0.3)).toBe('#b30000ff')
77+
expect(darkenColor(color, 0.4)).toBe('#990000ff')
78+
expect(darkenColor(color, 0.5)).toBe('#800000ff')
79+
expect(darkenColor(color, 0.6)).toBe('#660000ff')
80+
expect(darkenColor(color, 0.7)).toBe('#4d0000ff')
81+
expect(darkenColor(color, 0.8)).toBe('#330000ff')
82+
expect(darkenColor(color, 0.9)).toBe('#1a0000ff')
83+
expect(darkenColor(color, 1)).toBe('#000000ff')
84+
});
85+
86+
test('returns a darkened hex color by a given strength from a rgba source', () => {
87+
const color = 'rgb(255,0,0,0.5)';
88+
expect(darkenColor(color, 0.1)).toBe('#e6000080')
89+
expect(darkenColor(color, 0.2)).toBe('#cc000080')
90+
expect(darkenColor(color, 0.3)).toBe('#b3000080')
91+
expect(darkenColor(color, 0.4)).toBe('#99000080')
92+
expect(darkenColor(color, 0.5)).toBe('#80000080')
93+
expect(darkenColor(color, 0.6)).toBe('#66000080')
94+
expect(darkenColor(color, 0.7)).toBe('#4d000080')
95+
expect(darkenColor(color, 0.8)).toBe('#33000080')
96+
expect(darkenColor(color, 0.9)).toBe('#1a000080')
97+
expect(darkenColor(color, 1)).toBe('#00000080')
98+
});
99+
100+
test('returns a darkened hex color by a given strength from a hex source', () => {
101+
const color = '#FF0000';
102+
expect(darkenColor(color, 0.1)).toBe('#e60000ff')
103+
expect(darkenColor(color, 0.2)).toBe('#cc0000ff')
104+
expect(darkenColor(color, 0.3)).toBe('#b30000ff')
105+
expect(darkenColor(color, 0.4)).toBe('#990000ff')
106+
expect(darkenColor(color, 0.5)).toBe('#800000ff')
107+
expect(darkenColor(color, 0.6)).toBe('#660000ff')
108+
expect(darkenColor(color, 0.7)).toBe('#4d0000ff')
109+
expect(darkenColor(color, 0.8)).toBe('#330000ff')
110+
expect(darkenColor(color, 0.9)).toBe('#1a0000ff')
111+
expect(darkenColor(color, 1)).toBe('#000000ff')
112+
});
113+
114+
test('returns a darkened hex color by a given strength from a hex source with alpha channel', () => {
115+
const color = '#FF000080';
116+
expect(darkenColor(color, 0.1)).toBe('#e6000080')
117+
expect(darkenColor(color, 0.2)).toBe('#cc000080')
118+
expect(darkenColor(color, 0.3)).toBe('#b3000080')
119+
expect(darkenColor(color, 0.4)).toBe('#99000080')
120+
expect(darkenColor(color, 0.5)).toBe('#80000080')
121+
expect(darkenColor(color, 0.6)).toBe('#66000080')
122+
expect(darkenColor(color, 0.7)).toBe('#4d000080')
123+
expect(darkenColor(color, 0.8)).toBe('#33000080')
124+
expect(darkenColor(color, 0.9)).toBe('#1a000080')
125+
expect(darkenColor(color, 1)).toBe('#00000080')
126+
});
127+
});
128+
129+
describe('shiftColorHue', () => {
130+
test('Shifts a color from a rgb source', () => {
131+
const color = 'rgb(255,0,0)';
132+
expect(shiftColorHue(color, 0.05)).toBe('#ff4d00ff')
133+
expect(shiftColorHue(color, 0.1)).toBe('#ff9900ff')
134+
expect(shiftColorHue(color, 0.15)).toBe('#ffe500ff')
135+
expect(shiftColorHue(color, 0.2)).toBe('#ccff00ff')
136+
expect(shiftColorHue(color, 0.3)).toBe('#33ff00ff')
137+
expect(shiftColorHue(color, 0.4)).toBe('#00ff66ff')
138+
expect(shiftColorHue(color, 0.5)).toBe('#00ffffff')
139+
expect(shiftColorHue(color, 0.6)).toBe('#0066ffff')
140+
expect(shiftColorHue(color, 0.7)).toBe('#3300ffff')
141+
expect(shiftColorHue(color, 0.8)).toBe('#cc00ffff')
142+
expect(shiftColorHue(color, 0.9)).toBe('#ff0099ff')
143+
expect(shiftColorHue(color, 1)).toBe('#ff0000ff')
144+
})
145+
146+
test('Shifts a color from a rgba source', () => {
147+
const color = 'rgb(255,0,0,0.5)';
148+
expect(shiftColorHue(color, 0.05)).toBe('#ff4d0080')
149+
expect(shiftColorHue(color, 0.1)).toBe('#ff990080')
150+
expect(shiftColorHue(color, 0.15)).toBe('#ffe50080')
151+
expect(shiftColorHue(color, 0.2)).toBe('#ccff0080')
152+
expect(shiftColorHue(color, 0.3)).toBe('#33ff0080')
153+
expect(shiftColorHue(color, 0.4)).toBe('#00ff6680')
154+
expect(shiftColorHue(color, 0.5)).toBe('#00ffff80')
155+
expect(shiftColorHue(color, 0.6)).toBe('#0066ff80')
156+
expect(shiftColorHue(color, 0.7)).toBe('#3300ff80')
157+
expect(shiftColorHue(color, 0.8)).toBe('#cc00ff80')
158+
expect(shiftColorHue(color, 0.9)).toBe('#ff009980')
159+
expect(shiftColorHue(color, 1)).toBe('#ff000080')
160+
})
161+
162+
test('Shifts a color from a hex source', () => {
163+
const color = '#FF0000';
164+
expect(shiftColorHue(color, 0.05)).toBe('#ff4d00ff')
165+
expect(shiftColorHue(color, 0.1)).toBe('#ff9900ff')
166+
expect(shiftColorHue(color, 0.15)).toBe('#ffe500ff')
167+
expect(shiftColorHue(color, 0.2)).toBe('#ccff00ff')
168+
expect(shiftColorHue(color, 0.3)).toBe('#33ff00ff')
169+
expect(shiftColorHue(color, 0.4)).toBe('#00ff66ff')
170+
expect(shiftColorHue(color, 0.5)).toBe('#00ffffff')
171+
expect(shiftColorHue(color, 0.6)).toBe('#0066ffff')
172+
expect(shiftColorHue(color, 0.7)).toBe('#3300ffff')
173+
expect(shiftColorHue(color, 0.8)).toBe('#cc00ffff')
174+
expect(shiftColorHue(color, 0.9)).toBe('#ff0099ff')
175+
expect(shiftColorHue(color, 1)).toBe('#ff0000ff')
176+
})
177+
178+
test('Shifts a color from a hex source with alpha channel', () => {
179+
const color = '#FF000080';
180+
expect(shiftColorHue(color, 0.05)).toBe('#ff4d0080')
181+
expect(shiftColorHue(color, 0.1)).toBe('#ff990080')
182+
expect(shiftColorHue(color, 0.15)).toBe('#ffe50080')
183+
expect(shiftColorHue(color, 0.2)).toBe('#ccff0080')
184+
expect(shiftColorHue(color, 0.3)).toBe('#33ff0080')
185+
expect(shiftColorHue(color, 0.4)).toBe('#00ff6680')
186+
expect(shiftColorHue(color, 0.5)).toBe('#00ffff80')
187+
expect(shiftColorHue(color, 0.6)).toBe('#0066ff80')
188+
expect(shiftColorHue(color, 0.7)).toBe('#3300ff80')
189+
expect(shiftColorHue(color, 0.8)).toBe('#cc00ff80')
190+
expect(shiftColorHue(color, 0.9)).toBe('#ff009980')
191+
expect(shiftColorHue(color, 1)).toBe('#ff000080')
192+
})
193+
})

0 commit comments

Comments
 (0)