From 61d6dcf9ce9ce5f15ea16b04db4ee54526ba4f33 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Fri, 27 Nov 2020 17:06:57 -0600 Subject: [PATCH] GraphNG: use uPlot's native ms support (#29445) --- packages/grafana-ui/package.json | 2 +- .../src/components/uPlot/config/UPlotAxisBuilder.ts | 8 +++++--- packages/grafana-ui/src/components/uPlot/hooks.ts | 3 ++- yarn.lock | 8 ++++---- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index fc805f88650..6d42eb76ff2 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -71,7 +71,7 @@ "react-transition-group": "4.4.1", "slate": "0.47.8", "tinycolor2": "1.4.1", - "uplot": "1.4.4" + "uplot": "1.4.6" }, "devDependencies": { "@rollup/plugin-commonjs": "11.0.2", diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 8386284503f..a5cfdd52125 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts @@ -32,6 +32,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { timeZone, theme, } = this.props; + const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90; let config: Axis = { @@ -82,7 +83,7 @@ function calculateSpace(self: uPlot, axisIdx: number, scaleMin: number, scaleMax // For x-axis (bottom) we need bigger spacing between labels if (axis.side === 2) { - return 60; + return 50; } return 30; @@ -114,11 +115,12 @@ function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) { function formatTime(self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number): string[] { const timeZone = (self.axes[axisIdx] as any).timeZone; const scale = self.scales.x; - const range = (scale?.max ?? 0) - (scale?.min ?? 0) / 1000; + const range = ((scale?.max ?? 0) - (scale?.min ?? 0)) / 1e3; const oneDay = 86400; const oneYear = 31536000; - foundIncr = foundIncr / 1000; + foundIncr /= 1e3; + let format = systemDateFormats.interval.minute; if (foundIncr < 1) { diff --git a/packages/grafana-ui/src/components/uPlot/hooks.ts b/packages/grafana-ui/src/components/uPlot/hooks.ts index a4df275efbd..5a46c8f7e70 100644 --- a/packages/grafana-ui/src/components/uPlot/hooks.ts +++ b/packages/grafana-ui/src/components/uPlot/hooks.ts @@ -116,7 +116,7 @@ export const usePlotConfig = (width: number, height: number, timeZone: TimeZone, const tz = getTimeZoneInfo(timeZone, Date.now())?.ianaName; if (tz) { - fmt = (ts: number) => uPlot.tzDate(new Date(ts * 1e3), tz); + fmt = (ts: number) => uPlot.tzDate(new Date(ts), tz); } return fmt; @@ -130,6 +130,7 @@ export const usePlotConfig = (width: number, height: number, timeZone: TimeZone, ...DEFAULT_PLOT_CONFIG, width, height, + ms: 1, plugins: Object.entries(plugins).map(p => ({ hooks: p[1].hooks, })), diff --git a/yarn.lock b/yarn.lock index 97c2e330812..96873718f25 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27296,10 +27296,10 @@ update-notifier@^2.5.0: semver-diff "^2.0.0" xdg-basedir "^3.0.0" -uplot@1.4.4: - version "1.4.4" - resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.4.4.tgz#ab30da26b1e2d432df5bc43389e70399787f0448" - integrity sha512-vgV84+by3fGTU4bdpffSvA9FX8ide6MsmlBzOASPDdZCquXmCA+T2qodeNdnBen+7YOeqD9H91epVnF0dQgVKw== +uplot@1.4.6: + version "1.4.6" + resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.4.6.tgz#52b6812c06b8d3cb89d4a8d053f45415cb5d9a13" + integrity sha512-nw3LdjLFhAqKQF/Rv7QjZICVnjJemOQVj2L3b7889gHBrnC1LwltkzTcawDcbMe6pxo++0KVev9xSC0YCw+m5w== upper-case-first@^1.1.0, upper-case-first@^1.1.2: version "1.1.2"