umami/components/charts/QuickButtons.js

32 lines
733 B
JavaScript
Raw Normal View History

2020-07-31 05:11:43 +02:00
import React from 'react';
2020-07-30 10:08:21 +02:00
import classNames from 'classnames';
2020-08-08 05:36:57 +02:00
import Button from '../common/Button';
2020-07-30 10:08:21 +02:00
import { getDateRange } from 'lib/date';
import styles from './QuickButtons.module.css';
const options = {
'24hour': '24h',
'7day': '7d',
'30day': '30d',
};
2020-07-31 05:11:43 +02:00
export default function QuickButtons({ value, onChange }) {
2020-07-30 10:08:21 +02:00
function handleClick(value) {
onChange(getDateRange(value));
}
return (
<div className={styles.buttons}>
{Object.keys(options).map(key => (
<Button
2020-07-30 10:08:21 +02:00
key={key}
2020-08-06 04:04:02 +02:00
className={classNames(styles.button, { [styles.active]: value === key })}
2020-07-30 10:08:21 +02:00
onClick={() => handleClick(key)}
>
{options[key]}
</Button>
2020-07-30 10:08:21 +02:00
))}
</div>
);
}