49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { NoContent } from 'UI';
|
|
import { Styles } from '../../common';
|
|
import Bar from './Bar';
|
|
import { NO_METRIC_DATA } from 'App/constants/messages';
|
|
import { InfoCircleOutlined } from '@ant-design/icons';
|
|
|
|
interface Props {
|
|
data: any;
|
|
}
|
|
|
|
function SessionsPerBrowser(props: Props) {
|
|
const { data } = props;
|
|
const firstAvg = data.chart[0] && data.chart[0].count;
|
|
|
|
const getVersions = item => {
|
|
return Object.keys(item)
|
|
.filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
|
|
.map(i => ({ key: 'v' + i, value: item[i] }));
|
|
};
|
|
return (
|
|
<NoContent
|
|
size="small"
|
|
title={
|
|
<div className='flex items-center gap-2 text-base font-normal'>
|
|
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
|
|
</div>
|
|
}
|
|
show={data.chart.length === 0}
|
|
style={{ minHeight: 220 }}
|
|
>
|
|
<div className="w-full" style={{ height: '240px' }}>
|
|
{data.chart.map((item, i) =>
|
|
<Bar
|
|
key={i}
|
|
className="mb-4"
|
|
avg={Math.round(item.count)}
|
|
versions={getVersions(item)}
|
|
width={Math.round((item.count * 100) / firstAvg) - 10}
|
|
domain={item.browser}
|
|
colors={Styles.compareColors}
|
|
/>
|
|
)}
|
|
</div>
|
|
</NoContent>
|
|
);
|
|
}
|
|
|
|
export default SessionsPerBrowser;
|