@gitlab/ui 32.33.0 → 32.34.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.34.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.33.0...v32.34.0) (2021-11-05)
+
+
+### Features
+
+* **echarts:** update to echarts@5 ([c257e58](https://gitlab.com/gitlab-org/gitlab-ui/commit/c257e58e2dfadac7f4ba515f630272ea0a4039e7))
+
 # [32.33.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.32.0...v32.33.0) (2021-11-04)
 
 

package/dist/components/charts/area/area.js

@@ -167,6 +167,9 @@ var script = {
         xAxis: {
           axisPointer: {
             show: true,
+            lineStyle: {
+              type: 'solid'
+            },
             label: {
               formatter: this.onLabelChange
             }

package/dist/components/charts/bar/bar.js

@@ -112,8 +112,8 @@ var script = {
           stack: 'chart',
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
-            barBorderColor: barColor,
-            barBorderWidth: 1
+            borderColor: barColor,
+            borderWidth: 1
           },
           emphasis: {
             itemStyle: {

package/dist/components/charts/chart/chart.js

@@ -1,5 +1,5 @@
-import echarts from 'echarts';
-import { validRenderers, defaultHeight } from '../../../utils/charts/config';
+import * as echarts from 'echarts';
+import { validRenderers, defaultWidth, defaultHeight } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -76,28 +76,27 @@ var script = {
     }
   },
 
-  mounted() {
-    /* eslint-disable promise/catch-or-return, promise/always-return */
-    this.$nextTick().then(() => {
-      this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
-        renderer: this.renderer
-      });
+  async mounted() {
+    await this.$nextTick();
+    this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+      renderer: this.renderer,
+      width: defaultWidth,
+      height: defaultHeight
+    });
 
-      if (this.groupId.length) {
-        this.chart.group = this.groupId;
-        echarts.connect(this.groupId);
-      }
+    if (this.groupId.length) {
+      this.chart.group = this.groupId;
+      echarts.connect(this.groupId);
+    }
 
-      this.chart.on('click', this.clickHandler);
-      /**
-       * Emitted after calling `echarts.init`
-       */
+    this.chart.on('click', this.clickHandler);
+    /**
+     * Emitted after calling `echarts.init`
+     */
 
-      this.$emit('created', this.chart);
-      this.draw();
-      this.setChartSize();
-    });
-    /* eslint-enable */
+    this.$emit('created', this.chart);
+    this.draw();
+    this.setChartSize();
   },
 
   beforeDestroy() {

package/dist/components/charts/legend/legend.js

@@ -1,4 +1,4 @@
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';

package/dist/components/charts/tooltip/tooltip.js

@@ -1,4 +1,4 @@
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/utils/charts/config.js

@@ -13,6 +13,7 @@ const blue500 = '#1f75cb';
 const defaultAreaOpacity = 0.2;
 const defaultFontSize = 12;
 const defaultHeight = 400;
+const defaultWidth = 300;
 const validRenderers = ['canvas', 'svg'];
 const axes = {
   name: 'Value',
@@ -441,8 +442,8 @@ const generateBarSeries = ({
   yAxisIndex,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1
+    borderColor: color,
+    borderWidth: 1
   },
   emphasis: {
     itemStyle: {
@@ -526,4 +527,4 @@ var config = {
 };
 
 export default config;
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };

package/dist/utils/charts/mock_data.js

@@ -39,7 +39,10 @@ const mockDefaultChartOptions = {
     },
     axisPointer: {
       show: true,
-      label: {}
+      label: {},
+      lineStyle: {
+        type: 'solid'
+      }
     }
   },
   yAxis: {
@@ -182,8 +185,8 @@ const mockDefaultBarChartConfig = {
   yAxisIndex: 0,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1
+    borderColor: color,
+    borderWidth: 1
   },
   emphasis: {
     itemStyle: {

package/dist/utils/charts/theme.js

@@ -63,15 +63,14 @@ const axes = {
     margin: 8,
     show: true,
     color: gray600,
-    textStyle: {
-      color: gray600
-    }
+    hideOverlap: true
   },
   axisLine: {
     show: false
   },
   axisPointer: {
     lineStyle: {
+      type: 'solid',
       color: gray600
     },
     label: {
@@ -131,6 +130,7 @@ const createTheme = (options = {}) => ({
   dataZoom: {
     borderColor: 'transparent',
     filterMode: 'none',
+    brushSelect: false,
     dataBackground: {
       lineStyle: {
         width: 2,
@@ -139,14 +139,18 @@ const createTheme = (options = {}) => ({
       },
       // render unfilled zoom-graph if the series is a line chart without area styles
       // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
-      areaStyle: isLineChartWithoutArea(options) ? null : {
+      areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+      : {
         color: gray50,
         opacity: 1
       }
     },
     fillerColor: hexToRgba(gray200, 0.23),
     handleIcon: scrollHandleSvgPath,
-    handleColor: gray500,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: gray500
+    },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
@@ -157,14 +161,16 @@ const createTheme = (options = {}) => ({
     top: '-5',
     left: 'center',
     itemSize: 14,
-    iconStyle: {
-      color: gray200,
-      borderWidth: 0,
-      emphasis: {
+    emphasis: {
+      iconStyle: {
         borderWidth: 0,
         color: gray700
       }
     },
+    iconStyle: {
+      color: gray200,
+      borderWidth: 0
+    },
     itemGap: 8,
     feature: {
       dataZoom: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.33.0",
+  "version": "32.34.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.3",
-    "echarts": "^4.9.0",
+    "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.219.0",
+    "@gitlab/svgs": "1.220.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/charts/area/area.vue

@@ -184,6 +184,9 @@ export default {
         xAxis: {
           axisPointer: {
             show: true,
+            lineStyle: {
+              type: 'solid',
+            },
             label: {
               formatter: this.onLabelChange,
             },

package/src/components/charts/bar/__snapshots__/bar.spec.js.snap

@@ -34,8 +34,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Office",

package/src/components/charts/bar/bar.vue

@@ -112,8 +112,8 @@ export default {
           stack: 'chart',
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
-            barBorderColor: barColor,
-            barBorderWidth: 1,
+            borderColor: barColor,
+            borderWidth: 1,
           },
           emphasis: {
             itemStyle: {

package/src/components/charts/chart/chart.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
 
@@ -35,6 +35,8 @@ describe('chart component', () => {
       themeName,
       {
         renderer: wrapper.props().renderer,
+        width: 300,
+        height: 400,
       }
     );
   });

package/src/components/charts/chart/chart.vue

@@ -1,6 +1,6 @@
 <script>
-import echarts from 'echarts';
-import { defaultHeight, validRenderers } from '../../../utils/charts/config';
+import * as echarts from 'echarts';
+import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
 
 export default {
@@ -66,25 +66,27 @@ export default {
       echarts.registerTheme(themeName, createTheme(this.options));
     }
   },
-  mounted() {
-    /* eslint-disable promise/catch-or-return, promise/always-return */
-    this.$nextTick().then(() => {
-      this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
-        renderer: this.renderer,
-      });
-      if (this.groupId.length) {
-        this.chart.group = this.groupId;
-        echarts.connect(this.groupId);
-      }
-      this.chart.on('click', this.clickHandler);
-      /**
-       * Emitted after calling `echarts.init`
-       */
-      this.$emit('created', this.chart);
-      this.draw();
-      this.setChartSize();
+  async mounted() {
+    await this.$nextTick();
+
+    this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+      renderer: this.renderer,
+      width: defaultWidth,
+      height: defaultHeight,
     });
-    /* eslint-enable */
+
+    if (this.groupId.length) {
+      this.chart.group = this.groupId;
+      echarts.connect(this.groupId);
+    }
+
+    this.chart.on('click', this.clickHandler);
+    /**
+     * Emitted after calling `echarts.init`
+     */
+    this.$emit('created', this.chart);
+    this.draw();
+    this.setChartSize();
   },
   beforeDestroy() {
     this.chart.off('click', this.clickHandler);

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -50,8 +50,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Full",
@@ -240,8 +240,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Full",
@@ -271,8 +271,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Secondary 1",

package/src/components/charts/legend/legend.vue

@@ -1,5 +1,5 @@
 <script>
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
 import { defaultFontSize } from '../../../utils/charts/config';
 import {

package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap

@@ -34,8 +34,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFHHH",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFHHH",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 1",
@@ -78,8 +78,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFJJJ",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFJJJ",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 2",
@@ -122,8 +122,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFIII",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFIII",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 3",
@@ -166,8 +166,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFKKK",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFKKK",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 4",
@@ -290,8 +290,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Fun 1",
@@ -334,8 +334,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Fun 2",
@@ -378,8 +378,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#0094b6",
-        "barBorderWidth": 1,
+        "borderColor": "#0094b6",
+        "borderWidth": 1,
         "color": "rgba(0, 148, 182, 0.2)",
       },
       "name": "Fun 3",
@@ -422,8 +422,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#366800",
-        "barBorderWidth": 1,
+        "borderColor": "#366800",
+        "borderWidth": 1,
         "color": "rgba(54, 104, 0, 0.2)",
       },
       "name": "Fun 4",
@@ -651,8 +651,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Fun 1",
@@ -695,8 +695,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Fun 2",
@@ -739,8 +739,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#0094b6",
-        "barBorderWidth": 1,
+        "borderColor": "#0094b6",
+        "borderWidth": 1,
         "color": "rgba(0, 148, 182, 0.2)",
       },
       "name": "Fun 3",
@@ -783,8 +783,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#366800",
-        "barBorderWidth": 1,
+        "borderColor": "#366800",
+        "borderWidth": 1,
         "color": "rgba(54, 104, 0, 0.2)",
       },
       "name": "Fun 4",
@@ -827,8 +827,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#950943",
-        "barBorderWidth": 1,
+        "borderColor": "#950943",
+        "borderWidth": 1,
         "color": "rgba(149, 9, 67, 0.2)",
       },
       "name": "Secondary 1",

package/src/components/charts/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <script>
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
 

package/src/utils/charts/config.js

@@ -12,6 +12,7 @@ import { ANNOTATIONS_SERIES_NAME, arrowSymbol, CHART_TYPE_BAR, CHART_TYPE_LINE }
 export const defaultAreaOpacity = 0.2;
 export const defaultFontSize = 12;
 export const defaultHeight = 400;
+export const defaultWidth = 300;
 export const validRenderers = ['canvas', 'svg'];
 
 export const axes = {
@@ -433,8 +434,8 @@ export const generateBarSeries = ({
   yAxisIndex,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {

package/src/utils/charts/mock_data.js

@@ -43,6 +43,9 @@ export const mockDefaultChartOptions = {
     axisPointer: {
       show: true,
       label: {},
+      lineStyle: {
+        type: 'solid',
+      },
     },
   },
   yAxis: {
@@ -204,8 +207,8 @@ export const mockDefaultBarChartConfig = {
   yAxisIndex: 0,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {

package/src/utils/charts/theme.js

@@ -105,15 +105,14 @@ const axes = {
     margin: 8,
     show: true,
     color: gray600,
-    textStyle: {
-      color: gray600,
-    },
+    hideOverlap: true,
   },
   axisLine: {
     show: false,
   },
   axisPointer: {
     lineStyle: {
+      type: 'solid',
       color: gray600,
     },
     label: {
@@ -175,6 +174,7 @@ const createTheme = (options = {}) => ({
   dataZoom: {
     borderColor: 'transparent',
     filterMode: 'none',
+    brushSelect: false,
     dataBackground: {
       lineStyle: {
         width: 2,
@@ -184,7 +184,7 @@ const createTheme = (options = {}) => ({
       // render unfilled zoom-graph if the series is a line chart without area styles
       // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
       areaStyle: isLineChartWithoutArea(options)
-        ? null
+        ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
         : {
             color: gray50,
             opacity: 1,
@@ -192,7 +192,10 @@ const createTheme = (options = {}) => ({
     },
     fillerColor: hexToRgba(gray200, 0.23),
     handleIcon: scrollHandleSvgPath,
-    handleColor: gray500,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: gray500,
+    },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
@@ -203,14 +206,16 @@ const createTheme = (options = {}) => ({
     top: '-5',
     left: 'center',
     itemSize: 14,
-    iconStyle: {
-      color: gray200,
-      borderWidth: 0,
-      emphasis: {
+    emphasis: {
+      iconStyle: {
         borderWidth: 0,
         color: gray700,
       },
     },
+    iconStyle: {
+      color: gray200,
+      borderWidth: 0,
+    },
     itemGap: 8,
     feature: {
       dataZoom: {