@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/charts/gauge/gauge.vue

@@ -1,178 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import merge from 'lodash/merge';
-import uniq from 'lodash/uniq';
-import sortBy from 'lodash/sortBy';
-import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import Chart from '../chart/chart.vue';
-
-const AXIS_LABEL_FONT_SIZE_PX = 14;
-
-const ARC_RADIUS = '80%';
-const DETAIL_FONT_SIZE_PX = 30;
-const DETAIL_FONT_FAMILY = 'sans-serif';
-const DETAIL_FONT_WEIGHT = 'bold';
-const POINTER_LENGTH = '65%';
-const POINTER_WIDTH_PX = 5;
-
-const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) => [
-  {
-    type: 'gauge',
-    detail: {
-      show: true,
-      formatter: () => {
-        const currentValue = Number.isFinite(value) ? value : null;
-
-        return text || (currentValue ?? '--');
-      },
-      color: `${gaugeNeutralHues[0]}`,
-      fontSize: DETAIL_FONT_SIZE_PX,
-      fontFamily: DETAIL_FONT_FAMILY,
-      fontWeight: DETAIL_FONT_WEIGHT,
-    },
-    axisLabel: {
-      show: true,
-      fontSize: AXIS_LABEL_FONT_SIZE_PX,
-      formatter: (theValue) => (Number.isFinite(theValue) ? theValue : '--'),
-      color: `${gaugeNeutralHues[1]}`,
-    },
-    axisLine: {
-      lineStyle: {
-        color: axisColor,
-      },
-    },
-    radius: ARC_RADIUS,
-    pointer: { length: POINTER_LENGTH, width: POINTER_WIDTH_PX },
-    data: [{ value }],
-    min,
-    max,
-    splitNumber,
-  },
-];
-
-export default {
-  name: 'GlGaugeChart',
-  components: {
-    Chart,
-  },
-  props: {
-    value: {
-      type: Number,
-      required: true,
-    },
-    min: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      required: false,
-      default: 100,
-    },
-    thresholds: {
-      type: Array,
-      required: false,
-      default: () => [],
-      validator: (value) => {
-        return value?.length ? value.every((item) => Number.isFinite(item)) : true;
-      },
-    },
-    text: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    splitNumber: {
-      type: Number,
-      required: false,
-      default: 10,
-    },
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    options() {
-      const mergedOptions = merge(
-        {},
-        {
-          series: gaugeChartSeries({
-            value: this.value,
-            text: this.text,
-            min: this.min,
-            max: this.max,
-            splitNumber: this.splitNumber,
-            axisColor: this.axisColor,
-          }),
-        },
-        this.option
-      );
-
-      return mergedOptions;
-    },
-    validThresholds() {
-      const { thresholds, min, max } = this;
-
-      if (!thresholds?.length) return [];
-
-      const uniqueThresholds = uniq(thresholds);
-      const filteredThresholds = uniqueThresholds.filter((threshold) => {
-        return Number.isFinite(threshold) && threshold > min && threshold < max;
-      });
-      /**
-       * Only the first two thresholds will be used
-       */
-      const reducedThresholdsList =
-        filteredThresholds.length > 2
-          ? [filteredThresholds[0], filteredThresholds[1]]
-          : [...filteredThresholds];
-      const sortedThresholds = sortBy(reducedThresholdsList);
-
-      return sortedThresholds;
-    },
-    valueIsInLastThreshold() {
-      const { validThresholds, value } = this;
-
-      return validThresholds.length > 0 && value >= validThresholds[validThresholds.length - 1];
-    },
-    axisColor() {
-      const { validThresholds, max } = this;
-
-      let color;
-
-      if (validThresholds.length === 0) {
-        color = [[1, gaugeSafeHues[0]]];
-      } else if (validThresholds.length === 1) {
-        color = [
-          [validThresholds[0] / max, gaugeSafeHues[0]],
-          [1, gaugeWarningHue],
-        ];
-      } else if (validThresholds.length >= 2) {
-        /**
-         * If there are more than two ranges set, only the first two will
-         * be used
-         */
-        color = [
-          [validThresholds[0] / max, gaugeSafeHues[0]],
-          [validThresholds[1] / max, gaugeSafeHues[1]],
-          [1, gaugeWarningHue],
-        ];
-      }
-
-      return color;
-    },
-  },
-  methods: {
-    onCreated(chart) {
-      this.$emit('created', chart);
-    },
-  },
-};
-</script>
-
-<template>
-  <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
-</template>

package/src/components/charts/heatmap/heatmap.md

@@ -1,7 +0,0 @@
-## Heatmaps
-
-**Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)
-in the legend and make the corresponding data point(s) on the chart rendered disappear.
-_See [area chart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)
-for an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)
-with the functionality of the legend, where clicking on it does nothing.

