@gitlab/duo-ui 0.1.0

package/src/utils/charts/mock_data.js

@@ -0,0 +1,259 @@
+import { BLUE_500 } from '../../tokens/build/js/tokens';
+import { hexToRgba } from '../utils';
+import { colorFromDefaultPalette } from './theme';
+
+export const mockDefaultDataZoomConfig = {
+  dataZoom: [
+    {
+      bottom: 22,
+      filterMode: 'none',
+      minSpan: 0.01,
+      type: 'slider',
+    },
+    {
+      type: 'inside',
+      filterMode: 'none',
+      minSpan: 0.01,
+      disabled: true,
+    },
+  ],
+  grid: {
+    bottom: 81,
+  },
+  xAxis: {
+    nameGap: 67,
+  },
+};
+
+export const mockDefaultChartOptions = {
+  grid: {
+    top: 16,
+    bottom: 44,
+    left: 64,
+    right: 32,
+  },
+  xAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    boundaryGap: false,
+    splitLine: {
+      show: false,
+    },
+    axisPointer: {
+      show: true,
+      label: {},
+      lineStyle: {
+        type: 'solid',
+      },
+    },
+  },
+  yAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    nameGap: 50,
+    axisLabel: {},
+    axisTick: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+};
+
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+export const mockAnnotationsSeries = {
+  series: [
+    {
+      type: 'scatter',
+      name: 'annotations',
+      data: [],
+      markLine: {
+        lineStyle: {
+          color: BLUE_500,
+        },
+        data: [
+          { xAxis: '2018-01-25T01:00:00.000Z' },
+          { xAxis: '2018-01-25T10:00:00.000Z' },
+          { xAxis: '2018-02-06T08:00:00.000Z' },
+        ],
+      },
+      markPoint: {
+        symbol: 'path://m5 229 5 8h-10z',
+        symbolSize: '8',
+        symbolOffset: [0, ' 60%'],
+        itemStyle: {
+          color: BLUE_500,
+        },
+        data: [
+          {
+            name: 'annotations',
+            xAxis: '2018-01-25T01:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'Scranton strangler was caught.' },
+          },
+          {
+            name: 'annotations',
+            xAxis: '2018-01-25T10:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'Tobys green car is missing.' },
+          },
+          {
+            name: 'annotations',
+            xAxis: '2018-02-06T08:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'It was actually Toby!' },
+          },
+        ],
+      },
+    },
+  ],
+};
+
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+export const mockAnnotationsConfigs = {
+  annotations: [
+    {
+      min: '2018-01-25T01:00:00.000Z',
+      max: '2018-01-25T01:00:00.000Z',
+      tooltipData: { content: 'Scranton strangler was caught.' },
+    },
+    {
+      min: '2018-01-25T10:00:00.000Z',
+      max: '2018-01-25T10:00:00.000Z',
+      tooltipData: { content: 'Tobys green car is missing.' },
+    },
+    {
+      min: '2018-02-06T08:00:00.000Z',
+      max: '2018-02-06T08:00:00.000Z',
+      tooltipData: { content: 'It was actually Toby!' },
+    },
+  ],
+};
+
+export const mockDefaultStackedBarData = [
+  { name: 'Fun 1', data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31] },
+  { name: 'Fun 2', data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32] },
+  { name: 'Fun 3', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
+  { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46] },
+];
+
+export const mockDefaultStackedLineData = [
+  { name: 'Stacked median line', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
+];
+
+export const mockDefaultLineData = [
+  {
+    name: 'Median line',
+    data: [
+      ['Joe', 1120],
+      ['Sarah', 732],
+      ['Tom', 501],
+      ['Mary', 634],
+      ['Mike', 290],
+      ['Ben', 130],
+      ['Jane', 120],
+    ],
+  },
+];
+
+export const mockDefaultBarData = [
+  {
+    name: 'Full',
+    data: [
+      ['Joe', 1220],
+      ['Sarah', 932],
+      ['Tom', 901],
+      ['Mary', 934],
+      ['Mike', 1290],
+      ['Ben', 1330],
+      ['Jane', 1320],
+    ],
+  },
+];
+
+export const mockRawBarData = [
+  ['Mon', 1220],
+  ['Tue', 932],
+  ['Wed', 901],
+  ['Thu', 934],
+  ['Fri', 1290],
+  ['Sat', 1330],
+  ['Sun', 1320],
+];
+
+const color = colorFromDefaultPalette(0);
+export const mockDefaultLineChartConfig = {
+  name: 'Line chart',
+  data: [],
+  type: 'line',
+  yAxisIndex: 0,
+  lineStyle: { color },
+  itemStyle: { color },
+};
+
+export const mockDefaultBarChartConfig = {
+  type: 'bar',
+  name: 'Bar chart',
+  data: [],
+  stack: null,
+  barMaxWidth: '50%',
+  yAxisIndex: 0,
+  itemStyle: {
+    color: hexToRgba(color, 0.2),
+    borderColor: color,
+    borderWidth: 1,
+  },
+  emphasis: {
+    itemStyle: {
+      color: hexToRgba(color, 0.4),
+    },
+  },
+};
+
+export const mockSecondaryData = [
+  {
+    name: 'Secondary 1',
+    data: [13, 25, 38, 23, 27, 28, 29, 27, 1, 15, 65, 31],
+  },
+];
+
+export const mockSecondaryBarData = [
+  {
+    name: 'Secondary',
+    type: 'bar',
+    data: [
+      ['Joe', 220],
+      ['Sarah', 392],
+      ['Tom', 291],
+      ['Mary', 594],
+      ['Mike', 320],
+      ['Ben', 230],
+      ['Jane', 120],
+      ['Anne', 290],
+    ],
+  },
+];
+
+export const mockSecondaryTrendlineData = [
+  {
+    type: 'line',
+    name: 'Median line',
+    data: [
+      ['Joe', 220],
+      ['Sarah', 392],
+      ['Tom', 291],
+      ['Mary', 594],
+      ['Mike', 320],
+      ['Ben', 230],
+      ['Jane', 120],
+      ['Anne', 290],
+    ],
+  },
+];

package/src/utils/charts/story_config.js

@@ -0,0 +1,21 @@
+import times from 'lodash/times';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
+import { colorFromDefaultPalette } from './theme';
+
+/**
+ * Generates series data for usage in chart examples
+ *
+ * @param {Number} amount number of generated series
+ * @param {String} nameType type of names - how long they should be
+ * @returns {Array} generated series data
+ */
+export const generateSeriesData = (amount = 10, nameType = SERIES_NAME_SHORT) => {
+  const defaultData = [820, 932, 960, 1150, 1290, 1330, 1390];
+  const name = SERIES_NAME[nameType];
+
+  return times(amount, (index) => ({
+    color: colorFromDefaultPalette(index),
+    data: defaultData.map((value) => value * index),
+    name: `${name}${index + 1}`,
+  }));
+};

package/src/utils/charts/theme.js

@@ -0,0 +1,344 @@
+import {
+  WHITE,
+  GRAY_50,
+  GRAY_100,
+  GRAY_200,
+  GRAY_300,
+  GRAY_500,
+  GRAY_600,
+  GRAY_900,
+  RED_500,
+  DATA_VIZ_AQUA_50,
+  DATA_VIZ_AQUA_100,
+  DATA_VIZ_AQUA_200,
+  DATA_VIZ_AQUA_300,
+  DATA_VIZ_AQUA_400,
+  DATA_VIZ_AQUA_500,
+  DATA_VIZ_AQUA_600,
+  DATA_VIZ_AQUA_700,
+  DATA_VIZ_AQUA_800,
+  DATA_VIZ_AQUA_900,
+  DATA_VIZ_AQUA_950,
+  DATA_VIZ_BLUE_50,
+  DATA_VIZ_BLUE_100,
+  DATA_VIZ_BLUE_200,
+  DATA_VIZ_BLUE_300,
+  DATA_VIZ_BLUE_400,
+  DATA_VIZ_BLUE_500,
+  DATA_VIZ_BLUE_600,
+  DATA_VIZ_BLUE_700,
+  DATA_VIZ_BLUE_800,
+  DATA_VIZ_BLUE_900,
+  DATA_VIZ_BLUE_950,
+  DATA_VIZ_GREEN_50,
+  DATA_VIZ_GREEN_100,
+  DATA_VIZ_GREEN_200,
+  DATA_VIZ_GREEN_300,
+  DATA_VIZ_GREEN_400,
+  DATA_VIZ_GREEN_500,
+  DATA_VIZ_GREEN_600,
+  DATA_VIZ_GREEN_700,
+  DATA_VIZ_GREEN_800,
+  DATA_VIZ_GREEN_900,
+  DATA_VIZ_GREEN_950,
+  DATA_VIZ_MAGENTA_50,
+  DATA_VIZ_MAGENTA_100,
+  DATA_VIZ_MAGENTA_200,
+  DATA_VIZ_MAGENTA_300,
+  DATA_VIZ_MAGENTA_400,
+  DATA_VIZ_MAGENTA_500,
+  DATA_VIZ_MAGENTA_600,
+  DATA_VIZ_MAGENTA_700,
+  DATA_VIZ_MAGENTA_800,
+  DATA_VIZ_MAGENTA_900,
+  DATA_VIZ_MAGENTA_950,
+  DATA_VIZ_ORANGE_50,
+  DATA_VIZ_ORANGE_100,
+  DATA_VIZ_ORANGE_200,
+  DATA_VIZ_ORANGE_300,
+  DATA_VIZ_ORANGE_400,
+  DATA_VIZ_ORANGE_500,
+  DATA_VIZ_ORANGE_600,
+  DATA_VIZ_ORANGE_700,
+  DATA_VIZ_ORANGE_800,
+  DATA_VIZ_ORANGE_950,
+  DATA_VIZ_ORANGE_900,
+} from '../../tokens/build/js/tokens';
+import {
+  scrollHandleSvgPath,
+  marqueeSelectionSvgPath,
+  redoSvgPath,
+  clearAllSvgPath,
+  downloadSvgPath,
+} from '../svgs/svg_paths';
+import { hexToRgba } from '../utils';
+
+const GL_BORDER_RADIUS_BASE = '0.25rem';
+
+export const themeName = 'gitlab';
+
+export const heatmapHues = [
+  GRAY_100,
+  DATA_VIZ_BLUE_200,
+  DATA_VIZ_BLUE_400,
+  DATA_VIZ_BLUE_600,
+  DATA_VIZ_BLUE_800,
+];
+
+export const gaugeNeutralHues = [GRAY_900, GRAY_500];
+export const gaugeSafeHues = [DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900];
+export const gaugeWarningHue = DATA_VIZ_ORANGE_500;
+
+/**
+ * The default palette is based on the Categorical data palette
+ * Categorical data (also known as qualitative or thematic) uses hue to
+ * differentiate qualitative data, and lightness to differentiate quantitive data.
+ * More info: https://design.gitlab.com/data-visualization/color#categorical-data
+ */
+export const colorPaletteDefault = [
+  DATA_VIZ_BLUE_500,
+  DATA_VIZ_ORANGE_600,
+  DATA_VIZ_AQUA_500,
+  DATA_VIZ_GREEN_600,
+  DATA_VIZ_MAGENTA_500,
+  DATA_VIZ_BLUE_700,
+  DATA_VIZ_ORANGE_800,
+  DATA_VIZ_AQUA_700,
+  DATA_VIZ_GREEN_800,
+  DATA_VIZ_MAGENTA_700,
+  DATA_VIZ_BLUE_900,
+  DATA_VIZ_ORANGE_950,
+  DATA_VIZ_AQUA_900,
+  DATA_VIZ_GREEN_950,
+  DATA_VIZ_MAGENTA_900,
+  DATA_VIZ_BLUE_600,
+  DATA_VIZ_ORANGE_700,
+  DATA_VIZ_AQUA_600,
+  DATA_VIZ_GREEN_700,
+  DATA_VIZ_MAGENTA_600,
+  DATA_VIZ_BLUE_800,
+  DATA_VIZ_ORANGE_900,
+  DATA_VIZ_AQUA_800,
+  DATA_VIZ_GREEN_900,
+  DATA_VIZ_MAGENTA_800,
+  DATA_VIZ_BLUE_950,
+  DATA_VIZ_ORANGE_500,
+  DATA_VIZ_AQUA_950,
+  DATA_VIZ_GREEN_500,
+  DATA_VIZ_MAGENTA_950,
+];
+export const colorFromDefaultPalette = (index) =>
+  colorPaletteDefault[index % colorPaletteDefault.length];
+
+export const colorPaletteDark = [
+  DATA_VIZ_BLUE_500,
+  DATA_VIZ_ORANGE_400,
+  DATA_VIZ_AQUA_500,
+  DATA_VIZ_GREEN_400,
+  DATA_VIZ_MAGENTA_500,
+  DATA_VIZ_BLUE_300,
+  DATA_VIZ_ORANGE_200,
+  DATA_VIZ_AQUA_300,
+  DATA_VIZ_GREEN_200,
+  DATA_VIZ_MAGENTA_300,
+  DATA_VIZ_BLUE_100,
+  DATA_VIZ_ORANGE_50,
+  DATA_VIZ_AQUA_100,
+  DATA_VIZ_GREEN_50,
+  DATA_VIZ_MAGENTA_100,
+  DATA_VIZ_BLUE_400,
+  DATA_VIZ_ORANGE_300,
+  DATA_VIZ_AQUA_400,
+  DATA_VIZ_GREEN_300,
+  DATA_VIZ_MAGENTA_400,
+  DATA_VIZ_BLUE_200,
+  DATA_VIZ_ORANGE_100,
+  DATA_VIZ_AQUA_200,
+  DATA_VIZ_GREEN_100,
+  DATA_VIZ_MAGENTA_200,
+  DATA_VIZ_BLUE_50,
+  DATA_VIZ_ORANGE_500,
+  DATA_VIZ_AQUA_50,
+  DATA_VIZ_GREEN_500,
+  DATA_VIZ_MAGENTA_50,
+];
+
+export const colorFromDarkPalette = (index) => colorPaletteDark[index % colorPaletteDark.length];
+
+const axes = {
+  axisLabel: {
+    margin: 8,
+    show: true,
+    color: `var(--gray-600, ${GRAY_600})`,
+    hideOverlap: true,
+  },
+  axisLine: {
+    show: false,
+  },
+  axisPointer: {
+    lineStyle: {
+      type: 'solid',
+      color: GRAY_600,
+    },
+    label: {
+      show: false,
+    },
+  },
+  axisTick: {
+    show: true,
+    alignWithLabel: true,
+    lineStyle: {
+      color: GRAY_200,
+    },
+  },
+  nameGap: 30,
+  nameTextStyle: {
+    fontWeight: 'bold',
+  },
+  splitLine: {
+    lineStyle: {
+      color: [GRAY_200],
+    },
+  },
+  splitArea: {
+    show: false,
+    areaStyle: {
+      color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)],
+    },
+  },
+};
+
+const isLineChartWithoutArea = (options) =>
+  Array.isArray(options?.series) &&
+  options.series.some((series) => series.type === 'line' && !series.areaStyle);
+
+export const createTheme = (options = {}) => ({
+  color: colorPaletteDefault,
+  backgroundColor: 'transparent',
+  textStyle: {
+    color: `var(--gl-text-color, ${GRAY_900})`,
+  },
+  markLine: {
+    silent: true,
+    symbol: 'none',
+    label: {
+      show: false,
+    },
+    lineStyle: {
+      color: RED_500,
+      width: 1,
+      type: 'dashed',
+    },
+  },
+  markArea: {
+    silent: true,
+    itemStyle: {
+      color: hexToRgba(RED_500, 0.1),
+    },
+  },
+  dataZoom: {
+    borderColor: 'transparent',
+    filterMode: 'none',
+    brushSelect: false,
+    dataBackground: {
+      lineStyle: {
+        width: 2,
+        color: GRAY_200,
+        opacity: 1,
+      },
+      // render unfilled zoom-graph if the series is a line chart without area styles
+      // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
+      areaStyle: isLineChartWithoutArea(options)
+        ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+        : {
+            color: GRAY_50,
+            opacity: 1,
+          },
+    },
+    fillerColor: hexToRgba(GRAY_200, 0.23),
+    handleIcon: scrollHandleSvgPath,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: GRAY_500,
+    },
+    handleSize: '50%',
+    labelFormatter: () => null,
+    textStyle: {
+      color: GRAY_600,
+    },
+  },
+  toolbox: {
+    top: '-5',
+    left: 'center',
+    itemSize: 14,
+    emphasis: {
+      iconStyle: {
+        borderWidth: 0,
+        color: GRAY_900,
+        textBackgroundColor: WHITE,
+        textBorderRadius: GL_BORDER_RADIUS_BASE,
+        textPadding: [8, 12],
+      },
+    },
+    iconStyle: {
+      color: GRAY_500,
+      borderWidth: 0,
+    },
+    itemGap: 8,
+    feature: {
+      dataZoom: {
+        title: {
+          zoom: 'Click to zoom in on a portion of the graph',
+          back: 'Remove selection',
+        },
+        icon: {
+          zoom: marqueeSelectionSvgPath,
+          back: redoSvgPath,
+        },
+      },
+      restore: {
+        title: 'Remove all selections and return chart to default state',
+        icon: clearAllSvgPath,
+      },
+      saveAsImage: {
+        title: 'Save chart as an image',
+        name: 'graph',
+        icon: downloadSvgPath,
+      },
+    },
+  },
+  markPoint: {
+    label: {
+      normal: {
+        textStyle: {
+          color: GRAY_50,
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: GRAY_50,
+        },
+      },
+    },
+  },
+  line: {
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: 2,
+      },
+    },
+    symbolSize: '6',
+    symbol: 'circle',
+    showSymbol: false,
+    smooth: false,
+  },
+  categoryAxis: axes,
+  valueAxis: axes,
+  logAxis: axes,
+  timeAxis: axes,
+});

