diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/time_series.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/time_series.vue | 60 |
1 files changed, 39 insertions, 21 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 8f37a12af75..28af2d8ba77 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -2,18 +2,19 @@ import { omit, throttle } from 'lodash'; import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; -import dateFormat from 'dateformat'; -import { s__, __ } from '~/locale'; +import { s__ } from '~/locale'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import Icon from '~/vue_shared/components/icon.vue'; -import { panelTypes, chartHeight, lineTypes, lineWidths, dateFormats } from '../../constants'; -import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options'; +import { panelTypes, chartHeight, lineTypes, lineWidths, legendLayoutTypes } from '../../constants'; +import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options'; import { annotationsYAxis, generateAnnotationsSeries } from './annotations'; import { makeDataSeries } from '~/helpers/monitor_helper'; import { graphDataValidatorForValues } from '../../utils'; +import { formatDate, timezones } from '../../format_date'; + +export const timestampToISODate = timestamp => new Date(timestamp).toISOString(); const THROTTLED_DATAZOOM_WAIT = 1000; // milliseconds -const timestampToISODate = timestamp => new Date(timestamp).toISOString(); const events = { datazoom: 'datazoom', @@ -74,21 +75,41 @@ export default { required: false, default: () => [], }, + legendLayout: { + type: String, + required: false, + default: legendLayoutTypes.table, + }, legendAverageText: { type: String, required: false, default: s__('Metrics|Avg'), }, + legendCurrentText: { + type: String, + required: false, + default: s__('Metrics|Current'), + }, legendMaxText: { type: String, required: false, default: s__('Metrics|Max'), }, + legendMinText: { + type: String, + required: false, + default: s__('Metrics|Min'), + }, groupId: { type: String, required: false, default: '', }, + timezone: { + type: String, + required: false, + default: timezones.LOCAL, + }, }, data() { return { @@ -154,23 +175,16 @@ export default { const { yAxis, xAxis } = this.option; const option = omit(this.option, ['series', 'yAxis', 'xAxis']); + const timeXAxis = { + ...getTimeAxisOptions({ timezone: this.timezone }), + ...xAxis, + }; + const dataYAxis = { ...getYAxisOptions(this.graphData.yAxis), ...yAxis, }; - const timeXAxis = { - name: __('Time'), - type: 'time', - axisLabel: { - formatter: date => dateFormat(date, dateFormats.timeOfDay), - }, - axisPointer: { - snap: true, - }, - ...xAxis, - }; - return { series: this.chartOptionSeries, xAxis: timeXAxis, @@ -271,12 +285,13 @@ export default { */ formatAnnotationsTooltipText(params) { return { - title: dateFormat(params.data?.tooltipData?.title, dateFormats.default), + title: formatDate(params.data?.tooltipData?.title, { timezone: this.timezone }), content: params.data?.tooltipData?.content, }; }, formatTooltipText(params) { - this.tooltip.title = dateFormat(params.value, dateFormats.default); + this.tooltip.title = formatDate(params.value, { timezone: this.timezone }); + this.tooltip.content = []; params.seriesData.forEach(dataPoint => { @@ -368,8 +383,11 @@ export default { :thresholds="thresholds" :width="width" :height="height" - :average-text="legendAverageText" - :max-text="legendMaxText" + :legend-layout="legendLayout" + :legend-average-text="legendAverageText" + :legend-current-text="legendCurrentText" + :legend-max-text="legendMaxText" + :legend-min-text="legendMinText" @created="onChartCreated" @updated="onChartUpdated" > |