In this article, we’re going to add scaffolding for our React and Progress KendoReact application. We’ll use KendoReact’s view layout functionality to house multiple different views. Let’s pick up from where we left the application last time. Our last installment left us with this rather plain-looking series of static bar charts:

Today we’re going to use KendoReact Layout to allow a user to flip between multiple data visualization views. React is perfect for this kind of conditional rendering, and KendoReact’s layout components will enable us to manage numerous different types of data visualizations within one application.

What We’ll Be Building

Our final product today will look something like this:

So without further ado, let’s get started!

Static Site Elements

Let’s build out a header that remains the same between different views. The first thing we’ll do is strip out the placeholder charts that I’m displaying in App.js:

import React from 'react';
import "hammerjs";
import './App.css';

const App = () => {
  return (<></>);
}

export default App;

I’ve also converted the App functional component to use an arrow function. It makes no real difference for our purposes, but I find it a bit neater for presentation.
The next thing we’ll do is throw a header at the top of our single-page application:

const App = () => {
  return (
    <>
      <h1>
        <span role="img" aria-label="">🍕</span>
          Pizza-o-matic
        <span role="img" aria-label="">🍕</span>
      </h1>
    </>
  );
};

And here is my App.css file so far for reference:

h1 {
  background: url('/header.svg') no-repeat;
  color: white;
  margin: 0;
  font-weight: bold;
  line-height: 1;
  font-size: 2.5rem;
  padding: 2rem;
  text-align: center;
}
h1 span {
  display: inline-block;
  padding: 0 0.5rem;
}

@media (max-width: 700px) {
  h1 {
    padding: 1rem;
    font-size: 2rem;
  }
}
@media (max-width: 500px) {
  h1 {
    font-size: 1.5rem;
  }
}

We should now see just a header spanning the entire browser window. This header will be constant, while different data visualization views beneath are allowed to change.

React Hooks for Managing View State

Now we can begin to control the conditional flow that will allow our application to render different views. There are two pieces of state that we want to keep track of while using this application:

What style of chart a user is viewing (chart or table)
What region of the store’s ratings the user is viewing

We’ll add these two pieces of state by using the React State Hook. Let’s first add a way to represent the chart or table view:

const [ isChartView, setChartView ] = useState(true);

The useState function returns an array with a value and a function to change that value. So now we have a boolean representing either chart view or table view. The next step is similar but will use an integer to represent which region tab we want to view on the page.

const SELECTED_KEY = "selected";

