diff --git a/src/components/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx
index 889b6b46cd00fc4282fff8cbe973e733208c8723..1a695b8821a243e63a4846adc29d325634e81a66 100644
--- a/src/components/Charts/AxisRight.tsx
+++ b/src/components/Charts/AxisRight.tsx
@@ -7,29 +7,25 @@ import { FluidType } from 'enum/fluid.enum'
interface AxisRightProps {
yScale: ScaleLinear<number, number>
- fluidTypes: FluidType[]
+ fluidType: FluidType
width: number
marginRight: number
marginTop: number
- displayMultifluid: boolean
}
const AxisRight = ({
yScale,
- fluidTypes,
+ fluidType,
width,
marginRight,
marginTop,
- displayMultifluid,
}: AxisRightProps) => {
const { t } = useI18n()
const fluidStyle =
- fluidTypes.length > 1 || displayMultifluid
- ? 'MULTIFLUID'
- : FluidType[fluidTypes[0]]
+ fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
const yAxisRef = useRef<SVGGElement>(null)
const newMarginRight =
- fluidTypes.length > 1 || displayMultifluid ? marginRight - 10 : marginRight
+ fluidType === FluidType.MULTIFLUID ? marginRight - 10 : marginRight
const drawYAxis = () => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 647572c5c5c067dbc6644c55c415152e8e886b0b..2ed4c40153c4374920768bfd979c081677e20285 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -17,8 +17,7 @@ interface BarProps {
index: number
dataload: Dataload
compareDataload: Dataload | null
- fluidTypes: FluidType[]
- multiFluid: boolean
+ fluidType: FluidType
showCompare: boolean
xScale: ScaleBand<string>
yScale: ScaleLinear<number, number>
@@ -31,8 +30,7 @@ const Bar = ({
index,
dataload,
compareDataload,
- fluidTypes,
- multiFluid,
+ fluidType,
showCompare,
xScale,
yScale,
@@ -49,13 +47,8 @@ const Bar = ({
const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
const browser = detect()
- const fluidStyle = multiFluid
- ? 'MULTIFLUID'
- : fluidTypes.length === 0
- ? 'MULTIFLUID'
- : fluidTypes.length > 1
- ? 'MULTIFLUID'
- : FluidType[fluidTypes[0]]
+ const fluidStyle =
+ fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
const handleClick = () => {
if (!isSwitching) {
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index 33f397cf42a8c601fd1fa0dca9d4957926284ce2..fe20204b7e35dcf6184d5ed7debaed6028996eae 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -11,8 +11,7 @@ import AxisRight from 'components/Charts/AxisRight'
export interface BarChartProps {
chartData: Datachart
- fluidTypes: FluidType[]
- multiFluid: boolean
+ fluidType: FluidType
showCompare: boolean
width?: number
height?: number
@@ -21,13 +20,11 @@ export interface BarChartProps {
marginTop?: number
marginBottom?: number
isSwitching: boolean
- isHome: boolean
}
const BarChart: React.FC<BarChartProps> = ({
chartData,
- fluidTypes,
- multiFluid,
+ fluidType,
showCompare,
width = 600,
height = 400,
@@ -36,7 +33,6 @@ const BarChart: React.FC<BarChartProps> = ({
marginTop = 20,
marginBottom = 50,
isSwitching,
- isHome,
}: BarChartProps) => {
const getContentWidth = () => {
return width - marginLeft - marginRight
@@ -73,12 +69,11 @@ const BarChart: React.FC<BarChartProps> = ({
return (
<svg width={width} height={height}>
<AxisRight
- fluidTypes={fluidTypes}
+ fluidType={fluidType}
yScale={yScale}
width={width}
marginRight={marginRight}
marginTop={marginTop}
- displayMultifluid={isHome}
/>
<g transform={`translate(${marginLeft},${marginTop})`}>
@@ -92,8 +87,7 @@ const BarChart: React.FC<BarChartProps> = ({
? chartData.comparisonData[index]
: null
}
- fluidTypes={fluidTypes}
- multiFluid={multiFluid}
+ fluidType={fluidType}
showCompare={showCompare}
xScale={xScale}
yScale={yScale}
diff --git a/src/components/CommonKit/Spinner/StyledSpinner.tsx b/src/components/CommonKit/Spinner/StyledSpinner.tsx
index 390ecdcb17d097f51573064091aafa56052ef4a0..b6d7784c5338bb52a97a4b2127b8e1df2d341fca 100644
--- a/src/components/CommonKit/Spinner/StyledSpinner.tsx
+++ b/src/components/CommonKit/Spinner/StyledSpinner.tsx
@@ -30,30 +30,25 @@ const SpinnerGas = withStyles({
})(MuiCircularProgress)
interface StyledSpinnerProps extends CircularProgressProps {
- fluidTypes?: FluidType[]
- isHome?: boolean
+ fluidType: FluidType
}
const StyledSpinner: React.ComponentType<StyledSpinnerProps> = ({
- fluidTypes,
- isHome,
+ fluidType,
...props
}: StyledSpinnerProps) => {
- if (!fluidTypes || isHome) {
- return <SpinnerBase {...props} />
- } else if (fluidTypes.length === 1) {
- switch (fluidTypes[0]) {
- case FluidType.ELECTRICITY:
- return <SpinnerElec {...props} />
- case FluidType.WATER:
- return <SpinnerWater {...props} />
- case FluidType.GAS:
- return <SpinnerGas {...props} />
- default:
- return <SpinnerBase {...props} />
- }
+ switch (fluidType) {
+ case FluidType.ELECTRICITY:
+ return <SpinnerElec {...props} />
+ case FluidType.WATER:
+ return <SpinnerWater {...props} />
+ case FluidType.GAS:
+ return <SpinnerGas {...props} />
+ case FluidType.MULTIFLUID:
+ return <SpinnerBase {...props} />
+ default:
+ return <SpinnerBase {...props} />
}
- return <SpinnerBase {...props} />
}
export default StyledSpinner
diff --git a/src/components/CommonKit/Switch/StyledSwitch.tsx b/src/components/CommonKit/Switch/StyledSwitch.tsx
index 1c420c65dd8fa28c9f66e730050cf520537881a3..3300014a365bbd20c5f7e5d044cf479ff96c2218 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.tsx
@@ -58,26 +58,23 @@ const SwitchGas = withStyles({
})(SwitchBase)
interface StyledSwitchProps extends SwitchProps {
- fluidTypes: FluidType[]
+ fluidType: FluidType
}
const StyledSwitch: React.ComponentType<StyledSwitchProps> = ({
- fluidTypes,
+ fluidType,
...props
}: StyledSwitchProps) => {
- if (fluidTypes.length === 1) {
- switch (fluidTypes[0]) {
- case FluidType.ELECTRICITY:
- return <SwitchElec {...props} />
- case FluidType.WATER:
- return <SwitchWater {...props} />
- case FluidType.GAS:
- return <SwitchGas {...props} />
- default:
- return <SwitchBase {...props} />
- }
+ switch (fluidType) {
+ case FluidType.ELECTRICITY:
+ return <SwitchElec {...props} />
+ case FluidType.WATER:
+ return <SwitchWater {...props} />
+ case FluidType.GAS:
+ return <SwitchGas {...props} />
+ default:
+ return <SwitchBase {...props} />
}
- return <SwitchBase {...props} />
}
export default StyledSwitch
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index 03fdfe85981ee62691c400f02d478d8098c6436a..e96b3c1aac9a27171ef97279d70148773041f8eb 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -13,16 +13,16 @@ import LastDataConsumptionVisualizer from 'components/ConsumptionVisualizer/Last
import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'
interface ConsumptionVisualizerProps {
- fluidTypes: FluidType[]
+ fluidType: FluidType
showCompare: boolean
- multiFluid: boolean
}
const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
- fluidTypes,
+ fluidType,
showCompare,
- multiFluid,
}: ConsumptionVisualizerProps) => {
- const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+ const { fluidStatus, fluidTypes } = useSelector(
+ (state: AppStore) => state.ecolyo.global
+ )
const { currentDatachart, currentDatachartIndex } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
@@ -35,16 +35,20 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
const getLastDataDate = (): DateTime | null => {
let lastDay: DateTime | null = null
const lastDays: DateTime[] = []
- for (const fluidType of fluidTypes) {
- const date: DateTime | null = fluidStatus[fluidType].lastDataDate
- if (date) {
- lastDays.push(date)
+ if (fluidType === FluidType.MULTIFLUID) {
+ for (const _fluidType of fluidTypes) {
+ const date: DateTime | null = fluidStatus[_fluidType].lastDataDate
+ if (date) {
+ lastDays.push(date)
+ }
}
- }
- if (lastDays.length > 1) {
- lastDay = lastDays.reduce(function(a, b) {
- return a < b ? a : b
- })
+ if (lastDays.length > 1) {
+ lastDay = lastDays.reduce(function(a, b) {
+ return a < b ? a : b
+ })
+ }
+ } else {
+ lastDay = fluidStatus[fluidType].lastDataDate
}
return lastDay
}
@@ -53,23 +57,22 @@ const ConsumptionVisualizer: React.FC<ConsumptionVisualizerProps> = ({
return (
<div className="consumptionvisualizer-root">
<DataloadConsumptionVisualizer
- fluidTypes={fluidTypes}
+ fluidType={fluidType}
dataload={dataload}
compareDataload={compareDataload}
showCompare={showCompare}
- multiFluid={multiFluid}
lastDataDate={lastDataDate}
/>
<div className="consumptionvisualizer-info">
{dataload &&
dataload.valueDetail &&
((dataload.valueDetail[0] === -1 &&
- !dateChartService.isDataToCome(dataload, fluidTypes[0])) ||
+ !dateChartService.isDataToCome(dataload, FluidType.ELECTRICITY)) ||
(dataload.valueDetail[1] === -1 &&
- !dateChartService.isDataToCome(dataload, fluidTypes[1])) ||
+ !dateChartService.isDataToCome(dataload, FluidType.WATER)) ||
(dataload.valueDetail[2] === -1 &&
- !dateChartService.isDataToCome(dataload, fluidTypes[2]))) && (
- <ErrorDataConsumptionVisualizer fluidTypes={fluidTypes} />
+ !dateChartService.isDataToCome(dataload, FluidType.GAS))) && (
+ <ErrorDataConsumptionVisualizer fluidType={fluidType} />
)}
{!dataload ||
(dataload &&
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index a2e7781d469c48365c1616b548f42910fbc69e92..fb73ffa3c378e5a5b5ab8a985d90e19a991d9d83 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -16,29 +16,25 @@ import { getPicto } from 'utils/picto'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface DataloadConsumptionVisualizerProps {
- fluidTypes: FluidType[]
+ fluidType: FluidType
dataload: Dataload
compareDataload: Dataload | null
showCompare: boolean
- multiFluid: boolean
lastDataDate: DateTime | null
}
const DataloadConsumptionVisualizer = ({
- fluidTypes,
+ fluidType,
dataload,
compareDataload,
showCompare,
- multiFluid,
lastDataDate,
}: DataloadConsumptionVisualizerProps) => {
const { t } = useI18n()
const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
const converterService = new ConverterService()
- const fluidStyle = multiFluid
- ? 'MULTIFLUID'
- : fluidTypes.length > 1
- ? 'MULTIFLUID'
- : FluidType[fluidTypes[0]]
+ const fluidStyle =
+ fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
+ const multiFluid = fluidType === FluidType.MULTIFLUID
const dateChartService = new DateChartService()
return (
@@ -64,7 +60,7 @@ const DataloadConsumptionVisualizer = ({
{`${formatNumberValues(
converterService.LoadToEuro(
compareDataload.value,
- fluidTypes[0]
+ fluidType
)
)} €`}
</div>
@@ -102,7 +98,7 @@ const DataloadConsumptionVisualizer = ({
className={`dataloadvisualizer-euro ${fluidStyle.toLowerCase()} chart-fluid`}
>
{`${formatNumberValues(
- converterService.LoadToEuro(dataload.value, fluidTypes[0])
+ converterService.LoadToEuro(dataload.value, fluidType)
)} €`}
</div>
) : (
@@ -147,25 +143,22 @@ const DataloadConsumptionVisualizer = ({
) : (
<NavLink
to={`/consumption/${t(
- 'FLUID.' + FluidType[fluidTypes[0]] + '.NAME'
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
).toLowerCase()}`}
className="dataloadvisualizer-euro-link"
>
<div
className={`dataloadvisualizer-euro-fluid ${FluidType[
- fluidTypes[0]
+ fluidType
].toLowerCase()}`}
>
<StyledIcon
className="dataloadvisualizer-euro-fluid-icon"
- icon={getPicto(fluidTypes[0])}
+ icon={getPicto(fluidType)}
size={22}
/>
<div>{`${formatNumberValues(
- converterService.LoadToEuro(
- dataload.value,
- fluidTypes[0]
- )
+ converterService.LoadToEuro(dataload.value, fluidType)
)} €`}</div>
</div>
</NavLink>
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
index a8494572cfa12c008109e49973698353335fd6f8..e58a5e059d84f9ab1cb03c6a838da15348d89739 100644
--- a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
@@ -11,30 +11,38 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { FluidType } from 'enum/fluid.enum'
interface ErrorDataConsumptionVisualizerProps {
- fluidTypes: FluidType[]
+ fluidType: FluidType
}
const ErrorDataConsumptionVisualizer: React.FC<ErrorDataConsumptionVisualizerProps> = ({
- fluidTypes,
+ fluidType,
}: ErrorDataConsumptionVisualizerProps) => {
const { t } = useI18n()
const dispatch = useDispatch()
const { currentTimeStep } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
- const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
+ const { fluidStatus, fluidTypes } = useSelector(
+ (state: AppStore) => state.ecolyo.global
+ )
const getLastDateWithAllData = (): DateTime | null => {
let lastDay: DateTime | null = null
const lastDays: DateTime[] = []
- for (const fluidType of fluidTypes) {
- const date: DateTime | null = fluidStatus[fluidType].lastDataDate
- if (date) {
- lastDays.push(date)
+ if (fluidType === FluidType.MULTIFLUID) {
+ for (const _fluidType of fluidTypes) {
+ const date: DateTime | null = fluidStatus[_fluidType].lastDataDate
+ if (date) {
+ lastDays.push(date)
+ }
+ }
+ if (lastDays.length > 1) {
+ lastDay = lastDays.reduce(function(a, b) {
+ return a < b ? a : b
+ })
}
+ } else {
+ lastDay = fluidStatus[fluidType].lastDataDate
}
- lastDay = lastDays.reduce(function(a, b) {
- return a < b ? a : b
- })
return lastDay
}
const lastDateWithAllData: DateTime | null = getLastDateWithAllData()
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 5c6387562ebafb99cf600f97e79ee0efd538aed1..dc6c945d635a7aefe84243ec5afb1db2ccdebf92 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -18,13 +18,11 @@ import FluidChartSwipe from './FluidChartSwipe'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
interface FluidChartProps {
- fluidTypes: FluidType[]
- multiFluid: boolean
+ fluidType: FluidType
}
const FluidChart: React.FC<FluidChartProps> = ({
- fluidTypes,
- multiFluid,
+ fluidType,
}: FluidChartProps) => {
const { t } = useI18n()
const client = useClient()
@@ -75,22 +73,21 @@ const FluidChart: React.FC<FluidChartProps> = ({
) : (
<div className="fluidchart-content">
<ConsumptionVisualizer
- fluidTypes={fluidTypes}
+ fluidType={fluidType}
showCompare={showCompare}
- multiFluid={multiFluid}
/>
<FluidChartSwipe
- fluidTypes={fluidTypes}
- multiFluid={multiFluid}
+ fluidType={fluidType}
showCompare={showCompare}
/>
</div>
)}
- <TimeStepSelector fluidType={FluidType.MULTIFLUID} />
- {!multiFluid && currentTimeStep !== TimeStep.YEAR ? (
+ <TimeStepSelector fluidType={fluidType} />
+ {fluidType !== FluidType.MULTIFLUID &&
+ currentTimeStep !== TimeStep.YEAR ? (
<div className="fluidchart-footer" onClick={handleChangeSwitch}>
<div className="fluidchart-footer-compare text-15-normal">
- <Switch fluidTypes={fluidTypes} checked={showCompare} />
+ <Switch fluidType={fluidType} checked={showCompare} />
<span
className={
showCompare
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index e355c415c81dbfb1c6bfa374a05605c100a08bc1..dbf8639c5eb42c22e3b182bf4831fbd0db291977 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -16,8 +16,7 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
interface FluidChartSlideProps {
index: number
- fluidTypes: FluidType[]
- multiFluid: boolean
+ fluidType: FluidType
showCompare: boolean
width: number
height: number
@@ -26,8 +25,7 @@ interface FluidChartSlideProps {
const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
index,
- fluidTypes,
- multiFluid,
+ fluidType,
showCompare,
width,
height,
@@ -38,6 +36,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
const { currentTimeStep, currentIndex } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
+ const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
const [chartData, setChartData] = useState<Datachart>({
actualData: [],
comparisonData: null,
@@ -65,12 +64,14 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
),
])
const consumptionService = new ConsumptionService(client)
+ const fluidTypeArray: FluidType[] =
+ fluidType === FluidType.MULTIFLUID ? fluidTypes : [fluidType]
const graphData = await consumptionService.getGraphData(
timePeriod,
currentTimeStep,
- fluidTypes,
+ fluidTypeArray,
compareTimePeriod,
- multiFluid
+ fluidType === FluidType.MULTIFLUID
)
if (subscribed && graphData && graphData.actualData.length > 0) {
setChartData(graphData)
@@ -86,11 +87,11 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
}, [
currentIndex,
currentTimeStep,
+ fluidType,
fluidTypes,
client,
dispatch,
index,
- multiFluid,
isLoaded,
])
@@ -109,17 +110,15 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
return (
<div className={'fluidchartslide-root'}>
{!isLoaded ? (
- <StyledSpinner size="5em" fluidTypes={fluidTypes} isHome={multiFluid} />
+ <StyledSpinner size="5em" fluidType={fluidType} />
) : (
<BarChart
chartData={chartData}
- fluidTypes={fluidTypes}
- multiFluid={multiFluid}
+ fluidType={fluidType}
showCompare={showCompare}
height={height}
width={width}
isSwitching={isSwitching}
- isHome={multiFluid}
/>
)}
</div>
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index b44a359351e700db41861609b3f24221c2e3e495..777b8bd51c35d491ba362fa0e609754c5989eaa9 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -14,14 +14,12 @@ import DateChartService from 'services/dateChart.service'
const VirtualizeSwipeableViews = virtualize(SwipeableViews)
interface FluidChartSwipeProps {
- fluidTypes: FluidType[]
- multiFluid: boolean
+ fluidType: FluidType
showCompare: boolean
}
const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
- fluidTypes,
- multiFluid,
+ fluidType,
showCompare,
}: FluidChartSwipeProps) => {
const dispatch = useDispatch()
@@ -109,8 +107,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
<FluidChartSlide
key={key}
index={index}
- fluidTypes={fluidTypes}
- multiFluid={multiFluid}
+ fluidType={fluidType}
showCompare={showCompare}
width={width}
height={height}
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
index 0ea8919a41b0951db6b4107baecad2ab331e43aa..02047552f7bd5d37723e8d7fc5fb625db3bab3ad 100644
--- a/src/components/Home/HomeView.tsx
+++ b/src/components/Home/HomeView.tsx
@@ -127,7 +127,7 @@ const HomeView: React.FC = () => {
<Content height={headerHeight}>
{loading && (
<div className={'homeview-loading'}>
- <StyledSpinner size="5em" />
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
</div>
)}
<div
@@ -135,7 +135,7 @@ const HomeView: React.FC = () => {
['--hidden']: loading,
})}
>
- <FluidChart fluidTypes={fluidTypes} multiFluid={true} />
+ <FluidChart fluidType={FluidType.MULTIFLUID} />
<ConsumptionDetails />
</div>
</Content>
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
index da945034491ce8441ddcb90c6dcf75ba7cdf3f02..c965d85ef519b6985e14c901fa4669d9e22e61f0 100644
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -59,7 +59,7 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
<Content height={headerHeight}>
{loading && (
<div className={'singlefluidview-loading'}>
- <StyledSpinner size="5em" fluidTypes={[fluidType]} />
+ <StyledSpinner size="5em" fluidType={fluidType} />
</div>
)}
<div
@@ -67,7 +67,7 @@ const SingleFluidView: React.FC<SingleFluidViewProps> = ({
['--hidden']: loading,
})}
>
- <FluidChart fluidTypes={[fluidType]} multiFluid={false} />
+ <FluidChart fluidType={fluidType} />
<ConsumptionDetails fluidType={fluidType} />
</div>
</Content>