From 0d0e2bbdfa491bb7d2caa7899b56cee0866e0852 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Thu, 15 Oct 2020 10:00:52 +0200
Subject: [PATCH] feat: change display for day chart
---
src/components/Charts/AxisBottom.tsx | 30 +++++++++++++++----
src/components/Charts/BarChart.tsx | 9 ++++--
src/components/FluidChart/FluidChartSlide.tsx | 19 ++----------
src/services/consumption.service.ts | 1 +
src/services/dateChart.service.ts | 29 +++++++++++++-----
src/services/timePeriod.service.ts | 4 +--
src/styles/base/_typography.scss | 2 +-
src/styles/components/_barchart.scss | 5 ++++
8 files changed, 62 insertions(+), 37 deletions(-)
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index f3d5a103b..55982e431 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 90f137aed..a50cb537e 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 0fcef191a..7bb66fb10 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 e4beeb4be..a8390d77f 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 49a1921f3..fa0521575 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 efa5c0173..ffe91665f 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 9a379223a..f80e3e5b9 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 369fe5d6b..cd987967d 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;
--
GitLab