Skip to content

Commit

Permalink
feat: 🎨 implementation of regional consumption charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vini7Dev
Vini7Dev committed Jul 1, 2023
1 parent 7f5344f commit dac55fc
Show file tree
Hide file tree
Showing 6 changed files with 277 additions and 102 deletions.
6 changes: 3 additions & 3 deletions mobile/src/components/ConsumptionChart/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ interface ConsumptionMarking {

const DATE_GROUP_FOTMATS = {
perHour: { raw: 'yyyy-MM-dd HH:mm', toFormat: 'H', sufix: 'h' },
perDate: { raw: 'yyyy-MM-dd', toFormat: 'dd', sufix: 'd' },
perMonth: { raw: 'yyyy-MM', toFormat: 'MM', sufix: 'm' },
perDate: { raw: 'yyyy-MM-dd', toFormat: 'dd', sufix: '' },
perMonth: { raw: 'yyyy-MM', toFormat: 'MM', sufix: '' },
}

export const ConsumptionChart: React.FC<ConsumptionChartProps> = ({
Expand Down Expand Up @@ -86,7 +86,7 @@ export const ConsumptionChart: React.FC<ConsumptionChartProps> = ({

const { pastGroup, presentGroup } = groupedConsumptionMarkings

if (!pastGroup.length || !presentGroup.length) {
if (!pastGroup?.length || !presentGroup?.length) {
return <></>
}

Expand Down
81 changes: 30 additions & 51 deletions mobile/src/components/ConsumptionChartLabel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import React, { useCallback } from 'react'
import { ChartLabelContainer, ChartLabelItem, ChartLabelSquareColor, ChartLabelSquareText, ChartLabelTitle, ChartLabelTitleMargin } from './styles'
import React from 'react'

import {
ChartLabelContainer,
ChartLabelItem,
ChartLabelSquareColor,
ChartLabelSquareText,
ChartLabelTitle,
ChartLabelTitleMargin
} from './styles'
import { calculateMonetaryValueTotal } from '../../utils/calculateMonetaryValueTotal'
import { calculateConsumptionsTotal } from '../../utils/calculateConsumptionsTotal'

type CompareBy = 'YESTERDAY' | 'PAST_MONTH' | 'PAST_YEAR' | 'CUSTOM'

interface ConsumptionProps {
created_at_reference: Date
date_group: string
consumption: number
monetary_value: number
}

interface ConsumptionChartProps {
groupedConsumptionMarkings?: GroupedConsumptionMarkings
compareBy: CompareBy
Expand All @@ -31,46 +34,9 @@ export const ConsumptionChartLabel: React.FC<ConsumptionChartProps> = ({
groupedConsumptionMarkings = { pastGroup: [], presentGroup: [] },
compareBy,
}) => {
const calculateMonetaryValueTotal = useCallback((
consumptionsGroup: ConsumptionProps[],
reverse = false,
) => {
if (compareBy === 'PAST_YEAR') {
const { total: totalOfMoneraty } = consumptionsGroup.reduce((acc, cur) => {
return { total: acc.total + cur.monetary_value }
}, { total: 0 })

return (totalOfMoneraty / 100).toLocaleString('pt-br',{style: 'currency', currency: 'BRL'})
}

let lastConsumption = consumptionsGroup[0]

if (!lastConsumption) {
return 0
}

if (reverse) {
lastConsumption = consumptionsGroup[consumptionsGroup.length-1]
}

return (lastConsumption.monetary_value / 100).toLocaleString('pt-br',{style: 'currency', currency: 'BRL'})
}, [compareBy])

const calculateConsumptionsTotal = useCallback((
consumptionsGroup: ConsumptionProps[],
) => {
const { total: consumptionTotal } = consumptionsGroup.reduce((acc, cur) => {
return { total: acc.total + cur.consumption }
}, { total: 0 })

const result = compareBy === 'PAST_YEAR' ? consumptionTotal / 10 : consumptionTotal / 100

return `${result.toFixed(2).replace('.', ',')}/m³`
}, [compareBy])

const { pastGroup, presentGroup } = groupedConsumptionMarkings

if (!pastGroup.length || !presentGroup.length) {
if (!pastGroup?.length || !presentGroup?.length) {
return <></>
}

Expand All @@ -82,15 +48,21 @@ export const ConsumptionChartLabel: React.FC<ConsumptionChartProps> = ({
<ChartLabelSquareColor backgroundColor={'success'} />

<ChartLabelSquareText>
Ontem: {calculateConsumptionsTotal(pastGroup)}
Ontem: {calculateConsumptionsTotal({
consumptionsGroup: pastGroup,
compareBy,
})}
</ChartLabelSquareText>
</ChartLabelItem>

<ChartLabelItem>
<ChartLabelSquareColor backgroundColor={'info'} />

<ChartLabelSquareText>
Hoje: {' '} {calculateConsumptionsTotal(presentGroup)}
Hoje: {' '} {calculateConsumptionsTotal({
consumptionsGroup: presentGroup,
compareBy,
})}
</ChartLabelSquareText>
</ChartLabelItem>

Expand All @@ -102,15 +74,22 @@ export const ConsumptionChartLabel: React.FC<ConsumptionChartProps> = ({
<ChartLabelSquareColor backgroundColor={'success'} />

<ChartLabelSquareText>
Anterior: {calculateMonetaryValueTotal(pastGroup)}
Anterior: {calculateMonetaryValueTotal({
consumptionsGroup: pastGroup,
compareBy,
})}
</ChartLabelSquareText>
</ChartLabelItem>

<ChartLabelItem>
<ChartLabelSquareColor backgroundColor={'info'} />

<ChartLabelSquareText>
Atual: {' '} {calculateMonetaryValueTotal(presentGroup, true)}
Atual: {' '} {calculateMonetaryValueTotal({
consumptionsGroup: presentGroup,
reverse: true,
compareBy,
})}
</ChartLabelSquareText>
</ChartLabelItem>
</ChartLabelContainer>
Expand Down
204 changes: 158 additions & 46 deletions mobile/src/screens/RegionalConsumption/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useCallback, useEffect, useState } from 'react'

import {
ScreenScrollView,
Expand All @@ -8,80 +8,192 @@ import {
MapLabelContainer,
MapLabelItem,
MapLabelSquareColor,
MapLabelSquareText,
MapLabelSquareLabel,
CityMapTitle,
CityMapContainer,
MapLabelSquareValue,
MapLabelTitle,
} from './styles'
import { NavigationHeader } from '../../components/NavigationHeader'
import { CompareByOptions } from '../../components/CompareByOptions'
import { errorColor, infoColor, lightGray3, primaryColor, secondaryColor, successColor } from '../../styles/variables'
import { errorColor, lightGray3, primaryColor, secondaryColor, successColor } from '../../styles/variables'
import { api } from '../../services/api'
import { ConsumptionChart } from '../../components/ConsumptionChart'
import { ConsumptionChartLabel } from '../../components/ConsumptionChartLabel'

type CompareBy = 'YESTERDAY' | 'PAST_MONTH' | 'PAST_YEAR' | 'CUSTOM'

type Region = 'NORTH' | 'SOUTH' | 'EAST' | 'WEST' | 'CENTER'

interface GroupedConsumptionMarkings {
pastGroup: ConsumptionMarking[]
presentGroup: ConsumptionMarking[]
presentTotals: Totals
pastTotals: Totals
}

interface ConsumptionMarking {
created_at_reference: Date
date_group: string
consumption: number
monetary_value: number
}

interface Totals {
NORTH: Total
SOUTH: Total
EAST: Total
WEST: Total
CENTER: Total
}

interface Total {
consumption: number
monetary_value: number
}

const CityMap = require('../../../assets/cityMaps/franca-city-map.png')

export const RegionalConsumption: React.FC = () => {
const [compareBy, setCompareBy] = useState<CompareBy>('YESTERDAY')
const [groupedConsumptionMarkings, setGroupedConsumptionMarkings] = useState<GroupedConsumptionMarkings>({} as GroupedConsumptionMarkings)
const [isLoadingConsumptions, setIsLoadingConsumptions] = useState(false)

const getConsumptionValueTotalByRegion = useCallback((region: Region) => {
const presentRegionTotals = groupedConsumptionMarkings.presentTotals?.[region]
const pastRegionTotals = groupedConsumptionMarkings.pastTotals?.[region]

const presentConsumptionValueFormat = (
compareBy === 'PAST_YEAR'
? presentRegionTotals?.consumption / 10
: presentRegionTotals?.consumption / 100
).toFixed(2).replace('.', ',')

const pastConsumptionValueFormat = (
compareBy === 'PAST_YEAR'
? pastRegionTotals?.consumption / 10
: pastRegionTotals?.consumption / 100
).toFixed(2).replace('.', ',')

return `Antes: ${pastConsumptionValueFormat}/m³ → Atual: ${presentConsumptionValueFormat}/m³`
}, [compareBy, groupedConsumptionMarkings])

useEffect(() => {
const handleGetConsumptionMarkings = async () => {
setIsLoadingConsumptions(true)

const {
data: groupedConsumptionMarkingsResponse
} = await api.get<GroupedConsumptionMarkings>(
`/regional-consumption-markings?period_type=${compareBy}`
)

setGroupedConsumptionMarkings(groupedConsumptionMarkingsResponse)
setIsLoadingConsumptions(false)
}

handleGetConsumptionMarkings()
}, [compareBy])

const handleUpdateCompareBy = useCallback((value: CompareBy) => {
setCompareBy(value)
}, [])

return (
<ScreenContainer>
<NavigationHeader title="Consumo Reginonal" />

<ScreenScrollView>
<ScreenContent>
<CompareByOptions />
<CompareByOptions
onSelectCompareOption={handleUpdateCompareBy}
/>

{
!isLoadingConsumptions && (
<>
<ConsumptionChart
groupedConsumptionMarkings={groupedConsumptionMarkings}
compareBy={compareBy}
/>

<CityMapContainer>
<CityMapTitle>Mapa da cidade de Franca</CityMapTitle>
<ConsumptionChartLabel
groupedConsumptionMarkings={groupedConsumptionMarkings}
compareBy={compareBy}
/>

<CityMapImage source={CityMap} resizeMode="center" />
<CityMapContainer>
<CityMapTitle>Mapa da cidade de Franca</CityMapTitle>

<MapLabelContainer>
<MapLabelItem>
<MapLabelSquareColor
backgroundColor={infoColor}
/>
<CityMapImage source={CityMap} resizeMode="center" />

<MapLabelSquareText>Total</MapLabelSquareText>
</MapLabelItem>
<MapLabelContainer>
<MapLabelTitle>Consumo do intervalo</MapLabelTitle>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={primaryColor}
/>
<MapLabelItem>
<MapLabelSquareColor
backgroundColor={primaryColor}
/>

<MapLabelSquareText>Zona Central</MapLabelSquareText>
</MapLabelItem>
<MapLabelSquareLabel>Centro</MapLabelSquareLabel>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={secondaryColor}
/>
<MapLabelSquareValue>
{getConsumptionValueTotalByRegion('CENTER')}
</MapLabelSquareValue>
</MapLabelItem>

<MapLabelSquareText>Zona Norte</MapLabelSquareText>
</MapLabelItem>
<MapLabelItem>
<MapLabelSquareColor
backgroundColor={secondaryColor}
/>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={errorColor}
/>
<MapLabelSquareLabel>Norte</MapLabelSquareLabel>

<MapLabelSquareText>Zona Sul</MapLabelSquareText>
</MapLabelItem>
<MapLabelSquareValue>
{getConsumptionValueTotalByRegion('NORTH')}
</MapLabelSquareValue>
</MapLabelItem>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={lightGray3}
/>
<MapLabelItem>
<MapLabelSquareColor
backgroundColor={errorColor}
/>

<MapLabelSquareText>Zona Leste</MapLabelSquareText>
</MapLabelItem>
<MapLabelSquareLabel>Sul</MapLabelSquareLabel>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={successColor}
/>
<MapLabelSquareValue>
{getConsumptionValueTotalByRegion('SOUTH')}
</MapLabelSquareValue>
</MapLabelItem>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={lightGray3}
/>

<MapLabelSquareLabel>Leste</MapLabelSquareLabel>

<MapLabelSquareValue>
{getConsumptionValueTotalByRegion('EAST')}
</MapLabelSquareValue>
</MapLabelItem>

<MapLabelItem>
<MapLabelSquareColor
backgroundColor={successColor}
/>

<MapLabelSquareLabel>Oeste</MapLabelSquareLabel>

<MapLabelSquareText>Zona Oeste</MapLabelSquareText>
</MapLabelItem>
</MapLabelContainer>
</CityMapContainer>
<MapLabelSquareValue>
{getConsumptionValueTotalByRegion('WEST')}
</MapLabelSquareValue>
</MapLabelItem>
</MapLabelContainer>
</CityMapContainer>
</>
)
}
</ScreenContent>
</ScreenScrollView>
</ScreenContainer>
Expand Down
Loading

0 comments on commit dac55fc

Please sign in to comment.