watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Initial expanded view in details.

Browse source
This commit is contained in:
Mike Cao 2020-08-09 03:04:48 -07:00
parent b392a51676
commit f535dca7b9
14 changed files with 108 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/WebsiteDetails.js
View file

@ -9,15 +9,18 @@ import { get } from 'lib/web';
import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
import styles from './WebsiteDetails.module.css';
import PageHeader from './layout/PageHeader';
import MenuLayout from './layout/MenuLayout';
const pageviewClasses = 'col-md-12 col-lg-6';
const sessionClasses = 'col-12 col-lg-4';
const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];
export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
const [data, setData] = useState();
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
const [expand, setExpand] = useState();
const { startDate, endDate } = dateRange;
async function loadData() {
@ -32,6 +35,14 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
setTimeout(() => setDateRange(values), 300);
}
function handleExpand(title) {
setExpand(title);
}
function handleMenuSelect(title) {
setExpand(title);
}
useEffect(() => {
if (websiteId) {
loadData();
@ -55,7 +66,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
/>
</div>
</div>
{chartLoaded && (
{chartLoaded && !expand && (
<>
<div className={classNames(styles.row, 'row')}>
<div className={pageviewClasses}>
@ -67,6 +78,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={urlFilter}
onExpand={handleExpand}
/>
</div>
<div className={pageviewClasses}>
@ -78,6 +90,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={refFilter(data.domain)}
onExpand={handleExpand}
/>
</div>
</div>
@ -91,6 +104,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={browserFilter}
onExpand={handleExpand}
/>
</div>
<div className={sessionClasses}>
@ -101,6 +115,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
onExpand={handleExpand}
/>
</div>
<div className={sessionClasses}>
@ -112,6 +127,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
startDate={startDate}
endDate={endDate}
dataFilter={deviceFilter}
onExpand={handleExpand}
/>
</div>
</div>
@ -129,11 +145,21 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
endDate={endDate}
dataFilter={countryFilter}
onDataLoad={data => setCountryData(data)}
onExpand={handleExpand}
/>
</div>
</div>
</>
)}
{expand && (
<MenuLayout
className={styles.expand}
menuClassName={styles.menu}
menu={menuOptions}
selectedOption={expand}
onMenuSelect={handleMenuSelect}
/>
)}
</Page>
);
}