Skip to content

Commit 03c58cc

Browse files
alexandre-thauvinalexandre-thauvin
committed
merge main into current, adding background manually, render chart config with customization
2 parents 3a6d319 + 95a6f84 commit 03c58cc

File tree

8 files changed

+551
-47
lines changed

8 files changed

+551
-47
lines changed

‎README.md‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ YCharts is a light and extensible chart library for Jetpack Compose system. It c
77

88
## Adding YCharts to your project:
99

10-
You can add automatically the library via Maven:
10+
You can add the library via Maven:
1111

1212
Gradle:
1313
```groovy
14-
implementation 'co.yml:ycharts:1.0.0'
14+
implementation 'co.yml:ycharts:2.0.0'
1515
```
1616

1717
## Modules
@@ -43,13 +43,15 @@ Let's see how we can use the chart components and style them with available cust
4343
```
4444
val xAxisData = AxisData.Builder()
4545
.axisStepSize(100.dp)
46+
.backgroundColor(Color.Blue)
4647
.steps(pointsData.size - 1)
4748
.labelData { i -> i.toString() }
4849
.labelAndAxisLinePadding(15.dp)
4950
.build()
5051
5152
val yAxisData = AxisData.Builder()
5253
.steps(steps)
54+
.backgroundColor(Color.Red)
5355
.labelAndAxisLinePadding(20.dp)
5456
.labelData { i ->
5557
val yScale = 100 / steps
@@ -73,7 +75,8 @@ Let's see how we can use the chart components and style them with available cust
7375
),
7476
xAxisData = xAxisData,
7577
yAxisData = yAxisData,
76-
gridLines = GridLines()
78+
gridLines = GridLines(),
79+
backgroundColor = Color.White
7780
)
7881
```
7982
* Finally use the _**`LineChart`**_ Component to render the line chart with the above input
@@ -349,7 +352,6 @@ Let's see how we can use the chart components and style them with available cust
349352
To interact with your device with touch and spoken feedback, you can turn on the TalkBack screen reader. TalkBack describes the graphs/charts when tapped on the graph container.
350353
Compose views by deafult supports accessibility services, but for views drawn using canvas has no straight forward approach as of now, hence all our graph components supports an accessibility popup out of the box that will be shown over the graph with tapped on the container, with all the values described in an order to support accessibility services. User will be able to scroll the popup and find all the points, bars, slices or combined values in a descriptive manner, where user can tap and talkback would read it out loud.
351354
352-
353355
<figure>
354356
<div align = "center">
355357
<span align = "center" style = "display:inline-block">
@@ -365,6 +367,17 @@ Compose views by deafult supports accessibility services, but for views drawn us
365367
Here fig(a) represents the line graph with the container being highlighted & fig(b) represents the accessibility sheet with all values laid out in detail so that talkback can describe the graph values.<br><br>
366368
*Note*: All the descriptions that are visible in the accessibility popup can be customized to the required string.
367369
370+
## KMM Support.
371+
* For the ongoing effort to provide multiplatform solution, Ycharts now being written in Compose Multiplatform, adopting KMM has been a game-changer, we hope to achieve good results in this effort with community contribution.
372+
Currently KMM compatible code can be found at _**`kmm-main`**_ branch
373+
374+
375+
## Changes in version 2.0
376+
* Fix for multiple line graph/chart has been added, now it can be used to plot multiple line graphs/line charts on a single canvas or a single line with multiple colors.
377+
* Background color for Pie chart/Donut chart now can be set via _**`backgroundColor`**_ parameter through PieChartConfig model, this is done to keep the behaviour consistent with current syntax pattern.
378+
* Kotlin-library updates: _**`Kotlin version`**_ has been upgraded to '1.8.10' along with agp, compose-compiler, core-ktx, target sdk, and other compatible library updates.
379+
* Sample App has been updated to showcase more use-cases for each chart type.
380+
368381
## License
369382
370383
```

‎YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/PieChart.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import androidx.activity.compose.BackHandler
99
import androidx.compose.animation.core.Animatable
1010
import androidx.compose.animation.core.tween
1111
import androidx.compose.foundation.Canvas
12+
import androidx.compose.foundation.background
1213
import androidx.compose.foundation.clickable
1314
import androidx.compose.foundation.gestures.detectTapGestures
1415
import androidx.compose.foundation.layout.*
@@ -98,6 +99,7 @@ fun PieChart(
9899
val boxModifier = if (pieChartConfig.isClickOnSliceEnabled) {
99100
modifier
100101
.aspectRatio(1f)
102+
.background(pieChartConfig.backgroundColor)
101103
.semantics {
102104
contentDescription = pieChartConfig.accessibilityConfig.chartDescription
103105
}

‎app/src/main/java/co/yml/ycharts/app/presentation/BarChartActivity.kt‎

Lines changed: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import androidx.compose.foundation.layout.fillMaxSize
88
import androidx.compose.foundation.layout.height
99
import androidx.compose.foundation.layout.padding
1010
import androidx.compose.foundation.lazy.LazyColumn
11+
import androidx.compose.material.MaterialTheme
1112
import androidx.compose.material.Scaffold
13+
import androidx.compose.material.Text
1214
import androidx.compose.runtime.Composable
1315
import androidx.compose.ui.Alignment
1416
import androidx.compose.ui.Modifier
1517
import androidx.compose.ui.graphics.Color
1618
import androidx.compose.ui.res.stringResource
19+
import androidx.compose.ui.text.font.FontWeight
1720
import androidx.compose.ui.unit.dp
1821
import co.yml.ycharts.app.ui.compositions.AppBarWithBackButton
1922
import co.yml.ycharts.app.ui.theme.YChartsTheme
@@ -24,7 +27,13 @@ import co.yml.charts.ui.barchart.models.BarStyle
2427
import co.yml.charts.ui.barchart.models.SelectionHighlightData
2528
import co.yml.charts.common.utils.DataUtils
2629
import co.yml.ycharts.app.R
30+
import kotlin.random.Random
2731

32+
/**
33+
* Bar chart activity
34+
*
35+
* @constructor Create empty Bar chart activity
36+
*/
2837
class BarChartActivity : ComponentActivity() {
2938

3039
override fun onCreate(savedInstanceState: Bundle?) {
@@ -50,8 +59,30 @@ class BarChartActivity : ComponentActivity() {
5059
LazyColumn(content = {
5160
items(3) { item ->
5261
when (item) {
53-
0 -> BarChart1()
54-
1 -> BarChart2()
62+
0 ->{ Text(
63+
modifier=Modifier.padding(12.dp),
64+
text = getString(R.string.barchart_solid_colors),
65+
style = MaterialTheme.typography.subtitle1,
66+
fontWeight = FontWeight.Bold
67+
)
68+
BarchartWithSolidBars()
69+
}
70+
1 -> { Text(
71+
modifier=Modifier.padding(12.dp),
72+
text = getString(R.string.barchart_gradient_colors),
73+
style = MaterialTheme.typography.subtitle1,
74+
fontWeight = FontWeight.Bold
75+
)
76+
BarchartWithGradientBars()}
77+
2 ->{
78+
Text(
79+
modifier=Modifier.padding(12.dp),
80+
text = getString(R.string.barchart_background_color),
81+
style = MaterialTheme.typography.subtitle1,
82+
fontWeight = FontWeight.Bold
83+
)
84+
BarchartWithBackgroundColor()
85+
}
5586
}
5687
}
5788
})
@@ -62,8 +93,12 @@ class BarChartActivity : ComponentActivity() {
6293
}
6394
}
6495

96+
/**
97+
* Barchart with solid bars
98+
*
99+
*/
65100
@Composable
66-
private fun BarChart1() {
101+
private fun BarchartWithSolidBars() {
67102
val maxRange = 50
68103
val barData = DataUtils.getBarChartData(50, maxRange)
69104
val yStepSize = 10
@@ -96,8 +131,12 @@ private fun BarChart1() {
96131
BarChart(modifier = Modifier.height(350.dp), barChartData = barChartData)
97132
}
98133

134+
/**
135+
* Barchart with gradient bars
136+
*
137+
*/
99138
@Composable
100-
private fun BarChart2() {
139+
private fun BarchartWithGradientBars() {
101140
val maxRange = 100
102141
val barData = DataUtils.getGradientBarChartData(50, 100)
103142
val yStepSize = 10
@@ -133,3 +172,47 @@ private fun BarChart2() {
133172
BarChart(modifier = Modifier.height(350.dp), barChartData = barChartData)
134173
}
135174

175+
/**
176+
* Barchart with background color
177+
*
178+
*/
179+
@Composable
180+
private fun BarchartWithBackgroundColor() {
181+
val maxRange = 100
182+
val backgroundColor = Color.LightGray
183+
val barData = DataUtils.getBarChartData(50, 100)
184+
val yStepSize = 10
185+
val xAxisData = AxisData.Builder()
186+
.axisStepSize(30.dp)
187+
.steps(barData.size - 1)
188+
.bottomPadding(40.dp)
189+
.axisLabelAngle(20f)
190+
.labelData { index -> barData[index].label }
191+
.backgroundColor(backgroundColor)
192+
.build()
193+
val yAxisData = AxisData.Builder()
194+
.steps(yStepSize)
195+
.labelAndAxisLinePadding(20.dp)
196+
.axisOffset(20.dp)
197+
.backgroundColor(backgroundColor)
198+
.labelData { index -> (index * (maxRange / yStepSize)).toString() }
199+
.build()
200+
val barChartData = BarChartData(
201+
chartData = barData,
202+
xAxisData = xAxisData,
203+
yAxisData = yAxisData,
204+
barStyle = BarStyle(paddingBetweenBars = 20.dp,
205+
barWidth = 35.dp,
206+
selectionHighlightData = SelectionHighlightData(
207+
highlightBarColor = Color.Red,
208+
highlightTextBackgroundColor = Color.Green,
209+
popUpLabel = { _, y -> " Value : $y " }
210+
)),
211+
showYAxis = true,
212+
showXAxis = true,
213+
horizontalExtraSpace = 20.dp,
214+
backgroundColor = backgroundColor
215+
)
216+
BarChart(modifier = Modifier.height(350.dp), barChartData = barChartData)
217+
}
218+

‎app/src/main/java/co/yml/ycharts/app/presentation/CombinedLineAndBarChartActivity.kt‎

Lines changed: 103 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import androidx.activity.compose.setContent
88
import androidx.compose.foundation.layout.*
99
import androidx.compose.foundation.lazy.LazyColumn
1010
import androidx.compose.material.ExperimentalMaterialApi
11+
import androidx.compose.material.MaterialTheme
1112
import androidx.compose.material.Scaffold
13+
import androidx.compose.material.Text
1214
import androidx.compose.runtime.Composable
1315
import androidx.compose.ui.Alignment
1416
import androidx.compose.ui.Modifier
1517
import androidx.compose.ui.graphics.Color
1618
import androidx.compose.ui.res.stringResource
19+
import androidx.compose.ui.text.font.FontWeight
1720
import androidx.compose.ui.unit.dp
1821
import co.yml.charts.axis.AxisData
1922
import co.yml.ycharts.app.ui.compositions.AppBarWithBackButton
@@ -33,6 +36,11 @@ import co.yml.charts.common.model.LegendsConfig
3336
import co.yml.charts.common.utils.DataUtils
3437
import co.yml.ycharts.app.R
3538

39+
/**
40+
* Combined line and bar chart activity
41+
*
42+
* @constructor Create empty Combined line and bar chart activity
43+
*/
3644
class CombinedLineAndBarChartActivity : ComponentActivity() {
3745

3846
override fun onCreate(savedInstanceState: Bundle?) {
@@ -56,9 +64,26 @@ class CombinedLineAndBarChartActivity : ComponentActivity() {
5664
contentAlignment = Alignment.TopCenter
5765
) {
5866
LazyColumn(content = {
59-
items(1) { item ->
67+
items(2) { item ->
6068
when (item) {
61-
0 -> BarWithLineChart()
69+
0 ->{
70+
Text(
71+
modifier=Modifier.padding(12.dp),
72+
text = getString(R.string.combined_bar_line_chart),
73+
style = MaterialTheme.typography.subtitle1,
74+
fontWeight = FontWeight.Bold
75+
)
76+
BarWithLineChart()
77+
}
78+
1->{
79+
Text(
80+
modifier=Modifier.padding(12.dp),
81+
text = getString(R.string.combined_chart_with_background),
82+
style = MaterialTheme.typography.subtitle1,
83+
fontWeight = FontWeight.Bold
84+
)
85+
BarWithLineChartAndBackground()
86+
}
6287
}
6388
}
6489
})
@@ -69,6 +94,10 @@ class CombinedLineAndBarChartActivity : ComponentActivity() {
6994
}
7095
}
7196

97+
/**
98+
* Bar with line chart
99+
*
100+
*/
72101
@Composable
73102
fun BarWithLineChart() {
74103
val maxRange = 100
@@ -132,3 +161,75 @@ fun BarWithLineChart() {
132161
)
133162
}
134163
}
164+
165+
166+
/**
167+
* Bar with line chart and background
168+
*
169+
*/
170+
@Composable
171+
fun BarWithLineChartAndBackground() {
172+
val maxRange = 100
173+
val groupBarData = DataUtils.getGroupBarChartData(50, 100, 3)
174+
val yStepSize = 10
175+
val xAxisData = AxisData.Builder()
176+
.axisStepSize(30.dp)
177+
.bottomPadding(5.dp)
178+
.backgroundColor(Color.Yellow)
179+
.labelData { index -> index.toString() }
180+
.build()
181+
val yAxisData = AxisData.Builder()
182+
.steps(yStepSize)
183+
.backgroundColor(Color.Yellow)
184+
.labelAndAxisLinePadding(20.dp)
185+
.axisOffset(20.dp)
186+
.labelData { index -> (index * (maxRange / yStepSize)).toString() }
187+
.build()
188+
val linePlotData = LinePlotData(
189+
lines = listOf(
190+
Line(
191+
DataUtils.getLineChartData(50, maxRange = 100),
192+
lineStyle = LineStyle(color = Color.Blue),
193+
intersectionPoint = IntersectionPoint(),
194+
selectionHighlightPoint = SelectionHighlightPoint(),
195+
selectionHighlightPopUp = SelectionHighlightPopUp()
196+
),
197+
Line(
198+
DataUtils.getLineChartData(50, maxRange = 100),
199+
lineStyle = LineStyle(color = Color.Black),
200+
intersectionPoint = IntersectionPoint(),
201+
selectionHighlightPoint = SelectionHighlightPoint(),
202+
selectionHighlightPopUp = SelectionHighlightPopUp()
203+
)
204+
)
205+
)
206+
val colorPaletteList = DataUtils.getColorPaletteList(3)
207+
val legendsConfig = LegendsConfig(
208+
legendLabelList = DataUtils.getLegendsLabelData(colorPaletteList),
209+
gridColumnCount = 3
210+
)
211+
val barPlotData = BarPlotData(
212+
groupBarList = groupBarData,
213+
barStyle = BarStyle(barWidth = 35.dp),
214+
barColorPaletteList = colorPaletteList
215+
)
216+
val combinedChartData = CombinedChartData(
217+
combinedPlotDataList = listOf(barPlotData, linePlotData),
218+
xAxisData = xAxisData,
219+
yAxisData = yAxisData,
220+
backgroundColor = Color.Yellow
221+
)
222+
Column(
223+
Modifier
224+
.height(500.dp)
225+
) {
226+
CombinedChart(
227+
modifier = Modifier
228+
.height(400.dp),
229+
combinedChartData = combinedChartData
230+
)
231+
Legends(
232+
legendsConfig = legendsConfig
233+
)
234+
}
235+
}

0 commit comments

Comments
 (0)