diff --git a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt b/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt index 503d8de..f8e8109 100644 --- a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt +++ b/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/MainActivity.kt @@ -5,19 +5,15 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import ir.ehsannarmani.compose_charts.ui.App -import ir.ehsannarmani.compose_charts.ui.theme.ComposeChartsTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - enableEdgeToEdge() setContent { - ComposeChartsTheme(false) { - App() - } + App() } } } diff --git a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt b/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt deleted file mode 100644 index 8227cd0..0000000 --- a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt +++ /dev/null @@ -1,54 +0,0 @@ -package ir.ehsannarmani.compose_charts.ui.theme - -import android.os.Build -import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material3.LocalTextStyle -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Typography -import androidx.compose.material3.darkColorScheme -import androidx.compose.material3.dynamicDarkColorScheme -import androidx.compose.material3.dynamicLightColorScheme -import androidx.compose.material3.lightColorScheme -import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.Font -import androidx.compose.ui.text.font.FontFamily -import ir.ehsannarmani.compose_charts.R - -private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80 -) - -private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40 -) - -@Composable -fun ComposeChartsTheme( - darkTheme: Boolean = isSystemInDarkTheme(), - // Dynamic color is available on Android 12+ - dynamicColor: Boolean = true, - content: @Composable () -> Unit -) { - val colorScheme = when { - dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { - val context = LocalContext.current - if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) - } - - darkTheme -> DarkColorScheme - else -> LightColorScheme - } - - MaterialTheme( - colorScheme = colorScheme, - typography = Typography(), - content = content - ) -} \ No newline at end of file diff --git a/app/src/commonMain/composeResources/drawable/dark_mode.xml b/app/src/commonMain/composeResources/drawable/dark_mode.xml new file mode 100644 index 0000000..2faafbb --- /dev/null +++ b/app/src/commonMain/composeResources/drawable/dark_mode.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/commonMain/composeResources/drawable/light_mode.xml b/app/src/commonMain/composeResources/drawable/light_mode.xml new file mode 100644 index 0000000..ff2e7cc --- /dev/null +++ b/app/src/commonMain/composeResources/drawable/light_mode.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/PhoneSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/AllSamples.kt similarity index 73% rename from app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/PhoneSample.kt rename to app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/AllSamples.kt index 92030a9..d7051c1 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/PhoneSample.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/AllSamples.kt @@ -3,14 +3,14 @@ package ir.ehsannarmani.compose_charts.ui import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.statusBarsPadding -import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor -import androidx.compose.ui.graphics.drawscope.DrawStyle import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @@ -19,14 +19,14 @@ import ir.ehsannarmani.compose_charts.models.AnimationMode import ir.ehsannarmani.compose_charts.models.DotProperties import ir.ehsannarmani.compose_charts.models.Line import ir.ehsannarmani.compose_charts.models.PopupProperties -import ir.ehsannarmani.compose_charts.models.StrokeStyle @Composable -fun PhoneSample() { - LazyColumn( - modifier = Modifier - .statusBarsPadding(), verticalArrangement = Arrangement.spacedBy(28.dp), - contentPadding = PaddingValues(22.dp) +fun TabletSample() { + LazyVerticalGrid( + columns = GridCells.Adaptive(250.dp), + verticalArrangement = Arrangement.spacedBy(28.dp), + horizontalArrangement = Arrangement.spacedBy(28.dp), + contentPadding = PaddingValues(28.dp) ) { item { ChartParent(Modifier) { @@ -52,23 +52,26 @@ fun PhoneSample() { }, dotsProperties = DotProperties( enabled = true, - color = SolidColor(Color.White) + color = SolidColor(MaterialTheme.colorScheme.onSurface) ), modifier = Modifier.padding(22.dp), animationMode = AnimationMode.None, minValue = 0.0, maxValue = 7.0, - popupProperties = PopupProperties( - textStyle = TextStyle.Default.copy( - color = Color.White, - fontSize = 12.sp + labelProperties = labelProperties, + labelHelperProperties = labelHelperProperties, + indicatorProperties = indicatorProperties, + popupProperties = + PopupProperties( + textStyle = TextStyle.Default.copy( + color = Color.White, + fontSize = 12.sp + ), + confirmDraw = { + false + } ), - confirmDraw = { - false - } - ), - - ) + ) } } // Pie @@ -93,7 +96,7 @@ fun PhoneSample() { ColumnSample3() } - // Row + //Row item { RowSample() } @@ -132,5 +135,11 @@ fun PhoneSample() { item { LineSample9() } + } -} \ No newline at end of file +} + + + + + diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt index 0b6764c..9008646 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/App.kt @@ -1,33 +1,49 @@ package ir.ehsannarmani.compose_charts.ui -import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.* +import androidx.compose.runtime.* import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.layout.onGloballyPositioned -import androidx.compose.ui.platform.LocalDensity -import androidx.compose.ui.unit.dp +import composecharts.app.generated.resources.Res +import composecharts.app.generated.resources.dark_mode +import composecharts.app.generated.resources.light_mode +import ir.ehsannarmani.compose_charts.ui.theme.ComposeChartsTheme +import org.jetbrains.compose.resources.painterResource +@OptIn(ExperimentalMaterial3Api::class) @Composable -fun App(){ - val density = LocalDensity.current - var composableWidth by remember { mutableStateOf(0.dp) } - - Box(modifier = Modifier - .fillMaxSize() - .background(Color(0xff101010)).onGloballyPositioned { coordinates -> - composableWidth = with(density){ coordinates.size.width.toDp() } - }){ - if (composableWidth >= 600.dp) { - TabletSample() - }else{ - PhoneSample() +fun App() { + val systemInDarkTheme = isSystemInDarkTheme() + var useDarkTheme: Boolean by remember(systemInDarkTheme) { mutableStateOf(systemInDarkTheme) } + ComposeChartsTheme(darkTheme = useDarkTheme) { + Scaffold( + topBar = { + TopAppBar( + title = { + Text("Compose Charts") + }, + actions = { + IconButton( + onClick = { + useDarkTheme = !useDarkTheme + } + ) { + Icon( + painter = painterResource( + if (useDarkTheme) Res.drawable.light_mode else Res.drawable.dark_mode + ), + contentDescription = if (useDarkTheme) "Switch to light mode" else "Switch to dark mode" + ) + } + } + ) + } + ) { innerPadding -> + Box(modifier = Modifier.padding(innerPadding)) { + TabletSample() + } } } -} \ No newline at end of file +} diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt index 11dd777..0482e65 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ChartParent.kt @@ -1,14 +1,10 @@ package ir.ehsannarmani.compose_charts.ui -import androidx.compose.foundation.border import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card -import androidx.compose.material3.CardDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp @Composable @@ -16,13 +12,7 @@ fun ChartParent(modifier: Modifier, content: @Composable () -> Unit) { Card( modifier = modifier .height(270.dp) - .fillMaxWidth() - .border(2.dp, Color.Transparent, RoundedCornerShape(12.dp)), - elevation = CardDefaults.elevatedCardElevation(2.dp), - colors = CardDefaults.cardColors( - containerColor = Color(0xff2D2D2D) - ) - + .fillMaxWidth(), ) { content() } diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt index c587ce5..f2d6f6e 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/ColumnSample.kt @@ -136,11 +136,7 @@ fun ColumnSample(modifier: Modifier=Modifier) { spacing = 3.dp, thickness = 20.dp ), - indicatorProperties = HorizontalIndicatorProperties( - textStyle = TextStyle(fontSize = 12.sp, fontFamily = ubuntu, color = Color.White), - count = IndicatorCount.CountBased(count = 4), - position = IndicatorPosition.Horizontal.Start, - ), + indicatorProperties = indicatorProperties, gridProperties = columnGridProperties, labelProperties = labelProperties, animationSpec = spring( diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt index 37b1c25..56fcca8 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/LineSample.kt @@ -3,9 +3,9 @@ package ir.ehsannarmani.compose_charts.ui import androidx.compose.animation.core.EaseInOutCubic import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding +import androidx.compose.material3.LocalContentColor import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier @@ -137,15 +137,7 @@ fun LineSample(modifier: Modifier=Modifier) { }), gridProperties = gridProperties, dividerProperties = dividerProperties, - indicatorProperties = HorizontalIndicatorProperties( - textStyle = TextStyle( - fontSize = 11.sp, - fontFamily = ubuntu, color = Color.White, - ), - contentBuilder = { - it.format(1) + " M" - }, - ), + indicatorProperties = indicatorProperties, labelHelperProperties = labelHelperProperties, curvedEdges = false ) @@ -202,7 +194,7 @@ fun LineSample2(modifier: Modifier=Modifier) { popupProperties = PopupProperties( textStyle = TextStyle( fontSize = 11.sp, - color = Color.White, + color = LocalContentColor.current, fontFamily = ubuntu ), contentBuilder = { popup-> @@ -218,7 +210,8 @@ fun LineSample2(modifier: Modifier=Modifier) { indicatorProperties = HorizontalIndicatorProperties( textStyle = TextStyle( fontSize = 11.sp, - fontFamily = ubuntu, color = Color.White + fontFamily = ubuntu, + color = LocalContentColor.current ), contentBuilder = { it.format(1) + " °C" @@ -233,7 +226,7 @@ fun LineSample2(modifier: Modifier=Modifier) { } } @Composable -fun LineSample3(modifier: Modifier=Modifier) { +fun LineSample3() { val data = remember { listOf( Line( diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/Styles.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/Styles.kt index de31d72..464aa25 100644 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/Styles.kt +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/Styles.kt @@ -1,14 +1,23 @@ package ir.ehsannarmani.compose_charts.ui +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.unit.sp -import ir.ehsannarmani.compose_charts.models.LabelHelperProperties -import ir.ehsannarmani.compose_charts.models.LabelProperties +import ir.ehsannarmani.compose_charts.models.* -val labelHelperProperties: LabelHelperProperties @Composable get() = LabelHelperProperties(textStyle = TextStyle(fontSize = 12.sp, fontFamily = ubuntu, color = Color.White)) -val labelProperties: LabelProperties @Composable get() = LabelProperties( - enabled = true, - textStyle = TextStyle(fontSize = 12.sp, fontFamily = ubuntu, color = Color.White) -) \ No newline at end of file +val labelHelperProperties: LabelHelperProperties + @Composable get() = + LabelHelperProperties(textStyle = MaterialTheme.typography.labelMedium.copy(color = LocalContentColor.current)) +val labelProperties: LabelProperties + @Composable get() = LabelProperties( + enabled = true, + textStyle = MaterialTheme.typography.labelMedium.copy(color = LocalContentColor.current) + ) + +val indicatorProperties: HorizontalIndicatorProperties + @Composable + get() = HorizontalIndicatorProperties( + textStyle = MaterialTheme.typography.labelMedium.copy(color = LocalContentColor.current), + count = IndicatorCount.CountBased(count = 4), + position = IndicatorPosition.Horizontal.Start, + ) \ No newline at end of file diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/TabletSample.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/TabletSample.kt deleted file mode 100644 index 37b2f77..0000000 --- a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/TabletSample.kt +++ /dev/null @@ -1,86 +0,0 @@ -package ir.ehsannarmani.compose_charts.ui - -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.lazy.grid.GridCells -import androidx.compose.foundation.lazy.grid.LazyVerticalGrid -import androidx.compose.runtime.Composable -import androidx.compose.ui.unit.dp - -@Composable -fun TabletSample() { - LazyVerticalGrid( - columns = GridCells.Adaptive(250.dp), - verticalArrangement = Arrangement.spacedBy(28.dp), - horizontalArrangement = Arrangement.spacedBy(28.dp), - contentPadding = PaddingValues(28.dp) - ){ - // Pie - item { - PieSample() - } - item { - PieSample2() - } - item { - PieSample3() - } - - // Column - item { - ColumnSample() - } - item { - ColumnSample2() - } - item { - ColumnSample3() - } - - //Row - item { - RowSample() - } - item { - RowSample2() - } - item { - RowSample3() - } - - // Line - item { - LineSample() - } - item { - LineSample2() - } - item { - LineSample4() - } - item { - LineSample8() - } - item { - LineSample7() - } - item { - LineSample6() - } - item { - LineSample5() - } - item { - LineSample3() - } - item { - LineSample9() - } - - } -} - - - - - diff --git a/app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Color.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Color.kt similarity index 100% rename from app/src/androidMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Color.kt rename to app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Color.kt diff --git a/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt new file mode 100644 index 0000000..ef47d2b --- /dev/null +++ b/app/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/ui/theme/Theme.kt @@ -0,0 +1,35 @@ +package ir.ehsannarmani.compose_charts.ui.theme + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Typography +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color + +private val DarkColorScheme = darkColorScheme( + primary = Purple80, + secondary = PurpleGrey80, + tertiary = Pink80, + surface = Color(0xff101010), + surfaceContainerHighest = Color(0xff2d2d2d), +) + +private val LightColorScheme = lightColorScheme( + primary = Purple40, + secondary = PurpleGrey40, + tertiary = Pink40 +) + +@Composable +fun ComposeChartsTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable () -> Unit +) { + MaterialTheme( + colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme, + typography = Typography(), + content = content + ) +}