Angular 到 React：从 app/core/time_series2 转换

app/core/time_series2 包通常由 AngularJS 插件用来检索要由面板渲染的数据。此包不再可用，所有插件都需要使用数据帧。

本指南提供了一种从旧库转换为新数据帧格式的方法。

使用 AngularJS 方法转换数据

在 AngularJS 中移除 app/core/time_series2 包之前，面板使用类似于此的方法渲染数据

seriesHandler(seriesData: any) {
    const series = new TimeSeries({
      datapoints: seriesData.datapoints,
      alias: seriesData.target,
    });
    series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
    return series;
  }

使用数据帧转换数据

以下代码示例展示了使用数据帧从面板转换数据的一种方法

import {
  GrafanaTheme2,
  FieldDisplay,
  getDisplayProcessor,
  getFieldDisplayValues,
  FieldConfig,
  DisplayValue,
  formattedValueToString,
} from '@grafana/data';

const theme2 = useTheme2();

const getValues = (): FieldDisplay[] => {
  for (const frame of data.series) {
    for (const field of frame.fields) {
      // Set the Min/Max value automatically for percent and percentunit
      if (field.config.unit === 'percent' || field.config.unit === 'percentunit') {
        const min = field.config.min ?? 0;
        const max = field.config.max ?? (field.config.unit === 'percent' ? 100 : 1);
        field.state = field.state ?? {};
        field.state.range = { min, max, delta: max - min };
        field.display = getDisplayProcessor({ field, theme: theme2 });
      }
    }
  }
  return getFieldDisplayValues({
    fieldConfig,
    reduceOptions: {
      calcs: [options.operatorName],
      values: false,
    },
    replaceVariables,
    theme: theme2,
    data: data.series,
    timeZone,
  });
};

const getThresholdForValue = (field: FieldConfig, value: number, theme: GrafanaTheme2) => {
  if (fieldConfig.defaults.thresholds) {
    const result = getActiveThreshold(value, field.thresholds?.steps);
    return result;
  }
  return null;
};

const getFormattedValue = (index: number) => {
  const singleMetric = metrics[index];
  return formattedValueToString(singleMetric.display);
};

const getDisplayValue = (index: number) => {
  const singleMetric = metrics[index];
  if (!isNaN(singleMetric.display.numeric)) {
    return singleMetric.display.numeric;
  }
  return NaN;
};

// get the formatted metrics
const metrics = getValues();

其他资源

• 阅读更多关于 Angular 到 React 转换指南 的内容。
• 了解有关 数据帧 的更多信息。