diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.spec.tsx b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.spec.tsx
similarity index 100%
rename from src/components/ConsumptionNavigator/ActivateHalfHourLoad.spec.tsx
rename to src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.spec.tsx
diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
similarity index 92%
rename from src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
rename to src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
index dc09d596ab55b8b27749fca08c8887792d031d47..34f14ab75a2d176fc0b311e9094ab7f9a69d630d 100644
--- a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
+++ b/src/components/ActivateHalfHourLoad/ActivateHalfHourLoad.tsx
@@ -16,8 +16,8 @@ const ActivateHalfHourLoad = () => {
const [, setValidExploration] = useExploration()
return (
- <div className="cta-box">
- <div className="cta-box-header header-text text-16-normal">
+ <div className="activatehalfhour-box">
+ <div className="activatehalfhour-box-header header-text text-16-normal">
{t('timestep.activate.enedis.info')}
</div>
<MuiButton
diff --git a/src/components/ConsumptionNavigator/__snapshots__/ActivateHalfHourLoad.spec.tsx.snap b/src/components/ActivateHalfHourLoad/__snapshots__/ActivateHalfHourLoad.spec.tsx.snap
similarity index 100%
rename from src/components/ConsumptionNavigator/__snapshots__/ActivateHalfHourLoad.spec.tsx.snap
rename to src/components/ActivateHalfHourLoad/__snapshots__/ActivateHalfHourLoad.spec.tsx.snap
diff --git a/src/components/ConsumptionNavigator/activateHalfHourLoad.scss b/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
similarity index 75%
rename from src/components/ConsumptionNavigator/activateHalfHourLoad.scss
rename to src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
index 5c48b09764b61da19a42fbe2adec0907c83b426f..c8688c267273175d1e30322b59a22d30287aa07c 100644
--- a/src/components/ConsumptionNavigator/activateHalfHourLoad.scss
+++ b/src/components/ActivateHalfHourLoad/activateHalfHourLoad.scss
@@ -2,27 +2,19 @@
@import 'src/styles/base/color';
// Enedis Half Hour Load Activation
-.cta-box {
+.activatehalfhour-box {
background-color: rgba(18, 18, 18, 0.8);
- position: absolute;
- left: 0;
- width: calc(100vw - 220px);
padding: 0rem 1rem 0rem 0rem;
- z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
- height: 37.5rem;
+ min-height: 29.5rem;
@media #{$large-phone} {
- height: 29rem;
- width: 100vw;
- }
- @media #{$tablet} {
- width: 100vw;
+ min-height: 21.5rem;
}
- .cta-box-header {
+ .activatehalfhour-box-header {
text-align: center;
font-weight: bold;
letter-spacing: 0.2px;
diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx
index cb98bb7e1a7fde7cfd99983c29fa3adb6f431f9b..233af6dcf1130447d1e3e13fb653fecfef949565 100644
--- a/src/components/Charts/AxisBottom.spec.tsx
+++ b/src/components/Charts/AxisBottom.spec.tsx
@@ -1,10 +1,16 @@
import React from 'react'
import AxisBottom from './AxisBottom'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../test/__mocks__/store'
import { graphData } from '../../../test/__mocks__/datachartData.mock'
import { TimeStep } from 'enum/timeStep.enum'
import { DateTime } from 'luxon'
import { scaleBand, ScaleBand } from 'd3-scale'
-import { mount } from 'enzyme'
const mockXScale: ScaleBand<string> = scaleBand()
.domain(['0', '10'])
@@ -17,51 +23,75 @@ const mockProps = {
height: 20,
marginLeft: 10,
marginBottom: 10,
- selectedDate: DateTime.fromObject({ year: 2020, month: 11, day: 3 }).setZone(
- 'utc',
- {
- keepLocalTime: true,
- }
- ),
}
+const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
+
describe('AxisBottom component test', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ useDispatchSpy.mockClear()
+ })
+
+ useSelectorSpy.mockReturnValue({
+ selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
+ zone: 'utc',
+ }),
+ })
+
it('should correctly render YEAR format of AxisBottom', () => {
const wrapper = mount(
- <AxisBottom {...mockProps} timeStep={TimeStep.YEAR} />
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.YEAR} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render MONTH format of AxisBottom', () => {
const wrapper = mount(
- <AxisBottom {...mockProps} timeStep={TimeStep.MONTH} />
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.MONTH} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom without duel', () => {
- const wrapper = mount(<AxisBottom {...mockProps} timeStep={TimeStep.DAY} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.DAY} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render DAY format of AxisBottom with duel', () => {
const wrapper = mount(
- <AxisBottom {...mockProps} timeStep={TimeStep.DAY} isDuel={true} />
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.DAY} isDuel={true} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render WEEK format of AxisBottom', () => {
const wrapper = mount(
- <AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.WEEK} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render HALF_AN_HOUR format of AxisBottom', () => {
const wrapper = mount(
- <AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
+ <Provider store={store}>
+ <AxisBottom {...mockProps} timeStep={TimeStep.HALF_AN_HOUR} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 769207c28ac3a1de7eba8fa4cc8801917e901f7a..4061034ac1eba4d13cef1ba3dcf5f6fb6cfa9bef 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -106,6 +106,7 @@ function TextAxis(props: TextTypeProps) {
interface AxisBottomProps {
data: Dataload[]
+ timeStep: TimeStep
xScale: ScaleBand<string>
height: number
marginLeft: number
@@ -115,15 +116,14 @@ interface AxisBottomProps {
const AxisBottom: React.FC<AxisBottomProps> = ({
data,
+ timeStep,
xScale,
height,
marginLeft,
marginBottom,
isDuel,
}: AxisBottomProps) => {
- const { currentTimeStep, selectedDate } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
+ const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
const dashArray = `${height / 30} ${height / 30}`
const dateChartService = new DateChartService()
return (
@@ -143,13 +143,13 @@ const AxisBottom: React.FC<AxisBottomProps> = ({
<TextAxis
index={index}
dataload={d}
- timeStep={currentTimeStep}
+ timeStep={timeStep}
width={xScale.bandwidth() / 2}
selectedDate={selectedDate}
isDuel={isDuel}
/>
{dateChartService.compareStepDate(
- currentTimeStep,
+ timeStep,
DateTime.local().setZone('utc', {
keepLocalTime: true,
}),
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index ed3f8becb73304c12e7312050c141ea2c65077b0..8e8261b134cc06db999db06e97e1e835bf9123be 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -1,5 +1,12 @@
import React from 'react'
import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../test/__mocks__/store'
+import * as chartActions from 'store/chart/chart.actions'
import Bar from './Bar'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
@@ -7,69 +14,129 @@ import { graphData } from '../../../test/__mocks__/datachartData.mock'
import { DateTime } from 'luxon'
import { scaleBand, ScaleBand, scaleLinear } from 'd3'
-describe('Bar component test', () => {
- const mockHandleClickData = jest.fn()
- const mockXScale: ScaleBand<string> = scaleBand()
- .domain(
- graphData.actualData.map(d =>
- d.date.toLocaleString(DateTime.DATETIME_SHORT)
- )
+const mockXScale: ScaleBand<string> = scaleBand()
+ .domain(
+ graphData.actualData.map(d =>
+ d.date.toLocaleString(DateTime.DATETIME_SHORT)
)
- .range([0, 10])
- .padding(0.2)
+ )
+ .range([0, 10])
+ .padding(0.2)
+
+const mockParam = {
+ index: 4,
+ dataload: graphData.actualData[0],
+ compareDataload: graphData.actualData[1],
+ fluidType: FluidType.MULTIFLUID,
+ timeStep: TimeStep.DAY,
+ showCompare: false,
+ xScale: mockXScale,
+ yScale: scaleLinear(),
+ height: 20,
+ isSwitching: false,
+ isDuel: false,
+}
- const mockParam = {
- index: 4,
- dataload: graphData.actualData[0],
- compareDataload: graphData.actualData[1],
- fluidTypes: [FluidType.ELECTRICITY],
- timeStep: TimeStep.DAY,
- multiFluid: false,
- selectedDate: DateTime.fromObject({
- year: 2020,
- month: 11,
- day: 3,
- }).setZone('utc', {
- keepLocalTime: true,
+const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
+const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')
+const setCurrentDatachartIndexSpy = jest.spyOn(
+ chartActions,
+ 'setCurrentDatachartIndex'
+)
+
+describe('Bar component test', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ useDispatchSpy.mockClear()
+ setSelectedDateSpy.mockClear()
+ setCurrentDatachartIndexSpy.mockClear()
+ })
+
+ useSelectorSpy.mockReturnValue({
+ selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
+ zone: 'utc',
}),
- showCompare: false,
- handleClickData: mockHandleClickData,
- xScale: mockXScale,
- yScale: scaleLinear(),
- height: 20,
- isSwitching: false,
- isDuel: false,
- }
+ })
+
+ it('should correctly render Multifluid Bar', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} />
+ </Provider>
+ )
+ expect(wrapper.getElement()).toMatchSnapshot()
+ })
it('should correctly render Electricity Bar', () => {
const wrapper = mount(
- <Bar {...mockParam} fluidTypes={[FluidType.ELECTRICITY]} />
+ <Provider store={store}>
+ <Bar {...mockParam} fluidType={FluidType.ELECTRICITY} />
+ </Provider>
)
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render Water Bar', () => {
- const wrapper = mount(<Bar {...mockParam} fluidTypes={[FluidType.WATER]} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} fluidType={FluidType.WATER} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render Gas Bar', () => {
- const wrapper = mount(<Bar {...mockParam} fluidTypes={[FluidType.GAS]} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} fluidType={FluidType.GAS} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render Bar with showCompare', () => {
- const wrapper = mount(<Bar {...mockParam} showCompare={true} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} showCompare={true} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render Bar with isSwitching', () => {
- const wrapper = mount(<Bar {...mockParam} isSwitching={true} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} isSwitching={true} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
it('should correctly render Bar with isDuel', () => {
- const wrapper = mount(<Bar {...mockParam} isDuel={true} />)
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} isDuel={true} />
+ </Provider>
+ )
expect(wrapper.getElement()).toMatchSnapshot()
})
+
+ it('should dispatch selected date when bar is clicked', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <Bar {...mockParam} isDuel={true} />
+ </Provider>
+ )
+ wrapper
+ .find('rect')
+ .first()
+ .simulate('click')
+ expect(setSelectedDateSpy).toBeCalledTimes(1)
+ expect(setSelectedDateSpy).toHaveBeenCalledWith(
+ graphData.actualData[0].date
+ )
+ })
})
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 2ed4c40153c4374920768bfd979c081677e20285..9e290b2cf744b2453ebc47bf91feaf3942cab850 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -6,6 +6,7 @@ import { DateTime } from 'luxon'
import { detect } from 'detect-browser'
import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
import { Dataload } from 'models'
import DateChartService from 'services/dateChart.service'
import {
@@ -18,6 +19,7 @@ interface BarProps {
dataload: Dataload
compareDataload: Dataload | null
fluidType: FluidType
+ timeStep: TimeStep
showCompare: boolean
xScale: ScaleBand<string>
yScale: ScaleLinear<number, number>
@@ -31,6 +33,7 @@ const Bar = ({
dataload,
compareDataload,
fluidType,
+ timeStep,
showCompare,
xScale,
yScale,
@@ -39,9 +42,7 @@ const Bar = ({
isDuel,
}: BarProps) => {
const dispatch = useDispatch()
- const { currentTimeStep, selectedDate } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
+ const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
const [clicked, setClicked] = useState(false)
const [animationEnded, setAnimationEnded] = useState(false)
const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
@@ -75,7 +76,7 @@ const Bar = ({
const xScaleValue: number = tempXScale ? tempXScale : 0
const isSelectedDate = new DateChartService().compareStepDate(
- currentTimeStep,
+ timeStep,
selectedDate,
dataload.date
)
@@ -161,7 +162,7 @@ const Bar = ({
setClicked(true)
dispatch(setCurrentDatachartIndex(index))
}
- }, [dispatch, compareDataload, dataload, isSelectedDate, index])
+ }, [dispatch, isSelectedDate, index])
return (
<g>
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index fe20204b7e35dcf6184d5ed7debaed6028996eae..dc38e7144bd32b79706411548bcd5dc25592d602 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -3,6 +3,7 @@ import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
+import { TimeStep } from 'enum/timeStep.enum'
import { Datachart } from 'models'
import Bar from 'components/Charts/Bar'
@@ -12,6 +13,7 @@ import AxisRight from 'components/Charts/AxisRight'
export interface BarChartProps {
chartData: Datachart
fluidType: FluidType
+ timeStep: TimeStep
showCompare: boolean
width?: number
height?: number
@@ -25,6 +27,7 @@ export interface BarChartProps {
const BarChart: React.FC<BarChartProps> = ({
chartData,
fluidType,
+ timeStep,
showCompare,
width = 600,
height = 400,
@@ -88,6 +91,7 @@ const BarChart: React.FC<BarChartProps> = ({
: null
}
fluidType={fluidType}
+ timeStep={timeStep}
showCompare={showCompare}
xScale={xScale}
yScale={yScale}
@@ -98,6 +102,7 @@ const BarChart: React.FC<BarChartProps> = ({
</g>
<AxisBottom
data={chartData.actualData}
+ timeStep={timeStep}
xScale={xScale}
height={height}
marginLeft={marginLeft}
diff --git a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
index 89eeb3e251800182eddcf4dab328b4eb9935af73..91d280afb4e0787f22143679735fcadc9b6dfa27 100644
--- a/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/AxisBottom.spec.tsx.snap
@@ -1,230 +1,302 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AxisBottom component test should correctly render DAY format of AxisBottom with duel 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- isDuel={true}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={20}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ isDuel={true}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={20}
+ xScale={[Function]}
+ />
+</Provider>
`;
exports[`AxisBottom component test should correctly render DAY format of AxisBottom without duel 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={20}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={20}
+ xScale={[Function]}
+ />
+</Provider>
`;
exports[`AxisBottom component test should correctly render HALF_AN_HOUR format of AxisBottom 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={10}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={10}
+ xScale={[Function]}
+ />
+</Provider>
`;
exports[`AxisBottom component test should correctly render MONTH format of AxisBottom 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={40}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={40}
+ xScale={[Function]}
+ />
+</Provider>
`;
exports[`AxisBottom component test should correctly render WEEK format of AxisBottom 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={30}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={30}
+ xScale={[Function]}
+ />
+</Provider>
`;
exports[`AxisBottom component test should correctly render YEAR format of AxisBottom 1`] = `
-<AxisBottom
- data={
- Array [
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
- },
- Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
- },
- Object {
- "date": "2020-10-03T00:00:00.000Z",
- "value": -1,
- "valueDetail": null,
- },
- ]
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
}
- height={20}
- marginBottom={10}
- marginLeft={10}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- timeStep={50}
- xScale={[Function]}
-/>
+>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={20}
+ marginBottom={10}
+ marginLeft={10}
+ timeStep={50}
+ xScale={[Function]}
+ />
+</Provider>
`;
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index fec72d4d5d6fb18ba06366ba745d40f216849be5..9c658f8fccadc7cba9fe790161d9d93802b20cc5 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -1,259 +1,344 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bar component test should correctly render Bar with isDuel 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
}
- }
- fluidTypes={
- Array [
- 0,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={true}
- isSwitching={false}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={3}
+ height={20}
+ index={4}
+ isDuel={true}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
}
- }
- fluidTypes={
- Array [
- 0,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={true}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={3}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={true}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
exports[`Bar component test should correctly render Bar with showCompare 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
}
- }
- fluidTypes={
- Array [
- 0,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={true}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={3}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={false}
+ showCompare={true}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
exports[`Bar component test should correctly render Electricity Bar 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
}
- }
- fluidTypes={
- Array [
- 0,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={0}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
exports[`Bar component test should correctly render Gas Bar 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
+ }
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={2}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
+`;
+
+exports[`Bar component test should correctly render Multifluid Bar 1`] = `
+<Provider
+ store={
Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- fluidTypes={
- Array [
- 2,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
+ }
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={3}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
exports[`Bar component test should correctly render Water Bar 1`] = `
-<Bar
- compareDataload={
+<Provider
+ store={
Object {
- "date": "2020-10-02T00:00:00.000Z",
- "value": 61.65554999999999,
- "valueDetail": Array [
- 40.21918999999999,
- 0.8064649999999999,
- 20.629894999999998,
- ],
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- dataload={
- Object {
- "date": "2020-10-01T00:00:00.000Z",
- "value": 69.18029999999999,
- "valueDetail": Array [
- 45.127739999999996,
- 0.9048899999999999,
- 23.147669999999998,
- ],
+>
+ <Bar
+ compareDataload={
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ 40.21918999999999,
+ 0.8064649999999999,
+ 20.629894999999998,
+ ],
+ }
}
- }
- fluidTypes={
- Array [
- 1,
- ]
- }
- handleClickData={[MockFunction]}
- height={20}
- index={4}
- isDuel={false}
- isSwitching={false}
- multiFluid={false}
- selectedDate={"2020-11-03T00:00:00.000Z"}
- showCompare={false}
- timeStep={20}
- xScale={[Function]}
- yScale={[Function]}
-/>
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ 45.127739999999996,
+ 0.9048899999999999,
+ 23.147669999999998,
+ ],
+ }
+ }
+ fluidType={1}
+ height={20}
+ index={4}
+ isDuel={false}
+ isSwitching={false}
+ showCompare={false}
+ timeStep={20}
+ xScale={[Function]}
+ yScale={[Function]}
+ />
+</Provider>
`;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index dc6c945d635a7aefe84243ec5afb1db2ccdebf92..3af30dac500be5dbb0be695f5b22e3ff03d15295 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -13,7 +13,7 @@ import ConsumptionService from 'services/consumption.service'
import Switch from 'components/CommonKit/Switch/StyledSwitch'
import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
-import ActivateHalfHourLoad from 'components/ConsumptionNavigator/ActivateHalfHourLoad'
+import ActivateHalfHourLoad from 'components/ActivateHalfHourLoad/ActivateHalfHourLoad'
import FluidChartSwipe from './FluidChartSwipe'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index dbf8639c5eb42c22e3b182bf4831fbd0db291977..0f1d252b6862725cb81ab7b39955fe565d7edcf0 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -13,6 +13,7 @@ import DateChartService from 'services/dateChart.service'
import BarChart from 'components/Charts/BarChart'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import { TimeStep } from 'enum/timeStep.enum'
interface FluidChartSlideProps {
index: number
@@ -41,12 +42,21 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
actualData: [],
comparisonData: null,
})
- const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const [isDataLoaded, setIsDataLoaded] = useState<boolean>(false)
+ const [timeStep, setTimeStep] = useState<TimeStep>(99)
useEffect(() => {
let subscribed = true
async function loadData() {
- if (!isLoaded && index >= currentIndex - 1 && index <= currentIndex + 1) {
+ if (currentTimeStep != timeStep && subscribed) {
+ setIsDataLoaded(false)
+ setTimeStep(currentTimeStep)
+ }
+ if (
+ !isDataLoaded &&
+ index >= currentIndex - 1 &&
+ index <= currentIndex + 1
+ ) {
const dateChartService = new DateChartService()
const referenceDate = DateTime.local().setZone('utc', {
keepLocalTime: true,
@@ -75,7 +85,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
)
if (subscribed && graphData && graphData.actualData.length > 0) {
setChartData(graphData)
- setIsLoaded(true)
+ setIsDataLoaded(true)
dispatch(setLoading(false))
}
}
@@ -92,15 +102,10 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
client,
dispatch,
index,
- isLoaded,
+ isDataLoaded,
+ timeStep,
])
- useEffect(() => {
- if (currentTimeStep) {
- setIsLoaded(false)
- }
- }, [currentTimeStep])
-
useEffect(() => {
if (index === currentIndex) {
dispatch(setCurrentDatachart(chartData))
@@ -109,12 +114,13 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
return (
<div className={'fluidchartslide-root'}>
- {!isLoaded ? (
+ {!isDataLoaded ? (
<StyledSpinner size="5em" fluidType={fluidType} />
) : (
<BarChart
chartData={chartData}
fluidType={fluidType}
+ timeStep={timeStep}
showCompare={showCompare}
height={height}
width={width}
diff --git a/src/components/Home/ConsumptionDetails.tsx b/src/components/Home/ConsumptionDetails.tsx
index f1ffcd57ff380ee09cd77c894e6926520d55ad55..b800d2bfcba8b1cf1053dfdba045f858236444e9 100644
--- a/src/components/Home/ConsumptionDetails.tsx
+++ b/src/components/Home/ConsumptionDetails.tsx
@@ -53,11 +53,7 @@ const ConsumptionDetails: React.FC<ConsumptionDetailsProps> = ({
<div className="consumption-details-root">
<div className="consumption-details-content">
<div className="consumption-details-header text-16-normal-uppercase details-title">
- {convertDateToShortDateString(
- currentTimePeriod,
- currentTimeStep,
- true
- )}
+ {convertDateToShortDateString(currentTimePeriod, currentTimeStep)}
</div>
<TotalConsumption
actualData={currentDatachart.actualData}
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
index be7feb5597301dbf3347ed91eaaa0d3ac4cc690c..703e4fc8bcfb116f7d7707b157597a927116ae53 100644
--- a/src/components/Home/HomeView.tsx
+++ b/src/components/Home/HomeView.tsx
@@ -18,7 +18,8 @@ import { FluidState, FluidType } from 'enum/fluid.enum'
import { DateTime } from 'luxon'
import DateNavigator from 'components/DateNavigator/DateNavigator'
import { Profile } from 'models'
-import { setLoading } from 'store/chart/chart.actions'
+import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions'
+import { TimeStep } from 'enum/timeStep.enum'
const HomeView: React.FC = () => {
const dispatch = useDispatch()
@@ -28,7 +29,9 @@ const HomeView: React.FC = () => {
const profile: Profile = useSelector(
(state: AppStore) => state.ecolyo.profile
)
- const { loading } = useSelector((state: AppStore) => state.ecolyo.chart)
+ const { currentTimeStep, loading } = useSelector(
+ (state: AppStore) => state.ecolyo.chart
+ )
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
const [fluidOldData] = useState<FluidType[]>([])
@@ -92,6 +95,12 @@ const HomeView: React.FC = () => {
setopenOldFluidDataModal(false)
}, [])
+ useEffect(() => {
+ if (currentTimeStep == TimeStep.HALF_AN_HOUR) {
+ dispatch(setCurrentTimeStep(TimeStep.WEEK))
+ }
+ }, [dispatch, currentTimeStep])
+
useEffect(() => {
async function checkData() {
await checkFluidDataPeriod()
diff --git a/src/components/Home/__snapshots__/HomeDetails.spec.tsx.snap b/src/components/Home/__snapshots__/HomeDetails.spec.tsx.snap
deleted file mode 100644
index 442b7f441fad703f435ab5abe9ca82a5ae6fccb7..0000000000000000000000000000000000000000
--- a/src/components/Home/__snapshots__/HomeDetails.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HomeIndicators component should be rendered correctly 1`] = `<React.Fragment />`;
diff --git a/src/components/HomeCards/AddKonnectorCard.spec.tsx b/src/components/HomeCards/AddKonnectorCard.spec.tsx
index 54e4d6c5cf031300035ecaa80adfc23947daf86a..343bce53e05e565d7d4c152eadd518e1a8842b8c 100644
--- a/src/components/HomeCards/AddKonnectorCard.spec.tsx
+++ b/src/components/HomeCards/AddKonnectorCard.spec.tsx
@@ -1,13 +1,9 @@
import React from 'react'
import { shallow } from 'enzyme'
-import * as reactRedux from 'react-redux'
-import { globalStateData } from '../../../test/__mocks__/globalStateData.mock'
-import { TimeStep } from 'enum/timeStep.enum'
-import FluidCard from './FluidCard'
import { FluidType } from 'enum/fluid.enum'
import AddKonnectorCard from './AddKonnectorCard'
-import { FluidStatus } from 'models'
-import { DateTime } from 'luxon'
+
+import { fluidStatusData } from '../../../test/__mocks__/fluidStatusData.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -21,31 +17,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
describe('AddKonnectorCard component', () => {
it('should be rendered correctly with water connexion', () => {
- const waterFluidStatus: FluidStatus = {
- fluidType: FluidType.WATER,
- status: 1,
- lastDataDate: DateTime.local().setZone('utc', {
- keepLocalTime: true,
- }),
- connection: {
- shouldLaunchKonnector: false,
- account: null,
- isUpdating: false,
- trigger: null,
- triggerState: null,
- konnector: null,
- konnectorConfig: {
- name: '',
- oauth: false,
- slug: '',
- siteLink: '',
- },
- },
- }
const component = shallow(
<AddKonnectorCard
fluidType={FluidType.ELECTRICITY}
- fluidStatus={waterFluidStatus}
+ fluidStatus={fluidStatusData[0]}
/>
).getElement()
expect(component).toMatchSnapshot()
diff --git a/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap b/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
index 58d1e5e32c949a1bbaae3f626fb3e355f7fe81dc..b4b938c7dba81659b77e4cb231475ebe14b39eeb 100644
--- a/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
+++ b/src/components/HomeCards/__snapshots__/AddKonnectorCard.spec.tsx.snap
@@ -3,7 +3,7 @@
exports[`AddKonnectorCard component should be rendered correctly with water connexion 1`] = `
<ForwardRef
className="fluidcard-link"
- to="/options"
+ to="/options/0"
>
<StyledCard
className="fluidcard-content add-konnector-card"
diff --git a/src/components/SingleFluid/SingleFluidView.spec.tsx b/src/components/SingleFluid/SingleFluidView.spec.tsx
index aef9300c80e8539b32cb9c61e52488483f7d36f7..0e738a28682cd16a02b2e9eab4042e1284c797d4 100644
--- a/src/components/SingleFluid/SingleFluidView.spec.tsx
+++ b/src/components/SingleFluid/SingleFluidView.spec.tsx
@@ -1,26 +1,72 @@
import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../test/__mocks__/store'
import SingleFluidView from 'components/SingleFluid/SingleFluidView'
import { FluidType } from 'enum/fluid.enum'
-import { mockInitialChartState } from '../../../test/__mocks__/store'
+import { TimeStep } from 'enum/timeStep.enum'
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
- useI18n: jest.fn().mockResolvedValue({
- t: (str: string) => str,
- }),
-}))
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+jest.mock('components/Header/CozyBar', () => 'CozyBar')
+jest.mock('components/Header/Header', () => 'Header')
+jest.mock('components/DateNavigator/DateNavigator', () => 'DateNavigator')
+jest.mock('components/HomeCards/FluidCard', () => 'FluidCard')
+jest.mock('components/Home/ConsumptionDetails', () => 'ConsumptionDetails')
-const mockUseSelector = mockInitialChartState
-jest.mock('react-redux', () => ({
- useSelector: jest.fn().mockResolvedValue(mockUseSelector),
- useDispatch: () => jest.fn(),
-}))
+const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
+const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
describe('SingleFluidView component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ useDispatchSpy.mockClear()
+ })
+
it('should be rendered correctly', () => {
- const component = shallow(
- <SingleFluidView fluidTypes={[FluidType.ELECTRICITY]} />
- ).getElement()
- expect(component).toMatchSnapshot()
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: false,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <SingleFluidView fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ expect(wrapper.find('CozyBar')).toBeTruthy()
+ expect(wrapper.find('Header')).toBeTruthy()
+ expect(wrapper.find('DateNavigator')).toBeTruthy()
+ expect(wrapper.find('FluidCard')).toBeTruthy()
+ expect(wrapper.find('ConsumptionDetails')).toBeTruthy()
+ })
+
+ it('should display a spinner', () => {
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: true,
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <SingleFluidView fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ expect(wrapper.find('CozyBar')).toBeTruthy()
+ expect(wrapper.find('Header')).toBeTruthy()
+ expect(wrapper.find('DateNavigator')).toBeTruthy()
+ expect(wrapper.find('StyledSpinner')).toBeTruthy()
})
})
diff --git a/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap b/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap
deleted file mode 100644
index fd3da7ab87ab731cef4e0d6d7a976ad885051a24..0000000000000000000000000000000000000000
--- a/src/components/SingleFluid/__snapshots__/SingleFluidView.spec.tsx.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SingleFluidView component should be rendered correctly 1`] = `
-<React.Fragment>
- <CozyBar
- displayBackArrow={true}
- titleKey="FLUID.ELECTRICITY.NAME"
- />
- <Header
- desktopTitleKey="FLUID.ELECTRICITY.NAME"
- displayBackArrow={true}
- setHeaderHeight={[Function]}
- >
- <ConsumptionNavigator
- fluidTypes={
- Array [
- 0,
- ]
- }
- handleClickTimeStep={[Function]}
- multiFluid={false}
- />
- </Header>
- <Content
- height={0}
- >
- <div
- className="content-view-loading"
- >
- <StyledSpinner
- fluidTypes={
- Array [
- 0,
- ]
- }
- size="5em"
- />
- </div>
- <div
- className="chart-indicator-none"
- >
- <FluidChart
- fluidTypes={
- Array [
- 0,
- ]
- }
- multiFluid={false}
- resetReferenceDate={false}
- setChartLoaded={[Function]}
- />
- <SingleFluidIndicators
- fluidTypes={
- Array [
- 0,
- ]
- }
- setIndicatorsLoaded={[Function]}
- />
- </div>
- </Content>
-</React.Fragment>
-`;
diff --git a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
index d91c36566cf77c5f86a868d7487502fdbb8024e1..d9081d89a11800c76e1a62949df5b38faf9e9ab2 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -12,6 +12,16 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { DateTime } from 'luxon'
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
diff --git a/src/services/timePeriod.service.ts b/src/services/timePeriod.service.ts
index 99e139f3c4aee5532b0cab24a44cc1720705e3dd..4765a787c91f353db6d955bbbcbb7e4cf470389f 100644
--- a/src/services/timePeriod.service.ts
+++ b/src/services/timePeriod.service.ts
@@ -164,7 +164,7 @@ export default class TimePeriodService {
keepLocalTime: true,
})
case TimeStep.WEEK:
- return DateTime.local(startDate.year, startDate.month, 1)
+ return DateTime.local(startDate.year, startDate.month, startDate.day)
.setZone('utc', {
keepLocalTime: true,
})
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index 4592dd601c0250f8bcfa10f6d9700fdcdac67ea6..4262cdc13855b4e937b5c58cbee436dfe15399af 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -388,49 +388,27 @@ describe('date utils', () => {
timePeriod,
TimeStep.HALF_AN_HOUR
)
- expect(result).toBe(' du 01/01')
+ expect(result).toBe('mercredi 01 janvier')
})
- describe('case WEEK', () => {
- it('it should not show "semaine"', () => {
- const result = convertDateToShortDateString(
- timePeriod,
- TimeStep.WEEK,
- true
- )
- expect(result).toBe(' du 01/01 au 29/12')
- })
-
- it('should show "semaine"', () => {
- const result = convertDateToShortDateString(timePeriod, TimeStep.WEEK)
- expect(result).toBe('semaine du 01/01 au 29/12')
- })
+ it('case WEEK', () => {
+ const result = convertDateToShortDateString(timePeriod, TimeStep.WEEK)
+ expect(result).toBe('du 01/01 au 29/12')
})
- describe('case DAY', () => {
- it('it should not show "semaine"', () => {
- const result = convertDateToShortDateString(
- timePeriod,
- TimeStep.DAY,
- true
- )
- expect(result).toBe(' du 01/01 au 29/12')
- })
-
- it('should show "semaine"', () => {
- const result = convertDateToShortDateString(timePeriod, TimeStep.DAY)
- expect(result).toBe('semaine du 01/01 au 29/12')
- })
+ it('case DAY', () => {
+ const result = convertDateToShortDateString(timePeriod, TimeStep.DAY)
+ expect(result).toBe('janvier 2020')
})
it('case MONTH', () => {
const result = convertDateToShortDateString(timePeriod, TimeStep.MONTH)
- expect(result).toBe(' du 01/2020')
+ expect(result).toBe('année 2020')
})
it('case YEAR', () => {
const result = convertDateToShortDateString(timePeriod, TimeStep.YEAR)
- expect(result).toBe(' de 2020')
+ expect(result).toBe('de 2020 à 2020')
})
})
})
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 8a5e8d973cffdb3494b3c95f4568de6b96559665..af0ebf91e8565a80d94f8a13e9a2f5c5e648d0d6 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -109,8 +109,7 @@ export const getLagDays = (fluidTypes: FluidType[]): number => {
export const convertDateToShortDateString = (
timeperiod: TimePeriod | null,
- timeStep: TimeStep,
- header = false
+ timeStep: TimeStep
): string => {
if (!timeperiod) return ''
switch (timeStep) {
@@ -118,8 +117,7 @@ export const convertDateToShortDateString = (
return timeperiod.startDate.setLocale('fr').toFormat('cccc dd LLLL')
case TimeStep.WEEK:
return (
- (!header ? 'semaine' : '') +
- ' du ' +
+ 'du ' +
timeperiod.startDate.toFormat('dd/MM') +
' au ' +
timeperiod.endDate.toFormat('dd/MM')
@@ -127,10 +125,10 @@ export const convertDateToShortDateString = (
case TimeStep.DAY:
return timeperiod.startDate.setLocale('fr').toFormat('LLLL yyyy')
case TimeStep.MONTH:
- return ' année ' + timeperiod.startDate.toFormat('y')
+ return 'année ' + timeperiod.startDate.toFormat('y')
case TimeStep.YEAR:
return (
- ' de ' +
+ 'de ' +
timeperiod.startDate.toFormat('y') +
' à ' +
timeperiod.endDate.toFormat('y')