123 lines
4.3 KiB
TypeScript
123 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { NoContent, DropdownPlain } from 'UI';
|
|
import { Styles, AvgLabel } from '../../common';
|
|
import { withRequest } from 'HOCs'
|
|
import {
|
|
AreaChart, Area,
|
|
BarChart, Bar, CartesianGrid, Tooltip,
|
|
LineChart, Line, Legend, ResponsiveContainer,
|
|
XAxis, YAxis
|
|
} from 'recharts';
|
|
import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
|
|
import { toUnderscore } from 'App/utils';
|
|
|
|
const WIDGET_KEY = 'resourcesLoadingTime';
|
|
export const RESOURCE_OPTIONS = [
|
|
{ text: 'All', value: 'all', },
|
|
{ text: 'JS', value: "SCRIPT", },
|
|
{ text: 'CSS', value: "STYLESHEET", },
|
|
{ text: 'Fetch', value: "REQUEST", },
|
|
{ text: 'Image', value: "IMG", },
|
|
{ text: 'Media', value: "MEDIA", },
|
|
{ text: 'Other', value: "OTHER", },
|
|
];
|
|
|
|
interface Props {
|
|
data: any
|
|
optionsLoading: any
|
|
fetchOptions: any
|
|
options: any
|
|
metric?: any
|
|
}
|
|
function ResourceLoadingTime(props: Props) {
|
|
const { data, optionsLoading, metric } = props;
|
|
const gradientDef = Styles.gradientDef();
|
|
const [autoCompleteSelected, setSutoCompleteSelected] = React.useState('');
|
|
const [type, setType] = React.useState('');
|
|
|
|
const onSelect = (params) => {
|
|
// const _params = { density: 70 }
|
|
setSutoCompleteSelected(params.value);
|
|
// TODO reload the data with new params;
|
|
// this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
|
|
}
|
|
|
|
const writeOption = (e, { name, value }) => {
|
|
// this.setState({ [name]: value })
|
|
setType(value);
|
|
const _params = { density: 70 } // TODO reload the data with new params;
|
|
// this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, [ name ]: value === 'all' ? null : value })
|
|
}
|
|
|
|
return (
|
|
<NoContent
|
|
size="small"
|
|
show={ metric.data.chart.length === 0 }
|
|
title="No recordings found"
|
|
>
|
|
<>
|
|
<div className="flex items-center mb-3">
|
|
{/* <WidgetAutoComplete
|
|
loading={optionsLoading}
|
|
fetchOptions={props.fetchOptions}
|
|
options={props.options}
|
|
onSelect={onSelect}
|
|
placeholder="Search for Page"
|
|
/>
|
|
<DropdownPlain
|
|
disabled={!!autoCompleteSelected}
|
|
name="type"
|
|
label="Resource"
|
|
options={ RESOURCE_OPTIONS }
|
|
onChange={ writeOption }
|
|
defaultValue={'all'}
|
|
wrapperStyle={{
|
|
position: 'absolute',
|
|
top: '12px',
|
|
left: '170px',
|
|
}}
|
|
/> */}
|
|
<AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
|
|
</div>
|
|
<ResponsiveContainer height={ 207 } width="100%">
|
|
<AreaChart
|
|
data={ metric.data.chart }
|
|
margin={ Styles.chartMargins }
|
|
>
|
|
{gradientDef}
|
|
<CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
|
|
<XAxis {...Styles.xaxis} dataKey="time" interval={(metric.params.density/7)} />
|
|
<YAxis
|
|
{...Styles.yaxis}
|
|
allowDecimals={false}
|
|
tickFormatter={val => Styles.tickFormatter(val)}
|
|
label={{ ...Styles.axisLabelLeft, value: "Resource Fetch Time (ms)" }}
|
|
/>
|
|
<Tooltip {...Styles.tooltip} />
|
|
<Area
|
|
name="Avg"
|
|
unit=" ms"
|
|
type="monotone"
|
|
dataKey="avg"
|
|
stroke={Styles.strokeColor}
|
|
fillOpacity={ 1 }
|
|
strokeWidth={ 2 }
|
|
strokeOpacity={ 0.8 }
|
|
fill={'url(#colorCount)'}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</>
|
|
</NoContent>
|
|
);
|
|
}
|
|
|
|
export default withRequest({
|
|
dataName: "options",
|
|
initialData: [],
|
|
dataWrapper: data => data,
|
|
loadingName: 'optionsLoading',
|
|
requestName: "fetchOptions",
|
|
endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
|
|
method: 'GET'
|
|
})(ResourceLoadingTime)
|