diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 1f0c220c490f82d9382dd7825eb5f08f85f72bc1..f41564a349ff3311361f918e51c5878d2b947b5e 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -124,8 +124,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(21.219512195121922, 0)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY weekend bounce-3 delay--0"
@@ -207,8 +212,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(233.41463414634146, 0)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY weekend bounce-3 delay--1"
@@ -290,8 +300,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(445.609756097561, 0)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY weekend bounce-3 delay--2"
@@ -373,8 +388,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(657.8048780487804, 0)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY weekend bounce-3 delay--3"
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 766c2a08ea0363ce89dd3ec9eb1365cb27cbbf11..b2774e5cd6896b33d3ac50620ed56b06aea64d2c 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -166,8 +166,13 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(54.6875, 168.73935065329292)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY disabled bounce-3 delay--0"
@@ -249,8 +254,13 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(328.125, 168.73935065329292)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY disabled bounce-3 delay--1"
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 0b6ccdb99804c32a1349444c92be2729f083d9c7..927b47f4502b1e3418b5e3bca76486228c5958da 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -1,3 +1,4 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ScaleBand, ScaleLinear } from 'd3-scale'
import { detect } from 'detect-browser'
import { FluidType, TimeStep } from 'enums'
@@ -10,7 +11,8 @@ import {
setSelectedDate,
} from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { getFluidName } from 'utils/utils'
+import { formatDate } from 'utils/date'
+import { getFluidName, getFluidUnit } from 'utils/utils'
interface BarProps {
index: number
@@ -28,6 +30,7 @@ interface BarProps {
weekdays?: 'week' | 'weekend'
clickable?: boolean
average?: number
+ focusable?: boolean
}
const Bar = ({
@@ -46,7 +49,9 @@ const Bar = ({
weekdays,
clickable = true,
average,
+ focusable,
}: BarProps) => {
+ const { t } = useI18n()
const dispatch = useAppDispatch()
const {
chart: { selectedDate, currentTimeStep },
@@ -296,7 +301,24 @@ const Bar = ({
dataload.value &&
dataload.value >= 0 && (
// default colored bar
- <g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
+ <g
+ className="barValue"
+ transform={`translate(${xScaleValue}, ${yScaleValue})`}
+ tabIndex={focusable ? 0 : -1}
+ onKeyDown={event => {
+ if (event.key === ' ') {
+ event.preventDefault() // prevent from scrolling page
+ handleClick()
+ }
+ }}
+ >
+ <title>
+ {t('consumption.accessibility.bar', {
+ date: formatDate(currentTimeStep, dataload.date),
+ value: Math.round(dataload.value * 100) / 100,
+ unit: getFluidUnit(fluidType),
+ })}
+ </title>
<defs>
<linearGradient
id="gradient"
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index 658f78036c58b91f7e8477d8ad4f2fd46c11642b..b6a861e7914f47558640768d7e84444ae62b5583 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -21,6 +21,7 @@ interface BarChartProps {
marginBottom?: number
isSwitching: boolean
clickable?: boolean
+ focusable?: boolean
}
const BarChart = ({
@@ -36,6 +37,7 @@ const BarChart = ({
marginBottom = 50,
isSwitching,
clickable = true,
+ focusable,
}: BarChartProps) => {
const getContentWidth = () => {
return width - marginLeft - marginRight
@@ -115,6 +117,7 @@ const BarChart = ({
}
clickable={clickable}
average={averageConsumption}
+ focusable={focusable}
/>
))}
</g>
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 4b70e2896a14a9e91562af3834b1a8ffaae5d9cd..25e4f95f72acbe97569b76cf1656a67eb88e2e97 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -52,8 +52,13 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-MULTIFLUID bounce-3 delay--4"
@@ -142,8 +147,13 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-MULTIFLUID selected bounce-2 delay"
@@ -232,8 +242,13 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-MULTIFLUID selected bounce-2 delay"
@@ -356,8 +371,13 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY selected bounce-2 delay"
@@ -446,8 +466,13 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-GAS selected bounce-2 delay"
@@ -536,8 +561,13 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-MULTIFLUID selected bounce-2 delay"
@@ -626,8 +656,13 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(0.625, 69.18029999999999)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-WATER selected bounce-2 delay"
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
index 9df650b27b60a6bfb1e770e9d86a1a0f94c6e7a2..5c2161cba010b248f63b710b899262b15c81726b 100644
--- a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -139,8 +139,13 @@ exports[`BarChart component should render correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(33.43750000000003, 309.3554761977037)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY selected bounce-2 delay"
@@ -222,8 +227,13 @@ exports[`BarChart component should render correctly 1`] = `
/>
</g>
<g
+ class="barValue"
+ tabindex="-1"
transform="translate(200.62500000000003, 309.3554761977037)"
>
+ <title>
+ consumption.accessibility.bar
+ </title>
<defs>
<lineargradient
class="bar-ELECTRICITY selected bounce-2 delay"
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 9d19aca3820b73cde756941e61b9b8c4535196ce..d7f34079a2df5cf59dbaedfec0d3d826af3eaac7 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -5,11 +5,6 @@ import { DateTime } from 'luxon'
import React from 'react'
import DateNavigator from './DateNavigator'
-jest.mock(
- 'components/DateNavigator/DateNavigatorFormat',
- () => 'mock-date-navigator-format'
-)
-
const mockedDate = DateTime.local(2021, 7, 1)
.setZone('utc', {
keepLocalTime: true,
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index 1132e0b8fd4b44650b40ea2f0eecae30fdab28ef..b1fcdd6ec359e1860e1c1914d1172ae022e45dbd 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -2,11 +2,11 @@ import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import classNames from 'classnames'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { TimeStep } from 'enums'
import { DateTime } from 'luxon'
import React from 'react'
+import { formatDate } from 'utils/date'
import './datenavigator.scss'
interface DateNavigatorProps {
@@ -29,6 +29,7 @@ const DateNavigator = ({
timeStep,
}: DateNavigatorProps) => {
const { t } = useI18n()
+ const formattedDate = formatDate(timeStep, navigatorDate)
return (
<div
@@ -45,11 +46,32 @@ const DateNavigator = ({
['disable']: disablePrev,
})}
/>
- <DateNavigatorFormat
- timeStep={timeStep}
- date={navigatorDate}
- inline={inlineDateDisplay}
- />
+
+ <div className="date-navigator-format">
+ {inlineDateDisplay ? (
+ <>
+ {formattedDate[0] && formattedDate[1] && (
+ <div className="date-navigator-format-date text-16-bold">
+ {formattedDate[0]} {formattedDate[1]}
+ </div>
+ )}
+ </>
+ ) : (
+ <>
+ {formattedDate[0] && (
+ <div className="date-navigator-format-date text-16-bold timeRange">
+ {formattedDate[0]}
+ </div>
+ )}
+ {formattedDate[1] && (
+ <div className="date-navigator-format-date text-15-normal">
+ {formattedDate[1]}
+ </div>
+ )}
+ </>
+ )}
+ </div>
+
<StyledIconButton
icon={RightArrowIcon}
onClick={handleNextDate}
diff --git a/src/components/DateNavigator/DateNavigatorFormat.tsx b/src/components/DateNavigator/DateNavigatorFormat.tsx
deleted file mode 100644
index d5c835b35eb04908ab9051f8f92d3ece610abba7..0000000000000000000000000000000000000000
--- a/src/components/DateNavigator/DateNavigatorFormat.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { TimeStep } from 'enums'
-import { DateTime } from 'luxon'
-import React from 'react'
-import './datenavigatorformat.scss'
-
-interface DateNavigatorFormatProps {
- timeStep: TimeStep
- date: DateTime
- inline: boolean
-}
-
-const DateNavigatorFormat = ({
- timeStep,
- date,
- inline,
-}: DateNavigatorFormatProps) => {
- const formatDate = (_timeStep: TimeStep) => {
- switch (_timeStep) {
- case TimeStep.YEAR:
- return [
- date.toLocaleString({
- year: 'numeric',
- }),
- '',
- ]
- case TimeStep.MONTH:
- return [
- date.toLocaleString({
- month: 'long',
- }),
- date.toLocaleString({
- year: 'numeric',
- }),
- ]
- case TimeStep.DAY:
- case TimeStep.WEEK:
- return [
- date.toLocaleString({
- weekday: 'long',
- day: '2-digit',
- }),
- date.toLocaleString({
- month: 'long',
- }),
- ]
- case TimeStep.HALF_AN_HOUR:
- /**
- * Format date to range:
- * 9:00 - 9:30
- * Day 0X Month
- */
- return [
- `${date.toLocaleString({
- hour: 'numeric',
- minute: 'numeric',
- })} -
- ${date.plus({ minutes: 30 }).toLocaleString({
- hour: 'numeric',
- minute: 'numeric',
- })}`,
- date.toLocaleString({
- weekday: 'long',
- day: '2-digit',
- month: 'long',
- }),
- ]
- default:
- return [date.toLocaleString(DateTime.DATETIME_SHORT), '']
- }
- }
- const formatedDate = formatDate(timeStep)
-
- return (
- <div className="date-navigator-format">
- {inline ? (
- <>
- {formatedDate[0] && formatedDate[1] && (
- <div className="date-navigator-format-date text-16-bold">
- {formatedDate[0]} {formatedDate[1]}
- </div>
- )}
- </>
- ) : (
- <>
- {formatedDate[0] && (
- <div className="date-navigator-format-date text-16-bold timeRange">
- {formatedDate[0]}
- </div>
- )}
- {formatedDate[1] && (
- <div className="date-navigator-format-date text-15-normal">
- {formatedDate[1]}
- </div>
- )}
- </>
- )}
- </div>
- )
-}
-
-export default DateNavigatorFormat
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index 9d6cbb26b697f0a8d3dbb5e058171de91aadaf59..3f7c7423293eb71bf9241ddfa354e2296a8f72ef 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -31,11 +31,20 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
class="MuiTouchRipple-root"
/>
</button>
- <mock-date-navigator-format
- date="1625097600000"
- inline="false"
- timestep="40"
- />
+ <div
+ class="date-navigator-format"
+ >
+ <div
+ class="date-navigator-format-date text-16-bold timeRange"
+ >
+ July
+ </div>
+ <div
+ class="date-navigator-format-date text-15-normal"
+ >
+ 2021
+ </div>
+ </div>
<button
aria-label="consumption.accessibility.button_next_value"
class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 34451ece836569368a1c60fb1f3485cc438b4b62..4d8b9d5201a5173c4aecb137cd2bcade681e4420 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -14,4 +14,25 @@
opacity: 0.3;
}
}
+
+ .date-navigator-format {
+ display: flex;
+ flex-direction: column;
+ min-width: 7.81rem;
+ text-align: center;
+ @media all and(max-width: $width-small-phone) {
+ min-width: 10.32rem;
+ }
+ align-items: center;
+ align-self: center;
+ .date-navigator-format-date {
+ color: $grey-bright;
+ &::first-letter {
+ text-transform: uppercase;
+ }
+ &.timeRange {
+ white-space: normal;
+ }
+ }
+ }
}
diff --git a/src/components/DateNavigator/datenavigatorformat.scss b/src/components/DateNavigator/datenavigatorformat.scss
deleted file mode 100644
index b8dddbc5cb60e5be15a7f51609328d6eabe156f3..0000000000000000000000000000000000000000
--- a/src/components/DateNavigator/datenavigatorformat.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.date-navigator-format {
- display: flex;
- flex-direction: column;
- min-width: 7.81rem;
- text-align: center;
- @media all and(max-width: $width-small-phone) {
- min-width: 10.32rem;
- }
- align-items: center;
- align-self: center;
- .date-navigator-format-date {
- color: $grey-bright;
- &::first-letter {
- text-transform: uppercase;
- }
- &.timeRange {
- white-space: normal;
- }
- }
-}
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 334de391f6d1c10b6b5e18cbaf4913d3b474c28e..7bece51bb3f33317a86fd1c31a906ab00d7dc439 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -129,6 +129,7 @@ const FluidChartSlide = ({
height={height}
width={width}
isSwitching={isSwitching}
+ focusable={focusable}
/>
</>
)}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3dae8dc9b90d374d1c2962f74dce561933b95fd1..70d36125ee6eb81600d16a7740c0fc10461104e5 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -346,7 +346,8 @@
"button_next_period": "Afficher la période suivante",
"button_previous_value": "Sélectionner la valeur précédente",
"button_next_value": "Sélectionner la valeur suivante",
- "checkbox_compare": "Afficher ou cacher la comparaison"
+ "checkbox_compare": "Afficher ou cacher la comparaison",
+ "bar": "Consommation du %{date} : %{value} %{unit}"
},
"partner_issue_modal": {
"title": "Attention\u00a0!",
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 16fdf31cd70c22b952979b857ebfb9a3cb0b342d..b0fbcdcf3a8eb93aa9e01ebd17939715ec7b7fae 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -165,6 +165,14 @@
filter: drop-shadow(0 -0.1rem 0.2rem $multi-color);
}
}
+
+.barValue {
+ outline: none;
+ &:focus-visible {
+ outline: 1px solid;
+ }
+}
+
/** Animation **/
.bounce-1 {
animation-name: bounce-1;
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index 1211870ea45c7af7833c5de84cffd1c79f7aac43..362a95ddd3f19e77f2df83078570cb94b80a1a55 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -6,6 +6,7 @@ import {
compareDates,
convertDateToMonthYearString,
convertDateToShortDateString,
+ formatDate,
getActualAnalysisDate,
getCurrentSeason,
getLagDays,
@@ -483,4 +484,33 @@ describe('date utils', () => {
expect(currentSeason).toBeNull()
})
})
+
+ describe('formatDate', () => {
+ const date = DateTime.local(2024, 3, 13, 9).setZone('utc', {
+ keepLocalTime: true,
+ })
+ it('should return the correct date format for YEAR', () => {
+ const formattedDate = formatDate(TimeStep.YEAR, date)
+ expect(formattedDate).toEqual(['2024', ''])
+ })
+ it('should return the correct date format for MONTH', () => {
+ const formattedDate = formatDate(TimeStep.MONTH, date)
+ expect(formattedDate).toEqual(['March', '2024'])
+ })
+ it('should return the correct date format for DAY', () => {
+ const formattedDate = formatDate(TimeStep.DAY, date)
+ expect(formattedDate).toEqual(['13 Wednesday', 'March'])
+ })
+ it('should return the correct date format for WEEK', () => {
+ const formattedDate = formatDate(TimeStep.WEEK, date)
+ expect(formattedDate).toEqual(['13 Wednesday', 'March'])
+ })
+ it('should return the correct date format for HALF_AN_HOUR', () => {
+ const formattedDate = formatDate(TimeStep.HALF_AN_HOUR, date)
+ expect(formattedDate).toEqual([
+ '9:00 AM - 9:30 AM',
+ 'Wednesday, March 13',
+ ])
+ })
+ })
})
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 434975bc19903b67813df3b1867bcd20dcfc8940..9468ee8f43ebba8267546b22958443b2f3b43807 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -189,3 +189,60 @@ export function getOppositeSeason(currentSeason: Season): Season {
throw new Error('Invalid current season.')
}
}
+
+/**
+ * Returns an array of the formatted date. It returns an array for display purposes.
+ */
+export const formatDate = (timeStep: TimeStep, date: DateTime) => {
+ switch (timeStep) {
+ case TimeStep.YEAR:
+ return [
+ date.toLocaleString({
+ year: 'numeric',
+ }),
+ '',
+ ]
+ case TimeStep.MONTH:
+ return [
+ date.toLocaleString({
+ month: 'long',
+ }),
+ date.toLocaleString({
+ year: 'numeric',
+ }),
+ ]
+ case TimeStep.DAY:
+ case TimeStep.WEEK:
+ return [
+ date.toLocaleString({
+ weekday: 'long',
+ day: '2-digit',
+ }),
+ date.toLocaleString({
+ month: 'long',
+ }),
+ ]
+ case TimeStep.HALF_AN_HOUR:
+ /**
+ * Format date to range:
+ * 9:00 - 9:30
+ * Day 0X Month
+ */
+ return [
+ `${date.toLocaleString({
+ hour: 'numeric',
+ minute: 'numeric',
+ })} - ${date.plus({ minutes: 30 }).toLocaleString({
+ hour: 'numeric',
+ minute: 'numeric',
+ })}`,
+ date.toLocaleString({
+ weekday: 'long',
+ day: '2-digit',
+ month: 'long',
+ }),
+ ]
+ default:
+ return [date.toLocaleString(DateTime.DATETIME_SHORT), '']
+ }
+}
diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
index e36db9b7ba1b1f7afa0529b9a1bca3f8fb6e3a65..64a349dda2822c6df7a4267da875e6e07b63e964 100644
--- a/src/utils/utils.spec.ts
+++ b/src/utils/utils.spec.ts
@@ -15,6 +15,7 @@ import {
getChallengeTitleWithLineReturn,
getFluidName,
getFluidTypeTranslation,
+ getFluidUnit,
getKonnectorSlug,
getKonnectorUpdateError,
getMonthFullName,
@@ -385,4 +386,21 @@ describe('utils test', () => {
])
})
})
+
+ describe('getFluidUnit', () => {
+ it('should return kWh for ELECTRICITY', () => {
+ expect(getFluidUnit(FluidType.ELECTRICITY)).toBe('kWh')
+ })
+ it('should return L for WATER', () => {
+ expect(getFluidUnit(FluidType.WATER)).toBe('L')
+ })
+ it('should return € for MULTIFLUID', () => {
+ expect(getFluidUnit(FluidType.MULTIFLUID)).toBe('€')
+ })
+ it('should throw error for invalid fluid type', () => {
+ expect(() => getFluidUnit(99 as FluidType.GAS)).toThrow(
+ 'unknown fluidtype'
+ )
+ })
+ })
})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fc5bf7edee928e76d7a0bfbb1fb64decbdda30a3..1f5abd90ef59db5e8afa4c01e637e1a089bd3f6c 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -472,3 +472,17 @@ export const roundOffPeakHours = (
end: roundToNearestHalfHour(end.hour, end.minute, true),
}))
}
+
+export const getFluidUnit = (fluidType: FluidType) => {
+ switch (fluidType) {
+ case FluidType.ELECTRICITY:
+ case FluidType.GAS:
+ return 'kWh'
+ case FluidType.WATER:
+ return 'L'
+ case FluidType.MULTIFLUID:
+ return '€'
+ default:
+ throw new Error('unknown fluidtype')
+ }
+}