Implements treemap chart visualizations using a declarative UI framework. Offers customization through data evaluation and layout measurement, allowing creation of detailed hierarchical visual representations.
Jetpack compose treemap chart implementation
Add this to your dependencies gradle block:
implementation "io.github.overpas:treemap-chart-compose:0.2.0"Every direct child of TreemapChart takes an area in proportion to its Modifier.weight. Put a
TreemapChart in another TreemapChart to make a group:
@Composable
fun MyChart() {
TreemapChart(Modifier.fillMaxSize()) {
TreemapChart(Modifier.weight(6.0)) {
SimpleTreemapItem(item = "4", modifier = Modifier.weight(4.0))
TreemapChart(Modifier.weight(2.0)) {
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
}
TreemapChart(Modifier.weight(3.0)) {
SimpleTreemapItem(item = "2", modifier = Modifier.weight(2.0))
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
}
@Composable
fun SimpleTreemapItem(
item: String,
modifier: Modifier = Modifier,
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier.border(1.dp, MaterialTheme.colors.onBackground),
) {
Text(
text = item,
textAlign = TextAlign.Center,
)
}
}The code above produces something like this:
CanvasTreemapChart draws all nodes of a Tree on one canvas. It creates no composable per node,
so use it for large trees or data that changes often. The nodes have no semantics and do not react
to input. Each node is drawn by a lambda, where size is the size of the node:
@Composable
fun MyCanvasChart(data: Tree<Double>) {
val borderColor = MaterialTheme.colors.onBackground
CanvasTreemapChart(
data = data,
evaluateItem = { it },
modifier = Modifier.fillMaxSize(),
) { node ->
drawRect(color = borderColor, style = Stroke(1.dp.toPx()))
}
}For Android Views, add the views module instead of the compose one:
implementation "io.github.overpas:treemap-chart-views:0.2.0"There are two ways to make a chart:
TreemapChartLayout places the views you add to it, in XML or in code. Use it when the chart
shape is fixed, for example written in XML.TreemapChartView builds the chart from a Tree. Use it when the data comes at runtime or
changes: call setData again for each new data set.Build the chart from a tree in code:
private val simpleTreeData = tree(10) {
node(6) {
node(4)
node(2) {
node(1)
node(1)
}
}
node(3) {
node(2)
node(1)
}
node(1)
}
findViewById<TreemapChartView>(R.id.chart).setData(simpleTreeData, Int::toDouble) { parent, item ->
TextView(parent.context).apply {
text = item.toString()
gravity = Gravity.CENTER
}
}Or write it in XML with nested TreemapChartLayouts, where each child sets its weight:
<by.overpass.treemapchart.views.TreemapChartLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="6"
app:layout_treemapWeight="6" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="4"
app:layout_treemapWeight="4" />
</by.overpass.treemapchart.views.TreemapChartLayout>Set measurer on TreemapChartView or TreemapChartLayout to change the layout algorithm.
For more advanced Kotlin Multiplatform samples check out the sample directory
Set the git hooks path to config/git-hooks to run detekt before each commit:
git config --local core.hooksPath config/git-hooks
Jetpack compose treemap chart implementation
Add this to your dependencies gradle block:
implementation "io.github.overpas:treemap-chart-compose:0.2.0"Every direct child of TreemapChart takes an area in proportion to its Modifier.weight. Put a
TreemapChart in another TreemapChart to make a group:
@Composable
fun MyChart() {
TreemapChart(Modifier.fillMaxSize()) {
TreemapChart(Modifier.weight(6.0)) {
SimpleTreemapItem(item = "4", modifier = Modifier.weight(4.0))
TreemapChart(Modifier.weight(2.0)) {
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
}
TreemapChart(Modifier.weight(3.0)) {
SimpleTreemapItem(item = "2", modifier = Modifier.weight(2.0))
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
SimpleTreemapItem(item = "1", modifier = Modifier.weight(1.0))
}
}
@Composable
fun SimpleTreemapItem(
item: String,
modifier: Modifier = Modifier,
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier.border(1.dp, MaterialTheme.colors.onBackground),
) {
Text(
text = item,
textAlign = TextAlign.Center,
)
}
}The code above produces something like this:
CanvasTreemapChart draws all nodes of a Tree on one canvas. It creates no composable per node,
so use it for large trees or data that changes often. The nodes have no semantics and do not react
to input. Each node is drawn by a lambda, where size is the size of the node:
@Composable
fun MyCanvasChart(data: Tree<Double>) {
val borderColor = MaterialTheme.colors.onBackground
CanvasTreemapChart(
data = data,
evaluateItem = { it },
modifier = Modifier.fillMaxSize(),
) { node ->
drawRect(color = borderColor, style = Stroke(1.dp.toPx()))
}
}For Android Views, add the views module instead of the compose one:
implementation "io.github.overpas:treemap-chart-views:0.2.0"There are two ways to make a chart:
TreemapChartLayout places the views you add to it, in XML or in code. Use it when the chart
shape is fixed, for example written in XML.TreemapChartView builds the chart from a Tree. Use it when the data comes at runtime or
changes: call setData again for each new data set.Build the chart from a tree in code:
private val simpleTreeData = tree(10) {
node(6) {
node(4)
node(2) {
node(1)
node(1)
}
}
node(3) {
node(2)
node(1)
}
node(1)
}
findViewById<TreemapChartView>(R.id.chart).setData(simpleTreeData, Int::toDouble) { parent, item ->
TextView(parent.context).apply {
text = item.toString()
gravity = Gravity.CENTER
}
}Or write it in XML with nested TreemapChartLayouts, where each child sets its weight:
<by.overpass.treemapchart.views.TreemapChartLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="6"
app:layout_treemapWeight="6" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="4"
app:layout_treemapWeight="4" />
</by.overpass.treemapchart.views.TreemapChartLayout>Set measurer on TreemapChartView or TreemapChartLayout to change the layout algorithm.
For more advanced Kotlin Multiplatform samples check out the sample directory
Set the git hooks path to config/git-hooks to run detekt before each commit:
git config --local core.hooksPath config/git-hooks