Update elastic charts to 20.0.2 (#3792)

- update `@elastic/charts` to version `20.0.2`
- update `createTheme` function with theme changes

CHANGELOG.md

@@ -1,12 +1,17 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Update `createTheme` to apply latest changes to elastic charts `Theme`. ([#3792](https://github.com/elastic/eui/pull/3792))
 - Added icons for `appSearchApp` and `workplaceSearchApp` to `EuiIcon` ([#3859](https://github.com/elastic/eui/pull/3859))
 - Added `unlink` glyph to `EuiIcon` ([#3869](https://github.com/elastic/eui/pull/3869))
 
 **Bug fixes**
 
 - Fixed `EuiFacetGroup` container expansion due to negative margin value ([#3871](https://github.com/elastic/eui/pull/3871))
 
+**Breaking changes**
+
+- Requires `@elastic/charts` version `20.0.0` and above for chart theming utils.
+
 ## [`27.4.0`](https://github.com/elastic/eui/tree/v27.4.0)
 
 - Added `customOptionText` prop to `EuiComboBox` ([#3811](https://github.com/elastic/eui/pull/3811))

package.json

@@ -87,7 +87,7 @@
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@elastic/charts": "^19.6.3",
+    "@elastic/charts": "^20.0.0",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@svgr/core": "5.0.1",

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

@@ -194,12 +194,41 @@ export type PropsForButton<T, P = {}> = T &
   } & P;
 
 /**
- * Makes all recursive keys optional
+ * Replaces all properties on any type as optional, includes nested types
+ *
+ * @example
+ * ```ts
+ * interface Person {
+ *  name: string;
+ *  age?: number;
+ *  spouse: Person;
+ *  children: Person[];
+ * }
+ * type PartialPerson = RecursivePartial<Person>;
+ * // results in
+ * interface PartialPerson {
+ *  name?: string;
+ *  age?: number;
+ *  spouse?: RecursivePartial<Person>;
+ *  children?: RecursivePartial<Person>[]
+ * }
+ * ```
  */
 export type RecursivePartial<T> = {
-  [P in keyof T]?: T[P] extends Array<infer U>
+  [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[]
+    ? T[P]
+    : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray<any>
+    ? T[P]
+    : T[P] extends Array<infer U>
     ? Array<RecursivePartial<U>>
-    : T[P] extends object
-    ? RecursivePartial<T[P]>
-    : T[P];
+    : T[P] extends ReadonlyArray<infer U> // eslint-disable-line @typescript-eslint/array-type
+    ? ReadonlyArray<RecursivePartial<U>> // eslint-disable-line @typescript-eslint/array-type
+    : T[P] extends Set<infer V> // checks for Sets
+    ? Set<RecursivePartial<V>>
+    : T[P] extends Map<infer K, infer V> // checks for Maps
+    ? 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
 };
+type NonAny = number | boolean | string | symbol | null;

src/themes/charts/themes.ts

@@ -122,27 +122,33 @@ function createTheme(colors: any): EuiChartThemeType {
         histogramPadding: 0.05,
       },
       axes: {
-        axisTitleStyle: {
+        axisTitle: {
           fontSize: 12,
           fontFamily: fontFamily,
           fill: colors.euiColorDarkestShade.rgba,
-          padding: 10,
+          padding: {
+            inner: 10,
+            outer: 0,
+          },
         },
-        axisLineStyle: {
+        axisLine: {
           stroke: colors.euiColorChartLines.rgba,
         },
-        tickLabelStyle: {
+        tickLabel: {
           fontSize: 10,
           fontFamily: fontFamily,
           fill: colors.euiColorDarkShade.rgba,
-          padding: 8,
+          padding: {
+            outer: 8,
+            inner: 10,
+          },
         },
-        tickLineStyle: {
+        tickLine: {
           visible: false,
           stroke: colors.euiColorChartLines.rgba,
           strokeWidth: 1,
         },
-        gridLineStyle: {
+        gridLine: {
           horizontal: {
             visible: true,
             stroke: colors.euiColorChartLines.rgba,

yarn.lock

@@ -1275,10 +1275,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@elastic/charts@^19.6.3":
-  version "19.6.3"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.6.3.tgz#c23a1d7a8e245b1a800a3a4ef5fc4378b0da5e74"
-  integrity sha512-lB+rOODUKYZvsWCAcCxtAu8UxdZ2yIjZs+cjXwO1SlngY+jo+gc6XoEZG4kAczRPcr6cMdHesZ8LmFr3Enle5Q==
+"@elastic/charts@^20.0.0":
+  version "20.0.2"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-20.0.2.tgz#e64bd11b75576e87e794c23b0bca2d0ead83149a"
+  integrity sha512-qPua1PcnYfSYEU9ql99BWw5NxqHWBkPFAxlqvA+4vaE4IxXR7IWwFHFgyJY9v1qnQrxc+lN2AWdETJbREPC1nA==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"