456 lines
12 KiB
JavaScript
456 lines
12 KiB
JavaScript
|
/*
|
|||
|
|
* @project: TERA
|
|||
|
|
* @version: Development (beta)
|
|||
|
|
* @license: MIT (not for evil)
|
|||
|
|
* @copyright: Yuriy Ivanov (Vtools) 2017-2019 [progr76@gmail.com]
|
|||
|
|
* Web: https://terafoundation.org
|
|||
|
|
* Twitter: https://twitter.com/terafoundation
|
|||
|
|
* Telegram: https://t.me/terafoundation
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
var DiagramMap = {};
|
|||
|
|
var DiagramMapId = {};
|
|||
|
|
var LMouseOn = false;
|
|||
|
|
if(!window.toStaticHTML)
|
|||
|
|
toStaticHTML = function (Str)
|
|||
|
|
{
|
|||
|
|
return Str;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function Rigth(Str,Count)
|
|||
|
|
{
|
|||
|
|
if(Str.length < Count)
|
|||
|
|
return Str;
|
|||
|
|
else
|
|||
|
|
return Str.substr(Str.length - Count);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function SetHTMLDiagramItem(Item,width)
|
|||
|
|
{
|
|||
|
|
Item.mouseX = width - 50;
|
|||
|
|
if(Item.Extern || Item.Delete)
|
|||
|
|
return ;
|
|||
|
|
var MinHeight = 80;
|
|||
|
|
if(!Item.id)
|
|||
|
|
Item.id = "DgrmId" + Item.num;
|
|||
|
|
DiagramMap[Item.name] = Item;
|
|||
|
|
DiagramMapId[Item.id] = Item;
|
|||
|
|
if(Item.isLine)
|
|||
|
|
{
|
|||
|
|
if(Item.text)
|
|||
|
|
Str = "<BR><B>" + Item.text + '</B><INPUT type="button" class="delete" onclick="DeleteDiagram(\'' + Item.id + '\')" value="X">';
|
|||
|
|
else
|
|||
|
|
Str = "<HR>";
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
Str = '<BR><DIV>' + Item.text + '<INPUT type="button" class="delete" onclick="DeleteDiagram(\'' + Item.id + '\')" value="X"></DIV>\
|
|||
|
|
<BR><canvas class="DIAGRAM" width="' + width + '" height="' + MinHeight + '" id="' + Item.id + '"></canvas>';
|
|||
|
|
}
|
|||
|
|
var ElBlock = document.getElementById("B" + Item.id);
|
|||
|
|
if(ElBlock)
|
|||
|
|
ElBlock.innerHTML = toStaticHTML(Str);
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
var diargams = document.getElementById("diargams");
|
|||
|
|
diargams.innerHTML = toStaticHTML(diargams.innerHTML + "<DIV id='B" + Item.id + "'>" + Str + "</DIV>");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function SetDiagramMouseX(event,mode)
|
|||
|
|
{
|
|||
|
|
if(event.srcElement && event.srcElement.className && event.srcElement.className.indexOf && event.srcElement.className.indexOf("DIAGRAM") >= 0)
|
|||
|
|
{
|
|||
|
|
if(mode === "down")
|
|||
|
|
LMouseOn = true;
|
|||
|
|
else
|
|||
|
|
if(mode === "up")
|
|||
|
|
LMouseOn = false;
|
|||
|
|
event.preventDefault();
|
|||
|
|
if(LMouseOn === true)
|
|||
|
|
{
|
|||
|
|
var obj = event.srcElement;
|
|||
|
|
var mouse = getMouse(obj, event);
|
|||
|
|
if(event.ctrlKey === true)
|
|||
|
|
{
|
|||
|
|
for(var key in DiagramMapId)
|
|||
|
|
{
|
|||
|
|
var Item = DiagramMapId[key];
|
|||
|
|
Item.mouseX = mouse.x;
|
|||
|
|
DrawDiagram(Item);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
var Item = DiagramMapId[obj.id];
|
|||
|
|
if(Item)
|
|||
|
|
{
|
|||
|
|
Item.mouseX = mouse.x;
|
|||
|
|
DrawDiagram(Item);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function DrawDiagram(Item)
|
|||
|
|
{
|
|||
|
|
if(Item.Delete)
|
|||
|
|
return ;
|
|||
|
|
var arr = Item.arr;
|
|||
|
|
if(!arr)
|
|||
|
|
arr = Item.ArrList;
|
|||
|
|
var arrX = Item.arrX;
|
|||
|
|
var GreenValue = Item.value;
|
|||
|
|
var StepTime = Item.steptime;
|
|||
|
|
var StartNumber = Item.startnumber;
|
|||
|
|
var StartServer = Item.starttime;
|
|||
|
|
var mouseX = Item.mouseX;
|
|||
|
|
var KPrecision = Item.KPrecision;
|
|||
|
|
if(!KPrecision)
|
|||
|
|
KPrecision = 1;
|
|||
|
|
if(!arr)
|
|||
|
|
return ;
|
|||
|
|
var obj = document.getElementById(Item.id);
|
|||
|
|
var ctx = obj.getContext('2d');
|
|||
|
|
var Left = 50;
|
|||
|
|
var Top = 11;
|
|||
|
|
var Button = 15;
|
|||
|
|
var Right = 50;
|
|||
|
|
if(Item.fillStyle)
|
|||
|
|
ctx.fillStyle = Item.fillStyle;
|
|||
|
|
else
|
|||
|
|
ctx.fillStyle = "#FFF";
|
|||
|
|
ctx.fillRect(0, 0, obj.width, obj.height);
|
|||
|
|
if(arr.length <= 0)
|
|||
|
|
return ;
|
|||
|
|
var Pow2 = 0;
|
|||
|
|
if(Item.name.substr(Item.name.length - 2) === "**")
|
|||
|
|
Pow2 = 1;
|
|||
|
|
var MaxValue = arr[0];
|
|||
|
|
var MinValue = arr[0];
|
|||
|
|
var AvgValue = 0;
|
|||
|
|
for(var i = 0; i < arr.length; i++)
|
|||
|
|
{
|
|||
|
|
if(arr[i] > MaxValue)
|
|||
|
|
MaxValue = arr[i];
|
|||
|
|
if(arr[i] < MinValue)
|
|||
|
|
MinValue = arr[i];
|
|||
|
|
if(arr[i])
|
|||
|
|
AvgValue += arr[i];
|
|||
|
|
}
|
|||
|
|
if(Item.name.substr(0, 4) !== "MAX:" || !Item.AvgValue)
|
|||
|
|
AvgValue = AvgValue / arr.length;
|
|||
|
|
else
|
|||
|
|
AvgValue = Item.AvgValue;
|
|||
|
|
if(Pow2 && AvgValue)
|
|||
|
|
AvgValue = Math.pow(2, AvgValue) / 1000000;
|
|||
|
|
if(AvgValue < 50)
|
|||
|
|
AvgValue = AvgValue.toFixed(2);
|
|||
|
|
else
|
|||
|
|
AvgValue = Math.floor(AvgValue);
|
|||
|
|
if(Item.MaxValue !== undefined)
|
|||
|
|
MaxValue = Item.MaxValue;
|
|||
|
|
if(Pow2 && MaxValue)
|
|||
|
|
MaxValue = Math.pow(2, MaxValue) / 1000000;
|
|||
|
|
var HValue = MaxValue;
|
|||
|
|
if(HValue <= 0)
|
|||
|
|
HValue = 1;
|
|||
|
|
var KX = (obj.width - Left - Right) / arr.length;
|
|||
|
|
var KY = (obj.height - Top - Button) / HValue;
|
|||
|
|
var DeltaY = 0;
|
|||
|
|
var bLine = Item.line;
|
|||
|
|
if(Item.zero)
|
|||
|
|
{
|
|||
|
|
bLine = 1;
|
|||
|
|
DeltaY -= Item.zero * KY;
|
|||
|
|
MaxValue -= Item.zero;
|
|||
|
|
AvgValue -= Item.zero;
|
|||
|
|
}
|
|||
|
|
MaxValue = Math.floor(MaxValue + 0.5);
|
|||
|
|
if(bLine)
|
|||
|
|
ctx.lineWidth = 3;
|
|||
|
|
else
|
|||
|
|
if(KX > 1)
|
|||
|
|
ctx.lineWidth = KX;
|
|||
|
|
else
|
|||
|
|
ctx.lineWidth = 1;
|
|||
|
|
var StartX = Left;
|
|||
|
|
var StartY = obj.height - Button;
|
|||
|
|
var mouseValueX = 0;
|
|||
|
|
var mouseValue = undefined;
|
|||
|
|
var mouseColor = undefined;
|
|||
|
|
|
|||
|
|
function DrawLines(arr,mode,color)
|
|||
|
|
{
|
|||
|
|
var WasMove0 = 0;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.moveTo(Left, obj.height - Button);
|
|||
|
|
ctx.strokeStyle = color;
|
|||
|
|
var PrevX = undefined;
|
|||
|
|
for(var i = 0; i < arr.length; i++)
|
|||
|
|
{
|
|||
|
|
var Value = arr[i];
|
|||
|
|
if(!Value)
|
|||
|
|
Value = 0;
|
|||
|
|
if(Value)
|
|||
|
|
{
|
|||
|
|
if(Pow2)
|
|||
|
|
Value = Math.pow(2, Value) / 1000000;
|
|||
|
|
}
|
|||
|
|
if(mode === "green")
|
|||
|
|
{
|
|||
|
|
if(Value > GreenValue)
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
if(mode === "red")
|
|||
|
|
{
|
|||
|
|
if(Value <= GreenValue)
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
var Value1 = Value;
|
|||
|
|
if(Value1 > GreenValue)
|
|||
|
|
Value1 = GreenValue;
|
|||
|
|
var VX1 = Math.floor(Value1 * KY);
|
|||
|
|
var VX2 = Math.floor(Value * KY);
|
|||
|
|
if(VX1 === VX2)
|
|||
|
|
VX1 -= 2;
|
|||
|
|
var x = StartX + ctx.lineWidth / 2 + (i) * KX;
|
|||
|
|
if(bLine)
|
|||
|
|
{
|
|||
|
|
if(!WasMove0)
|
|||
|
|
{
|
|||
|
|
WasMove0 = 1;
|
|||
|
|
ctx.moveTo(x, StartY - VX2);
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
ctx.lineTo(x, StartY - VX2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
ctx.moveTo(x, StartY - VX1);
|
|||
|
|
ctx.lineTo(x, StartY - VX2);
|
|||
|
|
}
|
|||
|
|
if(mouseX)
|
|||
|
|
{
|
|||
|
|
var deltaCur = Math.abs(x - mouseX);
|
|||
|
|
var deltaWas = Math.abs(mouseValueX - mouseX);
|
|||
|
|
if(deltaCur < deltaWas)
|
|||
|
|
{
|
|||
|
|
mouseValueX = x;
|
|||
|
|
mouseValue = Value;
|
|||
|
|
if(Item.zero)
|
|||
|
|
mouseValue -= Item.zero;
|
|||
|
|
mouseColor = color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ctx.stroke();
|
|||
|
|
};
|
|||
|
|
if(!Item.red)
|
|||
|
|
Item.red = "#A00";
|
|||
|
|
if(bLine)
|
|||
|
|
{
|
|||
|
|
DrawLines(arr, "line", Item.red);
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
DrawLines(arr, "red", Item.red);
|
|||
|
|
if(GreenValue > 0)
|
|||
|
|
DrawLines(arr, "green", "#0A0");
|
|||
|
|
}
|
|||
|
|
var MaxValueText = GetValueByItemProperty(MaxValue, Item);
|
|||
|
|
var AvgValueText = GetValueByItemProperty(AvgValue, Item);
|
|||
|
|
ctx.lineWidth = 0.5;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.strokeStyle = "#000";
|
|||
|
|
Left--;
|
|||
|
|
StartX--;
|
|||
|
|
StartY += 2;
|
|||
|
|
ctx.moveTo(Left, Top);
|
|||
|
|
ctx.lineTo(StartX, StartY);
|
|||
|
|
ctx.moveTo(StartX, StartY + DeltaY);
|
|||
|
|
ctx.lineTo(obj.width - 10, StartY + DeltaY);
|
|||
|
|
ctx.stroke();
|
|||
|
|
if(mouseX !== undefined)
|
|||
|
|
{
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.lineWidth = 0.5;
|
|||
|
|
ctx.strokeStyle = "#00F";
|
|||
|
|
ctx.moveTo(mouseX, Top);
|
|||
|
|
ctx.lineTo(mouseX, StartY);
|
|||
|
|
ctx.stroke();
|
|||
|
|
if(mouseValue !== undefined)
|
|||
|
|
{
|
|||
|
|
ctx.fillStyle = mouseColor;
|
|||
|
|
var Val = GetValueByItemProperty(mouseValue, Item);
|
|||
|
|
var mouseTextX = mouseX;
|
|||
|
|
if(Item.MouseText)
|
|||
|
|
mouseTextX -= 3 * Item.MouseText.length;
|
|||
|
|
else
|
|||
|
|
Item.MouseText = "";
|
|||
|
|
ctx.fillText("" + Val + Item.MouseText, mouseTextX - 3, Top - 2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ctx.fillStyle = "#000";
|
|||
|
|
if(!Item.NoTextMax)
|
|||
|
|
ctx.fillText(Rigth(" " + MaxValueText, 8), 0, Top - 3);
|
|||
|
|
if(MaxValue > 0 && AvgValue > 0)
|
|||
|
|
{
|
|||
|
|
var heigh = StartY - Top;
|
|||
|
|
var KKY = AvgValue / MaxValue;
|
|||
|
|
var y = (heigh - Math.floor(KKY * heigh));
|
|||
|
|
var yT = y;
|
|||
|
|
if(yT < 10)
|
|||
|
|
{
|
|||
|
|
yT = 10;
|
|||
|
|
}
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.moveTo(Left - 2, y + Top);
|
|||
|
|
ctx.lineTo(Left + 2, y + Top);
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.strokeStyle = "#00F";
|
|||
|
|
ctx.fillText(Rigth(" " + AvgValueText, 8), 0, yT + Top);
|
|||
|
|
}
|
|||
|
|
var CountNameX = 10;
|
|||
|
|
if(arr.length < CountNameX)
|
|||
|
|
CountNameX = arr.length;
|
|||
|
|
var KX3 = (obj.width - Left - Right) / CountNameX;
|
|||
|
|
var KDelitel = 1;
|
|||
|
|
var Step = arr.length / CountNameX;
|
|||
|
|
var StartTime, bNumber;
|
|||
|
|
if(arrX)
|
|||
|
|
{
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
if(StartNumber !== undefined)
|
|||
|
|
{
|
|||
|
|
bNumber = 1;
|
|||
|
|
StartTime = StartNumber;
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
if(StartServer)
|
|||
|
|
{
|
|||
|
|
bNumber = 1;
|
|||
|
|
StartTime = Math.floor(((Date.now() - StartServer) - StepTime * arr.length * 1000) / 1000);
|
|||
|
|
if(StartTime < 0)
|
|||
|
|
StartTime = 0;
|
|||
|
|
var KDelitel = Math.floor(Step / 10) * 10;
|
|||
|
|
if(KDelitel == 0)
|
|||
|
|
KDelitel = 1;
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
bNumber = 0;
|
|||
|
|
StartTime = Date.now() - StepTime * arr.length * 1000;
|
|||
|
|
StartX = StartX - 16;
|
|||
|
|
}
|
|||
|
|
for(i = 0; i <= CountNameX; i++)
|
|||
|
|
{
|
|||
|
|
var Val;
|
|||
|
|
if(i === CountNameX)
|
|||
|
|
{
|
|||
|
|
Val = arr.length * StepTime;
|
|||
|
|
KDelitel = 1;
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
if(i === 0)
|
|||
|
|
Val = 0;
|
|||
|
|
else
|
|||
|
|
Val = i * Step * StepTime;
|
|||
|
|
var Str;
|
|||
|
|
if(arrX)
|
|||
|
|
{
|
|||
|
|
Val = Math.floor(Val);
|
|||
|
|
Str = arrX[Val];
|
|||
|
|
if(Str === undefined)
|
|||
|
|
Str = "";
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
if(bNumber)
|
|||
|
|
{
|
|||
|
|
Val = Math.floor((StartTime + Val) / KDelitel) * KDelitel;
|
|||
|
|
Str = Val;
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
var Time = new Date(StartTime + Val * 1000);
|
|||
|
|
Str = "" + Time.getHours();
|
|||
|
|
Str += ":" + Rigth("0" + Time.getMinutes(), 2);
|
|||
|
|
Str += ":" + Rigth("0" + Time.getSeconds(), 2);
|
|||
|
|
}
|
|||
|
|
ctx.fillText(Str, StartX + i * KX3, StartY + 10);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function GetValueByItemProperty(Value,Item)
|
|||
|
|
{
|
|||
|
|
if(Item.MathPow && Item.MathDiv)
|
|||
|
|
{
|
|||
|
|
Value = Math.pow(Item.MathPow, Value) / Item.MathDiv;
|
|||
|
|
}
|
|||
|
|
var KPrecision = Item.KPrecision;
|
|||
|
|
if(!Item.KPrecision)
|
|||
|
|
KPrecision = 1;
|
|||
|
|
Value = Math.floor(Value * KPrecision + 0.5) / KPrecision;
|
|||
|
|
return Value;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function InitDiagramByArr(Arr,width)
|
|||
|
|
{
|
|||
|
|
for(var i = 0; i < Arr.length; i++)
|
|||
|
|
{
|
|||
|
|
Arr[i].num = i + 1;
|
|||
|
|
SetHTMLDiagramItem(Arr[i], width);
|
|||
|
|
}
|
|||
|
|
window.addEventListener('mousedown', function (event)
|
|||
|
|
{
|
|||
|
|
SetDiagramMouseX(event, "down");
|
|||
|
|
}, false);
|
|||
|
|
window.addEventListener('mouseup', function (event)
|
|||
|
|
{
|
|||
|
|
SetDiagramMouseX(event, "up");
|
|||
|
|
}, false);
|
|||
|
|
window.addEventListener('onmousemove', function (event)
|
|||
|
|
{
|
|||
|
|
SetDiagramMouseX(event, "move");
|
|||
|
|
}, false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getMouse(canvas,e)
|
|||
|
|
{
|
|||
|
|
var x = e.clientX - getTrueOffsetLeft(canvas);
|
|||
|
|
if(window.pageXOffset)
|
|||
|
|
x = x + window.pageXOffset;
|
|||
|
|
var y = e.clientY - getTrueOffsetTop(canvas);
|
|||
|
|
if(window.pageYOffset)
|
|||
|
|
y = y + window.pageYOffset;
|
|||
|
|
var coord = {x:x, y:y};
|
|||
|
|
return coord;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getTrueOffsetLeft(ele)
|
|||
|
|
{
|
|||
|
|
var n = 0;
|
|||
|
|
while(ele)
|
|||
|
|
{
|
|||
|
|
n += ele.offsetLeft || 0;
|
|||
|
|
ele = ele.offsetParent;
|
|||
|
|
}
|
|||
|
|
return n;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getTrueOffsetTop(ele)
|
|||
|
|
{
|
|||
|
|
var n = 0;
|
|||
|
|
while(ele)
|
|||
|
|
{
|
|||
|
|
n += ele.offsetTop || 0;
|
|||
|
|
ele = ele.offsetParent;
|
|||
|
|
}
|
|||
|
|
return n;
|
|||
|
|
};
|