diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 493674eb37c8d7324a028f9cf1d990187cc1adf1..8ed63acabe333e6c6e3a230f411730e03128f43c 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 e5a5762412fe9b076810dce71dbda2e4fa2fd303..84a184e84ce80a08a73be32778f5a9f9aaa6389a 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 bb1ae9fa372979807edfed750611f3fdb1a3b40b..4c446427f39d6e8328cadf369f1df182046027d9 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 db2b14af89cd9dbb457f1f64f0120757bd17252b..6fdf9b44cf60b76a73aa3351c94ae714f3a675dd 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 5c2161cba010b248f63b710b899262b15c81726b..45fe525808ed90497b9b74c7a6f3614148a5cc14 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 3ce54187b6ba08978c2553a292b8c5f1f9ddd7e3..17ab531004b09d096bb54890660b81468c73ee96 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,