diff --git a/src/components/Analysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourChart.tsx
index 3d2c1990fe524c0b6b6b76e8cfc38d96851a2c90..e565155add84efc9dc3eee6ad9318884f5f7e506 100644
--- a/src/components/Analysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.tsx
@@ -19,9 +19,9 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
const [height, setHeight] = useState<number>(0)
const chartContainer = useRef<HTMLDivElement>(null)
const marginLeft = 10
- const marginRight = 10
- const marginTop = 20
- const marginBottom = 50
+ const marginRight = 60
+ const marginTop = 0
+ const marginBottom = 30
const getContentWidth = () => {
return width - marginLeft - marginRight
}
@@ -43,7 +43,7 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
)
)
.range([0, getContentWidth()])
- .padding(0.2)
+ .padding(0.1)
const yScale: ScaleLinear<number, number> = scaleLinear()
.domain([0, getMaxLoad()])
@@ -52,7 +52,7 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
useEffect(() => {
function handleResize() {
const maxWidth = 940
- const maxHeight = 200
+ const maxHeight = 170
const _width = chartContainer.current
? chartContainer.current.offsetWidth > maxWidth
? maxWidth
@@ -80,9 +80,8 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
width={width}
marginRight={marginRight}
marginTop={marginTop}
- isAnalysis={true}
/>
- <g transform={`translate(${10},${10})`}>
+ <g transform={`translate(${10},${0})`}>
{dataLoad.map((value, index) => {
return (
<Bar
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 02cfa8bca48d4c991fbeafdef5040fc8fb59bf77..9ce4cd90f3c0e38d3fceae44c5f4aaf3f57acd7e 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -136,7 +136,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
mockGetEnedisMonthlyAnalysisByDate.mockResolvedValueOnce(
mockEnedisMonthlyAnalysisArray
)
- mockAggregateValuesToDataLoad.mockResolvedValueOnce(
+ mockAggregateValuesToDataLoad.mockReturnValueOnce(
mockDataLoadEnedisAnalysis
)
mockGetPrices.mockResolvedValue(allLastFluidPrices[0])
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
index dbda249064ae79a0959e606111dc23eff2e7893e..a72ee05c9e9405d5d6ec9b2351a2aa59a8c73ee9 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -60,14 +60,20 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
const toggleOpenModal = useCallback(() => {
setOpenInfoModal(prev => !prev)
}, [])
- const getPowerChart = useCallback((): JSX.Element => {
+ const isDataFullyComplete = useCallback(monthDataloads => {
if (
monthDataloads &&
monthDataloads.weekend &&
monthDataloads.week &&
- monthDataloads.weekend[0] !== null &&
- monthDataloads.week[0] !== null
+ monthDataloads.weekend[0]?.value !== null &&
+ monthDataloads.week[0]?.value !== null
) {
+ return true
+ } else return false
+ }, [])
+
+ const getPowerChart = useCallback((): JSX.Element => {
+ if (monthDataloads && isDataFullyComplete(monthDataloads)) {
return (
<ElecHalfHourChart
dataLoad={isWeekend ? monthDataloads.weekend : monthDataloads.week}
@@ -77,7 +83,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
} else {
return <p className={`text-20-bold no_data`}>{t('analysis.no_data')}</p>
}
- }, [isWeekend, monthDataloads, t])
+ }, [isDataFullyComplete, isWeekend, monthDataloads, t])
useEffect(() => {
let subscribed = true
@@ -132,6 +138,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
}
}
getAllLastPrices()
+
return () => {
subscribed = false
}
@@ -187,7 +194,7 @@ const ElecHalfHourMonthlyAnalysis: React.FC<
{!isLoading && (
<>
{getPowerChart()}
- {enedisAnalysisValues && (
+ {enedisAnalysisValues && isDataFullyComplete(monthDataloads) && (
<div className="min-max">
<div className="container">
<Icon icon={MaxPowerIcon} size={40} className="minIcon" />
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 5fd55796f77f6f1cb91b218931ece226b2a9b85b..1e836d9ae8cffd24ddee784604c37e2c3019a2a5 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -380,142 +380,6 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
>
analysis.no_data
</p>
- <div
- className="min-max"
- >
- <div
- className="container"
- >
- <Icon
- className="minIcon"
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- className="minIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="minIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text"
- >
- <div
- className="min text-18-normal"
- >
- special_elec.maxPower
- </div>
- </div>
- <div
- className="value kvAval"
- >
- <div
- className="text-18-bold"
- >
- 2.0
- <span
- className="text-18-normal"
- >
- kVA
- </span>
- </div>
- </div>
- </div>
- <div
- className="container consomin"
- >
- <Icon
- className="minIcon"
- icon="test-file-stub"
- size={40}
- spin={false}
- >
- <Component
- className="minIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <svg
- className="minIcon styles__icon___23x3R"
- height={40}
- style={Object {}}
- width={40}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="text text-18-normal"
- >
- <div>
- special_elec.min
- </div>
- <div>
- special_elec.percentage
- </div>
- <div>
- special_elec.price
- </div>
- </div>
- <div
- className="value"
- >
- <div
- className="text-18-bold"
- >
- 3.0
- <span
- className="text-18-normal"
- >
- kWh
- </span>
- </div>
- <div
- className="text-18-bold"
- >
- ---
- <span
- className="text-18-normal"
- >
- %
- </span>
- </div>
- <div
- className="text-18-bold"
- >
- 0.4
- <span
- className="text-18-normal"
- >
- €
- </span>
- </div>
- </div>
- </div>
- <div
- className="showmodal"
- onClick={[Function]}
- >
- special_elec.showModal
- </div>
- </div>
<mock-elecinfomodal
handleCloseClick={[Function]}
open={false}
diff --git a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
index 0bf6cb51094b1d014c0657507fcfe2d01c81678b..8fcebce3b8f63d4dda175dbdc8ad4f6bef358b08 100644
--- a/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/elecHalfHourMonthlyAnalysis.scss
@@ -2,6 +2,7 @@
.special-elec-container {
color: white;
+
.elec-icon {
margin: auto;
display: block;
@@ -88,5 +89,6 @@
}
}
.graph-elec-half-hour {
- height: 13rem;
+ height: 12rem;
+ margin-top: 2rem;
}
diff --git a/src/components/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx
index 259eb53e50c92f46ce89dffde71b3b38e658907a..7afffbba9714c4f242e7ddb9dd71e5d22919ad85 100644
--- a/src/components/Charts/AxisRight.tsx
+++ b/src/components/Charts/AxisRight.tsx
@@ -11,7 +11,6 @@ interface AxisRightProps {
width: number
marginRight: number
marginTop: number
- isAnalysis?: boolean
}
const AxisRight = ({
@@ -20,7 +19,6 @@ const AxisRight = ({
width,
marginRight,
marginTop,
- isAnalysis,
}: AxisRightProps) => {
const { t } = useI18n()
const fluidStyle =
@@ -33,7 +31,7 @@ const AxisRight = ({
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
select(yAxisRef.current!).call(
axisRight(yScale)
- .ticks(isAnalysis ? 0 : 4)
+ .ticks(4)
.tickSize(-width)
.tickSizeOuter(0)
.tickFormat(d =>
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 0e259ed6e063c4c6c1c3954c13fa86ef778f5b36..dba5dc70b74347f67769045adb8861196ae445df 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -182,7 +182,7 @@ const Bar = ({
className="barContainer"
>
<rect
- onClick={handleClick}
+ onClick={!weekdays ? handleClick : () => {}}
x="0"
y="0"
width={showCompare ? getBandWidth() * 2 : getBandWidth()}
@@ -248,7 +248,7 @@ const Bar = ({
: 'url(#diagonalHatch)'
}
// className={isDuel ? 'bar-duel' : barClass}
- onClick={handleClick}
+ onClick={!weekdays ? handleClick : () => {}}
onAnimationEnd={onAnimationEnd}
/>
</g>
@@ -271,12 +271,12 @@ const Bar = ({
d={topRoundedRect(
showCompare ? getBandWidth() : 0,
0,
- getBandWidth(),
+ weekdays ? 3 : getBandWidth(),
height - yScaleValue
)}
fill="url(#gradient)"
className={isDuel ? 'bar-duel' : barClass}
- onClick={handleClick}
+ onClick={!weekdays ? handleClick : () => {}}
onAnimationEnd={onAnimationEnd}
/>
</g>