update code
This commit is contained in:
455
Source/HTML/JS/diagram.js
Normal file
455
Source/HTML/JS/diagram.js
Normal file
@@ -0,0 +1,455 @@
|
||||
/*
|
||||
* @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;
|
||||
};
|
||||
Reference in New Issue
Block a user