Skip to content

Commit b22f3a6

Browse files
codeangiAkYML
codeangi
and
AkYML
authored
Feature/chart axis background color (#80)
* update color samples * Update LineChartActivity.kt update samples * Add Samples to donut charts Add Samples * cleanup sample app ui * Update DonutChartActivity.kt update small donut-chart label size --------- Co-authored-by: AkYML <[email protected]>
1 parent 856e7f5 commit b22f3a6

File tree

9 files changed

+566
-22
lines changed

9 files changed

+566
-22
lines changed

‎YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/DonuPieChart.kt‎ renamed to ‎YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/DonutPieChart.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.activity.compose.BackHandler
55
import androidx.compose.animation.core.Animatable
66
import androidx.compose.animation.core.tween
77
import androidx.compose.foundation.Canvas
8+
import androidx.compose.foundation.background
89
import androidx.compose.foundation.clickable
910
import androidx.compose.foundation.gestures.detectTapGestures
1011
import androidx.compose.foundation.layout.*
@@ -91,6 +92,7 @@ fun DonutPieChart(
9192
BoxWithConstraints(
9293
modifier = modifier
9394
.aspectRatio(1f)
95+
.background(pieChartConfig.backgroundColor)
9496
.semantics {
9597
contentDescription = pieChartConfig.accessibilityConfig.chartDescription
9698
}

‎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
BoxWithConstraints(
99100
modifier = modifier
100101
.aspectRatio(1f)
102+
.background(pieChartConfig.backgroundColor)
101103
.semantics {
102104
contentDescription = pieChartConfig.accessibilityConfig.chartDescription
103105
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import co.yml.charts.common.model.AccessibilityConfig
2929
* @param percentageTypeface: Percentage text typeface
3030
* @param percentVisible: Percentage text visibility
3131
* @param percentColor: Percentage text color
32+
* @param backgroundColor: Background color
3233
* @param activeSliceAlpha: Opacity of the active slice
3334
* @param inActiveSliceAlpha: Opacity of the inactive slice
3435
* @param isEllipsizeEnabled: Boolean flag for enabling ellipsize
@@ -50,6 +51,7 @@ data class PieChartConfig(
5051
val percentageTypeface: Typeface = Typeface.DEFAULT,
5152
val percentVisible: Boolean = false,
5253
val percentColor: Color = Color.White,
54+
val backgroundColor: Color = Color.White,
5355
val activeSliceAlpha: Float = .8f,
5456
val inActiveSliceAlpha: Float = 1f,
5557
val isEllipsizeEnabled: Boolean = false,

‎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)