Cohort React Graph ·

A library of to show React cohort graph

Installation

Run the following command: npm start

How to use:

Props:

width: any integer

Day Wise Cohort:

data: [
{date: "2018-09-25T00:00:00", retention: "100", user: 201, data: [100,20,30,20,0,40,60]},
{date: "2018-09-26T00:00:00",retention: "38.0", user: 210, data: [100,20,30,20,0,40]},
{date: "2018-09-27T00:00:00",retention: "20.6", user: 121, data: [100,20,30,20,0]},
{date: "2018-09-28T00:00:00",retention: "14.2", user: 104, data: [100,20,30,20]},
{date: "2018-09-29T00:00:00",retention: "6.7", user: 69, data: [100,20,30]},
{date: "2018-09-30T00:00:00",retention: "6.8", user: 57, data: [100,20]},
{date: "2018-10-01T00:00:00",retention: "100", user: 23, data: [100]},
  ]

Month Wise Cohort: (3 month data)

data: [
{date: "2018-09-25T00:00:00", retention: "100", user: 201, data: [100,20,15]},
{date: "2018-09-26T00:00:00",retention: "38.0", user: 210, data: [100,20]},
{date: "2018-09-27T00:00:00",retention: "20.6", user: 121, data: [100]},
  ]

Week Wise Cohort:(4 week data)

data: [
{date: "2018-09-25T00:00:00", retention: "100", user: 201, data: [100,40,20,15]},
{date: "2018-09-26T00:00:00",retention: "38.0", user: 210, data: [100,40,20]},
{date: "2018-09-27T00:00:00",retention: "20.6", user: 121, data: [100,40]},
{date: "2018-09-25T00:00:00", retention: "100", user: 201, data: [100]},
  ]

Simple Usage:

import { CohortBasic } from 'cohort-graph-react';


<CohortBasic width={1000} 
             data={[
                    {date: "2018-09-25T00:00:00", retention: "100", user: 201, data: [100,20,30,20,0,40,60]},
                    {date: "2018-09-26T00:00:00",retention: "38.0", user: 210, data: [100,20,30,20,0,40]},
                    {date: "2018-09-27T00:00:00",retention: "20.6", user: 121, data: [100,20,30,20,0]},
                    {date: "2018-09-28T00:00:00",retention: "14.2", user: 104, data: [100,20,30,20]},
                    {date: "2018-09-29T00:00:00",retention: "6.7", user: 69, data: [100,20,30]},
                    {date: "2018-09-30T00:00:00",retention: "6.8", user: 57, data: [100,20]},
                    {date: "2018-10-01T00:00:00",retention: "100", user: 23, data: [100]},
                 ]} />