dv-framework/DVF Visualisation/script.js

data_ns = "http://www.example.com/";

$(function() {
  var pageURL = $(location).attr("href");
  if (pageURL.indexOf("index.html") >= 0){
    getSavedProjects();
  }

  if (pageURL.indexOf("dashboard.html") >= 0){
    loadDashboardForProject();
    $("#assetOverviewText").hide();
  }
});


function loadDashboardForProject(){
  setUpDashboardSliders();
  refreshWeights();

  $.get( "http://0.0.0.0:8080/myapp/APIresources/project-assets/"+localStorage.getItem("graph-id"), function( data ) {
    $("#json-response").text(JSON.stringify(data, null, 5));

    assetIDs = data["dataAssetIDs"];

    $.each( assetIDs, function( index, value ) {
      toAppend = '<a id=\'asset-'+index+'\' data-identifier=\''+value["Identifier"]+'\' data-title=\''+value["Title"]+'\' class="dropdown-item" onclick="visualisationForAsset(\''+value["Identifier"]+'\',\''+index+'\');getHistoricalChart(\''+value["Identifier"]+'\')">'+value["Title"]+'</a>';
      $("#asset-dropdown").append(toAppend);
    });
  });

  $.get( "http://0.0.0.0:8080/myapp/web-api/project-details/"+localStorage.getItem("graph-id"), function( details ) {
    $("#projectTitle").text(details[0]["Project-Name"]);
    $("#projectDescription").text(details[0]["Project-Description"]);
  });

}

function updateProject(){
  // fas fa-sync-alt fa-sm text-white-50

  $("#updateFA").removeClass("fas fa-sync-alt fa-sm text-white-50")
  $("#updateFA").addClass("spinner-border spinner-border-sm")
  $.get( "http://0.0.0.0:8080/myapp/web-api/update-project/"+localStorage.getItem("graph-id"),
      function( data ) {
          $("#json-response").text(JSON.stringify(data, null, 5));
          $("#updateFA").removeClass("spinner-border spinner-border-sm")
          $("#updateFA").addClass("fas fa-sync-alt fa-sm text-white-50")
          console.log("reloading dashboard")

          $("#asset-dropdown").empty();
          cleanGraphs();
          loadDashboardForProject();
      });
}

function cleanGraphs(){
  $("#radar_chart").remove();
  $("#aggregatedDataValue").append('<canvas id="radar_chart"></canvas>');
  $("#latest_chart").remove();
  $("#latest").append('<canvas id="latest_chart"></canvas>');
  $("#historical_chart").remove();
  $("#historical").append('<canvas id="historical_chart"></canvas>');
}

function setUpDashboardSliders(){
  $('#dataDimension').slider();
  $("#dataDimension").on("slide", function(slideEvt) {
     $("#dataDimensionValue").text(slideEvt.value);
  });

  $('#usageDimension').slider();
  $("#usageDimension").on("slide", function(slideEvt) {
     $("#usageDimensionValue").text(slideEvt.value);
  });

  $('#technicalDimension').slider();
  $("#technicalDimension").on("slide", function(slideEvt) {
     $("#technicalDimensionValue").text(slideEvt.value);
  });

  $('#qualityDimension').slider();
  $("#qualityDimension").on("slide", function(slideEvt) {
     $("#qualityDimensionValue").text(slideEvt.value);
  });

}

function getWeights(){
  dataDim = $("#dataDimension").val();
  usageDim = $("#usageDimension").val();
  techDim = $("#technicalDimension").val();
  qualDim = $("#qualityDimension").val();

  total = parseInt(dataDim) + parseInt(usageDim) + parseInt(techDim) + parseInt(qualDim);
  dataDim = dataDim / total;
  usageDim = usageDim / total;
  techDim = techDim / total;
  qualDim = qualDim / total;

  formData = {};
  formData["Data-Dimension"] =  dataDim;
  formData["Usage-Dimension"] =  usageDim;
  formData["Infrastructure-Dimension"] =  techDim;
  formData["Quality-Dimension"] =  qualDim;

  return formData;
}

