Проектирование платформы для построения большого экрана с общими данными от 0 до 1
Проектирование платформы для построения большого экрана с общими данными от 0 до 1

Автор: vivo Internet Big Data Team-Ван Лэй

1. Предисловие

В течение долгого времени многие продуктовые платформы пытались снизить порог разработки приложений с графическим интерфейсом и повысить эффективность производства за счет визуального построения. С развитием нашего бизнеса и улучшением построения данных требования пользователей к визуализации данных также растут с каждым днем. Экран больших данных является одним из методов визуализации данных. Он является своего рода средством отображения больших данных. широко используется на различных выставках, выставочных залах компаний, пресс-конференциях и т. д.

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

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

2. Быстро разберитесь с большим визуальным экраном.

2.1 Что такое визуализация данных

С технического уровня наиболее интуитивно понятным является интерфейсной фреймворк визуализации: Echart, Antv, Chart.js, D3.js, Vega и т. д. Эти библиотеки могут помочь нам быстро преобразовать данные в различные формы визуальных диаграмм.

отбизнес-уровеньДавайте поговорим, Его важнейшее значение – пройтиданные -> комбинация графиков -> Страница визуализацииЭтот бизнес-процесс,Помочь пользователям более интуитивно и всесторонне анализировать тенденции и закономерности различных отраслей и сценариев.

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

2.2 Из каких частей состоит большой визуальный экран?

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

2.3 Разница между большими визуальными экранами и обычными досками отчетов BI

Студенты часто спрашивают,Визуализируйте большой экран иBIдоска отчетовразницачто такое?

Вот краткое введение:

  1. Большие экраны и доски отчетов — это лишь один из методов представления BI. Большие экраны чаще всего проецируются на дисплейное оборудование разных размеров, тогда как доски отчетов чаще используются для отображения на компьютере.
  2. Большой экран уделяет больше внимания динамическим изменениям данных. ,Будет сильный визуальный опыт и воздействие.,Обеспечивает богатую анимацию карусели, прокрутку таблицы и другие специальные эффекты анимации. Доска отчетов уделяет больше внимания интерактивному исследованию и анализу.,Например, свернуть и развернуть、сортировать、фильтр、Переключение диаграммы、Условные предупреждения и т.д.

3. Дизайнерские идеи

3.1 Выбор технологии

  • Фронтенд-фреймворк:React Семейное ведро (личная привычка)
  • Структура визуализации:Echarts\DataV-React (Высокая инкапсуляция, элементы конфигурации структуры json легко расширяются) D3.js(Визуальные элементы имеют небольшую степень детализации.、Широкие возможности настройки)
  • Перетащите плагин:dnd-kit (Поддерживает перетаскивание между компонентами в виде древовидной структуры)
  • Плагин макета:React-Grid-Layout(Свободная сетка макета,Изменить исходный код,Поддерживает перетаскивание в нескольких направлениях,Свободный макет, фиксированный коэффициент масштабирования и т. д.)

3.2 Архитектурное проектирование

На рисунке ниже показана общая архитектура нашей платформы:

Вся платформа для создания больших экранов содержит четыре очень важные подсистемы и модули:

  • Центр визуальных материалов:Это самый базовый модуль всей платформы.,Мы используем библиотеки диаграмм с открытым исходным кодом и самостоятельно разработанные Визуальные компоненты Вышеуказанное определяет уровень стандартных DSL протокол, этот протокол и доступ редактор холста Соглашение соответствует 40+ Количество сопутствующих компонентов продолжает расти.
  • Редактор холста:Это ядро ​​и сложность создания платформы.,Поддерживает такие функции, как конфигурация макета страницы, конфигурация взаимодействия страниц и конфигурация данных компонентов.,Он также поддерживает настройку фрагментов кода.,Ее также можно назвать платформой с низким кодом.
  • данныецентр:предназначены специально для подключения различныхданныеисточник услуг,Например, прямое подключение к MySQL, ClickHouse, Elasticsearch, Presto и т. д.,Предоставляет исходные данные, необходимые для создания большого экрана.
  • Центр управления:Это серверный модуль работы и управления большими экранами.,Содержит управление шаблонами большого экрана, Выпуск. на большом экране в автономном режиме、Права доступа и другие функции управления.

