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

[RUM Dashboard] Visitor breakdown usability #76834

Merged
merged 11 commits into from
Sep 9, 2020
Merged

[RUM Dashboard] Visitor breakdown usability #76834

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
64bbd06
update
shahzad31 Sep 3, 2020
8b86367
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 4, 2020
e409714
update
shahzad31 Sep 4, 2020
48e3009
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 4, 2020
54e8176
update
shahzad31 Sep 4, 2020
caa2328
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 6, 2020
85549e0
update
shahzad31 Sep 6, 2020
5e41f85
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 7, 2020
e978f57
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 8, 2020
7f7025a
update
shahzad31 Sep 8, 2020
a9b56b8
Merge branch 'master' into visitor-breakdown-usability
shahzad31 Sep 8, 2020
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(),
shahzad31 marked this conversation as resolved.
Show resolved Hide resolved
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?.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 @@ -35,15 +35,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 @@ -46,6 +46,15 @@ export const I18LABELS = {
seconds: i18n.translate('xpack.apm.rum.filterGroup.seconds', {
defaultMessage: 'seconds',
}),
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