DevoteamNL · we-are-digital-architects · May 28, 2024 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/BenchmarkGridItem.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/BenchmarkGridItem.tsx
@@ -1,5 +1,5 @@
 import { ResponseErrorPanel } from '@backstage/core-components';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress, Grid } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMetricBenchmark } from '../../hooks/MetricBenchmarkHook';
@@ -42,20 +42,35 @@ export const BenchmarkGridItem = ({ type }: { type: string }) => {
     testOrProgressComponent
   );
   return (
-    <Box
-      sx={{
-        flex: 1,
-        bgcolor: theme.palette.background.paper,
+    <Grid
+      item
+      style={{
+        width: '100%',
+        backgroundColor: theme.palette.background.paper,
         boxShadow: `
-          0px 2px 2px -1px rgba(0,0,0,0.05), 
-          0px 2px 2px 0px rgba(0,0,0,0.07),
-          0px 1px 5px 0px rgba(0,0,0,0.06)`,
+        0px 2px 2px -1px rgba(0,0,0,0.05), 
+        0px 2px 2px 0px rgba(0,0,0,0.07),
+        0px 1px 5px 0px rgba(0,0,0,0.06)`,
+        borderRadius: 10,
+        textAlign: 'center',
       }}
     >
-      <h3 style={{ color: theme.palette.primary.main }}>
-        {t(`software_delivery_performance_metrics.labels.benchmark_${type}`)}
-      </h3>
-      {errorOrResponse}
-    </Box>
+      <Box sx={{}}>
+        <div
+          style={{
+            display: 'flex',
+            padding: 20,
+            flexDirection: 'column',
+            color: theme.palette.text.primary,
+            fontStyle: 'normal',
+            fontSize: '1em',
+            textAlign: 'center',
+          }}
+        >
+          {t(`software_delivery_performance_metrics.labels.benchmark_${type}`)}
+          {errorOrResponse}
+        </div>
+      </Box>
+    </Grid>
   );
 };
diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/ChartGridItem.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/ChartGridItem.tsx
@@ -1,8 +1,9 @@
+/* eslint-disable no-console */
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { Box, useTheme } from '@material-ui/core';
 import React from 'react';
 import { useMetricData } from '../../hooks/MetricDataHook';
-import { BarChartComponent } from '../BarChartComponent/BarChartComponent';
+import { LineChartComponent } from '../LineChartComponent/LineChartComponent';
 
 export const ChartGridItem = ({
   type,
@@ -13,9 +14,8 @@ export const ChartGridItem = ({
 }) => {
   const { chartData, error } = useMetricData(type);
   const theme = useTheme();
-
   const chartOrProgressComponent = chartData ? (
-    <BarChartComponent metricData={chartData} />
+    <LineChartComponent metricData={chartData} />
   ) : (
     <Progress variant="indeterminate" />
   );
@@ -34,9 +34,22 @@ export const ChartGridItem = ({
         0px 2px 2px -1px rgba(0,0,0,0.05), 
         0px 2px 2px 0px rgba(0,0,0,0.07),
         0px 1px 5px 0px rgba(0,0,0,0.06)`,
+        borderRadius: 10,
       }}
     >
-      <h1 style={{ color: theme.palette.primary.main }}>{label}</h1>
+      <h1
+        style={{
+          color: theme.palette.primary.main,
+          fontStyle: 'normal',
+          fontWeight: 400,
+          fontSize: '1.1em',
+          marginBottom: -25,
+          marginLeft: 25,
+          marginTop: 15,
+        }}
+      >
+        {label}
+      </h1>
       {errorOrResponse}
     </Box>
   );

diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
@@ -5,7 +5,7 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import { getEntityRelations, useEntity } from '@backstage/plugin-catalog-react';
-import { Box } from '@material-ui/core';
+import { Box, Grid } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import '../../i18n';
@@ -41,9 +41,34 @@ export const DashboardComponent = ({
           title="OpenDORA (by Devoteam)"
           subtitle="Through insight to perfection"
         >
-          <SupportButton>Plugin for displaying DORA Metrics</SupportButton>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <DropdownComponent
+              onSelect={setSelectedTimeUnit}
+              selection={selectedTimeUnit}
+            />
+            <SupportButton>Plugin for displaying DORA Metrics</SupportButton>
+          </Box>
         </Header>
         <Content>
+          <Box
+            sx={{
+              display: 'flex',
+              gridGap: 16,
+              zIndex: 1,
+              justifyContent: 'space-evenly',
+            }}
+          >
+            <BenchmarkGridItem type="df" />
+            <BenchmarkGridItem type="mltc" />
+            <BenchmarkGridItem type="cfr" />
+            <BenchmarkGridItem type="mttr" />
+          </Box>
           <Box
             sx={{
               display: 'flex',
@@ -52,45 +77,10 @@ export const DashboardComponent = ({
           >
             <Box
               sx={{
-                bgcolor: theme.palette.background.paper,
-                top: 8,
-                display: 'flex',
-                gridGap: 8,
-                boxShadow: `
-                  0px 2px 2px -1px rgba(0,0,0,0.05), 
-                  0px 2px 2px 0px rgba(0,0,0,0.07),
-                  0px 1px 5px 0px rgba(0,0,0,0.06)`,
-                position: 'sticky',
-                zIndex: 2,
-              }}
-            >
-              <DropdownComponent
-                onSelect={setSelectedTimeUnit}
-                selection={selectedTimeUnit}
-              />
-            </Box>
-            <Box
-              sx={{
-                top: 8,
-                display: 'flex',
-                gridGap: 8,
-                zIndex: 1,
-                marginTop: 8,
-                maxHeight: 900,
-              }}
-            >
-              <BenchmarkGridItem type="df" />
-              <BenchmarkGridItem type="mltc" />
-              <BenchmarkGridItem type="cfr" />
-              <BenchmarkGridItem type="mttr" />
-            </Box>
-            <Box
-              sx={{
-                top: 8,
                 display: 'flex',
-                gridGap: 8,
+                gridGap: 16,
                 zIndex: 1,
-                marginTop: 8,
+                marginTop: 16,
                 justifyContent: 'space-evenly',
               }}
             >
@@ -107,11 +97,10 @@ export const DashboardComponent = ({
             </Box>
             <Box
               sx={{
-                top: 8,
                 display: 'flex',
-                gridGap: 8,
+                gridGap: 16,
                 zIndex: 1,
-                marginTop: 8,
+                marginTop: 16,
                 justifyContent: 'space-evenly',
               }}
             >
@@ -126,11 +115,10 @@ export const DashboardComponent = ({
             </Box>
             <Box
               sx={{
-                top: 8,
                 display: 'flex',
-                gridGap: 8,
+                gridGap: 16,
                 zIndex: 1,
-                marginY: 1,
+                marginTop: 16,
               }}
             >
               <ChartGridItem

diff --git a/backstage-plugin/plugins/open-dora/src/components/DropdownComponent/DropdownComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DropdownComponent/DropdownComponent.tsx
@@ -14,7 +14,7 @@ export const DropdownComponent = ({
 }: DropdownComponentProps) => {
   const [t] = useTranslation();
   return (
-    <Box sx={{ display: 'flex', m: 3, flexDirection: 'column' }}>
+    <Box sx={{ width: 150 }}>
       <TextField
         style={{ width: '100%' }}
         variant="outlined"

diff --git a/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css b/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
@@ -1,7 +1,10 @@
+.highlightTextBoxBorder {
+}
+
 .highlight {
-  text-align: center;
-  width: 100%;
-  font-size: 1.2vw;
+  margin: auto;
+  font-size: 1.15em;
+  font-weight: bold;
 }
 
 .notification {
@@ -28,14 +31,6 @@
   color: default;
 }
 
-.highlightTextBoxBorder {
-  margin: 15px;
-  padding: 20px;
-  border-style: hidden;
-  min-height: 100px;
-  display: grid;
-}
-
 .margin-left-offset-m25 {
   margin: 0 0 0 -8px;
 }
diff --git a/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx b/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import './HighlightTextBoxComponent.css';
-import { useTheme } from '@material-ui/core';
 
 interface HighlightTextBoxComponentProps {
   title: string;
@@ -11,16 +10,12 @@ interface HighlightTextBoxComponentProps {
 export const HighlightTextBoxComponent = (
   props: HighlightTextBoxComponentProps,
 ) => {
-  const theme = useTheme();
   return (
-    <div
-      className="highlightTextBoxBorder"
-      style={{ background: theme.palette.background.default }}
-    >
-      <h1 className="margin-left-offset-m25 headerStyle">{props.title}</h1>
+    <div className="highlightTextBoxBorder">
       <div className={props.healthStatus}>
         <div className="highlight">{props.highlight}</div>
       </div>
+      <span className="headerStyle">{props.title}</span>
       <div className="notification">{props.text}</div>
     </div>
   );

diff --git a/backstage-plugin/plugins/open-dora/src/components/LineChartComponent/LineChartComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/LineChartComponent/LineChartComponent.tsx
@@ -0,0 +1,41 @@
+import { LineChart } from '@mui/x-charts/LineChart';
+import * as React from 'react';
+import { DataPoint, MetricData } from '../../models/MetricData';
+import { useTheme } from '@material-ui/core';
+
+interface DeploymentFrequencyDataProp {
+  metricData: MetricData;
+}
+
+const customize = {
+  height: 300,
+  legend: { hidden: true },
+};
+
+export const LineChartComponent = ({
+  metricData,
+}: DeploymentFrequencyDataProp) => {
+  const theme = useTheme();
+  const keys = metricData.dataPoints.map((item: DataPoint) => item.key);
+  const values = metricData.dataPoints.map((item: DataPoint) => item.value);
+  return (
+    <LineChart
+      xAxis={[
+        {
+          data: keys,
+          scaleType: 'point',
+          valueFormatter: v => v.replace(/ /, '\n'),
+        },
+      ]}
+      series={[
+        {
+          data: values,
+          area: true,
+          color: theme.palette.primary.main,
+          showMark: false,
+        },
+      ]}
+      {...customize}
+    />
+  );
+};
diff --git a/backstage-plugin/yarn.lock b/backstage-plugin/yarn.lock
@@ -3746,7 +3746,7 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/x-charts@^6.19.11":
+"@mui/x-charts@^6.19.8":
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/@mui/x-charts/-/x-charts-6.19.8.tgz#df2d4ee0a185d37481928355f69925c8af2c4329"
   integrity sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==
@@ -4986,7 +4986,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@<18.0.0":
+"@types/react-dom@<18.0.0", "@types/react-dom@^17":
   version "17.0.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5"
   integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==