42 lines
No EOL
1.2 KiB
JavaScript
42 lines
No EOL
1.2 KiB
JavaScript
import { Loader, NoContent } from 'UI';
|
|
import { widgetHOC, AvgLabel, Styles } from '../common';
|
|
import Bar from './Bar';
|
|
|
|
@widgetHOC('sessionsPerBrowser')
|
|
export default class SessionsPerBrowser extends React.PureComponent {
|
|
|
|
getVersions = item => {
|
|
return Object.keys(item)
|
|
.filter(i => i !== 'browser' && i !== 'count')
|
|
.map(i => ({ key: 'v' +i, value: item[i]}))
|
|
}
|
|
|
|
render() {
|
|
const { data, loading, compare = false } = this.props;
|
|
const colors = compare ? Styles.compareColors : Styles.colors;
|
|
const firstAvg = data.chart[0] && data.chart[0].count;
|
|
|
|
return (
|
|
<Loader loading={ loading } size="small">
|
|
<NoContent
|
|
size="small"
|
|
show={ data.chart.size === 0 }
|
|
>
|
|
<div className="w-full pt-3" style={{ height: '240px' }}>
|
|
{data.chart.map((item, i) =>
|
|
<Bar
|
|
key={i}
|
|
className="mb-4"
|
|
avg={Math.round(item.count)}
|
|
versions={this.getVersions(item)}
|
|
width={Math.round((item.count * 100) / firstAvg) - 10}
|
|
domain={item.browser}
|
|
colors={colors}
|
|
/>
|
|
)}
|
|
</div>
|
|
</NoContent>
|
|
</Loader>
|
|
);
|
|
}
|
|
} |