React Dashboard App

In this example below you will see how to do a React Dashboard App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by roikles, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright roikles ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React Dashboard App</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/roikles/react-dashboard-app-dJmejR */
@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,400,600");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Work Sans', sans-serif;
  background: #23294c;
}

.app {
  display: flex;
}

.app__content {
  flex-grow: 1;
}

.app__sidebar {
  display: none;
  background: #222A49;
  color: white;
  width: 250px;
  padding: 20px;
}

.app__sidebar--open {
  display: block;
}

.app__header {
  display: flex;
  justify-content: flex-end;
  padding: 2rem 1rem;
}

.app__date {
  display: block;
  font-size: 1.6rem;
  font-weight: 300;
  color: #fff;
}

.client-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  padding: 2rem 2rem;
}
.client-wrapper > * {
  grid-column: auto / span 12;
}
@media (min-width: 600px) {
  .client-wrapper > * {
    grid-column: auto / span 6;
  }
}
@media (min-width: 800px) {
  .client-wrapper > * {
    grid-column: auto / span 4;
  }
}
@media (min-width: 1000px) {
  .client-wrapper > * {
    grid-column: auto / span 3;
  }
}

.client {
  padding: 2rem 2rem;
  border-radius: 0.5rem;
  background: #2e345a;
  background: linear-gradient(to bottom right, #2e345a, #3e2e5a);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.125);
}
.client:hover {
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.25);
}

.client__name {
  font-weight: 300;
  font-size: 1.3rem;
  margin-bottom: 0.125rem;
  color: #ffffff;
}

.client__total-support {
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  color: #827ea0;
}

.progress-bar {
  display: flex;
  position: relative;
  flex-grow: 1;
  border-radius: 0.4rem;
  background: linear-gradient(to right, #fa83cf, #ef44b1, #4631e4);
  height: 0.4rem;
  margin-bottom: 1rem;
}

.progress-bar__mask {
  background: #23294c;
  width: 100%;
  height: 100%;
  margin-left: auto;
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  transition: width 1s ease-in-out;
}

.progress {
  display: flex;
}

.progress__used {
  color: #9b97ba;
  font-weight: 400;
  font-size: 1.1rem;
}

.progress__remaining {
  color: #9b97ba;
  margin-left: auto;
  font-weight: 400;
  font-size: 1.1rem;
}


/*Downloaded from https://www.codeseek.co/roikles/react-dashboard-app-dJmejR */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ClientTracker = function (_React$Component) {
    _inherits(ClientTracker, _React$Component);

    function ClientTracker(props) {
        _classCallCheck(this, ClientTracker);

        return _possibleConstructorReturn(this, (ClientTracker.__proto__ || Object.getPrototypeOf(ClientTracker)).call(this, props));
    }

    _createClass(ClientTracker, [{
        key: 'timeConvertor',
        value: function timeConvertor(totalMinutes) {
            var hours = totalMinutes / 60;
            var rhours = Math.floor(hours);
            var minutes = (hours - rhours) * 60;
            var rminutes = Math.round(minutes);
            return rhours.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) + ":" + rminutes.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'section',
                { className: 'client' },
                React.createElement(
                    'h1',
                    { className: 'client__name' },
                    this.props.name
                ),
                React.createElement(
                    'span',
                    { className: 'client__total-support' },
                    this.timeConvertor(this.props.timeTotal)
                ),
                React.createElement(
                    'div',
                    { className: 'progress-bar' },
                    React.createElement('div', { className: 'progress-bar__mask', style: { width: this.props.percentageRemaining + '%' } })
                ),
                React.createElement(
                    'div',
                    { className: 'progress' },
                    React.createElement(
                        'div',
                        { className: 'progress__used' },
                        this.timeConvertor(this.props.timeUsed),
                        ' Used'
                    ),
                    React.createElement(
                        'div',
                        { className: 'progress__remaining' },
                        this.timeConvertor(this.props.timeRemaining),
                        ' Left'
                    )
                )
            );
        }
    }]);

    return ClientTracker;
}(React.Component);

var Sorter = function (_React$Component2) {
    _inherits(Sorter, _React$Component2);

    function Sorter(props) {
        _classCallCheck(this, Sorter);

        var _this2 = _possibleConstructorReturn(this, (Sorter.__proto__ || Object.getPrototypeOf(Sorter)).call(this, props));

        _this2.change = _this2.change.bind(_this2);
        return _this2;
    }

    _createClass(Sorter, [{
        key: 'change',
        value: function change(event) {
            this.props.changeState({
                order: event.target.value
            });
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'select',
                { onChange: this.change, value: this.props.order, className: 'sorter__list' },
                React.createElement(
                    'option',
                    { value: 'az' },
                    'A-Z'
                ),
                React.createElement(
                    'option',
                    { value: 'most-support' },
                    'Most Support Time'
                ),
                React.createElement(
                    'option',
                    { value: 'least-support' },
                    'Least Support Time'
                ),
                React.createElement(
                    'option',
                    { value: 'most-used' },
                    'Most % Used'
                ),
                React.createElement(
                    'option',
                    { value: 'least-used' },
                    'Least % Used'
                )
            );
        }
    }]);

    return Sorter;
}(React.Component);