package/src/components/charts/heatmap/heatmap.scss

@@ -1,7 +0,0 @@
-.gl-heatmap {
-  position: relative;
-
-  .gl-legend-inline-series {
-    @apply gl-pointer-events-none;
-  }
-}

package/src/components/charts/heatmap/heatmap.vue

@@ -1,290 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import merge from 'lodash/merge';
-import { WHITE, GRAY_100 } from '../../../tokens/build/js/tokens';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import { heatmapHues } from '../../../utils/charts/theme';
-import { engineeringNotation } from '../../../utils/number_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
-import Chart from '../chart/chart.vue';
-import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
-
-const defaultOptions = {
-  visualMap: {
-    show: false,
-    inRange: {
-      color: heatmapHues,
-    },
-  },
-  series: {
-    type: 'heatmap',
-  },
-};
-
-/*
- * The series is an array of arrays containing [x, y, value]
- * x and y are position, value determines the color
- * We want the min and max from value field to make the range of colors
- */
-function getRange(series) {
-  return series.reduce(
-    (acc, curr) => {
-      const value = curr[2] || 0;
-      if (value < acc.min) acc.min = value;
-      if (value > acc.max) acc.max = value;
-      return acc;
-    },
-    { min: 0, max: 0 }
-  );
-}
-
-export default {
-  name: 'GlHeatmap',
-  components: {
-    Chart,
-    ChartLegend,
-    ChartTooltip,
-    TooltipDefaultFormat,
-  },
-  props: {
-    option: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    dataSeries: {
-      type: Array,
-      required: true,
-    },
-    xAxisLabels: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    yAxisLabels: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    xAxisName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    yAxisName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    formatTooltipText: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-    legendAverageText: {
-      type: String,
-      required: false,
-      default: 'Avg',
-    },
-    legendMaxText: {
-      type: String,
-      required: false,
-      default: 'Max',
-    },
-    responsive: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    /**
-     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
-     */
-    height: {
-      type: [Number, String],
-      required: false,
-      default: null,
-    },
-    showTooltip: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-      tooltip: {
-        title: '',
-        content: {},
-        left: '0',
-        top: '0',
-      },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
-    };
-  },
-  computed: {
-    computedOptions() {
-      const { min, max } = getRange(this.dataSeries);
-      return merge(
-        {},
-        defaultOptions,
-        {
-          series: {
-            data: this.dataSeries,
-            z: 2,
-          },
-          grid: {
-            left: '64px',
-            right: '32px',
-            show: true,
-            borderWidth: 0,
-            backgroundColor: GRAY_100,
-          },
-          visualMap: {
-            min,
-            max,
-          },
-          xAxis: {
-            data: this.xAxisLabels,
-            z: 3,
-            axisTick: false,
-            axisLabel: {
-              margin: 2,
-            },
-            name: this.xAxisName,
-            nameGap: 16,
-            nameLocation: 'middle',
-            nameTextStyle: {
-              verticalAlign: 'middle',
-            },
-            offset: 0,
-            splitLine: {
-              show: true,
-              interval: 0,
-              lineStyle: {
-                color: WHITE,
-                width: 2,
-              },
-            },
-            axisPointer: {
-              show: true,
-              label: {
-                formatter: this.onLabelChange,
-              },
-            },
-          },
-          yAxis: {
-            data: this.yAxisLabels,
-            z: 3,
-            type: 'category',
-            axisTick: false,
-            axisLabel: {
-              margin: 8,
-            },
-            name: this.yAxisName,
-            nameLocation: 'center',
-            nameGap: 50,
-            nameRotate: 90,
-            splitLine: {
-              show: true,
-              interval: 0,
-              lineStyle: {
-                color: WHITE,
-                width: 2,
-              },
-            },
-          },
-        },
-        this.option
-      );
-    },
-    legendStyle() {
-      return { paddingLeft: this.computedOptions.grid.left, marginTop: '-32px' };
-    },
-    compiledOptions() {
-      return this.chart ? this.chart.getOption() : null;
-    },
-    seriesInfo() {
-      const { min, max } = getRange(this.dataSeries);
-      const step = (max - min) / heatmapHues.length;
-
-      return heatmapHues.map((color, index) => {
-        const lowerBound = engineeringNotation(min + step * index);
-        const upperBound = engineeringNotation(min + step * (index + 1));
-
-        return {
-          name: `${lowerBound} - ${upperBound}`,
-          color,
-          type: 'solid',
-        };
-      });
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    },
-  },
-  methods: {
-    defaultFormatTooltipText(params) {
-      this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);
-      this.tooltip.content = getTooltipContent(params, this.computedOptions.yAxis.name);
-    },
-    onCreated(chart) {
-      this.chart = chart;
-      this.$emit('created', chart);
-    },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-      const { seriesData = [] } = params;
-      if (seriesData.length && seriesData[0].value) {
-        const { seriesId, value } = seriesData[0];
-        const [left, top] = this.chart.convertToPixel({ seriesId }, value);
-
-        this.tooltip = {
-          ...this.tooltip,
-          left: `${left}px`,
-          top: `${top}px`,
-        };
-      }
-    },
-  },
-  HEIGHT_AUTO_CLASSES,
-};
-</script>
-
-<template>
-  <div class="gl-heatmap" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
-    <chart
-      v-bind="$attrs"
-      :class="{ 'gl-grow': autoHeight }"
-      :height="height"
-      :options="computedOptions"
-      @created="onCreated"
-      v-on="$listeners"
-    />
-    <chart-tooltip
-      v-if="chart"
-      :chart="chart"
-      :top="tooltip.top"
-      :left="tooltip.left"
-      :show="showTooltip"
-    >
-      <template #title>
-        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
-        <div v-else>{{ tooltip.title }}</div>
-      </template>
-      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="tooltip.content" />
-    </chart-tooltip>
-    <chart-legend
-      v-if="compiledOptions"
-      :chart="chart"
-      :series-info="seriesInfo"
-      :style="legendStyle"
-      :text-style="compiledOptions.textStyle"
-      :max-text="legendMaxText"
-      :average-text="legendAverageText"
-    />
-  </div>
-</template>

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

