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

shahzad31 · web-flow · commit f81ff086ef3f · 2020-09-10T17:10:38.000+02:00
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
@@ -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) {
@@ -43,6 +46,7 @@ export function ChartWrapper({
           height,
           opacity,
           transition: 'opacity 0.2s',
+          ...(maxWidth ? { maxWidth } : {}),
         }}
         {...(rest as HTMLAttributes<HTMLDivElement>)}
       >
@@ -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" />
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -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;
@@ -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>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -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'
           }
@@ -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') ?? '-'}</>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -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">
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
@@ -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';
 
@@ -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>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -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(
