' + }, + series: [{ + name: 'Growth Rates', + data: statsValues, + pointPlacement: 'on' + }], + responsive: { + rules: [{ + condition: { + maxWidth: 800 + }, + chartOptions: { + pane: { + size: '50%' + } + } + }] + } + + }); +} + +function displayPieChartOfGrowthRates(charId) { + const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null); + const statsValues = []; + + charGrowthRates.forEach(gr => { + const nameStat = feData.stats.find(x => x.id == gr.idStat).name; + const statWithValue = { + name: nameStat, + y: gr.value, + }; + statsValues.push(statWithValue); + }); + + + Highcharts.chart('container-char-gr', { + chart: { + plotBackgroundColor: null, + plotBorderWidth: null, + plotShadow: false, + type: 'pie' + }, + title: { + text: '' + }, + tooltip: { + pointFormat: '{series.name}: {point.y}%' + }, + credits: { + enabled: false + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: true, + format: '{point.name}: {point.y}%' + }, + } + }, + series: [{ + name: 'Growth Rates', + colorByPoint: true, + data: statsValues, + }] + }); + +} + +function displayColumnChartOfGrowthRates(charId) { + const charFirstName = feData.characters.find(x => x.id == charId).firstName; + const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null); + const statsNames = feData.stats.map(x => x.name); + const statsValues = []; + const charData = { + name: charFirstName, + }; + + charGrowthRates.forEach(gr => { + statsValues.push(gr.value); + }); + charData.data = statsValues; + + Highcharts.chart('container-char-gr', { + chart: { + type: 'column' + }, + title: { + text: '' + }, + tooltip: { + pointFormat: 'Growth Rates: {point.y}%' + }, + xAxis: { + categories: statsNames + }, + credits: { + enabled: false + }, + plotOptions: { + column: { + stacking: 'normal', + dataLabels: { + enabled: true, + format: '{point.y}%' + } + } + }, + series: [charData], + }); +} \ No newline at end of file diff --git a/mobile/www/js/lib/highcharts-more.js b/mobile/www/js/lib/highcharts-more.js new file mode 100644 index 0000000..3718c35 --- /dev/null +++ b/mobile/www/js/lib/highcharts-more.js @@ -0,0 +1,160 @@ +/* + Highcharts JS v8.0.0 (2019-12-10) + + (c) 2009-2018 Torstein Honsi + + License: www.highcharts.com/license +*/ +(function(t){"object"===typeof module&&module.exports?(t["default"]=t,module.exports=t):"function"===typeof define&&define.amd?define("highcharts/highcharts-more",["highcharts"],function(A){t(A);t.Highcharts=A;return t}):t("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(t){function A(b,a,r,g){b.hasOwnProperty(a)||(b[a]=g.apply(null,r))}t=t?t._modules:{};A(t,"parts-more/Pane.js",[t["parts/Globals.js"],t["parts/Utilities.js"]],function(b,a){function r(a,e){this.init(a,e)}var g=a.extend, +m=a.splat,k=b.CenteredSeriesMixin,w=b.merge;b.Chart.prototype.collectionsWithUpdate.push("pane");g(r.prototype,{coll:"pane",init:function(a,e){this.chart=e;this.background=[];e.pane.push(this);this.setOptions(a)},setOptions:function(a){this.options=w(this.defaultOptions,this.chart.angular?{background:{}}:void 0,a)},render:function(){var a=this.options,e=this.options.background,l=this.chart.renderer;this.group||(this.group=l.g("pane-group").attr({zIndex:a.zIndex||0}).add());this.updateCenter();if(e)for(e= +m(e),a=Math.max(e.length,this.background.length||0),l=0;l
'},trackByArea:!0,dataLabels:{align:null,verticalAlign:null,xLow:0,xHigh:0,yLow:0,yHigh:0}},{pointArrayMap:["low","high"],pointValKey:"low",deferTranslatePolar:!0,toYData:function(a){return[a.low,a.high]},highToXY:function(a){var h=this.chart,d=this.xAxis.postTranslate(a.rectPlotX,this.yAxis.len-a.plotHigh);a.plotHighX= +d.x-h.plotLeft;a.plotHigh=d.y-h.plotTop;a.plotLowX=a.plotX},translate:function(){var a=this,h=a.yAxis,d=!!a.modifyValue;z.area.prototype.translate.apply(a);a.points.forEach(function(e){var b=e.high,n=e.plotY;e.isNull?e.plotY=null:(e.plotLow=n,e.plotHigh=h.translate(d?a.modifyValue(b,e):b,0,1,0,1),d&&(e.yBottom=e.plotHigh))});this.chart.polar&&this.points.forEach(function(d){a.highToXY(d);d.tooltipPos=[(d.plotHighX+d.plotLowX)/2,(d.plotHigh+d.plotLow)/2]})},getGraphPath:function(a){var e=[],d=[],b, +l=z.area.prototype.getGraphPath;var n=this.options;var p=this.chart.polar&&!1!==n.connectEnds,c=n.connectNulls,f=n.step;a=a||this.points;for(b=a.length;b--;){var q=a[b];q.isNull||p||c||a[b+1]&&!a[b+1].isNull||d.push({plotX:q.plotX,plotY:q.plotY,doCurve:!1});var F={polarPlotY:q.polarPlotY,rectPlotX:q.rectPlotX,yBottom:q.yBottom,plotX:w(q.plotHighX,q.plotX),plotY:q.plotHigh,isNull:q.isNull};d.push(F);e.push(F);q.isNull||p||c||a[b-1]&&!a[b-1].isNull||d.push({plotX:q.plotX,plotY:q.plotY,doCurve:!1})}a= +l.call(this,a);f&&(!0===f&&(f="left"),n.step={left:"right",center:"center",right:"left"}[f]);e=l.call(this,e);d=l.call(this,d);n.step=f;n=[].concat(a,e);this.chart.polar||"M"!==d[0]||(d[0]="L");this.graphPath=n;this.areaPath=a.concat(d);n.isArea=!0;n.xMap=a.xMap;this.areaPath.xMap=a.xMap;return n},drawDataLabels:function(){var a=this.points,h=a.length,d,b=[],l=this.options.dataLabels,n,p=this.chart.inverted;if(m(l))if(1
Maximum: {point.high}
Upper quartile: {point.q3}
Median: {point.median}
Lower quartile: {point.q1}
Minimum: {point.low}
'}, +whiskerLength:"50%",fillColor:"#ffffff",lineWidth:1,medianWidth:2,whiskerWidth:2},{pointArrayMap:["low","q1","median","q3","high"],toYData:function(a){return[a.low,a.q1,a.median,a.q3,a.high]},pointValKey:"high",pointAttribs:function(){return{}},drawDataLabels:a,translate:function(){var a=this.yAxis,b=this.pointArrayMap;m.column.prototype.translate.apply(this);this.points.forEach(function(g){b.forEach(function(e){null!==g[e]&&(g[e+"Plot"]=a.translate(g[e],0,1,0,1))})})},drawPoints:function(){var a= +this,b=a.options,g=a.chart,e=g.renderer,l,m,h,d,B,x,n=0,p,c,f,q,F=!1!==a.doQuartiles,C,E=a.options.whiskerLength;a.points.forEach(function(v){var G=v.graphic,k=G?"animate":"attr",w=v.shapeArgs,u={},y={},D={},J={},t=v.color||a.color;"undefined"!==typeof v.plotY&&(p=w.width,c=Math.floor(w.x),f=c+p,q=Math.round(p/2),l=Math.floor(F?v.q1Plot:v.lowPlot),m=Math.floor(F?v.q3Plot:v.lowPlot),h=Math.floor(v.highPlot),d=Math.floor(v.lowPlot),G||(v.graphic=G=e.g("point").add(a.group),v.stem=e.path().addClass("highcharts-boxplot-stem").add(G), +E&&(v.whiskers=e.path().addClass("highcharts-boxplot-whisker").add(G)),F&&(v.box=e.path(void 0).addClass("highcharts-boxplot-box").add(G)),v.medianShape=e.path(void 0).addClass("highcharts-boxplot-median").add(G)),g.styledMode||(y.stroke=v.stemColor||b.stemColor||t,y["stroke-width"]=r(v.stemWidth,b.stemWidth,b.lineWidth),y.dashstyle=v.stemDashStyle||b.stemDashStyle,v.stem.attr(y),E&&(D.stroke=v.whiskerColor||b.whiskerColor||t,D["stroke-width"]=r(v.whiskerWidth,b.whiskerWidth,b.lineWidth),v.whiskers.attr(D)), +F&&(u.fill=v.fillColor||b.fillColor||t,u.stroke=b.lineColor||t,u["stroke-width"]=b.lineWidth||0,v.box.attr(u)),J.stroke=v.medianColor||b.medianColor||t,J["stroke-width"]=r(v.medianWidth,b.medianWidth,b.lineWidth),v.medianShape.attr(J)),x=v.stem.strokeWidth()%2/2,n=c+q+x,v.stem[k]({d:["M",n,m,"L",n,h,"M",n,l,"L",n,d]}),F&&(x=v.box.strokeWidth()%2/2,l=Math.floor(l)+x,m=Math.floor(m)+x,c+=x,f+=x,v.box[k]({d:["M",c,m,"L",c,l,"L",f,l,"L",f,m,"L",c,m,"z"]})),E&&(x=v.whiskers.strokeWidth()%2/2,h+=x,d+=x, +C=/%$/.test(E)?q*parseFloat(E)/100:E/2,v.whiskers[k]({d:["M",n-C,h,"L",n+C,h,"M",n-C,d,"L",n+C,d]})),B=Math.round(v.medianPlot),x=v.medianShape.strokeWidth()%2/2,B+=x,v.medianShape[k]({d:["M",c,B,"L",f,B]}))})},setStackedPoints:a});""});A(t,"parts-more/ErrorBarSeries.js",[t["parts/Globals.js"]],function(b){var a=b.noop,r=b.seriesType,g=b.seriesTypes;r("errorbar","boxplot",{color:"#000000",grouping:!1,linkedTo:":previous",tooltip:{pointFormat:'\u25cf {series.name}: {point.low} - {point.high}
'}, +whiskerWidth:null},{type:"errorbar",pointArrayMap:["low","high"],toYData:function(a){return[a.low,a.high]},pointValKey:"high",doQuartiles:!1,drawDataLabels:g.arearange?function(){var a=this.pointValKey;g.arearange.prototype.drawDataLabels.call(this);this.data.forEach(function(b){b.y=b[a]})}:a,getColumnMetrics:function(){return this.linkedParent&&this.linkedParent.columnMetrics||g.column.prototype.getColumnMetrics.call(this)}});""});A(t,"parts-more/WaterfallSeries.js",[t["parts/Globals.js"],t["parts/Utilities.js"]], +function(b,a){var r=a.arrayMax,g=a.arrayMin,m=a.correctFloat,k=a.isNumber,w=a.objectEach,t=a.pick;a=b.addEvent;var e=b.Axis,l=b.Chart,u=b.Point,h=b.Series,d=b.StackItem,B=b.seriesType,x=b.seriesTypes;a(e,"afterInit",function(){this.isXAxis||(this.waterfallStacks={changed:!1})});a(e,"afterBuildStacks",function(){this.waterfallStacks.changed=!1;delete this.waterfallStacks.alreadyChanged});a(l,"beforeRedraw",function(){for(var a=this.axes,p=this.series,c=p.length;c--;)p[c].options.stacking&&(a.forEach(function(f){f.isXAxis|| +(f.waterfallStacks.changed=!0)}),c=0)});a(e,"afterRender",function(){var a=this.options.stackLabels;a&&a.enabled&&this.waterfallStacks&&this.renderWaterfallStackTotals()});e.prototype.renderWaterfallStackTotals=function(){var a=this.waterfallStacks,p=this.stackTotalGroup,c=new d(this,this.options.stackLabels,!1,0,void 0);this.dummyStackItem=c;w(a,function(f){w(f,function(f){c.total=f.stackTotal;f.label&&(c.label=f.label);d.prototype.render.call(c,p);f.label=c.label;delete c.label})});c.total=null}; +B("waterfall","column",{dataLabels:{inside:!0},lineWidth:1,lineColor:"#333333",dashStyle:"Dot",borderColor:"#333333",states:{hover:{lineWidthPlus:0}}},{pointValKey:"y",showLine:!0,generatePoints:function(){var a;x.column.prototype.generatePoints.apply(this);var p=0;for(a=this.points.length;p
Fire Emblem Charts
+ Fire Emblem Charts
-
- ![]()
+
Stat page {{$route.params.characterId}}
- +
+
+
+
+
+ Growth rates :
+
+
+
+
+
+
-
+
-
+ + ++++Graph++ ++
+