Skip to content

Commit

Permalink
Add graph colors to theme
Browse files Browse the repository at this point in the history
  • Loading branch information
canac committed Dec 12, 2024
1 parent 4537890 commit 31a2a39
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 21 deletions.
25 changes: 18 additions & 7 deletions src/components/Dashboard/DonationHistories/DonationHistories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Skeleton,
Theme,
Typography,
useTheme,
} from '@mui/material';
import { DateTime } from 'luxon';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -82,11 +83,17 @@ const DonationHistories = ({
setTime,
}: Props): ReactElement => {
const { classes } = useStyles();
const { palette } = useTheme();
const { push } = useRouter();
const { t } = useTranslation();
const locale = useLocale();
const accountListId = useAccountListId();
const fills = ['#FFCF07', '#30F2F2', '#1FC0D2', '#007398'];
const fills = [
palette.cruYellow.main,
palette.graphBlue3.main,
palette.graphBlue2.main,
palette.graphBlue1.main,
];
const currencies: { dataKey: string; fill: string }[] = [];
const periods = reportsDonationHistories?.periods?.map((period) => {
const data: {
Expand Down Expand Up @@ -157,7 +164,7 @@ const DonationHistories = ({
<LegendReferenceLine
name={t('Goal')}
value={currencyFormat(goal, currencyCode, locale)}
color="#17AEBF"
color={palette.graphTeal.main}
/>
</Grid>
<Grid item>|</Grid>
Expand Down Expand Up @@ -194,7 +201,7 @@ const DonationHistories = ({
<LegendReferenceLine
name={t('Committed')}
value={currencyFormat(pledged, currencyCode, locale)}
color="#FFCF07"
color={palette.cruYellow.main}
/>
</Grid>
</>
Expand Down Expand Up @@ -238,19 +245,19 @@ const DonationHistories = ({
{goal && (
<ReferenceLine
y={goal}
stroke="#17AEBF"
stroke={palette.graphTeal.main}
strokeWidth={3}
/>
)}
<ReferenceLine
y={reportsDonationHistories?.averageIgnoreCurrent}
stroke="#9C9FA1"
stroke={palette.cruGrayMedium.main}
strokeWidth={3}
/>
{pledged && (
<ReferenceLine
y={pledged}
stroke="#FFCF07"
stroke={palette.cruYellow.main}
strokeWidth={3}
/>
)}
Expand Down Expand Up @@ -294,7 +301,11 @@ const DonationHistories = ({
<BarChart data={periods}>
<XAxis tickLine={false} dataKey="startDate" />
<Tooltip />
<Bar dataKey="total" fill="#007398" barSize={10} />
<Bar
dataKey="total"
fill={palette.graphBlue1.main}
barSize={10}
/>
</BarChart>
</ResponsiveContainer>
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Card, CardContent, CardHeader } from '@mui/material';
import { Card, CardContent, CardHeader, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import {
Bar,
Expand All @@ -25,18 +25,23 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
accountListId,
}) => {
const { t } = useTranslation();
const { palette } = useTheme();

const { loading, average, periods } = useGraphData(accountListId);

const stacks = [
{ field: 'ownership', label: t('Ownership'), color: '#FFCF07' },
{ field: 'success', label: t('Success'), color: '#30F2F2' },
{
field: 'ownership',
label: t('Ownership'),
color: palette.cruYellow.main,
},
{ field: 'success', label: t('Success'), color: palette.graphBlue1.main },
{
field: 'consistency',
label: t('Consistency'),
color: '#1FC0D2',
color: palette.graphBlue2.main,
},
{ field: 'depth', label: t('Depth'), color: '#007398' },
{ field: 'depth', label: t('Depth'), color: palette.graphBlue3.main },
];

if (periods?.length === 0) {
Expand Down Expand Up @@ -64,7 +69,7 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
<LegendReferenceLine
name={t('Average')}
value={average}
color="#17AEBF"
color={palette.graphTeal.main}
/>
)
}
Expand All @@ -91,7 +96,11 @@ export const HealthIndicatorGraph: React.FC<HealthIndicatorGraphProps> = ({
}
/>
{average !== null && (
<ReferenceLine y={average} stroke="#17AEBF" strokeWidth={3} />
<ReferenceLine
y={average}
stroke={palette.graphTeal.main}
strokeWidth={3}
/>
)}
<XAxis tickLine={false} dataKey="month" />
<YAxis
Expand Down
43 changes: 36 additions & 7 deletions src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,10 @@ const cruColors = {
grayLight: '#EBECEC',
};

const statusColors = {
success: '#5CB85C',
warning: '#8A6D3B',
danger: '#A94442',
};

const mpdxColors = {
green: '#00CA99',
blue: '#05699B',
blueLight: '#e7f2f7',
blueLight: '#E7F2F7',
yellow: '#FFF5CD',
gray: '#DCDCDC',
};
Expand All @@ -29,6 +23,20 @@ const progressBarColors = {
orange: '#DD7D1A',
gray: '#808080',
};

const statusColors = {
success: '#5CB85C',
warning: '#8A6D3B',
danger: '#A94442',
};

const graphColors = {
blue1: '#007398',
blue2: '#1FC0D2',
blue3: '#30F2F2',
teal: '#17AEBF',
};

// https://material-ui.com/customization/palette/#adding-new-colors
declare module '@mui/material/styles/createPalette' {
interface Palette {
Expand All @@ -46,7 +54,12 @@ declare module '@mui/material/styles/createPalette' {
statusSuccess: Palette['primary'];
statusWarning: Palette['primary'];
statusDanger: Palette['primary'];
graphBlue1: Palette['primary'];
graphBlue2: Palette['primary'];
graphBlue3: Palette['primary'];
graphTeal: Palette['primary'];
}

interface PaletteOptions {
cruYellow: PaletteOptions['primary'];
cruGrayDark: PaletteOptions['primary'];
Expand All @@ -62,6 +75,10 @@ declare module '@mui/material/styles/createPalette' {
statusSuccess: PaletteOptions['primary'];
statusWarning: PaletteOptions['primary'];
statusDanger: PaletteOptions['primary'];
graphBlue1: PaletteOptions['primary'];
graphBlue2: PaletteOptions['primary'];
graphBlue3: PaletteOptions['primary'];
graphTeal: PaletteOptions['primary'];
}
}

Expand Down Expand Up @@ -125,6 +142,18 @@ const theme = createTheme({
statusDanger: {
main: statusColors.danger,
},
graphBlue1: {
main: graphColors.blue1,
},
graphBlue2: {
main: graphColors.blue2,
},
graphBlue3: {
main: graphColors.blue3,
},
graphTeal: {
main: graphColors.teal,
},
},
components: {
MuiCard: {
Expand Down

0 comments on commit 31a2a39

Please sign in to comment.