@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/utils/charts/mock_data.js

@@ -1,259 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,344 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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}`;
-};