add data convertor

graylog2-web-interface/src/hooks/useFieldUnitTypes.ts

@@ -52,8 +52,8 @@ export type Unit = {
 }
 type FieldUnitTypesJson = Record<MetricUnitType, Array<UnitJson>>
 type FieldUnitTypes = Record<MetricUnitType, Array<Unit>>
-type ConversionParams = SeriesUnitState;
-type ConvertedResult = { value: number | null, unit: Unit };
+export type ConversionParams = SeriesUnitState;
+export type ConvertedResult = { value: number | null, unit: Unit };
 
 const unitFromJson = (unitJson: UnitJson): Unit => set<Unit>(omit(unitJson, 'unit_type'), 'unitType', unitJson.unit_type);
 
@@ -95,6 +95,12 @@ const _convertValueToUnit = (units: FieldUnitTypes, value: number, fromParams: C
   const unit = units[toParams.unitType].find(({ abbrev }) => toParams.abbrev === abbrev);
   const res: ConvertedResult = ({ value: null, unit });
 
+  if (baseValue.unit.abbrev === toParams.abbrev) {
+    res.value = baseValue.value;
+
+    return res;
+  }
+
   if (unit?.conversion?.action === 'MULTIPLY') {
     res.value = baseValue.value / unit.conversion.value;
   }
@@ -123,11 +129,13 @@ const _getPrettifiedValue = (units: FieldUnitTypes, value: number, params: Conve
   return maxBy(filtratedValuesLower, ({ value: val }) => val);
 };
 
+export type ConvertValueToUnit = (value: number, fromParams: ConversionParams, toParams: ConversionParams) => ConvertedResult
+
 const useFieldUnitTypes = () => {
   const units = useMemo<FieldUnitTypes>(() => mapValues(sourceUnits, (unitsJson: Array<UnitJson>):Array<Unit> => unitsJson.map((unitJson) => unitFromJson(unitJson))), []);
   const getBaseUnit = useCallback((fieldType: MetricUnitType) => _getBaseUnit(units, fieldType), [units]);
   const convertValueToBaseUnit = useCallback((value: number, params: ConversionParams) => _convertValueToBaseUnit(units, value, params), [units]);
-  const convertValueToUnit = useCallback((value: number, fromParams: ConversionParams, toParams: ConversionParams) => _convertValueToUnit(units, value, fromParams, toParams), [units]);
+  const convertValueToUnit: ConvertValueToUnit = useCallback((value, fromParams, toParams) => _convertValueToUnit(units, value, fromParams, toParams), [units]);
   const getPrettifiedValue = useCallback((value: number, params: ConversionParams) => _getPrettifiedValue(units, value, params), [units]);
 
   return { units, getBaseUnit, convertValueToBaseUnit, convertValueToUnit, getPrettifiedValue };

graylog2-web-interface/src/views/components/visualizations/area/AreaVisualization.tsx

@@ -26,7 +26,7 @@ import useChartData from 'views/components/visualizations/useChartData';
 import useEvents from 'views/components/visualizations/useEvents';
 import { keySeparator, humanSeparator } from 'views/Constants';
 import useMapKeys from 'views/components/visualizations/useMapKeys';
-import { generateDomain, generateYAxis } from 'views/components/visualizations/layoytGenerators';
+import { generateDomain, generateYAxis } from 'views/components/visualizations/utils/chartLayoytGenerators';
 
 import type { Generator } from '../ChartData';
 import XYPlot from '../XYPlot';

graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx

@@ -34,7 +34,10 @@ import {
   generateDomain,
   generateYAxis,
   getBarChartTraceOffsetSettings,
-} from 'views/components/visualizations/layoytGenerators';
+} from 'views/components/visualizations/utils/chartLayoytGenerators';
+import getSeriesUnit from 'views/components/visualizations/utils/getSeriesUnit';
+import useFieldUnitTypes from 'hooks/useFieldUnitTypes';
+import dataConvertor from 'views/components/visualizations/utils/dataConvertor';
 
 import type { Generator } from '../ChartData';
 import XYPlot from '../XYPlot';
@@ -83,6 +86,7 @@ const BarVisualization = makeVisualization(({
   effectiveTimerange,
   height,
 }: VisualizationComponentProps) => {
+  const { convertValueToUnit } = useFieldUnitTypes();
   const visualizationConfig = (config.visualizationConfig ?? BarVisualizationConfig.empty()) as BarVisualizationConfig;
   const { layouts, yAxisMapper, mapperAxisNumber } = useMemo(() => generateYAxis(config.series), [config.series]);
   const barmode = useMemo(() => (visualizationConfig && visualizationConfig.barmode ? visualizationConfig.barmode : undefined), [visualizationConfig]);
@@ -108,12 +112,14 @@ const BarVisualization = makeVisualization(({
     const totalAxis = Object.keys(layouts).length;
 
     const offsetSettings = getBarChartTraceOffsetSettings(barmode, { yaxis, totalAxis, axisNumber, traceIndex: idx, totalTraces: total });
+    console.log({ values, type, name, labels, originalName });
+    const curUnit = getSeriesUnit(config.series, name || originalName);
 
     const getData = () => ({
       type,
       name,
       x: _mapKeys(labels),
-      y: values,
+      y: dataConvertor(values, convertValueToUnit, curUnit),
       opacity,
       yaxis,
       originalName,
@@ -122,7 +128,7 @@ const BarVisualization = makeVisualization(({
 
     return getData();
   },
-  [_mapKeys, barmode, layouts, mapperAxisNumber, visualizationConfig?.opacity, yAxisMapper]);
+  [convertValueToUnit, _mapKeys, barmode, layouts, mapperAxisNumber, visualizationConfig?.opacity, yAxisMapper]);
 
   const rows = useMemo(() => retrieveChartData(data), [data]);
   const _chartDataResult = useChartData(rows, { widgetConfig: config, chartType: 'bar', generator: _seriesGenerator });

graylog2-web-interface/src/views/components/visualizations/line/LineVisualization.tsx

@@ -27,7 +27,7 @@ import useEvents from 'views/components/visualizations/useEvents';
 import { DEFAULT_AXIS_TYPE } from 'views/logic/aggregationbuilder/visualizations/XYVisualization';
 import useMapKeys from 'views/components/visualizations/useMapKeys';
 import { keySeparator, humanSeparator } from 'views/Constants';
-import { generateDomain, generateYAxis } from 'views/components/visualizations/layoytGenerators';
+import { generateDomain, generateYAxis } from 'views/components/visualizations/utils/chartLayoytGenerators';
 
 import type { Generator } from '../ChartData';
 import XYPlot from '../XYPlot';

graylog2-web-interface/src/views/components/visualizations/scatter/ScatterVisualization.tsx

@@ -27,7 +27,7 @@ import ScatterVisualizationConfig from 'views/logic/aggregationbuilder/visualiza
 import type { Generator } from 'views/components/visualizations/ChartData';
 import useMapKeys from 'views/components/visualizations/useMapKeys';
 import { keySeparator, humanSeparator } from 'views/Constants';
-import { generateDomain, generateYAxis } from 'views/components/visualizations/layoytGenerators';
+import { generateDomain, generateYAxis } from 'views/components/visualizations/utils/chartLayoytGenerators';
 
 import XYPlot from '../XYPlot';
 

graylog2-web-interface/src/views/components/visualizations/layoytGenerators.ts → graylog2-web-interface/src/views/components/visualizations/utils/chartLayoytGenerators.ts

@@ -70,12 +70,18 @@ export const getFormatSettings = (unitTypeKey: MetricUnitType | DefaulAxisKey) =
     case 'time':
       return ({
         type: 'date',
-        // tickformat: '%S',
+        // tickformat: '.3f',
+        // tick0: 0,
+        // dtick: 8640000, // milliseconds
+
         tickformatstops: [
-          { dtickrange: [0, 1000], value: '%Lms', name: 'milliseconds' }, //
-          { dtickrange: [1000, 60000], value: '%Ss', name: 'seconds' }, //
-          { dtickrange: [60000, 3600000], value: '%Mm', name: 'minutes' }, //
-          { dtickrange: [3600000, Infinity], value: '%Hh', name: 'hours' },
+          { dtickrange: [0, 1000], value: '%L ms', name: 'milliseconds' }, //
+          { dtickrange: [1000, 60000], value: '%S s', name: 'seconds' }, //
+          { dtickrange: [60000, 3600000], value: '%-M min', name: 'minutes' }, //
+          { dtickrange: [3600000, 86400000], value: '%-H hr', name: 'hours' },
+          { dtickrange: [86400000, 2629746000], value: '%-d d', name: 'days' },
+          { dtickrange: [2629746000, 31556952000], value: '%-m mon', name: 'months' },
+          { dtickrange: [31556952000, Infinity], value: '%-y y', name: 'years' },
         ],
       });
     default:
@@ -85,14 +91,6 @@ export const getFormatSettings = (unitTypeKey: MetricUnitType | DefaulAxisKey) =
   }
 };
 
-const getTitleSettings = (unitType: string): { title: { text: string }} | {} => {
-  if (!unitType || unitType === DEFAULT_AXIS_KEY) return {};
-
-  return ({
-    title: { text: unitType, automargin: true, yref: 'container' },
-  });
-};
-
 export const getUnitLayout = (unitTypeKey: MetricUnitType | DefaulAxisKey, axisCount: number) => ({
   ...getFormatSettings(unitTypeKey),
   ...getYAxisPositioningSettings(axisCount),
@@ -107,7 +105,6 @@ export const generateYAxis = (series: Array<Series>): { mapperAxisNumber: Record
   const unitLayout: {} | Record<MetricUnitType, { layout: Record<string, unknown>, axisKeyName: string}> = {};
   const mapper = {};
   const mapperAxisNumber = {};
-  const mapperAxisSeries = {};
 
   series.forEach((s: Series) => {
     const seriesName = s.config.name || s.function;
@@ -121,20 +118,18 @@ export const generateYAxis = (series: Array<Series>): { mapperAxisNumber: Record
 
       mapper[seriesName] = `y${axisNameNumberPart}`;
       mapperAxisNumber[seriesName] = axisCount;
-      mapperAxisSeries[axisKeyName] = [seriesName];
       axisCount += 1;
     } else {
       const currentAxisCount = unitLayout[unitTypeKey].axisCount;
       const axisNameNumberPart = currentAxisCount > 1 ? currentAxisCount : '';
       mapper[seriesName] = `y${axisNameNumberPart}`;
       mapperAxisNumber[seriesName] = currentAxisCount;
-      mapperAxisSeries[`yaxis${axisNameNumberPart}`].push(seriesName);
     }
   });
 
   return ({
-    layouts: transform(unitLayout, (res, { layout, axisKeyName }, key) => {
-      res[axisKeyName] = { ...layout, ...getTitleSettings(key) };
+    layouts: transform(unitLayout, (res, { layout, axisKeyName }) => {
+      res[axisKeyName] = layout;
     }),
     yAxisMapper: mapper,
     mapperAxisNumber,

graylog2-web-interface/src/views/components/visualizations/utils/dataConvertor.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import type { ConvertValueToUnit, ConversionParams } from 'hooks/useFieldUnitTypes';
+import type SeriesUnit from 'views/logic/aggregationbuilder/SeriesUnit';
+import type { MetricUnitType } from 'views/types';
+
+const chartLayoutBaseUnitTypes: Record<MetricUnitType, string> = {
+  size: 'b',
+  percent: '%',
+  time: 'ms',
+};
+
+const dataConvertor = (values: Array<number>, convertValueToUnit: ConvertValueToUnit, unit: SeriesUnit) => {
+  if (!unit.isDefined) return values;
+  const from: ConversionParams = { abbrev: unit.abbrev, unitType: unit.unitType };
+  const to: ConversionParams = { abbrev: chartLayoutBaseUnitTypes[unit.unitType], unitType: unit.unitType };
+
+  const res = values.map((v) => {
+    const converted = convertValueToUnit(v, from, to);
+    console.log({ converted, v, from, to });
+
+    if (unit.unitType === 'time') return new Date(converted.value);
+
+    return converted.value;
+  });
+
+  console.log({ from, to, res });
+
+  return res;
+};
+
+export default dataConvertor;

graylog2-web-interface/src/views/components/visualizations/utils/getSeriesUnit.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import type Series from 'views/logic/aggregationbuilder/Series';
+
+const getSeriesUnit = (series: Array<Series>, seriesName: string) => series.find((s) => s.config.name === seriesName || s.function === seriesName).unit;
+
+export default getSeriesUnit;