diff --git a/frontend/package.json b/frontend/package.json
index 0a6781b..6564cad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,11 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
+ "@visx/axis": "^3.1.0",
+ "@visx/curve": "^3.0.0",
+ "@visx/group": "^3.0.0",
+ "@visx/scale": "^3.0.0",
+ "@visx/shape": "^3.0.0",
"axios": "1.2.1",
"date-fns": "2.29.3",
"ejs": "3.1.8",
diff --git a/frontend/src/Call/Activity.js b/frontend/src/Call/Activity.js
new file mode 100644
index 0000000..a000c06
--- /dev/null
+++ b/frontend/src/Call/Activity.js
@@ -0,0 +1,69 @@
+import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import FilterModal from "./components/FilterModal";
+import GroupModal from "./components/GroupModal";
+import CalendarModal from "./components/CalendarModal";
+import CallPlayer from "./CallPlayer";
+
+import { useSelector, useDispatch } from 'react-redux'
+import { setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
+
+import { useGetStatsQuery,useGetTalkgroupsQuery } from '../features/api/apiSlice'
+import ActivityChart from "./ActivityChart";
+import { selectSystem } from "../features/systems/systemsSlice";
+import {
+ Container,
+ Label,
+ Rail,
+ Sticky,
+ Menu,
+ Icon,
+ Sidebar,
+ Header
+
+} from "semantic-ui-react";
+import "./CallPlayer.css";
+import queryString from '../query-string';
+import io from 'socket.io-client';
+import { useCallLink } from "./components/CallLinks";
+
+
+function Activity(props) {
+ const { shortName } = useParams();
+ const { data: statsData, isSuccess: isStatsSuccess } = useGetStatsQuery(shortName);
+ const { data: talkgroupData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
+
+ const talkgroupStats = useMemo(() => {
+ if (statsData ) {
+ const result =[]
+ for (const tgNum in statsData.talkgroupStats) {
+ let tg = tgNum;
+ if (talkgroupData && talkgroupData.talkgroups[tgNum] !== undefined) {
+ tg = talkgroupData.talkgroups[tgNum].description;
+ }
+ result.push();
+ }
+ return result;
+ } else {
+ return [];
+ }
+
+
+ }, [statsData, talkgroupData]);
+
+
+ return (
+
+
+ {
+ talkgroupStats.map( chart => {
+ return chart
+ })
+ }
+
+
+ )
+
+}
+
+export default Activity;
\ No newline at end of file
diff --git a/frontend/src/Call/ActivityChart.js b/frontend/src/Call/ActivityChart.js
new file mode 100644
index 0000000..508cc01
--- /dev/null
+++ b/frontend/src/Call/ActivityChart.js
@@ -0,0 +1,102 @@
+import React from "react";
+import { Group } from '@visx/group';
+import { curveStep} from '@visx/curve';
+import { LinePath } from '@visx/shape';
+import { scaleLinear, scaleTime } from '@visx/scale';
+import { timeParse, timeFormat } from 'd3-time-format';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { Loader } from "semantic-ui-react";
+import {
+ Header
+} from "semantic-ui-react";
+
+function ActivityChart(props) {
+
+ if (!props.data) {
+ return (
+ Loading
+ )
+ }
+
+ var callTotals = [];
+
+
+ const now = new Date();
+ var maxDate = now;
+ var minDate = now;
+ var minValue = 0;
+ var maxValue = 0;
+ var MS_PER_MINUTE = 60000;
+
+ for (let j = 0; j < props.data.length; j++) {
+ let spotsBack = j;//statistic.callTotals.length - j;
+ let time = new Date(now - spotsBack * 15 * MS_PER_MINUTE);
+ if (time < minDate) minDate = time;
+ if (props.data[j] > maxValue)
+ maxValue = props.data[j];
+ callTotals.push({ y: props.data[j], x: time });
+ }
+
+
+
+
+
+
+ // Define the graph dimensions and margins
+ const width = 500; //props.width;
+ const height = 250;
+ const margin = { top: 20, bottom: 40, left: 40, right: 20 };
+ const parseDate = timeParse("%Y%m%d");
+ const format = timeFormat("%b %d");
+ const formatDate = (date) => format(parseDate(date));
+ const parseTime = timeParse('%Y-%m-%dT%H:%M:%S.%LZ');
+
+ // Then we'll create some bounds
+ const xMax = width - margin.left - margin.right;
+ const yMax = height - margin.top - margin.bottom;
+
+ var xScale, yScale;
+
+ // We'll use some mock data from `@vx/mock-data` for this.
+ // scales
+ xScale = scaleTime({
+ range: [0, xMax],
+ domain: [minDate, maxDate],
+ tickFormat: () => (val) => formatDate(val)
+ });
+ yScale = scaleLinear({
+ range: [yMax, 0],
+ domain: [0, maxValue],
+ });
+
+ const handleClick = (event) => {
+ console.log('You clicked on:', event);
+ };
+ // accessors
+ const x = d => xScale(d.x);
+ const y = d => yScale(d.y);
+ return (
+
+
+
+