@gitlab/ui 36.7.1 → 37.2.0

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

@@ -1,16 +1,11 @@
-import { withKnobs, object, array, boolean } from '@storybook/addon-knobs';
 import { times } from 'lodash';
 import { GlAreaChart } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
-import readme from './area.md';
+import { disableControls } from '../../../utils/stories_utils';
 
-const components = {
-  GlAreaChart,
-};
 const defaultData = [
   {
     name: 'First Series',
@@ -32,6 +27,7 @@ const defaultOptions = {
     type: 'category',
   },
 };
+
 const template = `<gl-area-chart
   :data="data"
   :option="option"
@@ -40,136 +36,140 @@ const template = `<gl-area-chart
   :includeLegendAvgMax="includeLegendAvgMax"
 />`;
 
-function generateProps({
+const generateProps = ({
   data = defaultData,
   option = defaultOptions,
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
-} = {}) {
-  return {
-    option: {
-      default: object('EChart Options', option),
-    },
-    thresholds: {
-      default: array('Thresholds', thresholds),
+} = {}) => ({
+  data,
+  option,
+  thresholds,
+  annotations,
+  includeLegendAvgMax,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlAreaChart,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithThreshold = Template.bind({});
+WithThreshold.args = generateProps({
+  thresholds: [{ threshold: 1200, operator: '>' }],
+});
+
+export const WithAnnotationsAsProps = Template.bind({});
+WithAnnotationsAsProps.storyName = 'With annotations as props (recommended)';
+WithAnnotationsAsProps.args = generateProps({
+  ...mockAnnotationsConfigs,
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    annotations: {
-      default: object('Annotations', annotations),
+  ],
+  option: {
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-    data: {
-      default: object('Chart Data', data),
+  },
+});
+
+export const WithAnnotationsAsOptionSeries = Template.bind({});
+WithAnnotationsAsOptionSeries.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    includeLegendAvgMax: {
-      default: boolean('Include Legend Avg Max', includeLegendAvgMax),
+  ],
+  option: {
+    ...mockAnnotationsSeries,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-  };
-}
+  },
+});
 
-documentedStoriesOf('charts/area-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with threshold', () => ({
-    props: generateProps({
-      thresholds: [{ threshold: 1200, operator: '>' }],
-    }),
-    components,
-    template,
-  }))
-  .add('with annotations as props (recommended)', () => ({
-    props: generateProps({
-      ...mockAnnotationsConfigs,
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with annotations as option series', () => ({
-    props: generateProps({
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        ...mockAnnotationsSeries,
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
-        dataZoom: [
-          {
-            startValue: '2018-03-01T00:00:00.000',
-          },
-        ],
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        xAxis: {
-          name: 'Time',
-          type: 'category',
-        },
-        toolbox,
+    },
+    dataZoom: [
+      {
+        startValue: '2018-03-01T00:00:00.000',
       },
-    }),
-    components,
-    template,
-  }))
-  .add('mult-series', () => ({
-    props: generateProps({
-      data: times(10, (index) => ({
-        name: index,
-        data: defaultData[0].data.map(([label, value]) => [label, value * index]),
-      })),
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    xAxis: {
+      name: 'Time',
+      type: 'category',
+    },
+    toolbox,
+  },
+});
+
+export const MultSeries = Template.bind({});
+MultSeries.args = generateProps({
+  data: times(10, (index) => ({
+    name: index,
+    data: defaultData[0].data.map(([label, value]) => [label, value * index]),
+  })),
+});
+
+export default {
+  title: 'charts/area-chart',
+  component: GlAreaChart,
+  parameters: {
+    knobs: { disable: true },
+  },
+  argTypes: {
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+      'dataSeries',
+      'formatTooltipText',
+      'legendAverageText',
+      'legendMaxText',
+      'legendMinText',
+      'legendCurrentText',
+      'legendLayout',
+    ]),
+  },
+};

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

@@ -1,4 +1,5 @@
 import { GlBarChart } from '../../../charts';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({
@@ -49,11 +50,13 @@ export default {
   title: 'charts/bar-chart',
   component: GlBarChart,
   argTypes: {
-    showToolbox: { control: { disable: true } },
-    toolboxZoomIconPath: { control: { disable: true } },
-    toolboxBackIconPath: { control: { disable: true } },
-    toolboxRestoreIconPath: { control: { disable: true } },
-    toolboxSaveAsImageIconPath: { control: { disable: true } },
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+    ]),
   },
   parameters: {
     knobs: { disable: true },

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

@@ -1,6 +1,6 @@
 import { GlHeatmap } from '../../../charts';
 import { toolbox } from '../../../utils/charts/story_config';
-import readme from '../area/area.md';
+import { disableControls } from '../../../utils/stories_utils';
 
 function generateData() {
   let data = [
@@ -62,22 +62,19 @@ export default {
   component: GlHeatmap,
   parameters: {
     knobs: { disable: true },
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
   },
   argTypes: {
-    showToolbox: { control: { disable: true } },
-    toolboxZoomIconPath: { control: { disable: true } },
-    toolboxBackIconPath: { control: { disable: true } },
-    toolboxRestoreIconPath: { control: { disable: true } },
-    toolboxSaveAsImageIconPath: { control: { disable: true } },
-    dataSeries: { control: { disable: true } },
-    formatTooltipText: { control: { disable: true } },
-    legendAverageText: { control: { disable: true } },
-    legendMaxText: { control: { disable: true } },
-    responsive: { control: { disable: true } },
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+      'dataSeries',
+      'formatTooltipText',
+      'legendAverageText',
+      'legendMaxText',
+      'responsive',
+    ]),
   },
 };

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

@@ -1,5 +1,4 @@
 import { GlChart, GlChartLegend } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { generateSeriesData } from '../../../utils/charts/story_config';
 import {
@@ -7,7 +6,6 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_utils';
-import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {
@@ -89,16 +87,25 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
   };
 };
 
-documentedStoriesOf('charts/chart-legend', readme)
-  .add('default', () => getStoryOptions(10, SERIES_NAME_SHORT))
-  .add('default with long series names', () => getStoryOptions(10, SERIES_NAME_LONG))
-  .add('default with long series names and no spaces', () =>
-    getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES)
-  )
-  .add('with tabular layout', () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE))
-  .add('with tabular layout and long series names', () =>
-    getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE)
-  )
-  .add('with tabular layout and long series names with no spaces', () =>
-    getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE)
-  );
+export const Default = () => getStoryOptions(10, SERIES_NAME_SHORT);
+
+export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_LONG);
+
+export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
+  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
+
+export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+export const WithTabularLayoutAndLongSeriesNames = () =>
+  getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE);
+
+export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
+  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
+
+export default {
+  title: 'charts/chart-legend',
+  component: GlChartLegend,
+  parameters: {
+    controls: { disable: true },
+    knobs: { disable: true },
+  },
+};

package/src/components/charts/legend/legend.vue

@@ -39,6 +39,9 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * Text for data average (overridden by prop if needed for internationalization)
+     */
     averageText: {
       type: String,
       required: false,
@@ -54,11 +57,17 @@ export default {
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Text for max amount (overridden by prop if needed for internationalization)
+     */
     maxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Sets the display layout
+     */
     layout: {
       type: String,
       required: false,

package/src/components/charts/line/line.documentation.js

@@ -1,8 +1,6 @@
-import examples from './examples';
 import description from './line.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/components/charts/line/line.md

@@ -1,5 +1,3 @@
-### Line Chart
-
 This is a basic line chart.
 
 ### Implementation Details