Commit 7349f475: Added a graph to the Ingest page. Fixes Issue #20.

Added a graph to the Ingest page. Fixes Issue #20.

7349f475

Thomas Ryan

committed May 2, 2020

Files

Details



	NumberSearch.DataAccess/Models
	IngestStatistics.cs
	NumberSearch.Mvc/Views/Ingest
	Index.cshtml

IngestStatistics.cs

/NumberSearch.DataAccess/Models/IngestStatistics.cs

View

public DateTime StartDate { get; set; }

public DateTime EndDate { get; set; }

public enum IngestSource

{

DatabaseCleanup,

TeleMessage,

FirstCom,

BulkVS,

All

}

public static async Task<IEnumerable<IngestStatistics>> GetAllAsync(string connectionString)

{

using var connection = new NpgsqlConnection(connectionString);

Index.cshtml

-164+53

/NumberSearch.Mvc/Views/Ingest/Index.cshtml

View

var margin = {

top: 20,

right: 20,

bottom: 30,

left: 50

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

var state = 0;

var graphData = Model?.Where(x => x.IngestedFrom == "All").Take(31).ToArray();

var commaString = string.Empty;

foreach (var ingest in Model)

foreach (var ingest in graphData)

{

if (ingest.IngestedFrom == "All")

{

commaString += $"{ingest.NumbersRetrived}, ";

}

@Html.Raw($"var numbersRetrivedArr = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in Model)

foreach (var ingest in graphData)

{

if (ingest.IngestedFrom == "All")

{

commaString += $"{ingest.IngestedNew}, ";

}

@Html.Raw($"var ingestedNewArr = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in Model)

foreach (var ingest in graphData)

{

if (ingest.IngestedFrom == "All")

{

commaString += $"{ingest.FailedToIngest}, ";

}

@Html.Raw($"var failedToIngestArr = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in Model)

{

if (ingest.IngestedFrom == "All")

foreach (var ingest in graphData)

{

commaString += $"{ingest.UpdatedExisting}, ";

}

@Html.Raw($"var updatedExisting = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in Model)

{

if (ingest.IngestedFrom == "All")

foreach (var ingest in graphData)

{

commaString += $"{ingest.Unchanged}, ";

}

@Html.Raw($"var unchangedArr = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in Model)

{

if (ingest.IngestedFrom == "All")

foreach (var ingest in graphData)

{

commaString += $"{ingest.Removed}, ";

}

@Html.Raw($"var removedArr = [{commaString}];");

}

commaString = string.Empty;

foreach (var ingest in graphData)

{

commaString += $"\"{ingest.StartDate.ToShortDateString()}\", ";

}

@Html.Raw($"var removedArr = [{commaString}];");

@Html.Raw($"var dateArr = [{commaString}];");

}

const numIngests = Array.from({

numIngests: numIngestsArr

}

const data = []

function drawChart(chartNum) {

// set the dimensions and margins of the graph

var margin = {

top: 10,

right: 30,

bottom: 30,

left: 60

width = 460 - margin.left - margin.right,

height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page

var svg = d3.select("#my_dataviz")

.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform",

"translate(" + margin.left + "," + margin.top + ")");

//Read the data

//Use the margin convention practice

var margin = {

top: 50,

right: 50,

bottom: 50,

left: 50

width = window.innerWidth - margin.left - margin.right // Use the window's width

height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints

var n = 21;

// 5. X scale will use the index of our data

var xScale = d3.scaleLinear()

.domain([0, d3.values(youData)[1][chartNum].values.length]) // input

.range([0, width]); // output

var yMax = d3.max(d3.values(youData)[1][chartNum].values);

//----> 6. Y scale will use the randomly generate number <-------

var yScale = d3.scaleLinear()

.domain([0, yMax]) // input

.range([height, 0]); // output

// 7. d3's line generator

var line = d3.line()

.x(function (d, i) {

return xScale(i);

}) // set the x values for the line generator

.y(function (d) {

return yScale(d.y);

}) // set the y values for the line generator

.curve(d3.curveMonotoneX) // apply smoothing to the line

console.log(chartNum)

console.log(d3.values(youData)[1][chartNum])

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number

var dataset = d3.range(numbersRetrivedArr.length).map(function (d) {

return {

"y": d3.values(youData)[1][chartNum].values[d]

}

})

// 1. Add the SVG to the page and employ #2

var svg = d3.select("#wolololol").append("svg")

.attr("id", "thisischart")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 3. Call the x axis in a group tag

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag

svg.append("g")

.attr("class", "y axis")

.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator

svg.append("path")

.datum(dataset) // 10. Binds data to the line

.attr("class", "line") // Assign a class for styling

.attr("d", line); // 11. Calls the line generator

// 12. Appends a circle for each datapoint

svg.selectAll(".dot")

.data(dataset)

.enter().append("circle") // Uses the enter().append() method

.attr("class", "dot") // Assign a class for styling

.attr("cx", function (d, i) {

return xScale(i)

})

.attr("cy", function (d) {

return yScale(d.y)

})

.attr("r", 5)

.on("mouseover", function (a, b, c) {

console.log(a)

this.attr('class', 'focus')

})

.on("mouseout", function () { })

}

function nextChart() {

console.log(d3.values(youData)[1].length - 1);

if (state = 0) {

drawChart(state);

break;

}

if (state < d3.values(youData)[1].length - 1) {

state++;

} else {

state = 0;

}

var el = document.getElementById('thisischart');

console.log(el);

el.remove();

drawChart(state);

}

</script>

<h1 class="display-4">Ingests</h1>

</div>

</div>

<button onclick="nextChart()">Next Chart</button>

if (Model != null && Model?.Length > 0)

}

</div>

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

type: 'line',

data: {

labels: dateArr,

datasets: [{

label: 'Count of Phone Numbers Ingested',

data: numbersRetrivedArr,

backgroundColor: [

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero: false

}

}]

}

});

</script>