cesi-clay

In this example below you will see how to do a cesi-clay with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>cesi-clay</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="body bg-light">
  <!-- Masthead =======================================================-->
  <div class="masthead bg-white mb-3">
    <!-- Navbar-->
    <nav class="navbar navbar-expand-lg navbar-light mb-3"><a class="navbar-brand" href="#"><img src="http://via.placeholder.com/46x46"/></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0 w-100">
          <input class="form-control form-control-lg border-0 w-100 bg-light" type="search" placeholder="Search" aria-label="Search"/>
          <button class="sr-only" type="submit">Search...</button>
        </form>
      </div>
    </nav>
    <!-- Filters-->
    <div class="container-fluid pb-3">
      <div class="row">
        <div class="col-12 d-flex align-items-center">
          <div>
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text bg-white pr-0"><i class="material-icons">date_range</i></div>
              </div>
              <input class="form-control range-picker border-left-0" type="text" aria-label="Text input with radio button"/>
            </div>
          </div>
          <div class="d-flex ml-auto">
            <!-- Quality-->
            <div class="form-group form-inline mb-0 mr-3">
              <label class="small text-muted" for="exampleFormControlSelect1">Quality:
                <select class="ml-2 form-control form-control-sm">
                  <option>Low</option>
                  <option>Medium</option>
                  <option>High</option>
                </select>
              </label>
            </div>
            <!-- Perf-->
            <div class="form-group form-inline mb-0 mr-3">
              <label class="small text-muted" for="exampleFormControlSelect1">Performance:
                <select class="ml-2 form-control form-control-sm">
                  <option>Low</option>
                  <option>Medium</option>
                  <option>High</option>
                </select>
              </label>
            </div>
            <!-- Color-->
            <div class="form-group form-inline mb-0 mr-3">
              <label class="small text-muted" for="exampleFormControlSelect1">Color:
                <select class="ml-2 form-control form-control-sm">
                  <option>Pink</option>
                  <option>Purple</option>
                  <option>Who cares</option>
                </select>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Data ====================================================-->
  <div class="container-fluid content">
    <div class="row">
      <main class="col-4">
        <ul>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
          <Li>
            <!-- Date-->
            <h2 class="mb-0">01/09/2018</h2>
            <!-- Quality and perfs tags-->
            <p class="mb-2"> <span class="mr-2"><span class="badge badge-secondary _cap-right">quality</span><span class="badge _cap-left badge-success">High</span></span><span class="mr-2"><span class="badge badge-secondary _cap-right">Performance</span><span class="badge _cap-left badge-warning">Medium</span></span>
            </p><samp class="text-muted mb-3 d-block">Offset: 13, Pressure: 758467839, Layout: 1796, Component: Yotis3, Colorbound: <span class="badge" style="background-color: purple; color: transparent;">hello</span>, Result: 0</samp>
          </Li>
        </ul>
      </main>
      <aside class="col-8">
        <div class="row">
          <div class="col-6">
            <canvas id="graph_quality_lot" width="400" height="400"></canvas>
          </div>
          <div class="col-6">
            <canvas id="graph_quality_component" width="400" height="400"></canvas>
          </div>
          <div class="col-6">
            <canvas id="graph_performance_layout" width="400" height="400"></canvas>
          </div>
          <div class="col-6">
            <canvas id="graph_lot_color" width="400" height="400"></canvas>
          </div>
        </div>
      </aside>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/isthatcentered/cesi-clay-XVqdQz */
