1000 Steps Program: Chapter 13 - Code Snippets

Step 396

'
<style>
     .chart-wrap {
       margin-left: 50px;
       font-family: sans-serif;
       height: 650px;
       width: 300px;
     }
     .chart-wrap .title {
       font-weight: bold;
       font-size: 1.62em;
       padding: 0.5em 0 1.8em 0;
       text-align: center;
       white-space: nowrap;
     }
     .chart-wrap.vertical .grid {
       transform: translateY(-175px) translateX(175px) rotate(-90deg);
     }
     .chart-wrap.vertical .grid .bar::after {
       transform: translateY(-50%) rotate(45deg);
       display: block;
     }
     .chart-wrap.vertical .grid::before,
     .chart-wrap.vertical .grid::after {
       transform: translateX(-0.2em) rotate(90deg);
     }
     .chart-wrap .grid {
       position: relative;
       padding: 5px 0 5px 0;
       height: 100%;
       width: 100%;
       border-left: 2px solid #aaa;
       background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%);
     }
     .chart-wrap .grid::before {
       font-size: 0.8em;
       font-weight: bold;
       content: "0%";
       position: absolute;
       left: -0.5em;
       top: -1.5em;
     }
     .chart-wrap .grid::after {
       font-size: 0.8em;
       font-weight: bold;
       content: "100%";
       position: absolute;
       right: -1.5em;
       top: -1.5em;
     }
     .chart-wrap .bar {
       width: var(--bar-value);
       height: 50px;
       margin: 30px 0;
       background-color: #F16335;
       border-radius: 0 3px 3px 0;
     }
     .chart-wrap .bar:hover {
       opacity: 0.7;
     }
     .chart-wrap .bar::after {
       content: attr(data-name);
       margin-left: 100%;
       padding: 10px;
       display: inline-block;
       white-space: nowrap;
     }
     
     </style>

'+

'

<div class="chart-wrap vertical">
       <h2 class="title">Bar Chart for Cars and Brands</h2>
  
  <div class="grid">
     '+
     Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')
     ->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div>'

)
->asSeparatedList( '' )+
'
  </div>
</div>'

Step 406

'
<style>
    h1 {
      font: 24px sans-serif;
    }
    .bar {
      fill: #d81c3f;
    }
    
    .bar:hover {
      fill: darkgray;
    }
    
    .axis {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .x.axis path {
      display: none;
    }
    </style>

'+

'

<div class="chart-wrap vertical">
      <h2 class="title">Bar Chart for Cars and Brands</h2>
  
  <div class="grid">
    '+
    Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')
    ->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div>'

)
->asSeparatedList( '' )+
'
  </div>
</div>'+

'<h1>SVG Vertical Bar Chart</h1>

<svg width="960" height="500">
	<g transform="translate(40,20)">
	<g class="x axis" transform="translate(0,450)">'+
let cars=Car.allInstances in
(
  cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/cars->size).Round(0).asstring+'%',BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35)
->collect(values|'
  		       <g class="tick" transform="translate('+values.Part3.asstring+',0)" style="opacity: 1;"><line y2="6" x2="0"></line>
			<text dy=".71em" y="9" x="0" style="text-anchor: middle;">'+values.Name+'</text>
		</g>


'

)
->asSeparatedList( '' )
)+

'
  		       
		<path class="domain" d="M0,6V0H900V6"></path>
	</g>
		<g class="y axis">
			<g class="tick" transform="translate(0,450)" style="opacity: 1;"><line x2="-6" y2="0"></line>
			<text dy=".32em" x="-9" y="0" style="text-anchor: end;">0%</text>
		</g>
			<g class="tick" transform="translate(0,212)" style="opacity: 1;"><line x2="-6" y2="0"></line>
			<text dy=".32em" x="-9" y="0" style="text-anchor: end;">50%</text>
		</g>
			<g class="tick" transform="translate(0,24.87009919697684)" style="opacity: 1;"><line x2="-6" y2="0"></line>
			<text dy=".32em" x="-9" y="0" style="text-anchor: end;">100%</text>
		</g>
		<path class="domain" d="M-6,0H0V450H-6"></path>
		<text transform="rotate(-90)" y="6" dy=".71em" style="text-anchor: end;">Frequency</text>
	</g>
'+
let cars=Car.allInstances in
(
  cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,
                          (450*tuple.List->size/cars->size).Round(0),
                          BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35)
->collect(values|'
		<rect class="bar" x="'+values.Part3.asstring+'" width="31" y="'+values.Part2.asstring+'" height="'+(450-values.Part2).asstring+'"></rect>


'

)
->asSeparatedList( '' )
)+

'
</svg>'