Skip to content

Commit

Permalink
[feat #12] 무드차트 화면 임시 디자인 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@seunghee17
seunghee17 committed May 17, 2024
1 parent 9e5fa13 commit 5e5499e
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 152 deletions.
6 changes: 6 additions & 0 deletions app/src/main/java/com/example/remind/data/model/graphScoreModel.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
package com.example.remind.data.model

data class graphScoreModel(
val score: Int,
val img: Int
)
8 changes: 8 additions & 0 deletions app/src/main/java/com/example/remind/data/repository/CalendarDataSource.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import androidx.annotation.RequiresApi
import com.example.remind.data.model.CalendarUiModel
import java.time.DayOfWeek
import java.time.LocalDate
import java.time.format.DateTimeFormatter
import java.time.temporal.ChronoUnit
import java.time.temporal.WeekFields
import java.util.Locale
Expand Down Expand Up @@ -42,6 +43,13 @@ class CalendarDataSource {
return "${year}년 ${month}월 ${weekOfYear}주차"
}

fun getDayForSearch(date: LocalDate): String {
val year = date.year
val month = date.monthValue
val date = date.dayOfMonth
return "${year}.${month}.${date}"
}

private fun toUiModel(
dateList: List<LocalDate>,
lastSelectedDate: LocalDate
Expand Down
142 changes: 5 additions & 137 deletions app/src/main/java/com/example/remind/feature/screens/patience/MedicineScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
Expand All @@ -20,9 +22,12 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.remind.R
import com.example.remind.core.designsystem.theme.Pretendard
import com.example.remind.core.designsystem.theme.RemindTheme
import com.jaikeerthick.composable_graphs.composables.line.LineGraph
import com.jaikeerthick.composable_graphs.composables.line.model.LineData
Expand All @@ -34,143 +39,6 @@ import com.jaikeerthick.composable_graphs.style.LabelPosition

@Composable
fun MedicineScreen() {
RemindTheme {
Box(
modifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
shape = RoundedCornerShape(12.dp),
color = RemindTheme.colors.grayscale_2
)
.padding(30.dp)
) {
Column(
modifier = Modifier
.align(Alignment.CenterStart)
.padding(top = 10.dp, bottom = 30.dp),
verticalArrangement = Arrangement.SpaceBetween
) {
ScoreEx()
}
Spacer(modifier = Modifier.width(25.dp))
GraphComponent(
modifier = Modifier
.align(Alignment.Center)
.padding(top = 10.dp, bottom = 30.dp, end = 40.dp)
)
}
}
}


//그래프 연습용
@Composable
fun GraphComponent(
modifier: Modifier = Modifier
){
val xAxisData = listOf("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat") // xAxisData : List<GraphData>, and GraphData accepts both Number and String types
val yAxisData = listOf(100, 75, 100, 25, 75, 50, 50)
val dataModel = mutableListOf<LineData>()
for(i in xAxisData.indices) {
val lineData = LineData(xAxisData[i], yAxisData[i])
dataModel.add(lineData)
}
Column() {
val style = LineGraphStyle(
visibility = LineGraphVisibility(
isXAxisLabelVisible = true,
isYAxisLabelVisible = false,
isCrossHairVisible = false
),
colors = LineGraphColors(
lineColor = RemindTheme.colors.main_7,
pointColor = RemindTheme.colors.black,
clickHighlightColor = Color.Red,
fillType = LineGraphFillType.Gradient(brush = Brush.verticalGradient(listOf(
RemindTheme.colors.main_7, RemindTheme.colors.white
)))
),
yAxisLabelPosition = LabelPosition.LEFT
)
LineGraph(
data = dataModel,
style = style,
onPointClick = {}
)
}

}




@Composable
fun ScoreEx(
modifier: Modifier = Modifier
) {
Column(
verticalArrangement = Arrangement.Center,
) {
Text(
text = "0",
style = TextStyle(
fontSize = 10.sp
)
)
Spacer(modifier = modifier.height(3.dp))
Image(
modifier = modifier.size(15.dp, 20.dp),
painter = painterResource(id = R.drawable.icadskfj),
contentDescription = null
)
Text(
text = "25",
style = TextStyle(
fontSize = 10.sp
)
)
Spacer(modifier = modifier.height(3.dp))
Image(
modifier = modifier.size(15.dp, 20.dp),
painter = painterResource(id = R.drawable.icadskfj),
contentDescription = null
)
Text(
text = "50",
style = TextStyle(
fontSize = 10.sp
)
)
Spacer(modifier = modifier.height(3.dp))
Image(
modifier = modifier.size(15.dp, 20.dp),
painter = painterResource(id = R.drawable.icadskfj),
contentDescription = null
)
Text(
text = "75",
style = TextStyle(
fontSize = 10.sp
)
)
Spacer(modifier = modifier.height(3.dp))
Image(
modifier = modifier.size(15.dp, 20.dp),
painter = painterResource(id = R.drawable.icadskfj),
contentDescription = null
)
Text(
text = "100",
style = TextStyle(
fontSize = 10.sp
)
)
Spacer(modifier = modifier.height(3.dp))
Image(
modifier = modifier.size(15.dp, 20.dp),
painter = painterResource(id = R.drawable.icadskfj),
contentDescription = null
)
}
}
141 changes: 133 additions & 8 deletions app/src/main/java/com/example/remind/feature/screens/patience/MoodChartScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,55 @@
package com.example.remind.feature.screens.patience

import android.content.Context
import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.remind.R
import com.example.remind.core.common.component.BasicButton
import com.example.remind.core.common.component.BasicTextButton
import com.example.remind.core.designsystem.theme.RemindTheme
import com.example.remind.data.model.graphScoreModel
import com.example.remind.data.repository.CalendarDataSource
import com.jaikeerthick.composable_graphs.composables.line.LineGraph
import com.jaikeerthick.composable_graphs.composables.line.model.LineData
import com.jaikeerthick.composable_graphs.composables.line.style.LineGraphColors
import com.jaikeerthick.composable_graphs.composables.line.style.LineGraphFillType
import com.jaikeerthick.composable_graphs.composables.line.style.LineGraphStyle
import com.jaikeerthick.composable_graphs.composables.line.style.LineGraphVisibility
import com.jaikeerthick.composable_graphs.style.LabelPosition
import java.time.LocalDate

@Composable
fun MoodChartScreen() {
val scrollState = rememberScrollState()
val graphYaxisList = listOf(
graphScoreModel(100, R.drawable.ic_verygood),
graphScoreModel(75, R.drawable.ic_good),
graphScoreModel(50, R.drawable.ic_normal),
graphScoreModel(25, R.drawable.ic_bad),
graphScoreModel(0, R.drawable.ic_terrible),
)
RemindTheme {
Column(
modifier = Modifier
Expand All @@ -50,7 +68,7 @@ fun MoodChartScreen() {
text = "17일째 연속으로 기록 중이에요! 파이팅:)",
textColor = RemindTheme.colors.slate_100,
onClick = { },
verticalPadding = 6.dp,
verticalPadding = 7.dp,
enable = false
)
Spacer(modifier = Modifier.height(12.dp))
Expand All @@ -60,19 +78,126 @@ fun MoodChartScreen() {
)
Spacer(modifier = Modifier.height(8.dp))
BasicButton(
text = "기록 확인",
modifier = Modifier.fillMaxWidth(),
text = "${showSelectDate()} 기록 확인",
RoundedCorner = 12.dp,
backgroundColor = RemindTheme.colors.main_6,
textColor = RemindTheme.colors.white,
verticalPadding = 18.dp,
onClick = { },
textStyle = RemindTheme.typography.b3Bold
)
Spacer(modifier = Modifier.height(8.dp))
Box(
modifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
shape = RoundedCornerShape(12.dp),
color = RemindTheme.colors.grayscale_2
)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center)
.padding(start = 7.dp, end = 10.dp)
) {
Column(
modifier = Modifier,
verticalArrangement = Arrangement.SpaceEvenly
) {
for(i in 0..4) {
ScoreList(data = graphYaxisList.get(i))
}
}
Spacer(modifier = Modifier.width(25.dp))
GraphComponent()
}
}
Text(
modifier = Modifier.padding(top = 20.dp),
text = stringResource(id = R.string.기분별_활동_차트),
style = RemindTheme.typography.b1Bold.copy(color = RemindTheme.colors.text)
)
Text(
modifier = Modifier.padding(top = 3.dp),
text = stringResource(id = R.string.무엇을_할_때_기분이_좋은지_확인),
style = RemindTheme.typography.b2Medium.copy(color = RemindTheme.colors.grayscale_3)
)
}
}
}