._cap-right {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

._cap-left {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.material-icons {
  vertical-align: middle;
}

.masthead {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.body {
  min-height: 100vh;
}

.-square {
  position: relative;
}
.-square:before {
  display: block;
  content: "";
  padding-top: 100%;
}

.-swatch {
  width: 25px;
  display: inline-block;
}

samp {
  line-height: 1.3;
}

.-chart {
  width: 100%;
  min-height: 450px;
}

ul {
  list-style-type: disc;
  padding-left: 15px;
}

.content samp,
.content h2,
.content p {
  font-size: 14px;
}


/*Downloaded from https://www.codeseek.co/isthatcentered/cesi-clay-XVqdQz */
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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

console.clear();

/**
 * Date Picker
 */

$(".range-picker").daterangepicker();

// GRAPHS ------------------------------------------------------------
/**
 * Data adapter
 */

/**
 * Turns array of objects into dictionnary
 *
 * [{thing: "stuff"}, {thing: "else"}]
 * => {thing: ["stuff","else"]}
 */

var Dictionnary = function () {
  function Dictionnary(arr) {
    _classCallCheck(this, Dictionnary);

    this._dictionnary = arr.reduce(function (acc, curr) {
      var _acc = _extends({}, acc);

      Object.keys(curr).map(function (key) {
        return _acc[key] = _acc[key] // { labels: acc.label + curr.label || [ curr.label ] }
        ? [].concat(_toConsumableArray(_acc[key]), [curr[key]]) : [curr[key]];
      });

      return _acc;
    }, {});
  }

  _createClass(Dictionnary, [{
    key: "getAll",
    value: function getAll() {
      return this._dictionnary;
    }
  }]);

  return Dictionnary;
}();

var DictionnaryToChartAdapter = function () {
  function DictionnaryToChartAdapter(dictionnary, labelKey, colorMatcher) {
    _classCallCheck(this, DictionnaryToChartAdapter);

    this.labels = [].concat(_toConsumableArray(dictionnary[labelKey]));

    this.datasets = Object.keys(dictionnary) // { LotNumber: ["stuff", "other"], high: [0, 1, 2]}
    .filter(function (k) {
      return k !== labelKey;
    }) // Remove label key from datasets to display
    .map(function (key) {
      return {
        label: key,
        data: dictionnary[key],
        backgroundColor: colorMatcher[key] || "purple"
      };
    }); // Turn into chartjs data
  }

  _createClass(DictionnaryToChartAdapter, [{
    key: "getLabels",
    value: function getLabels() {
      return this.labels;
    }
  }, {
    key: "getDatasets",
    value: function getDatasets() {
      return this.datasets;
    }
  }]);

  return DictionnaryToChartAdapter;
}();

/**
 * Color key match object for graph colors
 */


var colors = {
  green: "#4bc0c0",
  blue: "#36a1eb",
  red: "#ff6383",
  yellow: "#ffcd55"
};
var colorKeyMatch = {
  High: colors.green,
  Medium: colors.blue,
  Low: colors.red,
  Count: [colors.blue, colors.green, colors.red, colors.yellow]
};

/**
 * Graphs mock data
 */
var graph_quality_component = new Dictionnary([{ Name: "Yotis3", High: 0, Medium: 1, Low: 0 }, { Name: "Yotis4", High: 1, Medium: 0, Low: 0 }, { Name: "Yotis5", High: 0, Medium: 0, Low: 1 }, { Name: "Yotis6", High: 1, Medium: 1, Low: 0 }]).getAll(),
    graph_quality_lot = new Dictionnary([{ LotNumber: 1124472695, High: 1, Medium: 1, Low: 1 }, { LotNumber: 1124472744, High: 0, Medium: 1, Low: 1 }, { LotNumber: 1124476323, High: 1, Medium: 1, Low: 0 }, { LotNumber: 1124476334, High: 0, Medium: 0, Low: 1 }]).getAll(),
    graph_performance_layout = new Dictionnary([{ Layout: 1244, High: 0, Medium: 1, Low: 0 }, { Layout: 1356, High: 0, Medium: 1, Low: 1 }, { Layout: 1748, High: 0, Medium: 1, Low: 0 }, { Layout: 1755, High: 1, Medium: 0, Low: 0 }, { Layout: 2268, High: 1, Medium: 0, Low: 0 }]).getAll(),
    graph_lot_color = new Dictionnary([{ Name: "Blue", Count: 4 }, { Name: "Green", Count: 1 }, { Name: "Red", Count: 2 }, { Name: "Yellow", Count: 1 }]).getAll();

graph_quality_component = new DictionnaryToChartAdapter(graph_quality_component, "Name", colorKeyMatch);
graph_quality_lot = new DictionnaryToChartAdapter(graph_quality_lot, "LotNumber", colorKeyMatch);
graph_performance_layout = new DictionnaryToChartAdapter(graph_performance_layout, "Layout", colorKeyMatch);
graph_lot_color = new DictionnaryToChartAdapter(graph_lot_color, "Name", colorKeyMatch);

var chart_opts_default = {
  type: "bar",
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },
    title: {
      display: true
    }
  }
};

var charts = [{ id: "graph_quality_lot", title: "Quality/Lot", opts: { data: graph_quality_lot } }, { id: "graph_quality_component", title: "Quality/Componponent", opts: { data: graph_quality_component } }, { id: "graph_performance_layout", title: "Performance/Layout", opts: { data: graph_performance_layout } }, { id: "graph_lot_color", title: "Lot/Color", opts: { type: "pie", data: _extends({}, graph_lot_color) } }];

charts.forEach(function (config) {

  var chart = new Chart(document.getElementById(config.id).getContext("2d"), _extends({}, chart_opts_default, config.opts));

  chart.options.title.text = config.title;
});

Comments