1000 Steps Program: Chapter 13 - Code Snippets
No edit summary
Tag: 2017 source edit
No edit summary
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Step 396
=== '''Steps 396, 399''' ===
  '  
 
  <style>
===== <span class="col-blue-dark">ThisIsHtml</span> =====
.chart-wrap {
  '
margin-left: 50px;
  <nowiki><style>
font-family: sans-serif;
      .chart-wrap {
height: 650px;
        margin-left: 50px;
width: 300px;
        font-family: sans-serif;
}
        height: 650px;
.chart-wrap .title {
        width: 300px;
font-weight: bold;
      }
font-size: 1.62em;
      .chart-wrap .title {
padding: 0.5em 0 1.8em 0;
        font-weight: bold;
text-align: center;
        font-size: 1.62em;
white-space: nowrap;
        padding: 0.5em 0 1.8em 0;
}
        text-align: center;
.chart-wrap.vertical .grid {
        white-space: nowrap;
transform: translateY(-175px) translateX(175px) rotate(-90deg);
      }
}
      .chart-wrap.vertical .grid {
.chart-wrap.vertical .grid .bar::after {
        transform: translateY(-175px) translateX(175px) rotate(-90deg);
transform: translateY(-50%) rotate(45deg);
      }
display: block;
      .chart-wrap.vertical .grid .bar::after {
}
        transform: translateY(-50%) rotate(45deg);
.chart-wrap.vertical .grid::before,.
        display: block;
chart-wrap.vertical .grid::after {
      }
transform: translateX(-0.2em) rotate(90deg);
      .chart-wrap.vertical .grid::before,
}
      .chart-wrap.vertical .grid::after {
.chart-wrap .grid {
        transform: translateX(-0.2em) rotate(90deg);
position: relative;
      }
padding: 5px 0 5px 0;
      .chart-wrap .grid {
height: 100%;
        position: relative;
width: 100%;
        padding: 5px 0 5px 0;
border-left: 2px solid #aaa;
        height: 100%;
background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%);
        width: 100%;
}
        border-left: 2px solid #aaa;
.chart-wrap .grid::before {
        background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%);
font-size: 0.8em;
      }
font-weight: bold;
      .chart-wrap .grid::before {
content: "0%";
        font-size: 0.8em;
position: absolute;
        font-weight: bold;
left: -0.5em;
        content: "0%";
top: -1.5em;
        position: absolute;
}
        left: -0.5em;
.chart-wrap .grid::after {
        top: -1.5em;
font-size: 0.8em;
      }
font-weight: bold;
      .chart-wrap .grid::after {
content: "100%";
        font-size: 0.8em;
position: absolute;
        font-weight: bold;
right: -1.5em;
        content: "100%";
top: -1.5em;
        position: absolute;
}
        right: -1.5em;
.chart-wrap .bar {
        top: -1.5em;
width: var(--bar-value);
      }
height: 50px;
      .chart-wrap .bar {
margin: 30px 0;
        width: var(--bar-value);
background-color:#F16335;
        height: 50px;
border-radius: 0 3px 3px 0;
        margin: 30px 0;
}
        background-color: #F16335;
.chart-wrap .bar:hover {
        border-radius: 0 3px 3px 0;
opacity: 0.7;
      }
}
      .chart-wrap .bar:hover {
.chart-wrap .bar::after {
        opacity: 0.7;
content: attr(data-name);
      }
margin-left: 100%;
      .chart-wrap .bar::after {
padding: 10px;display: inline-block;
        content: attr(data-name);
white-space: nowrap;
        margin-left: 100%;
}
        padding: 10px;
</style>
        display: inline-block;
        white-space: nowrap;
      }
     
      </style></nowiki>
  '+
  '+
'
<nowiki><div class="chart-wrap vertical">
        <h2 class="title">Bar Chart for Cars and Brands</h2></nowiki>
<nowiki> </nowiki>
<nowiki> </nowiki> <nowiki><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></nowiki>'
)
->asSeparatedList( <nowiki>''</nowiki> )+
  '
  '
  Bar Chart for Cars and Brands
  <nowiki> </nowiki> <nowiki></div></nowiki>
<nowiki></div></nowiki>'<br />
 
=== '''Step 406''' ===
'
<nowiki><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></nowiki>
  '+
  '+
  Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')
   
'
<nowiki><div class="chart-wrap vertical">
        <h2 class="title">Bar Chart for Cars and Brands</h2></nowiki>
<nowiki> </nowiki>
<nowiki> </nowiki> <nowiki><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></nowiki>'
)
->asSeparatedList( <nowiki>''</nowiki> )+
'
<nowiki> </nowiki> <nowiki></div></nowiki>
<nowiki></div></nowiki>'+
'<nowiki><h1>SVG Vertical Bar Chart</h1></nowiki>
<svg width="960" height="500">
<g transform="translate(40,20)">
<g class="x axis" transform="translate(0,450)">'+
let cars=Car.allInstances in
(
<nowiki> </nowiki> 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|'
  ->collect(values|'
<nowiki> </nowiki>       <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(  )+
  ->asSeparatedList( <nowiki>''</nowiki> )
  )+
  '
  '
<nowiki> </nowiki>      
<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
(
<nowiki> </nowiki> cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,
<nowiki> </nowiki>                        (450*tuple.List->size/cars->size).Round(0),
<nowiki> </nowiki>                        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>
  '
  '
Step
 
)
(Exerpt)
->asSeparatedList( <nowiki>''</nowiki> )
)+
'
</svg>'
[[Category:1000 Steps Program]]

Latest revision as of 05:53, 10 April 2024

Steps 396, 399

ThisIsHtml
'
<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>'
This page was edited 30 days ago on 04/10/2024. What links here