Программный комплекс для вычисления характеристик строя, представляющих локальную структуру

Исходный код программы:

Index.cshtml

@using LibiadaWeb. Helpers

@model dynamic

@{

ViewBag. Title = «Вычисление локальных характеристик»;

}

<h2>Вычисление локальных характеристик</h2>

<script type= «text/javascript»>

var divCounter = 0;

var formTable;

$(document).ready (function() {

formTable = $(«table»).dataTable({

bJQueryUI: true,

sPaginationType: «full_numbers»

});

$('form').submit (function() {

$(formTable.fnGetHiddenNodes()).find ('input:checked').attr («hidden», true).appendTo(this);

});

AddCharacteristic();

});

function AddCharacteristic() {

var characteristicTypes = new Array();

var linkUps = new Array();

@foreach (var option in ViewBag.characteristicsList)

{

@:characteristicTypes.push($(«<option></option>»).attr («value»,@option. Value).text ('@option. Text'));

}

@foreach (var option in ViewBag.linkUpsList)

{

@:linkUps.push($(«<option></option>»).attr («value»,@option. Value).text ('@option. Text'));

}

var characteristicsDiv = $(«<div/>»).attr ('name', 'characteristc' + divCounter).attr ('id', 'characteristic' + divCounter);

$(«#characteristics_list»).append(characteristicsDiv);

var selectList = $('<select/>').attr ('name', 'characteristicIds');

for (var i = 0; i < characteristicTypes.length; i++)

{

selectList.append (characteristicTypes[i]);

}

characteristicsDiv.append(selectList);

selectList = $('<select/>').attr ('name', 'linkUpIds');

for (var i = 0; i < linkUps.length; i++)

{

selectList.append (linkUps[i]);

}

characteristicsDiv.append(selectList);

// функция, возвращающая функцию для call back'а

var tempDeleteFunction = function(element) {

return function() {

DeleteElementByName (element.elemName);

};

};

var callBackDeleteFunction = tempDeleteFunction({elemName: 'characteristic' + divCounter});

characteristicsDiv.append($('<input/>').attr ('type', 'button').attr ('value', 'Удалить').click(callBackDeleteFunction));

AppendBr(characteristicsDiv);

divCounter++;

return false;

}

</script>

@using (Html. BeginForm())

{

<table>

<thead>

<tr>

<th>

Название объекта

</th>

</tr>

</thead>

<tbody>

@{

List<MvcHtmlString> mattersList = Html. CheckBoxGroup («matterIds», (List<SelectListItem>) ViewBag.mattersList);

foreach (var item in mattersList)

{

<tr>

<td>

@item

</td>

</tr>

}

}

</tbody>

</table>

<br/>

@Html. Label («Размер окна:»)

<input type = «number» id = «length» name = «length» value= «50»/>

@Html. Label («Размер шага:»)

<input type = «number» id = «step» name = «step» value= «2»/>

<br/>

<br/>

@Html. CheckBox («isDelta», «Считать разницу между характеристиками», null)

<br/>

@Html. CheckBox («isGrowingWindow», «Считать увеличивающееся окно», null)

<br/>

@Html. CheckBox («isFurie», «Быстрое преобразование Фурье», null)

<br/>

@Html. Label («Форма записи:»)

<select name= «notationId»>

@foreach (var option in ViewBag.notationsList)

{

<option value= "@option. Value»>@option. Text</option>

}

</select>

<br/>

<br/>

<input type= «button» onclick= «AddCharacteristic()» value= «Добавить характеристику»/>

<br/>

<div id= «characteristics_list»></div>

<br/>

<br/>

<input type= «submit» value= «Вычислить» />

}

Result.cshtml

@model dynamic

@{

ViewBag. Title = «Локальные характеристики»;

}

<h2>Локальные характеристики цепочки @ViewBag.chainName</h2>

@Scripts. Render («~/bundles/jqueryui»)

@Scripts. Render («~/bundles/Slider»)

@Styles. Render («~/Content/JQAllRange»)

<script type='text/javascript'>

var characteristics = new Array();

var partNames = new Array();

var chainNames = new Array();

$(document).ready (function() {

for (var l = 0; l < $(«table»).length; l++) {

partNames.push (new Array());

var rows = $(«table») [l].tBodies[0].rows;

for (var i = 0; i < rows.length; i++) {

partNames[l].push (rows[i].cells[0].textContent);

}

}

@{

for (int j = 0; j < ViewBag.characteristics. Count; j++)

{

@: characteristics.push (new Array());

var characteristicList = ViewBag.characteristics[j];

for (int i = 0; i < characteristicList. Count; i++)

{

@: characteristics[@j].push (new Array());

var characteristic = characteristicList[i];

for (int k = 0; k < characteristic. Count; k++)

{

String[] tempValue = characteristic[k].ToString().Split (', ');

String value = tempValue. Length == 2? tempValue[0] +».» + tempValue[1]: tempValue[0];

@: characteristics[@j] [@i] [@k] = @value;

}

}

}

for (int k = 0; k < ViewBag.chainNames. Count; k++)

{

@:chainNames.push («@ViewBag.chainNames[k]»);

}

}

$(«table»).dataTable({

bJQueryUI: true,

sPaginationType: «full_numbers»

});

// make the container smaller and add a second container for the master chart

var container = $('#visualization_container')

css ('position', 'relative');

var detailContainer = $('<div id= «detail-container»>')

css({position: 'absolute', top: 0, height: 600, width: '100% '})

appendTo(container);

var masterContainer = $('<div id= «master-container»>')

css({position: 'absolute', top: 500, height: 100, width: '100% '})

appendTo(container);

});

var masterChart, detailChart;

function setScale() {

var min = $(«#slider_container»).rangeSlider («min»);

var max = $(«#slider_container»).rangeSlider («max»);

var detailData = [];

var xAxis = masterChart.xAxis[0];

min =+min;

max =+max;

// reverse engineer the last part of the data

for (var k = 0; k < masterChart.series.length; k++) {

jQuery.each (masterChart.series[k].data, function (i, point) {

if (point.x > min && point.x < max) {

detailData.push({

x: point.x,

y: point.y

});

}

});

}

// move the plot bands to reflect the new detail span

xAxis.removePlotBand('mask');

xAxis.addPlotBand({

id: 'mask',

from: min,

to: max,

color: 'rgba (0, 0, 0, 0.2)'

});

detailChart.series[0].setData(detailData);

}

function createMaster (dataSeries, yMin, yMax) {

masterChart = new Highcharts. Chart({

chart: {

renderTo: 'master-container',

reflow: false,

borderWidth: 0,

backgroundColor: null,

marginLeft: 50,

marginRight: 20,

events: {

// listen to the selection event on the master chart to update the

// extremes of the detail chart

selection: function(event) {

var extremesObject = event.xAxis[0],

min = extremesObject.min,

max = extremesObject.max,

detailData = [],

xAxis = this.xAxis[0];

// reverse engineer the last part of the data

jQuery.each (this.series[0].data, function (i, point) {

if (point.x > min && point.x < max) {

detailData.push({

x: point.x,

y: point.y

});

}

});

// move the plot bands to reflect the new detail span

xAxis.removePlotBand('mask');

xAxis.addPlotBand({

id: 'mask',

from: min,

to: max,

color: 'rgba (0, 0, 0, 0.2)'

});

detailChart.series[0].setData(detailData);

return false;

}

}

},

title: {

text: null

},

xAxis: {

type: 'number',

showLastTickLabel: true,

maxZoom: 3, //

title: {

text: null

}

},

yAxis: {

gridLineWidth: 0,

labels: {

enabled: false

},

title: {

text: null

},

min: 0.6,

showFirstLabel: false

},

tooltip: {

formatter: function() {

return false;

}

},

legend: {

enabled: false

},

credits: {

enabled: false

},

plotOptions: {

area: {fillColor: {linearGradient: [0, 0, 0, 300], stops: []}, lineWidth: 1, marker: {enabled: false, states: {hover: {enabled: true, radius: 5}}}, pointStart: 0, pointInterval: 1, shadow: false, states: {hover: {lineWidth: 1}}},

series: {

lineWidth: 1,

marker: {

enabled: false

},

shadow: false,

states: {

hover: {

lineWidth: 1

}

},

enableMouseTracking: false

}

},

series: dataSeries,

exporting: {

enabled: true

}

}, function(masterChart) {

createDetail (masterChart, dataSeries, yMin, yMax);

});

}

// create the detail chart

function createDetail (masterChart, dataSeries, yMin, yMax) {

// prepare the detail chart

var detailData = [],

detailStart = 0;

jQuery.each (masterChart.series[0].data, function (i, point) {

if (point.x >= detailStart) {

detailData.push (point.y);

}

});

// create a detail chart referenced by a global variable

detailChart = new Highcharts. Chart({

chart: {marginBottom: 120, renderTo: 'detail-container', reflow: false, marginLeft: 50, marginRight: 20, style: {position: 'absolute'}},

credits: {enabled: false},

title: {text: «Локальные характеристики цепочек»},

xAxis: {

title: {text: «Фрагменты цепочки»},

type: 'number'

},

yAxis: {

title: {text: $(«#yaxis option:selected») [0].text},

maxZoom: 0.1,

max: yMax,

min: yMin

},

tooltip: {

formatter: function() {

var point = this.points[0];

return point.series.name + «<br/>» + this.y;

},

shared: true

},

legend: {align: 'left', backgroundColor: '#FFFFFF', borderWidth: 1, floating: true, layout: 'vertical', verticalAlign: 'top', x: 100, y: 50},

plotOptions: {

area: {fillColor: {linearGradient: [0, 0, 0, 300], stops: []}, lineWidth: 1, marker: {enabled: false, states: {hover: {enabled: true, radius: 5}}}, pointStart: 0, pointInterval: 1, shadow: false, states: {hover: {lineWidth: 1}}},

series: {marker: {enabled: false, states: {hover: {enabled: true, radius: 3}}}}

},

series: dataSeries,

exporting: {enabled: false}

});

}

function shift (left, right) {

$(«#slider_container»).rangeSlider («values», left, right);

setScale();

}

function stepSlider(step) {

var min = $(«#slider_container»).rangeSlider («min»);

var max = $(«#slider_container»).rangeSlider («max»);

min =+min;

max =+max;

step =+step;

$(«#slider_container»).rangeSlider («values», min+step, max+step);

}

function GetMaxArrayLength(arrayOfArrays) {

var maxLength = 0;

for (var i = 0; i < arrayOfArrays.length; i++) {

if (arrayOfArrays[i].length > maxLength) {

maxLength = arrayOfArrays[i].length;

}

}

return maxLength;

}

var yVals;

function FillSeries (characteristicId, dataSeries) {

for (var i = 0; i < partNames.length; i++) {

var series = new Object();

series.data = new Array();

series.type = 'area';

series.name = chainNames[i];

for (var j = 0; j < partNames[i].length; j++) {

var y = characteristics[i] [j] [characteristicId];

var pointName = partNames[i] [j];

series.data[j] = new Object();

series.data[j].x = j + 1;

series.data[j].y = y;

series.data[j].name = pointName;

// массив для определения минимального значения для границ графика

yVals.push(y);

}

dataSeries.push(series);

}

}

function CreateChart (dataSeries, minY) {

chart = new Highcharts. Chart({

chart: {renderTo: 'visualization_container', defaultSeriesType: 'scatter', zoomType: 'x'},

legend: {align: 'left', backgroundColor: '#FFFFFF', borderWidth: 1, floating: true, layout: 'vertical', verticalAlign: 'top', x: 100, y: 50},

plotOptions: {area: {fillColor: {linearGradient: [0, 0, 0, 300], stops: []}, lineWidth: 1, marker: {enabled: false, states: {hover: {enabled: true, radius: 5}}}, pointStart: 0, pointInterval: 1, shadow: false, states: {hover: {lineWidth: 1}}}},

title: {text: «Локальные характеристики цепочек»},

tooltip: {

formatter: function() {

return this.point.name + «<br/>» + this.y;

}

},

xAxis: {min: 0, maxZoom: 3, title: {text: 'Фрагменты цепочки'}},

yAxis: {endOnTick: false, startOnTick: false, min: minY, title: {text: $(«#yaxis option:selected») [0].text}},

series: dataSeries

});

}

function getBorderOfArrows() {

var min = $(«#slider_container»).rangeSlider («min»);

var max = $(«#slider_container»).rangeSlider («max»);

$.ajax({

type: «GET»,

//url

data: {«min»:min, «max»:max},

success:result

});

function result(data) {

alert(data);

return false;

}

}

function DrawChart() {

yVals = new Array();

var dataSeries = new Array();

slider = $(«#slider_container»).rangeSlider({

bounds: {min: 0, max: GetMaxArrayLength(partNames)},

defaultValues: {min: 0, max: GetMaxArrayLength(partNames)},

wheelMode: «zoom»,

valueLabels: «show»,

step: false,

scales: [

// Primary scale

{

first: function(val) {return val;},

next: function(val) {return val + 10;},

stop: function(val) {return false;},

label: function(val) {return val;}

},

// Secondary scale

{

first: function(val) {return val;},

next: function(val) {

if (val% 10 === 9) {

return val + 2;

}

return val + 1;

},

stop: function() {return false;},

label: function() {return null;}

}]

});

$(«#slider_container»).bind («valuesChanging», function (e, data) {

console.log («min:» + data.values.min + «max:» + data.values.max + «step:»);

});

$(«#slider_container»).bind («valuesChanging», function() {

setScale();

});

if ($(«#allGraphics») [0].checked) {

for (var j = 0; j < $(«#yaxis option»).length; j++) {

FillSeries($(«#yaxis option») [j].value, dataSeries);

}

} else {

FillSeries($(«#yaxis option:selected») [0].value, dataSeries);

}

createMaster (dataSeries, Math.min.apply (null, yVals), Math.max.apply (null, yVals));

}

</script>

@for (int k = 0; k < ViewBag.chainNames. Count; k++)

{

<table>

<thead>

<tr>

<th>

@ViewBag.chainNames[k]

</th>

@foreach (var characteristicName in ViewBag.characteristicNames)

{

<th>

@characteristicName

</th>

}

</tr>

</thead>

<tbody>

@for (int i = 0; i < ViewBag.characteristics[k].Count; i++)

{

<tr>

<td id= «chainNameCell»>

@ViewBag.partNames[k] [i]

</td>

@foreach (var characteristic in ViewBag.characteristics[k] [i])

{

<td>

@characteristic

</td>

}

</tr>

}

</tbody>

</table>

}

<br/>

<div id= «visualization_container» style= «width: 800px; height: 630px»></div>

<br/>

<div style= «width: 755px; height: 30px; margin-left: 35px»>

<div id= «slider_container»>

</div>

</div>

<br/>

<div style= «width: 800px; height: 300px;»>

<div id= «control-form» style = «clear:both»>

<label>Левая граница

<input type= «number» id= «leftArrow» name= «leftArrow» value= «5» />

</label>

<label>Правая граница

<input type= «number» id= «rightArrow» name= «rightArrow» value= «10» />

</label>

<input type= «button» value= «сдвиг» onclick= «stepSlider (stepOfWindow.value);»/>

<input type= «button» value= «значение» onclick= «shift (leftArrow.value, rightArrow.value);»/>

</div>

<div id= «new-params» style = «clear:both; border: 2px solid #aaa; width: 430px; border-radius: 10px; padding: 5px;»>

<label>Изменить параметры разбиения</label>

<label>Шаг окна

<input type= «number» id= «stepOfWindow» name= «stepOfWindow» value= «2»>

</label>

<label>Размер окна

<input type= «number» id= «widthOfWindow» name=»» value= «10»>

</label>

<input type= «button» value= «значение» onclick= «shift (stepOfWindow.value, widthOfWindow.value);»/>

</div>

</div>

@Html. Label («Ось y»)

<select name= «yaxis» id= «yaxis»>

@foreach (var option in ViewBag.characteristicsList)

{

<option value= "@option. Value»>@option. Text</option>

}

</select>

<br/>

<input type= «checkbox» name = «allGraphics» id= «allGraphics» value= «true» >Вывести все графики сразу</input>

<br/>

<button onclick= «DrawChart()» >Отобразить разбиение</button>