Skip to content

Commit

Permalink
adjust dashboard reponsive layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Janderson Souza Matias authored and Janderson Souza Matias committed Dec 22, 2023
1 parent f34dba2 commit 601bafc
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 90 deletions.
2 changes: 1 addition & 1 deletion src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const Navbar: React.FC = () => {
>
<HStack w="full" justifyContent="space-between">
<HamburgerIcon w={8} h={8} mx="24px" onClick={() => setOpen(!open)} cursor="pointer" maxW="180px" />
<Image mx="auto" src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
<Image mx="auto" src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" h="40px" />
<Box w="72px" />
</HStack>
{menu}
Expand Down
33 changes: 19 additions & 14 deletions src/pages/Dashboard/components/DoughnutGraph/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Center, HStack, Text, VStack } from '@chakra-ui/react';
import { Box, Center, Flex, HStack, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
import { Chart as ChartJS, ChartData, ArcElement, Tooltip, LabelItem } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

Expand All @@ -11,23 +11,17 @@ type Props = {
label?: string;
values: number[];
labels?: string[];
direction?: 'row' | 'column';
};

const COLORS = ['#69D6C7', '#4C9AF7', '#6A5CE2', '#A2CF57', '#D96684'];

export const DoughnutGraph: React.FC<Props> = ({ showLegend, values, label, subTitle, title, labels }) => {
export const DoughnutGraph: React.FC<Props> = ({ showLegend, values, label, subTitle, title, labels, direction }) => {
const isMobile = useBreakpointValue({ base: true, md: false });

return (
<VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
{showLegend && (
<VStack>
{labels?.map((item, index) => (
<HStack key={item} w="100%">
<Box bg={COLORS[index]} w="20px" h="20px" /> <Text>{item}</Text>
</HStack>
))}
</VStack>
)}
<Center position="relative">
<Flex direction={isMobile ? 'column' : direction} p="16px" bg="#F2F4F7" borderRadius="16px" w="full">
<Center position="relative" maxW="200px" m="auto">
<Doughnut
data={{
labels,
Expand Down Expand Up @@ -61,11 +55,22 @@ export const DoughnutGraph: React.FC<Props> = ({ showLegend, values, label, subT
</VStack>
)}
</Center>

{showLegend && (
<VStack my="auto">
{labels?.map((item, index) => (
<HStack key={item} w="100%">
<Box bg={COLORS[index]} w="20px" h="20px" /> <Text>{item}</Text>
</HStack>
))}
</VStack>
)}

{label && (
<Text mt="16px" textAlign="center" color="#111417">
{label}
</Text>
)}
</VStack>
</Flex>
);
};
4 changes: 2 additions & 2 deletions src/pages/Dashboard/components/SpeedometerGraph/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export const SpeedometerGraph: React.FC<Props> = ({ maxValue, value, label }) =>
};

return (
<VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
<Center position="relative">
<VStack p="16px" bg="#F2F4F7" borderRadius="16px" w="full">
<Center position="relative" maxW="200px" m="auto">
<Doughnut
data={coachingSessionPerTeacher}
options={{ radius: 100, cutout: '80%' }}
Expand Down
143 changes: 71 additions & 72 deletions src/pages/Dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,18 @@ const DashboardPage: React.FC = () => {
};

return (
<VStack mx="auto" minH="100vh" maxW="1200px" position="relative" overflow="scroll" alignItems="flex-start" p="56px">
<Flex mb="20px" ml={'-12px'} flexDir={isMobile ? 'column' : 'row'} w="full">
<VStack mx="auto" w="full" minH="100vh" maxW="1200px" position="relative" p="56px" alignItems="flex-start">
<Flex mb="20px" flexDir={isMobile ? 'column' : 'row'} w="full">
<Flex flex={1}>
<RegionSelect direction="row" level={0} onSelect={handleRegion} />
</Flex>
<Flex flex={1} maxW="220px" ml="12px">
<Flex
flex={1}
ml={isMobile ? 0 : '12px'}
mt={isMobile ? '12px' : 0}
maxW={isMobile ? undefined : '220px'}
w="full"
>
<DataRangePicker onChange={handleChangeDateRange} />
</Flex>
</Flex>
Expand All @@ -76,74 +82,71 @@ const DashboardPage: React.FC = () => {
</Center>
) : (
<>
<Flex flexDir={isMobile ? 'column' : 'row'} w="full" gap="16px" mb="56px" alignItems="stretch">
<VStack flex={3} gap="16px" alignItems="stretch">
<Text color="#111417" fontSize="24px" fontWeight={600}>
{t('dashboard.engagement.title')}
</Text>
<Text color="#111417" fontSize="16px" lineHeight="24px">
{t('dashboard.engagement.description')}
</Text>
<HStack gap="16px" alignItems="stretch">
<CardValue
label={t('dashboard.engagement.teachers-coached')}
value={dashboard.engagement.teachersCoached}
/>
<CardValue
label={t('dashboard.engagement.active-coaches')}
value={dashboard.engagement.activeCoaches}
/>
<CardValue
label={t('dashboard.engagement.coaching-sessions')}
value={dashboard.engagement.coachingSessions}
/>
</HStack>
<HStack gap="16px" alignItems="stretch">
<SpeedometerGraph
label={t('dashboard.engagement.coaching-sessions-per-teacher-over-last-three-months')}
value={dashboard.engagement.coachingSessionPerTeacher}
maxValue={dashboard.engagement.coachingSessionPerTeacherGoal}
/>
<DoughnutGraph
labels={[
t('dashboard.engagement.completed-a-second-coach-session'),
'Without a second coach sessions',
]}
values={[
dashboard.engagement.teacherThatCompletedSecondSession,
dashboard.engagement.teachersCoached - dashboard.engagement.teacherThatCompletedSecondSession,
]}
label={t('dashboard.engagement.completed-a-second-coach-session') || ''}
title={
(dashboard.engagement.teachersCoached
? (dashboard.engagement.teacherThatCompletedSecondSession /
dashboard.engagement.teachersCoached) *
100
: 0
).toFixed(0) + '%'
}
subTitle="Of teachers"
/>
</HStack>
</VStack>

<VStack flex={2} alignItems="stretch">
<Text color="#111417" fontSize="24px" fontWeight={600}>
{t('dashboard.targeted-improvement-areas.title')}
</Text>
<Text color="#111417" fontSize="16px" lineHeight="24px">
{t('dashboard.targeted-improvement-areas.description')}
</Text>

<VStack gap="16px" w="full" alignItems="flex-start">
<Text color="#111417" fontSize="24px" fontWeight={600}>
{t('dashboard.engagement.title')}
</Text>
<Text color="#111417" fontSize="16px" lineHeight="24px">
{t('dashboard.engagement.description')}
</Text>
<HStack gap="16px" alignItems="stretch" w="full">
<CardValue
label={t('dashboard.engagement.teachers-coached')}
value={dashboard.engagement.teachersCoached}
/>
<CardValue label={t('dashboard.engagement.active-coaches')} value={dashboard.engagement.activeCoaches} />
<CardValue
label={t('dashboard.engagement.coaching-sessions')}
value={dashboard.engagement.coachingSessions}
/>
<CardValue
label={t('dashboard.teachers-did-not-have-a-feedback-session')}
value={selected.data.teacherWithoutFeedback}
/>
</HStack>
<HStack gap="16px" w="full">
<SpeedometerGraph
label={t('dashboard.engagement.coaching-sessions-per-teacher-over-last-three-months')}
value={dashboard.engagement.coachingSessionPerTeacher}
maxValue={dashboard.engagement.coachingSessionPerTeacherGoal}
/>
<DoughnutGraph
showLegend={true}
labels={dashboard.teachingPractices.map((item) => item.name)}
values={dashboard.teachingPractices.map((item) => item.data.teachers)}
direction="column"
labels={[t('dashboard.engagement.completed-a-second-coach-session'), 'Without a second coach sessions']}
values={[
dashboard.engagement.teacherThatCompletedSecondSession,
dashboard.engagement.teachersCoached - dashboard.engagement.teacherThatCompletedSecondSession,
]}
label={t('dashboard.engagement.completed-a-second-coach-session') || ''}
title={
(dashboard.engagement.teachersCoached
? (dashboard.engagement.teacherThatCompletedSecondSession / dashboard.engagement.teachersCoached) *
100
: 0
).toFixed(0) + '%'
}
subTitle="Of teachers"
/>
</VStack>
</Flex>
</HStack>
</VStack>

<VStack w="full" alignItems="flex-start" my="24px">
<Text color="#111417" fontSize="24px" fontWeight={600}>
{t('dashboard.targeted-improvement-areas.title')}
</Text>
<Text color="#111417" fontSize="16px" lineHeight="24px" mb="8px">
{t('dashboard.targeted-improvement-areas.description')}
</Text>

<DoughnutGraph
direction="row"
showLegend={true}
labels={dashboard.teachingPractices.map((item) => item.name)}
values={dashboard.teachingPractices.map((item) => item.data.teachers)}
/>
</VStack>

<Text mb="8px" color="#111417" fontWeight={500} fontSize={'16px'}>
<Text mb="8px" color="#111417" fontWeight={500} fontSize={'16px'} mt="24px">
{t('dashboard.select-teaching-practices-to-show')}
</Text>

Expand Down Expand Up @@ -200,10 +203,6 @@ const DashboardPage: React.FC = () => {
label={t('dashboard.teachers-and-coaches-chose-to-work-on-improving-this-practice')}
value={selected.data.teachers}
/>
<CardValue
label={t('dashboard.teachers-did-not-have-a-feedback-session')}
value={selected.data.teacherWithoutFeedback}
/>
</HStack>

<VStack justifyContent="center" flex={2} alignItems="center" bg="#F2F4F7" borderRadius="16px" p={'32px'}>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Schools/SchoolForm/RegionSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const RegionSelect: React.FC<Props> = ({ level, direction, region, onSelect, onC
display="flex"
flexDir={direction}
mt={direction === 'column' ? '12px' : 0}
ml={direction === 'row' ? '12px' : 0}
ml={direction === 'row' ? (level === 0 ? 0 : '12px') : 0}
w="full"
>
<VStack w="full" alignItems="flex-start">
Expand Down

0 comments on commit 601bafc

Please sign in to comment.