add sample for single line

hamidfathi1998 · Apr 28, 2023 · b2a9211 · b2a9211
1 parent 6a2eb98
commit b2a9211
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 88 deletions.
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/DigiPlot/src/main/java/ir/hfathi/digiplot/line/LineGraph.kt b/DigiPlot/src/main/java/ir/hfathi/digiplot/line/LineGraph.kt
@@ -36,7 +36,8 @@ import kotlin.math.ceil
 
 @Composable
 fun LineGraph(
-    plot: LinePlot, modifier: Modifier = Modifier,
+    plot: LinePlot,
+    modifier: Modifier = Modifier,
     onSelectionStart: () -> Unit = {},
     onSelectionEnd: () -> Unit = {},
     onSelection: ((Float, List<DataPoint>) -> Unit)? = null
@@ -235,7 +236,7 @@ fun LineGraph(
                                         val displayCurrentXValue = "$${dataModel.y}"
                                         maxMinLabelModel.draw.invoke(
                                             this,
-                                            "$${dataModel.y}",
+                                            displayCurrentXValue,
                                             getMinimumXTextOffset(
                                                 sizeWidth = size.width,
                                                 textWidth = maxMinLabelModel.paint.measureText(

diff --git a/app/src/main/java/ir/hfathi/digiplotsample/MainActivity.kt b/app/src/main/java/ir/hfathi/digiplotsample/MainActivity.kt
@@ -8,49 +8,39 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import ir.hfathi.digiplot.line.DataPoint
-import ir.hfathi.digiplotsample.DataPoints.dataPoints2
+import ir.hfathi.digiplotsample.data.DataPoints.dataPoints2
+import ir.hfathi.digiplotsample.sample.LineGraphSample1
 import ir.hfathi.digiplotsample.ui.theme.DigiPlotSampleTheme
-import ir.hfathi.digiplotsample.ui.theme.md_blue_gray
+import ir.hfathi.digiplotsample.ui.theme.md_light_gray
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             DigiPlotSampleTheme {
-                // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Column {
-                        LineGraphSample1(listOf(dataPoints2))
+                    Column(modifier = Modifier.background(md_light_gray)) {
+                        Card(
+                            modifier = Modifier
+                                .padding(16.dp),
+                            shape = MaterialTheme.shapes.medium,
+                            colors = CardDefaults.cardColors(
+                                containerColor = MaterialTheme.colorScheme.primaryContainer
+                            )
+                        ) {
+                            LineGraphSample1(lines = listOf(dataPoints2))
+                        }
                     }
                 }
             }
         }
     }
 }
-
-
-@Composable
-private fun LineGraphSample1(lines: List<List<DataPoint>>){
-    Card(
-        modifier = Modifier.padding(16.dp).background(md_blue_gray),
-        shape = MaterialTheme.shapes.medium,
-    ) {
-        LineGraphSample(lines)
-    }
-}
-@Composable
-@Preview
-fun LineGraphSample1Preview(){
-    LineGraphSample1(listOf(dataPoints2))
-}
diff --git a/...va/ir/hfathi/digiplotsample/DataPoints.kt → .../hfathi/digiplotsample/data/DataPoints.kt b/...va/ir/hfathi/digiplotsample/DataPoints.kt → .../hfathi/digiplotsample/data/DataPoints.kt
@@ -1,4 +1,4 @@
-package ir.hfathi.digiplotsample
+package ir.hfathi.digiplotsample.data
 
 import ir.hfathi.digiplot.line.DataPoint
 
@@ -13,21 +13,21 @@ object DataPoints {
         DataPoint(6f, 75f),
         DataPoint(7f, 100f),
         DataPoint(8f, 80f),
-//        DataPoint(9f, 75f),
-//        DataPoint(10f, 55f),
-//        DataPoint(11f, 45f),
-//        DataPoint(12f, 50f),
-//        DataPoint(13f, 80f),
-//        DataPoint(14f, 70f),
-//        DataPoint(15f, 125f),
-//        DataPoint(16f, 200f),
-//        DataPoint(17f, 170f),
-//        DataPoint(18f, 135f),
-//        DataPoint(19f, 60f),
-//        DataPoint(20f, 20f),
-//        DataPoint(21f, 40f),
-//        DataPoint(22f, 75f),
-//        DataPoint(23f, 50f),
+        DataPoint(9f, 75f),
+        DataPoint(10f, 55f),
+        DataPoint(11f, 45f),
+        DataPoint(12f, 50f),
+        DataPoint(13f, 80f),
+        DataPoint(14f, 70f),
+        DataPoint(15f, 125f),
+        DataPoint(16f, 200f),
+        DataPoint(17f, 170f),
+        DataPoint(18f, 135f),
+        DataPoint(19f, 60f),
+        DataPoint(20f, 20f),
+        DataPoint(21f, 40f),
+        DataPoint(22f, 75f),
+        DataPoint(23f, 50f),
     )
 
     val dataPoints2 = listOf(

diff --git a/.../hfathi/digiplotsample/LineGraphSample.kt → ...digiplotsample/sample/LineGraphSample1.kt b/.../hfathi/digiplotsample/LineGraphSample.kt → ...digiplotsample/sample/LineGraphSample1.kt
@@ -1,6 +1,7 @@
-package ir.hfathi.digiplotsample
+package ir.hfathi.digiplotsample.sample
 
 import android.graphics.Paint
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -13,35 +14,41 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.core.graphics.alpha
 import androidx.core.graphics.blue
 import androidx.core.graphics.green
 import androidx.core.graphics.red
 import ir.hfathi.digiplot.line.DataPoint
 import ir.hfathi.digiplot.line.LineGraph
 import ir.hfathi.digiplot.line.LinePlot
+import ir.hfathi.digiplotsample.data.DataPoints
 import ir.hfathi.digiplotsample.ui.theme.DigiPlotSampleTheme
+import ir.hfathi.digiplotsample.ui.theme.md_blue_gray
 import ir.hfathi.digiplotsample.ui.theme.md_green
 import java.text.DecimalFormat
 
 
 @Composable
-internal fun LineGraphSample(lines: List<List<DataPoint>>) {
+internal fun LineGraphSample1(modifier: Modifier = Modifier, lines: List<List<DataPoint>>) {
     val totalWidth = remember { mutableStateOf(0) }
-    Column(Modifier.onGloballyPositioned {
+    val density = LocalDensity.current
+    Column(modifier = modifier.onGloballyPositioned {
         totalWidth.value = it.size.width
-    }) {
+    }.background(color = Color.Transparent)) {
         val xOffset = remember { mutableStateOf(0f) }
         val cardWidth = remember { mutableStateOf(0) }
         val visibility = remember { mutableStateOf(false) }
         val points = remember { mutableStateOf(listOf<DataPoint>()) }
 
         Box(
             modifier = Modifier
-                .height(150.dp)
+                .height(120.dp)
                 .fillMaxWidth(),
             contentAlignment = Alignment.Center
         ) {
@@ -94,59 +101,39 @@ internal fun LineGraphSample(lines: List<List<DataPoint>>) {
                             color = Color.Red
                         )
                     }
-                    Surface(
+                    Box(
                         modifier = Modifier
-                            .width(50.dp)
-                            .onGloballyPositioned {
-                                cardWidth.value = it.size.width
-                            }
-                            .graphicsLayer(translationX = xOffset.value)
-                            .alpha(if (visibility.value) 1f else 0f),
+                            .height(32.dp)
+                            .fillMaxWidth()
                     ) {
                         Text(
                             textAlign = TextAlign.Center,
                             text = "${time.toInt()}:00",
                             style = MaterialTheme.typography.labelLarge,
                             color = Color.Gray,
-                            modifier = Modifier.padding(all = 4.dp)
+                            modifier = Modifier
+                                .padding(all = 4.dp)
+                                .onGloballyPositioned {
+                                    cardWidth.value = it.size.width
+                                }
+                                .graphicsLayer(translationX = xOffset.value)
+                                .alpha(if (visibility.value) 1f else 0f),
                         )
-
                     }
                 }
             }
         }
 
         LineGraph(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(200.dp),
             plot = LinePlot(
                 horizontalExtraSpace = 20.dp,
                 paddingTop = 50.dp,
                 paddingBottom = 120.dp,
                 isZoomAllowed = false,
-                lines = listOf(
-                    LinePlot.Line(
-                        lineShadowAlpha = 0.2f,
-                        dataPoints = lines[0],
-                        connection = LinePlot.Connection(
-                            color = md_green,
-                            strokeWidth = 2.dp,
-                        ),
-                        intersection = null,
-                        maxMinLabel = LinePlot.MaxMinLabel(
-                            paint = Paint().apply {
-                                color = Color.Gray.toInt()
-                                textAlign = Paint.Align.LEFT
-                                textSize = 30f
-                            },
-                            maxLabelXY = Pair(10f, 50f),
-                            minLabelXY = Pair(10f, 60f)
-                        ),
-                        highlight = LinePlot.Highlight(
-                            color = md_green,
-                            borderColor = Color.White,
-                            borderEnable = true
-                        ),
-                    ),
-                ),
+                lines = getLinesDetails(lines = lines, density = density),
                 selection = LinePlot.Selection(
                     enabled = true,
                     highlight = LinePlot.Connection(
@@ -159,9 +146,7 @@ internal fun LineGraphSample(lines: List<List<DataPoint>>) {
                 ),
 
                 ),
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(200.dp),
+
             onSelectionStart = { visibility.value = true },
             onSelectionEnd = { visibility.value = false },
 
@@ -173,20 +158,53 @@ internal fun LineGraphSample(lines: List<List<DataPoint>>) {
                 xCenter - cWidth / 2f < 0f -> 0f
                 else -> xCenter - cWidth / 2f
             }
-            xOffset.value = xCenter
+            xOffset.value = xCenter - (xCenter * 0.1f)
             points.value = pts
         }
     }
 }
 
+private fun getLinesDetails(lines: List<List<DataPoint>>, density: Density): List<LinePlot.Line> {
+    val result = mutableListOf<LinePlot.Line>()
+    lines.forEach { line ->
+        result.add(
+            LinePlot.Line(
+                lineShadowAlpha = 0.2f,
+                dataPoints = line,
+                connection = LinePlot.Connection(
+                    color = if (line.first().y != 5f) md_green else md_blue_gray,
+                    strokeWidth = 2.dp,
+                ),
+                intersection = null,
+                maxMinLabel = LinePlot.MaxMinLabel(
+                    paint = Paint().apply {
+                        color = Color.Gray.toInt()
+                        textAlign = Paint.Align.LEFT
+                        textSize = density.run { 14.sp.toPx() }
+                    },
+                    maxLabelXY = Pair(10f, 50f),
+                    minLabelXY = Pair(10f, 60f)
+                ),
+                highlight = LinePlot.Highlight(
+                    color = md_green,
+                    borderColor = Color.White,
+                    borderEnable = true
+                ),
+            )
+        )
+    }
+    return result
+}
+
 @Preview(showBackground = true)
 @Composable
-fun LineGraph2Preview() {
+fun LineGraphPreview() {
     DigiPlotSampleTheme {
-        LineGraphSample(listOf(DataPoints.dataPoints1, DataPoints.dataPoints2))
+        LineGraphSample1(lines = listOf(DataPoints.dataPoints1, DataPoints.dataPoints2))
     }
 }
 
+
 fun Color.toInt(): Int {
     return android.graphics.Color.argb(
         this.toArgb().alpha,

diff --git a/app/src/main/java/ir/hfathi/digiplotsample/ui/theme/Color.kt b/app/src/main/java/ir/hfathi/digiplotsample/ui/theme/Color.kt
@@ -8,6 +8,7 @@ val Pink80 = Color(0xFFEFB8C8)
 
 val md_green = Color(0xFF1BC47D)
 val md_blue_gray = Color(0xFF37474F)
+val md_light_gray = Color(0xFFF5F5F5)
 
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)