Bootcamp: Chapter 13 - Code Snippet
No edit summary Tag: 2017 source edit |
No edit summary |
||
Line 1: | Line 1: | ||
Step 396 | 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); | transform: translateY(-175px) translateX(175px) rotate(-90deg); | ||
} | |||
.chart-wrap.vertical .grid .bar::after { | } | ||
.chart-wrap.vertical .grid .bar::after { | |||
transform: translateY(-50%) rotate(45deg); | transform: translateY(-50%) rotate(45deg); | ||
display: block; | display: block; | ||
} | |||
.chart-wrap.vertical .grid::before,. | } | ||
chart-wrap.vertical .grid::after { | .chart-wrap.vertical .grid::before,. | ||
chart-wrap.vertical .grid::after { | |||
transform: translateX(-0.2em) rotate(90deg); | transform: translateX(-0.2em) rotate(90deg); | ||
} | |||
.chart-wrap .grid { | } | ||
position: relative; | .chart-wrap .grid { | ||
padding: 5px 0 5px 0; | position: relative; | ||
height: 100%; | padding: 5px 0 5px 0; | ||
width: 100%; | height: 100%; | ||
border-left: 2px solid #aaa; | width: 100%; | ||
background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%); | 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; | .chart-wrap .grid::before { | ||
font-weight: bold; | font-size: 0.8em; | ||
content: "0%"; | font-weight: bold; | ||
position: absolute; | content: "0%"; | ||
left: -0.5em; | position: absolute; | ||
top: -1.5em; | left: -0.5em; | ||
} | top: -1.5em; | ||
.chart-wrap .grid::after { | } | ||
font-size: 0.8em; | .chart-wrap .grid::after { | ||
font-weight: bold; | font-size: 0.8em; | ||
content: "100%"; | font-weight: bold; | ||
position: absolute; | content: "100%"; | ||
right: -1.5em; | position: absolute; | ||
top: -1.5em; | right: -1.5em; | ||
} | top: -1.5em; | ||
.chart-wrap .bar { | } | ||
width: var(--bar-value); | .chart-wrap .bar { | ||
height: 50px; | width: var(--bar-value); | ||
margin: 30px 0; | height: 50px; | ||
background-color:#F16335; | margin: 30px 0; | ||
border-radius: 0 3px 3px 0; | background-color:#F16335; | ||
} | border-radius: 0 3px 3px 0; | ||
.chart-wrap .bar:hover { | } | ||
opacity: 0.7; | .chart-wrap .bar:hover { | ||
} | opacity: 0.7; | ||
.chart-wrap .bar::after { | } | ||
.chart-wrap .bar::after { | |||
content: attr(data-name); | content: attr(data-name); | ||
margin-left: 100%; | margin-left: 100%; | ||
padding: 10px;display: inline-block; | padding: 10px;display: inline-block; | ||
white-space: nowrap; | white-space: nowrap; | ||
</style> | } | ||
</style> | |||
'+ | '+ | ||
' | ' | ||
<div class="chart-wrap vertical"> | <div class="chart-wrap vertical"> | ||
Bar Chart for Cars and Brands | |||
<div class="grid"> | |||
'+ | |||
'+ | Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') | ||
Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') | |||
< | ->collect(values|' | ||
</div>' | <div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"> | ||
</div> | |||
' | |||
) | |||
->asSeparatedList( '' )+'' | |||
' | |||
</div> | |||
</div> | |||
' | |||
Step | Step | ||
(Exerpt) | (Exerpt) |
Revision as of 06:59, 18 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)
This page was edited 57 days ago on 01/20/2025. What links here