More CSV baloney

In this example below you will see how to do a More CSV baloney with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>More CSV baloney</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://code.getmdl.io/1.1.3/material.blue_grey-orange.min.css'>

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

  
</head>

<body>

  <html lang="en">

<head>
   <meta charset="utf-8">
   <!-- Setting the viewport -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

   <title>CSV Parsing</title>
</head>

<body ng-app="csvParse" ng-controller="csvParseController">

   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

      <!-- HEADER -->
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">
                CSV Parse Playground
            </span>
            <!-- spacer right-aligns Nav controls -->
            <div class="mdl-layout-spacer"></div>
            <!-- Nav controls -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="#top">TOP</a>
               <a class="mdl-navigation__link" href="#table">TABLE</a>
               <a class="mdl-navigation__link" href="#json">JSON</a>
            </nav>
         </div>
      </header>

      <!-- MAIN CONTENT -->
      <main class="mdl-layout__content">
         <div class="page-content">
            <div class="mdl-grid">

               <!-- INTRODUCTION -->
               <div id="top" class="mdl-cell mdl-cell--12-col">
                  <div class="mdl-card mdl-shadow--4dp mdl-card-wide">
                     <div class="mdl-card__title">
                        <h3 class="mdl-card__title-text">
                                What's the Point of this?
                            </h3>
                     </div>

                     <div class="mdl-card__supporting-text">
                        <p>This app takes an array of data, outputs the contents as a table and raw JSON. A HTML5 input/range slider is used to filter the results by specific dates.</p>

                        <p>Total range of dataset: {{minDate | date}} - {{maxDate | date}}</p>
                        <p>Drag to filter on specific dates:</p>
                        <p>
                           <input type="range" id="sl1" class="mdl-slider date-slider" min="0" max="{{dateArray.length - 1}}" step="1" value="0" ng-model="myDate">
                        </p>
                        <p>Showing: {{ (outputData|filter:dateArray[myDate]).length }} of {{ outputData.length }} total results:</p>
                        <table class="mdl-data-table mdl-js-data-table table-narrow">
                           <thead>
                              <th class="mdl-data-table__cell--non-numeric">Date index</th>
                              <th class="mdl-data-table__cell--non-numeric">Javascript Date</th>
                              <th class="mdl-data-table__cell--non-numeric">Formatted Date</th>
                           </thead>
                           <tbody>
                              <tr>
                                 <td class="mdl-data-table__cell--non-numeric">{{myDate}}</td>
                                 <td class="mdl-data-table__cell--non-numeric">{{dateArray[myDate]}}</td>
                                 <td class="mdl-data-table__cell--non-numeric">{{dateArray[myDate] | date}}</td>
                              </tr>
                           </tbody>
                        </table>

                     </div>
                  </div>
               </div>


               <!-- OUTPUT AS TABLE -->
               <div id="table" class="mdl-cell mdl-cell--12-col">
                  <div class="mdl-card mdl-shadow--4dp mdl-card-wide">
                     <div class="mdl-card__title">
                        <h3 class="mdl-card__title-text">
                                Tabular Output:
                            </h3>
                     </div>

                     <div class="mdl-card__supporting-text">
                        <table class="mdl-data-table
                                          mdl-js-data-table
                                          table-wide">
                           <thead>
                              <th class="mdl-data-table__cell--non-numeric">Source</th>
                              <th class="mdl-data-table__cell--non-numeric">Target</th>
                              <th>Value</th>
                              <th>Annum</th>
                           </thead>
                           <tbody>
                              <tr ng-repeat="data in outputData | filter:dateArray[myDate]">
                                 <td class="mdl-data-table__cell--non-numeric">{{data.source}}</td>
                                 <td class="mdl-data-table__cell--non-numeric">{{data.target}}</td>
                                 <td>{{data.value}}</td>
                                 <td>{{data.annum | date}}</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>

               <!-- OUTPUT AS JSON -->
               <div id="json" class="mdl-cell mdl-cell--12-col">
                  <div class="mdl-card mdl-shadow--4dp mdl-card-wide">
                     <div class="mdl-card__title">
                        <h3 class="mdl-card__title-text">
                                In the raw...
                            </h3>
                     </div>

                     <div class="mdl-card__supporting-text">
                        <pre>{{ outputData | filter:dateArray[myDate] | json:4 }}</pre>
                     </div>
                  </div>
               </div>

            </div>
         </div>
      </main>
   </div>

</body>

</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script>
<script src='https://code.getmdl.io/1.1.3/material.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/belcurv/more-csv-baloney-YqbzNd */
.mdl-card-wide {
   width: 100%;
}

.mdl-card__supporting-text {
   width: auto;
}

.table-narrow {
   width: 440px;
}

