Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 15x 18x 18x 18x 18x 17x 17x | import { css, useTheme } from '@emotion/react';
import { round } from 'lodash-es';
import { memo } from 'react';
import { Stack, Typography, useColorSchemeContext } from '@allshares/studio-design-system';
import { FormattedPercent } from '@amalia/kernel/intl/components';
import { DashboardWidget } from '../dashboard-widget/DashboardWidget';
import { DonutChart } from '../donut-chart/DonutChart';
type DashboardKpiProps = {
readonly label?: string;
readonly color: string;
readonly value?: number;
readonly emptyMessage?: string;
readonly loading?: boolean;
};
export const DashboardKpi = memo(function Kpi({ label, color, value, emptyMessage, loading }: DashboardKpiProps) {
const { colorScheme } = useColorSchemeContext();
const theme = useTheme();
const kpiValue = value ? round(value * 100) : undefined;
return (
<DashboardWidget>
<DonutChart
colors={[colorScheme === 'dark' ? theme.ds.colors.dark[600] : theme.ds.colors.graySecondary[100], color]}
innerRadius={35}
loading={loading}
thickness={7}
data={[
{ name: 'Remainder', value: 100 - (kpiValue || 0) },
{ name: 'Progress', value: kpiValue || 0 },
]}
ReplaceAnnotation={() =>
kpiValue ? (
<Stack
css={css`
margin-left: 20px;
width: fill-available;
`}
>
<div
css={css`
width: 100%;
`}
>
<Typography
variant="bodyBaseRegular"
css={(theme) => css`
color: ${theme.ds.colors.gray[600]};
text-transform: uppercase;
[data-color-scheme='dark'] & {
color: ${theme.ds.colors.gray[500]};
}
`}
>
{label}
</Typography>
</div>
<Typography variant="heading4Bold">
<FormattedPercent value={value ?? 0} />
</Typography>
</Stack>
) : (
<Stack
justify="center"
css={css`
margin-left: 15px;
width: fill-available;
height: 100%;
`}
>
<div
css={css`
width: 100%;
`}
>
<Typography
variant="bodyBaseRegular"
css={(theme) => css`
color: ${theme.ds.colors.gray[600]};
[data-color-scheme='dark'] & {
color: ${theme.ds.colors.gray[500]};
}
`}
>
{emptyMessage}
</Typography>
</div>
</Stack>
)
}
/>
</DashboardWidget>
);
});
|