OXIESEC PANEL
- Current Dir:
/
/
home
/
cubot
/
docroot
/
showcase
/
js
/
D3
/
plugins
Server IP: 139.59.38.164
Upload:
Create Dir:
Name
Size
Modified
Perms
📁
..
-
08/14/2022 11:05:22 AM
rwxr-xr-x
📄
Radar.js
8.86 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
bar.js
17.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.css
422 bytes
08/14/2022 11:05:19 AM
rw-r--r--
📄
bullet.js
10.65 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
calendar.js
16.63 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
calender.css
541 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo.js
16.74 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
combo_2.js
17.91 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
combo_wip.js
16.61 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
commonFunc.js
25.28 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
customChart.js
577 bytes
08/14/2022 11:05:20 AM
rw-r--r--
📄
d3Charts.css
2.88 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
donut.js
5.67 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
filledAreaPercent.js
17.95 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
funnel.js
6.03 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
funnel.js_previous_o4aug17
5.86 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
gauged.js
15.3 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
groupbar.js
13.18 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
groupbar_23Aug2019.js
10.85 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
heatmap.js
9.77 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
html2canvas.min.js
161.47 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJson.js
1.64 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
makeJsonmulti.js
3.75 KB
08/14/2022 11:05:18 AM
rw-r--r--
📄
multiLine.js
17.24 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
multipleDonut.js
5.29 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
pie.js
4.52 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
radar.js
6.49 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
saveSvgAsPng.js
14.62 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
stackedAreaDate.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedAreaDate_bkup23Nov2020.js
17.56 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stackedbar_bkup21Apr2020.js
10.72 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
stock.js
13.6 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
sun.js
7.59 KB
08/14/2022 11:05:20 AM
rw-r--r--
📄
sunburst.js
7.13 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tableChart.js
11.54 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
tableChart_07Jan2020.js
6.7 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
tree.js
7.34 KB
08/14/2022 11:05:19 AM
rw-r--r--
📄
waterfall.js
9.17 KB
08/14/2022 11:05:21 AM
rw-r--r--
📄
zoomTree.js
7.59 KB
08/14/2022 11:05:19 AM
rw-r--r--
Editing: gauged.js
Close
function drawGaugeChart(Data, divId, Title, Width, Height, Ndim, Nmeas, MeasFormats, Dimensions, Measures, dispObj, MinMaxArray){ var json=makeJsonFromArrayNew(Data, Ndim, Nmeas, MeasFormats, dispObj); makeParentsJson(json); resolveComputeMeasure(json, dispObj.RD.General.Measures); var margin = {top: 20, right: 40, bottom: Height/4, left: 30}; d3.select("#"+divId).html('<div class="myChart"><div class="svgLegend"></div><div class="tipsy"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div></div>'); d3.selectAll(".tipsy").style("display", "none"); var svg = findSvgArea(Nmeas,dispObj,json, Width, Height, divId), height = svg[2] - margin.top-50, width = dispObj.getMultiAxes() ? svg[3]- margin.left - margin.right : svg[3] - margin.left -30, measNum = 1, radius = Math.min(svg[2], svg[3]) / 2, curNode = json, cnc= new Array(), r = Math.ceil(Math.sqrt(cnc.length)); if(dispObj.getShowLegend()) makeLegend(svg,Nmeas,measNum,createGauges,0,json,0,0, dispObj); var gauges = []; function createGauge(name, label, measNum, min, max) { var maxdata = d3.max(cnc,function(d){return +d.size[measNum-1]}), mindata = d3.min(cnc,function(d){return +d.size[measNum-1]}); if (mindata==maxdata) mindata = 0; row=0; var config = { size: Math.max((Math.min(svg[2], svg[3]))/(r),200), //size: svg[3]>svg[2] ? svg[3]/r : svg[2]/r, label: label, //min: mindata, //max: maxdata, min:0, max:100, minorTicks: 5 } r = cnc.length*2; if(cnc.length !=1){ do{ if(!(svg[3]*2/r > svg[2])) r=r/2; else { r=cnc.length; break; } row++; }while(((svg[3]/r > svg[2]) || (svg[3]/r < svg[2]/(row+1)))); } else { row=1; r=1; } row=row||1; //r = Math.ceil(r); config.size = Math.min(svg[3]/Math.ceil(r),(svg[2]/row)); /*var range = config.max - config.min; config.redZones = [{ from: config.min, to: config.min + range*0.3 }]; config.yellowZones = [{ from: config.min + range*0.3, to: config.min + range*0.6 }]; config.greenZones = [{ from: config.min + range*0.6, to: config.max }];*/ var Threshold=dispObj.getThreshold(); config.redZones = [{ from: Threshold.redFrom, to:Threshold.redTo}]; config.yellowZones = [{ from: Threshold.yellowFrom , to: Threshold.yellowTo}]; config.greenZones = [{ from: Threshold.greenFrom, to: Threshold.greenTo }]; gauges[name] = new Gauge("GaugeContainer", config, measNum); gauges[name].render(); } function clickGaugeLeg(divId, d,i, svg, index,y,width,height,json,measNum,k,c, dispObj, MeasFormats){ curNode=d; createGauges(measNum); } var j=0,row=0,col=0,k=0; function createGauges(measNum) { j=row=col=k=0; //reset gauge number svg[0].selectAll("g").remove(); cnc=new Array(); if(curNode.children.length > svg[3]*svg[2]/14400) for(var i=0; i< Math.floor(svg[3]*svg[2]/14400);i++) cnc[i] = curNode.children[i]; else cnc=curNode.children; r = Math.ceil(Math.sqrt(cnc.length)); if(r==1) svg[0].attr("transform", "translate(" + (svg[3]/2 - radius) + "," + margin.top + ")"); else svg[0].attr("transform", "translate(0" + "," + margin.top + ")"); for (var key in gauges) delete gauges[key]; for(var i=0;i<cnc.length;i++)//added createGauge(cnc[i].name, cnc[i].name, measNum); updateGauges(measNum); } function updateGauges(measNum) { var i=0; for (var key in gauges) { //var value = cnc[i++].size[measNum - 1]; var value = cnc[i].percent[measNum-1].substr(0,cnc[i].percent[measNum-1].length-1); i++; gauges[key].redraw(value); } } createGauges(measNum); function Gauge(placeholderName, configuration, measNum){ this.placeholderName = placeholderName; var self = this; // for internal d3 functions this.configure = function(configuration) { this.config = configuration; this.config.size = this.config.size * 0.9; this.config.radius = this.config.size * 0.97 / 2; this.config.cx = this.config.size / 2; this.config.cy = this.config.size / 2; this.config.min = undefined != configuration.min ? configuration.min : 0; this.config.max = undefined != configuration.max ? configuration.max : 100; this.config.range = this.config.max - this.config.min; this.config.majorTicks = configuration.majorTicks || 5; this.config.minorTicks = configuration.minorTicks || 2; this.config.greenColor = configuration.greenColor || "#109618"; this.config.yellowColor = configuration.yellowColor || "#FF9900"; this.config.redColor = configuration.redColor || "#DC3912"; this.config.transitionDuration = configuration.transitionDuration || 700; } this.render = function() { var size=this.config.size; this.body = svg[0].attr("class", "gauge") .append("g") .attr("transform",function(){ /*if((j%r != 0) || j==0) return "translate("+((size+size/5)*col+++20)+","+(size*row+20)+")" else{ col=0; row++; return "translate("+(size*col+++20)+","+(size*row+20)+")"; }*/ r = r>3 ? Math.floor(r) : r; var gap = (svg[3]-Math.ceil(r)*size)/(Math.ceil(r)); if(r == 1){ return "translate(0,"+(10+size*k)+")"; } else if((col)< r){ return "translate("+(gap/2+(gap+size)*col++) +","+(10+size*k)+")"; } else { col=0 k++; return "translate("+(gap/2+(gap+size)*(col++)) +","+(10+size*k)+")" } }) .attr("id", j++) .on("click",function(){ if(typeof cnc[this.id].children != "undefined"){ curNode=cnc[this.id]; cnc=cnc[this.id].children; createGauges(measNum); } else alert("No further dimensions."); }) .on("mouseover", function(){showToolTips(divId, cnc[this.id], measNum,MeasFormats)}) .on("mouseout", function(d,i){hideToolTip(divId, d,i)}); this.body.append("svg:path").attr("d", d3.svg.arc() .startAngle(-(Math.PI/2+0.18)) .endAngle(Math.PI/2+0.18) .innerRadius(0.95 * this.config.radius) .outerRadius(1 * this.config.radius)) .attr("transform","translate("+this.config.cx+","+this.config.cy+")") .style("stroke","lightblue") .style("fill","#4684EE") this.body.append("svg:line") .attr("x1", this.config.cx - this.config.radius ) .attr("y1", this.config.cy+Math.sin(0.185)*this.config.radius) .attr("x2", this.config.cx+ this.config.radius) .attr("y2", this.config.cy+Math.sin(0.185)*this.config.radius) .style("stroke","#4684EE") .style("stroke-width",0.05 * this.config.radius) /*this.body.append("svg:circle") .attr("cx", this.config.cx) .attr("cy", this.config.cy) .attr("r", this.config.radius) .style("fill", "#ccc") .style("stroke", "#000") .style("stroke-width", "0.5px"); this.body.append("svg:circle") .attr("cx", this.config.cx) .attr("cy", this.config.cy) .attr("r", 0.9 * this.config.radius) .attr("id", j++) .style("fill", "#fff") .style("stroke", "#e0e0e0") .style("stroke-width", "2px") .on("click",function(){ if(typeof cnc[this.id].children != "undefined"){ cnc=cnc[this.id].children; createGauges(measNum); } }) .on("mouseover", function(){showToolTips(divId, cnc[this.id], measNum)}) .on("mouseout", function(d,i){hideToolTip(divId, d,i)});*/ for (var index in this.config.redZones) { this.drawBand(this.config.redZones[index].from, this.config.redZones[index].to, self.config.redColor); } for (var index in this.config.yellowZones) { this.drawBand(this.config.yellowZones[index].from, this.config.yellowZones[index].to, self.config.yellowColor); } for (var index in this.config.greenZones) { this.drawBand(this.config.greenZones[index].from, this.config.greenZones[index].to, self.config.greenColor); } if (undefined != this.config.label) { var fontSize = Math.round(this.config.size / 9); this.body.append("svg:text") .attr("x", this.config.cx) //.attr("y", this.config.cy / 2 + fontSize / 2) .attr("y", this.config.cy + fontSize*2) .attr("dy", 10) .attr("text-anchor", "middle") .text(cnc[j-1].dimName + " : " + this.config.label.replace("'","'")).call(wrap2,60) //.style("font-size", fontSize + "px") .attr("class", "label") .style("fill", "#333") .style("stroke-width", "0px"); } var midValue = (this.config.min + this.config.max) / 2; var fontSize = Math.round(this.config.size / 16); var majorDelta = this.config.range / (this.config.majorTicks - 1); if(this.config.radius<50){ this.config.minorTicks=3; } for (var major = this.config.min; major <= this.config.max; major += majorDelta) { var minorDelta = majorDelta / this.config.minorTicks; for (var minor = major + minorDelta; minor < Math.min(major + majorDelta, this.config.max); minor += minorDelta) { var point1 = this.valueToPoint(minor, 0.80); var point2 = this.valueToPoint(minor, 0.90); this.body.append("svg:line") .attr("x1", point1.x) .attr("y1", point1.y) .attr("x2", point2.x) .attr("y2", point2.y) .style("stroke", "#666") .style("stroke-width", "1px"); } var point1 = this.valueToPoint(major, 0.75); var point2 = this.valueToPoint(major, 0.90); this.body.append("svg:line") .attr("x1", point1.x) .attr("y1", point1.y) .attr("x2", point2.x) .attr("y2", point2.y) .style("stroke", "#333") .style("stroke-width", "1px"); //if (major == this.config.min || major == this.config.max) { var point = this.valueToPoint(major, 0.70); this.body.append("svg:text") .attr("x", point.x) .attr("y", point.y) .attr("dy", fontSize -5) //.attr("text-anchor", major == this.config.min ? "start" : "end") .attr("text-anchor", major.toFixed(2) < midValue ?"start":major.toFixed(2)==midValue ? "middle":"end") //.text(formatSmallScale(major, MeasFormats[0])) .text(major) //.style("font-size", fontSize*0.9 + "px") .style("fill", "#333") .style("stroke-width", "0px"); } } var pointerLine = d3.svg.line() .x(function(d) { return d.x }) .y(function(d) { return d.y }) .interpolate("basis"); var pointerContainer = this.body.append("svg:g").attr("class", "pointerContainer"); var pointerPath = this.buildPointerPath(midValue); pointerContainer.selectAll("path") .data([pointerPath]) .enter() .append("svg:path") .attr("d", pointerLine) .style("fill", "#4684EE") .style("stroke", "#666") .style("fill-opacity", 0.7) pointerContainer.append("svg:circle") .attr("cx", this.config.cx) .attr("cy", this.config.cy) .attr("r", 0.12 * this.config.radius) .style("fill", "#4684EE") .style("stroke", "#666") .style("opacity", 1); var fontSize = Math.round(this.config.size / 10); pointerContainer.selectAll("text") .data([midValue]) .enter() .append("svg:text") .attr("x", this.config.cx) .attr("y", this.config.size - this.config.cy / 4 - fontSize*2.5) .attr("dy", fontSize / 2) .attr("text-anchor", "middle") //.style("font-size", fontSize + "px") .style("fill", "#000") .style("stroke-width", "0px") this.redraw(this.config.min, 0); } this.buildPointerPath = function(value) { var delta = this.config.range / 13; var head = valueToPoint(value, 0.95); var head1 = valueToPoint(value - delta, 0.12); var head2 = valueToPoint(value + delta, 0.12); var tailValue = value - (this.config.range * (1/(180/360)) / 2); var tail = valueToPoint(tailValue, 0.28); var tail1 = valueToPoint(tailValue - delta, 0.12); var tail2 = valueToPoint(tailValue + delta, 0.12); return [head, head1, tail2, tail, tail1, head2, head]; function valueToPoint(value, factor) { var point = self.valueToPoint(value, factor); point.x -= self.config.cx; point.y -= self.config.cy; return point; } } this.drawBand = function(start, end, color) { if (0 >= end - start) return; this.body.append("svg:path") .style("fill", color) .attr("d", d3.svg.arc() .startAngle(this.valueToRadians(start)) .endAngle(this.valueToRadians(end)) .innerRadius(0.18 * this.config.radius) .outerRadius(0.5 * this.config.radius)) .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" }); } this.redraw = function(value, transitionDuration) { var pointerContainer = this.body.selectAll(".pointerContainer"); pointerContainer.selectAll("text").text(value+"%").attr("dy",10).attr("class", "label"); var pointer = pointerContainer.select("path"); pointer.transition() .duration(undefined != transitionDuration ? transitionDuration : this.config.transitionDuration) .attrTween("transform", function() { var pointerValue = value; if (value > self.config.max) pointerValue = self.config.max + 0.02*self.config.range; else if (value < self.config.min) pointerValue = self.config.min - 0.02*self.config.range; var targetRotation = (self.valueToDegrees(pointerValue) - 90); var currentRotation = self._currentRotation || targetRotation; self._currentRotation = targetRotation; return function(step) { var rotation = currentRotation + (targetRotation-currentRotation)*step; return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(" + rotation + ")"; } }); } this.valueToDegrees = function(value) { //return value / this.config.range * 270 - (this.config.min / this.config.range * 270 + 45); return value / this.config.range * 180 - (this.config.min / this.config.range * 180 ); } this.valueToRadians = function(value) { return this.valueToDegrees(value) * Math.PI / 180; } this.valueToPoint = function(value, factor) { return { x: this.config.cx - this.config.radius * factor * Math.cos(this.valueToRadians(value)), y: this.config.cy - this.config.radius * factor * Math.sin(this.valueToRadians(value)) }; } // initialization this.configure(configuration); updateLegendll(divId, svg, curNode, 0,0,Width,Height,json,measNum,0,clickGaugeLeg); } } function wrap2(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), words = words.filter(function(e){return e}), word, line = [], lineNumber = 0, lineHeight = 1, // ems x = text.attr("x"), y = text.attr("y"), //dy = parseFloat(text.attr("dy")), dy = 1.1, tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; console.log(line) tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); }