Skip to content

Commit

Permalink
chore(fe): simplifying data qualuty component
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreyNenashev
AndreyNenashev committed Nov 7, 2023
1 parent 99786d0 commit 2e767cc
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 67 deletions.
1 change: 1 addition & 0 deletions odd-platform-ui/src/components/DataQuality/DataQuality.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const Container = styled.section(
display: grid;
justify-content: center;
margin-top: ${theme.spacing(5)};
margin-bottom: ${theme.spacing(5)};
gap: ${theme.spacing(3)};
`
);
Expand Down
66 changes: 24 additions & 42 deletions odd-platform-ui/src/components/DataQuality/DataQuality.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ function calcTestResultsBreakdown(categoryResults: DataQualityCategoryResults[])
);
}

function createDonutChartData(category: string, value: number, color: string) {
return { title: category, value, color };
}

const DataQuality: React.FC = () => {
const { data, isSuccess } = useGetDataQualityDashboard();
const { palette } = useTheme();
Expand All @@ -42,52 +46,36 @@ const DataQuality: React.FC = () => {
const testResultsBreakdownChartData = useMemo(() => {
if (!data) return [];
const breakdown = calcTestResultsBreakdown(data.testResults);
return Array.from(breakdown.statusCounts.entries()).map(([status, count]) => ({
title: status,
value: count,
color: palette.runStatus[status].color,
}));
}, [data?.testResults]);
return Array.from(breakdown.statusCounts.entries()).map(([status, count]) =>
createDonutChartData(
status,
count,
palette.runStatus[status].color ?? palette.dataQualityDashboard.unknown
)
);
}, [data?.testResults, palette.runStatus]);

const tableHealthData = useMemo(() => {
if (!data) return [];
const { healthyTables, warningTables, errorTables } =
data.tablesDashboard.tablesHealth;
const { healthy, warning, error } = palette.dataQualityDashboard;
return [
{
title: 'Healthy',
value: healthyTables,
color: palette.runStatus.SUCCESS.color,
},
{
title: 'Warning',
value: warningTables,
color: palette.runStatus.BROKEN.color,
},
{
title: 'Error',
value: errorTables,
color: palette.runStatus.FAILED.color,
},
createDonutChartData('Healthy', healthyTables, healthy),
createDonutChartData('Warning', warningTables, warning),
createDonutChartData('Error', errorTables, error),
];
}, [data?.tablesDashboard.monitoredTables]);
}, [data?.tablesDashboard.tablesHealth, palette.dataQualityDashboard]);

const tableMonitoredTables = useMemo(() => {
if (!data) return [];
const { monitoredTables, notMonitoredTables } = data.tablesDashboard.monitoredTables;
const { monitored, nonMonitored } = palette.dataQualityDashboard;
return [
{
title: 'Monitored',
value: monitoredTables,
color: palette.runStatus.SUCCESS.color,
},
{
title: 'Not Monitored',
value: notMonitoredTables,
color: palette.runStatus.UNKNOWN.color,
},
createDonutChartData('Monitored', monitoredTables, monitored),
createDonutChartData('Not Monitored', notMonitoredTables, nonMonitored),
];
}, [data?.tablesDashboard.monitoredTables]);
}, [data?.tablesDashboard.monitoredTables, palette.dataQualityDashboard]);

const testResults = useMemo(() => {
if (!data) return [];
Expand All @@ -110,28 +98,24 @@ const DataQuality: React.FC = () => {
</S.DashboardLegend>
<S.SubSection>
<S.ChartWrapper>
<Typography variant='title' component='h4' align='center'>
{t('Table Health')}
</Typography>
<DonutChart
width={DONUT_CHART_WIDTH}
height={DONUT_CHART_HEIGHT}
innerRadius={DONUT_CHART_INNER_RADIUS}
outerRadius={DONUT_CHART_OUTER_RADIUS}
label={t('Total Tables')}
title={t('Table Health')}
data={tableHealthData}
/>
</S.ChartWrapper>
<S.ChartWrapper>
<Typography variant='title' component='h4' align='center'>
{t('Test Results Breakdown')}
</Typography>
<DonutChart
width={DONUT_CHART_WIDTH}
height={DONUT_CHART_HEIGHT}
innerRadius={DONUT_CHART_INNER_RADIUS}
outerRadius={DONUT_CHART_OUTER_RADIUS}
label={t('Total Tests')}
title={t('Test Results Breakdown')}
data={testResultsBreakdownChartData}
/>
</S.ChartWrapper>
Expand All @@ -156,15 +140,13 @@ const DataQuality: React.FC = () => {
</S.DashboardLegendItem>
</S.DashboardLegend>
<S.ChartWrapper>
<Typography variant='title' component='h4' align='center'>
{t('Monitored Tables')}
</Typography>
<DonutChart
width={DONUT_CHART_WIDTH}
height={DONUT_CHART_HEIGHT}
innerRadius={DONUT_CHART_INNER_RADIUS}
outerRadius={DONUT_CHART_OUTER_RADIUS}
label={t('Total Tables')}
title={t('Monitored Tables')}
data={tableMonitoredTables}
/>
</S.ChartWrapper>
Expand Down
59 changes: 34 additions & 25 deletions odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { LabelProps, PieLabelRenderProps } from 'recharts';
import { typography } from 'theme/typography';
import type { PolarViewBox } from 'recharts/types/util/types';
import { palette } from 'theme/palette';
import { Typography } from '@mui/material';

interface DonutChartData {
title: string;
Expand All @@ -14,6 +15,7 @@ interface DonutChartData {
interface DonutChartProps extends Omit<React.ComponentProps<typeof PieChart>, 'data'> {
data: DonutChartData[];
label?: string;
title?: string;
}
const RADIAN = Math.PI / 180;
const CustomLabel = ({
Expand Down Expand Up @@ -81,7 +83,7 @@ const CustomPieLabel = ({ viewBox, value, label }: LabelProps & { label?: string
};

const DonutChart: React.FC<DonutChartProps> = props => {
const { data: rawData, label, ...pieChartProps } = props;
const { data: rawData, label, title, ...pieChartProps } = props;
const { width, height, innerRadius, outerRadius } = pieChartProps;
const totalValue = useMemo(
() => rawData.reduce((acc, { value }) => acc + value, 0),
Expand All @@ -96,30 +98,37 @@ const DonutChart: React.FC<DonutChartProps> = props => {
}, [rawData, totalValue]);

return (
<PieChart width={width} height={height}>
<Pie
label={totalValue ? CustomLabel : false}
labelLine={false}
data={data}
dataKey='value'
nameKey='title'
cx='50%'
cy='50%'
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={90}
endAngle={-270}
>
<Label
width={30}
position='center'
content={<CustomPieLabel value={totalValue} label={label} />}
/>
{data.map(entry => (
<Cell key={entry.title} fill={entry.color} />
))}
</Pie>
</PieChart>
<>
{title ? (
<Typography variant='title' component='h4' align='center'>
{title}
</Typography>
) : null}
<PieChart width={width} height={height}>
<Pie
label={totalValue ? CustomLabel : false}
labelLine={false}
data={data}
dataKey='value'
nameKey='title'
cx='50%'
cy='50%'
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={90}
endAngle={-270}
>
<Label
width={30}
position='center'
content={<CustomPieLabel value={totalValue} label={label} />}
/>
{data.map(entry => (
<Cell key={entry.title} fill={entry.color} />
))}
</Pie>
</PieChart>
</>
);
};

Expand Down
12 changes: 12 additions & 0 deletions odd-platform-ui/src/theme/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@ interface ItemCondition {
disabled?: ItemColors;
}

type DataQualityDashboardLegend =
| 'monitored'
| 'nonMonitored'
| 'healthy'
| 'warning'
| 'error'
| 'unknown';

type Input = ItemCondition & {
label: ItemColors;
hint: ItemColors;
Expand All @@ -46,6 +54,8 @@ type ReportStatus = Record<DataEntityRunStatus, ItemColors>;

type RunStatus = Record<DataEntityRunStatus, ItemColors>;

type DataQualityDashboard = Record<DataQualityDashboardLegend, string>;

type AssociationRequestStatus = Record<OwnerAssociationRequestStatus, ItemColors>;

type SLAStatus = Record<DataQualityTestSeverity | SLAColour, string>;
Expand Down Expand Up @@ -112,6 +122,7 @@ declare module '@mui/material/styles' {
entityClass: EntityClasses;
reportStatus: ReportStatus;
runStatus: RunStatus;
dataQualityDashboard: DataQualityDashboard;
associationRequestStatus: AssociationRequestStatus;
button: Button;
tag: Tag;
Expand All @@ -137,6 +148,7 @@ declare module '@mui/material/styles' {
entityClass?: EntityClasses;
reportStatus?: ReportStatus;
runStatus?: RunStatus;
dataQualityDashboard?: DataQualityDashboard;
associationRequestStatus?: AssociationRequestStatus;
button?: Button;
tag?: Tag;
Expand Down
8 changes: 8 additions & 0 deletions odd-platform-ui/src/theme/palette.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,14 @@ export const palette = createPalette({
DATA_QUALITY_TEST_RUN: colors.orange5,
DATA_ENTITY_GROUP: colors.lightGreen5,
},
dataQualityDashboard: {
monitored: colors.green60,
nonMonitored: colors.black30,
healthy: colors.green60,
warning: colors.orange50,
error: colors.red50,
unknown: colors.black30,
},
runStatus: {
SUCCESS: { color: colors.green60, background: colors.green5 },
FAILED: { color: colors.red50, background: colors.red5 },
Expand Down

0 comments on commit 2e767cc

Please sign in to comment.