В системе присутствует возможность добавления новых настроек визуализации компонентов виджетов. 

Исходные коды базовых компонентов виджетов находятся в открытом доступе по адресу:

https://polygit.polymatica.ru/components-library/polymatica-dashboards-tn

Для кастомизации настроек визуализации в исходном коде компонента предназначен файл view-settings.ts.

Предусловия

Для работы с кастомизацией настроек визуализации в системе должны быть установлены:

  • Node.js
  • пакетный менеджер npm

Начало работы

Чтобы добавить новые настройки визуализации для компонента, необходимо выполнить следующие действия:

  1. Загрузить исходный код компонента из GitLab при помощи кнопки "Code".

    -

    Загрузка кода компонента "Таблица" в виде .zip

    -

  2. Импортировать код в качестве проекта в любую IDE cо встроенным терминалом (в нашем примере VS Code). 

    -

    Проект в IDE

    -

  3. Перейти в терминале IDE в папку с проектом и установить пакеты зависимостей компонента, выполнив в команду:

    npm install

    Загрузка зависимостей
  4. Выполнить в терминале IDE команду:
    npm start

    Это откроет по адресу http://localhost:3000/devtools/ инструмент разработчика, который позволяет в реальном времени видеть изменения настроек.

    -

    Загрузка зависимостей

Кастомизируемые настройки

При кастомизации виджета можно добавить параметры следующих типов:

  • title
  • checkbox
  • radio
  • select
  • colorPicker
  • input

title

Заголовок блока настроек, используется для разделения параметров на блоки.

Код:

Параметр title 
export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
        title('Title 1'),           
		// ...параметры          
		title('Title 2'),
        // ...параметры
        title('Title 3'),
        // ...параметры
    ];
};

Результат:

Добавленный title

сheckbox

Чек-бокс с подписью. 

Параметр checkbox 
export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
		    // ...параметры
        checkbox({
            key: EViewOption.Toolbox,
            label: {
                ru: 'Отображать блок увеличения',
                en: 'Display magnification block',
            },
            defaultValue: true,
        }),
        // ...параметры
    ];
};


Результат:

Добавленный checkbox

radio

Радиокнопки для выбора единственного значения настройки. 

Параметр radio 
const dataLabelsPosition = [
    ['top', 'Сверху', 'Top'],
    ['bottom', 'Снизу', 'Bottom'],
    ['inside', 'По центру', 'Center'],
    ['left', 'Слева', 'Left'],
    ['right', 'Справа', 'Right'],
];

export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
		    // ...параметры
        radio({
            key: EViewOption.ChartType,
            label: {
                ru: 'Положение значений',
                en: 'Position of the data labels'
            },
            options: dataLabelsPosition.map((item) => {
                const [value, ru, en] = item;
                return {
                    label: {
                        ru,
                        en,
                    },
                    value,
                };
            }),
        }),
        // ...параметры
    ];
};

Результат:

Добавленные radio

select

Выпадающий список для выбора значений.

Параметр select 
const dataLabelsPosition = [
    ['top', 'Сверху', 'Top'],
    ['bottom', 'Снизу', 'Bottom'],
    ['inside', 'По центру', 'Center'],
    ['left', 'Слева', 'Left'],
    ['right', 'Справа', 'Right'],
];

export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
        // ...параметры
        select({
            key: EViewOption.DataLabelsPosition,
            label: {
                ru: 'Положение значений',
                en: 'Position of the data labels',
            },
            defaultValue: dataLabelsPosition[0][0],
            options: dataLabelsPosition.map((item) => {
                const [value, ru, en] = item;
                return {
                    label: {
                        ru,
                        en,
                    },
                    value,
                };
            }),
        }),
        // ...параметры
    ];
};

Результат:

Добавленный select

colorPicker

RGB-палитра для выбора цвета.

Параметр colorPicker 
export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
	      // ...параметры
        colorPicker({
            key: EViewOption.ColorConstantHigher,
            label: {
                ru: 'Цвет',
                en: 'Color',
            },
            defaultValue: 'green',
        }),
        // ...параметры
    ];
};

Результат:

Добавленный colorPicker

input

Простое поле ручного ввода значения.

Параметр input 
export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
	      // ...параметры
        input({
            key: EViewOption.XAxisTicksLength,
            label: {
                ru: 'Длина подписей',
                en: 'Axis labels length',
            },
            defaultValue: `${axisTicksLengthDefault}`,
        }),
        // ...параметры
    ];
};

Результат:

Добавленный input

Валидация

Также имеется возможность настроить валидацию поля. Для этого в значении validation необходимо указать валидируемые поля:

Код валидации поля ввода 
export const createViewSettings: CreateViewSettings<DataSettings> = ({
    dataSettings,
    viewSettings,
}: {
    dataSettings: DataSettings;
    viewSettings: ViewSettings;
}) => {
    return [
	      // ...параметры
        input({
            key: EViewOption.XAxisTicksLength,
            label: {
                ru: 'Длина подписей',
                en: 'Axis labels length',
            },
            defaultValue: `${axisTicksLengthDefault}`,
        }),
        // ...параметры
    ];
};

export const validation: ViewSettingsValidation = {
    [EViewOption.XAxisTicksLength]: (value) => {
        if (value === '' || value === null) return null;

        const parsedValue = parseInt(value);
        if (
            !/^\d+$/.test(value) ||
            parsedValue < axisTicksLengthyMin ||
            parsedValue > axisTicksLengthyMax
        ) {
            return {
                ru: `укажите целое число от ${axisTicksLengthyMin} до ${axisTicksLengthyMax}`,
                en: `enter an integer from ${axisTicksLengthyMin} to ${axisTicksLengthyMax}`,
            };
        }
        return null;
    },
};

Результат:

Валидация

Сборка кастомизированного виджета

В структуре исходного кода находится файл конфигурации сборки package.json.

Для сборки виджета необходимо:

  1. Запустить в терминале IDE в папке с файлом package.json команду:

    npm build
  2. После выполнения команды сформируется папка с файлами, которые надо поместить в архив .zip (только файлы, без папки).

Полученный .zip уже можно загружать в систему, как пользовательский компонент - см. Руководство пользователя Dashboards TN, раздел "Добавление пользовательского компонента".

  • Нет меток