- base chart

app/src/main/java/dev/pinkroom/marketsight/common/Utils.kt

@@ -6,12 +6,15 @@ import dev.pinkroom.marketsight.R
 import dev.pinkroom.marketsight.common.Constants.ALL_SYMBOLS
 import dev.pinkroom.marketsight.domain.model.assets.AssetFilter
 import dev.pinkroom.marketsight.domain.model.assets.TypeAsset
+import dev.pinkroom.marketsight.domain.model.bars_asset.AssetChartInfo
+import dev.pinkroom.marketsight.domain.model.bars_asset.BarAsset
 import dev.pinkroom.marketsight.domain.model.bars_asset.FilterHistoricalBar
 import dev.pinkroom.marketsight.domain.model.bars_asset.TimeFrame
 import dev.pinkroom.marketsight.domain.model.common.DateTimeUnit
 import dev.pinkroom.marketsight.domain.model.common.SubInfoSymbols
 import okhttp3.OkHttpClient
 import okhttp3.logging.HttpLoggingInterceptor
+import java.text.DecimalFormat
 import java.time.LocalDate
 import java.time.LocalDateTime
 import java.time.ZoneOffset
@@ -57,6 +60,8 @@ fun LocalDateTime.formatToStandardIso(): String = format(DateTimeFormatter.ofPat
 
 fun LocalDate.atEndOfTheDay(): LocalDateTime = atTime(23,59,59).atOffset(ZoneOffset.UTC).toLocalDateTime()
 
+fun Double.formatToString() = DecimalFormat("#.#").format(this)
+
 sealed class ActionAlpaca(val action: String) {
     data object Subscribe: ActionAlpaca(action = "subscribe")
     data object Unsubscribe: ActionAlpaca(action = "unsubscribe")
@@ -193,4 +198,80 @@ val popularSymbols = listOf(
         symbol = "SHIBUSD",
         isSubscribed = false,
     ),
-)
+)
+
+fun mockChartData(): AssetChartInfo {
+    val barsAsset = listOf(
+        BarAsset(
+            closingPrice = 429.29,
+            timestamp = LocalDateTime.of(2020,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 705.64,
+            timestamp = LocalDateTime.of(2020,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 668.01,
+            timestamp = LocalDateTime.of(2021,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 679.83,
+            timestamp = LocalDateTime.of(2021,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 775.01,
+            timestamp = LocalDateTime.of(2021,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 1056.86,
+            timestamp = LocalDateTime.of(2021,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 1077.77,
+            timestamp = LocalDateTime.of(2022,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 674.5,
+            timestamp = LocalDateTime.of(2022,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 265.11,
+            timestamp = LocalDateTime.of(2022,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 123.22,
+            timestamp = LocalDateTime.of(2022,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 207.41,
+            timestamp = LocalDateTime.of(2023,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 261.73,
+            timestamp = LocalDateTime.of(2023,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 250.22,
+            timestamp = LocalDateTime.of(2023,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 248.46,
+            timestamp = LocalDateTime.of(2023,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 275.72,
+            timestamp = LocalDateTime.of(2024,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 371.92,
+            timestamp = LocalDateTime.of(2024,4,1,4,0,0),
+        ),
+    )
+    val maxValue = barsAsset.maxOfOrNull { it.closingPrice }!!
+    val minValue = barsAsset.minOfOrNull { it.closingPrice }!!
+    return AssetChartInfo(
+        upperValue = maxValue,
+        lowerValue = minValue,
+        barsInfo = barsAsset,
+    )
+}

app/src/main/java/dev/pinkroom/marketsight/domain/model/bars_asset/AssetChartInfo.kt

@@ -0,0 +1,7 @@
+package dev.pinkroom.marketsight.domain.model.bars_asset
+
+data class AssetChartInfo(
+    val upperValue: Double = 0.0,
+    val lowerValue: Double = 0.0,
+    val barsInfo: List<BarAsset> = emptyList(),
+)

app/src/main/java/dev/pinkroom/marketsight/domain/model/bars_asset/BarAsset.kt

@@ -3,13 +3,13 @@ package dev.pinkroom.marketsight.domain.model.bars_asset
 import java.time.LocalDateTime
 
 data class BarAsset(
-    val closingPrice: Double,
-    val highPrice: Double,
-    val lowPrice: Double,
-    val tradeCountInBar: Int,
-    val openingPrice: Double,
-    val timestamp: LocalDateTime,
-    val barVolume: Double,
-    val volumeWeightedAvgPrice: Double,
+    val closingPrice: Double = 0.0,
+    val highPrice: Double = 0.0,
+    val lowPrice: Double = 0.0,
+    val tradeCountInBar: Int = 0,
+    val openingPrice: Double = 0.0,
+    val timestamp: LocalDateTime = LocalDateTime.now(),
+    val barVolume: Double = 0.0,
+    val volumeWeightedAvgPrice: Double = 0.0,
     val symbol: String? = null,
 )

app/src/main/java/dev/pinkroom/marketsight/presentation/core/theme/Dimensions.kt

@@ -71,6 +71,7 @@ class Dimensions(
     val assetCardHeight: Dp = 90.dp,
     val emptyContentMaxHeight: Float = 0.95f,
     val bottomSheetHeight: Float = 0.45f,
+    val spacingItemChart: Dp = 10.dp
 )
 
 val dimens: Dimensions

app/src/main/java/dev/pinkroom/marketsight/presentation/detail_screen/DetailScreen.kt

@@ -2,14 +2,18 @@ package dev.pinkroom.marketsight.presentation.detail_screen
 
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import dev.pinkroom.marketsight.common.mockChartData
 import dev.pinkroom.marketsight.domain.model.assets.Asset
 import dev.pinkroom.marketsight.domain.model.common.StatusUiRequest
 import dev.pinkroom.marketsight.presentation.core.components.PullToRefreshLazyColumn
 import dev.pinkroom.marketsight.presentation.core.theme.dimens
+import dev.pinkroom.marketsight.presentation.detail_screen.components.AssetChart
 import dev.pinkroom.marketsight.presentation.detail_screen.components.HeaderDetail
 
 @Composable
@@ -37,6 +41,15 @@ fun DetailScreen(
                 onBack = onBack,
             )
         }
+        item {
+            AssetChart(
+                modifier = Modifier
+                    .padding(horizontal = dimens.horizontalPadding, vertical = 10.dp)
+                    .fillMaxWidth()
+                    .height(380.dp),
+                chartInfo = mockChartData(),
+            )
+        }
     }
 }
 

app/src/main/java/dev/pinkroom/marketsight/presentation/detail_screen/DetailUiState.kt

@@ -2,7 +2,7 @@ package dev.pinkroom.marketsight.presentation.detail_screen
 
 import dev.pinkroom.marketsight.common.historicalBarFilters
 import dev.pinkroom.marketsight.domain.model.assets.Asset
-import dev.pinkroom.marketsight.domain.model.bars_asset.BarAsset
+import dev.pinkroom.marketsight.domain.model.bars_asset.AssetChartInfo
 import dev.pinkroom.marketsight.domain.model.bars_asset.FilterHistoricalBar
 import dev.pinkroom.marketsight.domain.model.common.StatusUiRequest
 
@@ -14,5 +14,5 @@ data class DetailUiState(
     val asset: Asset = Asset(),
     val filtersHistoricalBar: List<FilterHistoricalBar> = historicalBarFilters,
     val selectedFilter: FilterHistoricalBar = filtersHistoricalBar.first(),
-    val bars: List<BarAsset> = emptyList(),
+    val assetCharInfo: AssetChartInfo = AssetChartInfo(),
 )

app/src/main/java/dev/pinkroom/marketsight/presentation/detail_screen/DetailViewModel.kt

@@ -78,10 +78,13 @@ class DetailViewModel @Inject constructor(
             )
             when(response) {
                 is Resource.Success -> {
+                    val maxValue = response.data.maxOfOrNull { it.closingPrice } ?: 0.0
+                    val minValue = response.data.minOfOrNull { it.closingPrice } ?: 0.0
+
                     _uiState.update {
                         it.copy(
                             statusHistoricalBars = it.statusHistoricalBars.copy(isLoading = false, errorMessage = null),
-                            bars = response.data,
+                            assetCharInfo = it.assetCharInfo.copy(upperValue = maxValue, lowerValue = minValue, barsInfo = response.data),
                         )
                     }
                 }

app/src/main/java/dev/pinkroom/marketsight/presentation/detail_screen/components/AssetChart.kt

@@ -0,0 +1,255 @@
+package dev.pinkroom.marketsight.presentation.detail_screen.components
+
+import android.graphics.Paint
+import android.graphics.Paint.Align
+import android.graphics.PointF
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.asAndroidPath
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.nativeCanvas
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import dev.pinkroom.marketsight.common.formatToString
+import dev.pinkroom.marketsight.domain.model.bars_asset.AssetChartInfo
+import dev.pinkroom.marketsight.domain.model.bars_asset.BarAsset
+import dev.pinkroom.marketsight.presentation.core.theme.Green
+import dev.pinkroom.marketsight.presentation.core.theme.dimens
+import java.time.LocalDateTime
+
+@Composable
+fun AssetChart(
+    modifier: Modifier,
+    chartInfo: AssetChartInfo,
+    graphColor: Color = Green,
+) {
+    val density = LocalDensity.current
+
+    val transparentGraphColor = remember { graphColor.copy(alpha = 0.5f) }
+    val textPaintY = remember(density) {
+        Paint().apply {
+            color = android.graphics.Color.BLACK
+            textAlign = Align.LEFT
+            textSize = density.run { 12.sp.toPx() }
+        }
+    }
+    val textPaintX = remember(density) {
+        Paint().apply {
+            color = android.graphics.Color.BLACK
+            textAlign = Align.CENTER
+            textSize = density.run { 10.sp.toPx() }
+        }
+    }
+
+    val coordinates = mutableListOf<PointF>()
+    val controlPoints1 = mutableListOf<PointF>()
+    val controlPoints2 = mutableListOf<PointF>()
+
+    Canvas(
+        modifier = modifier
+            //.background(color = Green)
+    ) {
+        // Placing x axis info
+        val addedYears = mutableListOf<Int>()
+        val spacingStart = 2
+        val spacePerHour = size.width / (chartInfo.barsInfo.size+1)
+        (0 until chartInfo.barsInfo.size).forEach { i ->
+            val info = chartInfo.barsInfo[i]
+            val hour = info.timestamp.year
+            if (!addedYears.contains(hour)) {
+                addedYears.add(hour)
+                drawContext.canvas.nativeCanvas.apply {
+                    drawText(
+                        hour.toString(),
+                        ((i+spacingStart) * spacePerHour),
+                        size.height - 55,
+                        textPaintX
+                    )
+                }
+            }
+        }
+
+        // Placing y axis info
+        val heightAxisY = size.height + 8
+        val maxItemsY = 6
+        val yAxisSpace = ( size.height / (maxItemsY+1) )
+        val priceStep = (chartInfo.upperValue - chartInfo.lowerValue) / maxItemsY.toFloat()
+        (0..maxItemsY).forEach { i ->
+            drawContext.canvas.nativeCanvas.apply {
+                drawText(
+                    (chartInfo.lowerValue + priceStep * i).formatToString(),
+                    0f,
+                    heightAxisY - yAxisSpace * (i+1),
+                    textPaintY
+                )
+            }
+        }
+
+        // Placing points
+        val heightPoints = size.height
+        val xAxisSpacePoint = (size.width) / (chartInfo.barsInfo.size+1)
+        (0 until chartInfo.barsInfo.size).forEach { i ->
+            val info = chartInfo.barsInfo[i]
+            val lowerValue = chartInfo.lowerValue
+            val upperValue = chartInfo.upperValue
+
+            val ratio = (info.closingPrice - lowerValue) / (upperValue - lowerValue)
+            val x1 = xAxisSpacePoint * (i + spacingStart)
+            val y1 = (heightPoints-yAxisSpace) - (ratio * (heightPoints-yAxisSpace)).toFloat()
+            coordinates.add(PointF(x1, y1))
+
+            drawCircle(
+                color = Color.Black,
+                radius = 6f,
+                center = Offset(x1, y1),
+            )
+        }
+
+        /** calculating the connection points */
+        for (i in 1 until coordinates.size) {
+            controlPoints1.add(PointF((coordinates[i].x + coordinates[i - 1].x) / 2, coordinates[i - 1].y))
+            controlPoints2.add(PointF((coordinates[i].x + coordinates[i - 1].x) / 2, coordinates[i].y))
+        }
+
+        // Drawing the path
+        val strokePath = Path().apply {
+            reset()
+            moveTo(coordinates.first().x, coordinates.first().y)
+            for (i in 0 until coordinates.size - 1) {
+                cubicTo(
+                    controlPoints1[i].x,controlPoints1[i].y,
+                    controlPoints2[i].x,controlPoints2[i].y,
+                    coordinates[i + 1].x,coordinates[i + 1].y
+                )
+            }
+        }
+
+        drawPath(
+            path = strokePath,
+            color = Color.Red,
+            style = Stroke(
+                width = 2f,
+                cap = StrokeCap.Round
+            )
+        )
+
+        /** filling the area under the path */
+        val fillPath = android.graphics.Path(strokePath.asAndroidPath())
+            .asComposePath()
+            .apply {
+                lineTo(coordinates.last().x, size.height - yAxisSpace)
+                lineTo(coordinates.first().x, size.height - yAxisSpace)
+                close()
+            }
+        drawPath(
+            fillPath,
+            brush = Brush.verticalGradient(
+                listOf(
+                    Color.Cyan,
+                    Color.Transparent,
+                ),
+                endY = size.height - yAxisSpace
+            ),
+        )
+    }
+}
+
+@Preview(
+    showSystemUi = true,
+    showBackground = true,
+)
+@Composable
+fun AssetCharPreview() {
+    val barsAsset = listOf(
+        BarAsset(
+            closingPrice = 429.29,
+            timestamp = LocalDateTime.of(2020,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 705.64,
+            timestamp = LocalDateTime.of(2020,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 668.01,
+            timestamp = LocalDateTime.of(2021,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 679.83,
+            timestamp = LocalDateTime.of(2021,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 775.01,
+            timestamp = LocalDateTime.of(2021,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 1056.86,
+            timestamp = LocalDateTime.of(2021,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 1077.77,
+            timestamp = LocalDateTime.of(2022,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 674.5,
+            timestamp = LocalDateTime.of(2022,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 265.11,
+            timestamp = LocalDateTime.of(2022,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 123.22,
+            timestamp = LocalDateTime.of(2022,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 207.41,
+            timestamp = LocalDateTime.of(2023,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 261.73,
+            timestamp = LocalDateTime.of(2023,4,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 250.22,
+            timestamp = LocalDateTime.of(2023,7,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 248.46,
+            timestamp = LocalDateTime.of(2023,10,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 275.72,
+            timestamp = LocalDateTime.of(2024,1,1,4,0,0),
+        ),
+        BarAsset(
+            closingPrice = 371.92,
+            timestamp = LocalDateTime.of(2024,4,1,4,0,0),
+        ),
+    )
+    val maxValue = barsAsset.maxOfOrNull { it.closingPrice }!!
+    val minValue = barsAsset.minOfOrNull { it.closingPrice }!!
+    AssetChart(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = dimens.horizontalPadding, vertical = 10.dp)
+            .height(380.dp),
+        chartInfo = AssetChartInfo(
+            upperValue = maxValue,
+            lowerValue = minValue,
+            barsInfo = barsAsset,
+        ),
+    )
+}