From cd26743dde7d76bf9501d73c084a61e7f76f2437 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 7 Sep 2023 07:41:57 +0000
Subject: [PATCH] feat(conso): add consumption placeholder bar & change bar
animation
---
.../ElecHalfHourChart.spec.tsx.snap | 56 ++-
src/components/Charts/Bar.tsx | 161 ++++----
src/components/Charts/BarChart.tsx | 5 +
.../DataloadConsumptionVisualizer.spec.tsx | 81 +++-
.../DataloadConsumptionVisualizer.tsx | 3 +-
.../InfoDataConsumptionVisualizer.tsx | 2 +-
...ataloadConsumptionVisualizer.spec.tsx.snap | 372 +-----------------
src/components/FluidChart/FluidChart.tsx | 2 +-
src/styles/components/_barchart.scss | 52 +--
9 files changed, 202 insertions(+), 532 deletions(-)
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 74cf7f236..1e7bcab26 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -109,7 +109,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
>
<defs>
<linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--0 "
+ className="bar-ELECTRICITY weekend bounce-3 delay--0"
id="gradient"
x1="0"
x2="0"
@@ -127,9 +127,15 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
</linearGradient>
</defs>
<path
- className="bar-ELECTRICITY weekend bounce-3 delay--0 "
- d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
- fill="url(#gradient)"
+ className="bar-ELECTRICITY weekend bounce-3 delay--0"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
onAnimationEnd={[Function]}
onClick={[Function]}
/>
@@ -178,7 +184,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
>
<defs>
<linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--1 "
+ className="bar-ELECTRICITY weekend bounce-3 delay--1"
id="gradient"
x1="0"
x2="0"
@@ -196,9 +202,15 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
</linearGradient>
</defs>
<path
- className="bar-ELECTRICITY weekend bounce-3 delay--1 "
- d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
- fill="url(#gradient)"
+ className="bar-ELECTRICITY weekend bounce-3 delay--1"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
onAnimationEnd={[Function]}
onClick={[Function]}
/>
@@ -247,7 +259,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
>
<defs>
<linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--2 "
+ className="bar-ELECTRICITY weekend bounce-3 delay--2"
id="gradient"
x1="0"
x2="0"
@@ -265,9 +277,15 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
</linearGradient>
</defs>
<path
- className="bar-ELECTRICITY weekend bounce-3 delay--2 "
- d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
- fill="url(#gradient)"
+ className="bar-ELECTRICITY weekend bounce-3 delay--2"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
onAnimationEnd={[Function]}
onClick={[Function]}
/>
@@ -316,7 +334,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
>
<defs>
<linearGradient
- className="bar-ELECTRICITY weekend bounce-3 delay--3 "
+ className="bar-ELECTRICITY weekend bounce-3 delay--3"
id="gradient"
x1="0"
x2="0"
@@ -334,9 +352,15 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
</linearGradient>
</defs>
<path
- className="bar-ELECTRICITY weekend bounce-3 delay--3 "
- d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
- fill="url(#gradient)"
+ className="bar-ELECTRICITY weekend bounce-3 delay--3"
+ d="
+ M0,4
+ a4,4 0 0 1 4,-4
+ h-5
+ a4,4 0 0 1 4,4
+ v136
+ h-3
+ z"
onAnimationEnd={[Function]}
onClick={[Function]}
/>
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 8cadcc67f..165529e7e 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -1,6 +1,6 @@
import { ScaleBand, ScaleLinear } from 'd3-scale'
import { detect } from 'detect-browser'
-import { FluidType, TimeStep } from 'enums'
+import { DataloadState, FluidType, TimeStep } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useEffect, useState } from 'react'
@@ -26,6 +26,7 @@ interface BarProps {
isMultiMissingFluid?: boolean
weekdays?: 'week' | 'weekend'
clickable?: boolean
+ average?: number
}
const Bar = ({
@@ -43,6 +44,7 @@ const Bar = ({
isMultiMissingFluid,
weekdays,
clickable = true,
+ average,
}: BarProps) => {
const dispatch = useAppDispatch()
const { selectedDate } = useAppSelector(state => state.ecolyo.chart)
@@ -71,16 +73,19 @@ const Bar = ({
setCompareAnimationEnded(true)
}
- const tempYScale: number | undefined = yScale(dataload.value)
- const yScaleValue: number = tempYScale ? tempYScale : 0
- const tempCompareYScale: number | undefined = yScale(
- compareDataload ? compareDataload.value : 0
- )
- const yScaleCompareValue: number = tempCompareYScale ? tempCompareYScale : 0
- const tempXScale: number | undefined = xScale(
- dataload.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
- const xScaleValue: number = tempXScale ? tempXScale : 0
+ let value = dataload.value
+ /**
+ * Use 10% of average as the placeholder if average is above 1,
+ * otherwise use a minimum of 1 as the placeholder.
+ */
+ if (value === -1 && average) {
+ value = average > 1 ? average * 0.1 : 1
+ }
+ const yScaleValue = yScale(value) ?? 0
+ const yScaleCompareValue = yScale(compareDataload?.value ?? 0) ?? 0
+
+ const xScaleValue =
+ xScale(dataload.date.toLocaleString(DateTime.DATETIME_SHORT)) ?? 0
const isSelectedDate = isDuel
? false
@@ -90,47 +95,32 @@ const Bar = ({
dataload.date
)
- const delayIndex = index % 13
- const edgeBrowser = browser && browser.name !== 'edge'
- const selected = isSelectedDate ? ' selected' : ''
- const bounce = edgeBrowser ? '1' : '3'
- const disabled = `${clickable ? '' : 'disabled'}`
+ const clickedAnim = clicked ? 'bounce-2 delay' : ''
+ const disabled = clickable ? '' : 'disabled'
+ const selected = isSelectedDate ? 'selected' : ''
const getBarClass = () => {
- const bounceDelay = ` bounce-${bounce} delay--${delayIndex}`
- const fluidWeekdays = `bar-${fluidStyle} ${weekdays}`
+ const upcoming = dataload.value === -1 ? 'bar-UNCOMING' : ''
+ const edgeBrowser = browser && browser.name !== 'edge'
+ const bounce = edgeBrowser ? '1' : '3'
+ const baseStyles = `bar-${fluidStyle} ${upcoming} ${weekdays} ${selected} ${disabled}`
if (clicked) {
- return `${fluidWeekdays}${selected} bounce-2 delay`
- } else if (animationEnded) {
- return `${fluidWeekdays}${selected} ${disabled}`
+ return `${baseStyles} ${clickedAnim}`
}
- return `${fluidWeekdays}${bounceDelay}${selected} ${disabled}`
+ if (animationEnded) {
+ return baseStyles
+ }
+ return `${baseStyles} bounce-${bounce} delay--${index}`
}
const getCompareBarClass = () => {
- const bounceValue = clicked ? (edgeBrowser ? '2' : '3') : bounce
- const bounceDelay = ` bounce-${bounceValue} delay--${
- clicked ? 0 : delayIndex
- }`
- const fluidStyleClass = `bar-compare-${fluidStyle}`
+ const animate = `bounce-2 delay--${clicked ? 0 : index}`
+ const animationClass = compareAnimationEnded ? '' : animate
- if (clicked) {
- return `${fluidStyleClass} ${selected}${bounceDelay}`
- }
- if (isSelectedDate) {
- return compareAnimationEnded
- ? `${fluidStyleClass} ${selected}`
- : `${fluidStyleClass} ${selected}${bounceDelay}`
- }
- return compareAnimationEnded
- ? fluidStyleClass
- : `${fluidStyleClass} ${bounceDelay}`
+ return `bar-compare-${fluidStyle} ${selected} ${animationClass} ${clickedAnim}`
}
- const compareBarClass = getCompareBarClass()
- const barClass = getBarClass()
-
const barBackgroundClass = isSelectedDate
const getBandWidth = (): number => {
@@ -138,41 +128,21 @@ const Bar = ({
}
const topRoundedRect = (
- _x: number,
- _y: number,
- _width: number,
- _height: number
+ x: number,
+ y: number,
+ width: number,
+ height: number
): string => {
- const radius = _height > 4 ? 4 : _height / 4
- return (
- 'M' +
- _x +
- ',' +
- (_y + radius) +
- ' a' +
- radius +
- ',' +
- radius +
- ' 0 0 1 ' +
- radius +
- ',' +
- -radius +
- 'h' +
- (_width - 2 * radius) +
- 'a' +
- radius +
- ',' +
- radius +
- ' 0 0 1 ' +
- radius +
- ',' +
- radius +
- 'v' +
- (_height - radius) +
- 'h' +
- -_width +
- 'z'
- )
+ const radius = height > 4 ? 4 : height / 4
+
+ return `
+ M${x},${y + radius}
+ a${radius},${radius} 0 0 1 ${radius},${-radius}
+ h${width - 2 * radius}
+ a${radius},${radius} 0 0 1 ${radius},${radius}
+ v${height - radius}
+ h${-width}
+ z`
}
useEffect(() => {
@@ -184,6 +154,7 @@ const Bar = ({
return (
<g>
+ {/* selected background bar */}
{height > 0 && (
<g
transform={`translate(${xScaleValue}, -40)`}
@@ -200,6 +171,33 @@ const Bar = ({
/>
</g>
)}
+ {/* placeholder bar for upcoming values */}
+ {height > 0 &&
+ dataload.state === DataloadState.COMING &&
+ dataload.date < DateTime.local() && (
+ <g
+ transform={`translate(${xScaleValue}, ${yScaleValue})`}
+ className="barFill"
+ >
+ <defs>
+ <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+ <stop id="stop-color-1" offset="0%" />
+ <stop id="stop-color-2" offset="100%" />
+ </linearGradient>
+ </defs>
+ <path
+ d={topRoundedRect(
+ compare ? getBandWidth() : 0,
+ 0,
+ weekdays ? 3 : getBandWidth(),
+ height - yScaleValue
+ )}
+ className={getBarClass()}
+ onClick={!weekdays ? handleClick : () => undefined}
+ onAnimationEnd={onAnimationEnd}
+ />
+ </g>
+ )}
{height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
<g
transform={`translate(${xScaleValue}, ${yScaleValue})`}
@@ -209,7 +207,7 @@ const Bar = ({
<defs>
<linearGradient
id="gradient"
- className={barClass}
+ className={getBarClass()}
x1="0"
x2="0"
y1="0"
@@ -252,7 +250,6 @@ const Bar = ({
? 'url(#diagonalHatchSelected)'
: 'url(#diagonalHatch)'
}
- // className={isDuel ? 'bar-duel' : barClass}
onClick={!weekdays ? handleClick : () => undefined}
onAnimationEnd={onAnimationEnd}
/>
@@ -265,7 +262,7 @@ const Bar = ({
<defs>
<linearGradient
id="gradient"
- className={barClass}
+ className={getBarClass()}
x1="0"
x2="0"
y1="0"
@@ -282,8 +279,7 @@ const Bar = ({
weekdays ? 3 : getBandWidth(),
height - yScaleValue
)}
- fill="url(#gradient)"
- className={isDuel ? 'bar-duel' : barClass}
+ className={isDuel ? 'bar-duel' : getBarClass()}
onClick={!weekdays ? handleClick : () => undefined}
onAnimationEnd={onAnimationEnd}
/>
@@ -296,7 +292,7 @@ const Bar = ({
<defs>
<linearGradient
id="gradient-compare"
- className={compareBarClass}
+ className={getCompareBarClass()}
x1="0"
x2="0"
y1="0"
@@ -313,8 +309,7 @@ const Bar = ({
getBandWidth(),
height - yScaleCompareValue
)}
- fill="url(#gradient-compare)"
- className={compareBarClass}
+ className={getCompareBarClass()}
onClick={handleClick}
onAnimationEnd={onCompareAnimationEnd}
/>
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index bccbd1c6f..cd2cf472c 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -11,6 +11,7 @@ interface BarChartProps {
chartData: Datachart
fluidType: FluidType
timeStep: TimeStep
+ /** showCompare should be false for analysis view */
showCompare: boolean
width?: number
height?: number
@@ -76,6 +77,9 @@ const BarChart = ({
.domain([0, getMaxLoad()])
.range([getContentHeight(), 0])
+ const sum = chartData.actualData.reduce((a, b) => a + b.value, 0)
+ const averageConsumption = sum / chartData.actualData.length
+
return (
<svg width={width} height={height}>
<AxisRight
@@ -112,6 +116,7 @@ const BarChart = ({
: false
}
clickable={clickable}
+ average={averageConsumption}
/>
))}
</g>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index 35226df5e..7dda1e01b 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,6 +1,7 @@
import { DataloadState, FluidType } from 'enums'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
+import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -11,14 +12,21 @@ import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'
-const mockGetAllLastPrices = jest.fn()
jest.mock('services/fluidsPrices.service', () => {
return jest.fn(() => ({
- getAllLastPrices: mockGetAllLastPrices,
+ getAllLastPrices: jest.fn(),
}))
})
-const mockChartStateLoaded = { ...mockChartState, loading: false }
+jest.mock(
+ 'components/ConsumptionVisualizer/DataloadNoValue.tsx',
+ () => 'mock-DataloadNoValue'
+)
+jest.mock(
+ 'components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx',
+ () => 'mock-EstimatedConsumptionModal'
+)
+
const emptyDataLoad = { ...baseDataLoad, value: -1 }
const dataLoadWithValueDetailEmpty: Dataload = {
...baseDataLoad,
@@ -34,10 +42,55 @@ const dataLoadWithValueDetail: Dataload = {
}
describe('Dataload consumption visualizer component', () => {
- it('should render with single fluid', async () => {
- const store = createMockEcolyoStore({
- chart: mockChartStateLoaded,
+ const store = createMockEcolyoStore()
+ describe('should render nothing', () => {
+ it('should render nothing if dataload is null', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={null as unknown as Dataload}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
+ 0
+ )
+ })
+ it('should render nothing if dataload is in the future', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={{ ...baseDataLoad, date: DateTime.local(9999, 1, 1) }}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('.dataloadvisualizer-root').children()).toHaveLength(
+ 0
+ )
})
+ })
+
+ it('should render DataloadNoValue if dataload.state is not valid', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={{ ...baseDataLoad, state: DataloadState.MISSING }}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('mock-DataloadNoValue').exists()).toBeTruthy()
+ })
+
+ it('should render with single fluid', async () => {
const wrapper = mount(
<Provider store={store}>
<DataloadConsumptionVisualizer
@@ -70,7 +123,7 @@ describe('Dataload consumption visualizer component', () => {
it('should render with no value to compare available', async () => {
const store = createMockEcolyoStore({
- chart: { ...mockChartStateLoaded, showCompare: true },
+ chart: { ...mockChartState, showCompare: true },
})
const wrapper = mount(
<Provider store={store}>
@@ -86,7 +139,7 @@ describe('Dataload consumption visualizer component', () => {
})
it('should render with water comparison data', async () => {
const store = createMockEcolyoStore({
- chart: { ...mockChartStateLoaded, showCompare: true },
+ chart: { ...mockChartState, showCompare: true },
})
const wrapper = mount(
<Provider store={store}>
@@ -101,10 +154,6 @@ describe('Dataload consumption visualizer component', () => {
expect(wrapper.find('.water-compare').exists()).toBeTruthy()
})
it('should render multifluid with no compare and display estimation modal', async () => {
- const store = createMockEcolyoStore({
- chart: mockChartStateLoaded,
- })
-
const wrapper = mount(
<Provider store={store}>
<DataloadConsumptionVisualizer
@@ -115,16 +164,12 @@ describe('Dataload consumption visualizer component', () => {
/>
</Provider>
)
- expect(wrapper.find('.estimated').first().simulate('click'))
+ expect(wrapper.find('mock-EstimatedConsumptionModal').exists()).toBeTruthy()
})
it('should render multifluid with no compare and navigate to singleFluid page', async () => {
- const store = createMockEcolyoStore({
- chart: mockChartStateLoaded,
- })
- const mockLoadToEuro = jest.fn()
jest.mock('services/converter.service', () => {
return jest.fn(() => ({
- LoadToEuro: mockLoadToEuro,
+ LoadToEuro: jest.fn(),
}))
})
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 837ad0519..b7bc960a3 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -1,4 +1,5 @@
import { DataloadSectionType, DataloadState, FluidType } from 'enums'
+import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useCallback, useState } from 'react'
import { useAppSelector } from 'store/hooks'
@@ -25,7 +26,7 @@ const DataloadConsumptionVisualizer = ({
setOpenEstimationModal(prev => !prev)
}, [])
- if (!dataload) {
+ if (!dataload || dataload.date > DateTime.local()) {
return <div className="dataloadvisualizer-root" />
}
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index 025ae8b40..bc6586575 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -56,7 +56,7 @@ const InfoDataConsumptionVisualizer = ({
const lastDate = lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
return (
<div onClick={() => moveToDate()} className="error-line">
- <span className={`text-16-normal underlined-error`}>
+ <span className="text-16-bold underlined-error">
{fluidType === FluidType.MULTIFLUID
? t('consumption_visualizer.last_valid_data_multi', {
date: lastDate,
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index 3161ddaa1..b4d99a41b 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -100,378 +100,10 @@ exports[`Dataload consumption visualizer component should render with single flu
</div>
</DataloadSection>
</div>
- <EstimatedConsumptionModal
+ <mock-EstimatedConsumptionModal
handleCloseClick={[Function]}
open={false}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={false}
- />
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </EstimatedConsumptionModal>
+ />
</div>
</DataloadConsumptionVisualizer>
</Provider>
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 7e19631f3..537ee6ee3 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -143,7 +143,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
const LastDataValid = () => (
<div className="lastValidData">
- <span className={`text-16-normal date`} onClick={moveToDate}>
+ <span className="text-16-bold date" onClick={moveToDate}>
{t('consumption_visualizer.last_valid_data', {
date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') || '-',
})}
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 7097e1166..209e00d3b 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -128,11 +128,10 @@
}
}
.bar-UNCOMING {
- fill: $dark;
+ fill: $grey-dark;
opacity: 0.6;
&.selected {
- fill: $multi-color;
- filter: drop-shadow(0 -0.1rem 0.2rem $multi-color);
+ fill: $grey-dark;
}
&.disabled {
&:hover {
@@ -244,46 +243,15 @@
}
}
-/** Animatio ndelay **/
+/** Animation delay **/
.delay {
animation-duration: 0.4s;
}
-.delay--0 {
- animation-duration: 0.6s;
-}
-.delay--1 {
- animation-duration: 0.7s;
-}
-.delay--2 {
- animation-duration: 0.8s;
-}
-.delay--3 {
- animation-duration: 0.9s;
-}
-.delay--4 {
- animation-duration: 1s;
-}
-.delay--5 {
- animation-duration: 1.1s;
-}
-.delay--6 {
- animation-duration: 1.2s;
-}
-.delay--7 {
- animation-duration: 1.3s;
-}
-.delay--8 {
- animation-duration: 1.4s;
-}
-.delay--9 {
- animation-duration: 1.5s;
-}
-.delay--10 {
- animation-duration: 1.6s;
-}
-.delay--11 {
- animation-duration: 1.8s;
-}
-.delay--12 {
- animation-duration: 1.9s;
+
+$animation-duration-base: 0.4s; // Base animation duration
+
+@for $i from 0 through 48 {
+ .delay--#{$i} {
+ animation-duration: $animation-duration-base + $i * 0.08s;
+ }
}
--
GitLab