Skip to content

Commit ac4480a

Browse files
committed
update gradience customization
1 parent e568414 commit ac4480a

File tree

7 files changed

+404
-47
lines changed

7 files changed

+404
-47
lines changed

YChartsLib/src/main/java/co/yml/charts/common/utils/DataUtils.kt

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ object DataUtils {
6262
* @param start: X values to start from. ex: 50 to 100
6363
* @param maxRange: Max range of Y values
6464
*/
65-
fun getBubbleChartData(
65+
fun getBubbleChartDataWithGradientStyle(
6666
points: List<Point>,
6767
minDensity: Float = 10F,
6868
maxDensity: Float = 100F
@@ -74,7 +74,33 @@ object DataUtils {
7474
Bubble(
7575
center = point,
7676
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
77-
bubbleStyle = BubbleStyle(color = bubbleColor)
77+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor, Color.White), useGradience = true)
78+
)
79+
)
80+
81+
}
82+
return list
83+
}
84+
85+
/**
86+
* Returns list of points
87+
* @param listSize: Size of total number of points needed.
88+
* @param start: X values to start from. ex: 50 to 100
89+
* @param maxRange: Max range of Y values
90+
*/
91+
fun getBubbleChartDataWithSolidStyle(
92+
points: List<Point>,
93+
minDensity: Float = 10F,
94+
maxDensity: Float = 100F
95+
): List<Bubble> {
96+
val list = arrayListOf<Bubble>()
97+
points.forEachIndexed { index, point ->
98+
val bubbleColor = if (index % 2 == 0) Color.Red else Color.Blue
99+
list.add(
100+
Bubble(
101+
center = point,
102+
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
103+
bubbleStyle = BubbleStyle(solidColor = bubbleColor, useGradience = false)
78104
)
79105
)
80106

YChartsLib/src/main/java/co/yml/charts/ui/bubblechart/BubbleChart.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,8 +251,8 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
251251
)
252252
),
253253
bubbles[index].center.description,
254-
bubbles[index].bubbleStyle.color
255-
?: Color.Transparent
254+
bubbles[index].bubbleStyle.solidColor
255+
?: bubbles[index].bubbleStyle.gradientColors.first()
256256
)
257257
ItemDivider(
258258
thickness = accessibilityConfig.dividerThickness,
Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
package co.yml.charts.ui.bubblechart.model
22

33
import androidx.compose.ui.geometry.Offset
4+
import androidx.compose.ui.graphics.Brush
45
import androidx.compose.ui.graphics.Color
6+
import androidx.compose.ui.graphics.TileMode
57
import androidx.compose.ui.graphics.drawscope.DrawScope
6-
import androidx.compose.ui.unit.Density
78
import androidx.compose.ui.unit.Dp
89
import androidx.compose.ui.unit.dp
910
import co.yml.charts.axis.AxisData
@@ -13,23 +14,23 @@ import co.yml.charts.ui.linechart.model.GridLines
1314
import co.yml.charts.ui.linechart.model.IntersectionPoint
1415
import co.yml.charts.ui.linechart.model.SelectionHighlightPoint
1516
import co.yml.charts.ui.linechart.model.SelectionHighlightPopUp
16-
import co.yml.charts.ui.linechart.model.ShadowUnderLine
1717

1818

1919
/**
20+
* Bubble chart data
2021
*
21-
* BubbleChartData data class that contains all params user need to define to draw a bubble chart.
22-
* @param bubbles: A list of Bubbles to be drawn.
23-
* @param xAxisData: All the configurations related to X-Axis to be defined here in [AxisData]
24-
* @param yAxisData: All the configurations related to Y-Axis to be defined here in [AxisData]
25-
* @param isZoomAllowed: True if zoom in for all vertical graph components is allowed else false.
26-
* @param paddingTop: Padding from the top of the canvas to start of the graph container.
27-
* @param paddingRight: Padding from the end of the canvas to end of the graph container.
28-
* @param bottomPadding: Padding from the bottom of the canvas to bottom of the graph container.
29-
* @param containerPaddingEnd: Container inside padding end after the last point of the graph.
30-
* @param backgroundColor: Background color of the Y & X components,
31-
* @param gridLines: This enables graph to draw horizontal and vertical grid lines
32-
* @param accessibilityConfig: Configs related to accessibility service defined here in [AccessibilityConfig]
22+
* @property bubbles
23+
* @property xAxisData
24+
* @property yAxisData
25+
* @property isZoomAllowed
26+
* @property paddingTop
27+
* @property bottomPadding
28+
* @property paddingRight
29+
* @property containerPaddingEnd
30+
* @property backgroundColor
31+
* @property gridLines
32+
* @property accessibilityConfig
33+
* @constructor Create empty Bubble chart data
3334
*/
3435
data class BubbleChartData(
3536
val bubbles: List<Bubble>,
@@ -46,32 +47,54 @@ data class BubbleChartData(
4647
)
4748

4849
/**
49-
* Represent a Bubble in the [co.yml.charts.ui.bubblechart]
50+
* Bubble
5051
*
51-
* @param center center [Point] of the bubble
52-
* @param bubbleStyle Adds styling options in [BubbleStyle] to the bubble to be drawn.
53-
* @param intersectionPoint drawing logic to draw the point itself in [IntersectionPoint].
54-
* If null, the point is not drawn.
55-
* @param selectionHighlightPoint drawing logic to draw the highlight at the point when it is selected
56-
* in [SelectionHighlightPoint] If null, the point won't be highlighted on selection
57-
* @param selectionHighlightPopUp All prams related to selection popup to be added here in [SelectionHighlightPopUp]
52+
* @property center
53+
* @property density
54+
* @property bubbleStyle
55+
* @property intersectionPoint
56+
* @property selectionHighlightPoint
57+
* @property selectionHighlightPopUp
58+
* @property draw
59+
* @constructor Create empty Bubble
5860
*/
5961
data class Bubble(
60-
val center:Point,
62+
val center: Point,
6163
val density: Float,
6264
val bubbleStyle: BubbleStyle = BubbleStyle(),
6365
val intersectionPoint: IntersectionPoint? = null,
6466
val selectionHighlightPoint: SelectionHighlightPoint? = null,
6567
val selectionHighlightPopUp: SelectionHighlightPopUp? = null,
6668
val draw: DrawScope.(Offset) -> Unit = { center ->
67-
drawCircle(
68-
bubbleStyle.color,
69-
density,
70-
center,
71-
bubbleStyle.alpha,
72-
bubbleStyle.style,
73-
bubbleStyle.colorFilter,
74-
bubbleStyle.blendMode
75-
)
69+
if (bubbleStyle.useGradience) {
70+
drawCircle(
71+
brush = getBrush(bubbleStyle, center, density),
72+
center = center,
73+
radius = density,
74+
alpha = bubbleStyle.alpha,
75+
style = bubbleStyle.style,
76+
colorFilter = bubbleStyle.colorFilter,
77+
blendMode = bubbleStyle.blendMode
78+
)
79+
} else {
80+
drawCircle(
81+
bubbleStyle.solidColor,
82+
density,
83+
center,
84+
bubbleStyle.alpha,
85+
bubbleStyle.style,
86+
bubbleStyle.colorFilter,
87+
bubbleStyle.blendMode
88+
)
89+
}
7690
}
7791
)
92+
93+
private fun getBrush(bubbleStyle: BubbleStyle, center: Offset, density: Float): Brush {
94+
return Brush.radialGradient(
95+
colors = bubbleStyle.gradientColors,
96+
center = center,
97+
radius = density,
98+
tileMode = TileMode.Decal
99+
)
100+
}

YChartsLib/src/main/java/co/yml/charts/ui/bubblechart/model/BubbleStyle.kt

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,81 @@ package co.yml.charts.ui.bubblechart.model
33
import androidx.compose.ui.graphics.BlendMode
44
import androidx.compose.ui.graphics.Color
55
import androidx.compose.ui.graphics.ColorFilter
6+
import androidx.compose.ui.graphics.LinearGradient
67
import androidx.compose.ui.graphics.drawscope.DrawScope.Companion.DefaultBlendMode
78
import androidx.compose.ui.graphics.drawscope.DrawStyle
89
import androidx.compose.ui.graphics.drawscope.Fill
910
import androidx.compose.ui.graphics.drawscope.Stroke
1011
import co.yml.charts.ui.linechart.model.LineType
1112

1213
/**
13-
* Handles styling for the bubble drawn in the bubble chart
14+
* Bubble style
1415
*
15-
* @param color Defines the color of the bubble.
16-
* @param width Defines the width of the bubble border stroke.
17-
* @param alpha Defines the alpha of the bubble.
18-
* @param style Defines if the bubble is filled or stroke.
19-
* @param colorFilter ColorFilter to apply to the [color] when drawn into the destination.
20-
* @param blendMode All prams related to selection popup to be added here in [SelectionHighlightPopUp]
16+
* @property gradientColors
17+
* @property gradientType
18+
* @property solidColor
19+
* @property useGradience
20+
* @property width
21+
* @property alpha
22+
* @property style
23+
* @property colorFilter
24+
* @property blendMode
25+
* @constructor Create empty Bubble style
2126
*/
2227
data class BubbleStyle(
23-
val color: Color = Color.Blue,
28+
val gradientColors: List<Color> = listOf(Color.Blue, Color.Red),
29+
val gradientType: BubbleGradientType = BubbleGradientType.None(),
30+
val solidColor: Color = Color.Blue,
31+
val useGradience: Boolean = false,
2432
val width: Float = 8f,
2533
val alpha: Float = 1.0f,
2634
val style: DrawStyle = Fill,
2735
val colorFilter: ColorFilter? = null,
2836
val blendMode: BlendMode = DefaultBlendMode
29-
)
37+
)
38+
39+
40+
/**
41+
* Bubble gradient type
42+
*
43+
* @constructor Create empty Bubble gradient type
44+
*/
45+
sealed class BubbleGradientType {
46+
47+
/**
48+
* Linear gradient
49+
*
50+
* @constructor Create empty Linear gradient
51+
*/
52+
object LinearGradient : BubbleGradientType()
53+
54+
/**
55+
* Radial gradient
56+
*
57+
* @constructor Create empty Radial gradient
58+
*/
59+
object RadialGradient : BubbleGradientType()
60+
61+
/**
62+
* Vertical gradient
63+
*
64+
* @constructor Create empty Vertical gradient
65+
*/
66+
object VerticalGradient : BubbleGradientType()
67+
68+
/**
69+
* Horizontal gradient
70+
*
71+
* @constructor Create empty Horizontal gradient
72+
*/
73+
class HorizontalGradient() : BubbleGradientType()
74+
75+
/**
76+
* None
77+
*
78+
* @constructor Create empty None
79+
*/
80+
class None() : BubbleGradientType()
81+
82+
83+
}

0 commit comments

Comments
 (0)