Фронтенд заранее заговорил о конференции и провел ее совместно с Nuggets. Добавьте codingdreamer в техническую группу конференции и побеждайте на новом стартовом рубеже.
29-е | Специальная сессия по визуализации данных интерфейса, высокоинтенсивный разовый обзор и визуализация игрового процесса интерфейса, прямая трансляция в течение всего дня с 7 до 17, 9 лекторов,Зарегистрируйтесь, чтобы сесть на автобус 👉 ):
Все предыдущие серии полностью записаны и транслируются.Начните и разблокируйте все сразу
Текст выглядит следующим образом
Эта статья является 15-й сессией отчета об утреннем чате, а также 109-й сессией утреннего чата, которым поделился Byte-Jerry.
1. Открытие
простое представление о себе
Привет всем, я Джерри, фронтенд-инженер из клиентской группы коммерческого продукта ByteDance. Для меня большая честь поделиться с вами некоторыми из наших последних деловых практик от имени команды, потому что мы просто работаю над коммерческой системой BI. , поэтому сегодняшней темой я принесу вам игру под названием "Как реализовать панель инструментов, а также функции экспорта и обмена бизнес-отчетами«Технические осадки.
Самая прибыльная фронтенд-команда ByteDance
First, tell us about our team: We are a people already have a hundred front-end team, our students also spread in Beijing, Shanghai, Hangzhou and North America these places, these cities have our base, we are doing things, We are приверженный кЛучшее решение для достижения успеха в интернет-бизнесе,Практикуйте концепцию «информация создает ценность».
Здесь вы подключитесь к десяткам миллиардов трафика ByteDance.полная матрица продукта, свидетельская компанияИнкубационный рост нового направления бизнеса, поддержка компании100-миллиардный рост выручки. Каждую минуту и каждую секунду здесь вы можете лично ощутить жизненную силу ByteDance. Несмотря на то, что мы являемся бизнес-командой, мы также делаем много технологических разработок, идущих в ногу со временем, в том числе: обновление современной инженерной системы переднего плана, исследование возможностей узла, инструмент компакт-диска одним щелчком мыши, обслуживание компонентов, интернационализация внешнего интерфейса. общее решение Решения, системы визуального построения страниц, системы бизнес-аналитики BI, автоматизированное тестирование E2E переднего плана, шаблоны проектирования микроинтерфейса, ориентированные на будущее, и т. д.
В процессе поддержки непрерывного развития бизнеса,Мы стараемся постоянно изучать лучшие практики для технологического бизнеса.. И в конце шеринга есть еще ссылка на наше благосостояние.Я дам вам зеленый канал нашей команды.Если все слушают мой шеринг и думают, что то, что мы делаем, очень интересно, и вам это интересно, тогда Добро пожаловать, чтобы доставить быстро.
Ну, не будем больше об отступлении. Прежде чем мы официально начнем делиться сегодня, нам сначала нужно поблагодарить наших одноклассников. Спасибо нашему ведущему Хуа Хуа за помощь в разминке, а также спасибо Скотту за предоставленную мне такую возможность пообщаться со всеми. Итак, давайте теперь перейдем непосредственно к нашей теме.
поделиться планом
Вот план, которым мы поделились сегодня: я постепенно расскажу вам об основных деталях системы отчетности, которую мы собираемся разработать, и начну с фактического сценария бизнес-потребностей, чтобы шаг за шагом завершить создание клиентской системы бизнес-отчетности. . На самом деле, сегодня я подготовил более 50 страниц PPT, потому что есть так много интересных или стоящих вещей, которые можно сказать о построении системы BI. Я очень надеюсь поделиться всем этим с вами, но из-за нехватки времени я могу только быть в состоянии извлечь некоторые из них, поэтому я стараюсь сделать их максимально простыми для понимания, и я больше сосредоточусь на реализации некоторых основных функций внешнего интерфейса.Конечно, система BI должна быть намного больше, чем это. Весь процесс обмена может быть относительно долгим, и я надеюсь, что студенты, которые пришли послушать мой рассказ сегодня, также получат что-то после прослушивания.
Итак, наш сегодняшний обмен в основном состоит из следующих частей:
- Передовые решения для бизнес-анализа в эпоху больших данных
- Реализация индивидуальных возможностей анализа данных
- Производство приборной панели
- Обмен и экспорт больших данных
- Более глубокое размышление о бизнесе и перспективах на будущее
Теперь давайте начнем с нашей первой темы.
2. Передовые решения для бизнес-анализа в эпоху больших данных
тенденция большого времени
Как те из нас, кто занимается Интернетом, мы, по сути, отчетливо осознаем исторический процесс последних нескольких десятилетий. Во-первых, первое десятилетие 20-го века было эпохой компьютерной стороны, подъем различных порталов также просветил многих современных интернет-гигантов, последнее десятилетие было эпохой мобильных терминалов, где различные князья соревнуются за Интернет. Окончательный победитель заложил основу для сегодняшнего интернет-ландшафта. Сейчас наступила эра данных, потому что во многих случаях большой объем данных или сильные возможности анализа данных могут стать основной конкурентоспособностью компании. следовательно,данные,является самым важным ресурсом в эту эпоху. Теперь как команда B, так и команда C будут накапливать большое количество данных, таких как наши обычные закопанные точки страницы, PV, UV или некоторые бизнес-данные, все из которых подобны золотым рудникам данных, ожидающим своего появления. нам изучить их значение.
Реальные бизнес-сценарии
А мы как раз этим и занимаемся. Поскольку мы являемся командой большого коммерческого отдела, мы накопили много значимых и ценных данных в нашем большом отделе, таких как некоторые данные о наших продажах или некоторые данные о клиентах. С этой целью в нашем отделе мы также нанимаем много профессиональных аналитиков данных или продаем себя.Обычно мы можем делать некоторые отчеты и еженедельные отчеты для обобщения данных и наблюдения за тенденциями, как показано на рисунке ниже.Как показано на дневном графике слева — отчет о фактической производительности в нашем бизнесе.Наши одноклассники могут делать несколько ежедневных отчетов, чтобы раскрыть некоторые тенденции в продажах в отделе. Они будут использовать такие инструменты, как Excel, чтобы самостоятельно рисовать различные диаграммы после получения данных, а затем собирать их таким образом и отправлять. Диаграмма отчета справа представляет собой отчет, составленный нашими студентами после использования разработанной нами системы, и эффект соответствует их ожиданиям.
Конкуренты в отрасли
И такой бизнес-сценарий на самом деле очень распространенная вещь.Это не значит, что он существует только в байтах.Как мы только что упоминали, на фоне сегодняшней эпохи каждая компания накопила большой объем данных, которые необходимо обнаружить.Это уже обычное дело Поэтому многие компании открыли для себя такие возможности для бизнеса и создали много зрелых продуктов в отрасли. Например, известная Tableau, хотя она постепенно покинула китайский рынок, ее функции и взаимодействия также заслуживают большого количества системных ссылок.В Китае также есть много мощных продуктов, таких как Ali QuickBI, потому что в качестве облака поставщик услуг, класс BI Поколение системы можно назвать нормальным.
Почему мы это делаем?
В отрасли уже так много зрелых продуктов, зачем нам делать такие повторяющиеся вещи? Мы изобретаем велосипед?
На самом деле, это в основном связано со следующими четырьмя причинами:
- В отделе имеется большой объем ценных данных: Мы только что упомянули, что, поскольку мы являемся коммерческим отделом, это нормально иметь большое количество осадков маркетинговых данных.
- Много повторяющихся отчетов: Мы только что упомянули, что наши одноклассники по продажам или аналитики данных после загрузки данных рисуют графики самостоятельно с помощью Excel или других инструментов, а затем составляют отчеты и повторяют цикл, отправляя каждый раз еженедельные отчеты или отчеты раз в два месяца. В заключение, делайте одно и то же снова и снова. Мы хотим помочь им, предоставив им возможность автоматизировать некоторые повторяющиеся задачи.
- Требуются специальные средства управления доступом к данным: Как мы все знаем, данные на самом деле очень конфиденциальны в компании, и права доступа к данным также должны строго контролироваться. В традиционной модели, после того, как пользователь прямо говорит о загрузке данных, мы не можем отслеживать поток данных и окончательное распределение.Это на самом деле очень рискованная вещь.Мы надеемся использовать нашу коммерциализированную существующую систему аутентификации.Наши данные подлежат к более строгому контролю.
- Мы хотим, чтобы пользователи могли делать все в одной системе: мы не хотим, чтобы пользователям приходилось загружать данные в нашу систему, затем переключаться в Excel для сбора данных, а затем использовать другую систему для отправки еженедельных отчетов. , они могут делать все, что обычно делают на работе.
что нам делать?
Согласно нашему только что проведенному анализу, еженедельная работа пользователей состоит в основном из следующих трех основных процессов: создание каждой необходимой им диаграммы -> сборка этих диаграмм в панель инструментов -> окончательное включение этой диаграммы в еженедельный отчет Поделитесь ею в форме , или используйте его для самостоятельного возврата через равные промежутки времени. Следуя такому набору процессов и идей, мы начали постепенно анализировать, какие функциональные модули необходимы для каждого этапа, и какие технические решения могут помочь нам в этом.
3. Реализация индивидуальных возможностей анализа данных
Далее давайте посмотрим на первое звено бизнес-процесса, которое также является основным компонентом отчета —Диаграмма. Откуда берется диаграмма Естественно, нам нужно предоставить пользователям возможность создавать диаграммы, то есть наши настраиваемые возможности анализа данных.
Анализ потребностей пользователей
Каков ожидаемый эффект пользователя? Что касается реализации системы в отрасли, пользователям не нужно заботиться о сложной логике SQL, стоящей за ними, чтобы удовлетворить свои собственные запросы данных, и им не нужно рисовать свои собственные диаграммы. , точно так же, как анимация на нашей картинке.Например, перетаскивая некоторые поля данных, которые мы предоставляем, мы можем быстро запросить данные, которые он хочет, или быстро нарисовать для него диаграмму, а затем пользователь также может свободно выбирать тип диаграммы, например, вы хотите сделать линейную диаграмму или кросс-таблицу, похожую на нашу обычную.
Разбираемся с технической системой
Итак, какие функциональные точки нам необходимо поддерживать, чтобы реализовать возможности индивидуального анализа данных? Здесь нас можно разделить на следующие части:
Например, это только что появилось в поле зрения.Способность перетаскивания, что также является относительно распространенной способностью конкурирующих продуктов на рынке. Мы можем использовать такие инструменты, какreact-dndТакие отличные методы работы с открытым исходным кодом помогают нам достичь такой возможности.
Второй момент заключается в том, что пользователей могут не устраивать некоторые хорошие поля по умолчанию, предоставленные нами. Например, мы можем видеть список полей в левой части системы. Эти поля могут не удовлетворять фактическому более сложному анализу данных пользователя. В некоторых сценариях пользователям может потребоваться самостоятельно создать некоторые такие выражения полей, которые могут включать в себя ряд сложных вычислительных операций, таких как суммирование и усреднение, что обеспечивает дополнительные возможности настройки. Поэтому, чтобы сделать функцию более настраиваемой, мы также предоставим возможность настраивать поля (или, более наглядно, настраиваемые выражения запроса).
Конечно, ядром такой нашей индивидуальной аналитической страницы, безусловно, является отображение диаграммы. Мы можем реализовать представление данных табличного типа, такое как перекрестные таблицы, на основе таблицы antd, и мы можем использовать ECharts для реализации представления данных в виде диаграммы. Мы можем выбрать Mobx в качестве поддержки потока данных, потому что он очень «гибкий», почему, давайте посмотрим на следующую картинку:
На самом деле мы можем разделить функцию каждой части страницы, как на картинке. Первый — это список перетаскиваемых полей с левой стороны. Пользователи могут перетаскивать поля отсюда в контейнер со строками, столбцами и числовыми категориями, как мы только что видели. Эта часть области Мы называем ее областью анализа, потому что она используется для создания конфигурации анализа поля, которую можно использовать для внутренних запросов. С помощью функции автозапуска Mbox при изменении конфигурации области анализа внутренний запрос будет автоматически инициирован для получения соответствующих данных диаграммы, и он будет передан в относительно большую основную область отображения значков на внизу, чтобы отобразить диаграмму, которую мы нарисовали.
Мало того, мы также видим, что в правой части страницы есть такая боковая панель, которая предоставляет пользователям возможность выбирать тип диаграммы, а некоторые позволяют пользователям свободно настраивать стиль диаграммы, например, что чтобы включить или выключить объединение отдельных ячеек или добавить некоторые стили таблиц, такие как некоторые общие возможности, такие как чересстрочный цвет. При изменении конфигурации метаданные или статус некоторых диаграмм могут автоматически обновляться с помощью механизма Observer в Mbox, вызывая повторную визуализацию диаграммы.
Разобравшись с четким архитектурным проектом, давайте начнем разбирать его один за другим.
перетаскивание поля
Во-первых, давайте посмотрим на возможности перетаскивания полей, о которых мы упоминали в начале. Как реализовать функцию перетаскивания в интерфейсе? Учащиеся, которые узнали об этом аспекте, обязательно подумают о событиях перетаскивания, таких как собственное событие перетаскивания HTML и т. д. Конечно, мы также можем использовать некоторые библиотеки инструментов, которые помогут нам быстро завершить работу, например, react-dnd, используемый в нашей системе, что является очень хорошим выбором.
Возвращаясь к теме, мы хотим добиться возможности перетаскивания, суть состоит в том, чтобы понять три элемента перетаскивания в PPT, потому что независимо от вашей бизнес-логики эти три элемента всегда являются основой всех ваших функций. :
- Контекст перетаскивания (DragDropContext): Подобно Provider, который нам обычно нужно использовать при обертывании потока данных, он может предоставить такой глобальный контекст для перетаскивания базовой поддержки для всех его подэлементов;
- Перетащите элемент (DragSource): это то, что мы на самом деле перетащили, например поля, которые вы только что видели;
- ДропТаржет: То, что мы перетаскиваем, не должно перетаскиваться все время, оно должно быть где-то размещено, и это место мы называем контейнером размещения.
Как использовать реальную логику кода для реализации трех элементов перетаскивания? Мы можем использовать методы DragSource и DragTarget, предоставляемые react-dnd, для переноса наших компонентов.Нам нужно только определить тип перетаскивания, обратный вызов события перетаскивания или способность, которую мы хотим настроить. , например, как показано на На рисунке мы придадим определенный стиль перетаскиваемому элементу — увеличение прозрачности может завершить инкапсуляцию перетаскиваемого элемента.
И мы инкапсулируем повторяющийся процесс в компоненты более высокого порядка (потому что, когда наш проект только начинался, хуки реакции были всего лишь предложением, которое только что стало популярным), так что Когда мы хотим быстро обернуть компоненты, не становится ли все намного проще:
Таким образом, мы хотим дать некоторые возможности перетаскивания, к которым элемент в системе просто оберните декоратор, и все в порядке. Такая функция инструмента может реализовать нашу возможности перетаскивания «подключить и отключить в любое время» и в любое время воссоединиться.
И внимательные студенты могут обнаружить, что наши поля на самом деле имеют разные типы, и в области анализа есть разные позиции, и, как следует из названия, области анализа, такие как строки и столбцы, естественно, имеют различную логику или представление в кросс-таблице. простой пример, например, мы перетаскиваем поле класса даты в фильтр, он должен представлять такой компонент, как календарь, а затем мы перетаскиваем некоторые поля класса измерения в фильтр, он может отображать выпадающее перечисление. или окно поиска такого компонента рендеринга.
Мы можем сложить его с большим количеством суждений, но как мы можем сохранить логику этой части более элегантно? На самом деле, внимательные студенты могли обнаружить, что результат перетаскивания поля в область анализа на самом деле представляет собой двумерный процесс, который зависит от типа поля и типа конечной точки перетаскивания, поэтому мы используем матрицу для выразить такой процесс. Окончательная оценка матрицы соответствует компонентам и конфигурациям, которые нам нужны в разных ситуациях. Например, в нашем примере кода справа мы перетаскиваем поле, такое как класс даты, в строку, подобную нашей, и оно сопоставляется с первым элементом под полем даты в матрице, подобной нашей, а затем эта конфигурация. компонент, соответствующий конечному полю, который должен быть сгенерирован, а также его метаинформация инициализации данных или ряд конфигурационной информации.
Таким образом, мы хотим сохранить такую конфигурацию позже, с интуитивно понятными аннотациями, это на самом деле очень просто.Например, мы хотим добавить некоторую конфигурацию области анализа сейчас, по сути, нам нужно только добавить дополнительные в матрицу , Просто добавьте несколько элементов.
пользовательское выражение вычисления
При перетаскивании полей пользователям не нравятся поля по умолчанию, которые мы предоставляем.Во многих случаях пользователям нужна возможность настраивать выражения полей. Мы можем не позволять пользователям полностью писать сложный SQL. Мы надеемся, что эта система может быть проще и снизить порог для обслуживания большего числа пользователей. Поэтому у нас есть настраиваемые синтаксические структуры, такие как функции и поля, предоставленные нами. Пользователь может быстро собрать выражение, как показано на анимации на нашей диаграмме.
С кодемирцом мы скоро сможем достичь таких возможностей.
Во-первых, CodeMirror может предоставить нам очень хорошее ключевое слово, подчеркивающее наши возможности. Узнайте о теории компилятора, которую студенты должны знать для анализа строки, и она будет разделена на несколько шагов для решения лексического и грамматического разбора и т. Д., Где CodeMirror предоставляет нам ссылки для лексического анализа, мы можем обрабатывать настраиваемый ключ способность Словом, мы можем кинуть тип каждого соответствующего токена, CodeMirror будет присвоен определенный класс для указанного нами ключевого слова, мы сможем настроить их желаемый стиль:
Мало того, CodeMirror также позволяет нам настраивать меню синтаксических подсказок. Нам нужно только подготовить список для запроса, и когда пользователь вводит или вставляет, фильтр и список передаются в CodeMirror. С помощью метода рендеринга каждого элемента списка мы также можем свободно настраивать стили в раскрывающемся меню, что так же удобно, как использование библиотеки компонентов, такой как Echarts или Antd.
Вот небольшая хитрость.На самом деле курсор располагается в конце текста после автодополнения.Для текста класса функции мы можем предпочесть, чтобы его курсор находился в круглых скобках ( ) функции, поэтому при мы обнаруживаем, когда пользователь набирает функцию через автодополнение, он вручную перемещает курсор и перемещает его в круглые скобки:
Отображение диаграммы
С полями вы можете естественным образом запрашивать данные из бэкэнда. Для внешнего интерфейса мы, наконец, хотим отобразить такую кросс-таблицу, как показано на рисунке Очевидно, что нам нужны структурированные данные, а данные результата, которые серверная часть напрямую запрашивает поля через SELECT, должны быть сглажены Да, от ответа интерфейса до рендеринга данных должен быть процесс форматирования данных. Кто будет выполнять этот процесс? Если это сделает интерфейс, это будет более дружелюбно к производительности сервера. Серверу не нужно уделять внимание форматированию данных, и он может сосредоточиться на анализе данных и запросе. конец делает это, это будет более дружелюбно ко мне, ха-ха, шучу. Конечно, важнее конечное исполнение. Как мы форматируем данные?
Мы можем уточнить диаграмму данных. Если мы хотим отобразить данные ячейки, то эта ячейка данных должна иметь уникальную координату. Откуда берутся координаты? Фактически, это индекс данных, состоящий из его полей строки и столбца. Мы можем инкапсулировать процессор данных, который является процессором на нашей диаграмме, чтобы структурировать список данных, предоставленный серверной частью, и превратить его в более интуитивно понятную карту данных.
Мы видим, что в DataMap в формате, ключ первого уровня соответствует строке данных в DataSource, а ключ второго уровня соответствует столбцу, в котором находится текущие данные, так что данные каждой ячейки могут Быть четко выраженным через такие «координаты», когда мы принимаем этот DataMAP для создания данных Antdsource и столбцов AntD, все намного яснее. На самом деле этот процесс является очень распространенной логикой генерации деревьев.Вопросы для собеседования в нашем отделе,хаха фокус.
Что касается диаграмм, связанных с Echarts, сегодня я не буду вводить слишком много, я считаю, что уже есть много типов сеансов визуализации данных до сеанса внешнего чата. Аналогичная проблема.
Наконец-то мы получили исходный код диаграммы, следующим шагом является ядро нашей системы, сборка диаграммы.
4. Изготовление приборной панели
Зачем нам собирать диаграммы?
потому что:Значение объединения нескольких графиков,Должно быть больше, чем сумма всех значений листа диаграммы. Если вы проводите совместный анализ или связываете данные с несколькими диаграммами, это определенно принесет больше пользы.
Что на самом деле нужно пользователям?
Анализ потребностей пользователей
Такой отчет, сделанный пользователем в бизнесе, то есть, как на иллюстрации ниже, в отчете будут раскрыты некоторые показатели, и будут какие-то графики, которые на самом деле являются графиками, которые мы сделали на предыдущем шаге, и там будут также подведите итоги по копирайтингу, например, укажите, есть ли у отдела или команды какая-либо тенденция к росту в этом месяце.
И какие детали нам нужны для поддержки функции приборной панели?
Технологическая архитектура приборной панели
Мы можем использовать эти методы снизу вверх для усиления информационных панелей. На информационной панели будут некоторые атомарные компоненты для формирования необходимых элементов информационной панели, таких как диаграмма, которую мы только что закончили, и некоторые карточки с форматированным текстом или некоторые компоненты изображений, конечно, также есть глобальные фильтры, которые очень распространены в дашборды, используемые, чтобы позволить пользователям полностью фильтровать некоторые данные.
С атомарными компонентами мы также надеемся дать пользователям возможность перетаскивать макеты, чтобы пользователи могли свободно собирать эти атомарные компоненты в системе, а затем создавать отчет, который может его удовлетворить.
Разобравшись с технической системой, постепенно будем решать трудности снизу вверх.
Возможности Rich Text для достижения
В атомарной сборке это сложнее.Даже если это редактор с расширенным текстом, это был технический момент для трех трудностей внешнего интерфейса.В настоящее время отличные сообщества внешнего интерфейса подготовили для нас зрелое решение - QUILL , это не только может помочь нам быстро реализовать функцию редактирования форматированного текста, но также позволяет нам свободно настраивать возможности, что лучше, чем другие инструменты.
Например, мы можем настроить содержимое панели инструментов. Мы можем настроить рендеринг панели инструментов форматированного текста, свободно собирая теги HTML. Например Говоря об элементе Button, то, что он в конечном итоге отображает на такой панели инструментов, — это кнопка, такая как наша кнопка с функцией, выделенной полужирным шрифтом, или функциональная кнопка с подчеркиванием. Затем есть некоторые функции, такие как раскрывающиеся меню, которые мы можем быстро реализовать с помощью выбора и опции, например, выбор размера шрифта, что также является относительно распространенной реализацией.
Мало того, мы также можем добавить некоторые пользовательские функции в Quill.Например, Quill по умолчанию поддерживает только четыре размера шрифта, поэтому мы также можем указать ему пользовательские размеры шрифта:
Благодаря гибким возможностям настройки Quill мы можем выполнять различные требования к настройке от многих менеджеров проектов.
Возможность перетаскивания макета
Теперь, когда у нас есть основные элементы панели инструментов, мы можем сосредоточиться на реализации пользовательского макета. На самом деле, у сообщества уже есть особенно хорошая реализация, которая представляет собой макет react-grid, который мы используем.Вы можете увидеть официальную демонстрацию, предоставленную им.На самом деле, эффекта достаточно, чтобы удовлетворить наши потребности.
Однако здесь есть небольшая оптимизация, на нее тоже можно обратить внимание. Это официальная возможность предоставлять адаптивную ширину, но ее суть заключается в отслеживании события изменения размера окна, и, если вы только что заметили, наша система на самом деле имеет выдвижную боковую панель, поэтому, когда мы переходим к масштабированию Когда боковая панель используется , торпедо не приспособится к такой ширине. Поэтому мы можем использовать react-resize-detector, чтобы расширить его и просто оптимизировать эту официальную проблему.
Чтобы сделать управление данными более понятным, мы разделяем логику макета и рендеринга данных.Существует отдельная конфигурация для поддержки данных макета и другая конфигурация для поддержки метаданных компонентов. Таким образом, процесс разметки сортировки дашборда аналогичен показанному на рисунке: во-первых, то, что у нас действительно есть в бэкенде, — это полные данные дэшборда, например, какие компоненты в нем есть, и какой там макет. Затем, после того как интерфейсная система извлечет такие данные через запрос, мы проведем синтаксический анализ и сопоставим такую информацию о макете с каждым соответствующим компонентом. В конце концов, эти атомарные компоненты, связанные с информацией о макете, через наш макет макета, наконец, представили красивую панель инструментов, свободно собираемую пользователем.
глобальный фильтр
Глобальный фильтр — это очень распространенная функция панели мониторинга BI. Много раз мы будем предоставлять фильтр на уровне панели мониторинга, чтобы предоставить пользователям возможность настраивать фильтруемые данные. Фильтры можно связать с любой диаграммой, и эти элементы фильтра будут действовать только на связанной диаграмме.
Здесь мы приводим яркий пример (ниже). Например, на нашей информационной панели есть три фильтра, фильтр 123, и они связаны с разными диаграммами, фильтр 1 связан с диаграммой 1, фильтр 2 связан с диаграммой 1 и диаграммой 2, а фильтр 3 связан с диаграммой 2. Естественно, при работе с фильтром 1 будет обновляться только диаграмма 1. При работе с фильтром 2 необходимо обновить и диаграмму 1, и диаграмму 2, а при работе с диаграммой 3 будет обновляться только диаграмма 2.
Как такая логика может быть реализована с помощью технологий? Процесс сортировки показан на нашем рисунке. Мы можем собрать все фильтры в Магазине. На фильтре будет поле с информацией о связанной диаграмме. Когда фильтр изменится, он автоматически обновит нас. Магазин, Магазин автоматически запускает генератор фильтров, создает разные элементы фильтра для разных диаграмм, а затем диаграмма будет запрашивать данные из серверной части в соответствии с различными элементами фильтра.
Таким образом, основная скелетная функция информационной панели в основном была построена, и вы можете увидеть окончательный эффект от использования нашей информационной панели.
Но мы еще не все сделали.
5. Обмен и экспорт больших данных
Прежде всего, нам нужно прояснить, что отчет, сделанный пользователем, должен быть перенесен в большее количество мест за пределами системы для отображения. Поскольку отчет, сделанный пользователем, определенно не для развлечения или для того, чтобы оценить его «красоту», чаще всего он определенно надеется взять такой отчет для отправки еженедельного отчета или сделать так отчет о результатах анализа данных.
Таким образом, возможность экспорта или обмена данными также является незаменимой возможностью системы BI.
форма обмена данными
Экспорт и совместное использование данных на самом деле можно свести к следующим трем формам:
- обмен ссылками: Например, пользователь напрямую копирует системную ссылку в адресную строку браузера, или на нашей странице есть кнопка «копировать ссылку», пользователь нажимает следующее, и ссылка графика может быть автоматически скопирована в буфер обмена. , так что Вы можете напрямую делиться диаграммами или отчетами, сделанными самостоятельно;
- Экспорт диаграммы: пользователи могут захотеть экспортировать свои собственные диаграммы или отчеты в виде изображения или файла Excel, чтобы, когда им нужно отправлять электронные письма или сообщения, они могли быть более интуитивными;
- Подписка на еженедельную рассылку: Для более интеллектуальной системы это определенно не позволит пользователю делать скриншот системы каждую неделю или каждый раз, когда ему нужно поделиться своим отчетом. Мы можем сделать это более разумно. Такой процесс более автоматизирован. Только пользователь нуждается в быстрой настройке, и мы можем регулярно отправлять в отчет необходимую ему информацию, такую как снимки экрана, ссылки и т. д.
обмен ссылками
Давайте сначала рассмотрим первую форму обмена — обмен ссылками. После того, как пользователь нажмет кнопку, содержимое автоматически скопируется в буфер обмена. На самом деле, это также довольно распространенная реализация: нам нужно только создать входной тег, заполнить содержимое, которое нужно скопировать, выполнить input.select() для выбора всего содержимого, а затем использовать document.execCommand( 'copy', предоставляемый браузером. ), чтобы скопировать соответствующий контент в буфер обмена. Такую логику также можно инкапсулировать в часто используемые инструментальные функции для повторного использования в других сценариях.
Экспорт диаграммы
Для экспорта диаграмм нам нужно сначала освоить реализацию возможности загрузки из внешнего интерфейса. Если внешний интерфейс хочет, чтобы пользователь загрузил файл, то на самом деле очень просто сделать тег a, который позволяет нам назначить ObjectURL, такой как Blob, для href, а затем назначить ему атрибут загрузки для укажите загруженное имя файла файла, так что нам нужно только выполнить операцию щелчка тега a, чтобы имитировать загрузку пользователем файла.
Для наших файлов наиболее распространенным является файловая строка.Большинство типов изображений также могут экспортировать base64.Мы можем инкапсулировать функции инструмента и преобразовывать их в объекты Blob. В конечном счете, у пользователя есть возможность завершить загрузку.
Благодаря поддержке возможности загрузки с внешнего интерфейса можно выполнять индивидуальную обработку различных файлов. Для элементов класса Table на странице пользователи могут предпочесть экспортировать файл Excel WYSIWYG.Мы можем использовать js-xlsx, который предоставляет нам метод table_to_sheet, который нужно передать только на одной из наших страниц.HTML таблицы элемент, этот инструмент автоматически поможет нам проанализировать данные в формате файла Excel, а также сохранить стили, такие как объединенные ячейки на нашей странице, и, наконец, сгенерировать строку файла, мы можем напрямую использовать только что упомянутый файл Возможность загрузки, экспорт файла .
Для диаграмм типа диаграммы учащиеся, знакомые с Canvas, могут быть более дружелюбны.Canvas предоставляет API, называемый toDataURL, который может быстро экспортировать содержимое в Canvas в данные base64. Для некоторых неканвасных элементов, таких как наша индикаторная карточная диаграмма, это может быть чистая карточка, и мы также можем использовать html2canvas, чтобы быстро превратить ее в картинку.
Подписка на еженедельную рассылку
Как мы только что упоминали, мы также можем автоматизировать процесс экспорта отчетов. Пользователям не нужно генерировать экспорт отчетов в нашей системе BI каждый раз, когда им нужен отчет. Мы можем предоставить пользователям возможность свободной настройки. Например, когда пользователь выбирает, когда отправлять отчет для него или для некоторых людей регулярно, система будет автоматически отправлять отчет пользователю на регулярной основе.
Окончательная формализация фактически аналогична представлению на картинке справа. Если пользователь подписывается на отчет, система будет периодически отправлять такое сообщение на Feishu, содержащее снимок экрана отчета, сделанного пользователем, и ссылку, соответствующую отчету.
Затем, если вы хотите добиться такой возможности подписки, если вы знаете Linux, вы будете знать такую команду, как crontab, которая реализует возможность синхронизации. Общая идея на самом деле состоит в том, чтобы поддерживать такую возможность. Наша компания упаковала ее для нас. возможность, мы называем это cronjob, а затем, если пользователь создает задачу подписки, мы можем записать ее в нашу базу данных планирования времени, а затем создать такую задачу времени, когда наступит время триггера. В это время мы можем использовать безголовый браузер, похожий на более зрелый кукловод в отрасли, чтобы автоматически открывать отчет, чтобы сделать снимок экрана отчета для наших пользователей, и, наконец, отправить снимок экрана пользователю с некоторой информацией нашего отчета.
6. Более глубокое осмысление бизнеса и будущих перспектив
На самом деле, в ходе итеративной эволюции всего бизнеса наша система бизнес-анализа также стала более глубокой, и мы также надеемся, что у нас появится более дальний взгляд на будущее. На самом деле, мы надеемся, что система BI может стать более гибким центром обработки данных, а не только для обслуживания бизнеса, таких как возможности, которые мы достигли сейчас, если другие предприятия хотят повторно использовать отчеты, созданные нашей системой, он напрямую встраивает отчеты в нашей системе в свою систему в виде iframe. И в будущем мы также надеемся, что с помощью таких возможностей, как микро-интерфейсы, отчеты в нашей системе или некоторые компоненты диаграмм не могут быть ограничены нашей средой разработки, а также могут быть быстро повторно использованы другими системами более гибко. .
Истинное значение дата-центра,Повторное использование не только в бизнесе,Мы также продолжим изучать техническую возможность повторного использования..
Так что для нас: это только начало, впереди еще испытания. У нас все еще есть возможность сделать микро-интерфейс, мобильный терминал, широкоэкранный дисплей и т. Д., И мы также верим, что сможем сделать это в ближайшее время, поэтому те, кто заинтересован в том, что мы делаем, быстро присоединяйтесь к нам. , давайте сделаем что-нибудь сложное вместе.
7. Резюме
Поэтому мы рассмотрим контент, который мы только что закончили, в целом.Мы также можем использовать передовой опыт в отрасли в качестве базовой реализации нашей технологии, чтобы быстро поддержать технический выбор и инфраструктуру нашей системы отчетности, а затем использовать различные технологии. Абстрактные в общий пакет возможностей для создания наших настраиваемых возможностей анализа данных (предоставление источников диаграмм), атомарных компонентов информационных панелей (предоставление необходимых элементов информационных панелей), а также возможностей экспорта и обмена данными (поддерживающих необходимые функции систем BI), наконец, мы интегрировать и инкапсулировать ресурсы, которые у нас есть, для создания индивидуального решения для создания отчетов, которое мы предоставляем пользователям.
8. Социальная ссылка
Книга Рекомендации
Затем в интерфейсе раннего чата есть условность, то есть каждый раз, когда гость делится книгой, я рекомендую эту книгу «Грамматика графики».В то время автор D3.js, после прочтения этой книги , с вдохновением написал такой отличный фреймворк как d3.js. Но на самом деле я хочу сказать, что после этого процесса системы BI у меня появилось более глубокое понимание:сделать систему бизнес-анализа,Самое главное не то, какие технические трудности преодолеть,но уметь обнаруживать ценность данных,Оживление данных с помощью технологий.因此我觉得这本书，再合适不过了。
Здесь я также хочу выразить свою благодарность коллективу.Построение системы точно не завершается одним человеком.Здесь я не только хочу выразить особую благодарность моим коллегам,которые работали вместе со мной весь путь.Эти достижения разделяют все.Кристаллизация тяжелой работы, мы также надеемся, что больше студентов смогут участвовать в будущем, потому что, как мы только что сказали, то, что мы сделали, это только начало, нам еще многое предстоит сделать, вы нам нужны.
Впереди долгий путь, и я поделюсь с вами.Если у вас есть какие-либо вопросы по стандартам отбора крупных производителей, вы можете оставить сообщение в области комментариев, и я отвечу, или добавлю меня (codingdream), или вы можете посмотреть мой круг друзей.
Не забудьте 29th | Front-end Data Visualization Special, прямая трансляция с 7 до 17 весь день,Зарегистрируйтесь, чтобы сесть на автобус 👉 ):