Skip to content

Commit cb8cfb4

Browse files
ehsannarmaniehsannarmani
authored
Merge pull request #81 from TheNephilim88/feature/Additional-Information-in-Popup
feat: add data index and value index to popup content builder
2 parents b8d6fad + 5295b84 commit cb8cfb4

File tree

10 files changed

+204
-109
lines changed

10 files changed

+204
-109
lines changed

‎app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,16 @@ import androidx.compose.ui.unit.dp
2323
import androidx.compose.ui.unit.sp
2424
import ir.ehsannarmani.compose_charts.ColumnChart
2525
import ir.ehsannarmani.compose_charts.extensions.format
26-
import ir.ehsannarmani.compose_charts.models.*
26+
import ir.ehsannarmani.compose_charts.models.AnimationMode
27+
import ir.ehsannarmani.compose_charts.models.BarProperties
28+
import ir.ehsannarmani.compose_charts.models.Bars
29+
import ir.ehsannarmani.compose_charts.models.GridProperties
30+
import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties
31+
import ir.ehsannarmani.compose_charts.models.IndicatorCount
32+
import ir.ehsannarmani.compose_charts.models.IndicatorPosition
33+
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
34+
import ir.ehsannarmani.compose_charts.models.LabelProperties
35+
import ir.ehsannarmani.compose_charts.models.PopupProperties
2736

2837

