[Frontend-Backend]: Data Visualization of Cases

[sachinsom93]

Description

This PR aims to do data visualization for the purpose of case analytics.

Fixes #217

Type of change

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Also, include screenshots for the verification and reviewing purpose.

Final ScreenShots

Report Page

General Info of a case

History data Visualization

1. Bar Chart

2. Pie Chart

3. Line Chart

Map for Location Visualization

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

[swapnalshahil]

Hey, I don't think we need to make the Analytics component and AnalyticsMain page as we already have AnalyticsPage and analytics components. Instead, you can create a page name report where we will make changes and will be routed from the analytics section later.

[swapnalshahil]

API: http://127.0.0.1:5000/report/generalinfo

This API is responsible to collect general info of the device
in a readable format to implement in the analytics section.

method = ['POST']
{
    "case_name": "CaseName"
}

[swapnalshahil]

2. http://127.0.0.1:5000/report/locations

This API is responsible to provide coordinates and link of
of the locations to map.

method = ['POST']
{
    "case_name": "CaseName"
}

Data will look like this! (below)

[swapnalshahil]

3. http://127.0.0.1:5000/report/browserdata

This API is responsible to provide browser
searched links with its frequencies.

method = ['POST']
{
    "case_name": "CaseName"
}

[sachinsom93]

Data Visualization for Browser history data

Bar chart

Pie chart for most visited URL

Line Chart

Error handling ( If a case doesn't contain browser history data)

[swapnalshahil]

@sachinsom93 Hey, I don't think in the report section we need all reports. We just need one input/dropdown box where we have to write case_name or choose case_name and on clicking all reports like browser freq,etc will appear. If there will be lots of cases searching a particular case in the report section doesn't make sense.

[sachinsom93]

@sachinsom93 Hey, I don't think in the report section we need all reports. We just need one input/dropdown box where we have to write case_name or choose case_name and on clicking all reports like browser freq,etc will appear. If there will be lots of cases searching a particular case in the report section doesn't make sense.

I guess instead of providing inputs for case name and report type,it will be easier for user to find and clicking over a particular case for visualizing all kind of data. And, The cases will be displayed (ordered ) by most recent extraction date, so I don't feel that user will find any deficulty to search a case.

[swapnalshahil]

OK if cases are 1000??

[sachinsom93]

OK if cases are 1000??

We can provide pagination :)

[swapnalshahil]

Data visualization based on locations:

https://user-images.githubusercontent.com/58564017/127742348-a7163ae2-08aa-48d6-863d-b47f44929c65.mp4

[swapnalshahil]

General information in report

[shivanshuraj1333]

Hey guys, @sachinsom93 @swapnalshahil the PR is bulky, I'll need some time to review it :)

[swapnalshahil]

Hey guys, @sachinsom93 @swapnalshahil the PR is bulky, I'll need some time to review it :)

Sure, Sir! 😀