@gitlab/ui 137.1.2 → 137.2.1

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

@@ -2,6 +2,8 @@ import * as echarts from 'echarts';
 import { merge } from 'lodash-es';
 import { validRenderers, toolboxHeight, defaultWidth, defaultHeight } from '../../../utils/charts/config';
 import { themeName, createTheme } from '../../../utils/charts/theme';
+import { resolveCssValues } from '../../../utils/charts/css_values';
+import { onColorModeChange } from '../../../utils/charts/color_mode';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { debounceByAnimationFrame } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -126,32 +128,91 @@ var script = {
   },
   async mounted() {
     await this.$nextTick();
-    const chart = echarts.init(this.$refs.chart, themeName, {
-      renderer: this.renderer,
-      width: defaultWidth,
-      height: defaultHeight
-    });
-    // FIXME: temporary workaround to ensure compatibility with @vue/compat
-    // eslint-disable-next-line no-underscore-dangle
-    chart.__v_skip = true;
-    this.chart = chart;
-    if (this.groupId.length) {
-      this.chart.group = this.groupId;
-      echarts.connect(this.groupId);
-    }
-    this.chart.on('click', this.handleClick);
-    /**
-     * Emitted after calling `echarts.init`
-     */
-    this.$emit('created', this.chart);
-    this.draw();
-    this.setChartSize();
+    this.initChart();
+    this.observeColorMode();
   },
   beforeDestroy() {
+    var _this$unsubscribeColo;
     if (!this.chart) return;
     this.chart.off('click', this.handleClick);
+    (_this$unsubscribeColo = this.unsubscribeColorMode) === null || _this$unsubscribeColo === void 0 ? void 0 : _this$unsubscribeColo.call(this);
   },
   methods: {
+    initChart() {
+      const chart = echarts.init(this.$refs.chart, this.theme(), {
+        renderer: this.renderer,
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      // FIXME: temporary workaround to ensure compatibility with @vue/compat
+      // eslint-disable-next-line no-underscore-dangle
+      chart.__v_skip = true;
+      this.chart = chart;
+      if (this.groupId.length) {
+        this.chart.group = this.groupId;
+        echarts.connect(this.groupId);
+      }
+      this.chart.on('click', this.handleClick);
+      /**
+       * Emitted after calling `echarts.init`
+       */
+      this.$emit('created', this.chart);
+      this.draw();
+      this.setChartSize();
+    },
+    /**
+     * The SVG renderer consumes the registered theme as-is, leaving its `var(--token)` colours for
+     * the browser to resolve. Canvas cannot, so it gets a copy resolved against this element.
+     */
+    theme() {
+      if (this.renderer !== 'canvas') {
+        return themeName;
+      }
+      return resolveCssValues(createTheme(this.options), this.$refs.chart);
+    },
+    /**
+     * Rebuilding the chart discards its interaction state, so the legend selection and zoom range
+     * are carried over. Only these stateful fields are copied: the full option from getOption()
+     * holds colours resolved against the old colour mode.
+     */
+    preservedState() {
+      const _this$chart$getOption = this.chart.getOption(),
+        _this$chart$getOption2 = _this$chart$getOption.legend,
+        legend = _this$chart$getOption2 === void 0 ? [] : _this$chart$getOption2,
+        _this$chart$getOption3 = _this$chart$getOption.dataZoom,
+        dataZoom = _this$chart$getOption3 === void 0 ? [] : _this$chart$getOption3;
+      return {
+        legend: legend.map(_ref => {
+          let selected = _ref.selected;
+          return {
+            selected
+          };
+        }),
+        dataZoom: dataZoom.map(_ref2 => {
+          let start = _ref2.start,
+            end = _ref2.end;
+          return {
+            start,
+            end
+          };
+        })
+      };
+    },
+    /**
+     * Colours resolved for canvas are frozen at init, so the chart has to be rebuilt when the
+     * colour mode changes. SVG re-resolves on its own and needs no subscription.
+     */
+    observeColorMode() {
+      if (this.renderer !== 'canvas') {
+        return;
+      }
+      this.unsubscribeColorMode = onColorModeChange(this.$refs.chart, () => {
+        const state = this.preservedState();
+        this.chart.dispose();
+        this.initChart();
+        this.chart.setOption(state);
+      });
+    },
     draw() {
       this.chart.setOption(this.modifiedOptions);
       /**

package/dist/components/charts/gauge/gauge.js

@@ -1,13 +1,9 @@
 import { merge, uniq, sortBy } from 'lodash-es';
-import { gaugeSafeHues, gaugeWarningHue, gaugeNeutralHues } from '../../../utils/charts/theme';
+import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const AXIS_LABEL_FONT_SIZE_PX = 14;
 const ARC_RADIUS = '80%';
-const DETAIL_FONT_SIZE_PX = 30;
-const DETAIL_FONT_FAMILY = 'sans-serif';
-const DETAIL_FONT_WEIGHT = 'bold';
 const POINTER_LENGTH = '65%';
 const POINTER_WIDTH_PX = 5;
 const gaugeChartSeries = _ref => {
@@ -24,17 +20,11 @@ const gaugeChartSeries = _ref => {
       formatter: () => {
         const currentValue = Number.isFinite(value) ? value : null;
         return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
-      },
-      color: `${gaugeNeutralHues[0]}`,
-      fontSize: DETAIL_FONT_SIZE_PX,
-      fontFamily: DETAIL_FONT_FAMILY,
-      fontWeight: DETAIL_FONT_WEIGHT
+      }
     },
     axisLabel: {
       show: true,
-      fontSize: AXIS_LABEL_FONT_SIZE_PX,
-      formatter: theValue => Number.isFinite(theValue) ? theValue : '--',
-      color: `${gaugeNeutralHues[1]}`
+      formatter: theValue => Number.isFinite(theValue) ? theValue : '--'
     },
     axisLine: {
       lineStyle: {

package/dist/components/charts/heatmap/heatmap.js

@@ -1,8 +1,8 @@
 import { merge } from 'lodash-es';
-import { GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_0 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { heatmapHues } from '../../../utils/charts/theme';
+import { heatmapHuesDark, heatmapHues, heatmapSurfaceDark, heatmapSurface } from '../../../utils/charts/theme';
+import { isDarkMode, onColorModeChange } from '../../../utils/charts/color_mode';
 import { engineeringNotation } from '../../../utils/number_utils';
 import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
@@ -61,10 +61,7 @@ function _unsupportedIterableToArray(r, a) {
 
 const defaultOptions = {
   visualMap: {
-    show: false,
-    inRange: {
-      color: heatmapHues
-    }
+    show: false
   },
   series: {
     type: 'heatmap'
@@ -201,10 +198,20 @@ var script = {
         left: '0',
         top: '0'
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
+      // ECharts interpolates the visualMap stops numerically, so these colours cannot be CSS
+      // custom properties and have to be picked for the current colour mode instead. Resolved on
+      // mount, because the mode depends on where this chart sits in the document.
+      isDark: false
     };
   },
   computed: {
+    hues() {
+      return this.isDark ? heatmapHuesDark : heatmapHues;
+    },
+    surface() {
+      return this.isDark ? heatmapSurfaceDark : heatmapSurface;
+    },
     computedOptions() {
       const _getRange = getRange(this.dataSeries),
         min = _getRange.min,
@@ -219,11 +226,14 @@ var script = {
           right: '32px',
           show: true,
           borderWidth: 0,
-          backgroundColor: GL_COLOR_NEUTRAL_100
+          backgroundColor: this.surface.plate
         },
         visualMap: {
           min,
-          max
+          max,
+          inRange: {
+            color: this.hues
+          }
         },
         xAxis: {
           data: this.xAxisLabels,
@@ -243,7 +253,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: GL_COLOR_NEUTRAL_0,
+              color: this.surface.separator,
               width: 2
             }
           },
@@ -270,7 +280,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: GL_COLOR_NEUTRAL_0,
+              color: this.surface.separator,
               width: 2
             }
           }
@@ -290,8 +300,8 @@ var script = {
       const _getRange2 = getRange(this.dataSeries),
         min = _getRange2.min,
         max = _getRange2.max;
-      const step = (max - min) / heatmapHues.length;
-      return heatmapHues.map((color, index) => {
+      const step = (max - min) / this.hues.length;
+      return this.hues.map((color, index) => {
         const lowerBound = engineeringNotation(min + step * index);
         const upperBound = engineeringNotation(min + step * (index + 1));
         return {
@@ -305,6 +315,16 @@ var script = {
       return this.height === 'auto';
     }
   },
+  mounted() {
+    this.isDark = isDarkMode(this.$el);
+    this.unsubscribeColorMode = onColorModeChange(this.$el, isDark => {
+      this.isDark = isDark;
+    });
+  },
+  beforeDestroy() {
+    var _this$unsubscribeColo;
+    (_this$unsubscribeColo = this.unsubscribeColorMode) === null || _this$unsubscribeColo === void 0 ? void 0 : _this$unsubscribeColo.call(this);
+  },
   methods: {
     defaultFormatTooltipText(params) {
       this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);

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

@@ -1,5 +1,6 @@
 import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';
+import { defaultFontFamily } from '../../../utils/charts/theme';
 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';
 import GlTruncate from '../../utilities/truncate/truncate';
@@ -144,7 +145,7 @@ var script = {
   computed: {
     fontStyle() {
       return {
-        fontFamily: this.textStyle.fontFamily || 'sans-serif',
+        fontFamily: this.textStyle.fontFamily || defaultFontFamily,
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
       };
     },
@@ -152,6 +153,17 @@ var script = {
       return this.seriesInfo.length === 1;
     }
   },
+  watch: {
+    /**
+     * When the canvas renderer rebuilds the chart on a colour-mode change it disposes the old
+     * ECharts instance and creates a new one. The parent emits `created` with the new instance and
+     * updates this prop, so we must rebind our persistent listener to the new instance.
+     */
+    chart(newChart, oldChart) {
+      oldChart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+      newChart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+    }
+  },
   created() {
     this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },