Реализация прогресс-бара

[jumpattacker]

Добрый день.

Хочу отрисовать прогресс-бар вот примерно в таком стиле

2025-01-17-10-55-nlwIkQzMQY.png (7.17 КБ) 65 просмотров

Это возможно?

Я пытался использовать gauge, но там стили уж больно "страшные"

Сейчас я пытаюсь его собрать из прямоугольников, но оказалось нельзя через формулы задавать ширину.

Можете что-то еще подсказать?

И есть ли возможность поменять эти 3 цвета на фоне?

2025-01-17-11-12-sQjuPRdtlp.png (14.09 КБ) 56 просмотров

я так же нашел у вас в демо то, что мне нужно. но у себя я такое не вижу, как это и мне добавить?

2025-01-17-11-16-blSjfPL3a8.png (372.05 КБ) 54 просмотра

Еще интересует вопрос почему у вас есть в редакторе иконки, а у меня их нет

2025-01-17-11-17-tb0i5irqqE.png (286 КБ) 54 просмотра

У меня если что простая интреграция через react

Код: Выделить всё

'use client'
import React, {useEffect} from "react";
// Импортируем из dashboards (если именно дашборды)
import stimPkg from "stimulsoft-dashboards-js/Scripts/stimulsoft.designer";

const {Stimulsoft} = stimPkg;
// Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile("Localizations/ru.xml");

// Функция для преобразования массива в объект с ключами из Code
const transformResultsToObj = (data: any) => {
	if (data?.Content?.Results) {
		const resultsArray = data.Content.Results;
		// Преобразуем массив в объект
		const resultsObj = resultsArray.reduce((acc: Record<string, any>, item: any) => {
			acc[item.Code] = item.Value;
			return acc;
		}, {});
		// Заменяем массив Results на преобразованный объект
		data.Content.Results = resultsObj;
	}
	return data;
};


export default async function DesignerDashboard() {
	const getJsonModel = async (url: string) => {
		const response = await fetch(url);
		if (!response.ok) {
			console.error("Failed to load model from /bff/api/reports/getModel");
			return;
		}
		return await response.json();
	}
	useEffect(() => {
		Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile("localizations/ru.xml");
		const init = async () => {
			const urlParams = new URLSearchParams(window.location.search);
			const templateName = urlParams.get("template");

			const designerOptions = new Stimulsoft.Designer.StiDesignerOptions();
			designerOptions.appearance.fullScreenMode = false;
			designerOptions.height = "100%";

			const designer = new Stimulsoft.Designer.StiDesigner(
				designerOptions,
				"StiDesigner",
				false
			);

			const report = new Stimulsoft.Report.StiReport();

			const recommendationModelDetails = await getJsonModel("/bff/api/reports/getModel");
			let instanceDetails = await getJsonModel("/bff/api/reports/getInstance");

			// Преобразуем Results в объект
			instanceDetails = transformResultsToObj(instanceDetails);

			if (templateName) {
				report.loadFile(`/bff/api/reports/template?name=${templateName}`);
			}

			report.regData(
				"RecommendationModelDetails",
				"recModel",
				recommendationModelDetails
			);

			report.regData(
				"InstanceDetails",
				"instance",
				instanceDetails
			);

			report.dictionary.synchronizeBusinessObjects();
			report.dictionary.synchronize();

			designer.report = report;

			designer.renderHtml("designerContainer");

			console.log("businessObjects", report.dictionary.businessObjects);
		};

		// Запускаем асинхронную инициализацию
		init();
	}, []);

	return (
		<main className="w-full h-screen">
			<h1 className="p-4 text-xl font-bold">Редактор отчёта (Dashboards)</h1>
			<div id="designerContainer" style={{width: "100%", height: "90%"}}/>
		</main>
	);
}

[Aleksey]

Здравствуйте,

> Это возможно?

Нет, только стандартные компоненты.

Посмотрите примеры по следующей ссылке
https://github.com/stimulsoft/Samples-D ... -for-React

Спасибо.