3.3 Процесс сборки

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

4. Реализация основных функций

Далее мы поочередно разберем реализацию нескольких основных функций платформы:

1. Адаптивная верстка большого экрана.

фон:Решить проблему путаницы страниц,Обеспечьте адаптацию к большому экрану с несколькими разрешениями:

думать:Прежде всего, мы думаем о том, что мобильный терминал адаптируется к основной тенденции. Как совместить vh, vw, rem и font.js+rem Подождите два варианта. Первое решение в основном использует медиа-запросы для определения родительского размера, а затем использует rem в качестве единицы высоты, поля, заполнения и других свойств CSS компонента, наследуя родительские настройки и другие единицы (1vw) для достижения адаптивной адаптации. Второй вариант — сослаться на сторонний скрипт, написать вычисления кода в main.js и использовать rem для наследования для достижения адаптации.

① комбинация vh, vw, rem

Язык кода:java
копировать
//vw вх блок Официальное объяснение от w3c vw:1% of viewport’s width vh:1% of viewport’s height
//Например, если ширина черновика дизайна составляет 1920 пикселей, то 1vw=19,2 пикселей. Для облегчения расчета мы устанавливаем размер шрифта элемента html равным 100 пикселей, что составляет 5,208vw=100 пикселей.
body,html {
     font-size:5.208vw
}

② font.js + rem

