update

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>
   );

src/ts/components/PieChart/index.module.scss

@@ -67,6 +67,8 @@
 
   &_text {
     max-width: calc(100% - 40px);
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 

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 {

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')} />

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>
     </>
   );