Skip to content

Commit 68c6fed

Browse files
authored
Merge pull request #109 from AkYML/feature/ui-cleanups
UI cleanups
2 parents 1494441 + 4ca6024 commit 68c6fed

File tree

7 files changed

+168
-158
lines changed

7 files changed

+168
-158
lines changed

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

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import co.yml.charts.ui.barchart.models.GroupBar
1515
import co.yml.charts.ui.bubblechart.model.Bubble
1616
import co.yml.charts.ui.bubblechart.model.BubbleGradientType
1717
import co.yml.charts.ui.bubblechart.model.BubbleStyle
18+
import co.yml.charts.ui.linechart.model.SelectionHighlightPoint
19+
import co.yml.charts.ui.linechart.model.SelectionHighlightPopUp
1820
import co.yml.charts.ui.piechart.models.PieChartData
1921
import kotlin.math.sin
2022
import kotlin.random.Random
@@ -50,7 +52,7 @@ object DataUtils {
5052
for (index in 0 until listSize) {
5153
list.add(
5254
Point(
53-
index.toFloat(),
55+
index.toFloat(),
5456
(start until maxRange).random().toFloat()
5557
)
5658
)
@@ -82,7 +84,9 @@ object DataUtils {
8284
Bubble(
8385
center = point,
8486
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
85-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.RadialGradient)
87+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.RadialGradient),
88+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
89+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
8690
)
8791
)
8892
}
@@ -91,7 +95,9 @@ object DataUtils {
9195
Bubble(
9296
center = point,
9397
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
94-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.LinearGradient)
98+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.LinearGradient),
99+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
100+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
95101
)
96102
)
97103
}
@@ -100,7 +106,9 @@ object DataUtils {
100106
Bubble(
101107
center = point,
102108
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
103-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.VerticalGradient)
109+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.VerticalGradient),
110+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
111+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
104112
)
105113
)
106114
}
@@ -109,7 +117,9 @@ object DataUtils {
109117
Bubble(
110118
center = point,
111119
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
112-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient)
120+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient),
121+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
122+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
113123
)
114124
)
115125
}
@@ -118,7 +128,9 @@ object DataUtils {
118128
Bubble(
119129
center = point,
120130
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
121-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient,tileMode = TileMode.Repeated)
131+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient,tileMode = TileMode.Repeated),
132+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
133+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
122134
)
123135
)
124136
}
@@ -127,7 +139,9 @@ object DataUtils {
127139
Bubble(
128140
center = point,
129141
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
130-
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient,tileMode = TileMode.Mirror)
142+
bubbleStyle = BubbleStyle(gradientColors = listOf(bubbleColor1, bubbleColor2,bubbleColor3,bubbleColor4), useGradience = true, gradientType = BubbleGradientType.HorizontalGradient,tileMode = TileMode.Mirror),
143+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
144+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
131145
)
132146
)
133147
}
@@ -156,7 +170,9 @@ object DataUtils {
156170
Bubble(
157171
center = point,
158172
density = (minDensity.toInt() until maxDensity.toInt()).random().toFloat(),
159-
bubbleStyle = BubbleStyle(solidColor = bubbleColor, useGradience = false)
173+
bubbleStyle = BubbleStyle(solidColor = bubbleColor, useGradience = false),
174+
selectionHighlightPoint = SelectionHighlightPoint(Color.Black),
175+
selectionHighlightPopUp = SelectionHighlightPopUp(Color.White)
160176
)
161177
)
162178
}

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

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,14 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
131131
containerBackgroundColor = backgroundColor,
132132
isPinchZoomEnabled = isZoomAllowed,
133133
drawXAndYAxis = { scrollOffset, xZoom ->
134+
YAxis(
135+
modifier = Modifier
136+
.fillMaxHeight()
137+
.onGloballyPositioned {
138+
columnWidth = it.size.width.toFloat()
139+
}, yAxisData = yAxisData
140+
)
141+
134142
XAxis(xAxisData = xAxisData,
135143
modifier = Modifier
136144
.fillMaxWidth()
@@ -149,24 +157,24 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
149157
zoomScale = xZoom,
150158
chartData = bubblePoints,
151159
axisStart = columnWidth)
152-
YAxis(
153-
modifier = Modifier
154-
.fillMaxHeight()
155-
.onGloballyPositioned {
156-
columnWidth = it.size.width.toFloat()
157-
}, yAxisData = yAxisData
158-
)
159160

160161
},
161162
onDraw = { scrollOffset, xZoom ->
162163
val yBottom = size.height - rowHeight
164+
163165
val yOffset = ((yBottom - paddingTop.toPx()) / maxElementInYAxis)
164166
xOffset = xAxisData.axisStepSize.toPx() * xZoom
165167
val xLeft = columnWidth // To add extra space if needed
166168
val pointsData = getMappingPointsToGraph(
167-
bubblePoints, xMin, xOffset, xLeft, scrollOffset, yBottom, yMin, yOffset
169+
bubblePoints,
170+
xMin,
171+
xOffset,
172+
xLeft,
173+
scrollOffset,
174+
yBottom,
175+
yMin,
176+
yOffset
168177
)
169-
val (cubicPoints1, cubicPoints2) = getCubicPoints(pointsData)
170178
val tapPointLocks = mutableMapOf<Int, Pair<Point, Offset>>()
171179
// Draw guide lines
172180
gridLines?.let {
@@ -184,17 +192,28 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
184192
it
185193
)
186194
}
195+
drawUnderScrollMask(columnWidth, paddingRight, bgColor)
196+
187197
pointsData.forEachIndexed { index, offset ->
198+
val drawingOffset = Offset(offset.x, offset.y)
199+
bubbles[index].draw(
200+
this,
201+
drawingOffset,
202+
bubbleChartData.maximumBubbleRadius
203+
)
188204

189-
bubbles[index].draw(this, offset, bubbleChartData.maximumBubbleRadius)
205+
if (isTapped && offset.isTapped(tapOffset.x, xOffset)) {
206+
tapPointLocks[0] = bubbles[index].center to offset
207+
identifiedPoint = tapPointLocks.values.map { it.first }.first()
208+
drawHighLightOnSelectedPoint(
209+
tapPointLocks,
210+
columnWidth,
211+
paddingRight,
212+
yBottom,
213+
bubbles[index].selectionHighlightPoint
214+
)
190215

191-
pointsData.forEachIndexed { index, point ->
192-
if (isTapped && point.isTapped(tapOffset.x, xOffset)) {
193-
// Dealing with only one line graph hence tapPointLocks[0]
194-
tapPointLocks[0] = bubbles[index].center to point
195-
}
196216
}
197-
198217
val selectedOffset = tapPointLocks.values.firstOrNull()?.second
199218

200219
if (selectionTextVisibility && selectedOffset.isNotNull()) {
@@ -204,22 +223,7 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
204223
bubbles[index].selectionHighlightPopUp
205224
)
206225
}
207-
if (isTapped) {
208-
val x = tapPointLocks.values.firstOrNull()?.second?.x
209-
if (x != null) identifiedPoint =
210-
tapPointLocks.values.map { it.first }.first()
211-
drawHighLightOnSelectedPoint(
212-
tapPointLocks,
213-
columnWidth,
214-
paddingRight,
215-
yBottom,
216-
bubbles[index].selectionHighlightPoint
217-
)
218-
}
219-
220226
}
221-
drawUnderScrollMask(columnWidth, paddingRight, bgColor)
222-
223227