var App = function (_React$Component3) {
    _inherits(App, _React$Component3);

    function App(props) {
        _classCallCheck(this, App);

        var _this3 = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

        _this3.state = {
            clients: [],
            order: ''
        };
        _this3.changeOrder = _this3.changeOrder.bind(_this3);
        return _this3;
    }

    _createClass(App, [{
        key: 'randomTime',
        value: function randomTime(min, max) {
            return Math.random() * (max - min) + min;
        }
    }, {
        key: 'clientDummyData',
        value: function clientDummyData(i) {
            var companies = ['Stark Industries', 'Acme Corp.', 'Springfield Power', 'Pawtucket Brewery', 'Cloud Nine', 'Wayne Enterprises', 'Cyberdyne Systems', 'Mr. Plow', 'Bob\'s Burgers', 'Pawnee Parks Dept.', 'Dunder Mifflin', 'S.H.I.E.L.D', 'Hammer Industries', 'Evil Corp', 'Gringotts Bank', 'Axe Capital', 'Duff Beer', 'Paddy\'s pub', 'The Krusty Krab', 'Wayland Industries', 'Abstergo Industries', 'The Bluth Company', 'Hyperion Corporation'];

            return companies[i];
        }
    }, {
        key: 'sortBy',
        value: function sortBy(arr, key) {
            var reverse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

            return arr.sort(function (a, b) {
                var comparison = 0;
                if (a[key] > b[key]) {
                    comparison = 1;
                } else if (a[key] < b[key]) {
                    comparison = -1;
                }

                if (reverse === true) {
                    return comparison * -1;
                } else {
                    return comparison;
                }
            });
        }
    }, {
        key: 'sortClients',
        value: function sortClients(sortBy, clientArr) {
            if (sortBy === 'az') {
                return this.sortBy(clientArr, 'name');
            } else if (sortBy === 'most-support') {
                return this.sortBy(clientArr, 'timeTotal', true);
            } else if (sortBy === 'least-support') {
                return this.sortBy(clientArr, 'timeTotal');
            } else if (sortBy === 'most-used') {
                return this.sortBy(clientArr, 'percentageUsed', true);
            } else if (sortBy === 'least-used') {
                return this.sortBy(clientArr, 'percentageRemaining', true);
            } else {
                return this.sortBy(clientArr, 'name');
            }
        }
    }, {
        key: 'createClients',
        value: function createClients(num, order) {
            var clients = [];
            for (i = 0; i < num; i++) {
                var total = this.randomTime(10, 400);
                var used = this.randomTime(10, total);
                clients.push({
                    name: this.clientDummyData(i),
                    timeTotal: total,
                    timeUsed: used,
                    timeRemaining: total - used,
                    percentageUsed: 100 - (total - used) / total * 100,
                    percentageRemaining: (total - used) / total * 100
                });
            }
            console.log(clients);
            return this.sortClients(order, clients);
        }
    }, {
        key: 'renderClients',
        value: function renderClients(clients) {
            var clientComponents = [];
            for (i = 0; i < clients.length; i++) {
                clientComponents.push(React.createElement(ClientTracker, {
                    name: clients[i].name,
                    timeTotal: clients[i].timeTotal,
                    timeUsed: clients[i].timeUsed,
                    timeRemaining: clients[i].timeRemaining,
                    percentageUsed: clients[i].percentageUsed,
                    percentageRemaining: clients[i].percentageRemaining
                }));
            }
            return clientComponents;
        }
    }, {
        key: 'changeOrder',
        value: function changeOrder(orderBy) {
            this.setState(orderBy);
            this.setState({ clients: this.sortClients(orderBy.order, this.state.clients) });
        }
    }, {
        key: 'toggleSidebar',
        value: function toggleSidebar() {
            if (this.state.sidebar === true) {
                this.setState({ sidebar: false });
            } else {
                this.setState({ sidebar: true });
            }
            console.log('toggle Sidebar');
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            this.setState({ clients: this.createClients(20, this.state.order) });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this4 = this;

            return React.createElement(
                'div',
                { className: 'app' },
                React.createElement(
                    'section',
                    { className: 'app__content' },
                    React.createElement(
                        'header',
                        { className: 'app__header' },
                        React.createElement(
                            'date',
                            { className: 'app__date' },
                            'January 2018'
                        ),
                        React.createElement(Sorter, { changeState: this.changeOrder, order: this.state.order }),
                        React.createElement(
                            'button',
                            { onClick: function onClick() {
                                    return _this4.toggleSidebar();
                                } },
                            'test'
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'client-wrapper' },
                        this.renderClients(this.state.clients, this.state.order)
                    )
                ),
                React.createElement(
                    'div',
                    { className: this.state.sidebar ? "app__sidebar app__sidebar--open" : "app__sidebar" },
                    React.createElement(
                        'h1',
                        null,
                        'Sidebar'
                    ),
                    React.createElement(
                        'p',
                        null,
                        'Features to add:'
                    ),
                    React.createElement(
                        'p',
                        null,
                        'Detail view button (breakdown of which team members did how much % of the support time).'
                    ),
                    React.createElement(
                        'p',
                        null,
                        'Toggle card/ row layout'
                    )
                )
            );
        }
    }]);

    return App;
}(React.Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

Comments