From c80bceabef9e45d82ee158a8733a178b1a9098e5 Mon Sep 17 00:00:00 2001
From: bakhirev <alexey-bakhirev@yandex.ru>
Date: Tue, 20 May 2025 22:55:27 +0300
Subject: [PATCH] update

---
 .../components/PieChart/components/Legend.tsx | 25 +++++++++++++++++--
 src/ts/components/PieChart/index.module.scss  |  2 ++
 .../UiKit/styles/select.module.scss           |  5 ++++
 .../Team/components/Department/index.tsx      |  4 +--
 src/ts/pages/Team/components/Refactor.tsx     |  3 +--
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/ts/components/PieChart/components/Legend.tsx b/src/ts/components/PieChart/components/Legend.tsx
index a3e1d55..cc27b6b 100644
--- a/src/ts/components/PieChart/components/Legend.tsx
+++ b/src/ts/components/PieChart/components/Legend.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { useLayoutEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IOptions, ISubLine } from 'ts/components/LineChart/interfaces';
+import isMobile from 'ts/helpers/isMobile';
 
 import style from '../index.module.scss';
 
+function getColumnCount(parts: ISubLine[], element?: HTMLElement | null) {
+  if (!element || isMobile || parts.length <= 7) return 1;
+  // @ts-ignore
+  const width = element?.parentNode?.getBoundingClientRect()?.width || 0;
+  const countByWidth = Math.floor(width / 300) || 1;
+  const countByLength = Math.round(parts.length / 8);
+  console.log(countByWidth, countByLength);
+  return Math.min(countByLength, countByWidth);
+}
+
 interface ILegendProps {
   parts: ISubLine[];
   options: IOptions;
@@ -15,6 +26,12 @@ function Legend({
   options,
 }: ILegendProps): React.ReactElement | null {
   const { t } = useTranslation();
+  const ref = useRef() as React.MutableRefObject<HTMLDivElement>;
+  const [columnCount, setColumnCount] = useState<number>(1);
+
+  useLayoutEffect(() => {
+    setColumnCount(getColumnCount(parts, ref?.current));
+  }, [ref, ref.current]);
 
   const lines = parts.map((item: ISubLine) => {
     return (
@@ -37,7 +54,11 @@ function Legend({
   });
 
   return (
-    <div className={style.pie_chart_legend}>
+    <div
+      ref={ref}
+      className={style.pie_chart_legend}
+      style={{ columnCount }}
+    >
       {lines}
     </div>
   );
diff --git a/src/ts/components/PieChart/index.module.scss b/src/ts/components/PieChart/index.module.scss
index c7bafb1..f499649 100644
--- a/src/ts/components/PieChart/index.module.scss
+++ b/src/ts/components/PieChart/index.module.scss
@@ -67,6 +67,8 @@
 
   &_text {
     max-width: calc(100% - 40px);
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 
diff --git a/src/ts/components/UiKit/styles/select.module.scss b/src/ts/components/UiKit/styles/select.module.scss
index aebe503..51430fe 100644
--- a/src/ts/components/UiKit/styles/select.module.scss
+++ b/src/ts/components/UiKit/styles/select.module.scss
@@ -2,6 +2,11 @@
 
 .ui_kit_select {
   padding: 0 var(--space-xs) 0 var(--space-l);
+
+  &_value {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 }
 
 .ui_kit_select_with_buttons {
diff --git a/src/ts/pages/Team/components/Department/index.tsx b/src/ts/pages/Team/components/Department/index.tsx
index f7002d9..755b1fe 100644
--- a/src/ts/pages/Team/components/Department/index.tsx
+++ b/src/ts/pages/Team/components/Department/index.tsx
@@ -48,7 +48,7 @@ const Department = observer(({
         to="response"
         loader={getFakeLoader(content, mode)}
       >
-        <Departments />
+        <Departments mode={mode} />
         <Pagination />
       </DataLoader>
 
@@ -73,7 +73,7 @@ const Department = observer(({
             loader={getFakeLoader(byMonths[taskCode], mode)}
             watch={taskCode}
           >
-            <Months/>
+            <Months mode={mode} />
             <Pagination />
           </DataLoader>
           <Description text={t('page.team.department.months.description')} />
diff --git a/src/ts/pages/Team/components/Refactor.tsx b/src/ts/pages/Team/components/Refactor.tsx
index c5fc36b..7a426fb 100644
--- a/src/ts/pages/Team/components/Refactor.tsx
+++ b/src/ts/pages/Team/components/Refactor.tsx
@@ -152,8 +152,7 @@ const Refactor = observer(({
         to="response"
         loader={getFakeLoader(content, mode)}
       >
-        <View />
-        <Pagination />
+        <View mode={mode} />
       </DataLoader>
     </>
   );