Skip to content

Commit

Permalink
feat(stats): get responsive funnel
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentporte
vincentporte committed Sep 21, 2023
1 parent 106a056 commit fe89360
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 70 deletions.
Binary file removed lacommunaute/static/images/funnel.png
View file
Binary file not shown.
146 changes: 92 additions & 54 deletions lacommunaute/static/stylesheets/itou_communaute.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
border-radius: 50%;
overflow: hidden;

> img {
>img {
width: 100%;
height: auto;
object-fit: cover;
Expand Down Expand Up @@ -74,58 +74,6 @@
border-color: #b3b4c3 !important;
}

.funnel-container {
position: relative;
}

.number-overlay {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
}

.target {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: 300;
margin-top: 30px;
}

.number-overlay-top {
top: 15%;
}

.number-overlay-middle {
top: 45%;
color: #fff;
}

.number-overlay-bottom {
top: 80%;
color: #fff;
}

.text-overlay {
position: absolute;
font-size: 12px;
font-weight: 300;
}

.text-overlay-top {
top: 10%;
}

.text-overlay-middle {
top: 45%;
}

.text-overlay-bottom {
top: 75%;
}

.btn-poster {
padding: 0 !important;
Expand Down Expand Up @@ -154,7 +102,7 @@ span.highlighted {
.input-group-rounded-pill {
border-radius: 50rem !important;

> input {
>input {
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
}
Expand All @@ -165,3 +113,93 @@ span.highlighted {
border-bottom-right-radius: 50rem !important;
}
}

.funnel {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
color: #fff;

.number {
font-size: 20px;
font-weight: bold;
}

.comment {
font-size: 10px;
}

li {
padding: 10px 5px;
margin: 0;
margin-bottom: 5px;
position: relative;
overflow: hidden;
height: 110px;
}

li:before,
li:after {
content: '';
position: absolute;
top: 0;
height: 0;
border-bottom: 110px solid #fff;
}

li:before {
left: 0;
border-right: 27px solid transparent;
border-left: 0;
}

li:after {
right: 0;
border-left: 27px solid transparent;
border-right: 0;
}

li:nth-child(1) {
color: #000638;
background-color: #d8ede3;
}

li:nth-child(1):before,
li:nth-child(1):after {
width: 25px;
}

li:nth-child(2) {
background-color: #60a47c;
}

li:nth-child(2):before,
li:nth-child(2):after {
width: 55px;
}

li:nth-child(3) {
background-color: #3e7152;
}

li:nth-child(3):before,
li:nth-child(3):after {
width: 84px;
}
}

.legend {
list-style-type: none;
margin: 0;
padding: 0;

li {
padding: 10px 5px;
margin: 0;
margin-bottom: 5px;
position: relative;
overflow: hidden;
height: 110px;
}
}
48 changes: 32 additions & 16 deletions lacommunaute/templates/pages/statistiques.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,42 @@ <h1 class="s-title-01__title h1"><strong>Statistiques</strong></h1>
<div class="card c-card mb-3 mb-md-5">
<div class="card-header">
<h2>Acquisition</h2>

</div>
<div class="card-body">
<div class="row">
<div class="col funnel-container">
<img src="{% static 'images/funnel.png' %}" alt="Entonnoir d'aquisition des utilisateurs">
<span class="number-overlay number-overlay-top">3192</span>
<span class="number-overlay number-overlay-top target">-16%/mois précédent</span>
<span class="number-overlay number-overlay-middle">3067</span>
<span class="number-overlay number-overlay-middle target">96% des Utilisateurs<br>+1,4%/mois précédent</span>
<span class="number-overlay number-overlay-bottom">1539</span>
<span class="number-overlay number-overlay-bottom target text-center">50.2% des Util. Actifs<br>+3%/mois préc.</span>
<div class="col-12 col-lg-6">
<ul class="funnel">
<li>
<div>Utilisateurs</div>
<div class="number">3192</div>
<div class="comment">-16%/mois précédent</div>
</li>
<li>
<div>Utilisateurs actifs</div>
<div class="number">3067</div>
<div class="comment">96% des Utilisateurs</div>
<div class="comment">+1,4%/mois précédent</div>
</li>
<li>
<div>Utilisateurs engagés</div>
<div class="number">1539</div>
<div class="comment">50.2% des Util. Actifs</div>
<div class="comment">+3%/mois préc.</div>
</li>
</ul>
</div>
<div class="col ">
<span class="text-overlay text-overlay-top">
<h3 class="mb-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à la page d'accueil
</span>
<span class="text-overlay text-overlay-middle"><h3 class="mb-1">Utilisateurs Actifs</h3>visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté</span>
<span class="text-overlay text-overlay-bottom"><h3 class="mb-1">Utilisateurs Engagés</h3>visiteurs uniques ayant posé une question, cherché ou posté une réponse</span>
<div class="col-12 col-lg-6">
<ul class="legend">
<li>
<h3 class="mt-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à la page d'accueil
</li>
<li>
<h3 class="mt-1">Utilisateurs Actifs</h3>visiteurs uniques ayant au moins parcouru le fil d'actualités d'une communauté
</li>
<li>
<h3 class="mt-1">Utilisateurs Engagés</h3>visiteurs uniques ayant posé une question, cherché ou posté une réponse
</li>
</ul>
</div>
</div>
</div>
Expand All @@ -57,7 +74,6 @@ <h3 class="mb-1">Utilisateurs</h3>visiteurs uniques ayant au moins accédé à l
</div>
</section>


<section class="s-section">
<div class="s-section__container container">
<div class="s-section__row row">
Expand Down

0 comments on commit fe89360

Please sign in to comment.