Welcome to IOPWiki, Commander.
We are searching for new editors to keep track of Girls' Frontline 2 content, as well as veteran players to complete existing Girls' Frontline and Project Neural Cloud articles.
You can contribute without an account. Learn how to contribute and join our Discord server.

Widget:StatsGraph: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
← Older editNewer edit →
m Wrong parameter
Building test-radar
Line 24: Line 24:
}
}


function buildPolygonString() {
function buildPolygonString(data) {
  var data = [[ 11,  16,  15], // Acc
              [ 52,  90,  71], // Eva
              [ 23,  35,  32], // Dmg
              [141, 238, 194], // HP
              [ 64, 101,  93], // RoF
              [ 12,  12,  12]];// Mov
   var ret = "";
   var ret = "";
   for (var i=0;i<6;i++) {
   for (var i=0;i<6;i++) {
     var coord = calcCoordinate(i, data[i][0], data[i][1], data[i][2]);
     var coord = calcCoordinate(i, data[i][1], data[i][2], data[i][3]);
     ret += coord[0] + "," + coord[1] + " ";
     ret += coord[0] + "," + coord[1] + " ";
   }
   }
Line 40: Line 34:
}
}


function buildGraph(graphId) {
function buildGraph(graphId, data) {
   var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   var svgNS = svg.namespaceURI;
   var svgNS = svg.namespaceURI;
   var rect = document.createElementNS(svgNS,'rect');
  svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
    rect.setAttribute('x',5);
 
    rect.setAttribute('y',5);
  /* Inline styling; maybe export to common.css? */
     rect.setAttribute('width',500);
  var style = document.createElementNS(svgNS, 'style');
     rect.setAttribute('height',500);
  style.setAttribute('type', "text/css");
     rect.setAttribute('fill','#95B3D7');
  var styleData = document.createTextNode('line.radial {stroke: #333;stroke-width: 4pt;}polygon {stroke-width: 4pt;}svg {fill: none;stroke: #777;stroke-opacity: 1;stroke-width: 1pt;}text {fill: #000;font-family: Arial, Helvetica, sans-serif;font-size: 2.5em;font-weight: normal;stroke: none;text-anchor: middle;}.unit { stroke: #f73; }');
    svg.appendChild(rect);
  style.appendChild(styleData);
  svg.appendChild(style);
 
  /* This pretty much defines the base net lines */
  var defs = document.createElementNS(svgNS, 'defs');
 
  var wedge = document.createElementNS(svgNS, 'g');
  wedge.setAttribute('id', "wedge");
 
   var radialLine = document.createElementNS(svgNS, 'line');
  radialLine.setAttribute('class', 'radial');
  radialLine.setAttribute('y2', 325);
  wedge.appendChild(radialLine);
  radialLine = document.createElementNS(svgNS, 'line');
  radialLine.setAttribute('y1', -75);
  radialLine.setAttribute('x2', -64.95);
  radialLine.setAttribute('y2', -37.5);
  wedge.appendChild(radialLine);
  radialLine = document.createElementNS(svgNS, 'line');
  radialLine.setAttribute('y1', -150);
  radialLine.setAttribute('x2', -129.9);
  radialLine.setAttribute('y2', -75);
  radialLine.setAttribute('stroke-width', "3pt");
  wedge.appendChild(radialLine);
  radialLine = document.createElementNS(svgNS, 'line');
  radialLine.setAttribute('y1', -225);
  radialLine.setAttribute('x2', -194.86);
  radialLine.setAttribute('y2', -112.5);
  wedge.appendChild(radialLine);
  radialLine = document.createElementNS(svgNS, 'line');
  radialLine.setAttribute('y1', -300);
  radialLine.setAttribute('x2', -259.81);
  radialLine.setAttribute('y2', -150);
  radialLine.setAttribute('stroke-width', "3pt");
  wedge.appendChild(radialLine);
  svg.appendChild(wedge);
  svg.appendChild(defs);
 
  // Now start drawing
  var gDrawing = document.createElementNS(svgNS, 'g');
  gDrawing.setAttribute('y2', 'translate(400 400)');
 
  var degreeSpacing = 360 / data.length;
  for (var dataIdx=0; dataIdx<data.length; dataIdx++) {
    var propertyLine = document.createElementNS(svgNS, 'use');
     propertyLine.setAttribute('xlink:href', "#wedge");
     propertyLine.setAttribute('transform', "rotate(" + (degreeSpacing * dataIdx) + ")");
     gDrawing.appendChild(propertyLine );
  }
 
  var datapresentation = document.createElementNS(svgNS, 'polygon ');
  datapresentation.setAttribute('class', 'unit');
  datapresentation.setAttribute('fill', orange);
  datapresentation.setAttribute('fill-opacity', "0.5");
  datapresentation.setAttribute('points', buildPolygonString(data));
  gDrawing.appendChild(datapresentation);
 
  svg.appendChild(gDrawing);
 
   document.getElementById(graphId).appendChild(svg);
   document.getElementById(graphId).appendChild(svg);
}
}


buildGraph("<!--{$graphId|escape:'html'}-->");</script></includeonly><noinclude>{{#widget:StatsGraph|graphId=singleStatsGraph}}</noinclude>
  var graphData = [["Acc", 11,  16,  15], // Acc
              ["Eva", 52,  90,  71], // Eva
              ["Dmg", 23,  35,  32], // Dmg
              [ "HP",141, 238, 194], // HP
              ["RoF", 64, 101,  93], // RoF
              ["Mov", 12,  12,  12]];// Mov
 
buildGraph("<!--{$graphId|escape:'html'}-->, graphData");</script></includeonly><noinclude>{{#widget:StatsGraph|graphId=singleStatsGraph}}</noinclude>

Revision as of 20:56, 1 October 2019

Retrieved from "http://iopwiki.com/index.php?title=Widget:StatsGraph&oldid=79279"