OXIESEC PANEL
- Current Dir:
/
/
home
/
cubot
/
docroot
/
showcase
/
js
/
SVG
Server IP: 139.59.38.164
Upload:
Create Dir:
Name
Size
Modified
Perms
📁
..
-
12/31/2022 06:53:36 AM
rwxr-xr-x
📄
SVGAll.js
43.74 KB
08/14/2022 11:05:25 AM
rw-r--r--
📄
app2.css
6.71 KB
08/14/2022 11:05:26 AM
rw-r--r--
📄
appanimate.js
7.62 KB
08/14/2022 11:05:25 AM
rw-r--r--
📄
appcharts.js
33.33 KB
08/14/2022 11:05:25 AM
rw-r--r--
📄
appcontroller.js
20.15 KB
08/14/2022 11:05:25 AM
rw-r--r--
📄
appmodel.js
1.41 KB
08/14/2022 11:05:26 AM
rw-r--r--
📄
arundata2.js
1.33 KB
08/14/2022 11:05:26 AM
rw-r--r--
📄
charts_svg.js
622 bytes
08/14/2022 11:05:26 AM
rw-r--r--
📄
d3.v2.js
234.06 KB
08/14/2022 11:05:26 AM
rw-r--r--
📄
d3.v3.js
253.25 KB
08/14/2022 11:05:25 AM
rw-r--r--
📄
spec.js
3.77 KB
08/14/2022 11:05:25 AM
rw-r--r--
Editing: appcontroller.js
Close
/* * Function to create SVG element from Spec. This function is called when you create new page(). */ function initSVG(svgSpec){ var svgObj = new cubSvg(); //Assert Spec if(typeof svgSpec == 'undefined'){ //console.error("Error: Invalid svgspec!"); } svgObj.layout = svgSpec.layout; svgObj.containerid = svgSpec.containerid; //Create SVG Base Page //d3.select(svgObj.containerid).html('<div class="myChart"><div class="svgLegend"></div><div class="tipsy"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div></div>'); d3.select(svgObj.containerid).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("visibility", "hidden"); var g = d3.select(svgObj.containerid).select(".myChart") .append("svg") .attr("width", svgObj.layout.width) .attr("height", svgObj.layout.height) .attr ("class", "svgchart") .attr("transform", "translate(" + svgObj.layout.top + "," + svgObj.layout.left + ")"); svgObj.svg = g.append("svg:g");// .attr("class", "svgchart"); defineFilters(svgObj.svg); return svgObj; } function defineFilters(parentsvg){ /* * * Source : http://www.w3schools.com/svg/svg_filters_intro.asp * */ /*V: Drop Shadow Filter : Start*/ var filter = parentsvg.append("svg:defs") .append("svg:filter") .attr("id", "rxdropshadow"); filter.append("svg:feGaussianBlur") .attr("stdDeviation", 3); filter.append("svg:feOffset") .attr("result", "offsetblur") .attr("dx", "5") .attr("dy", "0"); filter.append("svg:feComponentTransfer") .append("svg:feFuncA") .attr("type", "linear") .attr("slope", "0.25"); var t = filter.append("svg:feMerge"); t.append("svg:feMergeNode"); t.append("svg:feMergeNode") .attr("in", "SourceGraphic") /*V: Drop Shadow Filter : End*/ /*V: Blurred 3d effect Color Filter : Start*/ var filter = parentsvg.append("svg:defs") .append("svg:filter") .attr("id", "rx3dblureffect") .attr("x", "0") .attr("y", "0"); filter.append("svg:feGaussianBlur") .attr("stdDeviation", 3). attr("in", "SourceGraphic"); /*V: 3d effect Color Filter : End*/ /*V: Real 3d Filter : Start*/ var filter = parentsvg.append("svg:defs") .append("svg:filter") .attr("id", "rx3dfilter") .attr("filterUnits","userSpaceOnUse") .attr("x", "0") .attr("y", "0") .attr("width", "1400") .attr("height", "620"); filter.append("svg:feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", 4) .attr("result", "blur"); filter.append("svg:feOffset") .attr("in", "blur") .attr("result", "offsetBlur") .attr("dx", "4") .attr("dy", "4"); var t1 = filter.append("svg:feSpecularLighting") .attr("in", "blur") .attr("surfaceScale", "5") .attr("specularConstant", "0.75") .attr("specularExponent", "20") .attr("lighting-color", "#bbb") .attr("result", "specOut"); t1.append("svg:fePointLight") .attr("x", "-5000") .attr("y", "-10000") .attr("z", "20000") ; filter.append("svg:feComposite") .attr("in", "specOut") .attr("in2", "SourceAlpha") .attr("operator", "in") .attr("result", "specOut"); filter.append("svg:feComposite") .attr("in", "SourceGraphic") .attr("in2", "specOut") .attr("operator", "arithmetic").attr("k1", "0") .attr("k2", "1") .attr("k3", "1") .attr("k4", "0") .attr("result", "litPaint"); var t = filter.append("svg:feMerge"); t.append("svg:feMergeNode") .attr("in", "offsetBlur"); t.append("svg:feMergeNode") .attr("in", "litPaint") /*V: Real 3d Filter : End*/ /*V: Gradient FiLLer : End*/ var filler = parentsvg.append("svg:defs") .append("svg:linearGradient") .attr("id", "rxlineargradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); filler.append("svg:stop") .attr("offset", "0%") .attr("style", "stop-color:rgb(255,255,0);stop-opacity:1"); filler.append("svg:stop") .attr("offset", "100%") .attr("style", "stop-color:rgb(255,0,0);stop-opacity:1"); /*V: Gradient Filter : End*/ } /* * Function to create AXIS using axisspec. This axis would become child of parentsvg. * */ function initAxis(axisSpec, parentsvg, mycolor, page){ var axis = new cubAxis(); var isXaxis = false; var isYaxis = false; var isleftorient = 0; // Assert Axis Spec if(typeof axisSpec == 'undefined'){ console.error("Error: Invalid axispec!"); } axis.props = axisSpec; var data = axis.props.data; if(typeof data == 'undefined'){ //If axis does not have override data, use default page data data = page.data; } // SCALE: if(typeof axis.props.scale != 'undefined'){ axis.Scale = axis.props.scale; } else { if(axis.props.axistype == 'date'){ axis.Scale = d3.time.scale().range([0, axis.props.layout.width]); } else if(axis.props.axistype == 'numeric'){ axis.Scale = d3.scale.linear().range([axis.props.layout.height, 0]); } else { //ordinal axis.Scale = d3.scale.ordinal().rangeBands([0, axis.props.layout.width]); } } // If Axis is Brush if(typeof axis.props.brush != 'undefined'){ //console.log("This is Brush =>" + axis.props.layout.width); axis.Axis = d3.svg.brush().x(axis.Scale).on("brush", brushing);//.orient(axis.props.AxisOrient); isYaxis = true; } else { // If Axis //console.log("Not a Brush =>" + axis.props.z); axis.Axis = d3.svg.axis().scale(axis.Scale).orient(axis.props.AxisOrient); if(typeof axisSpec.axisFormat != 'undefined') axis.Axis.tickFormat(d3.format(axis.props.axisFormat)); if(axis.props.axistype == 'numeric' && typeof axis.props.numTicks == 'number') axis.Axis.ticks(axis.props.numTicks); } // DOMAIN if(typeof axis.props.axistype != 'undefined'){ if(axis.props.axistype == 'numeric'){ // Y Axis isYaxis = true; //console.log(axis.props.brush + " : Numeric Domain [" + axis.props.z + "] => " + d3.max(data.map(function(d) {return eval(axis.props.col);}))); var max=d3.max(data.map(function(d) {return eval(axis.props.col);})); if(max%10 >0) max+=max/10; axis.Scale.domain([0, max]); } else if (axis.props.axistype == 'date'){ // Time X Axis axis.Scale.domain(d3.extent(data.map(function(d){return eval(axis.props.col)}))); } else { // Non Time X Axis // Ordinal //console.log(axis.props.col); axis.Scale.domain(data.map(function(d){return eval(axis.props.col);})); } } else {// Non time X Axis axis.Scale.domain(data.map(function(d){return eval(axis.props.col);})); } var svgaxis = parentsvg.append("g"); // LAYOUT AXIS if(typeof axis.props.brush != 'undefined'){ svgaxis.attr("class", "y brush") ; svgaxis.attr("name", axis.props.name); svgaxis.call(axis.Axis).datum(data).selectAll("rect") .attr("height", axis.props.layout.height); svgaxis.attr("transform", "translate(" + (axis.props.layout.left) + "," + (axis.props.layout.top) + ")") ; return axis; } else { svgaxis.attr("class", "x axis") ; } // ORIENTATION AXIS // uncomment tickSize below to enable grid lines if(axis.props.AxisOrient == 'bottom'){ //axis.Axis.tickSize(- axis.props.layout.height); svgaxis.attr("transform", "translate(" + (axis.props.layout.left) + "," + (axis.props.layout.height + axis.props.layout.top) + ")") ; isXaxis = true; } else if(axis.props.AxisOrient == 'top'){ // axis.Axis.tickSize(- axis.props.layout.height); svgaxis.attr("transform", "translate(" + axis.props.layout.left + "," + axis.props.layout.top + ")") ; isXaxis = true; istoporient = 1; } else if(axis.props.AxisOrient == 'right'){ // axis.Axis.tickSize(- axis.props.layout.width); svgaxis.attr("transform", "translate(" + (axis.props.layout.left+axis.props.layout.width+10) + "," + axis.props.layout.top + ")") ; } else { // left isleftorient = 1; axis.Axis.tickSize(- axis.props.layout.width); svgaxis.attr("transform", "translate(" + (axis.props.layout.left) + "," + axis.props.layout.top + ")") ; } svgaxis.attr("name", axis.props.name); if(isXaxis){ svgaxis.attr("class", axis.props.aclass+" xaxis"); } else{ svgaxis.attr("class", axis.props.aclass+" yaxis"); } //svgaxis.attr("id", axis.props.aclass); /* Function to plot the line and ticks */ svgaxis.call(axis.Axis); //Rotate AXIS if(typeof axis.props.rotate != 'undefined' && axis.props.rotate != 0){ var angle = axis.props.rotate; parentsvg.selectAll("." + axis.props.aclass + " text") .attr("transform", function(d) { return "translate(" + this.getBBox().height*-1 + "," + this.getBBox().height + ")rotate(" + angle + ")"; }); } // AXIS TITLE if(isXaxis){ //X Title var xtitle = svgaxis.append("text") .attr("transform", "rotate(" + isXaxis ? -0 : -90 +")") .attr("class", "xAxisTitle") .style("text-anchor", "end") .text(axis.props.title) .attr("x", axis.props.layout.width) .attr("dy", "1.91em") .attr("dx", -(axis.props.layout.width-40)); var xtip = xtitle.append("title") .text(axis.props.title) .attr("x", 7) .attr("dy", ".31em"); } else{ //Y Title var ytitle = svgaxis.append("text") .attr("class", "yAxisTitle") .text(axis.props.title) .style("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("y", (isleftorient?-1:1) * (axis.props.layout.left + 0)) .attr("dy", ".91em") .attr("dx", -(axis.props.layout.height/2)) var ytip = ytitle.append("title") .text(axis.props.title) .attr("x", 7) .attr("dy", ".31em"); } if(typeof axis.props.showTicks == "undefined" || axis.props.showTicks == true){ if(typeof axis.props.showMark != "undefined" && axis.props.showMark == false){ svgaxis.selectAll(".xaxis g").select("line").style("display", "none"); } if(typeof axis.props.showTickLabels != "undefined" && axis.props.showTickLabels == false){ svgaxis.selectAll("g").select("text").style("display", "none"); } else { var xrule = svgaxis.selectAll("g"); var txt = xrule.select("text"); txt.each(function(i,d){ txt[0][d].actualVal = txt[0][d].textContent; if(typeof(i) == "string" && axis.props.numChar && axis.props.numChar>0){ txt[0][d].textContent = txt[0][d].textContent.substring(0, axis.props.numChar); } }); var ttl = xrule.append("title"); ttl.attr("class", "title1") .style("fill", "red") .style("stroke", "red") .style("stroke-width", 3); ttl.each(function(i,d){ ttl[0][d].textContent = txt[0][d].actualVal; }); } } else { svgaxis.selectAll(".xaxis g").select("line").style("display", "none"); svgaxis.selectAll("g").select("text").style("display", "none"); } axis.svgaxis = svgaxis; return axis; } function make_x_axis(x, ori) { //console.log(x); return d3.svg.axis() .scale(x) .orient(ori) .ticks(8) } /* * Function to plot chart (chart_spec) on page. */ function plot_chart(page, chart_spec){ var chobj = new cubChart(); var color = appcolors(page.nthchart); //var color=["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477","#66aa00", "#b82e2e", "#cccccc", "#0011cc", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262"] ; //var c = page.nthchart; var axes = page.axes; var parentsvg = page.svgpage.svg; chobj.data = chart_spec.data; chobj.spec = chart_spec; chobj.position = page.nthchart; //console.log(chobj); if(chart_spec.type == "line"){ chobj.chart = myLineChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "area"){ chobj.chart = myAreaChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "barea"){ chobj.chart = myBrushAreaChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "bar"){ chobj.chart = myBarChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "step"){ chobj.chart = myStepChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "bubble"){ chobj.chart = myBubbleChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "pie"){ chobj.chart = myPieChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "column"){ chobj.chart = myColumnChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "stack"){ chobj.chart = myStackBarChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "pillar"){ chobj.chart = myPillarChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "custom"){ chobj.chart = myCustomChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "tube"){ chobj.chart = myTubeChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "custompie"){ chobj.chart = myTubeChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "testbar"){ chobj.chart = myTestBarChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "diff"){ chobj.chart = myDiffChart(chobj,page,parentsvg,color); } else if(chart_spec.type == "groupbar"){ chobj.chart = myGroupBarChart(chobj,page,parentsvg,color); } //drawDataXGridLine(chobj,page,parentsvg,color); //drawDataYGridLine(chobj,page,parentsvg,color); //drawXGridLine(chobj,parentsvg,10); //drawYGridLine(chobj,parentsvg,10); page.charts[page.nthchart++] = chobj; if(chobj && chobj.chart) plot_chart_legends(page, chobj); return chobj; } /* * Function to plot axis (axisspec) on page. */ function plot_axis(page, axisspec){ var nth = page.nthaxis; var parentsvg = page.svgpage.svg; page.axes[nth] = initAxis(axisspec, parentsvg, appcolors(nth), page); page.axespos[axisspec.name] = nth; page.nthaxis++; } /* * Function to put legends on (chartobj). Put legends under parentsvg. */ //var legendlayout = {w: 120, h:120, top: 0, right: 0, bottom: 0, left: 0}; //var legendSpec = {layout: legendlayout, containerid: ".svgLegend"}; function plot_chart_legends(page, chartobj){ if(chartobj.spec.type == "pie"){ plot_pie_legends(page, chartobj); } else{ var legendlayout = {w: 120, h:120, top: 0, right: 0, bottom: 0, left: 0}; var legendSpec = {layout: legendlayout, containerid: ".svgLegend"}; var svgLeg = new cubSvg(); svgLeg.layout = legendSpec.layout; svgLeg.containerid = legendSpec.containerid; var g1 = d3.select("#"+chartobj.spec.divId).select(svgLeg.containerid) .append("svg") .attr("width", 100) .attr("height", 20) .attr("transform", "translate(" + page.svgpage.layout.top + "," + page.svgpage.layout.left + ")"); var typevar = chartobj.chart; var ttl = chartobj.spec.title; var legText = ttl.substring(0,10); //LEGEND SYMBOL (circle) var col = typevar.style("fill"); if((col == undefined) || (col == 'none') || (col == "#ffffff")){ col = typevar.style("stroke"); } var legendcircle = g1.append("svg:circle") .attr("spclass", typevar.attr("class")) .style("fill", col) .style("stroke", col) .attr("cx", 10) .attr("cy", 10) .attr("r", function(d) { return 5;}); //LEGEND TEXT var legendtext = g1.append("svg:text") .text(legText) .attr("x", 20) .attr("y", 15) .attr("class", "legend"); //LEGEND TOOLTIP var legendtooltip=legendtext.append("svg:title") .attr("transform", "translate(" + chartobj.spec.layout.left + "," + chartobj.spec.layout.top + ")") .text(ttl) .attr("x", 7) .attr("dy", ".31em"); enable_legend_showhide(legendcircle, typevar); } /* Make legend position, height and width */ var d= d3.select("#"+chartobj.spec.divId).select(".myChart").select(".svgLegend"); if(d[0][0] == 'undefined' || d[0][0] == null) return; var s = d3.select("#"+chartobj.spec.divId).select(".myChart").select(".svgchart"); if(s[0][0] == 'undefined' || s[0][0] == null) return; var ch_height = chartobj.spec.layout.height; var s_left = s[0][0].offsetLeft; var s_top = s[0][0].offsetTop; var s_height = s[0][0].offsetHeight; var s_width = s[0][0].offsetWidth; var l_height = d[0][0].offsetHeight; var l_width = d[0][0].offsetWidth; var pos = chartobj.spec.legendpos; if(pos == "right"){ d.style("top", (l_height>s_height)?s_top:(s_top+(s_height/2)-(l_height/2)+"px")) .style("left", s_left+s_width+"px") .style("width", "100px") .style("max-height", s_height+"px") .style("overflow-x", "hidden") .style("overflow-y", "auto"); s.style("left", (s_left+100)+"px") } else if(pos == "left"){ d.style("top", (l_height>s_height)?s_top:(s_top+(s_height/2)-(l_height/2)+"px")) .style("left", s_left-100+"px") .style("width", "100px") .style("max-height", s_height+"px") .style("overflow-x", "hidden") .style("overflow-y", "auto"); s.style("left", (s_left+100)+"px") .style("margin-left", "100px"); } else if(pos == "top"){ d.style("top", s_top+"px") .style("left", s_left+(s_width/2)-(l_width/2)+"px") } else if(pos == "bottom"){ d.style("top", (s_top+(s_height))+"px") .style("left", s_left+(s_width/2)-(l_width/2)+"px") } else { d.style("top", s_top+"px") .style("left", s_left+(s_width/2)-(l_width/2)+"px") } return; } /* *Legend Aninmation (ShowHide) */ function enable_legend_showhide(legend_symbol, obj){ /* legend_symbol.on("touchstart", touchlegend) * .on("touchmove", touchlegend) * .on("touchend", touchlegend); */ legend_symbol.on("click", function (d,i){ legend_clicked(d,i,legend_symbol,obj,this); }); } function legend_clicked(d,i,legend_symbol,obj,t){ var a=d3.select(t.parentNode); var pos=d3.mouse(t); var grp=a.append("g"); var curclass=obj.attr("class"); var obparent = d3.select(obj[0].parentNode); var pclass = obparent.attr("class"); var prclass = obparent.attr("prevclass"); var ctype = obj.attr("type"); var ptype = obparent.attr("type"); if(ctype == "pie"){ var temptext = t.attributes[1].textContent; if(curclass != 'hidden'){ legend_symbol.style("fill", "white"); obj.attr("class","hidden"); } else if(curclass == 'hidden'){ obj.attr("class", legend_symbol.attr("spclass")); if(obj.style("stroke") == undefined || obj.style("stroke") == 'none'){ legend_symbol.style("fill", obj.attr("fill")); } else{ legend_symbol.style("fill", obj.style("stroke")); } } } else{ if(ptype=="line" || ptype=="area"){ if(pclass != 'hidden'){ obparent.attr("class", "hidden"); } else if(pclass == 'hidden'){ obparent.attr("class", prclass); } } } if(curclass != 'hidden'){ legend_symbol.style("fill", "white"); obj.attr("class","hidden"); } else if(curclass == 'hidden'){ obj.attr("class", legend_symbol.attr("spclass")); if(obj.style("stroke") == undefined || obj.style("stroke") == 'none'){ legend_symbol.style("fill", obj.style("fill")); } else{ legend_symbol.style("fill", obj.style("stroke")); } } } function touchlegend() { d3.event.preventDefault(); var circle = svg.selectAll("circle.touchlegend") .data(d3.touches(svg.node()), function(d) { return d.identifier; }) .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }); circle.enter().append("circle") .attr("class", "touchlegend") .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .style("fill", function(d) { return color(d.identifier); }) .attr("r", 1e-6) .transition() .duration(500) .ease("elastic") .attr("r", 48); circle.exit() .attr("class", null) .transition() .attr("r", 1e-6) .remove(); } function plot_pie_legends(page, chartobj){ var legendlayout = {w: 120, h:120, top: 0, right: 0, bottom: 0, left: 0}; var legendSpec = {layout: legendlayout, containerid: ".svgLegend"}; var svgLeg = new cubSvg(); svgLeg.layout = legendSpec.layout; svgLeg.containerid = legendSpec.containerid; var g1 = d3.select(svgLeg.containerid) .append("svg") .attr("width", 120) .attr("height", 100) .attr("transform", "translate(" + page.svgpage.layout.top + "," + page.svgpage.layout.left + ")"); var pos = chartobj.spec.layout.legendpos; var typevar = chartobj.chart[0]; var temp; typevar.forEach(function(d, i){ var col = d.attributes[1].nodeValue; var legendcircle = g1.append("svg:circle") .attr("spclass", d.attributes[0].nodeValue) .attr("label", d.textContent) .style("fill", col) .style("stroke", col) .attr("cx", 10) .attr("cy", (i+1)*25) .attr("r", function(d) { return 5;}); var legendtext = g1.append("svg:text") .text(d.textContent.substring(0,10)) .attr("x", 20) .attr("y", (i+1)*25) .attr("class", "legend"); var legendtooltip=legendtext.append("svg:title") .attr("transform", "translate(" + chartobj.spec.layout.left + "," + chartobj.spec.layout.top + ")") .text(d.textContent) .attr("x", 7) .attr("dy", ".31em"); temp = d3.select(".slice" + d.textContent); enable_legend_showhide(legendcircle, temp); }); } function brushing() { console.log("BRUSHING"); }