diff --git a/src/components/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx index 9d4a1781b5f528dcc9b7d727e0b09dbe4c000490..2600ebfff69e23a769a2159c4234fd4efb7f89ba 100644 --- a/src/components/Charts/AxisRight.tsx +++ b/src/components/Charts/AxisRight.tsx @@ -33,7 +33,13 @@ const AxisRight = ({ .ticks(4) .tickSize(-width) .tickSizeOuter(0) - .tickFormat(d => `${d} ${t('FLUID.' + fluidStyle + '.UNIT')}`) + .tickFormat(d => + d >= 1000 + ? `${d / 1000} ${t('FLUID.' + fluidStyle + '.MEGAUNIT')}` + : d === 0 + ? `${d}` + : `${d} ${t('FLUID.' + fluidStyle + '.UNIT')}` + ) ) selectAll('.tick text').attr('class', 'chart-ticks-y-text') select('.domain').remove() diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx index 05e6503dcb5edaaf9a0310d6292213ef0295a272..35affe2eb216884aa09ae00cf1a6b9e59c7f4351 100644 --- a/src/components/Charts/BarChart.tsx +++ b/src/components/Charts/BarChart.tsx @@ -144,13 +144,24 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { /> </g> )} - <AxisRight - fluidTypes={fluidTypes} - yScale={yScale} - width={width} - marginRight={marginRight} - marginTop={marginTop} - /> + {fluidTypes.length > 1 ? ( + <AxisRight + fluidTypes={fluidTypes} + yScale={yScale} + width={width} + marginRight={marginRight - 10} + marginTop={marginTop} + /> + ) : ( + <AxisRight + fluidTypes={fluidTypes} + yScale={yScale} + width={width} + marginRight={marginRight} + marginTop={marginTop} + /> + )} + <g transform={`translate(${marginLeft},${marginTop})`}> {chartData.actualData.map((d, index) => ( <Bar @@ -190,7 +201,7 @@ BarChart.defaultProps = { width: 600, height: 400, marginLeft: 10, - marginRight: 60, + marginRight: 50, marginTop: 20, marginBottom: 50, } diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx index 8be307fa6c98daf94885c3150f3aeeebebb90ae5..e958e7730113157185276a33a99db29abd556323 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx @@ -67,7 +67,6 @@ const DataloadConsumptionVisualizer = ({ } } }, [dataload, showCompare]) - return ( <div className="cv-load"> {isLoaded && hasData ? ( @@ -104,10 +103,22 @@ const DataloadConsumptionVisualizer = ({ <div className={`cv-load-value ${fluidStyle.toLowerCase()} chart-result`} > - {formatNumberValues(dataload.value)} - <span className="text-18-normal"> - {`${t('FLUID.' + fluidStyle + '.UNIT')}`} - </span> + {fluidStyle && + formatNumberValues(dataload.value, fluidStyle, true) >= 1000 ? ( + <> + {formatNumberValues(dataload.value, fluidStyle)} + <span className="text-18-normal"> + {`${t('FLUID.' + fluidStyle + '.MEGAUNIT')}`} + </span> + </> + ) : ( + <> + {formatNumberValues(dataload.value)} + <span className="text-18-normal"> + {`${t('FLUID.' + fluidStyle + '.UNIT')}`} + </span> + </> + )} </div> {!multiFluid ? ( <div diff --git a/src/locales/fr.json b/src/locales/fr.json index a4931fb5bcabe8c7d61cf7d2f990e8e1fb1373ff..2c1dec79ac4de177ca887a512ab1786135892c57 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -61,6 +61,7 @@ "NAME": "Electricité", "LABEL": "Électricité", "UNIT": "kWh", + "MEGAUNIT": "MWh", "RELEVANT_METRICS": [ { "BULB": "Vous avez consommé l'équivalent de 42 ampoules" }, { @@ -73,12 +74,14 @@ "NAME": "Eau", "LABEL": "Eau", "UNIT": "L", + "MEGAUNIT": "m³", "provider": "Eau du Grand Lyon" }, "GAS": { "NAME": "Gaz", "LABEL": "Gaz", "UNIT": "kWh", + "MEGAUNIT": "MWh", "provider": "GRDF" }, "MULTIFLUID": { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index d78737130fa9224854cf07c0c55bcd190ce7b676..298c3bbd9f614a3d645456c2ac4588eb82c36e4c 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -12,12 +12,22 @@ export function getFluidType(type: string) { return FluidType.ELECTRICITY } } -export function formatNumberValues(value: number) { +export function formatNumberValues( + value: number, + fluidStyle?: string, + toBeCompared = false +) { if (value || value === 0) { - return value.toLocaleString('fr-FR', { + const localeValue = value.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2, }) + const noSpaceValue = parseInt(localeValue.replace(/\s/g, '')) + if (toBeCompared) return noSpaceValue + if (fluidStyle && noSpaceValue >= 1000) { + const convertedValue = (noSpaceValue / 1000).toFixed(2).replace('.', ',') + return convertedValue + } else return localeValue } else { return '--,--' }