//api연결후 수정 필요함
@Composable
fun GraphComponent(
modifier: Modifier = Modifier
){
val xAxisData = listOf("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat")
val yAxisData = listOf(100, 75, 100, 25, 75, 50, 50)
val dataModel = mutableListOf<LineData>()
for(i in xAxisData.indices) {
val lineData = LineData(xAxisData[i], yAxisData[i])
dataModel.add(lineData)
}
Column(
modifier = modifier.padding(top = 20.dp, bottom = 20.dp)
) {
val style = LineGraphStyle(
visibility = LineGraphVisibility(
isXAxisLabelVisible = true,
isYAxisLabelVisible = false,
isCrossHairVisible = false
),
colors = LineGraphColors(
lineColor = RemindTheme.colors.main_7,
pointColor = RemindTheme.colors.main_7,
clickHighlightColor = RemindTheme.colors.main_6,
fillType = LineGraphFillType.Gradient(brush = Brush.verticalGradient(listOf(
RemindTheme.colors.main_6.copy(alpha = 0.63f), RemindTheme.colors.white
)))
),
yAxisLabelPosition = LabelPosition.LEFT
)
LineGraph(
data = dataModel,
style = style,
onPointClick = {}
)
}

}

@Composable
fun ScoreList(
modifier: Modifier = Modifier,
data: graphScoreModel
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
modifier = modifier.size(15.dp, 15.dp),
painter = painterResource(id = data.img),
contentDescription = null
)
Spacer(modifier = modifier.height(1.dp))
Text(
text = data.score.toString(),
style = RemindTheme.typography.c2Medium.copy(color = RemindTheme.colors.text)
)
}
}

fun showSelectDate(): String {
val dataSource = CalendarDataSource()
val result = dataSource.getDayForSearch(LocalDate.now())
return result
}


@Preview
@Composable
fun ChartPreview() {
Expand Down
Loading

0 comments on commit 5e5499e

Please sign in to comment.