From 86d2cf9ba12bf0efd83efa762114986bb1fdacfb Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 30 Oct 2024 13:39:58 +0100
Subject: [PATCH] chore(ui): adjust analysis & few styles
---
.../Analysis/TotalAnalysisChart/PieChart.tsx | 10 +++++++---
.../Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx | 5 +++--
.../__snapshots__/TotalAnalysisChart.spec.tsx.snap | 3 ++-
src/components/Analysis/monthlyanalysis.scss | 2 +-
.../Consumption/FluidButtons/fluidButtons.scss | 2 +-
.../Ecogesture/EcogestureCard/ecogestureCard.scss | 1 +
src/components/theme.ts | 1 +
7 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/src/components/Analysis/TotalAnalysisChart/PieChart.tsx b/src/components/Analysis/TotalAnalysisChart/PieChart.tsx
index 12b27e060..909646b08 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 3c4192f52..b1b96f2a4 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 ad0cf7f8c..2d3ef40fe 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 46ffabeea..8ca80974c 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 2ecdc2949..b9e6690ab 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 e03262eb6..25d51f43b 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 d36b1b1fc..7d0918ba0 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,
--
GitLab