Code Monkey home page Code Monkey logo

th-contributionchart's Introduction

TH-ContributionChart

alt text alt text ##Summary:

Contribution chart is an implementation of the github contribution chart, on android. The chart is used to show the contribution of a person on a day-to-day basis in a month. It contains multiple grids, each representing a day of a month. The month and year can be set by the developer.The color of the grid changes depending on contribution made by the person on that particular day. The developer needs to know the minimum or ideal contribution that has to be done in a day. Based on per day actual value and ideal/minimum value of contribution, the taskcalculator calculates the percentage of work done in a day, which in turn is used as a paramater to fill the grid with a particular color. This can also be used to show the contributions made through out an year. The developer can change the percent-color mapping as per the requirement.

##How to use:

  • Deployment target should be Api level 13 or above.

  • Layouts:

    • Add the below layout to your main layout

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
      
            <RadioGroup
                android:id="@+id/radioGroup1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:checkedButton="@+id/jan"
                android:orientation="horizontal" >
      
                <RadioButton
                    android:id="@+id/jan"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/jan"/>
                <RadioButton
                    android:id="@+id/feb"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/feb" />
      
                <RadioButton
                    android:id="@+id/mar"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/mar"/>
                <RadioButton
                    android:id="@+id/apr"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text= "@string/apr"/>
                <RadioButton
                    android:id="@+id/may"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/may"/>
                <RadioButton
                    android:id="@+id/jun"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/jun"/>
                <RadioButton
                    android:id="@+id/jul"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/jul"/>
      
                <RadioButton
                    android:id="@+id/aug"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/aug"/>
      
                <RadioButton
                    android:id="@+id/sep"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/sep"/>
                <RadioButton
                    android:id="@+id/oct"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/oct"/>
                <RadioButton
                    android:id="@+id/nov"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/nov"/>
      
                <RadioButton
                    android:id="@+id/dec"
                    style="?android:attr/textAppearanceButton"
                    android:layout_width="60dp"
                    android:layout_height="50dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/tab_selector"
                    android:button="@android:color/transparent"
                    android:gravity="center"
                    android:text="@string/dec"/>
            </RadioGroup>
        </LinearLayout>
      

    • Add griditem.xml to your layout folder, copy all the contents of drawable in your drawable folder. Copy style "Singlegradient" to your style.xml.
  • Class:

    • Add GridViewAdapter.java and TaskCalculator.java to your project.

##Implementation:

  • Place monthlystat method in your main activity.

  • Creating TaskCalculator object:

      - Create object of TaskCalculator by passing the context, activity and a boolean value.
        This boolean value should be false for an year based contribution chart and true for month based 
        contribution chart.		
      	  
      	  
      	  Ex:
      	   	
      	   	TaskCalculator t = new TaskCalculator(getApplicationContext(), MainActivity.this,
      		false);  // false = chart for an year
      				 // true =  chart for a month
    
  • For yearly contribution chart:

    - Create 12 arraylists of type integer,each corresponding to a month and add the contribution value of 
      each day of the month to it. If the contribution for a day is null, put '0' as the value for that day.
    
    - Pass the arraylists, minimum/ideal value of contribution and year to the `calculate` method of `TaskCalculator.java`.
    	
    	Ex:
    	
    	t.calculate(janVal, febVal, marVal, aprVal, mayVal, junVal, julVal, augVal, sepVal, octVal, novVal, decVal, 24, 2013);
    	
    	// janval - decval = arrayLists
    	
    	// 24 = min/ideal contribution value
    
    	// 2013 = year
    
  • For monthly contribution chart:

      - Create an arraylist of type integer and add the contribution value of each day of the month to it.
        If the contribution for a day is null, put '0' as the value for that day.
    
    
      -  Pass the arraylist, minimum/ideal value of contribution, month(integer value, ex jan=0,feb=1...) and year
         to the `calculateMonthContribution` method of `TaskCalculator.java`. 
    
      	Ex:
    
      	t.calculateMonthContribution(janVal, 24, 1, 2012);
      	
      
      	// janVal = array
      
      	// 24 = min/ideal value of contribution
      
      	// 9 = october
      
      	// 2013 =year
    

##Customizations:

  • Percent-Color mapping:

    • User can change the percent to color mapping as per the requirement from the GridViewAdapter.java class

        if (percentval == 0) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundColor(Color.WHITE);
      
        } else if (percentval >= 1 && percentval <= 20) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundResource(R.color.blueShade1);
      
        } else if (percentval >= 21 && percentval <= 40) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundResource(R.color.blueShade2);
      
        } else if (percentval >= 41 && percentval <= 60) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundResource(R.color.blueShade3);
      
        } else if (percentval >= 61 && percentval <= 80) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundResource(R.color.blueShade4);
      
        } else if (percentval >= 81 && percentval <= 100) {
      
        	holder.textval.setText("");
        	holder.textval.setBackgroundResource(R.color.blueShade5);
        }
      
  • Weekday header:

    • The header to the chart, which currently shows the days of the week can be changed as per requirement

      if (position >= 0 && position <= 6) {

        switch (position) {
      
        case 0:
        	holder.textval.setText(R.string.sun);
        	break;
      
        case 1:
        	holder.textval.setText(R.string.mon);
        	break;
      
        case 2:
        	holder.textval.setText(R.string.tue);
        	break;
      
        case 3:
        	holder.textval.setText(R.string.wed);
        	break;
      
        case 4:
        	holder.textval.setText(R.string.thu);
        	break;
      
        case 5:
        	holder.textval.setText(R.string.fri);
        	break;
      
        case 6:
        	holder.textval.setText(R.string.sat);
        	break;
      
        }
      

##License Contribution chart is licensed under the terms of the MIT License. Please see the License file for full details.

th-contributionchart's People

Contributors

vyshakh-k avatar

Stargazers

Martin Valentine avatar Robin avatar Lani Jeong avatar  avatar PH2 avatar huijimuhe avatar Khalid ElSayed avatar  avatar G avatar Rahul avatar Wade avatar

Watchers

James Cloos avatar  avatar Umakanta Sahoo avatar Loganathan B avatar Ningan Gouda avatar Ravi Shanker avatar  avatar  avatar  avatar  avatar Akhilesh N avatar Bindu Suma avatar  avatar  avatar  avatar

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.