fix #672

frontend/packages/core/components/ScalarsPage/ScalarChart.tsx

@@ -1,6 +1,7 @@
+import LineChart, {LineChartRef} from '~/components/LineChart';
 import {
-    Dataset,
     Range,
+    ScalarDataset,
     SortingMethod,
     XAxis,
     chartData,
@@ -13,7 +14,6 @@ import {
     transform,
     xAxisMap
 } from '~/resource/scalars';
-import LineChart, {LineChartRef} from '~/components/LineChart';
 import React, {FunctionComponent, useCallback, useMemo, useRef, useState} from 'react';
 import {rem, size} from '~/utils/style';
 
@@ -22,6 +22,7 @@ import {EChartOption} from 'echarts';
 import {Run} from '~/types';
 import {cycleFetcher} from '~/utils/fetch';
 import ee from '~/utils/event';
+import {format} from 'd3-format';
 import queryString from 'query-string';
 import styled from 'styled-components';
 import useHeavyWork from '~/hooks/useHeavyWork';
@@ -110,7 +111,7 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
 
     const echart = useRef<LineChartRef>(null);
 
-    const {data: datasets, error, loading} = useRunningRequest<(Dataset | null)[]>(
+    const {data: datasets, error, loading} = useRunningRequest<(ScalarDataset | null)[]>(
         runs.map(run => `/scalars/list?${queryString.stringify({run: run.label, tag})}`),
         !!running,
         (...urls) => cycleFetcher(urls)
@@ -171,15 +172,20 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
         [smoothedDatasets, runs, xAxis]
     );
 
+    const maxStepLength = useMemo(
+        () => String(Math.max(...smoothedDatasets.map(i => Math.max(...i.map(j => j[1]))))).length,
+        [smoothedDatasets]
+    );
+
     const formatter = useCallback(
         (params: EChartOption.Tooltip.Format | EChartOption.Tooltip.Format[]) => {
             const data = Array.isArray(params) ? params[0].data : params.data;
             const step = data[1];
             const points = nearestPoint(smoothedDatasets ?? [], runs, step);
             const sort = sortingMethodMap[sortingMethod];
-            return tooltip(sort ? sort(points, data) : points, i18n);
+            return tooltip(sort ? sort(points, data) : points, maxStepLength, i18n);
         },
-        [smoothedDatasets, runs, sortingMethod, i18n]
+        [smoothedDatasets, runs, sortingMethod, maxStepLength, i18n]
     );
 
     const options = useMemo(
@@ -191,7 +197,13 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
             },
             xAxis: {
                 type: xAxisType,
-                ...ranges.x
+                ...ranges.x,
+                axisPointer: {
+                    label: {
+                        formatter:
+                            xAxisType === XAxisType.time ? undefined : ({value}: {value: number}) => format('.8')(value)
+                    }
+                }
             },
             yAxis: {
                 type: yAxisType,

frontend/packages/core/resource/scalars/chart.ts

@@ -65,18 +65,18 @@ export const chartData = ({data, runs, xAxis}: {data: Dataset[]; runs: Run[]; xA
         .flat();
 
 // TODO: make it better, don't concat html
-export const tooltip = (data: TooltipData[], i18n: I18n) => {
+export const tooltip = (data: TooltipData[], stepLength: number, i18n: I18n) => {
     const indexPropMap = {
         time: 0,
         step: 1,
         value: 2,
         smoothed: 3,
         relative: 4
     } as const;
-    const widthPropMap = {
-        run: [60, 180] as [number, number],
+    const widthPropMap: Record<string, number | readonly [number, number]> = {
+        run: [60, 180],
         time: 150,
-        step: 40,
+        step: Math.max(stepLength * 8, 40),
         value: 60,
         smoothed: 70,
         relative: 60
@@ -103,7 +103,7 @@ export const tooltip = (data: TooltipData[], i18n: I18n) => {
         } as const;
     });
 
-    const renderContent = (content: string, width: number | [number, number]) =>
+    const renderContent = (content: string, width: number | readonly [number, number]) =>
         `<div style="overflow: hidden; ${
             Array.isArray(width)
                 ? `min-width:${(width as [number, number])[0]};max-width:${(width as [number, number])[1]};`

frontend/packages/core/resource/scalars/data.ts

@@ -1,16 +1,16 @@
+import {Dataset, ScalarDataset} from './types';
+
 import BigNumber from 'bignumber.js';
-import {Dataset} from './types';
 import {Run} from '~/types';
-import cloneDeep from 'lodash/cloneDeep';
 import compact from 'lodash/compact';
 import maxBy from 'lodash/maxBy';
 import minBy from 'lodash/minBy';
 import {quantile} from '~/utils';
 
-export const transform = ({datasets, smoothing}: {datasets: Dataset[]; smoothing: number}) =>
+export const transform = ({datasets, smoothing}: {datasets: ScalarDataset[]; smoothing: number}) =>
     // https://en.wikipedia.org/wiki/Moving_average
     datasets.map(seriesData => {
-        const data = cloneDeep(seriesData);
+        const data = seriesData.map<Dataset[number]>(s => [...s, Number.NaN, Number.NaN]);
         let last = new BigNumber(data.length > 0 ? 0 : Number.NaN);
         let numAccum = 0;
         let startValue = 0;

frontend/packages/core/resource/scalars/types.ts

@@ -2,7 +2,14 @@ import {sortingMethodMap, xAxisMap} from './index';
 
 import {Run} from '~/types';
 
-export type Dataset = number[][];
+type Value = number;
+type WallTime = number;
+type Step = number;
+type Smoothed = number;
+type Relative = number;
+
+export type Dataset = [WallTime, Step, Value, Smoothed, Relative][];
+export type ScalarDataset = [WallTime, Step, Value][];
 
 export type XAxis = keyof typeof xAxisMap;
 export type SortingMethod = keyof typeof sortingMethodMap;

frontend/packages/core/utils/chart.ts

@@ -59,8 +59,7 @@ export const tooltip = {
     axisPointer: {
         type: 'cross',
         label: {
-            show: true,
-            formatter: ({value}: {value: number}) => format('.4')(value)
+            show: true
         },
         lineStyle: {
             color: '#2932E1',