Язык кода:java
копировать
//Прослушиваем событие превышения размера окна,Динамический расчет размера шрифта корневого узла,Сотрудничать сноваremСделать адаптацию
(функция (док, победа) {
    const docEl = doc.documentElement
    const resizeEvt = «изменение ориентации» в окне? 'orientationchange': 'изменить размер'
    константный пересчет = функция() {
      пусть clientWidth = docEl.clientWidth
      если (!clientWidth) вернуть
      docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
    }
    if (!doc.addEventListener) возвращает
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(документ, окно)

дефект:Когда мы используем сторонние плагины на больших экранах,В его стиле в качестве единицы измерения используется px.,Например line-height В настоящее время высота строки не может быть изменена, и могут возникнуть проблемы с путаницей, такие как перекрытие. Или мы используем postcss-px2rem Плагины выполняют глобальную замену, но при использовании нужно обращать внимание на адаптированные плагины, такие как Ant Дизайн, иначе представленный и т.д. При использовании элементов управления возникнут проблемы со стилем.

Решение:Усыновленныйcss3 увеличения transform: scale(X,Y) Свойства, в основном путем мониторинга окна браузера onresize событие,При изменении размера окна,Нам нужно использовать только фактическую ширину и высоту контейнера большого экрана.,Чтобы рассчитать соответствующий коэффициент увеличения и уменьшения,Это позволяет адаптировать макет,Мы также предоставляем различные эффекты адаптации макета.,Например, одинаковое масштабирование по высоте, одинаковое масштабирование по ширине, полноэкранное покрытие и т. д.,Различные способы увеличения,Определяет наш приоритет при вычислении соотношения сторон. Поэтому функцию уменьшения холста мы выполним позже.,Это решение также может быть реализовано напрямую.

Язык кода:java
копировать
// Размер эскиза проекта в зависимости от настроек Преобразуйте соответствующее соотношение сторон
useEffect(() => {
    const wR = boxSize.width / viewWidth;
    const hR = boxSize.height / viewHeight;
 
    setBgScaleRatio(wR);
    setBgHeightScaleRatio(hR);
}, [boxSize, viewWidth, viewHeight]);
 
//В соответствии с различными коэффициентами увеличения, такими как равная ширина, равная высота, полноэкранный режим и т. д. Рассчитать значение шкалы
const getScale = (proportion, x, y) => {
    if (proportion === 'radioWidth') {
        return `scaleX(${x})`
    }
    if (proportion === 'radioHeight') {
        return `scaleY(${y})`
    }
    return `scale(${x}, ${y})`
}

2. Разработка общего процесса разработки компонентов большого экрана.

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

Идеи дизайна:компоненты = component Тело компонента + schema Уровень протокола конфигурации компонентов + Слой определения компонента (тип, принадлежность, начальная ширина и высота и т. д.)

① component Тело компонента:

  • Выбор структуры визуализации:Основные отраслевые библиотеки визуализации включают в себя Echart、Antv、Chart.js、D3.js、Vega、DataV-React Исходя из требований к универсальности и кастомизации визуализации, мы выбрали Echart、DataV-React В качестве среды разработки базовых компонентов при работе с пользовательскими компонентами с более высокими требованиями к настройке мы выбрали меньшую степень детализации визуализации. D3.js。
  • Инкапсулирует общие компоненты Echarts (инициализация, регистрация событий, отмена экземпляра и т. д.):
Язык кода:java
копировать
// initialization echarts
const renderNewEcharts = () => {
    // 1. new echarts instance
    const echartObj = updateEChartsOption();
    // 2. bind events
    bindEvents(echartObj, onEvents || {});
    // 3. on chart ready
    if (typeof onChartReady === 'function') onChartReady(echartObj);
    // 4. on resize
    echartObj.resize();
};
 
// bind the events
const bindEvents = (instance, events) => {
    const _bindEvent = (eventName, func) => {
       instance.on(eventName, (param) => {
           func(param, instance);
       });
    };
 
    // loop and bind
    for (const eventName in events) {
        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
            _bindEvent(eventName, events[eventName]);
        }
    }
};
 
// dispose echarts and clear size-sensor
const dispose = () => {
    if ($chartEl.current) {
       clear($chartEl.current);
       // dispose echarts instance
       (echartsLib || echarts).dispose($chartEl.current);
    }
};
  • Универсальный пакет DataV компоненты(DataV-React、Индивидуальные входы для компонентов и унифицированная конфигурация、данныесобирать、Слушайте изменение размера)
Язык кода:java
копировать
const DataV: React.FC<DataVProps> = (props) => {
    const { config } = props;
    const [renderCounter, setRenderCounter] = useState(0);
    const $dataVWarpEl = useRef(null);
    const $componentEl = useRef(null);
 
    useEffect(() => {
        // Мониторинг размера контейнера привязки
        const resizefunc = debounce(() => {
            $componentEl.resize();
        }, 500)
       // fixme
       addResizeListener($dataVWarpEl.current, resizefunc);
       return () => {
           // Очистить подписку
           removeResizeListener($dataVWarpEl.current, resizefunc);
       };
    }, []);
 
    return (
        <DataVWarp ref={$dataVWarpEl}>
            <CompRender config={config} ref={$componentEl} />
        </DataVWarp>
    );
};

② schema Уровень протокола конфигурации компонентов + Слой определения компонента (тип, принадлежность, начальная ширина и высота и т. д.)

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

  • Дизайн схемы JSON:
Язык кода:java
копировать
{
    headerGroupName: «Публичная конфигурация»,                         //Настраиваем тип
    headerGroupKey: 'widget',                           //Настраиваем типзначение ключа Одни и те же ключевые значения относятся к одной и той же категории.
    name: 'название заголовка',                                    //имя свойства
    valueType: ['string'],                              //Тип значения атрибута
    optionLabels: [],                                   //Имя метки раскрывающегося списка службы, поля множественного выбора и других элементов управления
    optionValues: [],                                   //Значения служебных меток для раскрывающихся списков, полей с множественным выбором и других элементов управления
    tip: false,                                         //Элементы конфигурации Tooltip аннотация
    ui: ['input'],                                      //Используемый тип управления
    class: false,                                       //Имя класса управления, индивидуальный стиль управления
    css: { width: '50%'},                               //Изменяем стиль управления
    dependencies: ['widget,title.show,true'],           //Связь между атрибутами, правилами ['Тип конфигурации, ключ атрибута, значение атрибута']
    depContext: DepCommonShowState,                     //Метод обратного вызова проверки между атрибутами
    compShow: ['line'],                                 //Какие компоненты настраиваются
    dataV: { key: 'title.text', value: '' },            //Настроенное значение ключа и значение по умолчанию
},
  • Форма оформления DSL:

доход:Вышеупомянутое настроено намиDSLУровень протокола структуры,Пользователям нужно только заполнить форму Excel,Вы можете создавать динамические формы,Реализуйте такие функции, как классификация элементов конфигурации компонентов, повторное использование конфигурации, связь между элементами конфигурации и аннотация атрибутов. В настоящее время конфигуратор свойств поддерживает 15 часто используемых элементов управления конфигурацией пользовательского интерфейса.,Через настраиваемый уровень протокола структуры DSL,Можно быстро завершить инициализацию интерфейса конфигурации компонента.,Подготовьтесь к последующим запланированным центрам материалов компонентов.

3. Перетащите агрегат

фон:React-Grid-Layout Плагин перетаскивания не поддерживает свободное размещение и перетаскивание компонентов на разных широтах:

Решение:Анализируя исходный код,Переписаны события перетаскивания на разных широтах и ​​события перетаскивания целей.,Также были расширены такие функции, как блокировка соотношения сторон и вращение прозрачности.

Анализ исходного кода:

Функция масштабирования изменения размера была улучшена (оптимизирована). При перетаскивании помимо изменения ширины и высоты контейнера также динамически регулируется координатное положение компонента.

Язык кода:java
копировать
// CSS Transforms support (default)
if (useCSSTransforms) {
    if (activeResize) {
        const { width, height, handle } = activeResize;
        const clonePos = { ...pos };
        if (["w", "nw", "sw"].includes(handle)) {
            clonePos.left -= clonePos.width - width;
        }
        if (["n", "nw", "ne"].includes(handle)) {
            clonePos.top -= clonePos.height - height;
        }
        style = setTransform(clonePos, this.props.angle);
    } else {
        style = setTransform(pos, this.props.angle);
    }
}

Сложенное отображение, свободный макет (оптимизация) путем контроля сжатия макета и динамической регулировки уровня zIndex цели перетаскивания для достижения взаимодействия при работе многоуровневых компонентов и свободного позиционирования.

Язык кода:java
копировать
// При каждом перетаскивании значение zIndex должно основываться на текущем максимальном значении zIndex. + 1 и возвращен компоненту для использования.
const getAfterMaxZIndex = useCallback(i => {
    if (i === curDragItemI) {
        return;
    }
    setCurDragItemI(i);
    setMaxZIndex(maxZIndex => maxZIndex + 1);
    return maxZIndex;
}, []);

Отображение эффекта после трансформации

4. Нажатие на статус на большом экране

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

Решение:на основеwebsocketмеханизм связи,Создавайте длинные ссылки,Реализованы механизмы пульса и повторного подключения.,Обновления в режиме реального времени или автономное управление большими экранами после онлайн-выпуска.

5. Предварительный просмотр эффекта

6. Резюме

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

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

  • Обогащайте и расширяйте большой экранкомпоненты&Возможности конфигурации,Освещение визуальных сценариев в разных отраслях.
  • При создании платформы визуальных материалов были накоплены отличные визуальные компоненты и шаблонные материалы для большого экрана.
  • Разработка и внедрение движка 3D-рендеринга и движения.
boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose