Skip to content

πŸŒ‹ Heatmap(Meko, Mekko) charts created in an optimized way, fully customizable for Android. Support only Jetpack Compose.

Notifications You must be signed in to change notification settings

taewooyo/volcano

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Oct 23, 2024
Nov 2, 2023
Apr 17, 2024
Apr 17, 2024
Jan 29, 2025
Nov 4, 2023
Nov 3, 2023
Apr 17, 2024
Apr 17, 2024
Nov 2, 2023
Nov 2, 2023
Apr 17, 2024
Apr 17, 2024
Nov 4, 2023
Dec 20, 2024
Jul 11, 2024
Nov 2, 2023
Nov 3, 2023

Repository files navigation

Volcano


πŸŒ‹ Heatmap charts created in an optimized way, fully customizable for Android.


Volcano in Jetpack Compose

If you want to use Volcano in your Jetpack Compose project, check out the Volcano in Jetpack Compose guidelines.

How to Use

val totalValue = dummyData.sumOf { it.value }
val dividedDummyData = dummyData.groupBy { it.type }
val volcano = root {
  name { null }
  weight { totalValue }
  sections {
    dividedDummyData.toList().forEach { (type, items) ->
      section {
        name { type.name }
        weight { items.sumOf { it.value } }
        elements {
          items.forEach { hotIssue ->
            element {
              name { hotIssue.name }
              weight { hotIssue.value }
              percentage { (hotIssue.oldValue / hotIssue.value) * 100 }
              color { getColor((hotIssue.oldValue / hotIssue.value) * 100).toLong() }
            }
          }
        }
      }
    }
  }
}

Create Volcano with Kotlin DSL

We can also create an instance of the Volcano with the Kotlin DSL.

Volcano in Jetpack Compose

Volcano allows you to display heatmap chart in Jetpack Compose easily.

Maven Central Maven Central

Add the dependency below to your module's build.gradle file

dependencies {
    implementation "io.github.taewooyo:volcano:${version}"
    implementation "io.github.taewooyo:volcano-compose:${version}"
}

Volcano Composable

You can display heatmap with Volcano composable function and Builder like the below:

val totalValue = dummyData.sumOf { it.value }
val dividedDummyData = dummyData.groupBy { it.type }
val volcano = root {
  name { null }
  weight { totalValue }
  sections {
    dividedDummyData.toList().forEach { (type, items) ->
      section {
        name { type.name }
        weight { items.sumOf { it.value } }
        elements {
          items.forEach { hotIssue ->
            element {
              name { hotIssue.name }
              weight { hotIssue.value }
              percentage { (hotIssue.oldValue / hotIssue.value) * 100 }
              color { getColor((hotIssue.oldValue / hotIssue.value) * 100).toLong() }
            }
          }
        }
      }
    }
  }
}

Volcano(
  modifier = Modifier,
  items = VolcanoBuilder.build(volcano),
  onClickSection = {},
  onClickElement = {},
  selectedBorderColor = Color.Black,
  selectedItem = null,
  showRateText = true,
)

License

Copyright 2023 taewooyo

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.