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

Несколько лет назад я решил начать создавать скелетные загрузочные компоненты для всех моих компонентов React. (См. Статью https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a для получения дополнительной информации о состояниях загрузки скелета в частности.) Состояния загрузки скелета также стали ощущаться как отличное место иметь точки расщепления кода. Для создания некоторых из моих компонентов требовалось много кода, поэтому использование облегченного каркаса уменьшило размер основного пакета моих приложений. Особенно это касалось компонентов графической визуализации данных.

В этой статье я хочу поделиться методом, который я использовал для создания легких, но значимых состояний загрузки скелета для визуализаций данных, в частности визуализаций, созданных с использованием SVG. Чтобы использовать конкретный пример, я расскажу, как это сделать, используя диаграмму рассеяния и библиотеку React, которая обертывает D3, под названием react-vis.

Вот как в конечном итоге будет выглядеть наша диаграмма рассеяния.

Когда я впервые начал думать и исследовать решения проблемы создания каркаса для сложных визуализаций данных, у меня возникло несколько мыслей мозгового штурма. Я подумал: «Я мог бы просто повторно использовать свой компонент диаграммы и передать некоторые фальшивые данные в реквизиты, которые будут очень похожи на то, как может выглядеть заполненная данными диаграмма». Или «Я мог бы просто найти красивый значок диаграммы рассеяния и создать красивый скелет, который словами или картинкой рассказывает, какими могут быть окончательные компоненты и данные». Но у обоих этих решений были довольно серьезные проблемы. Первый потребовал бы, чтобы я по-прежнему включал большое количество кода в основной пакет и не получал бы выгоды от разделения кода. Второй вариант не так полезен для конечного пользователя.

«Итак, - подумал я, - есть ли способ получить лучшее из обоих миров? Что-нибудь легкое и визуально описывающее, как будут выглядеть компонент + данные? »

Решение

Потом лампочка погасла! Раньше я пытался извлечь SVG-визуализации в виде статических изображений и вспомнил, что были некоторые инструменты, которые я использовал (в частности, расширение браузера), которые находили SVG на странице и извлекали его как изображение. Это казалось очень многообещающим! Как оказалось, это было не лучшее окончательное решение, но оно было близким!

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

Следующим шагом было извлечение SVG. Это было просто, и в итоге я не использовал никаких других инструментов. Я открыл инструменты Chrome dev, нашел элемент SVG и скопировал его в буфер обмена своего компьютера.

После того, как я скопировал элемент SVG, я перешел на игровую площадку svgr веб-приложения. Этот инструмент »преобразует код SVG непосредственно в компонент React. Я скопировал результат преобразования в React и вставил его в файл в своем приложении.

В этом примере (и в моих реальных приложениях) я использую React.Suspense и React.lazy для ленивой загрузки фактического компонента, и я использую этот извлеченный код SVG в качестве «запасного» компонента для Suspense. Основная цель этой статьи - не объяснять, как использовать Suspense или lazy, но конкретная реализация будет включена в ссылку codeandbox в конце статьи.

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

Поскольку сейчас мы лениво загружаем код, необходимый для создания диаграммы, мы экономим чуть более 300 КБ (без g-zip) в нашем основном пакете! Мы сократили размер пакета на 64%, не включив react-vis и D3 до тех пор, пока это необходимо, И у нас есть значимое состояние загрузки скелета, которое может дать конечному пользователю отличное представление о том, как в конечном итоге будут выглядеть его данные после загрузки!

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

И последний совет - мы также можем установить высоту и ширину на 100%, установить для окна просмотра фактический размер сгенерированного SVG и preserveAspectRatio=”none”, чтобы статический SVG немного реагировал. Это не идеально, потому что это приведет к растяжению содержимого диаграммы, если область просмотра, в которой она отображается, значительно отличается от фактических размеров диаграммы, поэтому необходимо сделать некоторые статические догадки и предположения. Я не уверен на 100%, как решить эту проблему, поэтому, если у вас есть какие-либо идеи, я хотел бы их услышать! Пока что для меня это не было большой проблемой ни в одном из моих приложений.

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

Пример в коде

Чтобы увидеть полный пример - см. Этот кодовый ящик. Https://codesandbox.io/s/exciting-colden-2fpcu