No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
Step 396 | Step 396 | ||
<code>'</code> | |||
<code>style></code> | |||
<code>.chart-wrap {</code> | |||
<code>margin-left: 50px;</code> | |||
<code>font-family: sans-serif;</code> | |||
<code>height: 650px; | |||
width: 300px;</code> | |||
<code>}</code> | |||
<code>.chart-wrap .title {</code> | |||
<code>font-weight: bold;</code> | |||
<code>font-size: 1.62em;</code> | |||
<code>padding: 0.5em 0 1.8em 0;</code> | |||
<code>text-align: center;</code> | |||
< | |||
< | |||
<code>white-space: nowrap;</code> | |||
< | |||
<code>}</code> | |||
<code>.chart-wrap.vertical .grid {transform: translateY(-175px) translateX(175px) rotate(-90deg);</code> | |||
<code>}</code> | |||
<code>.chart-wrap.vertical .grid .bar::after {transform: translateY(-50%) rotate(45deg);</code> | |||
<code>display: block;</code> | |||
<code>}</code> | |||
<code>.chart-wrap.vertical .grid::before,.</code> | |||
<code>chart-wrap.vertical .grid::after {</code> | |||
<code>transform: translateX(-0.2em) rotate(90deg);</code> | |||
<code>}</code> | |||
<code>.chart-wrap .grid {</code> | |||
<code>position: relative;</code> | |||
<code>padding: 5px 0 5px 0; | |||
height: 100%;</code> | |||
<code>width: 100%;</code> | |||
<code>border-left: 2px solid #aaa;</code> | |||
<code>background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%);</code> | |||
<code>}</code> | |||
<code>.chart-wrap .grid::before {</code> | |||
<code>font-size: 0.8em;</code> | |||
<code>font-weight: bold;</code> | |||
<code>content: "0%";</code> | |||
<code>position: absolute;</code> | |||
<code>left: -0.5em;</code> | |||
<code>top: -1.5em;</code> | |||
<code>}</code> | |||
<code>.chart-wrap .grid::after {</code> | |||
<code>font-size: 0.8em;</code> | |||
<code>font-weight: bold;</code> | |||
<code>content: "100%";</code> | |||
<code>position: absolute;</code> | |||
<code>right: -1.5em;</code> | |||
<code>top: -1.5em;</code> | |||
<code>}</code> | |||
<code>.chart-wrap .bar {</code> | |||
<code>width: var(--bar-value);</code> | |||
<code>height: 50px;</code> | |||
<code>margin: 30px 0;</code> | |||
<code>background-color:#F16335;</code> | |||
<code>border-radius: 0 3px 3px 0;</code> | |||
<code>}</code> | |||
<code>.chart-wrap .bar:hover {</code> | |||
<code>opacity: 0.7;</code> | |||
<code>}</code> | |||
<code>.chart-wrap .bar::after {</code> | |||
<code>content: attr(data-name);</code> | |||
<code>margin-left: 100%;</code> | |||
<code>padding: 10px;display: inline-block;</code> | |||
<code>white-space: nowrap;</code> | |||
<code>}</code> | |||
<code></style></code> | |||
<code>'+</code> | |||
<code>'</code><div class="chart-wrap vertical"> | |||
<code>Bar Chart for Cars and Brands</code><div class="grid"> | |||
<code>'+</code> | |||
<code>Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')</code> | |||
<code>->collect(values|'</code> | |||
<code>'</code> | |||
<code>)</code> | |||
<code>->asSeparatedList( )+'' )+''</code> | |||
<code>'</code> | |||
</div> | </div> | ||
</div><code>'</code> | |||
Step | Step | ||
(Exerpt) | (Exerpt) |
Revision as of 06:49, 19 March 2024
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>
'+
'
Bar Chart for Cars and Brands
'+
Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')
->collect(values|'
'
)
->asSeparatedList( )+ )+
'
'
Step
(Exerpt)