From f12d105ce2afe08744a605d2b0856f7199f94aeb Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 23 Sep 2022 17:47:02 +0300
Subject: [PATCH] color schema component

---
 .../ColorfulUserCircle.module.scss            |  9 ++++
 .../UsersTimezones/ColorfulUserCircle.tsx     | 53 +++++++++++++++++++
 .../UsersTimezones/UsersTimezones.tsx         |  8 ++-
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.module.scss
 create mode 100644 grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.tsx

diff --git a/grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.module.scss b/grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.module.scss
new file mode 100644
index 00000000..657b81d0
--- /dev/null
+++ b/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;
+}
diff --git a/grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.tsx b/grafana-plugin/src/containers/UsersTimezones/ColorfulUserCircle.tsx
new file mode 100644
index 00000000..0fa37657
--- /dev/null
+++ b/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]} />;
+    });
+  }
+}
diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
index 497d4fd4..0678f8ca 100644
--- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
+++ b/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>
         );