От автора: в этом руководстве мы с нуля создадим образец финансовой информационной панели и в процессе узнаем немного о CSS-сетке, KendoReact и темизации. Финансовые приложения сложны. Как правило, они имеют дело с кучей данных, и отображение этих данных важно для того, чтобы сделать ваших пользователей счастливыми.
В этой статье мы создадим пример финансовой панели в три этапа. Во-первых, вы создадите макет панели и узнаете немного о синтаксисе CSS-сетки. Затем вы добавите компоненты пользовательского интерфейса из KendoReact, библиотеки пользовательского интерфейса, которая позволяет легко отображать данные в диаграммах, сетках и т. д. И, наконец, вы узнаете, как настроить панель, в том числе как ее обрабатывать, и как настроить компоненты KendoReact в соответствии с вашими требованиями.
Когда мы закончим, у нас будет информационная панель, которая выглядит следующим образом.
Давайте начнем!
ДОПОЛНИТЕЛЬНО: Если вы хотите писать код параллельно с этой статьей, вам нужно клонировать репозиторий этой статьи на GitHub и переключиться на его ветку. Вы можете сделать это, выполнив следующий набор команд в терминале или командной строке.
git clone https://github.com/tjvantoll/financial-dashboard.git cd financial-dashboard git checkout start
Шаг 1: Создание первоначального макета
Как и в большинстве крупных проектов по разработке программного обеспечения, хорошей идеей является планирование перед тем, как непосредственно приступить к написанию кода панели инструментов. В этом разделе мы начнем с быстрого ознакомления с макетом нашей панели, а затем рассмотрим, как создать этот макет с помощью CSS.
Построение каркаса
Каркас — это визуальное представление того, как будет выглядеть ваше конечное приложение. Важно иметь некоторое представление о приложении до того, как вы начнете кодировать, но каркас не отображает каждую конечную функцию и не требует разработки профессионального дизайна.
В качестве примера, вот эскиз, который я создал в Balsamiq для информационной панели этой статьи.
Из этого каркаса видно, что наш образец имеет заголовок и четыре отдельные панели, которые я пометил на рисунке ниже.
Основная цель каркаса — дать вам перед началом кодирования общее представление о том, как расположить элементы в приложении. Например, поскольку я знаю, что в моем приложении будет четыре панели, я создал в стартовом коде примера приложения четыре стандартных компонента. Вы можете просмотреть их в папке приложения src/panels.
Позже в этой статье мы начнем реализовывать эти панели с помощью кода пользовательского интерфейса, но сначала давайте создадим макет этого приложения с помощью CSS.
Реализация макета с помощью CSS
В настоящее время существует множество способов компоновки приложения с помощью CSS. Одним из наиболее распространенных подходов является использование фреймворков, таких как Bootstrap, который предоставляет различные имена классов, чтобы помочь разделить пользовательский интерфейс на ряд строк и столбцов.
Например, вы можете создать макет Bootstrap с тремя столбцами, используя следующую разметку.
<div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div>
Хотя это работает, лично я не большой поклонник такого подхода в больших приложениях, таких как информационные панели. Реальные приложения, как правило, усложняются очень быстро, и, прежде чем вы это поймете, в разметке возникнет путаница с именами классов, которые трудно расшифровать.
Из-за этого я предпочитаю размещать информационные панели, используя только CSS. Чтобы увидеть, как это выглядит, взгляните на файл вашего образца src/Dashboard.tsx, который содержит разметку четырех панелей.
<div className="panels"> <div className="panel-info"> <InfoPanel /> </div> <div className="panel-allocation"> <AllocationPanel /> </div> <div className="panel-balance"> <PerformancePanel /> </div> <div className="panel-positions"> <PositionsPanel /> </div> </div>
Наша задача — взять эту разметку и сделать ее похожей на наш каркас, который в качестве напоминания выглядит следующим образом.
Для этого откройте файл src/styles/_layout.scss и замените его содержимое следующим кодом.
.panels > div { // Add a black border around each panel for debugging border: 1px solid black;
} .panels { display: grid; grid-gap: 10px; grid-template-columns: 225px auto auto; grid-template-rows: auto auto;
}
.panel-info { grid-row: span 2;
}
.panel-positions { grid-column: span 2;
}После добавления этого кода зайдите в терминал или командную строку и выполните npm run start, что запустит ваше приложение React в браузере. Когда это будет сделано, вы должны увидеть интерфейс, который выглядит следующим образом.
Синтаксис, который мы здесь используем, называется макетом сетки CSS, и сегодня он потрясающе поддерживается веб-браузерами.
Что делает CSS сетку привлекательной, так это ее краткость. Вместо того, чтобы загромождать разметку множеством имен классов, вы получаете мощный способ разделения пользовательского интерфейса на строки и столбцы.
Сетка CSS также позволяет сделать панели адаптировными. Чтобы увидеть это в действии, добавьте следующий фрагмент CSS в файл src/styles/_layout.scss.
@media (max-width: 750px) { .panels { grid-template-columns: 225px auto; grid-template-rows: auto auto auto; } .panel-positions { grid-column: span 2; }
} @media (max-width: 500px) { .panels { grid-template-columns: auto; } .panel-positions { grid-column: span 1; }
}Этот код переориентирует сетку, когда экран пользователя становится меньше. Например, при 750px контейнер .panels переходит с использования трех колонок (grid-template-columns: 225px auto auto) на две (grid-template-columns: 225px auto). А затем при 500px этот контейнер сокращается до использования одной колонки (grid-template-columns: auto), так что все панели приложения располагаются друг над другом.
Вы можете увидеть, как это выглядит на GIF ниже.
И мы это сделали! Сетка CSS действительно упрощает настройку макета информационной панели, и при этом не загромождает разметку. Теперь, когда у нас есть макет, давайте рассмотрим добавление некоторых компонентов пользовательского интерфейса.
Шаг 2. Добавление компонентов пользовательского интерфейса
Часто наиболее сложной частью создания информационной панели является поиск высококачественных компонентов пользовательского интерфейса. Мир React велик, поэтому, к счастью, существует множество компонентов, но информационным панелям часто требуется широкий набор элементов управления, и попытка создать пользовательский интерфейс из разнородного набора компонентов со всего Интернета может стать большой проблемой.
Вот где на помощь приходит KendoReact. KendoReact предлагает более 80 компонентов пользовательского интерфейса, которые работают без сбоев, так что вы будете уверены, что ваши диаграммы будут соответствовать DatePicker, а DropDownList будет выглядеть как календарь — без какой-либо дополнительной работы. Кроме того, компоненты являются модульными, поэтому вы можете использовать только те компоненты, которые вам нужны, не раздувая приложения.
Наше приложение информационной панели имеет четыре панели, каждая из которых имеет свою реализацию в файле в папке приложения src/panels. В этом разделе мы реализуем компонент KendoReact в каждом файле, чтобы вы могли понять, как работает библиотека.
Работа с PanelBar
PanelBar — это компонент пользовательского интерфейса, который отображает иерархические данные в виде ряда панелей. Типичный PanelBar выглядит примерно так.
Давайте посмотрим, насколько легко KendoReact позволяет использовать PanelBar. Сначала вам нужно установить пакет компонента из npm. Для PanelBar это означает выполнение следующей команды в терминале или командной строке.
npm install kendo-react-layout
Далее вам необходимо импортировать компонент в код. Чтобы сделать это в примере, откройте файл src/panels/InfoPanel.tsx и обратите внимание на импорт, уже включенный в начале файла.
import { PanelBar, PanelBarItem } from "@progress/kendo-react-layout";Далее, обратите внимание, что InfoPanel.tsx содержит некоторый предварительно заполненный код для извлечения данных, и он сохраняет эти данные в константе с именем fundInfo. Чтобы использовать эти данные, замените существующую разметку компонента <h2>Info Panel</h2> приведенным ниже кодом.
<PanelBar> <PanelBarItem expanded={true} title="Fund Managers"> <div> {fundInfo && fundInfo.managers.map((item, idx) => ( <div className="manager" key={idx}> <img src={`/team/${item.firstName}${item.lastName}.png`} alt={item.firstName + ' ' + item.lastName} /> <span className="manager-info"> <h2>{item.firstName + ' ' + item.lastName}</h2> <p>{item.position}</p> </span> </div> ))} </div> </PanelBarItem>
</PanelBar>После сохранения этого изменения вам потребуется снова запустить приложение, выполнив в терминале или командной строке npm run start. После этого вы должны увидеть сворачиваемую панель.
Обратите внимание, как легко было реализовать PanelBar. Все, что вам нужно было сделать, это установить пакет npm, импортировать компонент и использовать его документированные API.
На сайте KendoReact есть множество примеров для каждого компонента, в том числе несколько различных параметров настройки PanelBar, поэтому каждый компонент легко адаптировать к вашим потребностям.
Но настоящая сила KendoReact заключается в согласованности, которую обеспечивает библиотека, когда вам нужно использовать широкий спектр компонентов в одном приложении. Чтобы увидеть это в действии, давайте добавим еще несколько компонентов.
Работа с Chart
Диаграммы и графики, пожалуй, являются наиболее распространенными компонентами пользовательского интерфейса в любой информационной панели, особенно финансовой. Чтобы удовлетворить эту потребность, KendoReact предоставляет невероятно обширную библиотеку диаграмм с поддержкой всего, от базовых линейных, столбчатых и круговых диаграмм, до более специализированных диаграмм, таких как блочные диаграммы, точечные диаграммы, последовательности и многое другое.
В этом разделе мы реализуем две разные диаграммы, чтобы вы могли видеть, насколько прост процесс и насколько хорошо компоненты KendoReact работают вместе.
Если вы помните из предыдущего раздела, наш первый шаг к использованию любого компонента KendoReact — это установить его с npm. Имея это в виду, продолжайте и выполните приведенную ниже команду, чтобы установить в приложении пакет KendoReact Chart.
npm install kendo-react-charts
Затем вам нужно импортировать компонент Chart в код. Если вы откроете файл src/panels/AllocationPanel.tsx, вы увидите следующий набор импортов в верхней части.
import { Chart, ChartLegend, ChartSeries, ChartSeriesItem, ChartSeriesLabels, ChartTitle, ChartTooltip
} from "@progress/kendo-react-charts";Обратите внимание, что пакет Chart содержит ряд модульных компонентов. Также обратите внимание, что файл AllocationPanel.tsx содержит код для извлечения данных и сохранения их в константе data.
Чтобы использовать эти данные в диаграмме, замените разметку файла AllocationPanel.tsx <h2>Allocation Panel</h2> приведенным ниже кодом, который отображает данные файл в компоненте KendoReact Chart.
<Chart> <ChartTitle text={"Asset Allocation"}></ChartTitle> <ChartSeries> <ChartSeriesItem type="donut" data={data}> <ChartSeriesLabels content={e => `${e.value}%`} background="none" color="#fff" /> </ChartSeriesItem> </ChartSeries> <ChartLegend position={"bottom"} visible={true} /> <ChartTooltip render={(e: any) => ( <div>{e.point ? e.point.category : ""}</div> )} />
</Chart>После того, как вы сохраните файл с этим кодом, вы должны увидеть в приложении новую таблицу круговых диаграмм.
Опять же, обратите внимание, насколько просто было добавить этот компонент — все, что вам нужно, это установить пакет npm, импортировать компонент и использовать некоторые API. И в качестве бонуса, ваша диаграмма автоматически имеет стиль, соответствующий другим компонентам на странице.
Чтобы рассмотреть это подробнее, давайте добавим вторую диаграмму к этому образцу приложения. Для этого откройте файл src/panels/PerformancePanel.tsx и замените разметку <h2>Performance Panel</h2> приведенным ниже кодом.
<Chart> <ChartTitle text="Fund Performance" /> <ChartCategoryAxis> <ChartCategoryAxisItem categories={["2014", "2015", "2016", "2017", "2018", "2019", "2020"]} /> </ChartCategoryAxis> <ChartSeries> <ChartSeriesItem type="line" data={data} /> </ChartSeries> <ChartTooltip render={renderTooltip} />
</Chart>Когда ваше приложение обновится, вы должны увидеть новую линейную диаграмму в третьей панели приложения.
Еще раз, сила KendoReact в том, насколько легко он позволяет добавлять мощные графики.
Как и в случае с PanelBar, вы можете легко настроить диаграммы KendoReact для потребностей вашего бизнеса, будь то добавление возможности экспорта в PDF или SVG, предоставление пользователям возможности панорамирования и масштабирования, добавление поддержки интернационализации и многое другое.
И этот уровень настройки применяется ко всем компонентам KendoReact, включая наш самый популярный компонент — сетку.
Работа с Grid
Сетка KendoReact обеспечивает всеобъемлющий набор способов работы с данными. В своей основной форме сетка предоставляет элегантный способ отображения данных в таблице с поддержкой таких функций, как разбиение по страницам, сортировка, фильтрация, редактирование, группировка и т. д.
Вы можете добавить дополнительные функции, такие как экспорт PDF, экспорт в Excel, фиксация столбцов, изменение размера столбцов и Виртуализованная прокрутки, или вы можете придерживаться базового функционала.
В этом разделе мы познакомимся с основами, чтобы вы могли увидеть, насколько легко можно добавить сетку в ваши приложения и насколько хорошо Grid работает с другими компонентами KendoReact.
Вы можете начать с установки сетки, а также ее зависимостей из npm, для чего нужно выполнить следующую команду в терминале или командной строке.
npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing
Затем откройте файл src/panels/PositionsPanel.tsx и обратите внимание, что импорт сетки уже отображается сверху.
import { Grid, GridCellProps, GridColumn } from "@progress/kendo-react-grid";Файл также содержит некоторые данные в константе positions. Чтобы использовать их, замените разметку файла <h2>Positions Panel</h2> следующим кодом.
<Grid data={positions} style={{ height: 700 }}
> <GridColumn title="Symbol" field="symbol" locked={true} width={100} /> <GridColumn title="Name" field="name" /> <GridColumn title="Change" field="day_change" /> <GridColumn title="% Change" field="change_pct" /> <GridColumn title="Volume" field="volume" /> <GridColumn title="Market Cap" field="market_cap" />
</Grid>Когда ваше приложение обновится, вы должны увидеть сетку в нижней панели приложения.
В этом разделе мы добавили три различных компонента пользовательского интерфейса — PanelBar, Chart и Grid — но тот же шаблон применим к более 80 комплектам компонентов, которые предлагает KendoReact.
И это действительно самое большое преимущество использования KendoReact, особенно в сложных приложениях, таких как финансовые панели. И вы можете быть уверены, что ваши компоненты выглядят согласованно.
Но в реальных приложениях часто возникают проблемы, выходящие за рамки того, что может предложить любая сторонняя библиотека пользовательского интерфейса из коробки. Имея это в виду, давайте рассмотрим несколько других вещей, которые вы можете сделать, чтобы настроить приложения.
Шаг 3: Настройка интерфейса
Панели мониторинга являются сложными, и реальные финансовые приложения должны справляться с головокружительным набором требований, которые постоянно меняются. Поэтому важно, чтобы любые используемые вами инструменты могли быть настроены в соответствии с вашими меняющимися потребностями.
На первом этапе мы использовали макет CSS-сетки, поскольку он предоставляет гибкий способ размещения блоков панели инструментов без использования HTML. В этом разделе мы рассмотрим несколько способов настройки самих компонентов пользовательского интерфейса KendoReact, что даст вам возможность удовлетворить бизнес-требования без написания грязного кода.
Точки расширения
KendoReact предоставляет несколько API расширения, позволяющих настраивать отображение компонентов. Это наиболее полезно для сложных компонентов, так как часто вы хотите настроить часть компонента без необходимости переписывать его целиком.
Это лучше рассмотреть на примере. Обратите внимание на текущее состояние сетки в нашем примере.
Предположим, вы получили новое бизнес-требование: вам нужно обновить столбцы Change и % Change, чтобы положительные числа отображались зеленым текстом, а отрицательные столбцы — красным. Прежде чем мы рассмотрим это, давайте разберем код, который отображает сетку.
<Grid data={positions} style={{ height: 700 }}
> <GridColumn title="Symbol" field="symbol" locked={true} width={100} /> <GridColumn title="Name" field="name" /> <GridColumn title="Change" field="day_change" /> <GridColumn title="% Change" field="change_pct" /> <GridColumn title="Volume" field="volume" /> <GridColumn title="Market Cap" field="market_cap" />
</Grid>Сторонние компоненты пользовательского интерфейса имеют тенденцию абстрагироваться от базового DOM. Это обычно желательно — в конце концов, писать Grid и GridColumn гораздо проще, чем писать беспорядочные table tbody tr td. Но иногда вам нужно контролировать то, что происходит.
Именно здесь на помощь приходят точки расширения, и KendoReact предоставляет многие из них, чтобы помочь вам решить реальные проблемы, подобные этой. Для данного конкретного сценария KendoReact GridColumn предоставляет свойство grid. Чтобы использовать его, начните с поиска этих двух GridColumn в файле src/panels/PositionsPanel.tsx.
<GridColumn title="Change" field="day_change" /> <GridColumn title="% Change" field="change_pct" />
И измените их, используя следующую разметку.
<GridColumn title="Change" field="day_change" cell={ChangeCell} />
<GridColumn title="% Change" field="change_pct" cell={ChangeCell} />Затем добавьте следующую константу в начало того же файла (чуть ниже операторов import).
const ChangeCell = (props: GridCellProps) => { const value = props.dataItem[props.field || ""]; return ( <td style={{ color: value > 0 ? "green" : "red" }}> {value}% </td> )
}Благодаря свойству cell KendoReact дает вам возможность настроить способ визуализации отдельной ячейки. В этом случае вы используете API, определяя небольшой компонент ChangeCell, который отображает ячейку таблицы с зеленым или красным текстом в зависимости от значения элемента данных.
После сохранения этого изменения вы должны увидеть в браузере следующее.
Самое замечательное в этом коде то, что вы смогли настроить небольшую часть пользовательского интерфейса — в данном случае визуализацию отдельной ячейки сетки — без необходимости переписывать компонент.
А поскольку этот подход очень эффективен и удобен для разработчиков, это шаблон, который мы предоставляем в KendoReact. Если вы хотите увидеть больше примеров, посмотрите документацию для TreeList или документацию для Планировщика, поскольку в них предоставлены некоторые из лучших примеров того, насколько легко KendoReact позволяет настраивать расширенные компоненты пользовательского интерфейса.
Прежде чем закончить, давайте рассмотрим еще одну распространенную проблему при работе с большими приложениями, такими как информационные панели: темизацию.
Темизация
Немногие разработчики пишут информационные панели без каких-либо рекомендаций по дизайну. Чаще всего вы начинаете проект панели инструментов с заданной спецификации проекта или с внутренней системы проектирования, которой вы должны соответствовать.
Чтобы удовлетворить эти потребности, KendoReact предлагает ThemeBuilder, который предоставляет единое место для настройки внешнего вида всех компонентов пользовательского интерфейса.
Для начала вам нужно выбрать одну из трех базовых тем KendoReact, чтобы использовать их в качестве отправной точки.
Затем вам нужно настроить различные цвета в ThemeBuilder в соответствии с вашими требованиями к дизайну или выбрать один из предварительно сконфигурированных образцов цвета, используя блок в левой части экрана.
Когда все будет готово, следуйте инструкциям документации KendoReact по импорту пользовательской темы в проект. Например, вот как будет выглядеть ваша панель инструментов, если вы выполните эти шаги и добавите образец темного цвета по умолчанию без каких-либо дополнительных настроек.
В целом, KendoReact дает вам массу возможностей настроить внешний вид виджетов в соответствии с потребностями. И вы можете сделать больше, чем просто настроить цвета.
Заключение
Информационные панели сложны, особенно финансовые панели, но в этой статье вы изучили ряд методов, облегчающих их создание.
Во-первых, вы узнали о CSS-макете сетки, новом синтаксисе CSS, который облегчает создание и поддержку сложных макетов, типичных для сеток.
Затем вы узнали о KendoReact, мощном наборе компонентов пользовательского интерфейса, которые позволяют легко решать задачи пользовательского интерфейса, характерные для панелей мониторинга, такие как работа с диаграммами и сетками.
И, наконец, вы узнали, как настроить элементы управления KendoReact, а также тему информационной панели в соответствии с потребностями вашего приложения.
Автор: TJ VanToll
Источник: https://www.telerik.com
Редакция: Команда webformyself.