@gitlab/ui 52.9.3 → 52.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [52.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.9.3...v52.10.0) (2023-01-10)
+
+
+### Features
+
+* **GlSparklineChart:** Add smooth prop ([f28d852](https://gitlab.com/gitlab-org/gitlab-ui/commit/f28d8527e170afd0077b191eaff307be551dfdc0))
+
 ## [52.9.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.9.2...v52.9.3) (2023-01-10)
 
 

package/dist/components/charts/sparkline/sparkline.js

@@ -66,6 +66,15 @@ var script = {
       type: Array,
       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() {
@@ -116,8 +125,21 @@ var script = {
     },
     series() {
       const {
-        data
+        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',
@@ -125,18 +147,13 @@ var script = {
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.9.3",
+  "version": "52.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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() {