224228
},
225229
onPointClicked = { offset: Offset, _: Float ->
@@ -244,23 +248,25 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
244248
backgroundColor = Color.White,
245249
content = {
246250
LazyColumn {
247-
items(bubbles?.size ?: 0) { index ->
248-
Column {
249-
BubblePointInfo(
250-
xAxisData.axisLabelDescription(
251-
xAxisData.labelData(
252-
index
253-
)
254-
),
255-
bubbles[index].center.description,
256-
bubbles[index].bubbleStyle.solidColor,
257-
accessibilityConfig.titleTextSize,
258-
accessibilityConfig.descriptionTextSize
259-
)
260-
ItemDivider(
261-
thickness = accessibilityConfig.dividerThickness,
262-
dividerColor = accessibilityConfig.dividerColor
263-
)
251+
bubbles.size?.let {
252+
items(it) { index ->
253+
Column {
254+
BubblePointInfo(
255+
xAxisData.axisLabelDescription(
256+
xAxisData.labelData(
257+
index
258+
)
259+
),
260+
bubbles[index].center.description + "density is" + { bubbles[index].density },
261+
bubbles[index].bubbleStyle.solidColor,
262+
accessibilityConfig.titleTextSize,
263+
accessibilityConfig.descriptionTextSize
264+
)
265+
ItemDivider(
266+
thickness = accessibilityConfig.dividerThickness,
267+
dividerColor = accessibilityConfig.dividerColor
268+
)
269+
}
264270
}
265271
}
266272
}

0 commit comments

Comments
 (0)