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 | 1x 1x 1x 1x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 1x | // Utils
import { combineClasses } from '@shared/utils';
import { isTruthy } from '@/utils/validation';
// Types
import { ChartKey, ChartRow, LineChartRow } from '@/types/chart';
// Constants
import { EXCLUDED_CHART_KEYS } from '@/constants/chart';
type TickProps = {
x: number;
y: number;
payload?: {
value: number | string;
index: number;
};
activeIndex?: number | null;
data: (ChartRow | LineChartRow)[];
excludeKeys?: string[];
};
const CustomXAxisTick = ({
x,
y,
payload,
activeIndex = null,
data,
excludeKeys = EXCLUDED_CHART_KEYS,
}: TickProps) => {
const isActive =
isTruthy(activeIndex) && Number(payload?.index) === Number(activeIndex);
const row = payload?.index != null ? data[payload.index] : {};
const rowData = row as Partial<Record<ChartKey, number | null>> & {
label: string;
};
const noData = Object.keys(rowData)
.filter((k) => !excludeKeys.includes(k))
.every((k) => !rowData[k as keyof typeof rowData]);
return (
<text
x={x}
y={y + 10}
textAnchor="middle"
fill="currentColor"
className={combineClasses(
'text-5xs font-semibold',
isActive ? 'text-secondary-150' : 'text-frost-900 dark:text-background',
noData && 'text-frost-250 dark:text-slate-400',
)}
>
{payload?.value}
</text>
);
};
export default CustomXAxisTick;
|