attardj
/
dv-framework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Data Value Visualisation</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <link href="vendor/sb-admin-2/sb-admin-2.css" rel="stylesheet">
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="vendor/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">

  <style>
    .slider-selection {
    	background: #1cc88a;
    }

    .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    .row > [class*='col-'] {
    	 display: flex;
    	 flex-direction: column;
    }
  </style>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">Data Value Visualisation</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row" style="margin-top:10px; margin-bottom:10px;"> <!-- row title -->
      <div class="col-lg-9">
        <h3 id="projectTitle"></h3>
        <p id="projectDescription"></p>
      </div>
      <div class="col-lg-3">
        <a onclick="updateProject()" href="#" class="btn btn-sm btn-success" style="margin-bottom:5px"><i id="updateFA" class="fas fa-sync-alt fa-sm text-white-50"></i> Update Data Asset Readings</a>
        <a href="#" class="btn btn-sm btn-primary"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
      </div>

    </div>

    <div class="row"> <!--  2nd level row -->
            <div class="col-lg-4 mb-4">
              <div class="card mb-4 h-100">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold">Set Data Value Weights</h6>
                </div>
                <div class="card-body">
                  <form>
                    <div class="form-group">
                      <h4 class="small font-weight-bold">Data Dimension <span class="float-right">%</span><span class="float-right" id="dataDimensionValue">100</span></h4>
                      <input id="dataDimension" data-slider-id='dataDimensionSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>
                    </div>
                    <div class="form-group">
                      <h4 class="small font-weight-bold">Usage Dimension <span class="float-right">%</span><span class="float-right" id="usageDimensionValue">100</span></h4>
                      <input id="usageDimension" data-slider-id='usageDimensionSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>
                    </div>
                    <div class="form-group">
                      <h4 class="small font-weight-bold">Infrastructure Dimension <span class="float-right">%</span><span class="float-right" id="technicalDimensionValue">100</span></h4>
                      <input id="technicalDimension" data-slider-id='technicalDimensionSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>
                    </div>
                    <div class="form-group">
                      <h4 class="small font-weight-bold">Quality Dimension <span class="float-right">%</span><span class="float-right" id="qualityDimensionValue">100</span></h4>
                      <input id="qualityDimension" data-slider-id='qualityDimensionSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>
                    </div>
                  </form>
                  <div style="display: flex; justify-content: center;"><button type="submit" class="btn btn-success" onclick="refreshWeights()">Refresh Weights</button></div>
                  <small class="text-muted">Please note that these are importance weights and the values will be normalised to a relative value between 0 and 100 for the data value calculation.</small>
                </div>
              </div>
            </div>

            <div class="col-lg-8 mb-4">
              <div class="card mb-4 h-100">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold">Project Aggregated Data Value</h6>
                </div>
                <div class="card-body" id="aggregatedDataValue">
                    <canvas id="radar_chart"></canvas>
                </div>
              </div>
            </div>
    </div> <!--  2nd level row -->

    <div class="row">
      <div class="col-lg-12 mb-4">
        <div class="card mb-4">
          <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold">Data Assets</h6>
          </div>
          <div class="card-body">
          <div class="dropdown">
              <button value=-1 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Choose Asset
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="asset-dropdown"></div>
          </div>
          <br/>
          <!-- card for asset charts -->
          <div class="card">
            <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                  <a class="nav-link active"  href="#overview" data-toggle="tab" id="overview-tab" role="tab" aria-controls="overview" aria-selected="true"><i class="far fa-dot-circle"></i> Asset's Value Overview</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link"  href="#latest" data-toggle="tab" id="latest-tab" role="tab" aria-controls="latest" aria-selected="false"><i class="fas fa-balance-scale"></i> Latest Value</a>
                </li>
                <li class="nav-item">
                  <a  class="nav-link" href="#historical" data-toggle="tab" id="historical-tab" role="tab" aria-controls="historical" aria-selected="false"><i class="fas fa-history"></i> Historical Value</a>
                </li>
              </ul>
            </div>
            <div class="card-body">
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                  <div class="row" id="assetOverviewText">
                    <div class="col-lg-9">
                      <h5 class="card-title" id="chosenDatasetTitle"></h5>
                      <p class="card-text">
                        Dataset ID: <span id="chosenAssetID"></span><br/>
                        Last Observed: <span id="assetObservationValueDate"></span><br/>
                        Current Data Value (based on assigned weights): <b><span id="assetObservationValue"></span></b><br/><br/>
                        <label for="overall_pb">Data Value Distribution:</label>
                        <!-- <div class="col-lg-6"> -->
                          <div class="progress" id="overall_pb" style="height: 30px;">
                             <div class="progress-bar bg-success" role="progressbar" id="data-dimension-pb"><small id="data-dimension-age"></small></div>
                             <div class="progress-bar bg-warning" role="progressbar" id="technical-dimension-pb"><small id="technical-dimension-age"></small></div>
                             <div class="progress-bar bg-danger" role="progressbar" id="usage-dimension-pb"><small id="usage-dimension-age"></small></div>
                             <div class="progress-bar bg-primary" role="progressbar" id="quality-dimension-pb"><small id="quality-dimension-age"></small></div>
                          </div>
                        <!-- </div> -->

                        <br/>
                      </p>
                    </div>

                    <div class="col-lg-3">
                      <div class="card mb-4">
                        <div class="card-header py-3">
                          <h6 class="m-0 font-weight-bold">Legend</h6>
                        </div>
                        <div class="card-body">
                          <div class="progress" style="height: 30px;">
                             <div class="progress-bar bg-success" role="progressbar" style="width: 100%;">Data Dimension</div>
                          </div> <br/>
                          <div class="progress" style="height: 30px;">
                             <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;">Infrastructure Dimension</div>
                          </div> <br/>
                          <div class="progress" style="height: 30px;">
                             <div class="progress-bar bg-danger" role="progressbar" style="width: 100%;">Usage Dimension</div>
                          </div> <br/>
                          <div class="progress" style="height: 30px;">
                             <div class="progress-bar bg-primary" role="progressbar" style="width: 100%;">Quality Dimension</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="latest" role="tabpanel" aria-labelledby="latest-tab">
                  <canvas id="latest_chart"></canvas>
                </div>
                <div class="tab-pane fade" id="historical" role="tabpanel" aria-labelledby="historical-tab">
                  <canvas id="historical_chart"></canvas>
                </div>
              </div>
            </div>

          </div>
          <!-- end of card for asset charts -->
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="row">
      <div class="col-lg-12 mb-4">
        <h3 class="mt-5">JSON Response</h3>
        <pre id="json-response" style="font-size:9px;"></pre>
      </div>
    </div> -->
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="vendor/bootstrap-slider/bootstrap-slider.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>

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

</body>

</html>