Update dependency @elastic/charts to v34 (#5077)

* Update dependency @elastic/charts to v34 * add tickFormatting to xy chart axes * Updating theme with `goal` settings and cleaning up some docs * More theme fixes based on text-specific colors and forced a dark mode version of color palette on bullet graph * Better font stack for both default and Ams themes Co-authored-by: Renovate Bot Co-authored-by: nickofthyme Co-authored-by: cchaos
elastic · Aug 25, 2021 · fa14cf4 · fa14cf4
1 parent db1f6f4
commit fa14cf4
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 111 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Updated `EuiToolTip` to remain showing tooltip while child element is in focus ([#5066](https://github.com/elastic/eui/pull/5066))
 - Removed `children` from TypeScript definition in `EuiIconTip` ([#5066](https://github.com/elastic/eui/pull/5066))
 - Removed `children` as a possible prop on `EuiTreeView` ([#5053](https://github.com/elastic/eui/pull/5053))
+- Updated `elast-charts` theme with better text colors, font stack and `goal` styles ([#5077](https://github.com/elastic/eui/pull/5077))
 
 **Bug fixes**
 

diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.12.1",
-    "@elastic/charts": "^33.0.1",
+    "@elastic/charts": "^34.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@svgr/core": "5.4.0",

diff --git a/renovate.json b/renovate.json
@@ -1,12 +1,13 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base"],
+  "extends": ["config:base", ":disableDependencyDashboard"],
   "ignorePaths": ["./.github/**"],
   "enabledManagers": ["npm"],
   "baseBranches": ["master"],
   "separateMajorMinor": false,
   "rangeStrategy": "bump",
   "semanticCommits": "disabled",
+  "assignAutomerge": true,
   "vulnerabilityAlerts": {
     "enabled": false
   },
@@ -18,15 +19,16 @@
     {
       "groupName": "@elastic/charts",
       "matchPackageNames": ["@elastic/charts"],
-      "reviewers": ["team:datavis"],
-      "labels": ["dependencies"],
       "enabled": true
     },
     {
       "matchPackageNames": ["@elastic/charts"],
       "matchUpdateTypes": ["major"],
       "matchBaseBranches": ["master"],
-      "automerge": true
+      "reviewers": ["team:datavis"],
+      "labels": ["dependencies"],
+      "automerge": true,
+      "enabled": true
     }
   ]
 }
diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.js
@@ -1,15 +1,38 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Chart, Settings, Goal } from '@elastic/charts';
-import { EuiSpacer, EuiTitle, EuiPanel } from '../../../../src/components';
-import { htmlIdGenerator, euiPalettePositive } from '../../../../src/services';
+import { EuiSpacer, EuiTitle } from '../../../../src/components';
+import {
+  htmlIdGenerator,
+  euiPalettePositive,
+  colorPalette,
+  euiPaletteGray,
+} from '../../../../src/services';
+import { ThemeContext } from '../../components';
+import {
+  EUI_CHARTS_THEME_DARK,
+  EUI_CHARTS_THEME_LIGHT,
+} from '../../../../src/themes/charts/themes';
 
 export const AccessibilityBullet = () => {
+  const themeContext = useContext(ThemeContext);
   const id = htmlIdGenerator()();
 
+  /**
+   * Setup theme based on current light/dark theme
+   */
+  const isDarkTheme = themeContext.theme.includes('dark');
+  const euiChartTheme = isDarkTheme
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot'];
   const bands = [0, 100, 125, 150, 250];
 
-  const spectrum = euiPalettePositive(5);
+  let spectrum = euiPalettePositive(5);
+  // For dark theme, start with the brightest positive color and create a palette that goes to dark gray instead of light
+  if (isDarkTheme) {
+    spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse();
+  }
 
   const colorMap = {
     '0': spectrum[0],
@@ -25,38 +48,30 @@ export const AccessibilityBullet = () => {
         <h3 id={`bullet--example--${id}`}>Example bullet chart</h3>
       </EuiTitle>
       <EuiSpacer />
-      <EuiPanel
-        hasShadow={false}
-        hasBorder={false}
-        style={{
-          backgroundColor: 'aliceblue',
-        }}
-        grow={false}
-      >
-        <Chart size={{ height: 200 }}>
-          <Settings
-            ariaLabelledBy={id}
-            ariaDescription="This goal chart has a target of 260."
-            ariaUseDefaultSummary={false}
-          />
-          <Goal
-            id="spec_1"
-            subtype="horizontalBullet"
-            base={0}
-            target={260}
-            actual={280}
-            bands={bands}
-            ticks={[0, 50, 100, 150, 200, 250, 300]}
-            tickValueFormatter={({ value }) => String(value)}
-            bandFillColor={({ value }) => bandFillColor(value)}
-            labelMajor="Revenue 2020 YTD  "
-            labelMinor="(thousand USD)  "
-            centralMajor="280"
-            centralMinor="target: 260"
-            bandLabels={bandLabels}
-          />
-        </Chart>
-      </EuiPanel>
+      <Chart size={{ height: 200 }}>
+        <Settings
+          theme={euiChartTheme.theme}
+          ariaLabelledBy={id}
+          ariaDescription="This goal chart has a target of 260."
+          ariaUseDefaultSummary={false}
+        />
+        <Goal
+          id="spec_1"
+          subtype="horizontalBullet"
+          base={0}
+          target={260}
+          actual={280}
+          bands={bands}
+          ticks={[0, 50, 100, 150, 200, 250, 300]}
+          tickValueFormatter={({ value }) => String(value)}
+          bandFillColor={({ value }) => bandFillColor(value)}
+          labelMajor="Revenue 2020 YTD  "
+          labelMinor="(thousand USD)  "
+          centralMajor="280"
+          centralMinor="target: 260"
+          bandLabels={bandLabels}
+        />
+      </Chart>
     </>
   );
 };
diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -8,7 +8,7 @@ import {
   EuiLink,
 } from '../../../../src/components';
 import { GuideSectionTypes } from '../../components';
-import { ExternalBadge } from './shared';
+import { chartsVersion, ExternalBadge } from './shared';
 import { TextureMultiSeriesChart } from './texture';
 import { TexturedStylesProps } from './texture_props';
 import { AccessibilitySunburst } from './accessibility_sunburst';
@@ -184,15 +184,15 @@ export const ElasticChartsAccessibilityExample = {
           <EuiCallOut
             title={
               <>
-                Currently, data tables are only available for{' '}
+                In version {chartsVersion}, data tables are only available for{' '}
                 <strong>partition charts</strong>.
               </>
             }
             iconType="visPie"
           >
             <p>
-              Version <ExternalBadge />, partition charts include: sunburst,
-              treemap, icicle, flame, and mosaic.
+              Partition charts include: sunburst, treemap, icicle, flame, and
+              mosaic.
             </p>
           </EuiCallOut>
         </>
@@ -269,15 +269,15 @@ export const ElasticChartsAccessibilityExample = {
           <EuiCallOut
             title={
               <>
-                Currently, texture fills are only available for{' '}
+                In version {chartsVersion}, texture fills are only available for{' '}
                 <strong>XY charts</strong>.
               </>
             }
             iconType="visAreaStacked"
           >
             <p>
-              At time of this writing, XY charts include: area, bar, bubble,
-              histogram, line, and heatmap.
+              XY charts include: area, bar, bubble, histogram, line, and
+              heatmap.
             </p>
           </EuiCallOut>
         </>
@@ -319,8 +319,8 @@ export const ElasticChartsAccessibilityExample = {
           <EuiCallOut
             title={
               <>
-                Currently, semantic groupings are only available for{' '}
-                <strong>goal and gauge charts</strong>.
+                In version {chartsVersion}, semantic groupings are only
+                available for <strong>goal and gauge charts</strong>.
               </>
             }
             iconType="visGoal"
@@ -346,23 +346,12 @@ export const ElasticChartsAccessibilityExample = {
     {
       text: (
         <>
-          <EuiCallOut
-            title={
-              <>
-                <ExternalBadge /> does not have configuration options to set the
-                color of the labels.
-              </>
-            }
-            color="warning"
-            iconType="alert"
-          />
-          <EuiSpacer />
           <p>
-            For the provided example, a visually hidden content is rendered with
-            a goal description list generated from the{' '}
+            For the provided example, visually hidden content is rendered with a
+            goal description list generated from the{' '}
             <EuiCode>bandLabels</EuiCode> prop.
           </p>
-          <EuiCode language="jsx" inline={false}>
+          <EuiCodeBlock language="jsx">
             {`<p>Revenue 2020 YTD</p>
 <p>(thousand USD</p>
 <p>This goal chart has a target of 260.</p>
@@ -389,7 +378,7 @@ export const ElasticChartsAccessibilityExample = {
   <dt>150 - 250</dt>
   <dd>hot</dd>
 </dl>`}
-          </EuiCode>
+          </EuiCodeBlock>
         </>
       ),
     },

diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js
@@ -12,7 +12,7 @@ import {
 import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts';
 import { devDependencies } from '../../../../package';
 
-const chartsVersion = devDependencies['@elastic/charts'].match(
+export const chartsVersion = devDependencies['@elastic/charts'].match(
   /\d+\.\d+\.\d+/
 )[0];
 

diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js
@@ -238,7 +238,12 @@ export class Sizes extends Component {
                 showGridLines={false}
                 style={xAxisStyle}
               />
-              <Axis id="left-axis" position="left" style={yAxisStyle} />
+              <Axis
+                id="left-axis"
+                position="left"
+                style={yAxisStyle}
+                tickFormat={(d) => Number(d).toFixed(2)}
+              />
             </Chart>
           </EuiPageContent>
         </EuiPage>
@@ -343,6 +348,7 @@ export class Sizes extends Component {
     id="left-axis"
     position="left"
     style={${JSON.stringify(yAxisStyle)}}
+    tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
           >

diff --git a/src-docs/src/views/elastic_charts/texture.js b/src-docs/src/views/elastic_charts/texture.js
@@ -5,6 +5,8 @@ import {
   BarSeries,
   AreaSeries,
   Settings,
+  Axis,
+  Position,
 } from '@elastic/charts';
 import { EuiSpacer, EuiTitle } from '../../../../src/components';
 import { SAMPLE_SMALL_DATA, SAMPLE_SMALL_DATA_2 } from './data';
@@ -67,6 +69,11 @@ export const TextureMultiSeriesChart = () => {
           }}
           data={SAMPLE_SMALL_DATA_2}
         />
+        <Axis
+          hide
+          position={Position.left}
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
       </Chart>
     </Fragment>
   );

diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js
@@ -119,7 +119,12 @@ export const Theming = () => {
           color={['black']}
         />
         <Axis id="bottom-axis" position="bottom" showGridLines />
-        <Axis id="left-axis" position="left" showGridLines />
+        <Axis
+          id="left-axis"
+          position="left"
+          showGridLines
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
       </Chart>
       <EuiSpacer size="xxl" />
       <EuiFlexGroup justifyContent="center">

diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js
@@ -337,7 +337,12 @@ export const Categorical = () => {
             position="bottom"
             showGridLines={chartType !== 'BarSeries'}
           />
-          <Axis id="left-axis" position="left" showGridLines />
+          <Axis
+            id="left-axis"
+            position="left"
+            showGridLines
+            tickFormat={(d) => Number(d).toFixed(2)}
+          />
         </Chart>
       </div>
 
@@ -441,6 +446,7 @@ export const Categorical = () => {
     id="left-axis"
     position="left"
     showGridLines
+    tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
         >

diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.js
@@ -111,7 +111,12 @@ export const TimeChart = () => {
           showGridLines={chartType !== 'BarSeries'}
           tickPadding={0}
         />
-        <Axis id="left-axis" position="left" showGridLines />
+        <Axis
+          id="left-axis"
+          position="left"
+          showGridLines
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
       </Chart>
 
       <EuiSpacer />
@@ -180,6 +185,7 @@ export const TimeChart = () => {
     id="left-axis"
     position="left"
     showGridLines
+    tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
         >

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -252,7 +252,12 @@ const ChartMarkdownRenderer = ({ palette, categories }) => {
         stackAccessors={['g']}
       />
       <Axis id="bottom-axis" position="bottom" showGridLines />
-      <Axis id="left-axis" position="left" showGridLines />
+      <Axis
+        id="left-axis"
+        position="left"
+        showGridLines
+        tickFormat={(d) => Number(d).toFixed(2)}
+      />
     </Chart>
   );
 };