const App = () => {
  const [ selected, setSelected ] = useState(
    parseInt(localStorage.getItem(SELECTED_KEY), 10) || 0
  );

  const onTabSelect = ({ selected } = {}) => {
    setSelected(selected);
    localStorage.setItem(SELECTED_KEY, selected);
  };

  const [ isChartView, setChartView ] = useState(true);  
  ...

I’ve gone ahead and saved the current region tab to our browser’s local storage, so our piece of state will persist between reloads and browser sessions. I’ve included it as an example to go along with our simple local state held within isChartView. Here is some sample code you can include in App.js so you can get a feel for how our application edits these within our app:

import React, { useState } from 'react';
import "hammerjs";
import './App.css';

const SELECTED_KEY = "selected";

const App = () => {
  
  const [ isChartView, setChartView ] = useState(true);

  const [ selected, setSelected ] = useState(
    parseInt(localStorage.getItem(SELECTED_KEY), 10) || 0
  );

  const onTabSelect = ({ selected } = {}) => {
    setSelected(selected);
    localStorage.setItem(SELECTED_KEY, selected);
  };

  return (
    <>
      <h1>
        <span role="img" aria-label="">
          🍕
        </span>
        Pizza-o-matic
        <span role="img" aria-label="">
          🍕
        </span>
      </h1>
      <div>
        <button onClick={() => onTabSelect({ selected: 1 })}>
          Select Tab 1
        </button>
        <button onClick={() => onTabSelect({ selected: 2 })}>
          Select Tab 2
        </button>
        {`Tab selected: ${selected}`}
      </div>
      <div>
        <button onClick={() => setChartView(!isChartView)}>
          Toggle Chart View
        </button>
        {`${isChartView ? 'Chart View' : 'Table View'}`}
      </div>
    </>
  );
};

export default App;

This snippet showcases some of the fundamentals of conditional rendering that make React so useful for representing state within an application. At this point, the application should look something like this:

Plugging React State into KendoReact Layout Components

KendoReact’s layout functionality works beautifully with React Hooks. It allows us to change the way we visualize data based on the current state of the application. We’ll be using the TabStrip component which will hold multiple TabStripTab children.

import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';

We can then replace our example code and add this tab layout functionality to our app like so:

<TabStrip
  selected={selected}
  onSelect={onTabSelect}
  tabPosition="left"
  animation={false}
>
  <TabStripTab title={'Tab 1'}>
    Tab 1 Chart
  </TabStripTab>
  <TabStripTab title={'Tab 2'}>
    Tab 2 Chart
  </TabStripTab>
</TabStrip>

Now let’s add in a way to switch between Chart View and Table View. We’ll add in two basic buttons to switch between the two views. App.js should now look something like this:

const App = () => {
  
  const [ isChartView, setChartView ] = useState(true);

  const [ selected, setSelected ] = useState(
    parseInt(localStorage.getItem(SELECTED_KEY), 10) || 0
  );

  const onTabSelect = ({ selected } = {}) => {
    setSelected(selected);
    localStorage.setItem(SELECTED_KEY, selected);
  };

  return (
    <>
      <h1>
        <span role="img" aria-label="">
          🍕
        </span>
        Pizza-o-matic
        <span role="img" aria-label="">
          🍕
        </span>
      </h1>
      <button onClick={() => setChartView(true)}>Chart View</button>
      <button onClick={() => setChartView(false)}>Table View</button>
      <TabStrip
        selected={selected}
        onSelect={onTabSelect}
        tabPosition="left"
        animation={false}
      >
        <TabStripTab title={'Tab 1'}>
          {`Tab 1 ${isChartView ? 'Chart' : 'Table'} View`}
        </TabStripTab>
        <TabStripTab title={'Tab 2'}>
          {`Tab 2 ${isChartView ? 'Chart' : 'Table'} View`}
        </TabStripTab>
      </TabStrip>
    </>
  );
};

With the view looking like this:

Now the final step will be to pretty up the data panel area a little bit:

<TabStrip
  selected={selected}
  onSelect={onTabSelect}
  tabPosition="left"
  animation={false}
>
  <TabStripTab title={"Tab 1"}>
    <div className="ratings-header">
      <h2>Company Ratings</h2>
      <span className="buttons-span">
        <img
          src="chart-bar.svg"
          alt="chart view"
          className={isChartView ? "active" : "inactive"}
          onClick={() => setChartView(true)}
        />
        <img
          src="table.svg"
          alt="cell view"
          className={isChartView ? "inactive" : "active"}
          onClick={() => setChartView(false)}
        />
      </span>
    </div>
    <div>{`Tab 1 ${isChartView ? "Chart" : "Table"} View`}</div>
  </TabStripTab>
  <TabStripTab title={"Tab 2"}>
    <div className="ratings-header">
      <h2>Company Ratings</h2>
      <span className="buttons-span">
        <img
          src="chart-bar.svg"
          alt="chart view"
          className={isChartView ? "active" : "inactive"}
          onClick={() => setChartView(true)}
        />
        <img
          src="table.svg"
          alt="cell view"
          className={isChartView ? "inactive" : "active"}
          onClick={() => setChartView(false)}
        />
      </span>
    </div>
    <div>{`Tab 2 ${isChartView ? "Chart" : "Table"} View`}</div>
  </TabStripTab>
</TabStrip>

With some final touches to the App.css file, we’re all finished with this portion of the guide:

.ratings-header {
  text-align: center;
}

.ratings-header .buttons-span {
  margin-right: 40px;
  float: right;
}

.ratings-header h2 {
  display: inline;
  font-size: 30px;
}

.ratings-header img {
  height: 30px;
  width: 35px;
  margin: 5px;
  padding: 5px 5px;
  cursor: pointer;
}

.ratings-header .active {
  background: #0040FF40;
  border-radius: 10px;
  height: 35px;
  width: 40px;
}

.flex-container {
  list-style: none;
  display: inline;
  flex-wrap: nowrap;
}

.flex-item {
  border: 1px solid black;
  border-radius: 10px;
  color: black;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  font-size: 15px;
}

And that’s all there is to it!

What’s next?

In the next installment, we’ll go over how to wrangle JSON data into a format that lends itself to multiple views like this. That way, we’ll see our application respond to any data that we feed it. Feel free to add comments below if you have questions or ideas about this topic.

Resources

The entire source code for this project is available at my GitHub account.

What We’ll Be Building

Static Site Elements

React Hooks for Managing View State

Plugging React State into KendoReact Layout Components

What’s next?

Resources

Full Series:

Author: Mickey Smith

Leave a Reply Cancel reply

What We’ll Be Building

Static Site Elements

React Hooks for Managing View State

Plugging React State into KendoReact Layout Components

What’s next?

Resources

Full Series:

Author: Mickey Smith

Related Posts

Leave a Reply Cancel reply