@gitlab/ui 40.5.0 → 40.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [40.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.5.0...v40.6.0) (2022-05-19)
+
+
+### Features
+
+* **GlLineChart:** allow chart legend to be hidden ([8d9fa8b](https://gitlab.com/gitlab-org/gitlab-ui/commit/8d9fa8b1c352a8894b3e36509402e4388380ffb0))
+
 # [40.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.4.0...v40.5.0) (2022-05-18)
 
 

package/dist/components/charts/line/line.js

@@ -82,6 +82,11 @@ var script = {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
 
+    },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
 
@@ -197,6 +202,10 @@ var script = {
       };
     },
 
+    hasLegend() {
+      return this.compiledOptions && this.showLegend;
+    },
+
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -311,7 +320,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.5.0",
+  "version": "40.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,15 +87,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-docs": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-a11y": "6.5.0",
+    "@storybook/addon-docs": "6.5.0",
+    "@storybook/addon-essentials": "6.5.0",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.22",
-    "@storybook/addon-storyshots-puppeteer": "6.4.22",
-    "@storybook/addon-viewport": "6.4.22",
-    "@storybook/theming": "6.4.22",
-    "@storybook/vue": "6.4.22",
+    "@storybook/addon-storyshots": "6.5.0",
+    "@storybook/addon-storyshots-puppeteer": "6.5.0",
+    "@storybook/addon-viewport": "6.5.0",
+    "@storybook/theming": "6.5.0",
+    "@storybook/vue": "6.5.0",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

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

@@ -195,5 +195,14 @@ describe('line component', () => {
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
+    it('can be hidden', async () => {
+      createShallowWrapper({
+        showLegend: false,
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findLegend().exists()).toBe(false);
+    });
   });
 });

package/src/components/charts/line/line.stories.js

@@ -62,6 +62,7 @@ const template = `<gl-line-chart
   :thresholds="thresholds"
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
+  :showLegend="showLegend"
 />`;
 
 const generateProps = ({
@@ -70,7 +71,9 @@ const generateProps = ({
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
+  showLegend = true,
 } = {}) => ({
+  showLegend,
   includeLegendAvgMax,
   option,
   thresholds,
@@ -173,6 +176,27 @@ WithToolbox.args = generateProps({
   },
 });
 
+export const NoLegend = Template.bind({});
+NoLegend.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
+    },
+  },
+  showLegend: false,
+});
+
 export default {
   title: 'charts/line-chart',
   component: GlLineChart,

package/src/components/charts/line/line.vue

@@ -117,6 +117,11 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -230,6 +235,9 @@ export default {
     legendStyle() {
       return { paddingLeft: `${grid.left}px` };
     },
+    hasLegend() {
+      return this.compiledOptions && this.showLegend;
+    },
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -366,7 +374,7 @@ export default {
       <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
-      v-if="compiledOptions"
+      v-if="hasLegend"
       :chart="chart"
       :style="legendStyle"
       :series-info="seriesInfo"