github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[RUM Dashboard] Added loading state to visitor breakdown pie charts (#77201)

Browse source 
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Shahzad 2020-09-14 21:46:07 +02:00 • committed by GitHub
parent 0fb48950f5
commit 6bef44031d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
View file

@ -31,9 +31,10 @@ interface Props {
count: number;
name: string;
}>;
loading: boolean;
}
export function VisitorBreakdownChart({ options }: Props) {
export function VisitorBreakdownChart({ loading, options }: Props) {
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
const euiChartTheme = darkMode
@ -41,7 +42,7 @@ export function VisitorBreakdownChart({ options }: Props) {
: EUI_CHARTS_THEME_LIGHT;
return (
<ChartWrapper loading={false} height="230px" maxWidth="430px">
<ChartWrapper loading={loading} height="230px" maxWidth="430px">
<StyleChart>
<Chart>
<Settings

12
x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
View file

@ -16,7 +16,7 @@ export function VisitorBreakdown() {
const { start, end } = urlParams;
const { data } = useFetcher(
const { data, status } = useFetcher(
(callApmApi) => {
if (start && end) {
return callApmApi({
@ -47,14 +47,20 @@ export function VisitorBreakdown() {
<h4>{I18LABELS.browser}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<VisitorBreakdownChart options={data?.browsers} />
<VisitorBreakdownChart
options={data?.browsers}
loading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>{I18LABELS.operatingSystem}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<VisitorBreakdownChart options={data?.os} />
<VisitorBreakdownChart
options={data?.os}
loading={status !== 'success'}
/>
</EuiFlexItem>
</EuiFlexGroup>
</>