diff --git a/src/components/Analysis/TotalAnalysisChart/PieChart.tsx b/src/components/Analysis/TotalAnalysisChart/PieChart.tsx index 12b27e060930b5b345f1b0149ef4b53a144a3fc5..909646b087260b321b184a9078d0e03ae0a1f3b0 100644 --- a/src/components/Analysis/TotalAnalysisChart/PieChart.tsx +++ b/src/components/Analysis/TotalAnalysisChart/PieChart.tsx @@ -9,6 +9,7 @@ interface PieProps { dataloadValueDetailArray: DataloadValueDetail[] radius: number children: React.ReactNode + empty?: boolean } const PieChart = ({ @@ -17,6 +18,7 @@ const PieChart = ({ dataloadValueDetailArray, radius, children, + empty, }: PieProps) => { const ref = useRef(null) const createPie = d3.pie().sort(null) @@ -29,7 +31,9 @@ const PieChart = ({ const data = createPie(dataloadArray) const group = d3.select(ref.current) const groupWithData = group.selectAll('g.arc').data(data) - const colors = ['#D87B39', '#3A98EC', '#45D1B8'] + const colors = !empty + ? ['#D87B39', '#3A98EC', '#45D1B8', '#2F3139'] + : ['#2F3139'] const createArc: any = d3 .arc() @@ -41,7 +45,7 @@ const PieChart = ({ .enter() .append('g') .attr('class', 'arc') - .attr('filter', 'url(#glow)') + .attr('filter', !empty ? 'url(#glow)' : '') const path = groupWithUpdate .append('path') @@ -51,7 +55,7 @@ const PieChart = ({ .attr('class', 'arc') .attr('d', createArc) .attr('fill', (_d, i) => colors[i]) - }, [createPie, dataloadValueDetailArray, innerRadius, outerRadius]) + }, [createPie, dataloadValueDetailArray, empty, innerRadius, outerRadius]) return ( <div diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx index 3c4192f521c1a34048dfbb8d121bb7d970636c62..b1b96f2a4d9bffa8736434b62309a07fa7fa47b4 100644 --- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx +++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx @@ -4,7 +4,7 @@ import EstimatedConsumptionModal from 'components/ConsumptionVisualizer/Estimate import Loader from 'components/Loader/Loader' import { useClient } from 'cozy-client' import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' -import { FluidType, TimeStep } from 'enums' +import { DataloadState, FluidType, TimeStep } from 'enums' import { DataloadValueDetail, TimePeriod } from 'models' import React, { useEffect, useState } from 'react' import ConsumptionDataManager from 'services/consumption.service' @@ -61,10 +61,11 @@ const TotalAnalysisChart = ({ const emptyPieChart = () => ( <PieChart - dataloadValueDetailArray={[]} + dataloadValueDetailArray={[{ value: 100, state: DataloadState.EMPTY }]} radius={radius} innerRadius={innerRadius} outerRadius={outerRadius} + empty={true} > <div className="text-36-bold"> {formatNumberValues(0)} diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap index ad0cf7f8c7eda902ea4e49b0909679618617bc04..2d3ef40fea5a007e68bb24e56091fbc807579f18 100644 --- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap +++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap @@ -12,7 +12,8 @@ exports[`TotalAnalysisChart component should be rendered correctly 1`] = ` analysis_pie.total </div> <mock-piechart - dataloadvaluedetailarray="" + dataloadvaluedetailarray="[object Object]" + empty="true" innerradius="167.5" outerradius="187.5" radius="375" diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss index 46ffabeea32a78ecf69760eaac7d02d1eab980af..8ca80974c6fd745853de8cc1a902b43328ea88b8 100644 --- a/src/components/Analysis/monthlyanalysis.scss +++ b/src/components/Analysis/monthlyanalysis.scss @@ -5,7 +5,7 @@ flex-direction: column; align-items: center; padding: 1rem 1rem 1.5rem; - gap: 1rem; + gap: 24px; .analysis-content { max-width: 45.75rem; diff --git a/src/components/Consumption/FluidButtons/fluidButtons.scss b/src/components/Consumption/FluidButtons/fluidButtons.scss index 2ecdc294996ffd2899110380e0fe0c0ce6b3f4f4..b9e6690ab05bf4827db321dc2a4a37271547a0e2 100644 --- a/src/components/Consumption/FluidButtons/fluidButtons.scss +++ b/src/components/Consumption/FluidButtons/fluidButtons.scss @@ -1,7 +1,7 @@ @import 'src/styles/base/color'; .fluid-buttons { - padding-top: 0.5rem; + padding-top: 1rem; .content { display: flex; align-items: center; diff --git a/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss b/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss index e03262eb65886f09fb03490736b8204ee9979f3a..25d51f43b376be02920ceed75e9491619d598dc6 100644 --- a/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss +++ b/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss @@ -7,4 +7,5 @@ flex-direction: column; align-items: center; justify-content: space-around; + text-align: center; } diff --git a/src/components/theme.ts b/src/components/theme.ts index d36b1b1fcf6bae6117f59d0248bcc55022dd1060..7d0918ba010a309fe39b9e157b379ceedf8218e5 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -49,6 +49,7 @@ export const theme = createTheme({ width: '100%', border: '1px solid var(--grey-2)', backgroundColor: 'var(--grey-1)', + boxSizing: 'border-box', borderRadius: 43, padding: 8, gap: 12,