Update Elastic-Charts to 13.0.0

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added `data-test-subj` support for basic and in-memory tables' actions ([#2353](https://github.com/elastic/eui/pull/2353))
 - Added `ip` icon to glyph set ([#2371](https://github.com/elastic/eui/pull/2371))
 - Set `textOnly={true}` for expanded rows in `EuiBasicTable` ([#2376](https://github.com/elastic/eui/pull/2376))
+- Update Elastic-Charts to version 13.0.0 and updated the theme object accordingly ([#2381](https://github.com/elastic/eui/pull/2381))
 
 **Bug fixes**
 

package.json

@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@elastic/charts": "^11.2.0",
+    "@elastic/charts": "^13.0.0",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@svgr/core": "^4.1.0",

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

@@ -78,12 +78,6 @@ class _CategoryChart extends Component {
     const theme = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
-    const gridHorizontalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings;
-    const gridVerticalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridVerticalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings;
 
     const ChartType = CHART_COMPONENTS[this.state.chartType];
 
@@ -123,7 +117,6 @@ class _CategoryChart extends Component {
           <Axis
             id="bottom-axis"
             position={this.state.rotated ? 'left' : 'bottom'}
-            gridLineStyle={gridVerticalSettings}
           />
           <Axis
             id="left-axis"
@@ -134,7 +127,6 @@ class _CategoryChart extends Component {
                 : undefined
             }
             showGridLines
-            gridLineStyle={gridHorizontalSettings}
           />
         </Chart>
 

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

@@ -25,9 +25,9 @@ export const ExternalBadge = () => {
       iconSide="right"
       onClickAriaLabel="Go to elastic-charts docs"
       onClick={() =>
-        window.open('https://github.com/elastic/elastic-charts/tree/v10.2.0')
+        window.open('https://github.com/elastic/elastic-charts/tree/v13.0.0')
       }>
-      External library: elastic-charts v10.2.0
+      External library: elastic-charts v13.0.0
     </EuiBadge>
   );
 };

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

@@ -172,12 +172,6 @@ class _Sizes extends Component {
     const theme = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
-    const gridHorizontalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings;
-    const gridVerticalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridVerticalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings;
     const lineAnnotationStyle = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.lineAnnotation
       : EUI_CHARTS_THEME_LIGHT.lineAnnotation;
@@ -239,13 +233,11 @@ class _Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
-                gridLineStyle={gridVerticalSettings}
               />
               <Axis
                 id="left-axis"
                 position="left"
                 showGridLines
-                gridLineStyle={gridHorizontalSettings}
                 tickFormat={yAxisFormatter}
               />
             </Chart>

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

@@ -47,13 +47,6 @@ class _Theming extends Component {
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
 
-    const gridHorizontalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings;
-    const gridVerticalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridVerticalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings;
-
     const customColors = {
       colors: {
         vizColors: colorPalette('#FFFFE0', '#017F75', 5),
@@ -92,18 +85,8 @@ class _Theming extends Component {
             yAccessors={['y']}
             customSeriesColors={data1CustomSeriesColors}
           />
-          <Axis
-            id="bottom-axis"
-            position="bottom"
-            showGridLines
-            gridLineStyle={gridVerticalSettings}
-          />
-          <Axis
-            id="left-axis"
-            position="left"
-            showGridLines
-            gridLineStyle={gridHorizontalSettings}
-          />
+          <Axis id="bottom-axis" position="bottom" showGridLines />
+          <Axis id="left-axis" position="left" showGridLines />
         </Chart>
       </Fragment>
     );

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

@@ -245,12 +245,6 @@ class _Categorical extends Component {
     const theme = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
-    const gridHorizontalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings;
-    const gridVerticalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridVerticalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings;
 
     let ChartType = CHART_COMPONENTS[chartType];
 
@@ -364,15 +358,9 @@ class _Categorical extends Component {
             <Axis
               id="bottom-axis"
               position="bottom"
-              gridLineStyle={gridVerticalSettings}
               showGridLines={this.state.chartType !== 'BarSeries'}
             />
-            <Axis
-              id="left-axis"
-              position="left"
-              showGridLines
-              gridLineStyle={gridHorizontalSettings}
-            />
+            <Axis id="left-axis" position="left" showGridLines />
           </Chart>
           {customLegend}
         </div>

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

@@ -17,6 +17,7 @@ import {
   EuiText,
   EuiCodeBlock,
   EuiLink,
+  EuiCallOut,
 } from '../../../../src/components';
 
 export const ElasticChartsThemingExample = {
@@ -60,11 +61,36 @@ export const ElasticChartsThemingExample = {
             Elastic Charts. Simply import these objects from the themes folder
             and pass the correct one to the Settings.theme property.
           </p>
-          <EuiCodeBlock language="javascript" isCopyable>
+          <EuiCodeBlock language="javascript" isCopyable fontSize="s">
             {`import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+
 const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
+
 <Settings theme={euiTheme} />`}
           </EuiCodeBlock>
+          <EuiCallOut title="Kibana engineers" iconType="logoKibana">
+            <p>
+              We provide a plugin utility for ease of pulling in the correct
+              theme object. There is also a way to use this as an Observable.
+              Reference this{' '}
+              <EuiLink
+                href="https://github.com/elastic/kibana/pull/45446"
+                target="_blank">
+                pull request
+              </EuiLink>{' '}
+              for more information.
+            </p>
+            <EuiCodeBlock
+              language="javascript"
+              isCopyable
+              paddingSize="s"
+              fontSize="s">
+              {`import { npStart } from 'ui/new_platform';
+
+<Settings theme={npStart.plugins.eui_utils.useChartsTheme()} />`}
+            </EuiCodeBlock>
+          </EuiCallOut>
+          <EuiSpacer />
           <p>
             EUI also provides some basic{' '}
             <Link to="/utilities/color-palettes">
@@ -76,7 +102,7 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI
             prepend it to the list of themes supplied to Settings.
           </p>
 
-          <EuiCodeBlock language="javascript" isCopyable>
+          <EuiCodeBlock language="javascript" isCopyable fontSize="s">
             {`import { colorPalette } from '../../../../src/services';
 
 const customColors = {

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

@@ -67,12 +67,6 @@ class _TimeChart extends Component {
     const theme = isDarkTheme
       ? EUI_CHARTS_THEME_DARK.theme
       : EUI_CHARTS_THEME_LIGHT.theme;
-    const gridHorizontalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings;
-    const gridVerticalSettings = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.gridVerticalSettings
-      : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings;
 
     let ChartType = CHART_COMPONENTS[this.state.chartType];
     let ChartType2 = CHART_COMPONENTS[this.state.chartType];
@@ -127,15 +121,9 @@ class _TimeChart extends Component {
             position="bottom"
             tickFormat={timeFormatter(niceTimeFormatByDay(1))}
             showGridLines={this.state.chartType !== 'BarSeries'}
-            gridLineStyle={gridVerticalSettings}
             tickPadding={0}
           />
-          <Axis
-            id="left-axis"
-            position="left"
-            showGridLines
-            gridLineStyle={gridHorizontalSettings}
-          />
+          <Axis id="left-axis" position="left" showGridLines />
         </Chart>
 
         <EuiSpacer />

src/components/code/_code_block.scss

@@ -19,6 +19,7 @@
     display: block;
     line-height: $euiLineHeight;
     font-weight: $euiFontWeightRegular;
+    font-size: inherit;
   }
 
   .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton {

src/components/text/_text.scss

@@ -222,18 +222,18 @@
     min-width: 75%;
   }
 
-  &.euiText--small {
-    @include fontSize($euiFontSizeS);
-    @include euiScaleText($euiFontSizeS);
-  }
-
-  &.euiText--extraSmall {
-    @include fontSize($euiFontSizeXS);
-    @include euiScaleText($euiFontSizeXS);
-  }
-
   > :last-child,
   .euiTextColor > :last-child {
     margin-bottom: 0 !important; // sass-lint:disable-line no-important
   }
 }
+
+.euiText--small {
+  @include fontSize($euiFontSizeS);
+  @include euiScaleText($euiFontSizeS);
+}
+
+.euiText--extraSmall {
+  @include fontSize($euiFontSizeXS);
+  @include euiScaleText($euiFontSizeXS);
+}

src/themes/charts/themes.ts

@@ -1,10 +1,6 @@
 import { palettes } from '../../services/color/eui_palettes';
 import { DEFAULT_VISUALIZATION_COLOR } from '../../services/color/visualization_colors';
-import {
-  PartialTheme,
-  GridLineConfig,
-  LineAnnotationStyle,
-} from '@elastic/charts';
+import { PartialTheme, LineAnnotationStyle } from '@elastic/charts';
 
 // @ts-ignore
 import lightColors from '!!sass-vars-to-js-loader!../../global_styling/variables/_colors.scss';
@@ -15,26 +11,12 @@ const fontFamily = `'Inter UI', -apple-system, BlinkMacSystemFont,
   'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`;
 
 export interface EuiChartThemeType {
-  gridHorizontalSettings: GridLineConfig;
-  gridVerticalSettings: GridLineConfig;
   lineAnnotation: LineAnnotationStyle;
   theme: PartialTheme;
 }
 
 function createTheme(colors: any) {
   return {
-    gridHorizontalSettings: {
-      stroke: colors.euiColorChartLines.rgba,
-      strokeWidth: 1,
-      opacity: 1,
-      dash: [0, 0],
-    },
-    gridVerticalSettings: {
-      stroke: colors.euiColorChartLines.rgba,
-      strokeWidth: 1,
-      opacity: 1,
-      dash: [4, 4],
-    },
     lineAnnotation: {
       line: {
         strokeWidth: 1,
@@ -86,6 +68,10 @@ function createTheme(colors: any) {
           fill: colors.euiColorDarkShade.rgba,
         },
       },
+      scales: {
+        barsPadding: 0.25,
+        histogramPadding: 0.05,
+      },
       axes: {
         axisTitleStyle: {
           fontSize: 12,
@@ -103,8 +89,25 @@ function createTheme(colors: any) {
           padding: 8,
         },
         tickLineStyle: {
-          stroke: 'rgba(0,0,0,0)', // transparent
-          strokeWidth: 0,
+          visible: false,
+          stroke: colors.euiColorChartLines.rgba,
+          strokeWidth: 1,
+        },
+        gridLineStyle: {
+          horizontal: {
+            visible: true,
+            stroke: colors.euiColorChartLines.rgba,
+            strokeWidth: 1,
+            opacity: 1,
+            dash: [0, 0],
+          },
+          vertical: {
+            visible: true,
+            stroke: colors.euiColorChartLines.rgba,
+            strokeWidth: 1,
+            opacity: 1,
+            dash: [4, 4],
+          },
         },
       },
       colors: {

yarn.lock

@@ -991,10 +991,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@elastic/charts@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-11.2.0.tgz#b967de667ae0c71313b407c8e6b06f7f9aa87fa0"
-  integrity sha512-8jPRsYsREABEXw1OpiN9sO62DV01G9+q6ieuvrQxa1I5AaFcaRo4K65NH8NwShU/nW62R5BpMq+vWN9Qax6igQ==
+"@elastic/charts@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-13.0.0.tgz#eefd1a003c18c558465fa5d1dce28c137d1f50b4"
+  integrity sha512-Eia4lE7HEXZCZIlxsyLA/QTtrViDiENIM8QQa6ktSPpqRNzbRT6dLZii0Hv/GZem1PSBIw6M8HoTlP6/7L0BUA==
   dependencies:
     "@types/d3-shape" "^1.3.1"
     "@types/luxon" "^1.11.1"