@gitlab/ui 52.9.2 → 52.10.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.4.3 ([0899f93](https://gitlab.com/gitlab-org/gitlab-ui/commit/0899f936c7044f380be4a1fdf72f663f599ce799))
+
 ## [52.9.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.9.1...v52.9.2) (2023-01-09)
 
 

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.2",
+  "version": "52.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.4.2",
+    "dompurify": "^2.4.3",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -82,12 +82,12 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.0.1",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.14.0",
+    "@gitlab/svgs": "3.15.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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