Events chart.

This commit is contained in:
Mike Cao 2020-08-27 03:42:24 -07:00
parent 5f47f328be
commit 4618dc7f15
9 changed files with 220 additions and 226 deletions

View file

@ -17,6 +17,7 @@ import OSTable from './metrics/OSTable';
import DevicesTable from './metrics/DevicesTable';
import CountriesTable from './metrics/CountriesTable';
import EventsTable from './metrics/EventsTable';
import EventsChart from './metrics/EventsChart';
export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
const [data, setData] = useState();
@ -25,7 +26,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
const [expand, setExpand] = useState();
const [showEvents, setShowEvents] = useState(false);
const { startDate, endDate } = dateRange;
const { startDate, endDate, unit } = dateRange;
const BackButton = () => (
<Button
@ -55,10 +56,15 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
{ label: 'Events', value: 'event', component: EventsTable },
];
const tableProps = {
const dataProps = {
websiteId,
startDate,
endDate,
unit,
};
const tableProps = {
...dataProps,
limit: 10,
onExpand: handleExpand,
websiteDomain: data?.domain,
@ -66,6 +72,10 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
const DetailsComponent = expand?.component;
function getSelectedMenuOption(value) {
return menuOptions.find(e => e.value === value);
}
async function loadData() {
setData(await get(`/api/website/${websiteId}`));
}
@ -79,11 +89,11 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
}
function handleExpand(value) {
setExpand(menuOptions.find(e => e.value === value));
setExpand(getSelectedMenuOption(value));
}
function handleMenuSelect(value) {
setExpand(menuOptions.find(e => e.value === value));
setExpand(getSelectedMenuOption(value));
}
useEffect(() => {
@ -142,7 +152,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
<div className="col-12 col-md-12 col-lg-4">
<EventsTable {...tableProps} onDataLoad={data => setShowEvents(data.length > 0)} />
</div>
<div className="col-12 col-md-12 col-lg-8">events</div>
<div className="col-12 col-md-12 col-lg-8">
<EventsChart {...dataProps} />
</div>
</div>
</>
)}