diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index f3d5a103b785210f8bbbab855863e6aee5711671..55982e43176106cec22bbe2acd38672d9bd14653 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -22,6 +22,11 @@ function TextAxis(props: TextTypeProps) {
selectedDate,
dataload.date
)
+
+ const isEven = (n: number) => {
+ return n % 2 == 0
+ }
+
const style = isSelectedDate
? 'tick-text tick-text-selected chart-ticks-x-text'
: 'tick-text chart-ticks-x-text'
@@ -45,12 +50,25 @@ function TextAxis(props: TextTypeProps) {
case TimeStep.DAY:
return (
<text y="10" dy="0.71em" transform={`translate(${width})`}>
- <tspan className={style} x="0" textAnchor="middle">
- {dataload.date.toLocaleString({ weekday: 'narrow' })}
- </tspan>
- <tspan className={style} x="0" dy="1.2em" textAnchor="middle">
- {dataload.date.toLocaleString({ day: '2-digit' })}
- </tspan>
+ {isEven(index) ? (
+ <>
+ <tspan className={style} x="0" textAnchor="middle">
+ {dataload.date.toLocaleString({ weekday: 'narrow' })}
+ </tspan>
+ <tspan className={style} x="0" dy="1.2em" textAnchor="middle">
+ {dataload.date.toLocaleString({ day: 'numeric' })}
+ </tspan>
+ </>
+ ) : (
+ <tspan
+ className={style + ' separator'}
+ dx="0"
+ dy="8px"
+ textAnchor="middle"
+ >
+ .
+ </tspan>
+ )}
</text>
)
case TimeStep.HOUR:
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index 90f137aed6e0cb4a8e5ac7affeca3e0bf2257f45..a50cb537e31c628b8da8ef74cf08cdfa99cff8dd 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -80,7 +80,10 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
? Math.max(...chartData.comparisonData.map(d => d.value))
: 0
if (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR) {
- const actualMonth = selectedDate.startOf('week').month
+ const actualMonth =
+ timeStep === TimeStep.DAY
+ ? selectedDate.startOf('month').month
+ : selectedDate.startOf('week').month
const actualYear = selectedDate.startOf('week').year
const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes.join(
'-'
@@ -90,9 +93,9 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
}
const maxLoad = maxLoads[key] || 0
if (showCompare) {
- return Math.max(maxLoad, maxCompare)
+ return Math.round(Math.max(maxLoad, maxCompare))
}
- return maxLoad > 0 ? maxLoad : 15
+ return maxLoad > 0 ? Math.round(maxLoad) : 15
} else {
let max = chartData.actualData
? Math.max(...chartData.actualData.map(d => d.value))
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 0fcef191a450843652ad11cadd9a791125a071a5..7bb66fb103e37e54e8d3c99e7116bae145e2b076 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -87,23 +87,8 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
// Full month + last day of the previous month for TimeStep.HALF_AN_HOUR
const maxTimePeriod = {
- startDate:
- timeStep === TimeStep.HALF_AN_HOUR
- ? lastSlideDate.startOf('month')
- : lastSlideDate.startOf('week').startOf('month').weekday === 1
- ? lastSlideDate.startOf('week').startOf('month')
- : lastSlideDate
- .startOf('week')
- .startOf('month')
- .plus({ days: +7 })
- .startOf('week'),
- endDate:
- timeStep === TimeStep.HALF_AN_HOUR
- ? lastSlideDate.endOf('month')
- : lastSlideDate.startOf('week').month !==
- lastSlideDate.endOf('week').month
- ? lastSlideDate.endOf('week')
- : lastSlideDate.endOf('month').endOf('week'),
+ startDate: lastSlideDate.startOf('month'),
+ endDate: lastSlideDate.endOf('month'),
}
const compareMaxTimePeriod = maxTimePeriod
diff --git a/src/services/consumption.service.ts b/src/services/consumption.service.ts
index e4beeb4be1347b41a94f43dc8c3b104d18820b19..a8390d77f9cac65f3bba481b132bbc058e389c1a 100644
--- a/src/services/consumption.service.ts
+++ b/src/services/consumption.service.ts
@@ -389,6 +389,7 @@ export default class ConsumptionDataManager {
for (const singleFluidChart of singleFluidCharts) {
if (!singleFluidChart.chartData) break
+ if (!singleFluidChart.chartData.actualData[i]) break
const value = singleFluidChart.chartData.actualData[i].value
let convertedValue = -1
diff --git a/src/services/dateChart.service.ts b/src/services/dateChart.service.ts
index 49a1921f3cc685a4d4b84eb00bdffc24728b9b68..fa05215758ec8d330aeea9b058132efc02444432 100644
--- a/src/services/dateChart.service.ts
+++ b/src/services/dateChart.service.ts
@@ -39,12 +39,21 @@ export default class DateChartService {
endDate: date.plus({ months: -12 * index }),
}
case TimeStep.DAY:
- date = referenceDate
- .endOf('week')
- .set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+ date = referenceDate.set({
+ day: 1,
+ hour: 0,
+ minute: 0,
+ second: 0,
+ millisecond: 0,
+ })
return {
- startDate: date.plus({ days: -7 * index - (7 - 1) }),
- endDate: date.plus({ days: -7 * index }),
+ startDate: date.plus({ month: -index }).startOf('day'),
+ endDate: date
+ .plus({
+ month: -index,
+ })
+ .endOf('month')
+ .startOf('day'),
}
case TimeStep.HOUR:
date = referenceDate.set({
@@ -229,10 +238,14 @@ export default class DateChartService {
break
case TimeStep.DAY:
incrementedDate = initialdate.plus({ day: increment })
- if (initialdate.weekday === 1 && incrementedDate.weekday === 7) {
- incrementIndex = 1
- } else if (initialdate.weekday === 7 && incrementedDate.weekday === 1) {
+ if (
+ initialdate.day === initialdate.daysInMonth &&
+ incrementedDate.day &&
+ incrementedDate.day !== initialdate.daysInMonth - 1
+ ) {
incrementIndex = -1
+ } else if (initialdate.day === 1 && incrementedDate.day !== 2) {
+ incrementIndex = 1
} else {
incrementIndex = 0
}
diff --git a/src/services/timePeriod.service.ts b/src/services/timePeriod.service.ts
index efa5c017338e52e0bc0752e27f14acbc3a6b0c5e..ffe91665f3ed6a4115dd1e9382cfb0ff7055e107 100644
--- a/src/services/timePeriod.service.ts
+++ b/src/services/timePeriod.service.ts
@@ -122,9 +122,9 @@ export default class TimePeriodService {
case TimeStep.HOUR:
return DateTime.local(startDate.year, startDate.month, startDate.day)
case TimeStep.DAY:
- return DateTime.local(startDate.year, startDate.month, startDate.day)
+ return DateTime.local(startDate.year, startDate.month, 1)
.setLocale('fr-CA')
- .startOf('week')
+ .startOf('month')
case TimeStep.MONTH:
return DateTime.local(startDate.year, startDate.month, 1)
case TimeStep.YEAR:
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 9a379223a73f0f966f44ebe6c7c73a113a8b244c..f80e3e5b9af9b7d06910d8451928b94612875aac 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -279,7 +279,7 @@ p {
font-size: 1rem;
line-height: 120%;
@media #{$large-phone} {
- font-size: 0.875rem;
+ font-size: 0.685rem;
}
}
.chart-ticks-y-text {
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 369fe5d6bc726911e0157901a69930676ebb1cf6..cd987967dc1d3d6ec8eae064a6cc71937e4326e6 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -9,6 +9,11 @@
fill: $grey-bright;
}
}
+ .separator {
+ text-align: center;
+ margin: 0 2px;
+ font-size: 1rem !important;
+ }
}
.value-text {
fill: $grey-dark;