[Android, Kotlin] Chart를 Compose로 구현하기 (4)

이전 포스팅에서는 compose에서 calendar를 만들어서 Plan Screen의 UI를 구현해 보았다.

이번 포스팅에서는 필자가 compose로 chart를 만들면서 생겼던 일을 설명해 줄까 한다.

3일 동안의 공백 기한 중 2일을 차트 구현에 썼다 >:(

 

UI 설계는 어떻게 하였는가?

기존의 UI 설계는 차트가 있다는 것까지는 같지만 차트 위쪽에 dropdown menu를 만들어서 dropdown menu에 따라 chart의 형태(주간 통계 차트, 이번 주 통계 차트)가 변하게 만들려고 했다.

개쩌는 그림실력(?)

그림과는 다르게 현실에서는 아래의 공간이 많이 남았었다.(텍스트까지 만들었는데도)

그래서 UI를 약간 수정해서

주간 차트와 이번 주 차트를 스크롤해서 볼 수 있도록 구현하기로 했다.

 

그러면 UI 설계(?)를 끝냈으니 바로 만들러 가보자.

 

1. compose chart library

compose에서는 따로 차트 composable을 지원하지 않았다.

그래서 다른 개발자분들이 만들어 주신 라이브러리를 사용하기로 했다.

https://github.com/topics/jetpack-compose-charts

GitHub: Let’s build from here

아주 많은 차트 라이브러리들이 존재했다.

그중에서 나는 가장 위로 올라와 있는 vico 라이브러리를 사용하기로 했다.

사실 다른 차트 라이브러리 대부분 한 번씩은 사용해 보았으나 약간 부족한 부분이 있어서 vico 라이브러리를 사용하기로 했다.(역시 가장 위에 있는 건 이유가 있다!)

 

vico 라이브러리 깃허브

https://github.com/patrykandpatrick/vico

GitHub - patrykandpatrick/vico: A light and extensible chart library for Android.

그러면 바로 vico 라이브러리를 사용해 보자.

 

2. 차트 만들기

chart를 만들기 위해서는 먼저 gradle에 vico 라이브러리를 추가해 주도록 하자.(2023.10.19. 기준)

// compose chart
implementation("com.patrykandpatrick.vico:compose:1.12.0")
implementation("com.patrykandpatrick.vico:compose-m3:1.12.0")
implementation("com.patrykandpatrick.vico:core:1.12.0")
implementation("com.patrykandpatrick.vico:views:1.12.0")

라이브러리를 추가했으면, 바로 차트를 만들어보자.

 

vico chart의 종류에는 Line Chart, Column Chart, Composed Chart(혼합 차트) 이렇게 3가지의 종류가 있다.

아쉽게도 Pie Chart, Donut Chart는 지원하지 않는다.

 

3가지의 차트 사용법은 모두 다르니까 vico wiki를 통해 사용법을 찾아보도록 하자.(wiki의 도움이 꽤 쏠쏠했다. 영어 문서이긴 했지만)

필자는 Column Chart, Composed Chart를 사용했다.

https://patrykandpatrick.com/vico/wiki/

Introduction | Vico

 

먼저 만들어볼 차트는 이번 주의 일정 통계를 보여줄 차트를 만들어 보겠다.

먼저 Chart 틀을 먼저 생성해 준다.

Chart(
    modifier = Modifier
        .fillMaxWidth()
        .height(400.dp)
        .padding(horizontal = 15.dp, vertical = 5.dp),
        
        // 차트 속성 추가
)

vico의 Chart Composable은 매우 다양한 param을 지원한다.

vico chart params

그중 필자는 일부 param을 사용해서 차트를 구현했다.

필자가 사용한 차트 param을 순서대로 보여 주겠다.

1. chart

chart param은 차트의 종류를 설정하는 param이기에 꼭 설정해 주어야 하는 parameter이다.

chart = columnChart(
    columns = listOf(
        lineComponent(
            color = chartColumnColor,
            thickness = 5.dp,
            shape = Shapes.cutCornerShape(topRightPercent = 20, topLeftPercent = 20)
        )
    ),
    dataLabel = TextComponent.Builder().build(),
    axisValuesOverrider = AxisValuesOverrider.fixed(minY = 0f, maxY = maxYRange.toFloat())
),

필자는 column chart를 사용했다.

columnChart Composable 안의 parameter들의 역할을 설명하자면,

• columns: column chart(막대 차트)의 column(막대)의 기본적인 구성을 할 수 있다.(색상, 두께, radius 등등)
  type이 list이므로 listof을 사용했다. 그리고 lineComponent()를 사용해야 막대 구성이 편하다.
• dataLabel: 차트에 데이터를 텍스트로 보이는 역할을 한다(이해가 어려우면 아래의 사진을 참고하자.).
• axisValuesOverrider: 차트의 x축, y축의 최소/최댓값을 설정할 수 있다.(이것도 사진으로 보여주겠다.).

 

columns와 dataLabel을 적용한 column(막대)

axisValuesOverrider의 y축 최소를 0으로, 최대를 70으로 설정한 모습

 

2. chartModelProducer

chartModelProducer는 차트의 데이터를 설정해 주는 부분이다.

chartModelProducer = ChartEntryModelProducer(
    listOf(
        entryOf(x = 0f, y = totalPlanCount.toFloat()),
        entryOf(x = 1f, y = completedPlanCount.toFloat())
    )
),

chartModelProducer 부분에서 ChartEntryModelProducer()를 사용했는데, 차트 종류에 따라 바꿔야 한다.

list를 만들어서 원하는 만큼 데이터를 entryOf()을 이용해 만들어서 넣어 주도록 하자.

 

3. 축

축은 x축과 y축 설정을 같이 알아보겠다.

축 설정에서 축의 데이터 이름이랑 축의 두께, 색, 축 데이터 개수 설정 등등을 변경할 수 있다.

startAxis = rememberStartAxis(
    itemPlacer = AxisItemPlacer.Vertical.default(maxItemCount = maxYRange / 10 + 1)
),
bottomAxis = rememberBottomAxis(
    valueFormatter = { value, _ ->
        val xAxisLabelData = listOf("전체 일정", "완료한 일정")
        (xAxisLabelData[value.toInt()])
    }
),

startAxis는 y축이고, bottomAxis는 x축을 설정할 수 있다.

startAxis에서는 itemPlacer 파라미터를 이용해 축의 개수를 제한하는 로직을 작성했다.

bottomAxis에서는 valueFormatter를 이용해 축의 데이터 이름을 변경해 줄 수 있다.

 

4. runInitialAnimation

마지막으로 설정하는 부분은 처음에 차트가 만들어질 때, 발생하는 애니메이션을 설정하는 부분이다.

runInitialAnimation = true

애니메이션을 설정하고 싶으면 true로 설정하면 된다.

 

분량 관계상 ComposedChart 부분은 다음 포스팅에서 하도록 하겠다. ㅠ

 

3. 중간 구현 화면

 

아래에 일부 실루엣이 보이는데 무시하자(?)

 

정리

• compose로 만들 수 있는 유용한 차트 라이브러리는 많았는데 한국어로 되어있는 자료가 많이 없어서 제작하는데 많이 어려움을 겪었다.
• 차트를 만들 때, 모르는 것이 있으면 vico 라이브러리 wiki를 자주 이용해 보자. 큰 도움이 될 것이다.
• 다음 포스팅에 나머지 ComposedChart에 관한 포스팅을 해보도록 하겠다.
• 이 글을 보고 vico 라이브러리를 사용 중인 다른 개발자분들에게 도움이 되었으면 좋겠다 :)