.table-wide {
   width: 100%;
}

.date-slider {
   width: 400px;
}

/*Downloaded from https://www.codeseek.co/belcurv/more-csv-baloney-YqbzNd */
(function() {
   'use strict';

   var app = angular.module('csvParse', []);

   // ============= CONTROLLERS =============
   app.controller('csvParseController', function($scope) {
      
      $scope.myDate = 0;
      
      var i, j, k, l,
          uniqueDates,
          formattedResults = [];

      // ** faking it for Codepen... **
      var formattedResults = [
         {
         "source": "SCM",
         "target": "DOCUMENTATION",
         "value": 143511206,
         "annum": 1455602400000
      }, {
         "source": "DMEE",
         "target": "DIAGNOSIS AND PROCEDURES",
         "value": 21878533,
         "annum": 1456466400000
      }, {
         "source": "SCM",
         "target": "PATIENT",
         "value": 8165055,
         "annum": 1456207200000
      }, {
         "source": "SV",
         "target": "PATIENT",
         "value": 25408360,
         "annum": 1456207200000
      }, {
         "source": "EMTRAC",
         "target": "DIAGNOSIS AND PROCEDURES",
         "value": 5439516,
         "annum": 1454306400000
      }, {
         "source": "THERADOC",
         "target": "INFECTION",
         "value": 662607,
         "annum": 1455775200000
      }, {
         "source": "SCM",
         "target": "PATIENT",
         "value": 8162677,
         "annum": 1456120800000
      }, {
         "source": "CV",
         "target": "ENCOUNTER",
         "value": 59037,
         "annum": 1456466400000
      }, {
         "source": "THERADOC",
         "target": "CROSSREFERENCE",
         "value": 123145,
         "annum": 1454997600000
      }, {
         "source": "HDMPMC",
         "target": "ENCOUNTER",
         "value": 593412,
         "annum": 1456725600000
      }, {
         "source": "THERADOC",
         "target": "INFECTION",
         "value": 664846,
         "annum": 1456725600000
      }, {
         "source": "EPIC",
         "target": "DIAGNOSIS AND PROCEDURES",
         "value": 160351773,
         "annum": 1454738400000
      }, {
         "source": "EMTRAC",
         "target": "DIAGNOSIS AND PROCEDURES",
         "value": 5439516,
         "annum": 1454738400000
      }, {
         "source": "SCM",
         "target": "DIAGNOSIS AND PROCEDURES",
         "value": 11113132,
         "annum": 1454738400000
      }, {
         "source": "THERADOC",
         "target": "CROSSREFERENCE",
         "value": 123448,
         "annum": 1455343200000
      }, {
         "source": "ARIA",
         "target": "PATIENT",
         "value": 99093,
         "annum": 1456552800000
      }, {
         "source": "EPIC",
         "target": "PATIENT",
         "value": 59185841,
         "annum": 1456552800000
      }, {
         "source": "SCM",
         "target": "PATIENT",
         "value": 8131545,
         "annum": 1454565600000
      }, {
         "source": "HDMHUP",
         "target": "ENCOUNTER",
         "value": 1454417,
         "annum": 1455084000000
      }, {
         "source": "DOCUSYS",
         "target": "ENCOUNTER",
         "value": 832915055,
         "annum": 1455170400000
      }, {
         "source": "PMCCH-DSS",
         "target": "ENCOUNTER",
         "value": 1486222,
         "annum": 1455170400000
      }];
      
      // === begin build array of unique dates ===
      
      // add 'contains' method to Array prototype
      Array.prototype.contains = function (v) {
         for (j = 0; j < this.length; j += 1) {
            if (this[j] === v) {
               return true;
            }
         }
         return false;
      };
      
      // add 'unique' method to Array prototype
      Array.prototype.unique = function () {
         var arr = [];
         for (k = 0; k < this.length; k += 1) {
            if (!arr.contains(this[k].annum)) {
               arr.push(this[k].annum);
            }
         }
         return arr;
      };
      
      // find unique dates within formattedResults array
      uniqueDates = formattedResults.unique().sort();
      // console.log('Unique dates:\n', uniqueDates);   // testing
      // console.log('Unique dates length:', uniqueDates.length);   // testing
      
      // find min date within uniqueDates
      $scope.minDate = Math.min.apply(Math, uniqueDates.map(function (objMin) {
         return objMin;
      }));
      
      // find min date within uniqueDates
      $scope.maxDate = Math.max.apply(Math, uniqueDates.map(function (objMax) {
         return objMax;
      }));
      
      // ================== bind data to $scope object ==================
      $scope.outputData = formattedResults;
      $scope.dateArray  = uniqueDates;
   
   });

})();

Comments