diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index f3d5a103b785210f8bbbab855863e6aee5711671..03072d721dbad11497d126199b3594569762dd58 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -22,6 +22,10 @@ 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 +49,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:
@@ -123,6 +140,7 @@ const AxisBottom = (props: AxisBottomProps) => {
width={xScale.bandwidth() / 2}
selectedDate={selectedDate}
/>
+
{dateChartService.compareStepDate(
timeStep,
DateTime.local(),
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index 45f1ec10d4874413736f09106962645b82265510..05e6503dcb5edaaf9a0310d6292213ef0295a272 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -79,8 +79,12 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
const maxCompare = chartData.comparisonData
? 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 +94,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 ea15fc730b7523c5247562448cc81da0d0dd7276..0436e02e10b26eee6f953beef696e408a540f067 100644
--- a/src/services/consumption.service.ts
+++ b/src/services/consumption.service.ts
@@ -88,6 +88,7 @@ export default class ConsumptionDataManager {
timePeriod,
compareTimePeriod || null
)
+
// validating output data
toBeAgreggatedData.push({
@@ -97,7 +98,6 @@ export default class ConsumptionDataManager {
}
const aggregatedData = this.aggregateGraphData(toBeAgreggatedData)
-
// mapping result to contract
mappedData = aggregatedData
@@ -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
if (
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 d4329e36c73af5810ae7cdf7a83add0210ae4709..83019797cc2e8909fa3122dc936bc86ac714e1a5 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;
+ }
}
.background-true {
opacity: 0.1;