IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: Fixed issue with x-axis labels showing "MM/DD" after viewing dashboard with pie chart .

Browse Source
This commit is contained in:
Marcus Andersson 2020-05-06 16:05:00 +02:00 committed by GitHub
parent 6a4bb556a5
commit 8de6ef473f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Graph/Graph.tsx
View File

@ -10,7 +10,7 @@ import { TooltipProps, TooltipContentProps, ActiveDimensions, Tooltip } from '..
import { GraphTooltip } from './GraphTooltip/GraphTooltip'; import { GraphTooltip } from './GraphTooltip/GraphTooltip';
import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu'; import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu';
import { GraphDimensions } from './GraphTooltip/types'; import { GraphDimensions } from './GraphTooltip/types';
import { graphTimeFormat, graphTimeFormatter } from './utils'; import { graphTimeFormat, graphTickFormatter } from './utils';
export interface GraphProps { export interface GraphProps {
children?: JSX.Element | JSX.Element[]; children?: JSX.Element | JSX.Element[];
@ -314,6 +314,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
shadowSize: 0, shadowSize: 0,
}, },
xaxis: { xaxis: {
timezone: timeZone,
show: true, show: true,
mode: 'time', mode: 'time',
min: min, min: min,
@ -321,7 +322,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
label: 'Datetime', label: 'Datetime',
ticks: ticks, ticks: ticks,
timeformat: graphTimeFormat(ticks, min, max), timeformat: graphTimeFormat(ticks, min, max),
timeFormatter: graphTimeFormatter(timeZone), tickFormatter: graphTickFormatter,
}, },
yaxes, yaxes,
grid: { grid: {

8
packages/grafana-ui/src/components/Graph/utils.ts
View File

@ -102,8 +102,12 @@ export const getMultiSeriesGraphHoverInfo = (
}; };
}; };
export const graphTimeFormatter = (timeZone?: TimeZone) => (epoch: number, format: string) => export const graphTickFormatter = (epoch: number, axis: any) => {
dateTimeFormat(epoch, { format, timeZone }); return dateTimeFormat(epoch, {
format: axis?.options?.timeformat,
timeZone: axis?.options?.timezone,
});
};
export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => { export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => {
if (min && max && ticks) { if (min && max && ticks) {

2
packages/grafana-ui/src/components/index.ts
View File

@ -68,7 +68,7 @@ export { GraphContextMenu } from './Graph/GraphContextMenu';
export { BarGauge, BarGaugeDisplayMode } from './BarGauge/BarGauge'; export { BarGauge, BarGaugeDisplayMode } from './BarGauge/BarGauge';
export { GraphTooltipOptions } from './Graph/GraphTooltip/types'; export { GraphTooltipOptions } from './Graph/GraphTooltip/types';
export { VizRepeater, VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater'; export { VizRepeater, VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater';
export { graphTimeFormat, graphTimeFormatter } from './Graph/utils'; export { graphTimeFormat, graphTickFormatter } from './Graph/utils';
export { export {
LegendOptions, LegendOptions,

4
public/app/plugins/panel/graph/graph.ts
View File

@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
import { GraphLegendProps, Legend } from './Legend/Legend'; import { GraphLegendProps, Legend } from './Legend/Legend';
import { GraphCtrl } from './module'; 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 { getCurrentTheme, provideTheme } from 'app/core/utils/ConfigProvider';
import { import {
DataFrame, DataFrame,
@ -655,7 +655,7 @@ class GraphElement {
label: 'Datetime', label: 'Datetime',
ticks: ticks, ticks: ticks,
timeformat: graphTimeFormat(ticks, min, max), timeformat: graphTimeFormat(ticks, min, max),
timeFormatter: graphTimeFormatter(this.dashboard.getTimezone()), tickFormatter: graphTickFormatter,
}; };
} }

14
public/vendor/flot/jquery.flot.time.js vendored
View File

@ -15,8 +15,7 @@ API.txt for details.
timezone: null, // "browser" for local to the client or timezone for timezone-js timezone: null, // "browser" for local to the client or timezone for timezone-js
timeformat: null, // format string to use timeformat: null, // format string to use
twelveHourClock: false, // 12 or 24 time in time mode twelveHourClock: false, // 12 or 24 time in time mode
monthNames: null, // list of names of months monthNames: null // list of names of months
timeFormatter: null // external formatter with timezone support
} }
}; };
@ -30,6 +29,7 @@ API.txt for details.
// A subset of the Open Group's strftime format is supported. // A subset of the Open Group's strftime format is supported.
function formatDate(d, fmt, monthNames, dayNames) { function formatDate(d, fmt, monthNames, dayNames) {
if (typeof d.strftime == "function") { if (typeof d.strftime == "function") {
return d.strftime(fmt); return d.strftime(fmt);
} }
@ -356,15 +356,12 @@ API.txt for details.
}; };
axis.tickFormatter = function (v, axis) { axis.tickFormatter = function (v, axis) {
var d = dateGenerator(v, axis.options); var d = dateGenerator(v, axis.options);
// first check global formatter // first check global format
if (typeof opts.timeFormatter === "function") {
return opts.timeFormatter(d.getTime(), opts.timeformat);
}
// second check global format if (opts.timeformat != null) {
if (opts.timeformat != null) {
return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames); 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); var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
return rt; return rt;
}; };
} }