ability-chart.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="ability-chart">

  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <canvas id="canvas">
    </canvas>
  </template>

  <script>
    /**
     * `ability-chart`
     * A canvas based ability chart component @yuanfux
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class AbilityChart extends Polymer.Element {

      static get is() { return 'ability-chart'; }

      static get properties() {
        return {
          prop: {
            type: Object,
            observer: 'buildChart'
          },
          dimension: {
            type: Number,
            readOnly: true,
            value: 300
          },
          numLayer: {
            type: Number,
            readOnly: true,
            value: 1
          },
          labelFont: {
            type: String,
            readOnly: true,
            value: '12px Arial'
          },
          labelFontColor: {
            type: String,
            readOnly: true
          },
          frameBorderWidth: {
            type: Number,
            readOnly: true
          },
          chartBorderWidth: {
            type: Number,
            readOnly: true
          },
          decorLineColor: {
            type: String,
            readOnly: true
          },
          chartPortion: {
            type: Number,
            readOnly: true,
            value: 0.85
          },
          chartAlpha: {
            type: Number,
            readOnly: true
          },
          eachLayerStyle: {
            type: Array,
            readOnly: true
          },
          valueSets: {
            type: Array,
            readOnly: true
          },
          numPoint: {
            type: Number,
            readOnly: true
          },
          scale: {
            type: Object,
            readOnly: true
          },
          labelOffset: {
            type: Number,
            readOnly: true
          }
        }
      }

      buildChart(){
        this.initData();
        this.initChart();
      }

      initData(){
        let prop = this.prop;
        if (prop.dimension) {
          this._setDimension(prop.dimension);
        }
        if (prop.numLayer) {
          this._setNumLayer(prop.numLayer);
        }
        if (prop.labelFont) {
          this._setLabelFont(prop.labelFont);
        }
        if (prop.labelFontColor) {
          this._setLabelFontColor(prop.labelFontColor);
        }
        if (prop.frameBorderWidth) {
          this._setFrameBorderWidth(prop.frameBorderWidth);
        }
        if (prop.chartBorderWidth) {
          this._setChartBorderWidth(prop.chartBorderWidth);
        }
        if (prop.decorLineColor) {
          this._setDecorLineColor(prop.decorLineColor);
        }
        if (prop.chartPortion) {
          this._setChartPortion(prop.chartPortion);
        }
        if (prop.chartAlpha) {
          this._setChartAlpha(prop.chartAlpha);
        }
        if (prop.scale) {
          this._setScale(prop.scale);
        }
        if (prop.labelOffset) {
          this._setLabelOffset(prop.labelOffset);
        }

        if(prop.eachLayerStyle){
          let eachLayerStyle = [];
          prop.eachLayerStyle.map((obj) => {
            let tempStyle = [];
            tempStyle.push(obj.fillColor);
            tempStyle.push(obj.borderColor);
            eachLayerStyle.push(tempStyle);
          });
          this._setEachLayerStyle(eachLayerStyle);
        }

        let valueSets = [];
        prop.datasets.values.forEach(
          (eachSet) => {
            let valueSet = eachSet.map(
              (value) => (value/100).toFixed(2)
            );
            valueSets.push(valueSet);
          }
        );
        this._setValueSets(valueSets);
        this._setNumPoint(prop.datasets.keys.length);
        this.generateAnchorPts(this.chartPortion*this.dimension/2, this.numPoint);
      }

      initChart(){
        if(this.numPoint < 3) return;
          let canvas = this.$.canvas;
          canvas.width = this.dimension;
          canvas.height = this.dimension;
          if(canvas.getContext){
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            this.drawChart(ctx);
          }
      }

      drawChart(ctx){
        //outter frame & layer
        for(let i = 0 ; i < this.numLayer ; i++){
          let tempK = [];
          let coef = 1 - (1/this.numLayer)*i;
          for(let j = 0 ; j < this.numPoint ; j++){
            tempK.push(coef);
          }
          this.drawPolygon(ctx ,this.dimension/2, this.dimension/2, this.numPoint, tempK, this.eachLayerStyle? this.eachLayerStyle[i][0] : null, this.frameBorderWidth, this.eachLayerStyle? this.eachLayerStyle[i][1] : null);
        }

        //center to vertex line
        this.drawDecorationLine(ctx ,this.dimension/2, this.dimension/2, this.numPoint);
        //actual chart
        for (let i = 0 ; i < this.prop.datasets.values.length ; i++) {
          const fillColor = this.prop.datasets.styles ? this.prop.datasets.styles[i].fillColor : null;
          const borderColor = this.prop.datasets.styles ? this.prop.datasets.styles[i].borderColor : null;
          this.drawPolygon(ctx ,this.dimension/2, this.dimension/2, this.numPoint, this.valueSets[i], fillColor, this.chartBorderWidth, borderColor, this.chartAlpha);
        }
        // this.drawPolygon(ctx ,this.dimension/2, this.dimension/2, this.numPoint, this.eachVal, this.fillColor, this.chartBorderWidth, this.borderColor, this.chartAlpha);
        //scale label
        if (this.scale) {
          this.drawScale(ctx, this.dimension/2, this.dimension/2, this.numLayer, this.chartPortion, this.scale.scaleLabel, this.scale.font, this.scale.fontColor, this.scale.offset);
        }
      }

      generateAnchorPts(radius, sides){
        this.anchorPts = [];
        let eachAngle = ((Math.PI * 2)/sides);
        this.anchorPts.push([0, -radius]);
        for(let i = 1; i < sides; i++){
          this.anchorPts.push([radius*Math.cos(-Math.PI/2 + eachAngle*i), radius*Math.sin(-Math.PI/2 + eachAngle*i)]);
        }
      }

      drawPolygon(ctx, x, y, sides, k, fillColor, borderWidth, borderColor, alpha){
        if (sides < 3) return;
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        if(!k){
          k = [];
          for(let i = 0 ; i < sides ; i++){
            k.push(1);
          }
        }
        ctx.moveTo(k[0] * this.anchorPts[0][0],
               k[0] * this.anchorPts[0][1])
        for (let i = 1 ; i < this.anchorPts.length ; i++) {
          ctx.lineTo(k[i] * this.anchorPts[i][0],
                   k[i] * this.anchorPts[i][1]);
        }
        ctx.closePath();

        if(alpha)
          ctx.globalAlpha = alpha;

        if(fillColor){
          ctx.fillStyle = fillColor;

          ctx.fill();
        }

        if(borderWidth)
          ctx.lineWidth = borderWidth;

        if(borderColor)
          ctx.strokeStyle = borderColor;

        ctx.stroke();
        ctx.restore();
      }

      drawDecorationLine(ctx, x, y, sides){
        if (sides < 3) return;
        for(let i = 0 ; i < this.anchorPts.length ; i++){
          this.drawLine(ctx, x, y, this.anchorPts[i][0], this.anchorPts[i][1], this.frameBorderWidth, this.decorLineColor);
          let alignment = "start";
          let maxWidth = this.dimension;
          if(i == 0 || ((this.numPoint%2 == 0) && (i == (this.numPoint-2)/2 + 1))){
            alignment = "center";
          }
          else if(i > (this.numPoint-2)/2 + 1){
            alignment = "end";
            maxWidth = this.dimension/2 + this.anchorPts[i][0];
          }
          else{
            maxWidth = this.dimension/2 - this.anchorPts[i][0];
          }

          if(this.anchorPts[i][1] > 0.0000001){
            alignment += "Top";
          }
          else if(this.anchorPts[i][1] < -0.0000001){
            alignment += "Bot";
          }
          this.drawText(ctx, this.prop.datasets.keys[i], this.labelFont, this.labelFontColor, alignment, x, y, this.anchorPts[i][0], this.anchorPts[i][1], maxWidth, this.labelOffset);
        }
      }

      drawLine(ctx, x0, y0, x1, y1, decorLineWidth, decorLineColor){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x0, y0);
        ctx.moveTo(0, 0);
        ctx.lineTo(x1, y1);
        if(decorLineWidth)
          ctx.lineWidth = decorLineWidth;
        if(decorLineColor)
          ctx.strokeStyle = decorLineColor;
        ctx.stroke();
        ctx.restore();
      }

      drawText(ctx, text, font, fillStyle, alignment, x0, y0, x1, y1,maxWidth, offset){
        ctx.save();
        if(font)
        ctx.font = font;

        if(fillStyle)
        ctx.fillStyle = fillStyle;

        if(alignment.indexOf("Top") >= 0){
          ctx.textBaseline = "top";
        }
        else if(alignment.indexOf("Bot") >= 0){
          ctx.textBaseline = "bottom";
        }
        else{
          ctx.textBaseline = "middle";
        }

        if(alignment.indexOf("center") >= 0){
          ctx.textAlign = "center";
        }
        else if(alignment.indexOf("end") >= 0){
          ctx.textAlign = "end";
        }
        else if(alignment.indexOf("start") >= 0){
          ctx.textAlign = "start";
        }

        if (offset) {
          const mag = Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2));
          const extendedMag = mag + offset;
          const ratio = extendedMag / mag;
          x1 = x1 * ratio;
          y1 = y1 * ratio;
        }

        ctx.translate(x0, y0);
        ctx.fillText(text, x1, y1, maxWidth);
        ctx.restore();
      }

      drawScale(ctx, x, y, numLayer, chartPortion, scaleLabel, font, fillStyle, offset) {
        const outmostY = -chartPortion * x;
        for (let i = 0 ; i <= numLayer ; i++) {
          const coef = (1 / numLayer ) * i;
          const curY = outmostY * coef;
          this.drawSingleScale(ctx, scaleLabel[i], font, fillStyle, x, y, 0, curY, offset);
        }
      }

      drawSingleScale(ctx, text, font, fillStyle, x0, y0, x1, y1, offset) {
        ctx.save();
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        if(font)
        ctx.font = font;

        if(fillStyle)
        ctx.fillStyle = fillStyle;

        ctx.translate(x0, y0);
        ctx.fillText(text, x1 + offset, y1);
        ctx.restore();
      }
    }

    window.customElements.define(AbilityChart.is, AbilityChart);
  </script>
</dom-module>