function refreshWeights(){

  weights =  getWeights();

  formData = {};
  formData["weighting"] = weights;
  formData["graphID"] = localStorage.getItem("graph-id");


  $.ajax('http://0.0.0.0:8080/myapp/web-api/compute-aggregate', {
      type: 'POST',
      data: JSON.stringify(formData),
      success: function(responseData, textStatus, jqXHR) {
        $("#json-response").text(JSON.stringify(responseData, null, 5))
        cleanGraphs();

        assets = []
        values = []

        avrg = 0;
        $.each(responseData, function(index, value) {
          $.each(value, function(key, value){
            assets.push(key)
            values.push(value)
            // values.push({'x': index, 'y': value})
            avrg = avrg + value;
          });
        });

        avrg = avrg / assets.length;
        avrgTrendline = []

        $.each(assets, function(index, value) {
          avrgTrendline.push(avrg)
        });

        var data = {
          labels: assets,
          datasets: [
            {
              label: "Data Assets",
              data : values,
              borderColor: "red",
              fill: false,
              showLine: false
            },
            {
              label: "Average Data Value",
              data: avrgTrendline,
              fill: false,
              borderColor: "blue",
              type: 'line',
              pointRadius: 0
            }
          ]
        }

        var ctx = document.getElementById("radar_chart").getContext('2d');
        var myRadarChart = new Chart(ctx, {
          type: 'line',
          data : data,
          options: {
              layout: {
                  padding: {
                      left: 0,
                      right: 0,
                      top: 0,
                      bottom: 0
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          display: false
                      },
                      scaleLabel: {
                        display: true,
                        labelString: 'Data Assets'
                      }
                  }],
                  yAxes: [{
                    scaleLabel: {
                      display: true,
                      labelString: 'Data Valuation (in %)'
                    }
                }]
              }
          }
        });

        if ($("#dropdownMenuButton").val() > -1){
          assetID = $("#asset-"+$("#dropdownMenuButton").val()).data("identifier")

          visualisationForAsset(assetID, $("#dropdownMenuButton").val());
          getHistoricalChart(assetID);
        }
      },
      error: function (responseData, textStatus, errorThrown) {
          alert('POST failed.');
      }
  });
}

function getSavedProjects(){
  // http://0.0.0.0:8080/myapp/web-api/sample-projects
  $.get( "http://0.0.0.0:8080/myapp/web-api/saved-projects", function( data ) {
    $("#json-response").text(JSON.stringify(data, null, 5))

      $.each(data, function( index, value ) {
        $("#dataProjects").prepend(generateCardForDataProject(value["Project-Name"],value["Project-Description"],value["Overall-Value"], value["Project-URI"]))
      });
  });
}

