From 6083fc556ad7feead397b72ce2e58f7ae91f88a0 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 20 Aug 2022 23:45:17 +1000 Subject: [PATCH 1/4] Use hue-map package for custom colour palettes --- crabfit-frontend/package.json | 1 + crabfit-frontend/public/i18n/en/common.json | 3 +++ .../AvailabilityViewer/AvailabilityViewer.jsx | 17 +++++++++++++---- .../AvailabilityViewer.styles.js | 6 +++--- .../src/components/Legend/Legend.jsx | 12 +++++++++++- .../src/components/Legend/Legend.styles.js | 8 ++++---- .../src/components/Settings/Settings.jsx | 19 +++++++++++++++++++ crabfit-frontend/src/stores/settingsStore.js | 2 ++ crabfit-frontend/yarn.lock | 5 +++++ 9 files changed, 61 insertions(+), 12 deletions(-) diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json index ce47a8c..f0dfc94 100644 --- a/crabfit-frontend/package.json +++ b/crabfit-frontend/package.json @@ -14,6 +14,7 @@ "dayjs": "^1.11.5", "gapi-script": "^1.2.0", "goober": "^2.1.10", + "hue-map": "^0.1.0", "i18next": "^21.9.0", "i18next-browser-languagedetector": "^6.1.5", "i18next-http-backend": "^1.4.1", diff --git a/crabfit-frontend/public/i18n/en/common.json b/crabfit-frontend/public/i18n/en/common.json index 3081de2..f065d01 100644 --- a/crabfit-frontend/public/i18n/en/common.json +++ b/crabfit-frontend/public/i18n/en/common.json @@ -53,6 +53,9 @@ }, "language": { "label": "Language" + }, + "colormap": { + "label": "Heatmap colors" } }, "video": { diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx index 25008f4..c863501 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx @@ -4,6 +4,7 @@ import dayjs from 'dayjs' import localeData from 'dayjs/plugin/localeData' import customParseFormat from 'dayjs/plugin/customParseFormat' import relativeTime from 'dayjs/plugin/relativeTime' +import createPalette from 'hue-map' import { useSettingsStore, useLocaleUpdateStore } from '/src/stores' @@ -50,6 +51,7 @@ const AvailabilityViewer = ({ const [tooltip, setTooltip] = useState(null) const timeFormat = useSettingsStore(state => state.timeFormat) const highlight = useSettingsStore(state => state.highlight) + const colormap = useSettingsStore(state => state.colormap) const [filteredPeople, setFilteredPeople] = useState([]) const [touched, setTouched] = useState(false) const [tempFocus, setTempFocus] = useState(null) @@ -65,6 +67,13 @@ const AvailabilityViewer = ({ setTouched(people.length <= 1) }, [people]) + const [palette, setPalette] = useState([]) + + useEffect(() => setPalette(createPalette({ + map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap, + steps: tempFocus !== null ? 2 : Math.min(max, filteredPeople.length)+1, + })), [tempFocus, filteredPeople, max, colormap]) + const heatmap = useMemo(() => ( @@ -104,7 +113,8 @@ const AvailabilityViewer = ({ key={i} $time={time} className="time" - $peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length} + $peopleCount={focusCount !== null && focusCount !== peopleHere.length ? null : peopleHere.length} + $palette={palette} aria-label={peopleHere.join(', ')} $maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)} $minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)} @@ -129,9 +139,7 @@ const AvailabilityViewer = ({ })} - {last && dates.length !== i+1 && ( - - )} + {last && dates.length !== i+1 && } ) })} @@ -151,6 +159,7 @@ const AvailabilityViewer = ({ timeFormat, timeLabels, times, + palette, ]) return ( diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js index 59f99f3..ec0c444 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js @@ -86,15 +86,15 @@ export const Time = styled('div')` border-top: 2px dotted var(--text); `} - background-color: ${props => `#F79E00${Math.round((props.$peopleCount/props.$maxPeople)*255).toString(16)}`}; + background-color: ${props => props.$palette[props.$peopleCount] ?? 'transparent'}; ${props => props.$highlight && props.$peopleCount === props.$maxPeople && props.$peopleCount > 0 && ` background-image: repeating-linear-gradient( 45deg, transparent, transparent 4.3px, - var(--shadow) 4.3px, - var(--shadow) 8.6px + rgba(0,0,0,.5) 4.3px, + rgba(0,0,0,.5) 8.6px ); `} diff --git a/crabfit-frontend/src/components/Legend/Legend.jsx b/crabfit-frontend/src/components/Legend/Legend.jsx index 53f5632..c124455 100644 --- a/crabfit-frontend/src/components/Legend/Legend.jsx +++ b/crabfit-frontend/src/components/Legend/Legend.jsx @@ -1,4 +1,6 @@ +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' +import createPalette from 'hue-map' import { useSettingsStore } from '/src/stores' @@ -17,8 +19,16 @@ const Legend = ({ }) => { const { t } = useTranslation('event') const highlight = useSettingsStore(state => state.highlight) + const colormap = useSettingsStore(state => state.colormap) const setHighlight = useSettingsStore(state => state.setHighlight) + const [palette, setPalette] = useState([]) + + useEffect(() => setPalette(createPalette({ + map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap, + steps: max+1-min, + })), [min, max, colormap]) + return ( @@ -31,7 +41,7 @@ const Legend = ({ {[...Array(max+1-min).keys()].map(i => i+min).map(i => 0} onMouseOver={() => onSegmentFocus(i)} /> diff --git a/crabfit-frontend/src/components/Legend/Legend.styles.js b/crabfit-frontend/src/components/Legend/Legend.styles.js index c52040e..e739d92 100644 --- a/crabfit-frontend/src/components/Legend/Legend.styles.js +++ b/crabfit-frontend/src/components/Legend/Legend.styles.js @@ -43,10 +43,10 @@ export const Grade = styled('div')` ${props => props.$highlight && ` background-image: repeating-linear-gradient( 45deg, - var(--primary), - var(--primary) 4.5px, - var(--shadow) 4.5px, - var(--shadow) 9px + transparent, + transparent 4.5px, + rgba(0,0,0,.5) 4.5px, + rgba(0,0,0,.5) 9px ); `} ` diff --git a/crabfit-frontend/src/components/Settings/Settings.jsx b/crabfit-frontend/src/components/Settings/Settings.jsx index 0370524..1592eea 100644 --- a/crabfit-frontend/src/components/Settings/Settings.jsx +++ b/crabfit-frontend/src/components/Settings/Settings.jsx @@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom' import { useTranslation } from 'react-i18next' import dayjs from 'dayjs' import { Settings as SettingsIcon } from 'lucide-react' +import { maps } from 'hue-map' import { ToggleField, SelectField } from '/src/components' @@ -138,6 +139,24 @@ const Settings = () => { onChange={value => store.setHighlight(value === 'On')} /> + [ + palette, + palette.split('-') + .map(w => w[0].toLocaleUpperCase() + w.substring(1).toLocaleLowerCase()) + .join(' '), + ])), + }} + small + value={store.colormap} + onChange={event => store.setColormap(event.target.value)} + /> + set({ weekStart }), setTimeFormat: timeFormat => set({ timeFormat }), setTheme: theme => set({ theme }), setHighlight: highlight => set({ highlight }), + setColormap: colormap => set({ colormap }), }), { name: 'crabfit-settings' }, )) diff --git a/crabfit-frontend/yarn.lock b/crabfit-frontend/yarn.lock index ecea15c..79d871f 100644 --- a/crabfit-frontend/yarn.lock +++ b/crabfit-frontend/yarn.lock @@ -2185,6 +2185,11 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" +hue-map@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/hue-map/-/hue-map-0.1.0.tgz#75aad75552d37cd748955cbafce7d83e3ff289ab" + integrity sha512-WC3Uzgymj+M55zdU6kOzbFEItp/3OGeVvzvc2O2DC8/zV8I51T+YVoWQEwfnPgR08GlZTO9fUEr90E5gdMtlgA== + i18next-browser-languagedetector@^6.1.5: version "6.1.5" resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.5.tgz#ed8c9319a8d246995d8ec8fccb5bf5f4248d0fb1" From cc998f1bc981348e50d2405529e3ee6a9b6e0f4a Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 20 Aug 2022 23:47:10 +1000 Subject: [PATCH 2/4] Move colour dropdown under theme setting --- .../src/components/Settings/Settings.jsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/crabfit-frontend/src/components/Settings/Settings.jsx b/crabfit-frontend/src/components/Settings/Settings.jsx index 1592eea..20689a3 100644 --- a/crabfit-frontend/src/components/Settings/Settings.jsx +++ b/crabfit-frontend/src/components/Settings/Settings.jsx @@ -126,19 +126,6 @@ const Settings = () => { onChange={value => store.setTheme(value)} /> - store.setHighlight(value === 'On')} - /> - { onChange={event => store.setColormap(event.target.value)} /> + store.setHighlight(value === 'On')} + /> + Date: Sat, 20 Aug 2022 23:48:51 +1000 Subject: [PATCH 3/4] Add translation for classic colour palette --- crabfit-frontend/public/i18n/en/common.json | 3 ++- crabfit-frontend/src/components/Settings/Settings.jsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/crabfit-frontend/public/i18n/en/common.json b/crabfit-frontend/public/i18n/en/common.json index f065d01..0972bf2 100644 --- a/crabfit-frontend/public/i18n/en/common.json +++ b/crabfit-frontend/public/i18n/en/common.json @@ -55,7 +55,8 @@ "label": "Language" }, "colormap": { - "label": "Heatmap colors" + "label": "Heatmap colors", + "classic": "Crab Fit (classic)" } }, "video": { diff --git a/crabfit-frontend/src/components/Settings/Settings.jsx b/crabfit-frontend/src/components/Settings/Settings.jsx index 20689a3..0117777 100644 --- a/crabfit-frontend/src/components/Settings/Settings.jsx +++ b/crabfit-frontend/src/components/Settings/Settings.jsx @@ -131,7 +131,7 @@ const Settings = () => { name="colormap" id="colormap" options={{ - 'crabfit': 'Crab Fit (classic)', + 'crabfit': t('options.colormap.classic'), ...Object.fromEntries(Object.keys(maps).map(palette => [ palette, palette.split('-') From 9ce4d6c07c03858360e7f4280b15f9d092b1f609 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 21 Aug 2022 15:57:08 +1000 Subject: [PATCH 4/4] Update hue-map library --- crabfit-frontend/package.json | 2 +- crabfit-frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json index f0dfc94..6e59f62 100644 --- a/crabfit-frontend/package.json +++ b/crabfit-frontend/package.json @@ -14,7 +14,7 @@ "dayjs": "^1.11.5", "gapi-script": "^1.2.0", "goober": "^2.1.10", - "hue-map": "^0.1.0", + "hue-map": "^0.1.1", "i18next": "^21.9.0", "i18next-browser-languagedetector": "^6.1.5", "i18next-http-backend": "^1.4.1", diff --git a/crabfit-frontend/yarn.lock b/crabfit-frontend/yarn.lock index 79d871f..86b20f5 100644 --- a/crabfit-frontend/yarn.lock +++ b/crabfit-frontend/yarn.lock @@ -2185,10 +2185,10 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" -hue-map@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/hue-map/-/hue-map-0.1.0.tgz#75aad75552d37cd748955cbafce7d83e3ff289ab" - integrity sha512-WC3Uzgymj+M55zdU6kOzbFEItp/3OGeVvzvc2O2DC8/zV8I51T+YVoWQEwfnPgR08GlZTO9fUEr90E5gdMtlgA== +hue-map@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/hue-map/-/hue-map-0.1.1.tgz#d6b199f4121df56aaf1901222323545f0607a31d" + integrity sha512-aH3Maa39vHN+yTkWXdLcTN8M+ftGOX6NvGuMObl2puWxwoUZhm3gLlKA6SdpqJphF1RzQo0ntsm0Psg0uc7ouQ== i18next-browser-languagedetector@^6.1.5: version "6.1.5"