Skip to content
Snippets Groups Projects
Commit c51ef669 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

feat(ui): increase selected height and animate selected

parent 86d2cf9b
No related branches found
No related tags found
2 merge requests!1275feat(ui): increase selected height and animate selected,!1263feat(ui)!: new design
Hide whitespace changes
Inline Side-by-side
Showing
with 36 additions and 35 deletions
src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+ 8
− 8
View file @ c51ef669
......@@ -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"
......
src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+ 3
− 3
View file @ c51ef669
......@@ -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"
......
src/components/Charts/Bar.tsx
+ 2
− 4
View file @ c51ef669
......@@ -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>
......
src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+ 14
− 14
View file @ c51ef669
......@@ -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"
......
src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
+ 6
− 6
View file @ c51ef669
......@@ -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"
......
src/styles/components/_barchart.scss
+ 3
− 0
View file @ c51ef669
......@@ -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,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment