riot svg pies

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
<riot-map>

</riot-map>

<script type="riot/tag">
<riot-map> 
	<svg style="width:100%;height:100%;text-anchor: middle;"
  	version="1.1" riot-viewBox="{viewBox}" > 
     <g 	each={ fig in this.figs }
     	riot-transform="{'translate('+(fig.x-fig.r)+' '+ (fig.y-fig.r)+') rotate(-90 '+fig.r+' '+ fig.r+')'}">
    		<circle class="piesvg" riot-r="{fig.r}" riot-cx="{fig.r}" riot-cy="{fig.r}" />
    		<circle  class="piesvg2"  riot-r="{fig.r/2}" riot-cx="{fig.r}" riot-cy="{fig.r}"
      		style="{'stroke-dasharray:'+ fig.percent*0.01*fig.r*3.14+' '+ fig.r*100*3.14+';stroke-width:'+ fig.r+';stroke-dashoffset: '+fig.percent*0.01*fig.r*3.14}"/>
      <!-- 2π × 25 ≈ 158  -->
  		</g>  
      <g 	each={ fig in this.figs }
      	riot-transform="{'translate('+(fig.x)+' '+ (fig.y)+')'}"> 
      		<text x="0" y="0" style="dominant-baseline: middle;fill:black">{fig.num}</text>
     		<text x="0" y="0" style="dominant-baseline: middle;fill:white">{fig.num}</text>
      </g>
  </svg>
  
  this.viewBox="0 0 300 300";
  this.figs= [
			{ x:20,y:20, percent:29,num:30},
			{ x:180,y:40, percent: 85,num:40},
			{ x:100,y:140, percent: 25, num:100},
			{ x:260,y:180, percent: 55, num:140}
     ]
     
   calcR() {
   	var max=1; 
 		for(var i=0;i<this.figs.length;i++)
  		max=max<this.figs[i].num?this.figs[i].num:max;
    console.log("max:",max)
  	for(var i=0;i<this.figs.length;i++)
  		this.figs[i].r=(this.figs[i].num*80)/max;
	 }
   
   this.calcR();
   
   this.on('mount',function(){console.log("figs:",this.figs);})
  
</riot-map>
</script>

CSS

html,body,riot-map,svg{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}

.piesvg {
  fill: yellowgreen;
  stroke-width:0;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.piesvg2 {
  fill: yellowgreen;
  stroke: #ac32cd;
  animation: dash 1.4s forwards 1 ease;
}

text{pointer-events:none }
text {
    text-shadow: 2px 2px 3px #888;
}
g:hover circle{
  fill:red;
  stroke: brown;}

JavaScript

var pp=riot.mount("riot-map")[0];
console.log("aux2:",pp);
//pp.figs= [	{ x:110,y:80, percent: 45, num:160}    ];pp.calcR();pp.update();