Responsive UI

The example application UI is responsive to the screen size. On the computer screen, it displays all the top navigation menus and sidebar menus (see Figure 8-1). When running on mobile devices, the top navigation menus are collapsed inside the hamburger menu at the top right of the screen; the sidebar menus are also collapsed to a row of icon menus (see Figure 8-2).

The responsive layout of the top navigation comes from the SPA boilerplate out of the box. We will create the side navigation menus in the “Sidebar Menu” section of this chapter. Also, we will create the side navigation menus based on an array contains the data that represents the menus dynamically.

Dashboard Widgets

The main content area of the home page has various kinds of widgets to visualize the data. There are widgets such as key performance indicator (KPI) cards, several types of notification/altering messages, a chart, and a map, as you can see from Figure 8-1 and Figure 8-2. There are also a data table widget and a widget calendar in the main content area.

The data table widget displays an example of an employee list. The data is loaded dynamically from a JSON file, which includes the employee’s name, position, office location, age, start date, and salary as a data table. The data table has many features commonly used in line-of-business applications, such as it is configurable to the number of rows, searchable/filterable, and sortable. It also includes the pagination for the list (see Figure 8-3).

The calendar widget in the example application displays several events for July 2018. The event data is stored in an array. It is also a feature-rich widget. We can view the events in other years and months, and we can view the events monthly, weekly, or daily. Each event has a hyperlink that leads to the event’s detail screen (see Figure 8-4).

Third-Party Libraries

The dashboard specification can be overwhelming the first time you look at it. The layout is complicated. The widgets are a variety of types, such as KPIs, alerts, charts, maps, data tables, and calendars. Creating all the widgets from scratch is impossible. Our plan of attack is to use the third-party libraries as much as possible.

The good news is that the development community has developed many libraries for pretty much everything, from page layout to data visualization widgets. There is probably a JavaScript library out there for anything you can think of. There is no need to re-invent the wheel. The framework we use to develop applications should always integrate easily with other libraries.

Sidebar Menu

The Menu component supports nested child menus. It checks whether one menu item has child menus (line 2). If there are child menus, it creates the child menu structure (lines 3–11). Otherwise, it creates the regular menu item (lines 12–17).

The Bootstrap classes to make the menu responsive are flex-lg-column and flex-row (line 1). This means the menus should be displayed vertically in a column on a large screen. Otherwise, the menus should be displayed horizontally in a row. You can see that the Bootstrap classes are declarative. They clearly express our intention.

Rows and Columns

The Row and Column components are the <div> elements that have Bootstrap row and col classes. Both the Row and Column components have input parameters called props and children. The props parameter contains the JSX tag properties. The children parameter contains the child JSX tags, which are called by the two components directly without modification.

By using the props parameter, the two components accept additional CSS classes. The mergeClassName function is used to merge the additional CSS classes with the basic CSS classes. For example, <Row className="my-4" /> adds the my-4 class to the row. By the way, my-4 is the Bootstrap 4 spacing utility class that adds top and bottom margins to the row.¹

Allowing the ability to add more classes to the stateless component is such a useful feature that we will demonstrate it again when discussing the notification and alert components.

Notifications and Alerts

It feels natural to add extra classes to the Alert component to define the message type by using the props parameter and the mergeClassName function.

Next, we will demonstrate another technique of using the props parameter in the Card component.

Cards

The CardList component is a row in the widget area (line 2). It also organizes the KPI cards responsively using the CSS classes col-sm-4 and col-lg-2. When creating the Card component, the contents of the card (some emphasized text and some muted text) are passed into the Card component as the children parameters (lines 4–10).

So far, we have created AppRun stateless components in a top-down fashion to manage the UI complexity. We have also demonstrated how to use the props and children parameters. We encourage you to visit the open source project at https://github.com/yysun/apprun-bootstrap to get many AppRun components for Bootstrap. There is also an open source project that has the AppRun components: Framework7 ( https://framework7.io ) is a CSS framework for developing mobile applications; see https://github.com/yysun/apprun-f7 .

Chart

We will follow one of the examples from the Chart.js web site that generates three random datasets and displays them as a bar chart and line chart for the admin dashboard.² We will also put the chart inside a card (see Figure 8-6).

The Chart component pattern renders the <canvas> node in the view function (line 5). It then creates the Chart object in the rendered function (line 9). That’s all that’s needed to create the structure of a Chart component. The rest of work is to follow the Chart.js document to develop the data structure to the charts.

Comparing Listing 8-11 with Listing 8-10, you will notice that you can plug the Chart.js code into the AppRun component to create the state (lines 7–17 and lines 19–92). The state is used to create the chart in the rendered function (line 99). The only difference is that the view function wraps the <canvas> node with a Card component (lines 93–95).

Adding a Card component to the chart is a particular requirement of the example application of this chapter. You can use the pattern (Listing 8-10) out of the box without adding the Card component. On the other hand, you can follow this example to add other elements or components if needed.

D3 Map

We will use D3.js to create an interactive map using SVG, in which every country is an SVG element that can react to the mouse hovering over it to show the highlighted color. Each country graphic also has a county code attached to it. When the country graphic is clicked, we display the country code in the card header (see Figure 8-7).

The Map component uses the AppRun D3 pattern in Listing 8-12, which uses the rendered function and the mounted and view functions to integrate D3.js. It is quite amazing that we can draw an interactive map by using only 30 lines of code (lines 12–41).

Data Tables

HTML tables are the commonly used way to visualize tabular data, especially in business applications. We will use DataTables, a jQuery plug-in to create the HTML table that has advanced interaction such as pagination, search, and sort (see Figure 8-8).

The Table component loads the table data from the table-data.json file (line 2). It renders the regular HTML table in the view function (lines 6–27). In the rendered function, it applies the DataTables plug-in to the HTML table (lines 28–31).

You can see it is a simple approach to add search, sort, and pagination to the HTML table by using the DataTables jQuery plug-in.

Calendar

The calendar is a UI feature that is no less complicated than the data tables. Most likely, you will not write a calendar from scratch for your applications because the FullCalendar library has implemented many calendar features for us already. Here, we will integrate FullCalendar into the AppRun application by creating a Calendar component (see Figure 8-9).

FullCalender is also a jQuery plug-in. We can use the same method used for the DataTables to create the Calendar component. The view function creates a <div> node as the placeholder for rendering the calendar (lines 2–12). The rendered function applies the FullCalendar plug-in to the <div> node created in the view function with an object that has the configurations for the calendar (lines 20–32).

It is so much fun to integrate many great third-party libraries into the AppRun components. Again, we must stop here and move on to summarize all the techniques we have used. The Chart component demonstrates the pattern that creates the <canvas> node in the view function and creates the chart object in the <canvas> node in the rendered function. The Map component demonstrates the pattern that creates the <svg> node in the view function and creates the D3 SVG map in the <svg> node in the rendered function. It also demonstrates how to load data asynchronously. The Table component demonstrates the pattern of using jQuery plug-ins. It creates the <table> node in the view function and applies the jQuery plug-in to the <table> node in the rendered function. The Calendar component follows the jQuery plug-in pattern. It is only different in that it creates a <div> node as the placeholder.