riot svg donut

by jpeter06

HTML

<script src="https://raw.githack.com/riot/riot/master/riot+compiler.js"></script>
<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> 
<div class="inner">
	<svg class="svg" style="position:absolute; top:5px;left:5px;bottom:5px;right:5px;"
  	 viewBox="0 0 100 100" > 
     <path 	each={ path,i in this.paths } d={path} fill={this.colors[i]}></path>
  </svg>
  </div>
  this.vals= [0.9,0.1,0.2];
  this.colors= ['#f00','#ea0','#b0f'];

  calcPaths(vals,size) {
    var total=vals.reduce((a, b) => a + b, 0);
    var paths=[];
    var size=size;
    var orig=0;
    for(var i=0;i<vals.length;i++){
    	var end=vals[i]*360/total;;
    	paths[i]=this.genArc(orig,end,size);
      orig+=end;
    }
    return paths;
   }

   genArc(orig,end,size){
    var unit = (Math.PI *2) / 100;    
    var startangle = this.toRadians(orig);
    var endangle = startangle+this.toRadians(end);//startangle+percentage * unit - 0.001;
    var c=size/2;
    var inR=size/2;
    var outR=size-inR;
    var x1 = inR + outR * Math.sin(startangle);
    var y1 = inR - outR * Math.cos(startangle);
    var x2 = inR + outR * Math.sin(endangle);
    var y2 = inR - outR * Math.cos(endangle);
    var big = 0;
    
    if (endangle - startangle > Math.PI) { big = 1; }
    var d = "M " + (c + (x1-c)*0.7) + "," + (c+ (y1-c)*0.7) + 
        " L " + x1 + "," + y1 +  
        " A " + c + "," + c +       // Draw an arc of radius r
        " 0 " + big + " 1 " +       // Arc details...
        x2 + "," + y2 +             // Arc goes to to (x2,y2)
        " L " + (c + (x2-c)*0.7) + "," + (c+ (y2-c)*0.7) + 
        " A " + c*0.7 + "," + c*0.7 +       // Draw an arc of radius r
        " 0 " + 0 + " 0 " +       // Arc details...
        (c + (x1-c)*0.7) + "," + (c+ (y1-c)*0.7) // Arc goes to to
        " Z";                       // Close path back to (cx,cy)
    return d;
  }
  toRadians (angle) { return angle *...

CSS

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

.inner {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fff;
}
.piesvg {  fill: yellowgreen;  stroke-width:0;}

riot-map .svg {
    display: block;
    position: absolute;
    top: 5%;
    left: 15%;
    width: 90%;
    height: 90%;
    transform: rotate(-90deg);
}
circle {fill:transparent;
  stroke: #ac32cd;
}

path:hover{fill:green}
text{pointer-events:none }
text {text-shadow: 2px 2px 3px #888; }

JavaScript

riot.mount("riot-map")