function visualisationForAsset(assetID, index) {
  dataPoints = [];
  labels = [];

  $("#latest_chart").remove();
  $("#latest").append('<canvas id="latest_chart"></canvas>');
  $("#historical_chart").remove();
  $("#historical").append('<canvas id="historical_chart"></canvas>');


  $("#dropdownMenuButton").data("lastValue",index);

  $("#dropdownMenuButton").text($("#asset-"+index).data("title"))
  $("#dropdownMenuButton").val(parseInt(index))
  weights =  getWeights();
  formData = {};
  formData["weighting"] = weights;
  formData["graphID"] = localStorage.getItem("graph-id");
  formData["dataAssetID"] = assetID;

  $.ajax('http://0.0.0.0:8080/myapp/APIresources/calculateValue', {
      type: 'POST',
      data: JSON.stringify(formData),
      success: function(responseData, textStatus, jqXHR) {
          $("#json-response").text(JSON.stringify(responseData, null, 5));

          $.each(responseData, function(key, value){
                if ("dataValue" == key) { return; }
                if ("assetID" == key) { return; }
                if ("date" == key) { return; }

                dataPoints.push(parseInt(value));
                labels.push(key);
          });

          var data = {
              labels: labels,
              datasets: [{
                label: "Valuation",
                backgroundColor: ["blue","green","red","yellow","cyan","magenta","brown","lightsalmon"],
                data: dataPoints,
                borderWidth: 1
              }]
          };

          var ctx = document.getElementById("latest_chart").getContext('2d');
          var latestChart = new Chart(ctx, {
            type: 'bar',
            data : data,
            options: {
                legend: { display: false },
                 scales: {
                     yAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
            }
          });
          assetTitle = $("#asset-"+index).data("title")
          populateAssetValueOverview(assetID, assetTitle, responseData)
      },
      error: function (responseData, textStatus, errorThrown) {
          alert('POST failed.');
      }
  });
}


function populateAssetValueOverview(assetID, assetTitle, json){
  // TODO: change this accordingly
  // techdim = Infrastructure dimension
  $("#assetOverviewText").show();

  $("#chosenDatasetTitle").text(assetTitle)
  $("#chosenAssetID").text(assetID)
  $("#assetObservationValueDate").text(json["date"])
  $("#assetObservationValue").text(json["dataValue"]+"%")

  weights =  getWeights();

  dv = parseInt(json["dataValue"])

  total = 100 - dv;

  datadim = parseInt(json["trustMetric"])
  usagedim = ((((parseInt(json["createdOnMetric"]) + parseInt(json["lastModificationDateMetric"])) / 2) + ((parseInt(json["createdByMetric"]) + parseInt(json["classOfCreatorMetric"])) / 2))) / 2
  techdim = parseInt(json["dataManagementMetric"])
  qualdim = (parseInt(json["accuracyMetric"]) + parseInt(json["completenessMetric"])) / 2;

  // ratioTotal = datadim + usagedim + techdim + qualdim;
  // datadim = ((datadim * parseFloat(weights["Data-Dimension"])) * dv);// / ratioTotal;
  // usagedim = ((usagedim * parseFloat(weights["Usage-Dimension"])) * dv);// / ratioTotal;
  // techdim = ((techdim * parseFloat(weights["Infrastructure-Dimension"])) * dv);// / ratioTotal;
  // qualdim = ((qualdim * parseFloat(weights["Quality-Dimension"])) * dv);// / ratioTotal;

  datadim = (datadim * parseFloat(weights["Data-Dimension"]));
  usagedim = (usagedim * parseFloat(weights["Usage-Dimension"]));
  techdim = (techdim * parseFloat(weights["Infrastructure-Dimension"]));
  qualdim = (qualdim * parseFloat(weights["Quality-Dimension"]));

  $("#data-dimension-pb").css("width", String(datadim)+"%");
  $("#technical-dimension-pb").css("width", String(techdim)+"%");
  $("#usage-dimension-pb").css("width", String(usagedim)+"%");
  $("#quality-dimension-pb").css("width", String(qualdim)+"%");

  if (datadim > 0) $("#data-dimension-age").text(String(Math.round(datadim))+"%");
  if (usagedim > 0) $("#usage-dimension-age").text(String(Math.round(usagedim))+"%");
  if (techdim > 0) $("#technical-dimension-age").text(String(Math.round(techdim))+"%");
  if (qualdim > 0) $("#quality-dimension-age").text(String(Math.round(qualdim))+"%");
}


function getHistoricalChart(assetID){
  weights =  getWeights();
  formData = {};
  formData["weighting"] = weights;
  formData["graphID"] = localStorage.getItem("graph-id");
  formData["dataAssetID"] = assetID;

  dates = [];
  objects = [];

  $("#latest_chart").remove();
  $("#latest").append('<canvas id="latest_chart"></canvas>');
  $("#historical_chart").remove();
  $("#historical").append('<canvas id="historical_chart"></canvas>');


  $.ajax('http://0.0.0.0:8080/myapp/APIresources/assetHistory', {
      type: 'POST',
      data: JSON.stringify(formData),
      success: function(responseData, textStatus, jqXHR) {
        // $("#json-response").text(JSON.stringify(responseData, null, 5));

        $.each(responseData, function(index, item){
          $.each(item, function(key, value){
            objects.push(value);
            dates.push(key);
          });
        });

        datasetsConstruction = {};
        $.each(objects, function(index, item){
          $.each(item, function(key, value){

            if ("assetID" == key) { return; }
            if ("date" == key) { return; }

            if (!(key in datasetsConstruction)){
              datasetsConstruction[key] = [];
            }
            datasetsConstruction[key].push(value);
          });
        });

        colors = ["goldenrod","blue","green","red","yellow","cyan","magenta","brown","lightsalmon"];
        datasets = [];
        i=0;
        $.each(datasetsConstruction, function(key, value){
          theObject = {};
          theObject["label"] = key;
          theObject["data"] = value;
          theObject["borderColor"] = colors[i];
          theObject["fill"] = false;
          i = i + 1;
          datasets.push(theObject);
        });

        var data = {
            labels: dates,
            datasets: datasets,
        };

        var config = {
          type: 'line',
          data : data,
          options: {
              responsive: true,
              title: {
                display: false,
              },
              tooltips: {
                mode: 'index',
                intersect: false,
              },
              hover: {
                mode: 'nearest',
                intersect: true
              },
              scales: {
                xAxes: [{
                  display: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Month'
                  }
                }],
                yAxes: [{
                  display: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Value'
                  }
                }]
              }
            }
        }

        var ctx = document.getElementById("historical_chart").getContext('2d');
        var historicalChart = new Chart(ctx, config);

      },
      error: function (responseData, textStatus, errorThrown) {
          alert('POST failed.');
      }
  });

}