@@ -1,3 +0,0 @@
-import Heatmap from './heatmap.vue';
-
-export default Heatmap;

package/src/components/charts/legend/legend.md

@@ -1,16 +0,0 @@
-## Disabling Legends
-
-By default, to prevent the chart from disappearing, all legends can't be toggled off – the last
-active legend will be disabled. To manually disable a legend, pass it the
-`disabled` property in `seriesInfo`:
-
-```js
-seriesInfo = [
-  {
-    name: 'Example Legend',
-    color: 'blue',
-    disabled: true,
-    type: 'line'
-  }
-]
-```

package/src/components/charts/legend/legend.scss

@@ -1,97 +0,0 @@
-// shorter height by half a line, so table body is cut off,
-// suggesting there's more to scroll
-$legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
-
-.gl-legend {
-  position: relative;
-}
-
-.gl-chart-h-auto {
-  .gl-legend-inline {
-      // match the height of gl-legend-tabular (header + body)
-      max-height: $gl-line-height-24 + $legend-body-h;
-      @apply gl-overflow-auto;
-  }
-}
-
-.gl-legend-tabular.gl-legend-b-fade,
-.gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade {
-  &::after {
-    background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
-    bottom: 0;
-    content: '';
-    @apply gl-block;
-    @apply gl-h-4;
-    position: absolute;
-    @apply gl-w-full;
-  }
-}
-
-.gl-legend-inline {
-    @apply gl-flex;
-    @apply gl-flex-wrap;
-    @apply gl-shrink-0;
-
-  .gl-legend-inline-series {
-    @apply gl-flex;
-    @apply gl-shrink-0;
-    @apply gl-justify-between;
-    @apply gl-items-center;
-    @apply gl-pr-5;
-
-    &:hover {
-      @apply gl-cursor-pointer;
-      @apply gl-underline;
-    }
-
-    .gl-legend-inline-series-label {
-      @apply gl-mr-3;
-    }
-  }
-}
-
-.gl-legend-tabular {
-  .gl-legend-tabular-header {
-    @apply gl-flex;
-    @apply gl-justify-end;
-  }
-
-  .gl-legend-tabular-header-cell,
-  .gl-legend-tabular-details-cell {
-    @apply gl-whitespace-nowrap;
-    @apply gl-overflow-hidden;
-    @apply gl-text-ellipsis;
-    @apply gl-text-right;
-    @apply gl-w-1/8;
-  }
-
-  .gl-legend-tabular-header-cell {
-    @apply gl-font-bold;
-    @apply gl-leading-24;
-    @apply gl-px-3;
-  }
-
-  .gl-legend-tabular-body {
-    height: $legend-body-h;
-    @apply gl-overflow-y-auto;
-  }
-
-  .gl-legend-tabular-row {
-    @apply gl-flex;
-
-    &:nth-child(odd) {
-      background-color: var(--gray-50, #{$gray-50});
-    }
-  }
-
-  .gl-legend-tabular-title-cell,
-  .gl-legend-tabular-details-cell {
-    @apply gl-leading-24;
-    @apply gl-px-3;
-  }
-
-  .gl-legend-tabular-title-cell {
-    @apply gl-overflow-hidden;
-    @apply gl-w-1/2;
-  }
-}