liatrio · Wolftousen · Aug 30, 2024 · Sep 4, 2024
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "react-datepicker": "^7.3.0",
-    "react-dora-charts": "https://github.com/liatrio/react-dora-charts/releases/download/v1.0.0/react-dora-charts-1.0.0.tgz",
+    "react-dora-charts": "https://github.com/liatrio/react-dora-charts/releases/download/v1.1.2/react-dora-charts-1.1.2.tgz",
     "react-dropdown": "^1.11.0",
     "react-tooltip": "^5.28.0",
     "react-use": "^17.2.4",

diff --git a/src/components/AtAGlance.tsx b/src/components/AtAGlance.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { InfoCard } from '@backstage/core-components';
 import { Box } from '@material-ui/core';
 import {
@@ -7,6 +8,7 @@ import {
   MetricThresholdSet,
   getDateDaysInPastUtc,
   fetchData,
+  Theme,
 } from 'react-dora-charts';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -31,6 +33,8 @@ export const AtAGlance = () => {
 
   const [data, setData] = useState<any>();
   const [loading, setLoading] = useState<boolean>(false);
+  const backstageTheme = useTheme();
+  const theme = backstageTheme.palette.mode === 'dark' ? Theme.Dark : Theme.Light;
 
   const getAuthHeaderValue = genAuthHeaderValueLookup();
 
@@ -75,15 +79,19 @@ export const AtAGlance = () => {
     <ChartTitle
       title="DORA: 30 Days At a Glance"
       info="You DORA Trend, week over week, for the period selected"
+      theme={theme}
     />
   );
+
   const bTitle = (
     <ChartTitle
       title="DORA: 30 Days At a Glance"
       info="How well you are doing in each of the DORA Metrics"
+      theme={theme}
     />
   );
 
+
   return (
     <InfoCard title={showTrendGraph ? tTitle : bTitle}>
       <Box position="relative">
@@ -103,6 +111,7 @@ export const AtAGlance = () => {
                   graphEnd={endDate}
                   metricThresholdSet={rankThresholds}
                   message={message}
+                  theme={theme}
                 />
               ) : (
                 <Board
@@ -114,6 +123,7 @@ export const AtAGlance = () => {
                   graphEnd={endDate}
                   metricThresholdSet={rankThresholds}
                   message={message}
+                  theme={theme}
                 />
               )}
             </div>

diff --git a/src/components/ChartTitle.tsx b/src/components/ChartTitle.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from 'react-dora-charts';
 
 export interface Props {
   title: string;
   info: string;
   color?: string;
   scoreDisplay?: string;
+  theme?: Theme;
 }
 
 const useStyles = makeStyles(() => ({
@@ -20,6 +22,8 @@ const useStyles = makeStyles(() => ({
 export const ChartTitle = (props: Props) => {
   const classes = useStyles();
 
+  const color = props.theme !== Theme.Dark ? '#000' : '#FFF'
+
   return (
     <>
       <div className={classes.chartHeader}>
@@ -51,44 +55,21 @@ export const ChartTitle = (props: Props) => {
             style={{ mixBlendMode: 'normal' }}
           >
             <g transform="scale(1,1)">
-              <circle
-                cx="64"
-                cy="64"
-                r="55"
-                fillOpacity="0"
-                fill="#ffffff"
-              ></circle>
-              <path
-                d="M15,69.2c-1.6,0 -2.9,-1.3 -3,-2.9c0,-0.8 -0.1,-1.5 -0.1,-2.3c0,-1.7 1.3,-3 3,-3c1.7,0 3,1.3 3,3c0,0.7 0,1.4 0,2.1c0.1,1.7 -1.2,3.1 -2.9,3.1c0.1,0 0.1,0 0,0z"
-                fill="#24ae1d"
-              ></path>
               <path
                 d="M64,116c-19.9,0 -37.8,-11.1 -46.6,-29c-0.7,-1.5 -0.1,-3.3 1.4,-4c1.5,-0.7 3.3,-0.1 4,1.4c7.8,15.8 23.6,25.6 41.2,25.6c25.4,0 46,-20.6 46,-46c0,-12.3 -4.8,-23.8 -13.5,-32.5c-1.2,-1.2 -1.2,-3.1 0,-4.2c1.2,-1.2 3.1,-1.2 4.2,0c9.9,9.8 15.3,22.8 15.3,36.7c0,28.7 -23.3,52 -52,52z"
                 fill="#24ae1d"
               ></path>
-              <circle
-                cx="64"
-                cy="39"
-                r="7"
-                fillOpacity="0"
-                fill="#e4e4e7"
-              ></circle>
-              <path
-                d="M57,68v24c0,3.9 3.1,7 7,7v0c3.9,0 7,-3.1 7,-7v-24c0,-3.9 -3.1,-7 -7,-7v0c-3.9,0 -7,3.1 -7,7z"
-                fillOpacity="0"
-                fill="#e4e4e7"
-              ></path>
               <path
                 d="M64,122c-32,0 -58,-26 -58,-58c0,-32 26,-58 58,-58c32,0 58,26 58,58c0,32 -26,58 -58,58zM64,12c-28.7,0 -52,23.3 -52,52c0,28.7 23.3,52 52,52c28.7,0 52,-23.3 52,-52c0,-28.7 -23.3,-52 -52,-52z"
-                fill="#c1c1c1"
+                fill={color}
               ></path>
               <path
                 d="M64,49c-5.5,0 -10,-4.5 -10,-10c0,-5.5 4.5,-10 10,-10c5.5,0 10,4.5 10,10c0,5.5 -4.5,10 -10,10zM64,35c-2.2,0 -4,1.8 -4,4c0,2.2 1.8,4 4,4c2.2,0 4,-1.8 4,-4c0,-2.2 -1.8,-4 -4,-4z"
-                fill="#c1c1c1"
+                fill={color}
               ></path>
               <path
                 d="M64,102c-5.5,0 -10,-4.5 -10,-10v-24c0,-5.5 4.5,-10 10,-10c5.5,0 10,4.5 10,10v24c0,5.5 -4.5,10 -10,10zM64,64c-2.2,0 -4,1.8 -4,4v24c0,2.2 1.8,4 4,4c2.2,0 4,-1.8 4,-4v-24c0,-2.2 -1.8,-4 -4,-4z"
-                fill="#c1c1c1"
+                fill={color}
               ></path>
             </g>
           </g>

diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { InfoCard } from '@backstage/core-components';
 import { Box, Grid } from '@material-ui/core';
 import { Tooltip } from 'react-tooltip';
@@ -16,6 +17,7 @@ import {
   DoraState,
   getDateDaysInPastUtc,
   DoraRecord,
+  Theme,
 } from 'react-dora-charts';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -31,26 +33,26 @@ import { ChartTitle } from './ChartTitle';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   doraCalendar: {
     '& .react-datepicker__header': {
-      backgroundColor: 'black',
+      backgroundColor: theme.palette.background.default,
     },
     '& .react-datepicker__month-container': {
-      backgroundColor: 'black',
+      backgroundColor: theme.palette.background.default,
     },
     '& .react-datepicker__current-month': {
-      color: 'white',
+      color: theme.palette.text.primary,
     },
     '& .react-datepicker__day': {
-      backgroundColor: 'black',
-      color: 'white',
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
       '&:hover': {
         backgroundColor: 'rgb(92, 92, 92)',
       },
     },
     '& .react-datepicker__day-name': {
-      color: 'white',
+      color: theme.palette.text.primary,
     },
     '& .react-datepicker__day--in-range': {
       backgroundColor: 'green',
@@ -59,8 +61,8 @@ const useStyles = makeStyles(() => ({
       },
     },
     '& .react-datepicker__input-container input': {
-      backgroundColor: 'black',
-      color: 'white',
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
       padding: '10px',
     },
     '& .react-datepicker': {
@@ -78,23 +80,23 @@ const useStyles = makeStyles(() => ({
       width: '50%',
     },
     '& .Dropdown-control': {
-      backgroundColor: 'black',
+      backgroundColor: theme.palette.background.default,
       color: 'white',
     },
     '& .Dropdown-option is-selected': {
       backgroundColor: 'green',
-      color: 'black',
+      color: theme.palette.text.primary,
     },
     '& .Dropdown-option': {
-      backgroundColor: 'black',
-      color: 'white',
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
     },
     '& .Dropdown-option:hover': {
       backgroundColor: 'green',
-      color: 'white',
+      color: theme.palette.text.primary,
     },
     '& .Dropdown-menu': {
-      backgroundColor: 'black',
+      backgroundColor: theme.palette.background.default,
     },
     '& .doraOptions': {
       overflow: 'visible',
@@ -169,6 +171,8 @@ export const Charts = (props: ChartProps) => {
   const [message, setMessage] = useState<string>('');
 
   const classes = useStyles();
+  const backstageTheme = useTheme();
+  const theme = backstageTheme.palette.mode === 'dark' ? Theme.Dark : Theme.Light;
 
   const getMetrics = (data: any) => {
     if (!data || data.length === 0) {
@@ -199,7 +203,7 @@ export const Charts = (props: ChartProps) => {
     end?: Date,
     message?: string
   ) => {
-    if (!data && data.length < 1) {
+    if (!data || data.length < 1) {
       setData([]);
       setMetrics({ ...defaultMetrics });
       setMessage('');
@@ -374,12 +378,14 @@ export const Charts = (props: ChartProps) => {
     <ChartTitle
       title="DORA: At a Glance"
       info="You DORA Trend, week over week, for the period selected"
+      theme={theme}
     />
   );
   const bTitle = (
     <ChartTitle
       title="DORA: At a Glance"
       info="How well you are doing in each of the DORA Metrics"
+      theme={theme}
     />
   );
   const dfTitle = (
@@ -388,6 +394,7 @@ export const Charts = (props: ChartProps) => {
       color={metrics.deploymentFrequency.color}
       title="Deployment Frequency"
       info="How often an organization successfully releases to production"
+      theme={theme}
     />
   );
   const cfrTitle = (
@@ -396,6 +403,7 @@ export const Charts = (props: ChartProps) => {
       color={metrics.changeFailureRate.color}
       title="Change Failure Rate"
       info="The percentage of deployments causing a failure in production"
+      theme={theme}
     />
   );
   const cltTitle = (
@@ -404,6 +412,7 @@ export const Charts = (props: ChartProps) => {
       color={metrics.changeLeadTime.color}
       title="Change Lead Time"
       info="The amount of time it takes a commit to get into production"
+      theme={theme}
     />
   );
   const rtTitle = (
@@ -412,6 +421,7 @@ export const Charts = (props: ChartProps) => {
       color={metrics.recoverTime.color}
       title="Recovery Time"
       info="How long it takes an organization to recover from a failure in production"
+      theme={theme}
     />
   );
 
@@ -424,14 +434,14 @@ export const Charts = (props: ChartProps) => {
       <Tooltip
         id="metric_tooltip"
         place="bottom"
-        border="1px solid white"
+        border={`1px solid ${theme === Theme.Dark ? '#FFF' : '#000'}`}
         opacity="1"
         style={{
           borderRadius: '10px',
           maxWidth: '300px',
           padding: '10px',
           zIndex: '100',
-          backgroundColor: '#000000',
+          backgroundColor: backstageTheme.palette.background.default,
         }}
       />
       <Grid
@@ -511,6 +521,7 @@ export const Charts = (props: ChartProps) => {
                       graphEnd={endDate}
                       metricThresholdSet={rankThresholds}
                       message={message}
+                      theme={theme}
                     />
                   ) : (
                     <Board
@@ -522,6 +533,7 @@ export const Charts = (props: ChartProps) => {
                       graphEnd={endDate}
                       metricThresholdSet={rankThresholds}
                       message={message}
+                      theme={theme}
                     />
                   )}
                 </div>
@@ -548,6 +560,7 @@ export const Charts = (props: ChartProps) => {
                     graphStart={startDate}
                     graphEnd={endDate}
                     message={message}
+                    theme={theme}
                   />
                 </div>
               </Box>
@@ -566,6 +579,7 @@ export const Charts = (props: ChartProps) => {
                     graphStart={startDate}
                     graphEnd={endDate}
                     message={message}
+                    theme={theme}
                   />
                 </div>
               </Box>
@@ -584,6 +598,7 @@ export const Charts = (props: ChartProps) => {
                     graphStart={startDate}
                     graphEnd={endDate}
                     message={message}
+                    theme={theme}
                   />
                 </div>
               </Box>
@@ -602,6 +617,7 @@ export const Charts = (props: ChartProps) => {
                     graphStart={startDate}
                     graphEnd={endDate}
                     message={message}
+                    theme={theme}
                   />
                 </div>
               </Box>

diff --git a/yarn.lock b/yarn.lock
@@ -11317,10 +11317,11 @@ react-dev-utils@^12.0.0-next.60:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-"react-dora-charts@https://github.com/liatrio/react-dora-charts/releases/download/v1.0.0/react-dora-charts-1.0.0.tgz":
-  version "1.0.0"
-  resolved "https://github.com/liatrio/react-dora-charts/releases/download/v1.0.0/react-dora-charts-1.0.0.tgz#812ba8b128b695da4dbad2e3f148502f400dd831"
+"react-dora-charts@https://github.com/liatrio/react-dora-charts/releases/download/v1.1.2/react-dora-charts-1.1.2.tgz":
+  version "1.1.2"
+  resolved "https://github.com/liatrio/react-dora-charts/releases/download/v1.1.2/react-dora-charts-1.1.2.tgz#9fe231c52b1ad737af183cafed5da6b413415d9a"
   dependencies:
+    js-yaml "^4.1.0"
     react-tooltip "^5.28.0"
     recharts "^2.12.7"
     uuid "^10.0.0"