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 edit
m Maybe rotate in different direction?
m Wrong variable
 
(14 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 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"