package/src/utils/charts/utils.js

@@ -0,0 +1,49 @@
+import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants';
+
+/**
+ * Check if passed series has annotations related data.
+ *
+ * This is currently used in time series charts (area & line).
+ *
+ * @param {Array} series Array of series
+ * @returns {Boolean}
+ */
+export const seriesHasAnnotations = (series = []) =>
+  (series || []).filter(
+    (seriesData) =>
+      seriesData.name === ANNOTATIONS_SERIES_NAME &&
+      seriesData[ANNOTATIONS_COMPONENT_TYPE]?.data?.length
+  ).length !== 0;
+
+/**
+ * Check if a data point is from an annotation series.
+ *
+ * This is triggered when hovered over time series charts.
+ *
+ * This is currently used in
+ * @param {Object} params data point object
+ * @returns {boolean}
+ */
+export const isDataPointAnnotation = (params = {}) =>
+  params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
+
+/**
+ * Date formatter to make date strings more
+ * readable.
+ *
+ * This is currently used in area and line charts
+ * stories.
+ *
+ * @param {String} d date string
+ * @returns {String}
+ */
+export const timeSeriesDateFormatter = (d = '') => {
+  if (!d) {
+    return '';
+  }
+  const date = new Date(d);
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+
+  return `${date.getFullYear()}-${month}-${day}`;
+};