跳转到主要内容

从 Angular 到 React：从 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();

其他资源🔗