diff --git a/src/components/Home/HomeDetails.spec.tsx b/src/components/Home/ConsumptionDetails.spec.tsx
similarity index 88%
rename from src/components/Home/HomeDetails.spec.tsx
rename to src/components/Home/ConsumptionDetails.spec.tsx
index 6fb1f59b43957e67f172322d3551677245d76527..01b67448ebd5f6c648b246881716b8d21a92e2d2 100644
--- a/src/components/Home/HomeDetails.spec.tsx
+++ b/src/components/Home/ConsumptionDetails.spec.tsx
@@ -1,13 +1,10 @@
import React from 'react'
import { mount, shallow } from 'enzyme'
-import HomeDetails from './HomeDetails'
+import ConsumptionDetails from './ConsumptionDetails'
import * as reactRedux from 'react-redux'
import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
import { TimeStep } from 'enum/timeStep.enum'
import { FluidType } from 'enum/fluid.enum'
-import { wrap } from 'lodash'
-import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
-import { act } from 'react-dom/test-utils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -35,7 +32,7 @@ describe('HomeIndicators component', () => {
it('should be rendered correctly', () => {
mockUseSelector.mockReturnValueOnce(globalStateData)
const component = shallow(
- <HomeDetails
+ <ConsumptionDetails
timeStep={TimeStep.DAY}
setIndicatorsLoaded={setIndicatorsLoaded}
/>
@@ -49,7 +46,7 @@ describe('HomeIndicators component', () => {
}
mockUseSelector.mockReturnValue(updatedState)
const wrapper = mount(
- <HomeDetails
+ <ConsumptionDetails
timeStep={TimeStep.DAY}
setIndicatorsLoaded={setIndicatorsLoaded}
/>
@@ -63,7 +60,7 @@ describe('HomeIndicators component', () => {
}
mockUseSelector.mockReturnValue(updatedState)
const wrapper = mount(
- <HomeDetails
+ <ConsumptionDetails
timeStep={TimeStep.DAY}
setIndicatorsLoaded={setIndicatorsLoaded}
/>
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..295877c3a520915656065ef5e10b6b0c833bf8a4
--- /dev/null
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import { TimePeriod } from 'models'
+import ConfigService from 'services/fluidConfig.service'
+import { convertDateToShortDateString } from 'utils/date'
+import FluidCard from 'components/HomeCards/FluidCard'
+import './consumptionDetails.scss'
+import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
+import TotalConsumption from 'components/HomeCards/TotalConsumption'
+import DateChartService from 'services/dateChart.service'
+import { FluidType } from 'enum/fluid.enum'
+interface ConsumptionDetailsProps {
+ fluidType?: FluidType
+}
+
+const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
+ fluidType,
+}: ConsumptionDetailsProps) => {
+ const { t } = useI18n()
+ const { fluidStatus, fluidTypes } = useSelector(
+ (state: AppStore) => state.ecolyo.global
+ )
+ const chart = useSelector((state: AppStore) => state.ecolyo.chart)
+ const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
+ null
+ )
+
+ const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const configService = new ConfigService()
+ const fluidConfig = configService.getFluidConfig()
+
+ useEffect(() => {
+ const dateChartService = new DateChartService()
+
+ const definedTimePeriod = dateChartService.defineTimePeriod(
+ chart.selectedDate,
+ chart.currentTimeStep,
+ chart.currentIndex
+ )
+ setCurrentTimePeriod(definedTimePeriod)
+ setIsLoaded(true)
+ }, [chart])
+
+ return (
+ <>
+ {isLoaded ? (
+ <div className="consumption-details-root">
+ <div className="consumption-details-content">
+ <div className="consumption-details-header text-16-normal-uppercase details-title">
+ {convertDateToShortDateString(
+ currentTimePeriod,
+ chart.currentTimeStep,
+ true
+ )}
+ </div>
+ <TotalConsumption actualData={chart.currentDatachart.actualData} />
+ {fluidType ? (
+ <div className="fluid-details">
+ <div className="text-16-normal-uppercase details-title">
+ {t('COMMON.MINI_CARDS_LABEL')}
+ </div>
+ <div className="details-container">
+ <FluidCard fluidType={FluidType.MULTIFLUID} />
+ {fluidConfig.map((fluid, index) => {
+ return fluidType !== fluid.fluidTypeId &&
+ fluidTypes.includes(fluid.fluidTypeId) ? (
+ <FluidCard key={index} fluidType={fluid.fluidTypeId} />
+ ) : null
+ })}
+ </div>
+ </div>
+ ) : (
+ <div className="fluid-details">
+ <span className="text-16-normal-uppercase details-title">
+ {t('INDICATOR.DETAIL')}
+ </span>
+ <div className="details-container">
+ {fluidConfig.map((fluid, index) => {
+ return fluidTypes.includes(fluid.fluidTypeId) ? (
+ <FluidCard key={index} fluidType={fluid.fluidTypeId} />
+ ) : null
+ })}
+ </div>
+ {fluidTypes.length !== 3 && (
+ <span className="text-16-normal-uppercase details-title">
+ {t('INDICATOR.CONNECT')}
+ </span>
+ )}
+ <div className="details-container">
+ {fluidConfig.map((fluid, index) => {
+ return fluidTypes.includes(fluid.fluidTypeId) ? null : (
+ <AddKonnectorCard
+ key={index}
+ fluidStatus={fluidStatus[index]}
+ fluidType={fluid.fluidTypeId}
+ />
+ )
+ })}
+ </div>
+ </div>
+ )}
+ </div>
+ </div>
+ ) : null}
+ </>
+ )
+}
+
+export default ConsumptionDetails
diff --git a/src/components/Home/HomeDetails.tsx b/src/components/Home/HomeDetails.tsx
deleted file mode 100644
index 021175e38918e17039fcd23a99faeba222903127..0000000000000000000000000000000000000000
--- a/src/components/Home/HomeDetails.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-
-import { FluidType } from 'enum/fluid.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { TimePeriod, PerformanceIndicator } from 'models'
-import TimePeriodService from 'services/timePeriod.service'
-import ConsumptionService from 'services/consumption.service'
-import PerformanceIndicatorService from 'services/performanceIndicator.service'
-import ConfigService from 'services/fluidConfig.service'
-import { convertDateToShortDateString } from 'utils/date'
-import FluidCard from 'components/HomeCards/FluidCard'
-import './homeDetails.scss'
-import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
-import TotalConsumption from 'components/HomeCards/TotalConsumption'
-
-interface HomeDetailsProps {
- timeStep: TimeStep
-}
-
-const HomeDetails: React.FC<HomeDetailsProps> = ({
- timeStep,
-}: HomeDetailsProps) => {
- const { t } = useI18n()
- const client = useClient()
- const { fluidStatus, fluidTypes } = useSelector(
- (state: AppStore) => state.ecolyo.global
- )
- const [performanceIndicators, setPerformanceIndicators] = useState<
- PerformanceIndicator[]
- >([])
- const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
- null
- )
-
- const [isLoaded, setIsLoaded] = useState<boolean>(false)
- const [fluidLackOfData, setFluidLackOfData] = useState<Array<FluidType>>([])
-
- const performanceIndicatorService = new PerformanceIndicatorService()
- const configService = new ConfigService()
- const fluidConfig = configService.getFluidConfig()
-
- useEffect(() => {
- let subscribed = true
- const consumptionService = new ConsumptionService(client)
-
- async function populatePerformanceIndicators() {
- const lastDate = await consumptionService.fetchLastDateData(fluidTypes)
-
- if (subscribed && lastDate) {
- const timePeriodService = new TimePeriodService()
- const periods = timePeriodService.getTimePeriods(
- lastDate,
- fluidTypes,
- timeStep
- )
- const fetchedPerformanceIndicators = await consumptionService.getPerformanceIndicators(
- periods.timePeriod,
- timeStep,
- fluidTypes,
- periods.comparisonTimePeriod
- )
-
- if (fetchedPerformanceIndicators) {
- const fluidLackOfDataIndicators: Array<FluidType> = []
- fetchedPerformanceIndicators.forEach((fluidIndicator, index) => {
- if (fluidIndicator.compareValue === null) {
- fluidLackOfDataIndicators.push(index)
- }
- })
- setFluidLackOfData(fluidLackOfDataIndicators)
- setPerformanceIndicators(fetchedPerformanceIndicators)
- setCurrentTimePeriod(periods.timePeriod)
- }
- }
- setIsLoaded(true)
- }
- populatePerformanceIndicators()
- return () => {
- subscribed = false
- }
- }, [timeStep, fluidTypes, client])
-
- return (
- <>
- {isLoaded ? (
- <div className="home-details-root">
- <div className="home-details-content">
- <div className="home-details-header text-16-normal-uppercase details-title">
- {convertDateToShortDateString(currentTimePeriod, timeStep, true)}
- </div>
- <TotalConsumption
- performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
- performanceIndicators
- )}
- timeStep={timeStep}
- fluidTypes={fluidTypes}
- // currentTimePeriod={currentTimePeriod && currentTimePeriod}
- />
- <div className="fluid-details">
- <span className="text-16-normal-uppercase details-title">
- {t('INDICATOR.DETAIL')}
- </span>
- <div className="home-details-container">
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidCard key={index} fluidType={fluid.fluidTypeId} />
- ) : null
- })}
- </div>
- {fluidTypes.length !== 3 && (
- <span className="text-16-normal-uppercase details-title">
- {t('INDICATOR.CONNECT')}
- </span>
- )}
- <div className="home-details-container">
- {fluidConfig.map((fluid, index) => {
- return fluidTypes.includes(fluid.fluidTypeId) ? null : (
- <AddKonnectorCard
- key={index}
- fluidStatus={fluidStatus[index]}
- fluidType={fluid.fluidTypeId}
- />
- )
- })}
- </div>
- </div>
- </div>
- </div>
- ) : null}
- </>
- )
-}
-
-export default HomeDetails
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
index ceb4ec6e1b601e1236c6ddfd9ab5316a2969f234..0ea8919a41b0951db6b4107baecad2ab331e43aa 100644
--- a/src/components/Home/HomeView.tsx
+++ b/src/components/Home/HomeView.tsx
@@ -10,7 +10,7 @@ import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import FluidChart from 'components/FluidChart/FluidChart'
-import HomeDetails from 'components/Home/HomeDetails'
+import ConsumptionDetails from 'components/Home/ConsumptionDetails'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import OldFluidDataModal from 'components/Home/OldFluidDataModal'
@@ -28,9 +28,7 @@ const HomeView: React.FC = () => {
const profile: Profile = useSelector(
(state: AppStore) => state.ecolyo.profile
)
- const { currentTimeStep, loading } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
+ const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
const [fluidOldData] = useState<FluidType[]>([])
@@ -138,7 +136,7 @@ const HomeView: React.FC = () => {
})}
>
<FluidChart fluidTypes={fluidTypes} multiFluid={true} />
- <HomeDetails timeStep={currentTimeStep} />
+ <ConsumptionDetails />
</div>
</Content>
{fluidStatus.length > 0 && openOldFluidDataModal && (
diff --git a/src/components/Home/homeDetails.scss b/src/components/Home/consumptionDetails.scss
similarity index 86%
rename from src/components/Home/homeDetails.scss
rename to src/components/Home/consumptionDetails.scss
index 941c8442349553b0da4dd0b7dbc3e4f7f1d8cab9..4ac01bfcb628f200e04d82a6690972654667e13b 100644
--- a/src/components/Home/homeDetails.scss
+++ b/src/components/Home/consumptionDetails.scss
@@ -1,7 +1,7 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.home-details-root {
+.consumption-details-root {
display: flex;
flex-direction: column;
align-items: center;
@@ -12,13 +12,13 @@
@media #{$large-phone} {
margin-bottom: 0;
}
- .home-details-content {
+ .consumption-details-content {
min-height: 15rem;
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
}
- .home-details-header {
+ .consumption-details-header {
margin-top: 1rem;
margin-bottom: 1.25rem;
color: $grey-bright;
@@ -34,7 +34,7 @@
}
}
-.home-details-container {
+.details-container {
margin-top: 1rem;
display: flex;
justify-content: space-between;
diff --git a/src/components/HomeCards/TotalConsumption.spec.tsx b/src/components/HomeCards/TotalConsumption.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..18d21709c843f7d06e1b0d3ea8001dfcbdf14221
--- /dev/null
+++ b/src/components/HomeCards/TotalConsumption.spec.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import * as reactRedux from 'react-redux'
+import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
+import { TimeStep } from 'enum/timeStep.enum'
+import { FluidType } from 'enum/fluid.enum'
+import TotalConsumption from './TotalConsumption'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('TotalConsumption component', () => {
+ // it('should be rendered correctly', () => {
+ // const component = shallow(
+ // <TotalConsumption fluidType={FluidType.ELECTRICITY} />
+ // ).getElement()
+ // expect(component).toMatchSnapshot()
+ // })
+})
diff --git a/src/components/HomeCards/TotalConsumption.tsx b/src/components/HomeCards/TotalConsumption.tsx
index ebbb9300c415e30b646623ede2148ce67a20f114..8c8e610972f16b8925c3269a41cb19318d63c18f 100644
--- a/src/components/HomeCards/TotalConsumption.tsx
+++ b/src/components/HomeCards/TotalConsumption.tsx
@@ -1,34 +1,33 @@
import React, { useEffect, useState } from 'react'
-
-import { TimeStep } from 'enum/timeStep.enum'
-import { Datachart, PerformanceIndicator, TimePeriod } from 'models'
-import { formatNumberValues } from 'utils/utils'
-
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import PileIcon from 'assets/icons/ico/coins.svg'
-import { FluidType } from 'enum/fluid.enum'
-
import './totalConsumption.scss'
-
+import { Dataload } from 'models'
interface TotalConsumptionProps {
- performanceIndicator: PerformanceIndicator
- timeStep: TimeStep
- fluidTypes: FluidType[]
+ actualData: Dataload[]
}
const TotalConsumption: React.FC<TotalConsumptionProps> = ({
- performanceIndicator,
+ actualData,
}: TotalConsumptionProps) => {
- let displayedValue: string
- if (performanceIndicator && performanceIndicator.value)
- displayedValue = formatNumberValues(performanceIndicator.value).toString()
- else displayedValue = '-----'
-
+ const [totalValue, setTotalValue] = useState<string>()
+ useEffect(() => {
+ const calculateTotalValue = (): string => {
+ let totalValue = 0
+ actualData.forEach(data => {
+ if (data.value !== -1) totalValue += data.value
+ })
+ const displayedValue =
+ totalValue <= 0 ? '-----' : totalValue.toFixed(2).toString()
+ return displayedValue
+ }
+ setTotalValue(calculateTotalValue())
+ }, [actualData])
return (
<div className="icon-line">
<StyledIcon className="pile-icon" icon={PileIcon} size={35} />
<div>
- <span className="euro-value">{displayedValue}</span>
+ <span className="euro-value">{totalValue}</span>
<span className="euro-symbol"> €</span>
</div>
</div>
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 39a51bd6f70e6775f04307f3c7642d59550848cf..1ec2f5cb11105aa42d8caf434aeb981c4dd07570 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -35,20 +35,18 @@ const Routes = () => {
<Route
path={`${url}/electricité`}
component={() => (
- <SingleFluidView fluidTypes={[FluidType.ELECTRICITY]} />
+ <SingleFluidView fluidType={FluidType.ELECTRICITY} />
)}
/>
<Route
path={`${url}/eau`}
component={() => (
- <SingleFluidView fluidTypes={[FluidType.WATER]} />
+ <SingleFluidView fluidType={FluidType.WATER} />
)}
/>
<Route
path={`${url}/gaz`}
- component={() => (
- <SingleFluidView fluidTypes={[FluidType.GAS]} />
- )}
+ component={() => <SingleFluidView fluidType={FluidType.GAS} />}
/>
<Route path={`${url}/`} component={HomeView} exact />
</>
diff --git a/src/components/SingleFluid/SingleFluidIndicators.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
deleted file mode 100644
index e7f4dc7252f5b4968ea048019a7c2c31c6fc01f2..0000000000000000000000000000000000000000
--- a/src/components/SingleFluid/SingleFluidIndicators.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { TimeStep } from 'enum/timeStep.enum'
-import { FluidType } from 'enum/fluid.enum'
-import { TimePeriod, PerformanceIndicator } from 'models'
-import { convertDateToShortDateString } from 'utils/date'
-import TimePeriodService from 'services/timePeriod.service'
-import ConsumptionService from 'services/consumption.service'
-import PerformanceIndicatorService from 'services/performanceIndicator.service'
-import TotalConsumption from 'components/HomeCards/TotalConsumption'
-import FluidCard from 'components/HomeCards/FluidCard'
-import ConfigService from 'services/fluidConfig.service'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import './singleFluidIndicators.scss'
-interface SingleFluidIndicatorsProps {
- timeStep: TimeStep
- fluidTypes: FluidType[]
-}
-
-const SingleFluidIndicators: React.FC<SingleFluidIndicatorsProps> = ({
- timeStep,
- fluidTypes,
-}: SingleFluidIndicatorsProps) => {
- const { t } = useI18n()
- const client = useClient()
- const configService = new ConfigService()
- const fluidConfig = configService.getFluidConfig()
- const { fluidTypes: currentFluidTypes } = useSelector(
- (state: AppStore) => state.ecolyo.global
- )
- const [performanceIndicators, setPerformanceIndicators] = useState<
- PerformanceIndicator[]
- >([])
- const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
- null
- )
- const [, setComparisonTimePeriod] = useState<TimePeriod | null>(null)
- const [isLoaded, setIsLoaded] = useState<boolean>(false)
-
- const performanceIndicatorService = new PerformanceIndicatorService()
-
- useEffect(() => {
- async function populatePerformanceIndicators() {
- const consumptionService = new ConsumptionService(client)
- const lastDate = await consumptionService.fetchLastDateData(fluidTypes)
-
- if (lastDate) {
- const timePeriodService = new TimePeriodService()
- const periods = timePeriodService.getTimePeriods(
- lastDate,
- fluidTypes,
- timeStep
- )
- const fetchedPerformanceIndicators = await consumptionService.getPerformanceIndicators(
- periods.timePeriod,
- timeStep,
- fluidTypes,
- periods.comparisonTimePeriod
- )
-
- if (fetchedPerformanceIndicators) {
- setPerformanceIndicators(fetchedPerformanceIndicators)
- setCurrentTimePeriod(periods.timePeriod)
- setComparisonTimePeriod(periods.comparisonTimePeriod)
- setIsLoaded(true)
- }
- }
- }
- populatePerformanceIndicators()
- }, [timeStep, client, fluidTypes])
-
- return (
- <>
- {isLoaded ? (
- <div className="sfi-root">
- <div className="sfi-content">
- <div className="sfi-header text-16-normal-uppercase details-title">
- {t('COMMON.CONSO_CARDS_LABEL')}{' '}
- {convertDateToShortDateString(currentTimePeriod, timeStep, true)}
- </div>
- <TotalConsumption
- performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
- performanceIndicators
- )}
- timeStep={timeStep}
- fluidTypes={fluidTypes}
- />
-
- <div className="sfi-header text-16-normal-uppercase details-title">
- {t('COMMON.MINI_CARDS_LABEL')}
- </div>
- <div className="single-fluid-details-container">
- <FluidCard fluidType={FluidType.MULTIFLUID} />
- {fluidConfig.map((fluid, index) => {
- return currentFluidTypes.includes(fluid.fluidTypeId) &&
- !fluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidCard key={index} fluidType={fluid.fluidTypeId} />
- ) : null
- })}
- </div>
- </div>
- </div>
- ) : null}
- </>
- )
-}
-
-export default SingleFluidIndicators
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
index b9eacbed7becff16259686504ee8c3df0b624720..da945034491ce8441ddcb90c6dcf75ba7cdf3f02 100644
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -13,14 +13,14 @@ import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import FluidChart from 'components/FluidChart/FluidChart'
import DateNavigator from 'components/DateNavigator/DateNavigator'
-import SingleFluidIndicators from 'components/SingleFluid/SingleFluidIndicators'
import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
+import ConsumptionDetails from 'components/Home/ConsumptionDetails'
interface SingleFluidViewProps {
- fluidTypes: FluidType[]
+ fluidType: FluidType
}
const SingleFluidView: React.FC<SingleFluidViewProps> = ({
- fluidTypes,
+ fluidType,
}: SingleFluidViewProps) => {
const dispatch = useDispatch()
const { currentTimeStep, loading } = useSelector(
@@ -35,23 +35,23 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
useEffect(() => {
if (
- fluidTypes[0] !== FluidType.ELECTRICITY &&
+ fluidType !== FluidType.ELECTRICITY &&
currentTimeStep == TimeStep.HALF_AN_HOUR
) {
dispatch(setCurrentTimeStep(TimeStep.WEEK))
}
dispatch(setLoading(true))
- }, [dispatch, fluidTypes, currentTimeStep])
+ }, [dispatch, fluidType, currentTimeStep])
return (
<>
<CozyBar
- titleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
+ titleKey={`FLUID.${FluidType[fluidType]}.NAME`}
displayBackArrow={true}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
+ desktopTitleKey={`FLUID.${FluidType[fluidType]}.NAME`}
displayBackArrow={true}
>
<DateNavigator />
@@ -59,7 +59,7 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
<Content height={headerHeight}>
{loading && (
<div className={'singlefluidview-loading'}>
- <StyledSpinner size="5em" fluidTypes={fluidTypes} />
+ <StyledSpinner size="5em" fluidTypes={[fluidType]} />
</div>
)}
<div
@@ -67,11 +67,8 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
['--hidden']: loading,
})}
>
- <FluidChart fluidTypes={fluidTypes} multiFluid={false} />
- <SingleFluidIndicators
- timeStep={currentTimeStep}
- fluidTypes={fluidTypes}
- />
+ <FluidChart fluidTypes={[fluidType]} multiFluid={false} />
+ <ConsumptionDetails fluidType={fluidType} />
</div>
</Content>
</>
diff --git a/src/components/SingleFluid/singleFluidIndicators.scss b/src/components/SingleFluid/singleFluidIndicators.scss
deleted file mode 100644
index b3df8c3b87b6bd896e3e765e35697d8b701c2e82..0000000000000000000000000000000000000000
--- a/src/components/SingleFluid/singleFluidIndicators.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-//SingleFluidIndicator
-
-.sfi-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0rem 1.5rem 0.5rem 1.5rem;
- @media #{$large-phone} {
- margin-bottom: 0;
- }
- .sfi-content {
- min-height: 15rem;
- width: 45.75rem;
- padding: 0 1rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .sfi-header {
- margin-top: 1.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- .single-fluid-details-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- }
-}
diff --git a/src/components/TimeStepSelector/timeStepSelector.scss b/src/components/TimeStepSelector/timeStepSelector.scss
index 92ba245c087cd02a4bc4e960f9012bddfd805ad6..c7fad538bf1d01d63bbc03744fbcdf460f467da3 100644
--- a/src/components/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/TimeStepSelector/timeStepSelector.scss
@@ -50,9 +50,12 @@
.text {
opacity: 0;
position: relative;
+ display: block;
top: 15px;
- left: -5px;
+ left: -20px;
+ text-align: center;
color: white;
+ width: 50px;
}
.bar {
width: 100%;
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 39a166943640b90a66a77754a8035839aae566d9..8a5e8d973cffdb3494b3c95f4568de6b96559665 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -115,9 +115,8 @@ export const convertDateToShortDateString = (
if (!timeperiod) return ''
switch (timeStep) {
case TimeStep.HALF_AN_HOUR:
- return ' du ' + timeperiod.startDate.toFormat('dd/MM')
+ return timeperiod.startDate.setLocale('fr').toFormat('cccc dd LLLL')
case TimeStep.WEEK:
- case TimeStep.DAY:
return (
(!header ? 'semaine' : '') +
' du ' +
@@ -125,10 +124,17 @@ export const convertDateToShortDateString = (
' au ' +
timeperiod.endDate.toFormat('dd/MM')
)
+ case TimeStep.DAY:
+ return timeperiod.startDate.setLocale('fr').toFormat('LLLL yyyy')
case TimeStep.MONTH:
- return ' du ' + timeperiod.startDate.toFormat('MM/y')
+ return ' année ' + timeperiod.startDate.toFormat('y')
case TimeStep.YEAR:
- return ' de ' + timeperiod.startDate.toFormat('y')
+ return (
+ ' de ' +
+ timeperiod.startDate.toFormat('y') +
+ ' à ' +
+ timeperiod.endDate.toFormat('y')
+ )
default:
return ''
}