IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-16 03:32: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 { 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<GraphProps, GraphState> {
shadowSize: 0,
},
xaxis: {
timezone: timeZone,
show: true,
mode: 'time',
min: min,
@ -321,7 +322,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
label: 'Datetime',
ticks: ticks,
timeformat: graphTimeFormat(ticks, min, max),
timeFormatter: graphTimeFormatter(timeZone),
tickFormatter: graphTickFormatter,
},
yaxes,
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) =>
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) {

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 { 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,

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 { 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,
};
}

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
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;
};
}