Международная практика: Адрес проекта Github, добро пожаловать, звезда
Сначала укажите онлайн-адрес, чтобы все могли его почувствовать (поскольку бэкэнд использует бесплатный план Leancloud, он может работать медленнее):
PS Рекомендуется зарегистрировать аккаунт самостоятельно (пароль можно заполнить по желанию), если вы используете дефолтный тестовый аккаунт, не меняйте случайным образом, иначе другие не смогут его прочитать, т.к. make будет сохранен во внутренней базе данных.
Поместите еще несколько гифок для привлечения внимания:
Перетащите, чтобы запросить и визуализировать данные
Добавление диаграмм на канбан-доски
Настраивайте макеты Канбан, перетаскивая их
источник
Не знаю почему, но требований к анализу и визуализации данных в компаниях становится все больше. Некоторые из этих требований исходят от аналитиков данных (если в компании есть аналитики данных), некоторые — от продуктов, операций и разработки, а некоторые — от руководителей среднего и высшего звена компании, а некоторые — просто для экспорта данных определенной таблицы. , и некоторые надеются анализировать и визуализировать данные из нескольких измерений, а некоторые надеются интегрировать несколько визуальных диаграмм на одну страницу для формирования визуального отчета, некоторые из них являются одноразовыми требованиями, некоторые - требованиями к периодической нормализации, эти требования часто дезорганизованы. , а данные имеют много измерений, взаимодействие сложнее, различных параметров диаграммы визуализации много, сложно быть универсальным, а многие данные чувствительны и требуют строгого контроля разрешений.Со временем управление разрешениями стало стать головной болью, различные факторы приводят к различным требованиям к данным, потребляющим много энергии при разработке интерфейса, и результат становится все тоньше и тоньше.
Я считаю, что многие компании будут иметь аналогичные требования к данным, но они должны быть разбросаны.Хотя на рынке есть много продуктов, которые предоставляют аналогичные функции управления данными, из-за конфиденциальности данных многие компании не хотят размещать свои данные в других местах. На платформе большинство этих продуктов для управления данными стоят дорого, а их функции сложно настроить. Поэтому во многих компаниях такие требования к данным лягут на front-end.Хотя эти требования разрозненные или даже временные, но реализовать их непросто.Визуальные эффекты визуализации требуют различных параметров для настройки и большого объема данных необходимо проверить. Очистка и преобразование делают отладку и стыковку интерфейса очень хлопотными, увеличивают нагрузку на внешний интерфейс и делают кодирование внешнего интерфейса очень раздражающим.
В настоящее время очень полезно иметь мощный, гибкий и простой в использовании фон для анализа данных.Глупо перетаскивая и создавая диаграммы, коллеги без базы данных могут быстро приступить к работе; интегрируя вместе источники данных компании, вы может легко управлять данными; создав доску канбан для интеграции нескольких диаграмм, вы можете быстро создавать отчеты, которые легко просматривать и делиться ими; с помощью определяемых пользователем параметров диаграммы вы можете эффективно решить проблему настройки параметров внешнего интерфейса. (очень аккуратное предложение для сравнения, о да!)
Я занимаюсь анализом данных в нашей компании уже почти год. На самом деле, я был в контакте с BI и вопросами, связанными с данными, с моей первой стажировки. Я также наступил на многие ямы в процессе построения анализа данных предыстория Я пробовал всевозможные жалобы от моих коллег и пробовал различные решения Хотя возможности кодирования не сильно улучшились, у меня большой опыт работы с запутанными и непредсказуемыми бизнес-требованиями.
После более чем полугодовых мучений я построил новую платформу анализа данных со ссылкой на другие продукты анализа данных в соответствии с потребностями моего бизнеса.Эта платформа хорошо работает в нашей компании.Аспекты также имеют хорошую масштабируемость и могут справиться с более сложным бизнесом. сценарии. Я извлек интерфейсную часть и сформировал этот проект с открытым исходным кодом:
Прежде всего, я представлю основную ситуацию этого проекта.Этот проект в основном построен с помощью Vue + ElementUI. Часть визуализации использует echarts, а части перетаскивания и макета представляют собой две библиотеки vue-grid-layout. и vuedraggable. Некоторые технологии, идеи и некоторые вспомогательные коды этого проекта относятся к этому фоновому проекту Пан Шэня:
За исключением небольшого количества данных, используется back-end часть проектаmockКроме данных используются[leancloud](http://leancloud.cn)строить,DemoБаза данных часть данных использует бесплатную зарубежную базу данныхFree MySQL HostingМедленнее нетrootразрешений, но теста достаточно, используются другие пользовательские данные, графики, канбан и т.д.leancloudхранение объектов.
Основные функциональные точки и принцип реализации
Сначала вводятся основные функциональные моменты и принципы реализации проекта:
1. Запрашивайте данные, перетаскивая поля
Эта функция в основном строитсяSQLоператор для запроса базы данных, запрос на бэкэнде выполняется с помощьюPrestoсделать,PrestoВ дополнение к традиционным реляционным базам данных можно единообразно запрашивать различные базы данных.HDFS, способность запроса относительно мощная. Интерфейсная часть запроса данных в основном проходит черезSQLДеконструкция оператора разделена на интерактивные элементы, такие как размерность, данные, фильтрация, сортировка и количество данных, что удобно для пользователя.SQLОсновное использование пользователя. Взаимодействие пользователя во внешнем интерфейсе динамически генерируется в соответствии с определенными грамматическими правилами.SQLОтправлено в серверную часть для запросов к базе данных. Конечно в настоящее времяSQLФункциональность сборки не завершена, есть некоторыеSQLСинтаксис еще не поддерживается и уже находится в плане разработки.
2. Визуализируйте данные
Визуальный рендеринг данных в основном заключается в определении доступных типов диаграмм с помощью измерений и значений запроса данных, а затем с использованием динамических компонентов vue.js для рендеринга соответствующих компонентов диаграммы:
// Vue.js 动态组件渲染对应的图表类型
<component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />
Здесь проблема заключается в сопоставлении отношений между диаграммами и данными.Разные данные подходят для отображения на разных диаграммах.Например,данные круговой диаграммы отличаются от данных гистограммы с накоплением.Поэтому необходимо понимать структура данных, необходимая для каждой диаграммы. Чтобы определить:
// 这是饼图的匹配规则定义
matchRule: {
desc: '1个维度1个数值;0个维度多个数值',
isUsable(dimensions, calculs) {
return (dimensions.length === 1 && calculs.length === 1) || (dimensions.length === 0 && calculs.length >= 1)
}
},
Затем оцените, доступен ли тип диаграммы в соответствии с правилом сопоставления.
3. Сохранение диаграммы и эхо
После того, как внешний интерфейс сгенерирует диаграмму, ее можно сохранить во внутренней части.Поскольку для определения диаграммы требуется слишком много полей, и эти поля могут часто изменяться, серверная часть не может определить их. поля в базе данных одно за другим, поэтому решение, которое мы принимаем, заключается в том, что интерфейс поддерживает эти поля, а серверная часть единообразно сохраняет весь контент в поле базы данных в виде строки или объекта json (например,content)середина.
Таким образом, нет проблем с эхом графика.По логике построения графикаcontentСодержимое поля анализируется просто отлично.
4. Диаграммы, интегрированные в доски Канбан
Во многих случаях предприятиям необходимо просматривать несколько диаграмм одновременно, и в настоящее время для интеграции нескольких диаграмм необходима канбан-доска. Канбан на самом деле означаетDashboard, На самом деле, на китайский нет очень подходящего перевода, а Канбан едва передает смысл.
Канбан-интеграция нескольких диаграмм — это только управление ассоциациями в бэкэнде.Для внешнего интерфейса страница должна быть выложена в соответствии с диаграммами, связанными с доской Канбан, а затем данные могут быть запрошены и визуализированы визуально на основе сохраненных графики. Макет страницы в основном используетvue-grid-layoutпровестиgridМакет, но также поддерживает перетаскивание и изменение размера. Логика визуализации такая же, как и при создании диаграммы, поэтому повторяться не буду.
Возникшая здесь проблема заключается в том, как рассчитать положение новой диаграммы при добавлении новой диаграммы для доски Канбан с существующим макетом. На самом деле это чем-то похоже на проблему картинных водопадов, но из-за различныхitemНеопределенные ширина и высота на самом деле относительно сложнее.Я нашел идею и сделал некоторые расчеты, но она еще не идеальна.Я напишу статью, чтобы представить ее после того, как она будет усовершенствована.
5. Проблемы с доступом к данным
Данные компании на самом деле очень чувствительны. Для зарегистрированных на бирже компаний данные повлияют на динамику цен на акции. Для компаний, не зарегистрированных на бирже, это повлияет на ход инвестиций и финансирования. Это важные вопросы, связанные с финансами компании и даже жизнью и смерть, поэтому управление правами на данные очень важно. В этом проекте решение этой части не простое, но сложность в основном в бэкенде, а не во фронтенде. Проще говоря, наши полномочия находятся на уровне таблицы данных.Администратор добавляет источник данных в систему и в то же время определяет область полномочий источника данных, таких как продукт, операция, разработка и другие роли полномочий. После того, как пользователь входит в систему, администратор назначает пользователю роль разрешения, и пользователь может запрашивать только те данные, которые могут быть просмотрены соответствующей ролью. Так как части разрешений и управления источниками данных в этот опенсорсный проект пока не добавлены, не буду вдаваться в подробности, сначала копать ямку, а потом засыпать, когда будет возможность.
6. Другие технические моменты:
-
Во-первых, при построении проекта используется Vue-cli@3.0, в дополнение к конфигурации по умолчанию, через
vue.config.jsСделайте некоторую пользовательскую конфигурацию. Кроме того, есть еще настройка переменных окружения и т.д. Для настройки проекта рекомендуется обратиться к этой статье Пан Шена:Рука об руку, за кулисы с Vue Series 5 (новая версия v4.0) - Nuggets
-
Много использовано в проекте
icon,несмотря на то чтоElement UIизiconПосле версии 2.8.x было добавлено очень много, но это все еще не может удовлетворить наши потребности (некоторые часто используемыеiconЕще ничего, вроде сохранить) так что надо разбираться самомуiconЯ хотел бы поблагодарить дизайнера Рушана на iconfont за этот наборКрасивая библиотека иконок для визуализации данных. Что касается того, как икона элегантно удалось, вновь пожертвовал статью Бога:Из рук в руки, возьмите вас, чтобы элегантно использовать значок - Nuggets
-
Документ внутреннего интерфейса проекта - это то, что я использую
postmanНа самом деле, postman имеет много мощных функций, не только инструмент тестирования интерфейса, управление документами интерфейса является одной из них. При разработке я обычно запускаю два проекта одновременно, front-end и back-end.При локальной разработке я использую переменные окружения для определения адреса локального back-end интерфейса:const fetchInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API *}*)После того, как локальная разработка завершена, фронтенд упаковывается и выпускается в ветку gh-page (
git subtree push --prefix docs origin gh-pages), серверную часть можно развернуть одним щелчком мыши с помощью инструмента cli, предоставляемого Leancloud, что весьма удобно. Пакетный релиз фронтенда действительно можно настроить с помощью Travis-ci для достижения автоматического развертывания, я еще не настраивал (тут прокрастинирующие пациенты, отказавшиеся от терапии). -
Для авторизации входа в проект, добавления, удаления, модификации и проверки диаграмм и канбанов используются решения, предоставляемые Leancloud.
leancloudизjs-sdkПередний конец также может легко реализовать восстановление и углубление хранилища объектов, и ему не нужно писать задний интерфейс. Но для того, чтобы сохранить чистоту кода проекта, избегайте введения в код более быстрыхAV.queryТакого рода вещи, я до сих пор делаю внутреннюю часть сам, конечно, эта часть относительно проста, в конце концов, это всего лишь демо, в основном основанное наkoa.jsНекоторые из добавлений, удалений, изменений и проверок, которые я сделал, в основном относятся к программированию, ориентированному на документы. -
Управление состоянием в проекте используется
vuex, но на самом деле требований к управлению глобальным состоянием пока не много, только пользователиtokenсохранено вstoreвнутри. В дополнение к управлению состоянием я также пытался использовать простой режим управления состоянием Vue в части создания диаграммы этого проекта (код здесь), на Nuggets есть статья, в которой представлен этот режим:Использовать этот паттерн не проблема, он очень полезен для сложных компонентов в больших проектах и очень удобен для решения проблемы разделения состояния внутри сложных компонентов. Но к моему проекту в данный момент это не особо применимо, потому что эта часть управления состоянием подходит и для глобального состояния.Конечно, тут вопрос мнения, я думаю, что пока это хорошо.
наконец
Основные функции этого проекта в настоящее время завершены, а некоторые функции еще не завершены, и они будут постепенно улучшены на более позднем этапе. Кажется, что в отечественном сообществе не так много дискуссий о платформе визуализации анализа данных.Большинство дискуссий на китайском языке посвящено дизайну и внедрению продукта, которые слишком идеальны и могут быть непросты в реализации на практике.Обсуждений не так много по технической реализации (когда и тогда Есть еще много аспектов терминала и эксплуатации и обслуживания), и проектов с открытым исходным кодом не так много, поэтому я провел некоторые исследования в этом проекте.Конечно, у меня нет большого опыта. Хотя я имею в виду дизайн взаимодействия продуктов нескольких коммерческих платформ, есть много мест. Все дело в том, чтобы пересечь реку, чувствуя камни, и в некоторых местах должны быть лучшие решения. Я надеюсь, что этот мой проект может стать источником вдохновения. , и я надеюсь, что каждый может дать больше мнений.
P.S. Чтобы вам не приходилось ходить туда-сюда, если вы хотите отметиться звездочкой, адрес проекта будет опубликован снова: