Histogram componentAvailable since EcoComposer 2.0
10 %
8 %
5 %
12 %
65 %
20 €
40 €
50 €
55 €
57 €
58 €
The default values are :
animated : true,
border-radius : .5rem * theming.$font-size,
font-size : 16px,
height : 30rem * theming.$font-size,
horizontal : false,
histogram--axis--color : 'histogram--axis--color',
histogram--bar--text-color : 'histogram--bar--text-color',
histogram--bar--text-shadow : 'histogram--bar--text-shadow',
histogram--left-axis--border : 'histogram--left-axis--border',
histogram--right-axis--border : 'histogram--right-axis--border',
container--margin : 3rem * theming.$font-size,
margin : .5rem * theming.$font-size,
max-value : 100, // later replaced by the highest value
print : false,
suffix : '',
text : 'true',
themes : (
light : (
default--histogram--axis--color : #333,
default--histogram--bar--text-color : #333,
default--histogram--bar--text-shadow : 0 0 2px #fff,
default--histogram--left-axis--border : 1px solid #000,
default--histogram--right-axis--border : 1px solid #000
),
dark : (
default--histogram--axis--color : #ddd,
default--histogram--bar--text-color : #ddd,
default--histogram--bar--text-shadow : 0 0 2px #000,
default--histogram--left-axis--border : 1px solid #ddd,
default--histogram--right-axis--border : 1px solid #ddd
)
),
width : 5rem * theming.$font-size
We can implement it that way :
@include histogram.init;
@include histogram.create(
(
'slices' : (
(10, utils.linearGradient(10, #AFF)),
(8, utils.linearGradient(8, #0A7)),
(5, utils.linearGradient(5, #77C))
)
)
);
@include histogram.create(
(
'themes' : $themes,
'max-value' : 65,
'slices' : (
(10, utils.linearGradient(45, #AFF)),
(8, utils.linearGradient(45, #0A7)),
(5, utils.linearGradient(45, #77C)),
(12, utils.linearGradient(45, #555)),
(65, utils.linearGradient(45, #A0A))
)
)
);
We can implement it that way :
<div class="histogram suffix">
<div class="histogram--segment suffix">10 %</div>
<div class="histogram--segment suffix">8 %</div>
<div class="histogram--segment suffix">5 %</div>
<div class="histogram--segment suffix">12 %</div>
<div class="histogram--segment suffix">65 %</div>
</div>