@gitlab/ui 52.4.0 → 52.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [52.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.4.0...v52.5.0) (2022-12-13)
+
+
+### Features
+
+* **GlSparklineChart:** Add gradient prop ([eb28329](https://gitlab.com/gitlab-org/gitlab-ui/commit/eb283290d82a506c2a9732d3b86ad328f4be0385))
+
 # [52.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.3.1...v52.4.0) (2022-12-12)
 
 

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

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
 import Chart from '../chart/chart';
@@ -9,6 +10,15 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;
+const generateGradient = colors => {
+  return new graphic.LinearGradient(0, 0, 0, 1, colors.map((color, index) => {
+    const offset = index / (colors.length - 1);
+    return {
+      offset,
+      color
+    };
+  }));
+};
 var script = {
   components: {
     Chart,
@@ -48,6 +58,14 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Sets a colour gradient for the sparkline
+     */
+    gradient: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   data() {
@@ -117,9 +135,18 @@ var script = {
             yAxis: data[data.length - 1][1]
           }]
         },
-        data
+        data,
+        itemStyle: this.itemStyle
       };
     },
+    itemStyle() {
+      if (this.gradient.length) {
+        return {
+          color: generateGradient(this.gradient)
+        };
+      }
+      return {};
+    },
     lastYValue() {
       const latestEntry = this.data.slice(-1)[0];
       return latestEntry[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.4.0",
+  "version": "52.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -115,10 +115,10 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.28.0",
+    "eslint": "8.29.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.7",
+    "eslint-plugin-storybook": "0.6.8",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -8,6 +8,9 @@ let mockChartInstance;
 
 jest.mock('echarts', () => ({
   getInstanceByDom: () => mockChartInstance,
+  graphic: {
+    LinearGradient: jest.fn(),
+  },
 }));
 
 let triggerResize = () => {};
@@ -176,4 +179,12 @@ describe('sparkline chart component', () => {
     await wrapper.vm.$nextTick();
     expect(getLastYValue().exists()).toBe(false);
   });
+
+  it('gradient will set the series itemStyle color', async () => {
+    wrapper.setProps({ gradient: ['red', 'green'] });
+
+    await wrapper.vm.$nextTick();
+
+    expect(getChartOptions().series[0].itemStyle.color).toBeDefined();
+  });
 });

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

@@ -1,4 +1,5 @@
 import { GlSparklineChart } from '../../../charts';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import readme from './sparkline.md';
 
 const chartData = [
@@ -11,16 +12,24 @@ const chartData = [
   ['Sun', 18],
 ];
 
+const customGradient = [
+  colorFromDefaultPalette(0),
+  colorFromDefaultPalette(1),
+  colorFromDefaultPalette(2),
+];
+
 const generateProps = ({
   data = chartData,
   height = 50,
   tooltipLabel = 'tooltipLabel',
   showLastYValue = true,
+  gradient,
 } = {}) => ({
   data,
   height,
   tooltipLabel,
   showLastYValue,
+  gradient,
 });
 
 const Template = (args) => ({
@@ -33,6 +42,7 @@ const Template = (args) => ({
         :height="height"
         :tooltip-label="tooltipLabel"
         :show-last-y-value="showLastYValue"
+        :gradient="gradient"
       />
     </div>`,
 });
@@ -40,6 +50,9 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithChartColorGradient = Template.bind({});
+WithChartColorGradient.args = generateProps({ gradient: customGradient });
+
 export default {
   title: 'charts/sparkline-chart',
   component: GlSparklineChart,

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
+import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import {
   defaultChartOptions,
@@ -13,6 +14,19 @@ import ChartTooltip from '../tooltip/tooltip.vue';
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;
 
+const generateGradient = (colors) => {
+  return new graphic.LinearGradient(
+    0,
+    0,
+    0,
+    1,
+    colors.map((color, index) => {
+      const offset = index / (colors.length - 1);
+      return { offset, color };
+    })
+  );
+};
+
 export default {
   components: { Chart, ChartTooltip },
   directives: {
@@ -50,6 +64,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Sets a colour gradient for the sparkline
+     */
+    gradient: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -119,8 +141,15 @@ export default {
           ],
         },
         data,
+        itemStyle: this.itemStyle,
       };
     },
+    itemStyle() {
+      if (this.gradient.length) {
+        return { color: generateGradient(this.gradient) };
+      }
+      return {};
+    },
     lastYValue() {
       const latestEntry = this.data.slice(-1)[0];