2938
val columnGridProperties = GridProperties(
@@ -155,17 +164,17 @@ fun RowScope.ColumnSample() {
155164
color = Color.White,
156165
fontFamily = ubuntu,
157166
),
158-
contentBuilder = {
159-
it.format(1) + " Million"
167+
valueFormatter = { dataIndex, valueIndex, value ->
168+
value.format(1) + " Million" + " - dataIdx: " + dataIndex + ", valueIdx: " + valueIndex
160169
},
161170
containerColor = Color(0xff414141),
162171
),
163172
labelHelperProperties = LabelHelperProperties(textStyle = TextStyle(fontSize = 12.sp, fontFamily = ubuntu, color = Color.White)),
164-
onBarClick = {
165-
println(it)
173+
onBarClick = { popupData ->
174+
println(popupData.bar)
166175
},
167-
onBarLongClick = {
168-
println("long: $it")
176+
onBarLongClick = { popupData ->
177+
println("long: ${popupData.bar}")
169178
}
170179
)
171180
}

‎app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,19 @@ import androidx.compose.ui.unit.dp
2323
import androidx.compose.ui.unit.sp
2424
import ir.ehsannarmani.compose_charts.LineChart
2525
import ir.ehsannarmani.compose_charts.extensions.format
26-
import ir.ehsannarmani.compose_charts.models.*
26+
import ir.ehsannarmani.compose_charts.models.AnimationMode
27+
import ir.ehsannarmani.compose_charts.models.DividerProperties
28+
import ir.ehsannarmani.compose_charts.models.DotProperties
29+
import ir.ehsannarmani.compose_charts.models.DrawStyle
30+
import ir.ehsannarmani.compose_charts.models.GridProperties
31+
import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties
32+
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
33+
import ir.ehsannarmani.compose_charts.models.LabelProperties
34+
import ir.ehsannarmani.compose_charts.models.Line
35+
import ir.ehsannarmani.compose_charts.models.LineProperties
36+
import ir.ehsannarmani.compose_charts.models.PopupProperties
37+
import ir.ehsannarmani.compose_charts.models.StrokeStyle
38+
import ir.ehsannarmani.compose_charts.models.ZeroLineProperties
2739

2840
val gridProperties = GridProperties(
2941
xAxisProperties = GridProperties.AxisProperties(
@@ -307,8 +319,9 @@ fun RowScope.LineSample3() {
307319
color = Color.White,
308320
fontFamily = ubuntu
309321
),
310-
contentBuilder = {
311-
it.format(1) + " Million"
322+
mode = PopupProperties.Mode.PointMode(),
323+
valueFormatter = { dataIndex, valueIndex, value ->
324+
value.format(1) + " Million" + " - dataIdx: " + dataIndex + ", valueIdx: " + valueIndex
312325
},
313326
containerColor = Color(0xff414141)
314327
),

‎app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/RowSample.kt‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,15 @@ import androidx.compose.ui.unit.dp
2424
import androidx.compose.ui.unit.sp
2525
import ir.ehsannarmani.compose_charts.RowChart
2626
import ir.ehsannarmani.compose_charts.extensions.format
27-
import ir.ehsannarmani.compose_charts.models.*
27+
import ir.ehsannarmani.compose_charts.models.AnimationMode
28+
import ir.ehsannarmani.compose_charts.models.BarProperties
29+
import ir.ehsannarmani.compose_charts.models.Bars
30+
import ir.ehsannarmani.compose_charts.models.GridProperties
31+
import ir.ehsannarmani.compose_charts.models.IndicatorCount
32+
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
33+
import ir.ehsannarmani.compose_charts.models.LabelProperties
34+
import ir.ehsannarmani.compose_charts.models.PopupProperties
35+
import ir.ehsannarmani.compose_charts.models.VerticalIndicatorProperties
2836

2937
val rowGridProperties = GridProperties(
3038
enabled = true,
@@ -161,8 +169,8 @@ fun RowScope.RowSample() {
161169
color = Color.White,
162170
fontFamily = ubuntu,
163171
),
164-
contentBuilder = {
165-
it.format(1) + " Million"
172+
valueFormatter = { dataIndex, valueIndex, value ->
173+
value.format(1) + " Million" + " - dataIdx: " + dataIndex + ", valueIdx: " + valueIndex
166174
},
167175
containerColor = Color(0xff414141),
168176
),
@@ -372,8 +380,8 @@ fun RowScope.RowSample2() {
372380
color = Color.White,
373381
fontFamily = ubuntu,
374382
),
375-
contentBuilder = {
376-
it.format(1) + " Million"
383+
valueFormatter = { dataIndex, valueIndex, value ->
384+
value.format(1) + " Million" + " - dataIdx: " + dataIndex + ", valueIdx: " + valueIndex
377385
},
378386
containerColor = Color(0xff414141),
379387
),
@@ -444,8 +452,8 @@ fun RowScope.RowSample3() {
444452
color = Color.White,
445453
fontFamily = ubuntu,
446454
),
447-
contentBuilder = {
448-
it.format(1) + " Million"
455+
valueFormatter = { dataIndex, valueIndex, value ->
456+
value.format(1) + " Million" + " - dataIdx: " + dataIndex + ", valueIdx: " + valueIndex
449457
},
450458
containerColor = Color(0xff414141),
451459
),

‎compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ColumnChart.kt‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import ir.ehsannarmani.compose_charts.extensions.drawGridLines
4545
import ir.ehsannarmani.compose_charts.extensions.spaceBetween
4646
import ir.ehsannarmani.compose_charts.extensions.split
4747
import ir.ehsannarmani.compose_charts.models.AnimationMode
48+
import ir.ehsannarmani.compose_charts.models.BarPopupData
4849
import ir.ehsannarmani.compose_charts.models.BarProperties
4950
import ir.ehsannarmani.compose_charts.models.Bars
5051
import ir.ehsannarmani.compose_charts.models.DividerProperties
@@ -70,8 +71,8 @@ fun ColumnChart(
7071
modifier: Modifier = Modifier,
7172
data: List<Bars>,
7273
barProperties: BarProperties = BarProperties(),
73-
onBarClick: ((Bars.Data) -> Unit)? = null,
74-
onBarLongClick: ((Bars.Data) -> Unit)? = null,
74+
onBarClick: ((BarPopupData) -> Unit)? = null,
75+
onBarLongClick: ((BarPopupData) -> Unit)? = null,
7576
labelProperties: LabelProperties = LabelProperties(
7677
textStyle = TextStyle.Default,
7778
enabled = true
@@ -116,7 +117,7 @@ fun ColumnChart(
116117
}
117118

118119
val barWithRect = remember {
119-
mutableStateListOf<Pair<Bars.Data, Rect>>()
120+
mutableStateListOf<BarPopupData>()
120121
}
121122

122123
val selectedValue = remember {
@@ -191,17 +192,19 @@ fun ColumnChart(
191192
if (popupProperties.enabled) {
192193
detectHorizontalDragGestures { change, dragAmount ->
193194
barWithRect
194-
.lastOrNull { (_, rect) ->
195-
change.position.x in rect.left..rect.right
195+
.lastOrNull { popupData ->
196+
change.position.x in popupData.rect.left..popupData.rect.right
196197
}
197-
?.let { (bar, rect) ->
198+
?.let { popupData ->
198199
selectedValue.value = SelectedBar(
199-
bar = bar,
200-
rect = rect,
200+
bar = popupData.bar,
201+
rect = popupData.rect,
201202
offset = Offset(
202-
rect.left,
203-
if (bar.value < 0) rect.bottom else rect.top
204-
)
203+
popupData.rect.left,
204+
if (popupData.bar.value < 0) popupData.rect.bottom else popupData.rect.top
205+
),
206+
dataIndex = popupData.dataIndex,
207+
valueIndex = popupData.valueIndex
205208
)
206209
scope.launch {
207210
if (popupAnimation.value != 1f && !popupAnimation.isRunning) {
@@ -220,18 +223,20 @@ fun ColumnChart(
220223
onTap = {
221224
val position = Offset(it.x, it.y)
222225
barWithRect
223-
.lastOrNull { (_, rect) ->
224-
rect.contains(position)
226+
.lastOrNull { popupData ->
227+
popupData.rect.contains(position)
225228
}
226-
?.let { (bar, rect) ->
229+
?.let { popupData ->
227230
if (popupProperties.enabled) {
228231
selectedValue.value = SelectedBar(
229-
bar = bar,
230-
rect = rect,
232+
bar = popupData.bar,
233+
rect = popupData.rect,
231234
offset = Offset(
232-
rect.left,
233-
if (bar.value < 0) rect.bottom else rect.top
234-
)
235+
popupData.rect.left,
236+
if (popupData.bar.value < 0) popupData.rect.bottom else popupData.rect.top
237+
),
238+
dataIndex = popupData.dataIndex,
239+
valueIndex = popupData.valueIndex
235240
)
236241
scope.launch {
237242
popupAnimation.snapTo(0f)
@@ -241,17 +246,17 @@ fun ColumnChart(
241246
)
242247
}
243248
}
244-
onBarClick?.invoke(bar)
249+
onBarClick?.invoke(popupData)
245250
}
246251
},
247252
onLongPress = {
248253
val position = Offset(it.x, it.y)
249254
barWithRect
250-
.lastOrNull { (_, rect) ->
251-
rect.contains(position)
255+
.lastOrNull { popupData ->
256+
popupData.rect.contains(position)
252257
}
253-
?.let { (bar, _) ->
254-
onBarLongClick?.invoke(bar)
258+
?.let { popupData ->
259+
onBarLongClick?.invoke(popupData)
255260
}
256261
}
257262
)
@@ -329,7 +334,9 @@ fun ColumnChart(
329334
height = barHeight.absoluteValue.toFloat()
330335
),
331336
)
332-
if (barWithRect.none { it.second == rect }) barWithRect.add(col to rect)
337+
if (barWithRect.none { it.rect == rect }) {
338+
barWithRect.add(BarPopupData(col, rect, dataIndex, valueIndex))
339+
}
333340
val path = Path()
334341

335342
var radius =
@@ -388,7 +395,7 @@ private fun DrawScope.drawPopup(
388395
progress: Float,
389396
) {
390397
val measure = textMeasurer.measure(
391-
properties.contentBuilder(selectedBar.bar.value),
398+
properties.valueFormatter(selectedBar.dataIndex, selectedBar.valueIndex, selectedBar.bar.value),
392399
style = properties.textStyle.copy(
393400
color = properties.textStyle.color.copy(
394401
alpha = 1f * progress

0 commit comments

Comments
 (0)