Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[7.x] [RUM Dashboard] Visitor breakdown usability (#76834) #77166

Merged
merged 1 commit into from
Sep 10, 2020
Merged

[7.x] [RUM Dashboard] Visitor breakdown usability (#76834) #77166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,14 @@ interface Props {
* aria-label for accessibility
*/
'aria-label'?: string;

maxWidth?: string;
}

export function ChartWrapper({
loading = false,
height = '100%',
maxWidth,
children,
...rest
}: Props) {
Expand All @@ -43,6 +46,7 @@ export function ChartWrapper({
height,
opacity,
transition: 'opacity 0.2s',
...(maxWidth ? { maxWidth } : {}),
}}
{...(rest as HTMLAttributes<HTMLDivElement>)}
>
Expand All @@ -52,7 +56,12 @@ export function ChartWrapper({
<EuiFlexGroup
justifyContent="spaceAround"
alignItems="center"
style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
style={{
height,
marginTop: `-${height}`,
marginBottom: 0,
...(maxWidth ? { maxWidth } : {}),
}}
>
<EuiFlexItem grow={false}>
<EuiLoadingChart size="xl" />
Expand Down
100 changes: 43 additions & 57 deletions x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,18 @@ import {
PartitionLayout,
Settings,
} from '@elastic/charts';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import styled from 'styled-components';
import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,
} from '@elastic/eui/dist/eui_charts_theme';
import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
import { ChartWrapper } from '../ChartWrapper';

const StyleChart = styled.div`
height: 100%;
`;

interface Props {
options?: Array<{
count: number;
Expand All @@ -32,65 +36,47 @@ interface Props {
export function VisitorBreakdownChart({ options }: Props) {
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');

const euiChartTheme = darkMode
? EUI_CHARTS_THEME_DARK
: EUI_CHARTS_THEME_LIGHT;

return (
<ChartWrapper loading={false} height="220px">
<Chart>
<Settings
baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
theme={
darkMode
? EUI_CHARTS_THEME_DARK.theme
: EUI_CHARTS_THEME_LIGHT.theme
}
/>
<Partition
id="spec_1"
data={options || []}
valueAccessor={(d: Datum) => d.count as number}
valueGetter="percent"
percentFormatter={(d: number) =>
`${Math.round((d + Number.EPSILON) * 100) / 100}%`
}
layers={[
{
groupByRollup: (d: Datum) => d.name,
nodeLabel: (d: Datum) => d,
// fillLabel: { textInvertible: true },
shape: {
fillColor: (d) => {
const clrs = [
euiLightVars.euiColorVis1_behindText,
euiLightVars.euiColorVis0_behindText,
euiLightVars.euiColorVis2_behindText,
euiLightVars.euiColorVis3_behindText,
euiLightVars.euiColorVis4_behindText,
euiLightVars.euiColorVis5_behindText,
euiLightVars.euiColorVis6_behindText,
euiLightVars.euiColorVis7_behindText,
euiLightVars.euiColorVis8_behindText,
euiLightVars.euiColorVis9_behindText,
];
return clrs[d.sortIndex];
<ChartWrapper loading={false} height="230px" maxWidth="430px">
<StyleChart>
<Chart>
<Settings
showLegend
baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
theme={euiChartTheme.theme}
/>
<Partition
id="spec_1"
data={options || []}
valueAccessor={(d: Datum) => d.count as number}
valueGetter="percent"
percentFormatter={(d: number) =>
`${Math.round((d + Number.EPSILON) * 100) / 100}%`
}
layers={[
{
groupByRollup: (d: Datum) => d.name,
shape: {
fillColor: (d) =>
euiChartTheme.theme.colors?.vizColors?.[d.sortIndex]!,
},
},
},
]}
config={{
partitionLayout: PartitionLayout.sunburst,
linkLabel: {
maxCount: 32,
fontSize: 14,
},
fontFamily: 'Arial',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
minFontSize: 1,
idealFontSizeJump: 1.1,
outerSizeRatio: 0.9, // - 0.5 * Math.random(),
emptySizeRatio: 0,
circlePadding: 4,
}}
/>
</Chart>
]}
config={{
partitionLayout: PartitionLayout.sunburst,
linkLabel: { maximumSection: Infinity, maxCount: 0 },
margin: { top: 0, bottom: 0, left: 0, right: 0 },
outerSizeRatio: 1, // - 0.5 * Math.random(),
circlePadding: 4,
clockwiseSectors: false,
}}
/>
</Chart>
</StyleChart>
</ChartWrapper>
);
}
6 changes: 3 additions & 3 deletions x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function ClientMetrics() {
<ClFlexGroup responsive={false}>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
titleSize="l"
title={
(((data?.backEnd?.value ?? 0) * 1000).toFixed(0) ?? '-') + ' ms'
}
Expand All @@ -55,15 +55,15 @@ export function ClientMetrics() {
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
titleSize="l"
title={((data?.frontEnd?.value ?? 0)?.toFixed(2) ?? '-') + ' s'}
description={I18LABELS.frontEnd}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
titleSize="l"
title={
<EuiToolTip content={data?.pageViews?.value}>
<>{numeral(data?.pageViews?.value).format('0 a') ?? '-'}</>
Expand Down
17 changes: 10 additions & 7 deletions x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,18 @@ export function RumDashboard() {
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={3}>
<EuiFlexGroup gutterSize="s" wrap>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<PageLoadDistribution />
<EuiSpacer size="m" />
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem style={{ flexBasis: 650 }}>
<EuiPanel>
<PageViewsTrend />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiPanel>
<EuiFlexGroup justifyContent="spaceBetween">
Expand Down
27 changes: 12 additions & 15 deletions x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
*/

import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
import { VisitorBreakdownChart } from '../Charts/VisitorBreakdownChart';
import { VisitorBreakdownLabel } from '../translations';
import { I18LABELS, VisitorBreakdownLabel } from '../translations';
import { useFetcher } from '../../../../hooks/useFetcher';
import { useUrlParams } from '../../../../hooks/useUrlParams';

Expand Down Expand Up @@ -37,27 +37,24 @@ export function VisitorBreakdown() {

return (
<>
<EuiTitle size="xs">
<EuiTitle size="s">
<h3>{VisitorBreakdownLabel}</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<VisitorBreakdownChart options={data?.browsers} />
<EuiTitle size="xs" className="eui-textCenter">
<h4>Browser</h4>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<VisitorBreakdownChart options={data?.os} />
<EuiTitle size="xs" className="eui-textCenter">
<h4>Operating System</h4>
<EuiTitle size="xs">
<h4>{I18LABELS.browser}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<VisitorBreakdownChart options={data?.browsers} />
</EuiFlexItem>
<EuiFlexItem>
<VisitorBreakdownChart options={data?.devices} />
<EuiTitle size="xs" className="eui-textCenter">
<h4>Device</h4>
<EuiTitle size="xs">
<h4>{I18LABELS.operatingSystem}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<VisitorBreakdownChart options={data?.os} />
</EuiFlexItem>
</EuiFlexGroup>
</>
Expand Down
9 changes: 9 additions & 0 deletions x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,15 @@ export const I18LABELS = {
coreWebVitals: i18n.translate('xpack.apm.rum.filterGroup.coreWebVitals', {
defaultMessage: 'Core web vitals',
}),
browser: i18n.translate('xpack.apm.rum.visitorBreakdown.browser', {
defaultMessage: 'Browser',
}),
operatingSystem: i18n.translate(
'xpack.apm.rum.visitorBreakdown.operatingSystem',
{
defaultMessage: 'Operating system',
}
),
};

export const VisitorBreakdownLabel = i18n.translate(
Expand Down