@gitlab/ui 52.9.3 → 52.11.0

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

@@ -63,6 +63,8 @@ describe('sparkline chart component', () => {
     return formatter;
   };
 
+  const validateSmooth = (smooth) => SparklineChart.props.smooth.validator(smooth);
+
   const emitChartCreated = () => getChart().vm.$emit('created', mockChartInstance);
 
   beforeEach(() => {
@@ -178,6 +180,7 @@ describe('sparkline chart component', () => {
 
     await wrapper.vm.$nextTick();
     expect(getLastYValue().exists()).toBe(false);
+    expect(getChartOptions().series[0].markPoint).toBe(undefined);
   });
 
   it('gradient will set the series itemStyle color', async () => {
@@ -187,4 +190,26 @@ describe('sparkline chart component', () => {
 
     expect(getChartOptions().series[0].itemStyle.color).toBeDefined();
   });
+
+  describe('smooth', () => {
+    it.each`
+      value  | expected
+      ${-1}  | ${false}
+      ${0}   | ${true}
+      ${0.5} | ${true}
+      ${1}   | ${true}
+      ${1.1} | ${false}
+    `(`validate $value`, ({ value, expected }) => {
+      expect(validateSmooth(value)).toBe(expected);
+    });
+
+    it('sets the series smoothing', async () => {
+      const smooth = 0.75;
+      wrapper.setProps({ smooth });
+
+      await wrapper.vm.$nextTick();
+
+      expect(getChartOptions().series[0].smooth).toBe(smooth);
+    });
+  });
 });

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

@@ -24,12 +24,14 @@ const generateProps = ({
   tooltipLabel = 'tooltipLabel',
   showLastYValue = true,
   gradient,
+  smooth,
 } = {}) => ({
   data,
   height,
   tooltipLabel,
   showLastYValue,
   gradient,
+  smooth,
 });
 
 const Template = (args) => ({
@@ -43,6 +45,7 @@ const Template = (args) => ({
         :tooltip-label="tooltipLabel"
         :show-last-y-value="showLastYValue"
         :gradient="gradient"
+        :smooth="smooth"
       />
     </div>`,
 });
@@ -50,9 +53,15 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithoutLastYValue = Template.bind({});
+WithoutLastYValue.args = generateProps({ showLastYValue: false });
+
 export const WithChartColorGradient = Template.bind({});
 WithChartColorGradient.args = generateProps({ gradient: customGradient });
 
+export const WithSmoothing = Template.bind({});
+WithSmoothing.args = generateProps({ smooth: 0.5 });
+
 export default {
   title: 'charts/sparkline-chart',
   component: GlSparklineChart,

package/src/components/charts/sparkline/sparkline.vue

@@ -72,6 +72,15 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
+     */
+    smooth: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: (x) => x >= 0 && x <= 1,
+    },
   },
   data() {
     return {
@@ -120,7 +129,21 @@ export default {
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
     series() {
-      const { data } = this;
+      const { data, smooth, itemStyle, showLastYValue } = this;
+      const markPoint = showLastYValue
+        ? {
+            symbol: 'circle',
+            cursor: 'auto',
+            animation: false,
+            symbolSize,
+            data: [
+              {
+                xAxis: data.length - 1,
+                yAxis: data[data.length - 1][1],
+              },
+            ],
+          }
+        : undefined;
       return {
         type: 'line',
         symbol: 'circle',
@@ -128,20 +151,11 @@ export default {
         animation: true,
         cursor: 'auto',
         symbolSize,
-        markPoint: {
-          symbol: 'circle',
-          cursor: 'auto',
-          animation: false,
-          symbolSize,
-          data: [
-            {
-              xAxis: data.length - 1,
-              yAxis: data[data.length - 1][1],
-            },
-          ],
-        },
+        markPoint,
         data,
-        itemStyle: this.itemStyle,
+        smooth,
+        itemStyle,
+        lineStyle: { cap: 'round' },
       };
     },
     itemStyle() {

package/src/index.js

@@ -57,6 +57,9 @@ export {
   default as GlCollapsibleListbox,
 } from './components/base/new_dropdowns/listbox/listbox.vue';
 export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
+export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
+export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
+export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
 // new components aiming to replace GlDropdown  - end
 export { default as GlPath } from './components/base/path/path.vue';
 export { default as GlTable } from './components/base/table/table.vue';

package/src/scss/components.scss

@@ -3,6 +3,7 @@
 // @import '../components/base/dropdown/dropdown'
 //
 // ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';
 @import '../components/charts/gauge/gauge';
 @import '../components/base/token_selector/token_selector';
@@ -75,4 +76,5 @@
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
 @import '../components/base/new_dropdowns/base_dropdown/base_dropdown';
+@import '../components/base/new_dropdowns/dropdown';
 @import '../components/base/new_dropdowns/listbox/listbox';