From 41f4220a8418c807155b8ca4065057ab5263daa1 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 4 Aug 2020 11:52:54 -0400
Subject: [PATCH 1/2] Fix Sizing example and prettier

---
 src-docs/src/views/elastic_charts/sizes.js | 27 +++++++++++-----------
 src/components/common.ts                   |  4 ++--
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js
index 429d6c6a310..32f2bf1ae86 100644
--- a/src-docs/src/views/elastic_charts/sizes.js
+++ b/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,12 +233,13 @@ export class Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
+                style={xAxisStyle}
               />
               <Axis
                 id="left-axis"
                 position="left"
                 showGridLines
-                tickFormat={yAxisFormatter}
+                style={yAxisStyle}
               />
             </Chart>
           </EuiPageContent>
@@ -329,11 +333,8 @@ export class Sizes extends Component {
   }
   <Axis
     title={'${xAxisTitle}'}
-    tickFormat={${
-      width < this.mediumSize
-        ? '() => {}'
-        : 'timeFormatter(niceTimeFormatByDay(1))'
-    }}
+    tickFormat={timeFormatter(niceTimeFormatByDay(1))}
+    style={${JSON.stringify(xAxisStyle)}}
     id="bottom-axis"
     position="bottom"
   />
@@ -341,7 +342,7 @@ export class Sizes extends Component {
     id="left-axis"
     position="left"
     showGridLines
-    ${width < this.xsmallSize ? 'tickFormat={() => {}}' : ''}
+    style={${JSON.stringify(yAxisStyle)}}
   />
 </Chart>`}>
             {copy => (
diff --git a/src/components/common.ts b/src/components/common.ts
index 9567f5ddc74..7bf2037e7ac 100644
--- a/src/components/common.ts
+++ b/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;

From 357a5d251e20b91110cd3e4fade4b140bd4a9c19 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 4 Aug 2020 14:22:39 -0400
Subject: [PATCH 2/2] Fixing `showGridLines` defaults

---
 .../src/views/elastic_charts/category_chart.js     |  9 ++++++---
 src-docs/src/views/elastic_charts/sizes.js         | 14 +++++---------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js
index 3f07ee789bb..0506c808afd 100644
--- a/src-docs/src/views/elastic_charts/category_chart.js
+++ b/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`}' : ''}
   />
diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js
index 32f2bf1ae86..17146fd9c28 100644
--- a/src-docs/src/views/elastic_charts/sizes.js
+++ b/src-docs/src/views/elastic_charts/sizes.js
@@ -233,14 +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
-                style={yAxisStyle}
-              />
+              <Axis id="left-axis" position="left" style={yAxisStyle} />
             </Chart>
           </EuiPageContent>
         </EuiPage>
@@ -332,16 +328,16 @@ export class Sizes extends Component {
       : ''
   }
   <Axis
+    id="bottom-axis"
+    position="bottom"
     title={'${xAxisTitle}'}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
+    showGridLines={false}
     style={${JSON.stringify(xAxisStyle)}}
-    id="bottom-axis"
-    position="bottom"
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
     style={${JSON.stringify(yAxisStyle)}}
   />
 </Chart>`}>