Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 1x | <!-- eslint-disable vue/multi-word-component-names --> <script> import { GlDiscreteScatterChart } from '@gitlab/ui/dist/charts'; import { dateFormats } from '~/analytics/shared/constants'; import dateFormat from '~/lib/dateformat'; import { scatterChartLineProps } from '../constants'; export default { components: { GlDiscreteScatterChart, }, props: { xAxisTitle: { type: String, required: true, }, yAxisTitle: { type: String, required: true, }, scatterData: { type: Array, required: true, }, medianLineData: { type: Array, required: false, default: () => [], }, medianLineOptions: { type: Object, required: false, default: () => ({}), }, tooltipDateFormat: { type: String, required: false, default: dateFormats.defaultDateTime, }, }, data() { return { tooltipTitle: '', tooltipContent: '', chartOption: { xAxis: { type: 'time', axisLabel: { formatter: (date) => dateFormat(date, dateFormats.defaultDate), }, }, yAxis: { axisLabel: { formatter: (value) => value, }, }, dataZoom: [ { type: 'slider', bottom: 10, start: 0, }, ], }, }; }, computed: { chartData() { const result = [ { type: 'scatter', data: this.scatterData, }, ]; Iif (this.medianLineData.length) { result.push({ data: this.medianLineData, ...scatterChartLineProps.default, ...this.medianLineOptions, }); } return result; }, }, methods: { renderTooltip({ data }) { const [, metric, dateTime] = data; this.tooltipTitle = dateFormat(dateTime, this.tooltipDateFormat); this.tooltipContent = metric; }, }, }; </script> <template> <gl-discrete-scatter-chart :data="chartData" :option="chartOption" :y-axis-title="yAxisTitle" :x-axis-title="xAxisTitle" :format-tooltip-text="renderTooltip" > <template #tooltip-title> <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div> </template> <template #tooltip-content> <div class="d-flex"> <div class="flex-grow-1">{{ yAxisTitle }}: </div> <div class="font-weight-bold">{{ tooltipContent }}</div> </div> </template> </gl-discrete-scatter-chart> </template> |