watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-05 13:17:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Updated teams button.

Browse source
This commit is contained in:
Mike Cao 2024-01-31 15:09:57 -08:00
parent 992342aa72
commit 099aa7640b
5 changed files with 77 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

193
src/components/common/Avatar.tsx
View file

@ -1,153 +1,66 @@
import md5 from 'md5';
import { colord, extend } from 'colord';
import harmoniesPlugin from 'colord/plugins/harmonies';
import mixPlugin from 'colord/plugins/mix';
const pallette = [
['#ff9a9e', '#fad0c4'],
['#a18cd1', '#fbc2eb'],
['#fad0c4', '#ffd1ff'],
['#ffecd2', '#fcb69f'],
['#ff9a9e', '#fecfef'],
['#f6d365', '#fda085'],
['#fbc2eb', '#a6c1ee'],
['#fdcbf1', '#e6dee9'],
['#a1c4fd', '#c2e9fb'],
['#d4fc79', '#96e6a1'],
['#84fab0', '#8fd3f4'],
['#cfd9df', '#e2ebf0'],
['#a6c0fe', '#f68084'],
['#fccb90', '#d57eeb'],
['#e0c3fc', '#8ec5fc'],
['#f093fb', '#f5576c'],
['#fdfbfb', '#ebedee'],
['#4facfe', '#00f2fe'],
['#43e97b', '#38f9d7'],
['#fa709a', '#fee140'],
['#30cfd0', '#330867'],
['#a8edea', '#fed6e3'],
['#5ee7df', '#b490ca'],
['#d299c2', '#fef9d7'],
['#f5f7fa', '#c3cfe2'],
['#667eea', '#764ba2'],
['#fdfcfb', '#e2d1c3'],
['#89f7fe', '#66a6ff'],
['#fddb92', '#d1fdff'],
['#9890e3', '#b1f4cf'],
['#ebc0fd', '#d9ded8'],
['#96fbc4', '#f9f586'],
['#2af598', '#009efd'],
['#cd9cf2', '#f6f3ff'],
['#6a11cb', '#2575fc'],
['#37ecba', '#72afd3'],
['#ebbba7', '#cfc7f8'],
['#fff1eb', '#ace0f9'],
['#c471f5', '#fa71cd'],
['#48c6ef', '#6f86d6'],
['#feada6', '#f5efef'],
['#e6e9f0', '#eef1f5'],
['#accbee', '#e7f0fd'],
['#e9defa', '#fbfcdb'],
['#c1dfc4', '#deecdd'],
['#0ba360', '#3cba92'],
['#00c6fb', '#005bea'],
['#74ebd5', '#9face6'],
['#6a85b6', '#bac8e0'],
['#a3bded', '#6991c7'],
['#9795f0', '#fbc8d4'],
['#a7a6cb', '#8989ba'],
['#f43b47', '#453a94'],
['#0250c5', '#d43f8d'],
['#88d3ce', '#6e45e2'],
['#d9afd9', '#97d9e1'],
['#7028e4', '#e5b2ca'],
['#13547a', '#80d0c7'],
['#ff0844', '#ffb199'],
['#93a5cf', '#e4efe9'],
['#434343', '#000000'],
['#93a5cf', '#e4efe9'],
['#92fe9d', '#00c9ff'],
['#ff758c', '#ff7eb3'],
['#868f96', '#596164'],
['#c79081', '#dfa579'],
['#8baaaa', '#ae8b9c'],
['#f83600', '#f9d423'],
['#b721ff', '#21d4fd'],
['#6e45e2', '#88d3ce'],
['#d558c8', '#24d292'],
['#abecd6', '#fbed96'],
['#5f72bd', '#9b23ea'],
['#09203f', '#537895'],
['#ddd6f3', '#faaca8'],
['#dcb0ed', '#99c99c'],
['#f3e7e9', '#e3eeff'],
['#c71d6f', '#d09693'],
['#96deda', '#50c9c3'],
['#f77062', '#fe5196'],
['#a8caba', '#5d4157'],
['#29323c', '#485563'],
['#16a085', '#f4d03f'],
['#ff5858', '#f09819'],
['#2b5876', '#4e4376'],
['#00cdac', '#8ddad5'],
['#4481eb', '#04befe'],
['#dad4ec', '#f3e7e9'],
['#874da2', '#c43a30'],
['#4481eb', '#04befe'],
['#e8198b', '#c7eafd'],
['#f794a4', '#fdd6bd'],
['#64b3f4', '#c2e59c'],
['#0fd850', '#f9f047'],
['#ee9ca7', '#ffdde1'],
['#209cff', '#68e0cf'],
['#bdc2e8', '#e6dee9'],
['#e6b980', '#eacda3'],
['#1e3c72', '#2a5298'],
['#9be15d', '#00e3ae'],
['#ed6ea0', '#ec8c69'],
['#ffc3a0', '#ffafbd'],
['#cc208e', '#6713d2'],
['#b3ffab', '#12fff7'],
['#243949', '#517fa4'],
['#fc6076', '#ff9a44'],
['#dfe9f3', '#ffffff'],
['#00dbde', '#fc00ff'],
['#f9d423', '#ff4e50'],
['#50cc7f', '#f5d100'],
['#0acffe', '#495aff'],
['#616161', '#9bc5c3'],
['#df89b5', '#bfd9fe'],
['#ed6ea0', '#ec8c69'],
['#d7d2cc', '#304352'],
['#e14fad', '#f9d423'],
['#b224ef', '#7579ff'],
['#c1c161', '#d4d4b1'],
['#ec77ab', '#7873f5'],
['#007adf', '#00ecbc'],
['#20E2D7', '#F9FEA5'],
['#A8BFFF', '#884D80'],
['#B6CEE8', '#F578DC'],
['#FFFEFF', '#D7FFFE'],
['#E3FDF5', '#FFE6FA'],
['#7DE2FC', '#B9B6E5'],
['#CBBACC', '#2580B3'],
['#B7F8DB', '#50A7C2'],
['#007adf', '#00ecbc'],
extend([harmoniesPlugin, mixPlugin]);
const harmonies = [
//'analogous',
//'complementary',
'double-split-complementary',
//'rectangle',
'split-complementary',
'tetradic',
//'triadic',
];
const color = (value: string, invert: boolean = false) => {
const c = colord(value.startsWith('#') ? value : `#${value}`);
if (invert && c.isDark()) {
return c.invert();
}
return c;
};
const remix = (hash: string) => {
const a = hash.substring(0, 6);
const b = hash.substring(6, 12);
const c = hash.substring(12, 18);
const d = hash.substring(18, 24);
const e = hash.substring(24, 30);
const f = hash.substring(30, 32);
const base = [b, c, d, e]
.reduce((acc, val) => {
return acc.mix(color(val), 0.05);
}, color(a))
.saturate(0.1)
.toHex();
const harmony = pick(parseInt(f, 16), harmonies);
return color(base, true)
.harmonies(harmony)
.map(c => c.toHex());
};
const pick = (num: number, arr: any[]) => {
return arr[num % arr.length];
};
export function Avatar({ value }: { value: string }) {
const hash = md5(value);
let num = 0;
for (let i = 0; i < 8; i++) {
num += parseInt(hash.substring(i * 4, i * 4 + 4), 16);
}
const index = num % pallette.length;
const colors = remix(hash);
return (
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id={`color-${hash}`} gradientTransform={`rotate(${index % 2 ? 90 : 0})`}>
<stop offset="0%" stopColor={pallette[index][0]} />
<stop offset="100%" stopColor={pallette[index][1]} />
<linearGradient id={`color-${hash}`} gradientTransform="rotate(90)">
<stop offset="0%" stopColor={colors[1]} />
<stop offset="100%" stopColor={colors[2]} />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill={`url(#color-${hash})`} />