Giter VIP home page Giter VIP logo

composable-graphs's Introduction

Composable-Graphs

Kotlin CodeQL tag Jetpack Compose
jetc.dev

✨ A very Minimal, Sleek and Lightweight Graph library for Android using Jetpack Compose

Important ⚠️

Please migrate to v1.2.2 or above if you are using lower versions and refer the updated documentation below for the usage

Gradle Setup

Latest version:

In settings.gradle.kts, Add jitpack url

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven(url = "https://jitpack.io") // Add jitpack
    }
}

In build.gradle.kts, in dependencies block, add

implementation("com.github.jaikeerthick:Composable-Graphs:v{version}") //ex: v1.2.3

Graphs Available

  1. Line Graph
  2. Bar Graph
  3. Pie Chart
  4. Donut Chart (Normal, Progressive)

Preview

       


Usage

1. Line Graph

val data = listOf(LineData(x = "Sun", y = 200), LineData(x = "Mon", y = 40))

LineGraph(
    modifier = Modifier
        .padding(horizontal = 16.dp, vertical = 12.dp),
    data = data,
    onPointClick = { value: LineData ->
        // do something with value
    },
)

2. Bar Graph

BarGraph(
    data = listOf(BarData(x = "22", y = 20), BarData(x = "23", y = 30)),
)

3. Pie Chart

// sample data
val pieChartData = listOf(
    PieData(value = 130F, label = "HTC", color = Color.Green),
    PieData(value = 260F, label = "Apple", labelColor = Color.Blue),
    PieData(value = 500F, label = "Google"),
)

// composable
PieChart(
    modifier = Modifier
        .padding(vertical = 20.dp)
        .size(220.dp),
    data = pieChartData,
    onSliceClick = { pieData ->
        Toast.makeText(context, "${pieData.label}", Toast.LENGTH_SHORT).show()
    }
)

4. Donut Chart

Donut Chart supports 2 types of implementations: DonutChartType.Normal and DonutChartType.Progressive()

// sample values
val donutChartData = listOf(
    DonutData(value = 30F),
    DonutData(value = 60F),
    DonutData(value = 70F),
    DonutData(value = 50F),
)

// composable
DonutChart(
    modifier = Modifier
        .padding(vertical = 20.dp)
        .size(220.dp),
    data = donutChartData,
    type = DonutChartType.Progressive(),
    style = viewModel.donutChartStyle,
)

Styling

Create stunning & colorful graphs with awesome styling🎨. Composable-Graphs supports various styling helpers:

  • Modifier (Yes, We heard you!💬)
  • Visibility
  • Colors
  • LabelPosition
val style = BarGraphStyle(
                    visibility = BarGraphVisibility(
                        isYAxisLabelVisible = true
                    ),
                    yAxisLabelPosition = LabelPosition.RIGHT
                )

val style2 = LineGraphStyle(
                    visibility = LinearGraphVisibility(
                        isYAxisLabelVisible = false,
                        isCrossHairVisible = true
                    ),
                    colors = LinearGraphColors(
                        lineColor = GraphAccent2,
                        pointColor = GraphAccent2,
                        clickHighlightColor = PointHighlight2,
                        fillType = LineGraphFillType.Gradient(
                            brush = Brush.verticalGradient(listOf(Color.Green, Color.Yellow))
                        )
                    )
                )

Work In Progress (v1.2.4) :

Features

  • Show y values above points & bars (sticky)

Interaction

  • Ability to turn off interaction on charts (disable clicks)

Grid

  • Customize grid color
  • Ability to control visibility of x and y axis grids separately

Highlight

  • Highlight Shape for Line Graph - Circle, HallowedCircle, Triangle, Square
  • Control size of the highlight


Contributions are welcome ❤️

composable-graphs's People

Contributors

briseglace avatar jaikeerthick avatar ngallazzi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

composable-graphs's Issues

Decouple axis labels from LineData

When there are many many points flooding in, x-axis labels are overwhelmed. It would be nice if it could be decoupled. For example, accepting a function to convert point data to labels, and accept a parameter to control the density of labels.

This might be a breaking API change.

Screenshot 2024-03-09 at 11 39 35 AM

I wish the density of grid lines could be configured as well.

Support Compose Multiplatform?

Would you support Compose Multiplatform?

I just have a quick look on the source code. It seems the core does not depend on Android-specific stuffs, so it might not be difficult. If you have no time, would you accept a PR?

Handle edge cases

This is a nice library, and I would like you to consider a few enhancements. I will create one by one.

The first one is to handle edge cases. Specifically, for line charts:

  1. Display a single point if the number of data is 1
  2. Do not crash if there is no data. Perhaps display an empty graph is fine.

Update Compose Version

Hello, I'm interested in your open source!
I have some questions!

The current version of compose is 1.1.0, can you version up?
Or can I contribute to the update of the compose version?

[bug] Biggest Value in graph being a decimal goes off the graph

Describe the bug
When your largest number in the line graph contains a decimal and is not a whole number, it goes above the graph.

To Reproduce
Steps to reproduce the behavior:

  1. Create a LineGraph composable
  2. Give it's biggest point on the graph a decimal value
  3. look at graph

Example data to replicate issue:

listOf(
        LineData(x = "Mon", y = 0),
        LineData(x = "Tues", y = 0),
        LineData(x = "Wed", y = 0),
        LineData(x = "Thurs", y = 0),
        LineData(x = "Fri", y = 2.59999999),
        LineData(x = "Sat", y = 0),
        LineData(x = "Sun", y = 0),
    )

Expected behavior
To see points within graph

Screenshots
If applicable, add screenshots to help explain your problem.

Screenshot 2024-06-07 at 11 47 40 PM

Smartphone (please complete the following information):

  • Device: Pixel 3a
  • Android Version: API 33
  • Library Version [v1.2.3]

Additional context
Add any other context about the problem here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.