105 lines
3.7 KiB
JavaScript
105 lines
3.7 KiB
JavaScript
import { widgetHOC } from '../common';
|
|
import { TrendChart } from '../TrendChart';
|
|
import { OVERVIEW_WIDGET_MAP } from 'Types/dashboard';
|
|
import { camelCased } from 'App/utils';
|
|
import { connect } from 'react-redux';
|
|
import { updateAppearance } from 'Duck/user';
|
|
import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
|
|
import cn from 'classnames';
|
|
import stl from './overviewWidgets.css';
|
|
|
|
const customParams = rangeName => {
|
|
const params = { density: 16 }
|
|
|
|
if (rangeName === LAST_24_HOURS) params.density = 16
|
|
if (rangeName === LAST_30_MINUTES) params.density = 16
|
|
if (rangeName === YESTERDAY) params.density = 16
|
|
if (rangeName === LAST_7_DAYS) params.density = 16
|
|
|
|
return params
|
|
}
|
|
|
|
@connect(state => ({
|
|
dashboardAppearance: state.getIn([ 'user', 'account', 'appearance', 'dashboard' ]),
|
|
appearance: state.getIn([ 'user', 'account', 'appearance' ]),
|
|
comparing: state.getIn([ 'dashboard', 'comparing' ]),
|
|
}), { updateAppearance })
|
|
@widgetHOC('overview', { customParams }, false)
|
|
export default class OverviewWidgets extends React.PureComponent {
|
|
handleRemove = widgetKey => {
|
|
const { appearance } = this.props;
|
|
this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
|
|
}
|
|
render() {
|
|
const { data, dataCompare, loading, loadingCompare, dashboardAppearance, comparing } = this.props;
|
|
|
|
const widgets = {}
|
|
const widgetsCompare = {}
|
|
data
|
|
.filter(item => dashboardAppearance[camelCased(item.key)]) // TODO should come filtered from API
|
|
.forEach(item => {
|
|
widgets[item.key] = item;
|
|
})
|
|
|
|
if (comparing) {
|
|
dataCompare
|
|
.filter(item => dashboardAppearance[camelCased(item.key)]) // TODO should come filtered from API
|
|
.forEach(item => {
|
|
widgetsCompare[item.key] = item;
|
|
})
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{Object.values(OVERVIEW_WIDGET_MAP).map(item => {
|
|
const widget = widgets[item.key] || {};
|
|
item.data = widget ? widget.chart : {};
|
|
|
|
const widgetCompare = widgetsCompare[item.key] || {};
|
|
if (comparing) {
|
|
item.dataCompare = widgetCompare ? widgetCompare.chart : {};
|
|
}
|
|
if (!dashboardAppearance[item.key]) return;
|
|
|
|
return (
|
|
<div key={item.key} className={cn(stl.wrapper)}>
|
|
<TrendChart
|
|
syncId={item.key}
|
|
loading={loading}
|
|
data={item.data}
|
|
key={item.key}
|
|
tooltipLael={item.tooltipLabel || 'Avg'}
|
|
title={item.name}
|
|
avg={Math.round(widget.value)}
|
|
subtext={item.subtext}
|
|
progress={Math.round(widget.progress)}
|
|
unit={item.unit}
|
|
handleRemove={() => this.handleRemove(item.key)}
|
|
comparing={comparing}
|
|
/>
|
|
{comparing && (
|
|
<React.Fragment>
|
|
<div className="mb-2" />
|
|
<TrendChart
|
|
syncId={item.key}
|
|
compare
|
|
loading={loadingCompare}
|
|
data={item.dataCompare}
|
|
key={'_' + item.key}
|
|
title={item.name}
|
|
avg={Math.round(widgetCompare.value)}
|
|
subtext={item.subtext}
|
|
progress={Math.round(widgetCompare.progress)}
|
|
unit={item.unit}
|
|
handleRemove={() => this.handleRemove(item.key)}
|
|
comparing={comparing}
|
|
/>
|
|
</React.Fragment>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|