analytics/assets/js/dashboard/comparison-provider-hoc.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

37 lines
990 B
JavaScript

import React from 'react';
import { ComparisonContext } from './comparison-context'
import * as storage from './util/storage'
export const withComparisonProvider = (WrappedComponent) => {
return class extends React.Component {
constructor(props) {
super(props)
this.state = {
comparison: {
enabled: storage.getItem('comparison__enabled')=='true' || false,
// timePeriod: storage.getItem('comparison__period') || ''
}
};
this.updateComparisonData = this.updateComparisonData.bind(this)
}
updateComparisonData(data) {
const {enabled} = data
storage.setItem('comparison__enabled', enabled || false)
this.setState({comparison: data})
}
render() {
return (
<ComparisonContext.Provider value={{data: this.state.comparison, modifyComparison: this.updateComparisonData}}>
<WrappedComponent {...this.props}/>
</ComparisonContext.Provider>
);
}
}
}