@gitlab/ui 52.3.1 → 52.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.3.1",
+  "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];
 

package/src/scss/utilities.scss

@@ -4939,6 +4939,14 @@
   min-height: $gl-spacing-scale-8 !important;
 }
 
+.gl-max-w-0 {
+  max-width: 0;
+}
+
+.gl-max-w-0\! {
+  max-width: 0 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -354,6 +354,10 @@
   min-height: $gl-spacing-scale-8;
 }
 
+@mixin gl-max-w-0 {
+  max-width: 0;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }