diff --git a/frontend/package.json b/frontend/package.json index ef6502b..9402fd4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@microsoft/microsoft-graph-client": "^3.0.5", "@vercel/analytics": "^1.0.1", "accept-language": "^3.0.18", + "chroma.ts": "^1.0.10", "gapi-script": "^1.2.0", "hue-map": "^1.0.0", "i18next": "^22.5.1", diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index 1e7e8fe..4f48799 100644 --- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -115,7 +115,7 @@ const AvailabilityEditor = ({ backgroundColor: ( (!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized)) || (mode.current === 'add' && selecting.includes(cell.serialized)) - ) ? palette[1] : palette[0], + ) ? palette[1].string : palette[0].string, ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' }, ...cell.minute === 30 && { borderTopStyle: 'dotted' }, }} diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss index ba1d875..5cc0973 100644 --- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss +++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss @@ -113,8 +113,8 @@ 45deg, transparent, transparent 4.3px, - rgba(0,0,0,.5) 4.3px, - rgba(0,0,0,.5) 8.6px + var(--highlight-color, rgba(0,0,0,.5)) 4.3px, + var(--highlight-color, rgba(0,0,0,.5)) 8.6px ); } diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index 009d20a..5b2bfc0 100644 --- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -79,6 +79,7 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps if (tempFocus) { peopleHere = peopleHere.filter(p => p === tempFocus) } + const color = palette[tempFocus && peopleHere.length ? max : peopleHere.length] return
0 && styles.highlight, )} style={{ - backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? palette[tempFocus && peopleHere.length ? max : peopleHere.length] : 'transparent', + backgroundColor: (focusCount === undefined || focusCount === peopleHere.length) ? color.string : 'transparent', + '--highlight-color': color.highlight, ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' }, ...cell.minute === 30 && { borderTopStyle: 'dotted' }, - }} + } as React.CSSProperties} aria-label={peopleHere.join(', ')} onMouseEnter={e => { const cellBox = e.currentTarget.getBoundingClientRect() diff --git a/frontend/src/components/Legend/Legend.module.scss b/frontend/src/components/Legend/Legend.module.scss index 2f7085c..884f302 100644 --- a/frontend/src/components/Legend/Legend.module.scss +++ b/frontend/src/components/Legend/Legend.module.scss @@ -39,7 +39,7 @@ 45deg, transparent, transparent 4.5px, - rgba(0,0,0,.5) 4.5px, - rgba(0,0,0,.5) 9px + var(--highlight-color, rgba(0,0,0,.5)) 4.5px, + var(--highlight-color, rgba(0,0,0,.5)) 9px ); } diff --git a/frontend/src/components/Legend/Legend.tsx b/frontend/src/components/Legend/Legend.tsx index 6063413..e423bc6 100644 --- a/frontend/src/components/Legend/Legend.tsx +++ b/frontend/src/components/Legend/Legend.tsx @@ -8,7 +8,7 @@ interface LegendProps { min: number max: number total: number - palette: string[] + palette: { string: string, highlight: string }[] onSegmentFocus: (segment: number | undefined) => void } @@ -29,7 +29,7 @@ const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => { {[...Array(max + 1 - min).keys()].map(i => i + min).map(i =>
0 ? styles.highlight : undefined} onMouseOver={() => onSegmentFocus(i)} /> diff --git a/frontend/src/hooks/usePalette.ts b/frontend/src/hooks/usePalette.ts index ee344d5..154c5d1 100644 --- a/frontend/src/hooks/usePalette.ts +++ b/frontend/src/hooks/usePalette.ts @@ -1,4 +1,5 @@ import { useMemo } from 'react' +import { color } from 'chroma.ts' import { createPalette } from 'hue-map' import { useStore } from '/src/stores' @@ -7,8 +8,16 @@ import useSettingsStore from '/src/stores/settingsStore' export const usePalette = (steps: number) => { const colormap = useStore(useSettingsStore, state => state.colormap) - return useMemo(() => createPalette({ - map: (colormap === undefined || colormap === 'crabfit') ? [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]] : colormap, - steps, - }).format(), [steps, colormap]) + return useMemo(() => + createPalette({ + map: (colormap === undefined || colormap === 'crabfit') ? [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]] : colormap, + steps, + }) + .format('rgba') + .map(([r, g, b, a]) => color(r, g, b, a / 255)) + .map(c => ({ + string: c.hex('rgba'), + highlight: c.luminance() > .5 ? c.darker().hex('rgba') : c.brighter().hex('rgba'), + })), + [steps, colormap]) } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 186963e..fbfeabd 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -643,6 +643,11 @@ chalk@^4.0.0: optionalDependencies: fsevents "~2.3.2" +chroma.ts@^1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/chroma.ts/-/chroma.ts-1.0.10.tgz#2b965d8f2c2eee44d25072902e5787fe259d4565" + integrity sha512-0FOQiB6LaiOwoyaxP+a4d3sCIOSf7YvBKj3TfeQM4ZBb2yskRxe4FlT2P4YNpHz7kIB5rXsfmpyniyrYRRyVHw== + client-only@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"