Fixing repository chart (#34)

* Fixing repository chart * Removing unnecessary log * Adding repository bar chart * Fixing analytic lint problem
ZupIT · May 8, 2021 · 2c4ec7b · 2c4ec7b
1 parent 36736ee
commit 2c4ec7b
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 99 deletions.
diff --git a/analytic/internal/repositories/dashboard/dashboard.go b/analytic/internal/repositories/dashboard/dashboard.go
@@ -121,7 +121,6 @@ func (r *RepoDashboard) GetDashboardVulnByLanguage(
 	return *result.GetData().(*[]*dashboard.VulnerabilitiesByLanguage), result.GetErrorExceptNotFound()
 }
 
-// nolint:dupl // method is not duplicate
 func (r *RepoDashboard) GetDashboardVulnByTime(
 	filter *dashboard.FilterDashboard) (vulns []*dashboard.VulnerabilitiesByTime, err error) {
 	condition, args := r.getConditionFilter(filter)

diff --git a/manager/src/helpers/formatters/chartData.ts b/manager/src/helpers/formatters/chartData.ts
@@ -33,7 +33,7 @@ const formatChartStacked = (
   const info: number[] = [];
   const unknown: number[] = [];
 
-  if (!listOfData) {
+  if (!listOfData || typeof listOfData === 'undefined') {
     return formattedData;
   }
 

diff --git a/manager/src/pages/Internal/Dashboard/VulnerabilitiesByDeveloper/index.tsx b/manager/src/pages/Internal/Dashboard/VulnerabilitiesByDeveloper/index.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FilterValues } from 'helpers/interfaces/FilterValues';
 import { BarCharRow } from 'helpers/interfaces/BarChartRow';
 import { BarChart } from 'components';
 import { get } from 'lodash';

diff --git a/manager/src/pages/Internal/Dashboard/VulnerabilitiesByRepository/index.tsx b/manager/src/pages/Internal/Dashboard/VulnerabilitiesByRepository/index.tsx
@@ -14,113 +14,131 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { ApexOptions } from 'apexcharts';
-import Styled from './styled';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { BarCharRow } from 'helpers/interfaces/BarChartRow';
+import { BarChart } from 'components';
+import { get } from 'lodash';
 import { useTheme } from 'styled-components';
-import { Icon } from 'components';
-import { FilterValues } from 'helpers/interfaces/FilterValues';
-import { ChartBarStacked } from 'helpers/interfaces/ChartData';
+import { VulnerabilitiesByRepository as VulnerabilitiesByRepositoryData } from 'helpers/interfaces/DashboardData';
 
 interface Props {
-  filters?: FilterValues;
+  data: VulnerabilitiesByRepositoryData[];
   isLoading: boolean;
 }
 
-const VulnerabilitiesByRepository: React.FC<Props> = ({
-  filters,
-  isLoading,
-}) => {
+const VulnerabilitiesByRepository: React.FC<Props> = ({ isLoading, data }) => {
   const { t } = useTranslation();
-  const { colors, metrics } = useTheme();
-
-  const [chartData, setChartData] = useState<ChartBarStacked>({
-    categories: [],
-    series: [],
-  });
-
-  const options: ApexOptions = {
-    markers: {
-      size: 0,
-    },
-    colors: Object.values(colors.vulnerabilities),
-    noData: {
-      text: t('DASHBOARD_SCREEN.CHART_NO_DATA'),
-      style: {
-        color: colors.chart.legend,
-        fontSize: metrics.fontSize.large,
-      },
-    },
-    legend: {
-      position: 'top',
-      horizontalAlign: 'left',
-      offsetX: 40,
-      labels: {
-        colors: colors.chart.legend,
-      },
-    },
-    chart: {
-      fontFamily: 'SFRegular',
-      stacked: true,
-      animations: {
-        enabled: true,
-      },
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-    xaxis: {
-      labels: {
-        style: {
-          colors: colors.chart.legend,
-          fontSize: metrics.fontSize.medium,
-        },
-      },
-      categories: [],
-    },
-    yaxis: {
-      title: {
-        text: undefined,
-      },
-      labels: {
-        maxWidth: 280,
-        style: {
-          colors: colors.chart.legend,
-          fontSize: metrics.fontSize.medium,
-        },
-      },
-    },
+  const { colors } = useTheme();
+
+  const [layeredDeveloper, setLayeredDeveloper] = useState<string>('');
+  const [isLastLayer, setLastLayer] = useState(false);
+
+  const [allData, setAllData] = useState<VulnerabilitiesByRepositoryData[]>([]);
+  const [chatData, setChartData] = useState<BarCharRow[]>([]);
+
+  const formatFirstLayer = (data: VulnerabilitiesByRepositoryData[]) => {
+    const formatted = (data || []).map((item) => {
+      let value = 0;
+
+      Object.values(item).forEach((i) => {
+        if (i?.count) {
+          value = value + i.count;
+        }
+      });
+
+      return {
+        value,
+        legend: item.repositoryName,
+      };
+    });
+
+    setLayeredDeveloper(null);
+    setLastLayer(false);
+    setChartData(formatted);
+  };
+
+  const formatSecondLayer = (rowKey: string) => {
+    setLayeredDeveloper(rowKey);
+
+    const data = allData.find((item) => item.repositoryName === rowKey);
+
+    const formatted = Object.entries(data).map((item) => {
+      const value = item[1]?.count;
+      const legend = item[0].toUpperCase();
+      const color = get(
+        colors.vulnerabilities,
+        legend,
+        colors.vulnerabilities.DEFAULT
+      );
+
+      return {
+        value,
+        legend,
+        color,
+      };
+    });
+
+    delete formatted[0];
+    setChartData(formatted);
+  };
+
+  const formatThirdLayer = (rowKey: string) => {
+    if (!isLastLayer) {
+      setLastLayer(true);
+
+      const authorData = allData.find(
+        (item) => item.repositoryName === layeredDeveloper
+      );
+
+      const data = get(authorData, rowKey.toLocaleLowerCase(), { types: [] })
+        ?.types;
+
+      const formatted = Object.entries(data).map((item) => {
+        const legend = item[0].toUpperCase();
+        const value = (item[1] as number) || 0;
+        const color = get(
+          colors.vulnerabilitiesStatus,
+          legend,
+          colors.vulnerabilitiesStatus.DEFAULT
+        );
+
+        return {
+          value,
+          legend,
+          color,
+        };
+      });
+
+      setChartData(formatted);
+    }
   };
 
+  useEffect(() => {
+    formatFirstLayer(data);
+    setAllData(data);
+  }, [data]);
+
   return (
     <div className="block max-space">
-      <Styled.Wrapper tabIndex={0}>
-        <Styled.Title>
-          {t('DASHBOARD_SCREEN.VULNERABILITIES_BY_REPO')}
-        </Styled.Title>
-
-        <Styled.LoadingWrapper isLoading={isLoading}>
-          <Icon name="loading" size="200px" className="loading" />
-        </Styled.LoadingWrapper>
-
-        <ReactApexChart
-          height={250}
-          width="100%"
-          options={{
-            ...options,
-            xaxis: { ...options.xaxis, categories: chartData.categories },
-          }}
-          series={chartData.series}
-          type="bar"
-        />
-      </Styled.Wrapper>
+      <BarChart
+        isLoading={isLoading}
+        data={chatData}
+        title={
+          layeredDeveloper
+            ? `${t(
+                'DASHBOARD_SCREEN.VULNERABILITIES_BY_REPO'
+              )}: ${layeredDeveloper}`
+            : t('DASHBOARD_SCREEN.VULNERABILITIES_BY_REPO')
+        }
+        onClickRow={(row) =>
+          !layeredDeveloper
+            ? formatSecondLayer(row.legend)
+            : formatThirdLayer(row.legend)
+        }
+        onClickBack={() => formatFirstLayer(allData)}
+        showBackOption={!!layeredDeveloper}
+      />
     </div>
   );
 };

diff --git a/manager/src/pages/Internal/Dashboard/index.tsx b/manager/src/pages/Internal/Dashboard/index.tsx
@@ -112,7 +112,7 @@ const Dashboard: React.FC<Props> = ({ type }) => {
         {type === 'workspace' ? (
           <VulnerabilitiesByRepository
             isLoading={isLoading}
-            filters={filters}
+            data={dashboardData?.vulnerabilitiesByRepository}
           />
         ) : null}
       </Styled.Row>