JavaScript Toolkit Built in Vue.js

I served as one of the lead developers on a new project at work, which I’m excited to share. I also had the opportunity to present the project at last month’s FinJS conference, to a positive reception. I think the project shows the breadth of what can be done in Vue, and how easy it is, once the architecture is in place, to build out charts, tables, and other neat data visualizations.

About JSCatalyst

JSCatalyst is an open-source UI toolkit that supports the development and lifecycle management of high-impact full-stack JavaScript applications. The platform accelerates application development and provides both designers and developers with tools to declaratively build user interfaces that function across all types of devices and browsers.

The toolkit is built on Vue.js and uses Vuetify and CSS Grid as its component/layout frameworks. We also make extensive use of data visualizations using libraries such as D3, Plotly, Chart.js, and Chartist, among others. Ag-Grid is used for datatables. The toolkit is comprehensive in its scope, highly performant using the latest front-end technologies, and is as customizable as needed.

What We Will Be Building

The video and outline below will show you how to easily and quickly build out a simple dashboard. The dashboard contains various data visualizations as well as a datatable. To display the charts, we will be using mock data stored locally, but you can use data from a server or an external API.

The toolkit includes a shell layout and all dependencies. The video also shows a more complex dashboard with filtering and other UI elements, to portray the full capabilities of JSCatalyst.

How To Build the Dashboard

Layout/Styling

The example page is laid out using CSS Grid. The template is divided into separate <div>s (where our content will reside) which are encased in a wrapper div. Scrolling down to the <style> section, you will see that each div contains its own styling, specifying the area’s height, as well as assigning it a grid-area. The grid layout is then declared in the <wrapper> class.

.wrapper-example-dashboard {    
  display: grid;    
  margin: 50px 0px 20px 0px;    
  grid-gap: 50px;    
  grid-template-columns: repeat(12, 1fr);    
  grid-template-areas:      
  ". c1 c1 c1 c1 c1 c1 c1 c1 c1 c1 ."      
  ". c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 ."      
  ". c3 c3 c3 c3 c3 c3 c3 c3 c3 c3 ."      
  ". c4 c4 c4 c4 c4 c4 c4 c4 c4 c4 ."      
  ". c5 c5 c5 c5 c5 c5 c5 c5 c5 c5 ."      
  ". c6 c6 c6 c6 c6 c6 c6 c6 c6 c6 ."      
  ". t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 ."  
}

It’s also easy to use media queries with CSS Grid, so you can specify different layouts for different size viewports.

Vue Imports and Functionality

Next we’ll scroll up to the <script> tag and cover Vue component patterns and functionality. First, we are importing all the components we are going to use — seven data visualizations and a table. Then we import mock data that is stored locally.

We use a data function, which returns all data properties for the component and makes the data ‘reactive’ (learn more about reactivity in Vue here). Next, we’ll register the components locally so that we get custom elements, such as <line-plot></line-plot>, that we can use in the html.

Lastly, we’ll define a gridOptions object that customizes our datatable — what we want it to look like, headers, pagination, etc.

Building Out the Page

Now that the layout is defined and the Vue functionality is in place, let’s start putting content onto the page.

To build the charts, we use the custom elements that we defined and registered below, pass them each a dataModel (in this case, it’s our local mock data), as well as any custom props that the visualization may require. (Note that most visualizations in JSCatalyst do not require extra props and most even come with default data to get you up and running quickly. The visualizations can then be easily customized by passing it the appropriate props.) Using this simple pattern, you will see that the visualizations are promptly rendered onto the page.

<line-plot  
  :dataModel='linePlotData'  
  propID='example-line-plot'  
  metric='Last Sale Price' 
></line-plot>

The datatable works in a similar manner, except that you also pass it the gridOptions object, which was defined below.

Using these steps, we have quickly and easily built out an example page using minimal code. JSCatalyst has the resources and infrastructure in place to get development started quickly, allowing both designers and programmers to add value to their application from day one. The toolkit is as versatile as it is customizable, and can be used to start new applications from the ground up, or be integrated into existing apps to build beautiful interfaces in minimal time.