Welcome to IOPWiki, Commander.
With the release of the new game, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute, read the maintenance guide, and join our Discord server to discuss major changes.
If you or someone you know can help deciphering the game files, contact our administrator.

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 edit
m Another typo
m Wrong variable
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><div id="<!--{$graphId|escape:'html'}-->"></div><script>
<includeonly><div class="stats-graph-container"><script>
function calcCoordinate(degree, min, max, val) {
function calcCoordinate(degree, min, max, val) {
    
    
   var oldX = 0;
   var oldX = 0;
   var oldY = (max-min) == 0 ? 0 : (300 / (max-min)) * (val - min);
   var oldY = (max-min) == 0 ? 0 : -(300 / (max-min)) * (val - min);
    
    
   if (degree == 0) {
   if (degree == 0) {
Line 27: Line 27:
}
}


function buildGraph(graphId, dataComplete) {
function buildGraph(dataComplete) {
   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;
Line 33: Line 33:
   svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", svgLinkNS);
   svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", svgLinkNS);
   svg.setAttribute('viewBox', "0 0 800 800");
   svg.setAttribute('viewBox', "0 0 800 800");
   svg.setAttribute('preserveAspectRatio', "none");
   svg.setAttribute('preserveAspectRatio', "xMidyMid meet");
  svg.setAttribute('width', "300px");
  svg.setAttribute('height', "auto");
   svg.setAttribute('version', "1.1");
   svg.setAttribute('version', "1.1");
 
  /* Inline styling; maybe export to common.css? */
  var style = document.createElementNS(svgNS, 'style');
  style.setAttribute('type', "text/css");
  var styleData = document.createTextNode('line.emphased {stroke-width:3pt} 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; }');
  style.appendChild(styleData);
  svg.appendChild(style);
    
    
   /* This pretty much defines the base net lines */
   /* This pretty much defines the base net lines */
   var defs = document.createElementNS(svgNS, 'defs');
   var defs = document.createElementNS(svgNS, 'defs');
 
 
  /* Wedge id has to be unique */
  var wedgeId = "wedge-" + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
 
   var wedge = document.createElementNS(svgNS, 'g');
   var wedge = document.createElementNS(svgNS, 'g');
   wedge.setAttribute('id', "wedge" + graphId);
   wedge.setAttribute('id', wedgeId);
    
    
   var directionCount = dataComplete[0].data.length;
   var directionCount = dataComplete[0].data.length;
Line 54: Line 55:
   var radialLine = document.createElementNS(svgNS, 'line');
   var radialLine = document.createElementNS(svgNS, 'line');
   radialLine.setAttribute('class', 'radial');
   radialLine.setAttribute('class', 'radial');
   radialLine.setAttribute('y2', 325);
   radialLine.setAttribute('y2', -325);
   wedge.appendChild(radialLine);
   wedge.appendChild(radialLine);
    
    
Line 60: Line 61:
     var orientationLine = document.createElementNS(svgNS, 'line');
     var orientationLine = document.createElementNS(svgNS, 'line');
     var lineDistance = lineIdx * -75;
     var lineDistance = lineIdx * -75;
     var rotate = (-degreeSpacing * Math.PI) / 180;
     var rotate = (degreeSpacing * Math.PI) / 180;
     orientationLine.setAttribute('y1', lineDistance);
     orientationLine.setAttribute('y1', lineDistance);
     orientationLine.setAttribute('x2', lineDistance*Math.sin(rotate));
     orientationLine.setAttribute('x2', lineDistance*Math.sin(rotate));
Line 78: Line 79:
   for (var dataIdx=0; dataIdx<directionCount; dataIdx++) {
   for (var dataIdx=0; dataIdx<directionCount; dataIdx++) {
     var propertyLine = document.createElementNS(svgNS, 'use');
     var propertyLine = document.createElementNS(svgNS, 'use');
     propertyLine.setAttributeNS(svgLinkNS, "href", "#wedge" + graphId);
     propertyLine.setAttributeNS(svgLinkNS, "href", "#" + wedgeId);
     propertyLine.setAttribute('transform', "rotate(" + (degreeSpacing * dataIdx) + ")");
     propertyLine.setAttribute('transform', "rotate(" + (degreeSpacing * dataIdx) + ")");
     gDrawing.appendChild(propertyLine );
     gDrawing.appendChild(propertyLine );
Line 86: Line 87:
     var polygonParams = dataComplete[dataIdx];
     var polygonParams = dataComplete[dataIdx];
     var datapresentation = document.createElementNS(svgNS, 'polygon');
     var datapresentation = document.createElementNS(svgNS, 'polygon');
     datapresentation.setAttribute('class', polygonParams.class);
      
     datapresentation.setAttribute('fill', 'orange');
    if ('title' in polygonParams) {
     datapresentation.setAttribute('fill-opacity', 0.5);
      var title = document.createElementNS(svgNS, 'title');
      title.appendChild(document.createTextNode(polygonParams.title));
      datapresentation.appendChild(title);
     }
   
    if (('fill' in polygonParams) || ('stroke' in polygonParams)) {
      if ('fill' in polygonParams) datapresentation.setAttribute('fill', polygonParams.fill);
      if ('stroke' in polygonParams) datapresentation.setAttribute('stroke', polygonParams.stroke);
     } else {
      datapresentation.setAttribute('class', polygonParams.class ? polygonParams.class : "graph-orange");
    }
     datapresentation.setAttribute('points', buildPolygonString(polygonParams.data));
     datapresentation.setAttribute('points', buildPolygonString(polygonParams.data));
     gDrawing.appendChild(datapresentation);
     gDrawing.appendChild(datapresentation);
   
    for (var labelIdx=0; labelIdx<polygonParams.data.length; labelIdx++) {
      var polygonCornerData = polygonParams.data[labelIdx];
      var rotate = (-degreeSpacing * labelIdx * Math.PI) / 180;
     
      var label = document.createElementNS(svgNS, 'text');
      label.setAttribute('x', -340*Math.sin(rotate));
      label.setAttribute('y', -340*Math.cos(rotate));
      label.setAttribute('title', titleText);
      label.appendChild(document.createTextNode(polygonCornerData.label));
      var titleText = "" + polygonCornerData.min + " <= " + polygonCornerData.value + " <= " + polygonCornerData.max;
      var title = document.createElementNS(svgNS, 'title');
      title.appendChild(document.createTextNode(titleText));
      label.appendChild(title);
     
      gDrawing.appendChild(label);
    }
   }
   }
    
    
   svg.appendChild(gDrawing);
   svg.appendChild(gDrawing);
 
 
   document.getElementById(graphId).appendChild(svg);
   var container = document.currentScript.parentNode;
  container.appendChild(svg);
}
}


var graphData = JSON.parse(`<!--{$data|escape:'html'}-->`.replace(/&quot;/gi, '"'));
var graphData = JSON.parse(`<!--{$data|escape:'html'}-->`.replace(/&quot;/gi, '"'));
buildGraph("<!--{$graphId|escape:'html'}-->", graphData);</script></includeonly><noinclude>{{#widget:StatsGraph
buildGraph(graphData);</script></div></includeonly><noinclude>{{Documentation}}</noinclude>
|graphId=singleStatsGraph
|data=[
  {
    "class": "firstUnit",
    "data": [
            {
              "label": "RoF",
              "min": 12,
              "max": 37,
              "value": 32
            },
            {
              "label": "Acc",
              "min": 12,
              "max": 37,
              "value": 32
            },
            {
              "label": "Dmg",
              "min": 12,
              "max": 37,
              "value": 32
            }
          ]
  },
  {
    "class": "secondUnit",
    "data": [
            {
              "label": "RoF",
              "min": 12,
              "max": 37,
              "value": 18
            },
            {
              "label": "Acc",
              "min": 12,
              "max": 37,
              "value": 26
            },
            {
              "label": "Dmg",
              "min": 12,
              "max": 37,
              "value": 22
            }
          ]
  }
]}}</noinclude>

Latest revision as of 11:54, 13 December 2019

Documentation[view] [edit] [history] [purge]

Widget to create an SVG image containing a radar chart. It is configured with a JSON string.

Parameters

Parameter name Required? Default value Description
data Yes (n/a) A JSON String containing all values. Please make sure that
  • There are at least three different properties to show. Anything below won't display correctly.
  • Each property needs a Label, Min, Max and Current value.
    • Label may be an empty string.
    • Min may be 0.

See the testcases for examples how to configure the JSON string.

Usage

See the template's testcases:


Small graph using default colors
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 14 },
            { "label": "Acc", "min": 34, "max": 68, "value": 37 },
            { "label": "Dmg", "min": 9, "max": 12, "value": 11 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Graph showing two graphs, second graph with different color
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 32 },
            { "label": "Acc", "min": 12, "max": 37, "value": 32 },
            { "label": "Dmg", "min": 12, "max": 37, "value": 32 }
          ]
  },
  {
    "fill": "blue",
    "stroke": "darkblue",
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 34 },
            { "label": "Acc", "min": 34, "max": 68, "value": 51 },
            { "label": "Dmg", "min": 9, "max": 12, "value": 9 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Graph with more properties
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 14 },
            { "label": "Acc", "min": 34, "max": 68, "value": 37 },
            { "label": "Dmg", "min": 9, "max": 16, "value": 11 },
            { "label": "Dmg1", "min": 9, "max": 16, "value": 12 },
            { "label": "Dmg2", "min": 9, "max": 16, "value": 13 },
            { "label": "Dmg3", "min": 9, "max": 16, "value": 14 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Retrieved from "http://iopwiki.com/index.php?title=Widget:StatsGraph&oldid=82911"