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.

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
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
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>
);
}
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
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
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
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