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

Мне пришла в голову идея, которая сочетает мой финансовый опыт с навыками программирования, которым я научился, чтобы создать веб-приложение для информации о финансовых рынках. Если вы заинтересованы, пожалуйста, перейдите на мой сайт для деталей. »Сайт моего проекта на Heroku: https://financial-panel-project.herokuapp.com/

Изначально я планировал несколько элементов, которые я должен включить в свое приложение:

Домашняя страница

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

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

Echarts : бесплатная мощная библиотека диаграмм и визуализаций, предлагающая простой способ добавления интуитивно понятных, интерактивных и настраиваемых диаграмм в ваши коммерческие продукты. Он написан на чистом JavaScript и основан на zrender, совершенно новой облегченной библиотеке холста. В настоящее время он получил 31 995 звезд от Github и содержит множество причудливых диаграмм. Тем не менее, мы, как разработчик React и Redux, можем использовать неофициальную библиотеку, созданную несколькими разработчиками, которые предоставляют оболочку компонента React для Echarts. Если вам интересно, перейдите на официальную страницу GitHub: https://github.com/apache/incubator-echarts.

D3.js: библиотека JavaScript для визуализации данных с использованием веб-стандартов. D3 помогает оживлять данные с помощью SVG, Canvas и HTML. D3 сочетает в себе мощные методы визуализации и взаимодействия с управляемым данными подходом к манипулированию DOM, предоставляя вам все возможности современных браузеров и свободу разработки правильного визуального интерфейса для ваших данных. В настоящее время он получил 81 468 звезд от Github. D3.js — зрелая библиотека, но единственная проблема заключается в том, что D3.js или React контролируют, какое представление должно отображаться? Она была решена умными разработчиками и несколькими выпускниками Fullstack, мы могли бы легко найти ответ на Youtube или Google. Моя рекомендация — сначала понять, что такое SVG, а затем реализовать одну небольшую диаграмму самостоятельно. Если вам интересно, перейдите на официальную страницу GitHub: https://github.com/d3/d3

React-vis: набор компонентов React для отображения общих диаграмм визуализации данных, таких как линейные/областные/гистограммы, тепловые карты, диаграммы рассеяния, контурные диаграммы, шестиугольные тепловые карты, круговые и кольцевые диаграммы, солнечные лучи, радиолокационные карты, параллельные координаты и древовидные карты.

Некоторые примечательные особенности:

  • Простота. react-vis не требует глубоких знаний библиотек визуализации данных, чтобы начать создавать свои первые визуализации.
  • Гибкость. react-vis предоставляет набор основных строительных блоков для различных диаграмм. Например, отдельные компоненты осей X и Y. Это обеспечивает высокий уровень контроля макета диаграммы для приложений, которые в нем нуждаются.
  • Простота использования. Библиотека предоставляет набор значений по умолчанию, которые можно переопределить пользовательскими настройками.
  • Интеграция с React. react-vis поддерживает жизненный цикл React и не создает ненужных узлов.

В настоящее время он получил 4871 звезду от Github, и, как упоминалось выше, это легкая библиотека, которая работает с React напрямую и служит компонентом. Кроме того, он служит инструментом визуализации данных для Uber. Если вам интересно, перейдите на официальную страницу GitHub: https://github.com/uber/react-vis

Прочитав официальный документ для трех разных библиотек, я решил использовать react-vis для реализации моей древовидной карты в проекте финансовой панели.

Поиск акций

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

Чтобы реализовать диаграмму для отдельной акции, я изучил API многих свечных диаграмм, но хочу поделиться с вами самой удобной и отзывчивой диаграммой, которую я использовал в своем приложении — React-StockChart.

React-StockChart, недавно разработанная библиотека, все еще нуждается в обновлениях, но она предоставляет функции, которые удовлетворяют все мои потребности. Он построен с использованием D3.js и React, который обрабатывает конфликт между D3.js и React за нас. Кроме того, пользователь может настраивать функции на своих графиках, например, добавлять функцию точки мыши, чтобы продемонстрировать цену и дату для точки, на которой в данный момент находится указатель мыши. Как показано на рисунке выше, акции BABA на 27 сентября 2018 года стоили 139,15 доллара. Если вы заинтересованы, перейдите на официальную страницу GitHub: https://github.com/rrag/react-stockcharts.

Валюта

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

Криптовалюта

Предоставьте пользователю информацию о текущем курсе обмена криптовалюты с долларом США, а также кнопку для отображения справочной таблицы криптовалюты.

Наконец, небольшое выпадающее меню, называемое страницей портфолио, в правом углу панели навигации, которое содержит ссылку на мой личный веб-сайт, на мой LinkedIn, мой Github и т. д.

Я попытался добавить значки для раскрывающегося списка панели навигации, однако пакет значков шрифта Awesome дает нам ограничение: я могу получить только определенные значки, такие как кофе, с бесплатным членством. А вот и решение, пакет react-social-icons npm, созданный с использованием React и выступающий в качестве компонента ‹SocialIcon /›. Пользователь добавляет к этому компоненту реквизит URL, и он применяет соответствующий значок. Например, пользователь предоставляет URL-адрес с github.com, и в представлении появляется значок GitHub. Если вы заинтересованы, перейдите на официальную страницу NPM: https://www.npmjs.com/package/react-social-icons.

Данные

Подождите, после всех представлений пакетов API, откуда берутся данные?

После прекращения поддержки Yahoo Finance API в 2017 году все пытаются найти альтернативу для перехода. Для этого проекта Alpha vantage API служил ресурсом для предоставления данных в формате JSON. Однако из-за ежедневного ограничения запросов API для бесплатных пользователей 500, мой проект может не получить данные после превышения максимального количества ежедневных запросов.

UI

React-Bootstrap применялся ко всем представлениям. Это просто реактивная версия бутстрапа, которая оборачивает различные элементы в компонент.

Резюме

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

React, Redux, React-Vis, React-StockCharts, React-Bootstrap, React-SocialIcon, Font-awesome, D3.js, Stock.js, Heroku, Boilermaker (из академии Fullstack).

Спасибо, что потратили время на прочтение моего поста, пожалуйста, не стесняйтесь комментировать, и я отвечу вам как можно скорее.