Quick fixes

src-docs/src/views/elastic_charts/category_chart.js

@@ -100,14 +100,17 @@ export const CategoryChart = () => {
           splitSeriesAccessors={multi ? ['issueType'] : undefined}
           stackAccessors={stacked ? ['issueType'] : undefined}
         />
-        <Axis id="bottom-axis" position={rotated ? 'left' : 'bottom'} />
+        <Axis
+          id="bottom-axis"
+          position={rotated ? 'left' : 'bottom'}
+          showGridLines={false}
+        />
         <Axis
           id="left-axis"
           position={rotated ? 'bottom' : 'left'}
           tickFormat={
             formatted ? d => `${round(Number(d) / 1000, 2)}k` : undefined
           }
-          showGridLines
         />
       </Chart>
 
@@ -193,10 +196,10 @@ export const CategoryChart = () => {
   <Axis
     id="bottom-axis"
     position={${rotated ? 'left' : 'bottom'}}
+    showGridLines={false}
   />
   <Axis
     id="left-axis"
-    showGridLines
     position={${rotated ? 'bottom' : 'left'}}
     ${formatted ? 'tickFormat={d => `${round(Number(d) / 1000, 2)}k`}' : ''}
   />

src-docs/src/views/elastic_charts/sizes.js

@@ -87,9 +87,10 @@ export class Sizes extends Component {
     const data2 = TIME_DATA_2.slice();
     let tooltipProps;
     let legendPosition = 'right';
+    const xAxisFormatter = timeFormatter(niceTimeFormatByDay(1));
     let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`;
-    let xAxisFormatter = timeFormatter(niceTimeFormatByDay(1));
-    let yAxisFormatter;
+    let xAxisStyle;
+    let yAxisStyle;
     let changeDescription =
       'At full width, you should be able to display all the details you need; axes, tick labels and titles, and legends.';
 
@@ -113,7 +114,7 @@ export class Sizes extends Component {
         data1[0][0]
       ).format('H:mm')} - ${moment(data1[data1.length - 1][0]).format('H:mm')}`;
 
-      xAxisFormatter = () => {};
+      xAxisStyle = { tickLabel: { visible: false } };
 
       changeDescription =
         'When the panel becomes narrower that the axes tick labels begin to get clustered, consider moving the axes range to the axes title.';
@@ -132,7 +133,7 @@ export class Sizes extends Component {
     }
 
     if (width < this.xsmallSize) {
-      yAxisFormatter = () => {};
+      yAxisStyle = { tickLabel: { visible: false } };
 
       changeDescription =
         'At severely narrow panels, consider the key indicators of your data and call these out with annotations instead of displaying all values of all axes.';
@@ -145,7 +146,8 @@ export class Sizes extends Component {
       tooltipProps,
       xAxisTitle,
       xAxisFormatter,
-      yAxisFormatter,
+      xAxisStyle,
+      yAxisStyle,
       changeDescription,
     });
   };
@@ -161,7 +163,8 @@ export class Sizes extends Component {
       legendPosition,
       xAxisTitle,
       xAxisFormatter,
-      yAxisFormatter,
+      xAxisStyle,
+      yAxisStyle,
       changeDescription,
     } = this.state;
 
@@ -230,13 +233,10 @@ export class Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
+                showGridLines={false}
+                style={xAxisStyle}
               />
-              <Axis
-                id="left-axis"
-                position="left"
-                showGridLines
-                tickFormat={yAxisFormatter}
-              />
+              <Axis id="left-axis" position="left" style={yAxisStyle} />
             </Chart>
           </EuiPageContent>
         </EuiPage>
@@ -328,20 +328,17 @@ export class Sizes extends Component {
       : ''
   }
   <Axis
-    title={'${xAxisTitle}'}
-    tickFormat={${
-      width < this.mediumSize
-        ? '() => {}'
-        : 'timeFormatter(niceTimeFormatByDay(1))'
-    }}
     id="bottom-axis"
     position="bottom"
+    title={'${xAxisTitle}'}
+    tickFormat={timeFormatter(niceTimeFormatByDay(1))}
+    showGridLines={false}
+    style={${JSON.stringify(xAxisStyle)}}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
-    ${width < this.xsmallSize ? 'tickFormat={() => {}}' : ''}
+    style={${JSON.stringify(yAxisStyle)}}
   />
 </Chart>`}>
             {copy => (

src/components/common.ts

@@ -160,7 +160,7 @@ React.FunctionComponent<ExclusiveUnion<Spanlike, Buttonlike>>
  * returns { 'four': never, 'five': never }
  */
 export type DisambiguateSet<T, U> = {
-  [P in Exclude<keyof T, keyof U>]?: never
+  [P in Exclude<keyof T, keyof U>]?: never;
 };
 
 /**
@@ -229,6 +229,6 @@ export type RecursivePartial<T> = {
     ? Map<K, RecursivePartial<V>>
     : T[P] extends NonAny // checks for primative values
     ? T[P]
-    : RecursivePartial<T[P]> // recurse for all non-array and non-primative values
+    : RecursivePartial<T[P]>; // recurse for all non-array and non-primative values
 };
 type NonAny = number | boolean | string | symbol | null;