analytics/assets/js/dashboard/historical.js
Vignesh Joglekar 3b97ecdc62
Adds Main Graph Metric Selection (#1364)
* First pass bringing in previous graph improvements, and comparsion context

* Swaps issue template to new issue form syntax

* Indentation update

* Indentation update?

* More indentation

* Intendation is hard

* Finalized indentation?

* Github indentation

* Missing fields

* Formatting changes

* Checkbox changes

* Uses new timeseries API, various UI improvements, descopes conversions, ToP from graphing

* Fixes Mobile UI Issues

* Improves point detection and display on hover

* Fixes & adds tests for updated main-graph API route

* Changelog

* Changes to better metric option declaration & minor UI/default fixes

* Fixes top stat tooltips showing unformatted numbers for special (non-rounded) top stats

* Formatting

* Fixes regression with dashed portion not stopping at present_index

* Removes comparison + lint

* Improves top stat active style

* Removes comparison tests

* Splits out tooltip and top stats

Still needs:
- Tests
- Potentially more cleanup

* Adds/moves tests for top stats

* Formatting

* Updates metric LS key, removes console log

* Various fixes + cleanup

* Makes tooltip position & style more consistent

* Fixes test (returns import status on both main graph & top stats)

* Fixes interaction with month dateFormatter

* Fixes edge case tooltip behavior

It was simpler than I thought :/

* Make the entire top stat clickable

* Minor UI improvements

* Fixes another tooltip visibility edge case + cleans up boolean algebra

Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2022-04-13 10:38:47 +03:00

56 lines
2.1 KiB
JavaScript

import React from 'react';
import Datepicker from './datepicker'
import SiteSwitcher from './site-switcher'
import Filters from './filters'
import CurrentVisitors from './stats/current-visitors'
import VisitorGraph from './stats/graph/visitor-graph'
import Sources from './stats/sources'
import Pages from './stats/pages'
import Locations from './stats/locations';
import Devices from './stats/devices'
import Conversions from './stats/conversions'
import { withPinnedHeader } from './pinned-header-hoc';
function Historical(props) {
function renderConversions() {
if (props.site.hasGoals) {
return (
<div className="items-start justify-between block w-full mt-6 md:flex">
<Conversions site={props.site} query={props.query} />
</div>
)
}
return null
}
return (
<div className="mb-12">
<div id="stats-container-top"></div>
<div className={`relative top-0 sm:py-3 py-2 z-10 ${props.stuck && !props.site.embedded ? 'sticky fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
<div className="items-center w-full flex">
<div className="flex items-center w-full">
<SiteSwitcher site={props.site} loggedIn={props.loggedIn} currentUserRole={props.currentUserRole} />
<CurrentVisitors timer={props.timer} site={props.site} query={props.query} />
<Filters className="flex" site={props.site} query={props.query} history={props.history} />
</div>
<Datepicker site={props.site} query={props.query} />
</div>
</div>
<VisitorGraph site={props.site} query={props.query} />
<div className="items-start justify-between block w-full md:flex">
<Sources site={props.site} query={props.query} />
<Pages site={props.site} query={props.query} />
</div>
<div className="items-start justify-between block w-full md:flex">
<Locations site={props.site} query={props.query} />
<Devices site={props.site} query={props.query} />
</div>
{ renderConversions() }
</div>
)
}
export default withPinnedHeader(Historical, '#stats-container-top');