feat(histogram): add histogram chart module and demo integration

README.md

@@ -70,6 +70,7 @@ commonMain.dependencies {
     implementation("io.github.dautovicharis:charts-line:<version>")
     implementation("io.github.dautovicharis:charts-pie:<version>")
     implementation("io.github.dautovicharis:charts-bar:<version>")
+    implementation("io.github.dautovicharis:charts-histogram:<version>")
     implementation("io.github.dautovicharis:charts-stacked-bar:<version>")
     implementation("io.github.dautovicharis:charts-stacked-area:<version>")
     implementation("io.github.dautovicharis:charts-radar:<version>")
@@ -89,6 +90,7 @@ dependencies {
     implementation("io.github.dautovicharis:charts-line")
     implementation("io.github.dautovicharis:charts-pie")
     implementation("io.github.dautovicharis:charts-bar")
+    implementation("io.github.dautovicharis:charts-histogram")
     implementation("io.github.dautovicharis:charts-stacked-bar")
     implementation("io.github.dautovicharis:charts-stacked-area")
     implementation("io.github.dautovicharis:charts-radar")

androidApp/build.gradle.kts

@@ -45,6 +45,16 @@ val hasReleaseSigningConfig =
     ).all { !it.isNullOrBlank() }
 
 val gifDocsVersion = providers.gradleProperty("gifDocsVersion").orElse("snapshot")
+val gifContentRoot =
+    providers.gradleProperty("gifContentRoot").orElse(
+        providers.provider {
+            val migratedDocsContent =
+                rootProject.layout.projectDirectory
+                    .dir("../charts-docs/content")
+                    .asFile
+            if (migratedDocsContent.exists()) "../charts-docs/content" else "docs/content"
+        },
+    )
 val protobufSecurityVersion =
     libs.versions.protobuf.security
         .get()
@@ -172,8 +182,8 @@ android {
 gifRecorder {
     applicationId.set(Config.DEMO_NAMESPACE)
     outputDir.set(
-        gifDocsVersion.map { docsVersion ->
-            rootProject.layout.projectDirectory.dir("docs/content/$docsVersion/wiki/assets")
+        gifContentRoot.zip(gifDocsVersion) { contentRoot, docsVersion ->
+            rootProject.layout.projectDirectory.dir("$contentRoot/$docsVersion/wiki/assets")
         },
     )
 }

androidApp/src/main/kotlin/io/github/dautovicharis/charts/app/gif/DocsGifScenarios.kt

@@ -9,12 +9,14 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import io.github.dautovicharis.charts.BarChart
+import io.github.dautovicharis.charts.HistogramChart
 import io.github.dautovicharis.charts.LineChart
 import io.github.dautovicharis.charts.PieChart
 import io.github.dautovicharis.charts.RadarChart
 import io.github.dautovicharis.charts.StackedAreaChart
 import io.github.dautovicharis.charts.StackedBarChart
 import io.github.dautovicharis.charts.demoshared.data.barSampleUseCase
+import io.github.dautovicharis.charts.demoshared.data.histogramSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.lineSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.multiLineSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.pieSampleUseCase
@@ -107,6 +109,22 @@ fun BarDefaultGifScenario() {
     }
 }
 
+@RecordGif(
+    name = "histogram_default",
+    interactionNodeTag = "HistogramChart",
+    interactions = [
+        GifInteraction(type = GifInteractionType.TAP, target = GifInteractionTarget.LEFT, framesAfter = 14),
+        GifInteraction(type = GifInteractionType.TAP, target = GifInteractionTarget.TOP, framesAfter = 14),
+        GifInteraction(type = GifInteractionType.TAP, target = GifInteractionTarget.RIGHT, framesAfter = 14),
+    ],
+)
+@Composable
+fun HistogramDefaultGifScenario() {
+    DocsGifScene {
+        HistogramChart(histogramSampleUseCase().initialHistogramDataSet())
+    }
+}
+
 @RecordGif(
     name = "stacked_bar_default",
     interactionNodeTag = "StackedBarChartPlot",

androidApp/src/screenshotTest/kotlin/io/github/dautovicharis/charts/app/screenshot/HistogramChartScreenshotTest.kt

@@ -0,0 +1,70 @@
+package io.github.dautovicharis.charts.app.screenshot
+
+import androidx.compose.runtime.Composable
+import com.android.tools.screenshot.PreviewTest
+import io.github.dautovicharis.charts.HistogramChart
+import io.github.dautovicharis.charts.app.screenshot.shared.SCREENSHOT_ANIMATE_ON_START
+import io.github.dautovicharis.charts.app.screenshot.shared.SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE
+import io.github.dautovicharis.charts.app.screenshot.shared.ScreenshotPreview
+import io.github.dautovicharis.charts.app.screenshot.shared.ScreenshotSurface
+import io.github.dautovicharis.charts.demoshared.fixtures.ChartTestStyleFixtures
+import io.github.dautovicharis.charts.style.ChartViewDefaults
+
+@PreviewTest
+@ScreenshotPreview
+@Composable
+fun HistogramChartDefaultPreview() {
+    ScreenshotSurface {
+        HistogramChart(
+            dataSet = SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE.initialHistogramDataSet(),
+            animateOnStart = SCREENSHOT_ANIMATE_ON_START,
+        )
+    }
+}
+
+@PreviewTest
+@ScreenshotPreview
+@Composable
+fun HistogramChartCustomPreview() {
+    ScreenshotSurface {
+        val dataSet = SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE.initialHistogramDataSet()
+        HistogramChart(
+            dataSet = dataSet,
+            style = ChartTestStyleFixtures.histogramCustomStyle(chartViewStyle = ChartViewDefaults.style()),
+            animateOnStart = SCREENSHOT_ANIMATE_ON_START,
+        )
+    }
+}
+
+@PreviewTest
+@ScreenshotPreview
+@Composable
+fun HistogramChartCustomBarColorsPreview() {
+    ScreenshotSurface {
+        val dataSet = SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE.initialHistogramDataSet()
+        HistogramChart(
+            dataSet = dataSet,
+            style =
+                ChartTestStyleFixtures.histogramCustomStyle(
+                    chartViewStyle = ChartViewDefaults.style(),
+                    barCount = dataSet.data.item.points.size,
+                    useBarColors = true,
+                ),
+            animateOnStart = SCREENSHOT_ANIMATE_ON_START,
+        )
+    }
+}
+
+@PreviewTest
+@ScreenshotPreview
+@Composable
+fun HistogramChartSelectedBarPreview() {
+    ScreenshotSurface {
+        HistogramChart(
+            dataSet = SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE.initialHistogramDataSet(),
+            animateOnStart = SCREENSHOT_ANIMATE_ON_START,
+            interactionEnabled = false,
+            selectedBarIndex = 1,
+        )
+    }
+}

androidApp/src/screenshotTest/kotlin/io/github/dautovicharis/charts/app/screenshot/shared/ScreenshotFixtures.kt

@@ -9,6 +9,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import io.github.dautovicharis.charts.demoshared.data.barSampleUseCase
+import io.github.dautovicharis.charts.demoshared.data.histogramSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.lineSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.multiLineSampleUseCase
 import io.github.dautovicharis.charts.demoshared.data.pieSampleUseCase
@@ -24,6 +25,7 @@ internal val SCREENSHOT_PIE_SAMPLE_USE_CASE = pieSampleUseCase()
 internal val SCREENSHOT_LINE_SAMPLE_USE_CASE = lineSampleUseCase()
 internal val SCREENSHOT_MULTI_LINE_SAMPLE_USE_CASE = multiLineSampleUseCase()
 internal val SCREENSHOT_BAR_SAMPLE_USE_CASE = barSampleUseCase()
+internal val SCREENSHOT_HISTOGRAM_SAMPLE_USE_CASE = histogramSampleUseCase()
 internal val SCREENSHOT_STACKED_BAR_SAMPLE_USE_CASE = stackedBarSampleUseCase()
 internal val SCREENSHOT_STACKED_AREA_SAMPLE_USE_CASE = stackedAreaSampleUseCase()
 internal val SCREENSHOT_RADAR_SAMPLE_USE_CASE = radarSampleUseCase()

app/src/commonMain/composeResources/values/strings.xml

@@ -18,6 +18,8 @@
     <string name="cd_select_theme">Select theme %1$d</string>
     <string name="bar_data_points">Data points: %1$d</string>
     <string name="bar_data_points_range">Value range: %1$d - %2$d</string>
+    <string name="histogram_data_points">Data points: %1$d</string>
+    <string name="histogram_data_points_range">Value range: %1$d - %2$d</string>
     <string name="line_data_points">Data points: %1$d</string>
     <string name="line_data_points_range">Value range: %1$d - %2$d</string>
     <string name="stacked_bar_data_points">Data points: %1$d</string>
@@ -50,6 +52,7 @@
     <string name="pie_chart">Pie</string>
     <string name="line_chart">Line</string>
     <string name="bar_chart">Bar</string>
+    <string name="histogram_chart">Histogram</string>
     <string name="bar_stacked_chart">Stacked Bar</string>
     <string name="stacked_area_chart">Stacked Area</string>
     <string name="multi_line_chart">Multi Line</string>

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/ChartGalleryPreviews.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import io.github.dautovicharis.charts.BarChart
+import io.github.dautovicharis.charts.HistogramChart
 import io.github.dautovicharis.charts.LineChart
 import io.github.dautovicharis.charts.PieChart
 import io.github.dautovicharis.charts.RadarChart
@@ -27,6 +28,7 @@ import io.github.dautovicharis.charts.model.toMultiChartDataSet
 import io.github.dautovicharis.charts.style.BarChartDefaults
 import io.github.dautovicharis.charts.style.ChartViewDefaults
 import io.github.dautovicharis.charts.style.ChartViewStyle
+import io.github.dautovicharis.charts.style.HistogramChartDefaults
 import io.github.dautovicharis.charts.style.LineChartDefaults
 import io.github.dautovicharis.charts.style.PieChartDefaults
 import io.github.dautovicharis.charts.style.RadarChartDefaults
@@ -83,6 +85,7 @@ internal fun ChartPreview(
         is ChartDestination.StackedAreaChartScreen ->
             StackedAreaChartPreview(previews.stackedAreaSeries)
         is ChartDestination.BarChartScreen -> BarChartPreview(previews.barValues)
+        is ChartDestination.HistogramChartScreen -> HistogramChartPreview(previews.histogramValues)
         is ChartDestination.StackedBarChartScreen -> StackedBarChartPreview(previews.stackedSeries)
         is ChartDestination.RadarChartScreen -> RadarChartPreview(previews.radarSeries)
     }
@@ -180,6 +183,33 @@ private fun BarChartPreview(values: List<Float>) {
     )
 }
 
+@Composable
+private fun HistogramChartPreview(values: List<Float>) {
+    val labels =
+        remember(values) {
+            List(values.size) { index -> "B${index + 1}" }
+        }
+    val dataSet =
+        remember(values, labels) {
+            values.toChartDataSet(
+                title = "",
+                labels = labels,
+            )
+        }
+    HistogramChart(
+        dataSet = dataSet,
+        style =
+            HistogramChartDefaults.style(
+                minValue = 0f,
+                xAxisLabelsVisible = false,
+                yAxisLabelsVisible = false,
+                chartViewStyle = previewChartViewStyle(),
+            ),
+        interactionEnabled = false,
+        animateOnStart = false,
+    )
+}
+
 @Composable
 private fun StackedBarChartPreview(series: List<Pair<String, List<Float>>>) {
     val dataSet =

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/ChartGalleryViewModel.kt

@@ -22,6 +22,7 @@ data class ChartGalleryPreviewState(
     val multiLineSeries: List<Pair<String, List<Float>>>,
     val stackedAreaSeries: List<Pair<String, List<Float>>>,
     val barValues: List<Float>,
+    val histogramValues: List<Float>,
     val stackedSeries: List<Pair<String, List<Float>>>,
     val radarSeries: List<Pair<String, List<Float>>>,
 )
@@ -82,6 +83,17 @@ class ChartGalleryViewModel(
                         },
                     )
                 }
+                launch {
+                    previewLoop(
+                        baseIntervalMs = LIVE_PREVIEW_INTERVAL_MS + 225L,
+                        jitterMs = 400L,
+                        update = { previews ->
+                            previews.copy(
+                                histogramValues = previewUseCase.nextHistogramPreview(previews.histogramValues),
+                            )
+                        },
+                    )
+                }
                 launch {
                     previewLoop(
                         baseIntervalMs = LIVE_PREVIEW_INTERVAL_MS + 300L,
@@ -135,6 +147,7 @@ class ChartGalleryViewModel(
             is ChartDestination.MultiLineChartScreen -> "Compare multiple series."
             is ChartDestination.StackedAreaChartScreen -> "Cumulative layers by category."
             is ChartDestination.BarChartScreen -> "Rank values quickly."
+            is ChartDestination.HistogramChartScreen -> "Distribution across bins."
             is ChartDestination.StackedBarChartScreen -> "Segment composition by category."
             is ChartDestination.RadarChartScreen -> "Live radial signals."
         }

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/MainViewModel.kt

@@ -40,6 +40,7 @@ class MainViewModel : ViewModel() {
                     ChartDestination.MultiLineChartScreen,
                     ChartDestination.StackedAreaChartScreen,
                     ChartDestination.BarChartScreen,
+                    ChartDestination.HistogramChartScreen,
                     ChartDestination.StackedBarChartScreen,
                     ChartDestination.RadarChartScreen,
                 ),

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/Navigation.kt

@@ -8,18 +8,21 @@ import androidx.navigation.compose.composable
 import chartsproject.app.generated.resources.Res
 import chartsproject.app.generated.resources.bar_chart
 import chartsproject.app.generated.resources.bar_stacked_chart
+import chartsproject.app.generated.resources.histogram_chart
 import chartsproject.app.generated.resources.line_chart
 import chartsproject.app.generated.resources.multi_line_chart
 import chartsproject.app.generated.resources.pie_chart
 import chartsproject.app.generated.resources.radar_chart
 import chartsproject.app.generated.resources.stacked_area_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_bar_chart
+import chartsproject.charts_demo_shared.generated.resources.ic_histogram_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_line_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_multi_line_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_pie_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_radar_chart
 import chartsproject.charts_demo_shared.generated.resources.ic_stacked_bar_chart
 import io.github.dautovicharis.charts.app.demo.bar.BarChartDemo
+import io.github.dautovicharis.charts.app.demo.histogram.HistogramChartDemo
 import io.github.dautovicharis.charts.app.demo.line.LineChartDemo
 import io.github.dautovicharis.charts.app.demo.multiline.MultiLineChartDemo
 import io.github.dautovicharis.charts.app.demo.pie.PieChartDemo
@@ -82,6 +85,13 @@ sealed class ChartDestination(
             title = Res.string.bar_stacked_chart,
         )
 
+    data object HistogramChartScreen :
+        ChartDestination(
+            route = "histogramChart",
+            icon = SharedRes.drawable.ic_histogram_chart,
+            title = Res.string.histogram_chart,
+        )
+
     data object RadarChartScreen :
         ChartDestination(
             route = "radarChart",
@@ -133,6 +143,10 @@ fun Navigation(
             StackedBarChartDemo(onStyleItemsChanged = onStyleItemsChanged)
         }
 
+        composable(ChartDestination.HistogramChartScreen.route) {
+            HistogramChartDemo(onStyleItemsChanged = onStyleItemsChanged)
+        }
+
         composable(ChartDestination.RadarChartScreen.route) {
             RadarChartDemo(onStyleItemsChanged = onStyleItemsChanged)
         }

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/data/ChartPreviewUseCase.kt

@@ -11,6 +11,8 @@ interface ChartPreviewUseCase {
 
     fun nextBarPreview(values: List<Float>): List<Float>
 
+    fun nextHistogramPreview(values: List<Float>): List<Float>
+
     fun nextMultiLinePreview(): List<Pair<String, List<Float>>>
 
     fun nextStackedAreaPreview(): List<Pair<String, List<Float>>>

app/src/commonMain/kotlin/io/github/dautovicharis/charts/app/data/impl/DefaultChartPreviewUseCase.kt

@@ -20,6 +20,7 @@ class DefaultChartPreviewUseCase : ChartPreviewUseCase {
             "Premium Plan" to listOf(6f, 7f, 8f, 9f, 10f),
         )
     private val previewBarValues = listOf(18f, 32f, 26f, 48f, 36f, 28f, 54f)
+    private val previewHistogramValues = listOf(4f, 7f, 12f, 16f, 14f, 9f, 5f)
     private val previewStackedSeries =
         listOf(
             "North America" to listOf(20f, 22f, 25f),
@@ -38,6 +39,7 @@ class DefaultChartPreviewUseCase : ChartPreviewUseCase {
             multiLineSeries = previewMultiLineSeries,
             stackedAreaSeries = previewStackedAreaSeries,
             barValues = previewBarValues,
+            histogramValues = previewHistogramValues,
             stackedSeries = previewStackedSeries,
             radarSeries = previewRadarSeries,
         )
@@ -57,6 +59,11 @@ class DefaultChartPreviewUseCase : ChartPreviewUseCase {
             jitter(value, from = -8, until = 9, min = 0f, max = 100f)
         }
 
+    override fun nextHistogramPreview(values: List<Float>): List<Float> =
+        values.map { value ->
+            jitter(value, from = -4, until = 5, min = 0f, max = 60f)
+        }
+
     override fun nextMultiLinePreview(): List<Pair<String, List<Float>>> =
         previewMultiLineSeries.map { (label, values) ->
             label to