Вычислители

Вычислители позволяют запрашивать данные с сервера. Вычислитель получает определенные входные данные, которые могут включать в себя разрезы, меры, фильтры, сортировки и другие данные. Затем входные данные обрабатываются внутри вычислителя в соответствии с его логикой, которая может включать в себя агрегацию, фильтрацию, преобразование данных и другие операции. После обработки входных данных вычислитель возвращает результат, который может быть использован для визуализации данных.

Вычислители, представленные в системе, описаны интерфейсом ICalculatorFactory.

Для взаимодействия с вычислителями в свойства виджета передается фабрика вычислителей (свойство calculatorFactory), которая предоставляет удобный интерфейс для создания и получения экземпляров различных типов вычислителей, необходимых для обработки данных и получения результатов. Это позволяет виджету динамически выбирать и использовать подходящий вычислитель в зависимости от его потребностей и типа данных, с которыми он работает.

Так как GeneralCalculator используется чаще всего, то разберем на примере взаимодействие с ним. Результат будем визуализировать, используя библиотеку ReactJS. Подробнее о всех параметрах, которые принимает метод calculate вычислителя, можно узнать из интерфейса IGeneralCalculatorInput, а информацию о данных, которые возвращает вычислитель — из интерфейса IGeneralCalculatorOutput.

import {
  mapMeasuresToInputs,
  type ICustomWidgetProps,
  mapDimensionsToInputs,
  replaceHierarchiesWithDimensions,
  type IGeneralCalculatorOutput,
} from "@infomaximum/widget-sdk";
import type { WidgetSettings } from "definition/definition";
import { useState, type FC, useMemo, useEffect } from "react";

export const App: FC<ICustomWidgetProps<WidgetSettings>> = ({
  calculatorFactory,
  settings,
  globalContext,
  filtration,
  placeholder,
}) => {
  const { measures, dimensions } = settings;
  const filters = filtration.preparedFilterValues;

  const [calculatorOutput, setCalculatorOutput] =
    useState<IGeneralCalculatorOutput | null>(null);

  const generalCalculator = useMemo(
    () => calculatorFactory.general(),
    [calculatorFactory]
  );

  useEffect(() => {
    if (!measures?.length || !dimensions?.length) {
      placeholder.setConfigured(false);
      placeholder.setDisplay(true);
      placeholder.setError(null);
      return;
    }

    (async () => {
      try {
        const output = await generalCalculator.calculate({
          filters,
          measures: mapMeasuresToInputs(measures, globalContext.variables),
          dimensions: mapDimensionsToInputs(
            replaceHierarchiesWithDimensions(dimensions, filters),
            globalContext.variables
          ),
        });

        setCalculatorOutput(output);

        placeholder.setConfigured(true);
        placeholder.setDisplay(true);
        placeholder.setError(null);
      } catch (error) {
        placeholder.setError(error as Error);
      }
    })();
  }, [
    dimensions,
    filters,
    generalCalculator,
    measures,
    placeholder,
    globalContext.variables,
  ]);

  console.log(calculatorOutput);

  return <div>Hello GeneralCalculator</div>;
};

В данном примере компонент App представляет собой функциональный компонент React, который используется в качестве пользовательского виджета. В данном компоненте происходит взаимодействие с вычислителем для получения данных и их обработки. Данный пример по шагам:

1. Компонент импортирует различные функции и типы из библиотеки @infomaximum/widget-sdk, которые помогают разрабатывать виджет.
2. Используются разрезы (dimensions) и меры (measures) и настройки, заданные пользователем через панель, которую мы сконфигурировали на одном из предыдущих шагов.
3. Используется хук useState для создания состояния calculatorOutput, в котором будет храниться результат работы вычислителя.
4. Хук useEffect используется для выполнения асинхронной операции получения данных с сервера при изменении зависимостей, таких как dimensions, measures, filters, generalCalculator и других.
5. Создается экземпляр вычислителя (GeneralCalculator) с помощью фабрики вычислителей, которая предоставляется в props компонента.
6. Внутри блока useEffect вызывается метод calculate экземпляра GeneralCalculator, который принимает входные данные, такие как фильтры (filters), разрезы (dimensions) и меры (measures). Эти данные подготавливаются с помощью функций mapMeasuresToInputs и mapDimensionsToInputs.
7. После успешного выполнения запроса полученный результат сохраняется в состоянии calculatorOutput с помощью функции setCalculatorOutput.
8. После получения данных также производится вызов placeholder.setDisplay, чтобы сообщить системе о готовности виджета к отображению. Благодаря отложенному вызову placeholder.setDisplay пользователь не увидит виджет раньше времени, когда в нем еще нет данных.
9. Результат работы вычислителя отображается внутри компонента в виде JSON-строки с помощью функции JSON.stringify.

Таким образом, этот компонент взаимодействует с вычислителем для получения данных с сервера и их дальнейшей обработки, что позволяет отображать визуализацию данных в пользовательском интерфейсе.

Также c примером GeneralCalculator для построения линейного графика можно ознакомиться в репозитории на github.