From c51ef66993417bc470ff84ed6acc6a9cdbce33c0 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 30 Oct 2024 13:19:52 +0000
Subject: [PATCH] feat(ui): increase selected height and animate selected
---
.../ElecHalfHourChart.spec.tsx.snap | 16 +++++------
.../MaxConsumptionCard.spec.tsx.snap | 6 ++--
src/components/Charts/Bar.tsx | 6 ++--
.../Charts/__snapshots__/Bar.spec.tsx.snap | 28 +++++++++----------
.../__snapshots__/BarChart.spec.tsx.snap | 12 ++++----
src/styles/components/_barchart.scss | 3 ++
6 files changed, 36 insertions(+), 35 deletions(-)
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 493674eb3..8ed63acab 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -81,9 +81,9 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
transform="translate(21.219512195121922, -40)"
>
<rect
- class="background-undefined"
+ class="background-undefined animate-background"
fill="#E0E0E0"
- height="180"
+ height="240"
width="190.97560975609758"
x="0"
y="0"
@@ -169,9 +169,9 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
transform="translate(233.41463414634146, -40)"
>
<rect
- class="background-undefined"
+ class="background-undefined animate-background"
fill="#E0E0E0"
- height="180"
+ height="240"
width="190.97560975609758"
x="0"
y="0"
@@ -257,9 +257,9 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
transform="translate(445.609756097561, -40)"
>
<rect
- class="background-undefined"
+ class="background-undefined animate-background"
fill="#E0E0E0"
- height="180"
+ height="240"
width="190.97560975609758"
x="0"
y="0"
@@ -345,9 +345,9 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
transform="translate(657.8048780487804, -40)"
>
<rect
- class="background-undefined"
+ class="background-undefined animate-background"
fill="#E0E0E0"
- height="180"
+ height="240"
width="190.97560975609758"
x="0"
y="0"
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index e5a576241..84a184e84 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -119,7 +119,7 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
transform="translate(54.6875, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
height="220"
width="218.75"
@@ -207,7 +207,7 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
transform="translate(328.125, -40)"
>
<rect
- class="background-false"
+ class="background-false animate-background"
fill="#E0E0E0"
height="220"
width="218.75"
@@ -295,7 +295,7 @@ exports[`MaxConsumptionCard component should be rendered correctly with 2 button
transform="translate(601.5625, -40)"
>
<rect
- class="background-false"
+ class="background-false animate-background"
fill="#E0E0E0"
height="220"
width="218.75"
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index bb1ae9fa3..4c446427f 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -160,8 +160,6 @@ const Bar = ({
return `bar-compare-${FLUIDNAME} ${selected} ${animationClass} ${clickedAnim}`
}
- const barBackgroundClass = isSelectedDate
-
const getBandWidth = (): number => {
return compare ? xScale.bandwidth() / 2 : xScale.bandwidth()
}
@@ -204,8 +202,8 @@ const Bar = ({
x="0"
y="0"
width={compare ? getBandWidth() * 2 : getBandWidth()}
- height={height + 40}
- className={`background-${barBackgroundClass}`}
+ height={height + 40 + (clickable ? 60 : 0)}
+ className={`background-${isSelectedDate} animate-background`}
fill="#E0E0E0"
/>
</g>
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index db2b14af8..6fdf9b44c 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -9,9 +9,9 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-false"
+ class="background-false animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -104,9 +104,9 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -199,9 +199,9 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -328,9 +328,9 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -423,9 +423,9 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -518,9 +518,9 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
@@ -613,9 +613,9 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
transform="translate(0.625, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="60"
+ height="120"
width="2.5000000000000004"
x="0"
y="0"
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
index 5c2161cba..45fe52580 100644
--- a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -96,9 +96,9 @@ exports[`BarChart component should render correctly 1`] = `
transform="translate(33.43750000000003, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="370"
+ height="430"
width="133.75"
x="0"
y="0"
@@ -184,9 +184,9 @@ exports[`BarChart component should render correctly 1`] = `
transform="translate(200.62500000000003, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="370"
+ height="430"
width="133.75"
x="0"
y="0"
@@ -272,9 +272,9 @@ exports[`BarChart component should render correctly 1`] = `
transform="translate(367.8125, -40)"
>
<rect
- class="background-true"
+ class="background-true animate-background"
fill="#E0E0E0"
- height="370"
+ height="430"
width="133.75"
x="0"
y="0"
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 3ce54187b..17ab53100 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -40,6 +40,9 @@
.background-false {
opacity: 0;
}
+.animate-background {
+ transition: all 0.2s ease-out;
+}
.bar-compare-ELECTRICITY,
.bar-compare-GAS,
.bar-compare-WATER,
--
GitLab