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 | 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 5x 5x 5x 5x 5x 5x 10x 10x 2x 2x 2x 10x 10x 5x 5x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 5x 5x 5x 5x | import { ChartKey } from '@/types/chart';
import { formatResult } from '@/utils/statistic';
import { computeChange } from '@/utils/statisticComparison';
import { ComparisonBoxes } from '@/components/ComparisonBoxes';
import { Stats } from '@/types';
import './style.css';
type ColorVariant =
| 'primary'
| 'secondaryResult'
| 'goldResult'
| 'default'
| 'secondary'
| 'gold';
interface Props {
stats: Stats[];
comparisonMode: ChartKey;
colors: ColorVariant[];
}
export const ComparisonBoxesGroup = ({
stats,
comparisonMode,
colors,
}: Props) => {
if (!stats || stats.length <= 1) return;
return (
<div className="max-w-[1300px] overflow-x-auto scrollbar-thin-x">
<div
data-testid="comparison-boxes-group"
className="flex gap-10 items-center"
>
{stats.map((statItem, idx) => {
const target = statItem[comparisonMode] ?? { total: 0, avg: 0 };
const baselineTarget = stats[0]?.[comparisonMode] ?? {
total: 0,
avg: 0,
};
const { isIncrease, changeNumber } =
idx > 0
? computeChange(target.total, baselineTarget.total)
: { isIncrease: undefined, changeNumber: undefined };
return (
<ComparisonBoxes
key={idx}
resultTotal={formatResult(target.total)}
resultAvg={formatResult(target.avg)}
mode={comparisonMode}
colorVariant={colors[idx] ?? 'default'}
changeNumber={changeNumber}
isIncrease={isIncrease}
/>
);
})}
</div>
</div>
);
};
|