@grafana/data#getValueFormat TypeScript Examples

constructor(opts: any) {
    this.datapoints = opts.datapoints;
    this.label = opts.alias;
    this.id = opts.alias;
    this.alias = opts.alias;
    this.aliasEscaped = _.escape(opts.alias);
    this.color = opts.color;
    this.bars = { fillColor: opts.color };
    this.valueFormater = getValueFormat('none');
    this.stats = {};
    this.legend = true;
    this.unit = opts.unit;
    this.dataFrameIndex = opts.dataFrameIndex;
    this.fieldIndex = opts.fieldIndex;
    this.hasMsResolution = this.isMsResolutionNeeded();
  }

/**
 * Calculate decimals for legend and update values for each series.
 * @param data series data
 * @param panel
 * @param height
 */
export function updateLegendValues(data: TimeSeries[], panel: any, height: number) {
  for (let i = 0; i < data.length; i++) {
    const series = data[i];
    const yaxes = panel.yaxes;
    const seriesYAxis = series.yaxis || 1;
    const axis = yaxes[seriesYAxis - 1];
    const formatter = getValueFormat(axis.format);

    // decimal override
    if (_.isNumber(panel.decimals)) {
      series.updateLegendValues(formatter, panel.decimals, null);
    } else if (_.isNumber(axis.decimals)) {
      series.updateLegendValues(formatter, axis.decimals + 1, null);
    } else {
      // auto decimals
      // legend and tooltip gets one more decimal precision
      // than graph legend ticks
      const { datamin, datamax } = getDataMinMax(data);
      const { tickDecimals, scaledDecimals } = getFlotTickDecimals(datamin, datamax, axis, height);
      const tickDecimalsPlusOne = (tickDecimals || -1) + 1;
      series.updateLegendValues(formatter, tickDecimalsPlusOne, scaledDecimals + 2);
    }
  }
}

configureAxisMode(axis: { tickFormatter: (val: any, axis: any) => string }, format: string) {
    axis.tickFormatter = (val, axis) => {
      const formatter = getValueFormat(format);

      if (!formatter) {
        throw new Error(`Unit '${format}' is not supported`);
      }
      return formattedValueToString(formatter(val, axis.tickDecimals, axis.scaledDecimals));
    };
  }

tickValueFormatter(decimals: number, scaledDecimals: any = null) {
    const format = this.panel.yAxis.format;
    return (value: any) => {
      try {
        if (format !== 'none') {
          const v = getValueFormat(format)(value, decimals, scaledDecimals);
          return formattedValueToString(v);
        }
      } catch (err) {
        console.error(err.message || err);
      }
      return value;
    };
  }

countValueFormatter(decimals: number, scaledDecimals: any = null) {
    const fmt = getValueFormat('short');
    return (value: number) => {
      return formattedValueToString(fmt(value, decimals, scaledDecimals));
    };
  }

tickFormatter(val, axis) {
    const formatter = getValueFormat('short');

    if (!formatter) {
      throw new Error(`Unit '${format}' is not supported`);
    }
    return formattedValueToString(formatter(val, axis.tickDecimals, axis.scaledDecimals));
  }

createColumnFormatter(column: ColumnRender) {
    if (!column.style) {
      return this.defaultCellFormatter;
    }

    if (column.style.type === 'hidden') {
      return (v: any): undefined => undefined;
    }

    if (column.style.type === 'date') {
      return (v: any) => {
        if (v === undefined || v === null) {
          return '-';
        }

        if (_.isArray(v)) {
          v = v[0];
        }

        // if is an epoch (numeric string and len > 12)
        if (_.isString(v) && !isNaN(v as any) && v.length > 12) {
          v = parseInt(v, 10);
        }

        let date = dateTime(v);

        if (this.isUtc) {
          date = date.utc();
        }

        return date.format(column.style.dateFormat);
      };
    }

    if (column.style.type === 'string') {
      return (v: any): any => {
        if (_.isArray(v)) {
          v = v.join(', ');
        }

        const mappingType = column.style.mappingType || 0;

        if (mappingType === 1 && column.style.valueMaps) {
          for (let i = 0; i < column.style.valueMaps.length; i++) {
            const map = column.style.valueMaps[i];

            if (v === null) {
              if (map.value === 'null') {
                return map.text;
              }
              continue;
            }

            // Allow both numeric and string values to be mapped
            if ((!_.isString(v) && Number(map.value) === Number(v)) || map.value === v) {
              this.setColorState(v, column.style);
              return this.defaultCellFormatter(map.text, column.style);
            }
          }
        }

        if (mappingType === 2 && column.style.rangeMaps) {
          for (let i = 0; i < column.style.rangeMaps.length; i++) {
            const map = column.style.rangeMaps[i];

            if (v === null) {
              if (map.from === 'null' && map.to === 'null') {
                return map.text;
              }
              continue;
            }

            if (Number(map.from) <= Number(v) && Number(map.to) >= Number(v)) {
              this.setColorState(v, column.style);
              return this.defaultCellFormatter(map.text, column.style);
            }
          }
        }

        if (v === null || v === void 0) {
          return '-';
        }

        this.setColorState(v, column.style);
        return this.defaultCellFormatter(v, column.style);
      };
    }

    if (column.style.type === 'number') {
      const valueFormatter = getValueFormat(column.unit || column.style.unit);

      return (v: any): any => {
        if (v === null || v === void 0) {
          return '-';
        }

        if (isNaN(v) || _.isArray(v)) {
          return this.defaultCellFormatter(v, column.style);
        }

        this.setColorState(v, column.style);
        return formattedValueToString(valueFormatter(v, column.style.decimals, null));
      };
    }

    return (value: any) => {
      return this.defaultCellFormatter(value, column.style);
    };
  }