diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index 8d2b223c575..16e3286c083 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.tsx @@ -10,7 +10,7 @@ import { TooltipProps, TooltipContentProps, ActiveDimensions, Tooltip } from '.. import { GraphTooltip } from './GraphTooltip/GraphTooltip'; import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu'; import { GraphDimensions } from './GraphTooltip/types'; -import { graphTimeFormat, graphTimeFormatter } from './utils'; +import { graphTimeFormat, graphTickFormatter } from './utils'; export interface GraphProps { children?: JSX.Element | JSX.Element[]; @@ -314,6 +314,7 @@ export class Graph extends PureComponent { shadowSize: 0, }, xaxis: { + timezone: timeZone, show: true, mode: 'time', min: min, @@ -321,7 +322,7 @@ export class Graph extends PureComponent { label: 'Datetime', ticks: ticks, timeformat: graphTimeFormat(ticks, min, max), - timeFormatter: graphTimeFormatter(timeZone), + tickFormatter: graphTickFormatter, }, yaxes, grid: { diff --git a/packages/grafana-ui/src/components/Graph/utils.ts b/packages/grafana-ui/src/components/Graph/utils.ts index d1a41174f76..1b5983fc306 100644 --- a/packages/grafana-ui/src/components/Graph/utils.ts +++ b/packages/grafana-ui/src/components/Graph/utils.ts @@ -102,8 +102,12 @@ export const getMultiSeriesGraphHoverInfo = ( }; }; -export const graphTimeFormatter = (timeZone?: TimeZone) => (epoch: number, format: string) => - dateTimeFormat(epoch, { format, timeZone }); +export const graphTickFormatter = (epoch: number, axis: any) => { + return dateTimeFormat(epoch, { + format: axis?.options?.timeformat, + timeZone: axis?.options?.timezone, + }); +}; export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => { if (min && max && ticks) { diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index b2ac363a026..79751c8c23a 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -68,7 +68,7 @@ export { GraphContextMenu } from './Graph/GraphContextMenu'; export { BarGauge, BarGaugeDisplayMode } from './BarGauge/BarGauge'; export { GraphTooltipOptions } from './Graph/GraphTooltip/types'; export { VizRepeater, VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater'; -export { graphTimeFormat, graphTimeFormatter } from './Graph/utils'; +export { graphTimeFormat, graphTickFormatter } from './Graph/utils'; export { LegendOptions, diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 184568ac20c..5f747a5f40f 100644 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -24,7 +24,7 @@ import ReactDOM from 'react-dom'; import { GraphLegendProps, Legend } from './Legend/Legend'; import { GraphCtrl } from './module'; -import { ContextMenuGroup, ContextMenuItem, graphTimeFormat, graphTimeFormatter } from '@grafana/ui'; +import { ContextMenuGroup, ContextMenuItem, graphTimeFormat, graphTickFormatter } from '@grafana/ui'; import { getCurrentTheme, provideTheme } from 'app/core/utils/ConfigProvider'; import { DataFrame, @@ -655,7 +655,7 @@ class GraphElement { label: 'Datetime', ticks: ticks, timeformat: graphTimeFormat(ticks, min, max), - timeFormatter: graphTimeFormatter(this.dashboard.getTimezone()), + tickFormatter: graphTickFormatter, }; } diff --git a/public/vendor/flot/jquery.flot.time.js b/public/vendor/flot/jquery.flot.time.js index a9094cabebd..8e510f1948f 100644 --- a/public/vendor/flot/jquery.flot.time.js +++ b/public/vendor/flot/jquery.flot.time.js @@ -15,8 +15,7 @@ API.txt for details. timezone: null, // "browser" for local to the client or timezone for timezone-js timeformat: null, // format string to use twelveHourClock: false, // 12 or 24 time in time mode - monthNames: null, // list of names of months - timeFormatter: null // external formatter with timezone support + monthNames: null // list of names of months } }; @@ -30,6 +29,7 @@ API.txt for details. // A subset of the Open Group's strftime format is supported. function formatDate(d, fmt, monthNames, dayNames) { + if (typeof d.strftime == "function") { return d.strftime(fmt); } @@ -356,15 +356,12 @@ API.txt for details. }; axis.tickFormatter = function (v, axis) { + var d = dateGenerator(v, axis.options); - // first check global formatter - if (typeof opts.timeFormatter === "function") { - return opts.timeFormatter(d.getTime(), opts.timeformat); - } + // first check global format - // second check global format - if (opts.timeformat != null) { + if (opts.timeformat != null) { return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames); } @@ -410,6 +407,7 @@ API.txt for details. } var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames); + return rt; }; }