diff --git a/src/exposedLib.js b/src/exposedLib.js new file mode 100644 index 00000000..d4c51c2b --- /dev/null +++ b/src/exposedLib.js @@ -0,0 +1,24 @@ +import { convertColorToHex, darkenHexColor, lightenHexColor, shiftHue } from "./lib"; + +export function lightenColor(color, strength) { + const hexColor = convertColorToHex(color); + return lightenHexColor(hexColor, strength); +} + +export function darkenColor(color, strength) { + const hexColor = convertColorToHex(color); + return darkenHexColor(hexColor, strength); +} + +export function shiftColorHue(color, strength) { + const hexColor = convertColorToHex(color); + return shiftHue(hexColor, strength); +} + +const exposedLib = { + lightenColor, + darkenColor, + shiftColorHue +} + +export default exposedLib; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 2fa7135d..81190542 100755 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ import { defineAsyncComponent } from "vue"; import getVueDataUiConfig from "./getVueDataUiConfig"; import getThemeConfig from "./getThemeConfig"; -import { getPalette, createWordCloudDatasetFromPlainText } from "./lib"; +import { getPalette, createWordCloudDatasetFromPlainText, abbreviate } from "./lib"; +import { lightenColor, darkenColor, shiftColorHue } from "./exposedLib"; export const Arrow = defineAsyncComponent(() => import("./atoms/Arrow.vue")) export const VueDataUi = defineAsyncComponent(() => import("./components/vue-data-ui.vue")) @@ -66,8 +67,12 @@ export const VueUiBullet = defineAsyncComponent(() => import('./components/vue-u export const VueUiFunnel = defineAsyncComponent(() => import('./components/vue-ui-funnel.vue')) export const VueUiHistoryPlot = defineAsyncComponent(() => import('./components/vue-ui-history-plot.vue')) export { + abbreviate, createWordCloudDatasetFromPlainText, + darkenColor, getPalette, getThemeConfig, getVueDataUiConfig, + lightenColor, + shiftColorHue, } \ No newline at end of file diff --git a/tests/exposedLib.test.js b/tests/exposedLib.test.js new file mode 100644 index 00000000..c4de493d --- /dev/null +++ b/tests/exposedLib.test.js @@ -0,0 +1,193 @@ +import { + expect, + test, + describe, +} from "vitest"; + +import { + lightenColor, + darkenColor, + shiftColorHue +} from '../src/exposedLib'; + +describe('lightenColor', () => { + test('returns a lightened hex color by a given strength from a rgb source', () => { + const color = 'rgb(255,0,0)'; + expect(lightenColor(color, 0.1)).toBe('#ff1a1aff') + expect(lightenColor(color, 0.2)).toBe('#ff3333ff') + expect(lightenColor(color, 0.3)).toBe('#ff4d4dff') + expect(lightenColor(color, 0.4)).toBe('#ff6666ff') + expect(lightenColor(color, 0.5)).toBe('#ff8080ff') + expect(lightenColor(color, 0.6)).toBe('#ff9999ff') + expect(lightenColor(color, 0.7)).toBe('#ffb3b3ff') + expect(lightenColor(color, 0.8)).toBe('#ffccccff') + expect(lightenColor(color, 0.9)).toBe('#ffe6e6ff') + expect(lightenColor(color, 1)).toBe('#ffffffff') + }); + + test('returns a lightened hex color by a given strength from a rgba source', () => { + const color = 'rgb(255,0,0,0.5)'; + expect(lightenColor(color, 0.1)).toBe('#ff1a1a80') + expect(lightenColor(color, 0.2)).toBe('#ff333380') + expect(lightenColor(color, 0.3)).toBe('#ff4d4d80') + expect(lightenColor(color, 0.4)).toBe('#ff666680') + expect(lightenColor(color, 0.5)).toBe('#ff808080') + expect(lightenColor(color, 0.6)).toBe('#ff999980') + expect(lightenColor(color, 0.7)).toBe('#ffb3b380') + expect(lightenColor(color, 0.8)).toBe('#ffcccc80') + expect(lightenColor(color, 0.9)).toBe('#ffe6e680') + expect(lightenColor(color, 1)).toBe('#ffffff80') + }); + + test('returns a lightened hex color by a given strength from a hex source', () => { + const color = '#FF0000'; + expect(lightenColor(color, 0.1)).toBe('#ff1a1aff') + expect(lightenColor(color, 0.2)).toBe('#ff3333ff') + expect(lightenColor(color, 0.3)).toBe('#ff4d4dff') + expect(lightenColor(color, 0.4)).toBe('#ff6666ff') + expect(lightenColor(color, 0.5)).toBe('#ff8080ff') + expect(lightenColor(color, 0.6)).toBe('#ff9999ff') + expect(lightenColor(color, 0.7)).toBe('#ffb3b3ff') + expect(lightenColor(color, 0.8)).toBe('#ffccccff') + expect(lightenColor(color, 0.9)).toBe('#ffe6e6ff') + expect(lightenColor(color, 1)).toBe('#ffffffff') + }); + + test('returns a lightened hex color by a given strength from a hex source with alpha channel', () => { + const color = '#FF000080'; + expect(lightenColor(color, 0.1)).toBe('#ff1a1a80') + expect(lightenColor(color, 0.2)).toBe('#ff333380') + expect(lightenColor(color, 0.3)).toBe('#ff4d4d80') + expect(lightenColor(color, 0.4)).toBe('#ff666680') + expect(lightenColor(color, 0.5)).toBe('#ff808080') + expect(lightenColor(color, 0.6)).toBe('#ff999980') + expect(lightenColor(color, 0.7)).toBe('#ffb3b380') + expect(lightenColor(color, 0.8)).toBe('#ffcccc80') + expect(lightenColor(color, 0.9)).toBe('#ffe6e680') + expect(lightenColor(color, 1)).toBe('#ffffff80') + }); +}) + +describe('darkenColor', () => { + test('returns a darkened hex color by a given strength from a rgb source', () => { + const color = 'rgb(255,0,0)'; + expect(darkenColor(color, 0.1)).toBe('#e60000ff') + expect(darkenColor(color, 0.2)).toBe('#cc0000ff') + expect(darkenColor(color, 0.3)).toBe('#b30000ff') + expect(darkenColor(color, 0.4)).toBe('#990000ff') + expect(darkenColor(color, 0.5)).toBe('#800000ff') + expect(darkenColor(color, 0.6)).toBe('#660000ff') + expect(darkenColor(color, 0.7)).toBe('#4d0000ff') + expect(darkenColor(color, 0.8)).toBe('#330000ff') + expect(darkenColor(color, 0.9)).toBe('#1a0000ff') + expect(darkenColor(color, 1)).toBe('#000000ff') + }); + + test('returns a darkened hex color by a given strength from a rgba source', () => { + const color = 'rgb(255,0,0,0.5)'; + expect(darkenColor(color, 0.1)).toBe('#e6000080') + expect(darkenColor(color, 0.2)).toBe('#cc000080') + expect(darkenColor(color, 0.3)).toBe('#b3000080') + expect(darkenColor(color, 0.4)).toBe('#99000080') + expect(darkenColor(color, 0.5)).toBe('#80000080') + expect(darkenColor(color, 0.6)).toBe('#66000080') + expect(darkenColor(color, 0.7)).toBe('#4d000080') + expect(darkenColor(color, 0.8)).toBe('#33000080') + expect(darkenColor(color, 0.9)).toBe('#1a000080') + expect(darkenColor(color, 1)).toBe('#00000080') + }); + + test('returns a darkened hex color by a given strength from a hex source', () => { + const color = '#FF0000'; + expect(darkenColor(color, 0.1)).toBe('#e60000ff') + expect(darkenColor(color, 0.2)).toBe('#cc0000ff') + expect(darkenColor(color, 0.3)).toBe('#b30000ff') + expect(darkenColor(color, 0.4)).toBe('#990000ff') + expect(darkenColor(color, 0.5)).toBe('#800000ff') + expect(darkenColor(color, 0.6)).toBe('#660000ff') + expect(darkenColor(color, 0.7)).toBe('#4d0000ff') + expect(darkenColor(color, 0.8)).toBe('#330000ff') + expect(darkenColor(color, 0.9)).toBe('#1a0000ff') + expect(darkenColor(color, 1)).toBe('#000000ff') + }); + + test('returns a darkened hex color by a given strength from a hex source with alpha channel', () => { + const color = '#FF000080'; + expect(darkenColor(color, 0.1)).toBe('#e6000080') + expect(darkenColor(color, 0.2)).toBe('#cc000080') + expect(darkenColor(color, 0.3)).toBe('#b3000080') + expect(darkenColor(color, 0.4)).toBe('#99000080') + expect(darkenColor(color, 0.5)).toBe('#80000080') + expect(darkenColor(color, 0.6)).toBe('#66000080') + expect(darkenColor(color, 0.7)).toBe('#4d000080') + expect(darkenColor(color, 0.8)).toBe('#33000080') + expect(darkenColor(color, 0.9)).toBe('#1a000080') + expect(darkenColor(color, 1)).toBe('#00000080') + }); +}); + +describe('shiftColorHue', () => { + test('Shifts a color from a rgb source', () => { + const color = 'rgb(255,0,0)'; + expect(shiftColorHue(color, 0.05)).toBe('#ff4d00ff') + expect(shiftColorHue(color, 0.1)).toBe('#ff9900ff') + expect(shiftColorHue(color, 0.15)).toBe('#ffe500ff') + expect(shiftColorHue(color, 0.2)).toBe('#ccff00ff') + expect(shiftColorHue(color, 0.3)).toBe('#33ff00ff') + expect(shiftColorHue(color, 0.4)).toBe('#00ff66ff') + expect(shiftColorHue(color, 0.5)).toBe('#00ffffff') + expect(shiftColorHue(color, 0.6)).toBe('#0066ffff') + expect(shiftColorHue(color, 0.7)).toBe('#3300ffff') + expect(shiftColorHue(color, 0.8)).toBe('#cc00ffff') + expect(shiftColorHue(color, 0.9)).toBe('#ff0099ff') + expect(shiftColorHue(color, 1)).toBe('#ff0000ff') + }) + + test('Shifts a color from a rgba source', () => { + const color = 'rgb(255,0,0,0.5)'; + expect(shiftColorHue(color, 0.05)).toBe('#ff4d0080') + expect(shiftColorHue(color, 0.1)).toBe('#ff990080') + expect(shiftColorHue(color, 0.15)).toBe('#ffe50080') + expect(shiftColorHue(color, 0.2)).toBe('#ccff0080') + expect(shiftColorHue(color, 0.3)).toBe('#33ff0080') + expect(shiftColorHue(color, 0.4)).toBe('#00ff6680') + expect(shiftColorHue(color, 0.5)).toBe('#00ffff80') + expect(shiftColorHue(color, 0.6)).toBe('#0066ff80') + expect(shiftColorHue(color, 0.7)).toBe('#3300ff80') + expect(shiftColorHue(color, 0.8)).toBe('#cc00ff80') + expect(shiftColorHue(color, 0.9)).toBe('#ff009980') + expect(shiftColorHue(color, 1)).toBe('#ff000080') + }) + + test('Shifts a color from a hex source', () => { + const color = '#FF0000'; + expect(shiftColorHue(color, 0.05)).toBe('#ff4d00ff') + expect(shiftColorHue(color, 0.1)).toBe('#ff9900ff') + expect(shiftColorHue(color, 0.15)).toBe('#ffe500ff') + expect(shiftColorHue(color, 0.2)).toBe('#ccff00ff') + expect(shiftColorHue(color, 0.3)).toBe('#33ff00ff') + expect(shiftColorHue(color, 0.4)).toBe('#00ff66ff') + expect(shiftColorHue(color, 0.5)).toBe('#00ffffff') + expect(shiftColorHue(color, 0.6)).toBe('#0066ffff') + expect(shiftColorHue(color, 0.7)).toBe('#3300ffff') + expect(shiftColorHue(color, 0.8)).toBe('#cc00ffff') + expect(shiftColorHue(color, 0.9)).toBe('#ff0099ff') + expect(shiftColorHue(color, 1)).toBe('#ff0000ff') + }) + + test('Shifts a color from a hex source with alpha channel', () => { + const color = '#FF000080'; + expect(shiftColorHue(color, 0.05)).toBe('#ff4d0080') + expect(shiftColorHue(color, 0.1)).toBe('#ff990080') + expect(shiftColorHue(color, 0.15)).toBe('#ffe50080') + expect(shiftColorHue(color, 0.2)).toBe('#ccff0080') + expect(shiftColorHue(color, 0.3)).toBe('#33ff0080') + expect(shiftColorHue(color, 0.4)).toBe('#00ff6680') + expect(shiftColorHue(color, 0.5)).toBe('#00ffff80') + expect(shiftColorHue(color, 0.6)).toBe('#0066ff80') + expect(shiftColorHue(color, 0.7)).toBe('#3300ff80') + expect(shiftColorHue(color, 0.8)).toBe('#cc00ff80') + expect(shiftColorHue(color, 0.9)).toBe('#ff009980') + expect(shiftColorHue(color, 1)).toBe('#ff000080') + }) +}) \ No newline at end of file