update

package.json

@@ -27,7 +27,7 @@
     "build-rename-css": "mv build/static/css/main.*.css build/static/index.css && rm -rf build/static/css",
     "build-rename-html": "rm build/index.html && mv build/local.html build/index.html",
     "dev": "set PORT=3006 && react-app-rewired start",
-    "build": "react-scripts build && npm run build-rename",
+    "build": "react-scripts build",
     "build-local": "set REACT_APP_TYPE=local && react-scripts build && npm run build-rename && npm run build-rename-html",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/ts/components/HoursChart/components/Columns.tsx

@@ -22,7 +22,7 @@ function Columns({ week, day, max }: IColumnsProps): React.ReactElement | null {
     return (
       <div
         key={hour}
-        className={style.hour}
+        className={style.hours_chart_hour}
         style={{
           color,
           backgroundColor: `rgba(${backgroundColor}, ${opacity})`,

src/ts/components/HoursChart/components/Header.tsx

@@ -8,19 +8,19 @@ function Header(): React.ReactElement | null {
     if (!hour) return (
       <div
         key={hour}
-        className={style.day_name}
+        className={style.hours_chart_day_name}
       ></div>
     );
 
     return (
       <div
         key={hour}
-        className={style.day_time}
+        className={style.hours_chart_day_time}
       >
-        <span className={style.day_time_hh}>
+        <span className={style.hours_chart_day_time_hh}>
           {get2Number(hour - 1)}
         </span>
-        <span className={style.day_time_mm}>
+        <span className={style.hours_chart_day_time_mm}>
           :00
         </span>
       </div>

src/ts/components/HoursChart/components/Legend.tsx

@@ -6,24 +6,24 @@ import style from '../styles/legend.module.scss';
 function Legend(): React.ReactElement | null {
   const { t } = useTranslation();
   return (
-    <div className={style.legend}>
-      <div className={style.legend_item}>
-        <div className={style.legend_work}></div>
-        <div className={style.legend_title}>
+    <div className={style.hours_chart_legend}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_work}></div>
+        <div className={style.hours_chart_legend_title}>
           {t('uiKit.hoursChart.work')}
         </div>
       </div>
-      <div className={style.legend_item}>
-        <div className={style.legend_weekend}></div>
-        <div className={style.legend_title}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_weekend}></div>
+        <div className={style.hours_chart_legend_title}>
           {t('uiKit.hoursChart.weekend')}
         </div>
       </div>
-      <div className={style.legend_item}>
-        <div className={style.legend_count}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_count}>
           42
         </div>
-        <div className={style.legend_title}>
+        <div className={style.hours_chart_legend_title}>
           {t('uiKit.hoursChart.days')}
         </div>
       </div>

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

@@ -1,37 +1,38 @@
 @import 'src/styles/variables';
 
-.user {
+.hours_chart {
+  &_user {
     display: block;
     box-sizing: border-box;
     vertical-align: top;
     margin: 24px 0 0 0;
 
     --commits-by-hours-size: calc((100vw - 400px) / 25);
-}
+  }
 
-.title {
+  &_title {
     display: inline-block;
     width: 200px;
     text-align: left;
     white-space: nowrap;
-}
+  }
 
-.data {
+  &_data {
     display: inline-block;
     width: 100%;
     vertical-align: top;
-}
+  }
 
-.day {
+  &_day {
     display: block;
     width: 100%;
     vertical-align: top;
     white-space: nowrap;
-}
+  }
 
-.day_time,
-.day_name,
-.hour {
+  &_day_time,
+  &_day_name,
+  &_hour {
     font-size: var(--font-xs);
     display: inline-block;
     width: var(--commits-by-hours-size);
@@ -44,47 +45,50 @@
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-print-color-adjust: exact;
-}
+  }
 
-.day_time,
-.day_name {
+  &_day_time,
+  &_day_name {
     box-sizing: border-box;
     border-bottom: 1px solid grey;
-}
+  }
 
-.day_name {
+  &_day_name {
     font-size: var(--font-xs);
     border-right: 1px solid grey;
-}
+  }
 
-.hour {
+  &_hour {
     color: white;
     border-radius: 6px;
     border: 1px solid #FFFFFF;
     background-color: var(--color-first);
+  }
 }
 
 @media (max-width: 1300px) {
-  .day_time_mm {
+  .hours_chart_day_time_mm {
     display: none;
   }
 }
 
 @media (max-width: 1000px) {
-  .user {
+  .hours_chart_user {
     --commits-by-hours-size: calc((100vw - 156px) / 25);
   }
 }
 
 @media (max-width: 900px) {
-  .day_time,
-  .day_name,
-  .hour {
+  .hours_chart {
+    &_day_time,
+    &_day_name,
+    &_hour {
       font-size: var(--font-xxs);
     }
 
-  .hour {
+    &_hour {
       border-radius: 0;
       border: none;
     }
+  }
 }

src/ts/components/HoursChart/index.tsx

@@ -21,9 +21,9 @@ function HoursChart({
       return (
         <div
           key={day}
-          className={style.day}
+          className={style.hours_chart_day}
         >
-          <div className={style.day_name}>
+          <div className={style.hours_chart_day_name}>
             {getDayName(day, 'short')}
           </div>
           <Columns
@@ -36,9 +36,9 @@ function HoursChart({
     });
 
   return (
-    <div className={style.user}>
-      <div className={style.data}>
-        <div className={style.day}>
+    <div className={style.hours_chart_user}>
+      <div className={style.hours_chart_data}>
+        <div className={style.hours_chart_day}>
           <Header />
         </div>
         {items}

src/ts/components/HoursChart/styles/legend.module.scss

@@ -1,6 +1,6 @@
 @import 'src/styles/variables';
 
-.legend {
+.hours_chart_legend {
   display: block;
   box-sizing: border-box;
   vertical-align: top;

src/ts/components/Recommendations/styles/index.module.scss

@@ -3,7 +3,7 @@
 .recommendations_container {
   position: relative;
   display: block;
-  margin: 0;
+  margin: 0 auto 12px 0;
   padding: 0;
 
   text-align: left;

src/ts/components/Table/components/Header.tsx

@@ -42,10 +42,10 @@ function Header({
           {formattedTitle}
         </span>
         {column.title && column.sortDirection === -1 && (
-          <div className={headerStyle.sort_down} />
+          <div className={headerStyle.table_sort_down} />
         )}
         {column.title && column.sortDirection === 1 && (
-          <div className={headerStyle.sort_up} />
+          <div className={headerStyle.table_sort_up} />
         )}
       </div>
     );

src/ts/components/Table/styles/header.module.scss

@@ -1,14 +1,8 @@
 @import 'src/styles/variables';
 
-.title {
-  font-size: var(--font-l);
-  font-weight: 100;
-  margin: 24px 0;
-  color: var(--color-black);
-}
-
-.sort_up,
-.sort_down {
+.table {
+  &_sort_up,
+  &_sort_down {
     display: inline-block;
     height: 0;
     width: 0;
@@ -20,9 +14,10 @@
     border: 6px solid var(--color-grey);
     border-left-color: white;
     border-bottom-color: white;
-}
+  }
 
-.sort_down {
+  &_sort_down {
     margin: 0 0 3px 8px;
     transform: rotateZ(135deg);
+  }
 }

src/ts/helpers/DataGrip/components/author.ts

@@ -163,8 +163,7 @@ export default class DataGripByAuthor {
         const moneyLosses = lazyDays > 0
           ? Math.ceil(lazyDays * middleSalaryInDay)
           : 0;
-        const salaryInMonth = settingsStore.getMiddleSalaryInMonth(dot.author);
-        const moneyAll = Math.ceil((allDaysInProject / 30) * salaryInMonth);
+        const moneyAll = Math.ceil((allDaysInProject / 30) * middleSalaryInMonth);
 
         const tasksEntries = Object.entries(dot.tasks).filter(t => t[0]);
         const tasks = tasksEntries.map(t => t[0]);

src/ts/helpers/RPC.ts

@@ -16,7 +16,7 @@ function getParametersFromURL(): IHashMap<string> {
   };
 }
 
-function loadJsDump(url: string, callback: Function) {
+function loadJsLocal(url: string, callback: Function) {
   const script = document.createElement('script');
   script.src = url;
   script.async = true; // @ts-ignore
@@ -27,6 +27,30 @@ function loadJsDump(url: string, callback: Function) {
   document.body.appendChild(script);
 }
 
+function loadJsLGlobal(url: string, callback: Function) {
+  fetch(url)
+    .then((response) => response.text())
+    .then((text) => {
+      if (!text) return callback();
+      if (text[0] === 'r') {
+        eval(text);
+        return callback();
+      } else {
+        // @ts-ignore
+        window.report = text.split('\n');
+      }
+      callback();
+    });
+}
+
+function loadJsDump(url: string, callback: Function) {
+  if (url?.[0] === '.') {
+    loadJsLocal(url, callback);
+  } else {
+    loadJsLGlobal(url, callback);
+  }
+}
+
 function loadCssFile(url: string) {
   const node = document.createElement('link');
   node.setAttribute('rel', 'stylesheet');

src/ts/pages/Authorization/components/Success.tsx

@@ -15,30 +15,14 @@ import Welcome from '../../Welcome/index';
 import Settings from '../../Settings/index';
 import DebugPage from '../../Debug/index';
 
-const Success = observer((): React.ReactElement => {
-  const [showSplashScreen, setShowSplashScreen] = useState<boolean>(true);
+interface IViewWithChartsProps {
+  showSplashScreen: boolean;
+}
 
-  useEffect(() => {
-    // @ts-ignore
-    dataGripStore.setCommits(window?.report || []);
-  }, []);
-
-  const dropArea = (
-    <DropZone
-      onChange={(type: string, data: any[]) => {
-        setShowSplashScreen(false);
-        if (type === 'dump') dataGripStore.setCommits(data);
-        setTimeout(() => {
-          setShowSplashScreen(true);
-        });
-      }}
-    />
-  );
-
-  return dataGripStore.showApplication ? (
+function ViewWithCharts({ showSplashScreen }: IViewWithChartsProps) {
+  return (
     <>
       <Confirm />
-        {dropArea}
       <Routes>
         <Route
           path="/settings"
@@ -91,9 +75,11 @@ const Success = observer((): React.ReactElement => {
       </Routes>
       {showSplashScreen && <SplashScreen />}
     </>
-  ) : (
-    <>
-      {dropArea}
+  );
+}
+
+function ViewWithText() {
+  return (
     <Routes>
       <Route
         path="*"
@@ -102,6 +88,31 @@ const Success = observer((): React.ReactElement => {
         )}
       />
     </Routes>
+  );
+}
+
+const Success = observer((): React.ReactElement => {
+  const [showSplashScreen, setShowSplashScreen] = useState<boolean>(true);
+  const showChart = dataGripStore.showApplication;
+
+  useEffect(() => {
+    // @ts-ignore
+    dataGripStore.setCommits(window?.report || []);
+  }, []);
+
+  return (
+    <>
+      {showChart && <ViewWithCharts showSplashScreen={showSplashScreen} />}
+      {!showChart && <ViewWithText />}
+      <DropZone
+        onChange={(type: string, data: any[]) => {
+          setShowSplashScreen(false);
+          if (type === 'dump') dataGripStore.setCommits(data);
+          setTimeout(() => {
+            setShowSplashScreen(true);
+          });
+        }}
+      />
     </>
   );
 });

src/ts/pages/Person/components/Month.tsx

@@ -14,7 +14,6 @@ const Month = observer(({ user }: IPersonCommonProps): React.ReactElement => {
 
   return (
     <>
-      <br/>
       <PageWrapper template="table">
         <YearChart
           showEvents={false}

src/ts/pages/Person/components/Tasks.tsx

@@ -33,9 +33,6 @@ const Tasks = observer(({
       })}
       watch={`${mode}${dataGripStore.dataGrip.hash}${user.author}`}
     >
-      <br/>
-      <br/>
-      <br/>
       <TasksView
         mode={mode}
         rowsForExcel={rows}

src/ts/pages/Person/components/Tempo.tsx

@@ -46,7 +46,6 @@ const Tempo = observer(({ user, filters }: IPersonCommonProps): React.ReactEleme
 
   return (
     <>
-      <br/>
       <PageWrapper template="table">
         <DataLoader
           to="response"

src/ts/pages/Person/components/Week.tsx

@@ -132,7 +132,6 @@ const Week = observer(({
 
   return (
     <>
-      <br/>
       <Recommendations
         mode={mode}
         recommendations={recommendations}

src/ts/pages/Settings/helpers/getEmptySettings.ts

@@ -47,7 +47,7 @@ export default function getEmptySettings(): IUserSetting {
 
   const value = {
     RUB: 200000,
-    USD: 12000,
+    USD: 3000,
   }[currency] || 3000;
 
   return {

src/ts/pages/Team/styles/filters.module.scss

@@ -1,6 +1,8 @@
 @import 'src/styles/variables';
 
 .table_filters {
+  margin: 0 0 24px;
+
   &_item {
     display: inline-block;
     width: 350px;