Skip to content

Commit 8e8c91b

Browse files
AkYMLAkYML
committed
UI cleanups
1 parent 1494441 commit 8e8c91b

File tree

5 files changed

+83
-68
lines changed

5 files changed

+83
-68
lines changed

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

Lines changed: 25 additions & 9 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
@@ -31,7 +33,7 @@ object DataUtils {
3133
for (index in 0 until listSize) {
3234
list.add(
3335
Point(
34-
index.toFloat(),
36+
20+index.toFloat(),
3537
(start until maxRange).random().toFloat()
3638
)
3739
)
@@ -50,7 +52,7 @@ object DataUtils {
5052
for (index in 0 until listSize) {
5153
list.add(
5254
Point(
53-
index.toFloat(),
55+
20+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: 50 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,24 @@ 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(columnWidth+offset.x,offset.y)
199+
bubbles[index].draw(this, drawingOffset, bubbleChartData.maximumBubbleRadius)
188200

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

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-
}
196212
}
197-
198213
val selectedOffset = tapPointLocks.values.firstOrNull()?.second
199214

200215
if (selectionTextVisibility && selectedOffset.isNotNull()) {
@@ -204,22 +219,7 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
204219
bubbles[index].selectionHighlightPopUp
205220
)
206221
}
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-
220222
}
221-
drawUnderScrollMask(columnWidth, paddingRight, bgColor)
222-
223223

224224
},
225225
onPointClicked = { offset: Offset, _: Float ->
@@ -244,23 +244,25 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
244244
backgroundColor = Color.White,
245245
content = {
246246
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-
)
247+
bubbles.size?.let {
248+
items(it) { index ->
249+
Column {
250+
BubblePointInfo(
251+
xAxisData.axisLabelDescription(
252+
xAxisData.labelData(
253+
index
254+
)
255+
),
256+
bubbles[index].center.description,
257+
bubbles[index].bubbleStyle.solidColor,
258+
accessibilityConfig.titleTextSize,
259+
accessibilityConfig.descriptionTextSize
260+
)
261+
ItemDivider(
262+
thickness = accessibilityConfig.dividerThickness,
263+
dividerColor = accessibilityConfig.dividerColor
264+
)
265+
}
264266
}
265267
}
266268
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,14 @@ private fun BubbleChartWithGrid(pointsData: List<Point>) {
109109
val steps = 5
110110
val xAxisData = AxisData.Builder()
111111
.axisStepSize(30.dp)
112-
.startDrawPadding(55.dp)
113-
.startDrawPadding(20.dp)
114112
.steps(pointsData.size - 1)
115113
.labelData { i -> i.toString() }
116114
.labelAndAxisLinePadding(15.dp)
117115
.build()
118116

119117
val yAxisData = AxisData.Builder()
120118
.steps(steps)
121-
.labelAndAxisLinePadding(50.dp)
119+
.labelAndAxisLinePadding(15.dp)
122120
.labelData { i ->
123121
// Add yMin to get the negative axis values to the scale
124122
val yMin = pointsData.minOf { it.y }
@@ -156,13 +154,12 @@ private fun SolidBubbleChart(pointsData: List<Point>) {
156154
.axisStepSize(30.dp)
157155
.steps(pointsData.size - 1)
158156
.labelData { i -> i.toString() }
159-
.startDrawPadding(55.dp)
160157
.labelAndAxisLinePadding(15.dp)
161158
.build()
162159

163160
val yAxisData = AxisData.Builder()
164161
.steps(steps)
165-
.labelAndAxisLinePadding(20.dp)
162+
.labelAndAxisLinePadding(15.dp)
166163
.labelData { i ->
167164
// Add yMin to get the negative axis values to the scale
168165
val yMin = pointsData.minOf { it.y }

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,9 @@ private fun SingleLineChartWithGridLines(pointsData: List<Point>) {
181181
val steps = 5
182182
val xAxisData = AxisData.Builder()
183183
.axisStepSize(30.dp)
184+
.topPadding(105.dp)
184185
.steps(pointsData.size - 1)
185-
.labelData { i -> i.toString() }
186+
.labelData { i -> pointsData[i].x.toInt().toString() }
186187
.labelAndAxisLinePadding(15.dp)
187188
.build()
188189
val yAxisData = AxisData.Builder()
@@ -199,11 +200,7 @@ private fun SingleLineChartWithGridLines(pointsData: List<Point>) {
199200
linePlotData = LinePlotData(
200201
lines = listOf(
201202
Line(
202-
dataPoints = DataUtils.getLineChartData(
203-
20,
204-
start = 0,
205-
maxRange = 50
206-
),
203+
dataPoints = pointsData,
207204
LineStyle(),
208205
IntersectionPoint(),
209206
SelectionHighlightPoint(),

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ private fun WaveGraph1(pointsData: List<Point>) {
118118
val steps = 5
119119
val xAxisData = AxisData.Builder()
120120
.axisStepSize(30.dp)
121+
.startDrawPadding(48.dp)
121122
.steps(pointsData.size - 1)
122123
.labelData { i -> i.toString() }
123124
.labelAndAxisLinePadding(15.dp)
@@ -162,6 +163,7 @@ private fun WaveGraph2(pointsData: List<Point>) {
162163
val steps = 10
163164
val xAxisData = AxisData.Builder()
164165
.axisStepSize(40.dp)
166+
.startDrawPadding(48.dp)
165167
.steps(pointsData.size - 1)
166168
.labelData { i -> (i).toString() }
167169
.axisLabelAngle(20f)
@@ -219,6 +221,7 @@ private fun WaveGraph3(pointsData: List<Point>) {
219221
val steps = 10
220222
val xAxisData = AxisData.Builder()
221223
.axisStepSize(40.dp)
224+
.startDrawPadding(48.dp)
222225
.steps(pointsData.size - 1)
223226
.labelData { i -> i.toString() }
224227
.labelAndAxisLinePadding(15.dp)

0 commit comments

Comments
 (0)