Add AgencyStopPurposeGroupView and AgencyStopGroupByPurposeView (#190)

* WIP: add month range picker component

* WIP: Show graph by month interval

* WIP: Allow to display graph by month/week

* Allow traffic stops by count to filter by date range

* limit range to min of 4 months

* truncate to month

* remove year from admin

* cast to date; add index

* first pass at AgencyStopPurposeGroupView

* fix stop_purpose_group sql logic

* remove files from another PR

* Add traffic grouped stop purposes graph

* Add stops grouped by purpose graphs

* Update grouped traffic stops css

* Remove view data for stop grouped graphs

* add option to hide y labels if graphs are adjacent to one another

* update stop purpose graph colors

* Add one legend for the three grouped stop purpose graphs

* update traffic stop titles

* Pivot tables to group by year to show correct values in tables

* Add new modal for new graphs

* Add spreadsheet data fro stop purpose groups

* Update stop purpose groups

* remove css prop for white space

* Update nc/models.py

Co-authored-by: Colin Copeland <copelco@caktusgroup.com>

---------

Co-authored-by: Aristotel Fani <afani1997@gmail.com>
Co-authored-by: Aristotel Fani <afani@caktusgroup.com>

frontend/package.json

@@ -10,12 +10,15 @@
  "autosuggest-highlight": "^3.3.0",
  "axios": "^0.27.2",
  "babel-eslint": "^10.1.0",
+ "chart.js": "^4.2.1",
  "date-fns": "^2.28.0",
  "framer-motion": "^4.1.17",
+ "lodash.clonedeep": "^4.5.0",
  "lodash.range": "^3.2.0",
  "p-min-delay": "^4.0.1",
  "prop-types": "^15.8.1",
  "react": "^18.2.0",
+ "react-chartjs-2": "^5.2.0",
  "react-content-loader": "^6.2.0",
  "react-csv": "^2.2.2",
  "react-datepicker": "^4.11.0",

frontend/src/Components/App.js

@@ -41,6 +41,20 @@ import FindAStopResults from './FindAStopResults/FindAStopResults';
 import DepartmentSearch from './Elements/DepartmentSearch';
 import * as S from './HomePage/HomePage.styled';
 
+// New Charts
+import {
+ CategoryScale,
+ Chart as ChartJS,
+ Legend,
+ LinearScale,
+ LineElement,
+ PointElement,
+ Title,
+ Tooltip,
+} from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
 function App() {
  const [showCompare, setShowCompare] = React.useState(false);
  const [agencyId, setAgencyId] = React.useState(null);