Skip to content

Conversation

@MGaetan89
Copy link
Contributor

@MGaetan89 MGaetan89 commented Jul 19, 2024

Pull request

Description

This PR introduces two new composables in pillarbox-demo-shared: LineChart and BarChart. As their names suggest, they are meant to display simple line- and bar-charts.

Usage

The most basic usage for each component looks like this:

LineChart(
    data = listOf(12f, 4.5, 8.2f, 24.3f, 1.9f),
	modifier = Modifier.size(400.dp), // Modifier is not mandatory, but `Canvas` requires a size to be set
)

BarChart(
    data = listOf(12f, 4.5, 8.2f, 24.3f, 1.9f),
	modifier = Modifier.size(400.dp), // Modifier is not mandatory, but `Canvas` requires a size to be set
)

Each component provides a set of options to customize how it is displayed (color, stroke width, spacing, ...).

Screenshot

Screenshot 2024-07-19 at 15 48 16

Changes made

  • Introduce a LineChart component.
  • Introduce a BarChart component.
  • Add previews for each component.
  • Add interactive previews for each component.

Checklist

  • Your branch has been rebased onto the main branch.
  • APIs have been properly documented (if relevant).
  • The documentation has been updated (if relevant).
  • New unit tests have been written (if relevant).
  • The demo has been updated (if relevant).
  • All pull request status checks pass.

@MGaetan89 MGaetan89 added this to the QoS milestone Jul 19, 2024
@MGaetan89 MGaetan89 linked an issue Jul 19, 2024 that may be closed by this pull request
@github-actions
Copy link

github-actions bot commented Jul 19, 2024

Code Coverage

Overall Project 53.5% 🟢

There is no coverage information present for the Files changed

@StaehliJ
Copy link
Contributor

The charts doesn't work in a container that has a fixed size ? For example

Column(modifier = Modifier.fillMaxWidth(0.5f)){
    LineChart(...)
}

@MGaetan89
Copy link
Contributor Author

The charts doesn't work in a container that has a fixed size ? For example

Column(modifier = Modifier.fillMaxWidth(0.5f)){
    LineChart(...)
}

LineChart and BarChart use Canvas internally, which doesn't have a size by default. So the Modifier of each chart should be used to set one (using something like .size(), .height()/.width(), .filleMaxWidth(), ...).

@MGaetan89 MGaetan89 force-pushed the 643-create-a-chart-components-for-metrics-ui branch from 71877c4 to 0896a6e Compare July 23, 2024 13:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

Create a chart components for metrics UI

2 participants