50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useDispatch, useSelector } from '@/redux';
|
|
import type { IInterval } from '@/types';
|
|
import { intervals, timeRanges } from '@/utils/constants';
|
|
|
|
import { Combobox } from '../ui/combobox';
|
|
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
|
|
import { changeDateRanges, changeInterval } from './reportSlice';
|
|
|
|
export function ReportDateRange() {
|
|
const dispatch = useDispatch();
|
|
const range = useSelector((state) => state.report.range);
|
|
const interval = useSelector((state) => state.report.interval);
|
|
const chartType = useSelector((state) => state.report.chartType);
|
|
|
|
return (
|
|
<>
|
|
<RadioGroup>
|
|
{timeRanges.map((item) => {
|
|
return (
|
|
<RadioGroupItem
|
|
key={item.range}
|
|
active={item.range === range}
|
|
onClick={() => {
|
|
dispatch(changeDateRanges(item.range));
|
|
}}
|
|
>
|
|
{item.title}
|
|
</RadioGroupItem>
|
|
);
|
|
})}
|
|
</RadioGroup>
|
|
{chartType === 'linear' && (
|
|
<div className="w-full max-w-[200px]">
|
|
<Combobox
|
|
placeholder="Interval"
|
|
onChange={(value) => {
|
|
dispatch(changeInterval(value as IInterval));
|
|
}}
|
|
value={interval}
|
|
items={Object.entries(intervals).map(([key, value]) => ({
|
|
label: value,
|
|
value: key,
|
|
}))}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|