Skip to content
Snippets Groups Projects
Commit af6d1088 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch 'update-placeholder-bars' into 'dev'

chore: follow-up placeholder bars

See merge request !990
parents d35ef879 0e69d403
No related branches found
No related tags found
2 merge requests!990chore: follow-up placeholder bars,!9702.6 Release
......@@ -4,7 +4,7 @@ import { DateTime } from 'luxon'
import React from 'react'
import { Provider } from 'react-redux'
import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import ElecHalfHourChart from './ElecHalfHourChart'
jest.mock('services/dateChart.service', () => {
......@@ -20,6 +20,7 @@ describe('ElecHalfHourChart component', () => {
zone: 'utc',
}),
},
global: mockGlobalState,
})
it('should be rendered correctly', () => {
const wrapper = mount(
......
......@@ -6,7 +6,7 @@ import React from 'react'
import { Provider } from 'react-redux'
import * as chartActions from 'store/chart/chart.slice'
import { graphData } from 'tests/__mocks__/chartData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
import Bar from './Bar'
const mockXScale: ScaleBand<string> = scaleBand()
......@@ -41,6 +41,7 @@ describe('Bar component test', () => {
zone: 'utc',
}),
},
global: mockGlobalState,
})
it('should correctly render Multifluid Bar', () => {
......
import { ScaleBand, ScaleLinear } from 'd3-scale'
import { detect } from 'detect-browser'
import { DataloadState, FluidType, TimeStep } from 'enums'
import { FluidType, TimeStep } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useEffect, useState } from 'react'
......@@ -14,10 +14,10 @@ import { useAppDispatch, useAppSelector } from 'store/hooks'
interface BarProps {
index: number
dataload: Dataload
compare: boolean
compareDataload: Dataload | null
fluidType: FluidType
timeStep: TimeStep
compare: boolean
xScale: ScaleBand<string>
yScale: ScaleLinear<number, number>
height: number
......@@ -32,10 +32,10 @@ interface BarProps {
const Bar = ({
index,
dataload,
compare,
compareDataload,
fluidType,
timeStep,
compare,
xScale,
yScale,
height,
......@@ -47,7 +47,10 @@ const Bar = ({
average,
}: BarProps) => {
const dispatch = useAppDispatch()
const { selectedDate } = useAppSelector(state => state.ecolyo.chart)
const {
chart: { selectedDate },
global: { fluidStatus },
} = useAppSelector(state => state.ecolyo)
const [clicked, setClicked] = useState(false)
const [animationEnded, setAnimationEnded] = useState(false)
const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
......@@ -127,6 +130,15 @@ const Bar = ({
return compare ? xScale.bandwidth() / 2 : xScale.bandwidth()
}
const lastDataDate =
fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
const dataMissingUpcoming = Boolean(
lastDataDate &&
dataload.date > lastDataDate &&
dataload.date < DateTime.local()
)
const topRoundedRect = (
x: number,
y: number,
......@@ -172,32 +184,31 @@ const Bar = ({
</g>
)}
{/* placeholder bar for upcoming values */}
{height > 0 &&
dataload.state === DataloadState.COMING &&
dataload.date < DateTime.local() && (
<g
transform={`translate(${xScaleValue}, ${yScaleValue})`}
className="barFill"
>
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop id="stop-color-1" offset="0%" />
<stop id="stop-color-2" offset="100%" />
</linearGradient>
</defs>
<path
d={topRoundedRect(
compare ? getBandWidth() : 0,
0,
weekdays ? 3 : getBandWidth(),
height - yScaleValue
)}
className={getBarClass()}
onClick={!weekdays ? handleClick : () => undefined}
onAnimationEnd={onAnimationEnd}
/>
</g>
)}
{height > 0 && dataMissingUpcoming && (
<g
transform={`translate(${xScaleValue}, ${yScaleValue})`}
className="barFill"
>
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop id="stop-color-1" offset="0%" />
<stop id="stop-color-2" offset="100%" />
</linearGradient>
</defs>
<path
d={topRoundedRect(
compare ? getBandWidth() : 0,
0,
weekdays ? 3 : getBandWidth(),
height - yScaleValue
)}
className={getBarClass()}
onClick={!weekdays ? handleClick : () => undefined}
onAnimationEnd={onAnimationEnd}
/>
</g>
)}
{/* hashed bars */}
{height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
<g
transform={`translate(${xScaleValue}, ${yScaleValue})`}
......@@ -258,6 +269,7 @@ const Bar = ({
height > 0 &&
dataload.value &&
dataload.value >= 0 && (
// default colored bar
<g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
<defs>
<linearGradient
......
......@@ -91,11 +91,11 @@ const BarChart = ({
/>
<g transform={`translate(${marginLeft},${marginTop})`}>
{chartData.actualData.map((d, index) => (
{chartData.actualData.map((data, index) => (
<Bar
key={index}
index={index}
dataload={d}
dataload={data}
compareDataload={
chartData.comparisonData?.[index]
? chartData.comparisonData[index]
......@@ -109,11 +109,9 @@ const BarChart = ({
height={getContentHeight()}
isSwitching={isSwitching}
isMultiMissingFluid={
d.state === DataloadState.AGGREGATED_WITH_EMPTY ||
d.state === DataloadState.AGGREGATED_WITH_COMING ||
d.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING
? true
: false
data.state === DataloadState.AGGREGATED_WITH_EMPTY ||
data.state === DataloadState.AGGREGATED_WITH_COMING ||
data.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING
}
clickable={clickable}
average={averageConsumption}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment