jetpack-compose gragh 1

OwlSuri·2023년 2월 1일

android jetpack-compose로 앱 작업을 하던 중 라인그래프가 필요해서 jaikeerthick/Composable-Graphs를 사용하게 되었다.

https://github.com/jaikeerthick/Composable-Graphs

1. Gradle Setup

settings.gradle.kts > repositories 에 maven 추가

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
      
        // 그래프
        maven { url = uri("https://www.jitpack.io" ) } 
    }
}

이미지와 같이 추가했더니 에러가 나서 코드 부분으로 수정

build.gradle.kts(:app)에 implementation 추가

implementation("com.github.jaikeerthick:Composable-Graphs:v1.0")

하면

....

이렇게 설치 완료

2. 구현

bar 그래프를 사용할지, line 그래프를 사용할지 결정하고, 예제를 그대로 가져오면 된다.
line 그래프로 구현

Column() {
    val style = LineGraphStyle(
        visibility = LinearGraphVisibility(
            isHeaderVisible = true,
            isYAxisLabelVisible = false,
            isCrossHairVisible = true
        ),
        colors = LinearGraphColors(
            lineColor = GraphAccent2,
            pointColor = GraphAccent2,
            clickHighlightColor = PointHighlight2,
            fillGradient = Brush.verticalGradient(
                listOf(Gradient3, Gradient2)
            )
        )
    )

    LineGraph(
        xAxisData = listOf("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat").map {
            GraphData.String(it)
        }, // xAxisData : List<GraphData>, and GraphData accepts both Number and String types
        yAxisData = listOf(200, 40, 60, 450, 700, 30, 50),
        style = style
    )
}

이미지와 같은 그래프가 나온다.

3. 스타일

코드

Column() {
    val style = LineGraphStyle(
        visibility = LinearGraphVisibility(
            isHeaderVisible = true,
            isYAxisLabelVisible = true,
            isCrossHairVisible = true,
        ),
        colors = LinearGraphColors(
            lineColor = Color(0xFFff9f3d),
            pointColor = Color.Transparent,
            clickHighlightColor = Color(0xFFcfff9f3d),
            fillGradient = Brush.verticalGradient(
                0.2f to Color(0xFFcfff8912), 0.5f to Color(0xFF5cff9f3d)
            )
        ),
        height = 182.dp
    )

    LineGraph(
        xAxisData = listOf("11일", "12일", "13일", "14일", "15일", "16일", "17일", "18일").map {
            GraphData.String(it)
        }, // xAxisData : List<GraphData>, and GraphData accepts both Number and String types
        yAxisData = listOf(60, 150, 100, 50, 30, 120, 70, 80),
        style = style
    )
}