function updateConnectorURLField(){
  urlField = $("#inputState")[0].options[$("#inputState")[0].options.selectedIndex].value;
  $("#connectorURL").val(urlField);
}

function generateCardForDataProject(dataProjectTitle, dataProjectDescription, dataProjectOverallValue, dataProjectURI){
  card = `
  <div class="col-lg-4" onclick="openDataDashboard('[[%%DataProjectURI%%]]')">
    <div class="card border-left-warning shadow py-2" style="margin-bottom:20px">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">[[%%DataProjectTitle%%]]</div>
            <div class="h6 mb-0 font-weight-bold text-gray-800">[[%%DataProjectDescription%%]]</div>
          </div>
          <div class="col-auto">
              <i class="fas fa-balance-scale fa-3x text-gray-300"><span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: black; font-size:35px">[[%%DataProjectOverallValue%%]]</span></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  `;

  card = card.replace("[[%%DataProjectURI%%]]", dataProjectURI);
  card = card.replace("[[%%DataProjectTitle%%]]", dataProjectTitle);
  card = card.replace("[[%%DataProjectDescription%%]]", dataProjectDescription);
  // card = card.replace("[[%%DataProjectOverallValue%%]]", dataProjectOverallValue);
  card = card.replace("[[%%DataProjectOverallValue%%]]", "");

  return card;
}

function importData() {
  formData = {};
  formData["Project-Name"] =  $("#projectName").val();
  formData["Connector"] =  $("#inputState")[0].options[$("#inputState")[0].options.selectedIndex].id;
  formData["Connector-URL"] =  $("#connectorURL").val();
  formData["Metric-Settings"] =  {};
  formData["Project-Description"] =  $("#projectDescription").val();


  $.ajax('http://0.0.0.0:8080/myapp/web-api/create-project', {
      type: 'POST',
      data: JSON.stringify(formData),
      success: function(responseData, textStatus, jqXHR) {
        $("#json-response").text(JSON.stringify(responseData, null, 5));
        $(".recentAssessment").hide();
        $(".recentAssessmentIcon").show(); // call overall value to get the value for overlay

        $(".generateLoadingCard").val(responseData["Project-Graph-ID"]);
        $(".generateLoadingCard").attr("onclick","openDataDashboard('"+responseData["Project-Graph-ID"]+"')");

      },
      error: function (responseData, textStatus, errorThrown) {
        $(".recentAssessment").hide();
        $(".recentAssessmentFailedIcon").show();
      }
  });

  $("#dataProjects").prepend(generateLoadingCard(formData["Project-Name"],formData["Project-Description"]));
  $(".recentAssessmentIcon").hide();
  $(".recentAssessmentFailedIcon").hide();
}

function openDataDashboard(graphID){
  localStorage.setItem("graph-id",graphID.replace(data_ns,""));
  window.open("dashboard.html", "_self");
}

function generateLoadingCard(dataProjectTitle, dataProjectDescription){
  card = `
  <div class="col-lg-4 generateLoadingCard">
    <div class="card border-left-success shadow py-2" style="margin-bottom:20px">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">[[%%DataProjectTitle%%]]</div>
            <div class="h6 mb-0 font-weight-bold text-gray-800">[[%%DataProjectDescription%%]]</div>
          </div>
          <div class="col-auto">
            <div class="spinner-border text-success recentAssessment" role="status" aria-hidden="true"></div>
            <i class="fas fa-balance-scale fa-3x text-gray-300 recentAssessmentIcon"></i>
            <i class="fas fa-times-circle fa-3x text-gray-300 recentAssessmentFailedIcon"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  `;
  card = card.replace("[[%%DataProjectTitle%%]]", dataProjectTitle);
  card = card.replace("[[%%DataProjectDescription%%]]", dataProjectDescription);

  return card;
}


function generateCardForExplaination(style){
  card = `
  <div class="col-lg-12">
    <div class="card border-left-[[%%style%%]] shadow py-2" style="margin-bottom:20px">
      <div class="card-body">
        [[%text%]]
      </div>
    </div>
  </div>
  `;

  if (style == 'Data')
    card = card.replace("[[%%style%%]]", 'success');
  if (style == 'Infrastructure')
    card = card.replace("[[%%style%%]]", 'warning');
  if (style == 'Usage')
    card = card.replace("[[%%style%%]]", 'danger');
  if (style == 'Quality')
    card = card.replace("[[%%style%%]]", 'primary');

  return card;
}