diff --git a/.storybook/preview.js b/.storybook/preview.js index 42ab3f4..b27c3d7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -6,3 +6,5 @@ export const parameters = { light: { ...themes.normal, appBg: 'white', appPreviewBg: 'white' }, }, }; + +import '../src/global.css'; diff --git a/README.md b/README.md index cd55d16..b99b8e1 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,7 @@ These functions are just shortcuts to get a Date a certain number of days in the | `metricThresholdSet` | false | This allows you to customize the metric thresholds used for determining the rank of each metric. You only have to override the ones you need. There are defaults based on the official DORA Report that are used when these are not supplied.
This takes in a `MetricThresholdSet` object which contains a `MetricThresholds` object for each metric.
The threshold values for `elite`, `high` and `medium` are measured in hours. `low` is considered anything longer than medium, so it is not able to be supplied as a value in this object. | | `message` | false | This allows a parent component to display a custom message while it does something. This setting overrides `loading` and the no data state that happens if `data` is empty or the `api` returns no data. | | `holidays` | false | This field allows you to specify holidays that your organization follows to exclude from the calculations for the components. | +| `theme` | false | This field allows you to supply the `Theme` (dark = 0, light = 1) to the chart for styling purposes. You can alternatively just make sure that `data-theme='light\|dark'` is used on an ancestor of the component. | ### Board Component Properties @@ -157,6 +158,8 @@ These functions are just shortcuts to get a Date a certain number of days in the ### Trend Component Properties +- All the `Common Properties` + | Property | Required | Description | | ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------- | | `showIndividualTrends` | false | Enabling this property will show a line for each individual metric trend in addition to the overall DORA trend. | diff --git a/src/Boards/Board.css b/src/Boards/Board.css deleted file mode 100644 index 98db64f..0000000 --- a/src/Boards/Board.css +++ /dev/null @@ -1,46 +0,0 @@ -.surround { - width: 100%; - height: 100%; -} - -.icon { - position: absolute; - width: 33%; - height: 33%; -} - -.icon_container { - width: 96px; - height: 96px; - position: relative; -} - -.board { - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-evenly; - align-items: center; - color: white; -} - -.popover-content { - background-color: #494949; - border: 2px solid #494949; - border-radius: 10px; - padding: 10px; - color: white; -} - -.detail-content { - padding: 10px; - text-align: center; -} - -.score_container { - align-items: center; - display: flex; - flex-direction: column; -} diff --git a/src/Boards/Board.tsx b/src/Boards/Board.tsx index 98122c7..8636293 100644 --- a/src/Boards/Board.tsx +++ b/src/Boards/Board.tsx @@ -1,16 +1,16 @@ import React, { useEffect, useState } from 'react'; -import './Board.css'; +import styles from './board.module.css'; import { Tooltip } from 'react-tooltip'; import DeployFrequencyIcon from '../icons/DeploymentFrequencyIcon'; import ChangeLeadTimeIcon from '../icons/ChangeLeadTimeIcon'; import ChangeFailureRateIcon from '../icons/ChangeFailureRateIcon'; import RecoverTimeIcon from '../icons/RecoverTimeIcon'; -import { BoardProps } from '../interfaces/propInterfaces'; +import { BoardProps, Theme } from '../interfaces/propInterfaces'; import { DoraState } from '../interfaces/metricInterfaces'; import { boardName, defaultDoraState } from '../constants'; import { buildDoraState } from '../functions/metricFunctions'; import { buildNonGraphBody } from '../functions/chartFunctions'; -import ScoreIcon from '../icons/ScoreIcon'; +import MetricIcon from '../icons/MetricIcon'; import TrendIcon from '../icons/TrendIcon'; const Board: React.FC = props => { @@ -38,7 +38,12 @@ const Board: React.FC = props => { props.metricThresholdSet, ]); - const nonGraphBody = buildNonGraphBody(props, noData, boardName); + const nonGraphBody = buildNonGraphBody( + props, + noData, + boardName, + styles.messageContainer, + ); if (nonGraphBody) { return nonGraphBody; @@ -46,14 +51,18 @@ const Board: React.FC = props => { if (props.showTrends) { return ( -
+
- + = props => { alwaysShowDetails={props.alwaysShowDetails} setTooltipContent={setTooltipContent} > - + = props => { alwaysShowDetails={props.alwaysShowDetails} setTooltipContent={setTooltipContent} > - + = props => { alwaysShowDetails={props.alwaysShowDetails} setTooltipContent={setTooltipContent} > - + {!props.alwaysShowDetails && ( )} @@ -92,48 +101,53 @@ const Board: React.FC = props => { ); } else { return ( -
- + - - - + + - - - + + - - - + + - - + + {!props.alwaysShowDetails && ( diff --git a/src/Boards/board.module.css b/src/Boards/board.module.css new file mode 100644 index 0000000..27ee149 --- /dev/null +++ b/src/Boards/board.module.css @@ -0,0 +1,21 @@ +.board { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + align-items: center; + color: var(--react-dora-charts-text-color); +} + +.boardTooltip { + border: 1px solid var(--react-dora-charts-primary-color) !important; + background-color: var(--react-dora-charts-background-color) !important; + color: var(--react-dora-charts-text-color) !important; +} + +.boardTooltipArrow { + border-right: 1px solid var(--react-dora-charts-primary-color) !important; + border-bottom: 1px solid var(--react-dora-charts-primary-color) !important; +} diff --git a/src/ChangeFailureRateGraph.tsx b/src/ChangeFailureRateGraph.tsx index c2e144f..ddb4f2b 100644 --- a/src/ChangeFailureRateGraph.tsx +++ b/src/ChangeFailureRateGraph.tsx @@ -10,7 +10,7 @@ import { import CustomLayeredBar from './CustomLayeredBar'; import { Tooltip } from 'react-tooltip'; import TooltipContent from './ToolTip/TooltipContent'; -import { ChartProps } from './interfaces/propInterfaces'; +import { ChartProps, Theme } from './interfaces/propInterfaces'; import { DoraRecord } from './interfaces/apiInterfaces'; import { buildNonGraphBody, @@ -20,6 +20,7 @@ import { } from './functions/chartFunctions'; import { changeFailureRateName, millisecondsToDays } from './constants'; import { v4 as uuidv4 } from 'uuid'; +import styles from './chart.module.css'; interface ProcessData { date: number; @@ -137,7 +138,12 @@ const ChangeFailureRateGraph: React.FC = (props: ChartProps) => { [startDate, endDate], ); - const nonGraphBody = buildNonGraphBody(props, noData, changeFailureRateName); + const nonGraphBody = buildNonGraphBody( + props, + noData, + changeFailureRateName, + styles.messageContainer, + ); if (nonGraphBody) { return nonGraphBody; @@ -155,13 +161,13 @@ const ChangeFailureRateGraph: React.FC = (props: ChartProps) => { {payload.repository}: {(payload.total * 100).toFixed(2)}%

{payload.successful > 0 && ( - + Successes: {successUrls.map((url: string, index: number) => { return ( @@ -174,13 +180,13 @@ const ChangeFailureRateGraph: React.FC = (props: ChartProps) => { )} {payload.failed > 0 && payload.successful > 0 &&
} {payload.failed > 0 && ( - + Issues: {failureUrls.map((url: string, index: number) => { return ( @@ -200,8 +206,14 @@ const ChangeFailureRateGraph: React.FC = (props: ChartProps) => { setTooltipContent(); }; + const tickColor = props.theme === Theme.Dark ? '#FFF' : '#000'; + return ( -
+
= (props: ChartProps) => { tick * 100 + '%'} /> = (props: ChartProps) => { dataKey="date" tickSize={15} type="number" - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} ticks={ticks} domain={[startDate.getTime(), endDate.getTime()]} tickFormatter={formatDateTicks} @@ -246,12 +258,12 @@ const ChangeFailureRateGraph: React.FC = (props: ChartProps) => { diff --git a/src/ChangeLeadTimeGraph.tsx b/src/ChangeLeadTimeGraph.tsx index 0825663..b40eecc 100644 --- a/src/ChangeLeadTimeGraph.tsx +++ b/src/ChangeLeadTimeGraph.tsx @@ -11,7 +11,7 @@ import TooltipContent from './ToolTip/TooltipContent'; import { Tooltip } from 'react-tooltip'; import CustomShape from './CustomShape'; import { DoraRecord } from './interfaces/apiInterfaces'; -import { ChartProps } from './interfaces/propInterfaces'; +import { ChartProps, Theme } from './interfaces/propInterfaces'; import { buildNonGraphBody, formatDateTicks, @@ -21,6 +21,7 @@ import { import { buildDoraState } from './functions/metricFunctions'; import { changeLeadTimeName } from './constants'; import { v4 as uuidv4 } from 'uuid'; +import styles from './chart.module.css'; interface ProcessRepository { mergeTime: number; @@ -119,7 +120,12 @@ const ChangeLeadTimeGraph: React.FC = (props: ChartProps) => { const ticks = generateTicks(startDate, endDate, 5); - const nonGraphBody = buildNonGraphBody(props, noData, changeLeadTimeName); + const nonGraphBody = buildNonGraphBody( + props, + noData, + changeLeadTimeName, + styles.messageContainer, + ); if (nonGraphBody) { return nonGraphBody; @@ -150,7 +156,11 @@ const ChangeLeadTimeGraph: React.FC = (props: ChartProps) => { const title = (

- + {payload.title}

@@ -204,12 +214,15 @@ const ChangeLeadTimeGraph: React.FC = (props: ChartProps) => { } }; + const tickColor = props.theme === Theme.Dark ? '#FFF' : '#000'; + return (
= (props: ChartProps) => { dataKey="mergeTime" tickSize={15} type={'number'} - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} ticks={ticks} domain={[startDate.getTime(), endDate.getTime()]} tickFormatter={formatDateTicks} @@ -238,7 +251,7 @@ const ChangeLeadTimeGraph: React.FC = (props: ChartProps) => { dataKey="graphCycleTime" name="Time" unit={yLabel} - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} /> {Array.from(graphData.keys()).map( (repository: string, idx: number) => ( @@ -271,14 +284,14 @@ const ChangeLeadTimeGraph: React.FC = (props: ChartProps) => { diff --git a/src/DeploymentFrequencyGraph.tsx b/src/DeploymentFrequencyGraph.tsx index a3b480e..543654d 100644 --- a/src/DeploymentFrequencyGraph.tsx +++ b/src/DeploymentFrequencyGraph.tsx @@ -11,7 +11,7 @@ import CustomBar from './CustomBar'; import { Tooltip } from 'react-tooltip'; import TooltipContent from './ToolTip/TooltipContent'; import { deploymentFrequencyName, millisecondsToDays } from './constants'; -import { ChartProps } from './interfaces/propInterfaces'; +import { ChartProps, Theme } from './interfaces/propInterfaces'; import { DoraRecord } from './interfaces/apiInterfaces'; import { buildNonGraphBody, @@ -20,6 +20,7 @@ import { useSharedLogic, } from './functions/chartFunctions'; import { v4 as uuidv4 } from 'uuid'; +import styles from './chart.module.css'; interface ProcessRepository { count: number; @@ -124,6 +125,7 @@ const DeploymentFrequencyGraph: React.FC = (props: ChartProps) => { props, noData, deploymentFrequencyName, + styles.messageContainer, ); if (nonGraphBody) { @@ -152,7 +154,7 @@ const DeploymentFrequencyGraph: React.FC = (props: ChartProps) => { return ( @@ -181,8 +183,14 @@ const DeploymentFrequencyGraph: React.FC = (props: ChartProps) => { return repositoryData.count; }; + const tickColor = props.theme === Theme.Dark ? '#FFF' : '#000'; + return ( -
+
= (props: ChartProps) => { tickSize={15} interval={0} type={'number'} - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} ticks={ticks} domain={[startDate.getTime(), endDate.getTime()]} tickFormatter={formatDateTicks} /> @@ -236,12 +244,12 @@ const DeploymentFrequencyGraph: React.FC = (props: ChartProps) => { diff --git a/src/Loading/Loading.tsx b/src/Loading/Loading.tsx index 89fcbe8..9d2a947 100644 --- a/src/Loading/Loading.tsx +++ b/src/Loading/Loading.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import './Loading.css'; +import styles from './loading.module.css'; interface Props { enabled: boolean; @@ -11,8 +11,8 @@ const Loading = (props: Props) => { } return ( -
- +
+
); }; diff --git a/src/Loading/Loading.css b/src/Loading/loading.module.css similarity index 77% rename from src/Loading/Loading.css rename to src/Loading/loading.module.css index 5d418a4..265c066 100644 --- a/src/Loading/Loading.css +++ b/src/Loading/loading.module.css @@ -14,12 +14,12 @@ display: block; margin: 15px auto; position: relative; - color: #fff; + color: var(--react-dora-charts-primary-color); box-sizing: border-box; - animation: animloader 1s linear infinite alternate; + animation: react-dora-charts-loader 1s linear infinite alternate; } -@keyframes animloader { +@keyframes react-dora-charts-loader { 0% { box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0; } diff --git a/src/RecoverTimeGraph.tsx b/src/RecoverTimeGraph.tsx index d4a18bc..5cf8f49 100644 --- a/src/RecoverTimeGraph.tsx +++ b/src/RecoverTimeGraph.tsx @@ -8,10 +8,9 @@ import { Line, } from 'recharts'; import CustomDot from './CustomDot'; -import './general.css'; import TooltipContent from './ToolTip/TooltipContent'; import { Tooltip } from 'react-tooltip'; -import { ChartProps } from './interfaces/propInterfaces'; +import { ChartProps, Theme } from './interfaces/propInterfaces'; import { DoraRecord } from './interfaces/apiInterfaces'; import { buildNonGraphBody, @@ -22,6 +21,7 @@ import { import { buildDoraState } from './functions/metricFunctions'; import { recoverTimeName } from './constants'; import { v4 as uuidv4 } from 'uuid'; +import styles from './chart.module.css'; interface ProcessRepository { count: number; @@ -139,7 +139,12 @@ const RecoverTimeGraph: React.FC = (props: ChartProps) => { const ticks = generateTicks(startDate, endDate, 5); - const nonGraphBody = buildNonGraphBody(props, noData, recoverTimeName); + const nonGraphBody = buildNonGraphBody( + props, + noData, + recoverTimeName, + styles.messageContainer, + ); if (nonGraphBody) { return nonGraphBody; @@ -181,8 +186,14 @@ const RecoverTimeGraph: React.FC = (props: ChartProps) => { return repositoryData.avgTime; }; + const tickColor = props.theme === Theme.Dark ? '#FFF' : '#000'; + return ( -
+
= (props: ChartProps) => { dataKey="date" tickSize={15} type={'number'} - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} ticks={ticks} domain={[startDate.getTime(), endDate.getTime()]} tickFormatter={formatDateTicks} /> - + {usedRepositories.map((repository, idx) => ( = (props: ChartProps) => { diff --git a/src/ToolTip/TooltipContent.tsx b/src/ToolTip/TooltipContent.tsx index f4a424e..fcbae2f 100644 --- a/src/ToolTip/TooltipContent.tsx +++ b/src/ToolTip/TooltipContent.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import './TooltipContent.css'; +import styles from './tooltipContent.module.css'; export interface Props { onClose?: () => void; @@ -11,9 +11,9 @@ export interface Props { const TooltipContent: React.FC = ({ title, body, footer }: Props) => { return (
-
{title}
-
{body}
- {footer &&
{footer}
} +
{title}
+
{body}
+ {footer &&
{footer}
}
); }; diff --git a/src/ToolTip/TooltipContent.css b/src/ToolTip/tooltipContent.module.css similarity index 62% rename from src/ToolTip/TooltipContent.css rename to src/ToolTip/tooltipContent.module.css index 6633284..26175ea 100644 --- a/src/ToolTip/TooltipContent.css +++ b/src/ToolTip/tooltipContent.module.css @@ -1,4 +1,4 @@ -.dora-tooltip { +.tooltip { background-color: black; border: 2px solid grey; border-radius: 8px; @@ -7,41 +7,34 @@ padding: 16px; display: flex; flex-direction: column; - color: #aaa; + color: var(--react-dora-charts-text-color); height: fit-content; } -.dora-tooltip-header h3 { +.tooltipHeader h3 { font-size: 16px; margin: 0; - color: #aaa; + color: var(--react-dora-charts-text-color); } -.dora-tooltip-body p { +.tooltipBody p { font-size: 14px; - color: #aaa; + color: var(--react-dora-charts-text-color); margin: 8px 0 0; } -.dora-tooltip-footer { +.tooltipFooter { display: flex; align-items: center; margin-top: 12px; } -.dora-profile-image { - border-radius: 50%; - width: 32px; - height: 32px; - margin-right: 8px; -} - -.dora-tooltip-footer span { +.tooltipFooter span { font-size: 14px; - color: #aaa; + color: var(--react-dora-charts-text-color); } -.dora-tooltip-wrapper { +.tooltipWrapper { width: 100%; height: 100%; display: flex; @@ -50,7 +43,7 @@ position: absolute; top: -5px; left: -5px; - background-color: #aaaaaa33; + background-color: var(--react-dora-charts-background-color); border-radius: 10px; padding: 10px; } diff --git a/src/TrendGraph.tsx b/src/TrendGraph.tsx index 3d119df..bbfa371 100644 --- a/src/TrendGraph.tsx +++ b/src/TrendGraph.tsx @@ -8,7 +8,7 @@ import { CartesianGrid, ResponsiveContainer, } from 'recharts'; -import { TrendProps } from './interfaces/propInterfaces'; +import { Theme, TrendProps } from './interfaces/propInterfaces'; import { DoraRecord } from './interfaces/apiInterfaces'; import { buildNonGraphBody, @@ -32,6 +32,7 @@ import { getStartOfWeek, } from './functions/dateFunctions'; import { DoraRank } from './interfaces/metricInterfaces'; +import styles from './chart.module.css'; interface GraphData { date: number; @@ -230,33 +231,33 @@ const TrendGraph: React.FC = (props: TrendProps) => { setGraphData(filteredData); }, [props.graphEnd, props.graphStart, allData]); - const nonGraphBody = buildNonGraphBody(props, noData, trendName); + const nonGraphBody = buildNonGraphBody( + props, + noData, + trendName, + styles.messageContainer, + ); if (nonGraphBody) { return nonGraphBody; } else if (graphData.length <= 1) { return ( -
- - Not Enough Data to calculate a Trend - +
+ Not Enough Data to calculate a Trend
); } const ticks = generateTicks(startDate, endDate, 5); + const tickColor = props.theme === Theme.Dark ? '#FFF' : '#000'; + return ( -
+
= (props: TrendProps) => { tickSize={15} interval={0} type={'number'} - tick={{ fill: '#FFFFFF' }} + tick={{ fill: tickColor }} ticks={ticks} domain={[startDate.getTime(), endDate.getTime()]} tickFormatter={formatDateTicks} /> { if (componentProps.message) { return ( -
- {componentProps.message} +
+ {componentProps.message}
); } else if (componentProps.loading) { return ( -
+
); } else if (noData) { return ( -
+
No Data = (props: Props) => { - const color = useMemo( - () => (props.color ? props.color : '#000000'), - [props.color], - ); const scale = props.scale ? props.scale : 1; return ( @@ -19,15 +15,13 @@ const ChangeFailureRateIcon: React.FC = (props: Props) => { viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" transform={`scale(${scale} ${scale})`} + className={styles.metricIcon} > - diff --git a/src/icons/ChangeLeadTimeIcon.tsx b/src/icons/ChangeLeadTimeIcon.tsx index 5885904..ac021cd 100644 --- a/src/icons/ChangeLeadTimeIcon.tsx +++ b/src/icons/ChangeLeadTimeIcon.tsx @@ -1,20 +1,16 @@ -import React, { useMemo } from 'react'; +import React from 'react'; +import styles from './icon.module.css'; interface Props { - color?: string; scale?: number; } const ChangeLeadTimeIcon: React.FC = (props: Props) => { - const color = useMemo( - () => (props.color ? props.color : '#000000'), - [props.color], - ); const scale = props.scale ? props.scale : 1; return ( = (props: Props) => { > = (props: Props) => { - const color = useMemo( - () => (props.color ? props.color : '#000000'), - [props.color], - ); const scale = props.scale ? props.scale : 1; return ( = (props: Props) => { > diff --git a/src/icons/ScoreIcon.tsx b/src/icons/MetricIcon.tsx similarity index 81% rename from src/icons/ScoreIcon.tsx rename to src/icons/MetricIcon.tsx index 627c301..459d026 100644 --- a/src/icons/ScoreIcon.tsx +++ b/src/icons/MetricIcon.tsx @@ -2,6 +2,7 @@ import React, { ReactNode, Dispatch, SetStateAction } from 'react'; import { DoraMetric } from '../interfaces/metricInterfaces'; import IconRim from './Rim'; import { purple } from '../constants'; +import styles from './icon.module.css'; interface Props { metric: DoraMetric; @@ -12,7 +13,7 @@ interface Props { alwaysShowDetails?: boolean; } -const ScoreIcon: React.FC = (props: Props) => { +const MetricIcon: React.FC = (props: Props) => { const childrenWithOverriddenProps = React.Children.map( props.children, (child: any) => { @@ -21,9 +22,9 @@ const ScoreIcon: React.FC = (props: Props) => { ); return ( -
+
props.setTooltipContent( @@ -36,7 +37,7 @@ const ScoreIcon: React.FC = (props: Props) => {
{props.alwaysShowDetails && ( -
+
{props.metricTitle}:
{props.metric.display} @@ -47,4 +48,4 @@ const ScoreIcon: React.FC = (props: Props) => { ); }; -export default ScoreIcon; +export default MetricIcon; diff --git a/src/icons/RecoverTimeIcon.tsx b/src/icons/RecoverTimeIcon.tsx index 685f7f2..64a783b 100644 --- a/src/icons/RecoverTimeIcon.tsx +++ b/src/icons/RecoverTimeIcon.tsx @@ -1,19 +1,16 @@ -import React, { useMemo } from 'react'; +import React from 'react'; +import styles from './icon.module.css'; interface Props { - color?: string; scale?: number; } const RecoverTimeIcon: React.FC = (props: Props) => { - const color = useMemo( - () => (props.color ? props.color : '#000000'), - [props.color], - ); const scale = props.scale ? props.scale : 1; return ( = (props: Props) => { > - + = (props: Props) => { /> = (props: Props) => { return (
props.setTooltipContent(`${props.metricTitle}: ${props.metric.display}`) @@ -41,7 +41,7 @@ const TrendIcon: React.FC = (props: Props) => {
{props.alwaysShowDetails && ( -
+
{props.metricTitle}:
{props.metric.display} diff --git a/src/icons/TrendIndicator.tsx b/src/icons/TrendIndicator.tsx index 8becc7a..34477b3 100644 --- a/src/icons/TrendIndicator.tsx +++ b/src/icons/TrendIndicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { DoraTrend } from '../interfaces/metricInterfaces'; import { green, grey, purple, yellow } from '../constants'; +import styles from './icon.module.css'; interface Props { trend: DoraTrend; @@ -12,7 +13,7 @@ const TrendIndicator: React.FC = (props: Props) => { if (props.trend === DoraTrend.Unknown) { indicator = ( = (props: Props) => { } else if (props.trend === DoraTrend.Neutral) { indicator = ( = (props: Props) => { indicator = ( = () => { const graphArgs = useGraph(dataSet); + const isDark = useDarkMode(); const [hideColors, setHideColors] = useState(false); const [showTrends, setShowTrends] = useState(false); @@ -39,7 +41,7 @@ const Template: StoryFn = () => { }; return ( -
+
= () => { message={graphArgs.message} data={graphArgs.data} holidays={graphArgs.holidays} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/ChangeFailureRate.stories.tsx b/stories/ChangeFailureRate.stories.tsx index f7c63af..6493227 100644 --- a/stories/ChangeFailureRate.stories.tsx +++ b/stories/ChangeFailureRate.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { StoryFn, Meta } from '@storybook/react'; import ChangeFailureRateGraph from '../src/ChangeFailureRateGraph'; -import { ChartProps } from '../src/interfaces/propInterfaces'; +import { ChartProps, Theme } from '../src/interfaces/propInterfaces'; import dataSet from './data'; import { changeFailureRateName } from '../src/constants'; import './general.css'; import { useGraph } from './useGraph'; import MetricEditor from './MetricEditor'; import EditPanel from './EditPanel'; +import { useDarkMode } from 'storybook-dark-mode'; export default { title: 'ChangeFailureRateGraph', @@ -16,9 +17,10 @@ export default { const Template: StoryFn = () => { const graphArgs = useGraph(dataSet); + const isDark = useDarkMode(); return ( -
+
= () => { message={graphArgs.message} data={graphArgs.data} holidays={graphArgs.holidays} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/ChangeLeadTime.stories.tsx b/stories/ChangeLeadTime.stories.tsx index e212f32..a5f45ee 100644 --- a/stories/ChangeLeadTime.stories.tsx +++ b/stories/ChangeLeadTime.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { StoryFn, Meta } from '@storybook/react'; import ChangeLeadTimeGraph from '../src/ChangeLeadTimeGraph'; -import { ChartProps } from '../src/interfaces/propInterfaces'; +import { ChartProps, Theme } from '../src/interfaces/propInterfaces'; import dataSet from './data'; import { changeLeadTimeName } from '../src/constants'; import './general.css'; import { useGraph } from './useGraph'; import MetricEditor from './MetricEditor'; import EditPanel from './EditPanel'; +import { useDarkMode } from 'storybook-dark-mode'; export default { title: 'ChangeLeadTimeGraph', @@ -16,9 +17,10 @@ export default { const Template: StoryFn = () => { const graphArgs = useGraph(dataSet); + const isDark = useDarkMode(); return ( -
+
= () => { message={graphArgs.message} data={graphArgs.data} holidays={graphArgs.holidays} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/DeploymentFrequency.stories.tsx b/stories/DeploymentFrequency.stories.tsx index acd925e..57f9964 100644 --- a/stories/DeploymentFrequency.stories.tsx +++ b/stories/DeploymentFrequency.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { StoryFn, Meta } from '@storybook/react'; import DeploymentFrequencyGraph from '../src/DeploymentFrequencyGraph'; -import { ChartProps } from '../src/interfaces/propInterfaces'; +import { ChartProps, Theme } from '../src/interfaces/propInterfaces'; import dataSet from './data'; import { deploymentFrequencyName } from '../src/constants'; import './general.css'; import { useGraph } from './useGraph'; import MetricEditor from './MetricEditor'; import EditPanel from './EditPanel'; +import { useDarkMode } from 'storybook-dark-mode'; export default { title: 'DeploymentFrequencyGraph', @@ -16,9 +17,10 @@ export default { const Template: StoryFn = () => { const graphArgs = useGraph(dataSet); + const isDark = useDarkMode(); return ( -
+
= () => { message={graphArgs.message} data={graphArgs.data} holidays={graphArgs.holidays} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/RecoverTime.stories.tsx b/stories/RecoverTime.stories.tsx index 6015e16..b2257af 100644 --- a/stories/RecoverTime.stories.tsx +++ b/stories/RecoverTime.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { StoryFn, Meta } from '@storybook/react'; import RecoverTimeGraph from '../src/RecoverTimeGraph'; -import { ChartProps } from '../src/interfaces/propInterfaces'; +import { ChartProps, Theme } from '../src/interfaces/propInterfaces'; import dataSet from './data'; import { recoverTimeName } from '../src/constants'; import './general.css'; import { useGraph } from './useGraph'; import MetricEditor from './MetricEditor'; import EditPanel from './EditPanel'; +import { useDarkMode } from 'storybook-dark-mode'; export default { title: 'RecoverTimeGraph', @@ -16,9 +17,10 @@ export default { const Template: StoryFn = () => { const graphArgs = useGraph(dataSet); + const isDark = useDarkMode(); return ( -
+
= () => { message={graphArgs.message} data={graphArgs.data} holidays={graphArgs.holidays} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/Trends.stories.tsx b/stories/Trends.stories.tsx index 6464041..cd2d7cc 100644 --- a/stories/Trends.stories.tsx +++ b/stories/Trends.stories.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { StoryFn, Meta } from '@storybook/react'; import TrendGraph from '../src/TrendGraph'; -import { ChartProps } from '../src/interfaces/propInterfaces'; +import { ChartProps, Theme } from '../src/interfaces/propInterfaces'; import dataSet from './data'; import { getDateRange, isWeekend } from '../src/functions/dateFunctions'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { millisecondsToDays } from '../src/constants'; +import { useDarkMode } from 'storybook-dark-mode'; export default { title: 'TrendGraph', @@ -15,6 +16,7 @@ export default { const Template: StoryFn = () => { let { start, end } = getDateRange(dataSet[0]); + const isDark = useDarkMode(); if (end.getTime() - start.getTime() < millisecondsToDays) { start = new Date(start.getTime() - millisecondsToDays); @@ -65,7 +67,7 @@ const Template: StoryFn = () => { }; return ( -
+
@@ -105,6 +107,7 @@ const Template: StoryFn = () => { data={data} graphStart={graphStart} graphEnd={graphEnd} + theme={isDark ? Theme.Dark : Theme.Light} />
); diff --git a/stories/general.css b/stories/general.css index ab825b5..70e646b 100644 --- a/stories/general.css +++ b/stories/general.css @@ -27,12 +27,13 @@ input[type='number'] { display: flex; justify-content: center; align-items: center; - color: rgb(172, 172, 172); + color: var(--react-dora-charts-text-color); flex-wrap: wrap; } .editorFieldContainer > :first-child { - color: white; + color: var(--react-dora-charts-text-color); + font-weight: bold; } .editorMetricInput {