color schema component

grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.module.scss

@@ -0,0 +1,9 @@
+.root {
+  position: relative;
+}
+.avatar {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: -1;
+}

grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.tsx

@@ -0,0 +1,53 @@
+import cn from 'classnames/bind';
+import React from 'react';
+
+import styles from './ColorfulUserCircle.module.scss';
+
+const cx = cn.bind(styles);
+
+export default function ColorfulUserCircle({
+  colors,
+  renderAvatar,
+  renderIcon
+}: {
+  colors: string[];
+  renderAvatar: () => JSX.Element;
+  renderIcon: () => JSX.Element;
+}) {
+  if (!colors?.length) return null;
+
+  return (
+    <div className={cx('root')}>
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
+        <g fill="none" stroke-width="15" transform="translate(100,100)">
+          {renderColorPaths(colors)}
+        </g>
+      </svg>
+      <div className={cx('avatar')}>{renderAvatar()}</div>
+      <div className={cx('icon')}>{renderIcon()}</div>
+    </div>
+  );
+
+  function renderColorPaths(colors: string[]) {
+    const colorSchemeList = colors;
+    if (colors.length === 1) colorSchemeList.push(colors[0]);
+
+    const stepAngle = (2 * Math.PI) / colors.length;
+    const radius = 100;
+
+    let lastX = 0;
+    let lastY = -radius;
+
+    return colorSchemeList.map((_color, colorIndex) => {
+      const angle = (colorIndex + 1) * stepAngle;
+      const x = radius * Math.sin(angle);
+      const y = -radius * Math.cos(angle);
+      const d = `M ${lastX.toFixed(3)},${lastY.toFixed(3)} A 100,100 0 0,1 ${x.toFixed(3)},${y.toFixed(3)}`;
+
+      lastX = x;
+      lastY = y;
+
+      return <path d={d} stroke={colors[colorIndex]} />;
+    });
+  }
+}

grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx

@@ -13,6 +13,7 @@ import { User } from 'models/user/user.types';
 import { useStore } from 'state/useStore';
 
 import styles from './UsersTimezones.module.css';
+import ColorfulUserCircle from './ColorfulUserCircle';
 
 interface UsersTimezonesProps {
   userIds: Array<User['pk']>;
@@ -257,8 +258,11 @@ const AvatarGroup = (props: AvatarGroupProps) => {
               }}
               onClick={getAvatarClickHandler(user.timezone)}
             >
-              <Avatar src={user.avatar} size="large" />
-              {isOncall && <IsOncallIcon className={cx('is-oncall-icon')} />}
+              <ColorfulUserCircle
+                colors={['red']}
+                renderAvatar={() => <Avatar src={user.avatar} size="large" />}
+                renderIcon={() => (isOncall ? <IsOncallIcon className={cx('is-oncall-icon')} /> : null)}
+              ></ColorfulUserCircle>
             </div>
           </Tooltip>
         );