@deix/wagner-ui 0.2.2 → 0.2.6

package/README.md

@@ -11,6 +11,11 @@ docker run -d --name wagner-ui \
     -e WAGNER_URL=http://localhost:7000/wagner
     quay.io/deix/wagner-ui
 ```
+If you need to set a custom base path for the web application you can set the
+env variable `WAGNER_UI_BASE_PATH`. This variable defaults to `/wagner-ui` and
+should contain a leading slash and no trailing slashes.
+E.g. is `WAGNER_UI_BASE_PATH=/wagner-ui`, the application will
+be available at `localhost:3000/wagner-ui`.
 
 ## Using the react components
 

package/lib/ControllablePlot.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { SxProps, Theme } from '@mui/material/styles';
+import React from 'react';
 interface ControllablePlotProps {
     wagnerUrl: string;
     groupBy: 'user' | 'event_type' | 'event_value';
@@ -10,8 +10,9 @@ interface ControllablePlotProps {
     height?: number;
     yAxisTitle?: string;
     sx?: SxProps<Theme>;
+    title?: string;
     formatSeriesName?: (_: string) => string;
 }
-declare const ControllablePlot: ({ wagnerUrl, groupBy, eventType, eventValue, user, width, height, yAxisTitle, sx, formatSeriesName, }: ControllablePlotProps) => JSX.Element;
+declare const ControllablePlot: ({ wagnerUrl, groupBy, eventType, eventValue, user, width, height, yAxisTitle, sx, title, formatSeriesName, }: ControllablePlotProps) => React.JSX.Element;
 export default ControllablePlot;
 //# sourceMappingURL=ControllablePlot.d.ts.map

package/lib/ControllablePlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControllablePlot.d.ts","sourceRoot":"","sources":["../src/components/ControllablePlot.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEtD,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAyCD,QAAA,MAAM,gBAAgB,0GAWnB,qBAAqB,gBAsDvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ControllablePlot.d.ts","sourceRoot":"","sources":["../src/components/ControllablePlot.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4BxC,UAAU,qBAAqB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AA2CD,QAAA,MAAM,gBAAgB,iHAYnB,qBAAqB,sBAmJvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/ControllablePlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +11,48 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
 var material_1 = require("@mui/material");
-var react_2 = require("react");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var react_1 = __importStar(require("react"));
 var TimeSeriesPlot_1 = __importDefault(require("./TimeSeriesPlot"));
+function MyBox(_a) {
+    var title = _a.title, children = _a.children;
+    return (react_1.default.createElement(material_1.Box, { sx: { p: 2, flex: 2 } },
+        react_1.default.createElement(material_1.Box, { sx: { textAlign: 'center', mb: 2 } },
+            react_1.default.createElement(Typography_1.default, { variant: 'h6', sx: {
+                    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+                    fontWeight: 'bold',
+                    color: 'black',
+                } }, title)),
+        children));
+}
 var dateRangeOptions = [
     {
         value: 7,
@@ -40,6 +75,7 @@ var dateRangeOptions = [
         label: 'all',
     },
 ];
+var timestepRangeOptions = ['Daily', 'Weekly', 'Monthly'];
 var computeStartDate = function (days) {
     if (days == 'all') {
         return undefined;
@@ -49,17 +85,59 @@ var computeStartDate = function (days) {
     return date;
 };
 var ControllablePlot = function (_a) {
-    var wagnerUrl = _a.wagnerUrl, groupBy = _a.groupBy, eventType = _a.eventType, eventValue = _a.eventValue, user = _a.user, width = _a.width, height = _a.height, yAxisTitle = _a.yAxisTitle, sx = _a.sx, formatSeriesName = _a.formatSeriesName;
-    var _b = (0, react_2.useState)(true), stacked = _b[0], setStacked = _b[1];
-    var _c = (0, react_2.useState)(28), dateRange = _c[0], setDateRange = _c[1];
+    var wagnerUrl = _a.wagnerUrl, groupBy = _a.groupBy, eventType = _a.eventType, eventValue = _a.eventValue, user = _a.user, width = _a.width, height = _a.height, yAxisTitle = _a.yAxisTitle, sx = _a.sx, _b = _a.title, title = _b === void 0 ? '' : _b, formatSeriesName = _a.formatSeriesName;
+    var _c = (0, react_1.useState)(true), stacked = _c[0], setStacked = _c[1];
+    var _d = (0, react_1.useState)(28), dateRange = _d[0], setDateRange = _d[1];
+    var _e = (0, react_1.useState)('Daily'), timestep = _e[0], setTimestep = _e[1];
     return (react_1.default.createElement(material_1.Paper, { elevation: 0, sx: __assign({ display: 'flex', flexDirection: 'column' }, sx) },
+        react_1.default.createElement(material_1.Box, { sx: { mb: 2 } },
+            react_1.default.createElement(MyBox, { title: title })),
         react_1.default.createElement(material_1.Box, { sx: {
                 display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
+                justifyContent: 'space-around',
+                alignItems: 'center',
+                bgcolor: 'primary.main',
+                p: 2,
+                borderRadius: 2,
+                mb: 2,
             } },
-            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Switch, { checked: stacked, onChange: function (event) { return setStacked(event.target.checked); } }), label: 'Stack' }),
-            react_1.default.createElement(material_1.ToggleButtonGroup, { value: dateRange, exclusive: true, onChange: function (event, value) { return setDateRange(value); }, "aria-label": 'text alignment' }, dateRangeOptions.map(function (dateRangeOption, index) { return (react_1.default.createElement(material_1.ToggleButton, { key: index, value: dateRangeOption.value }, dateRangeOption.label)); }))),
-        react_1.default.createElement(TimeSeriesPlot_1.default, { wagnerUrl: wagnerUrl, groupBy: groupBy, eventType: eventType, eventValue: eventValue, user: user, from: computeStartDate(dateRange), to: new Date(), stacked: stacked, width: width, height: height, yAxisTitle: yAxisTitle, formatSeriesName: formatSeriesName })));
+            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Switch, { checked: stacked, color: 'default', onChange: function (event) { return setStacked(event.target.checked); } }), label: 'Stack', sx: { color: 'white' } }),
+            react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_1.default.Fragment, null,
+                    "Select time interval ",
+                    react_1.default.createElement("br", null),
+                    "on the x-axis"), placement: 'top', arrow: true },
+                react_1.default.createElement(material_1.FormControl, { sx: { minWidth: 120, color: 'white' }, variant: 'outlined' },
+                    react_1.default.createElement(material_1.InputLabel, { id: 'date-range-select-label', sx: { color: 'white' } }, "Date Range"),
+                    react_1.default.createElement(material_1.Select, { labelId: 'date-range-select-label', id: 'date-range-select', value: dateRange, onChange: function (event) {
+                            return setDateRange(event.target.value);
+                        }, sx: {
+                            color: 'white',
+                            '.MuiOutlinedInput-notchedOutline': { borderColor: 'white' },
+                            '&:hover .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'white',
+                            },
+                            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'white',
+                            },
+                            '.MuiSvgIcon-root': { fill: 'white' },
+                        }, label: 'Date Range' }, dateRangeOptions.map(function (option) { return (react_1.default.createElement(material_1.MenuItem, { key: option.value, value: option.value }, option.label)); })))),
+            react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_1.default.Fragment, null,
+                    "Select data aggregation ",
+                    react_1.default.createElement("br", null),
+                    "per time"), placement: 'top', arrow: true },
+                react_1.default.createElement(material_1.FormControl, { sx: { minWidth: 120, color: 'white' }, variant: 'outlined' },
+                    react_1.default.createElement(material_1.InputLabel, { id: 'date-group-by-label', sx: { color: 'white' } }, "Granularity"),
+                    react_1.default.createElement(material_1.Select, { labelId: 'date-group-by', id: 'date-group-by', value: timestep, onChange: function (event) { return setTimestep(event.target.value); }, autoWidth: true, sx: {
+                            color: 'white',
+                            '.MuiOutlinedInput-notchedOutline': { borderColor: 'white' },
+                            '&:hover .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'white',
+                            },
+                            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                borderColor: 'white',
+                            },
+                            '.MuiSvgIcon-root': { fill: 'white' },
+                        }, label: 'Granularity' }, timestepRangeOptions.map(function (timestepRangeOptions, index) { return (react_1.default.createElement(material_1.MenuItem, { key: index, value: timestepRangeOptions }, timestepRangeOptions)); }))))),
+        react_1.default.createElement(TimeSeriesPlot_1.default, { wagnerUrl: wagnerUrl, groupBy: groupBy, eventType: eventType, eventValue: eventValue, user: user, from: computeStartDate(dateRange), to: new Date(), stacked: stacked, width: width, height: height, yAxisTitle: yAxisTitle, timestep: timestep, formatSeriesName: formatSeriesName })));
 };
 exports.default = ControllablePlot;

package/lib/PageViewsPlot.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 interface PageViewsPlotProps {
     wagnerUrl: string;
     groupBy: 'page' | 'user';
     stripHostFromLabels?: boolean;
+    title?: string;
     sx?: SxProps<Theme>;
 }
-declare const PageViewsPlot: ({ wagnerUrl, groupBy, stripHostFromLabels, sx, }: PageViewsPlotProps) => JSX.Element;
+declare const PageViewsPlot: ({ wagnerUrl, groupBy, stripHostFromLabels, sx, title, }: PageViewsPlotProps) => React.JSX.Element;
 export default PageViewsPlot;
 //# sourceMappingURL=PageViewsPlot.d.ts.map

package/lib/PageViewsPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageViewsPlot.d.ts","sourceRoot":"","sources":["../src/components/PageViewsPlot.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,qDAKhB,kBAAkB,gBAgBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PageViewsPlot.d.ts","sourceRoot":"","sources":["../src/components/PageViewsPlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,4DAMhB,kBAAkB,sBAiBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/PageViewsPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,13 +7,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ControllablePlot_1 = __importDefault(require("./ControllablePlot"));
 var PageViewsPlot = function (_a) {
-    var wagnerUrl = _a.wagnerUrl, groupBy = _a.groupBy, _b = _a.stripHostFromLabels, stripHostFromLabels = _b === void 0 ? false : _b, sx = _a.sx;
+    var wagnerUrl = _a.wagnerUrl, groupBy = _a.groupBy, _b = _a.stripHostFromLabels, stripHostFromLabels = _b === void 0 ? false : _b, sx = _a.sx, title = _a.title;
     var formatSeriesName = undefined;
     if (groupBy === 'page' && stripHostFromLabels) {
         formatSeriesName = function (label) {
             return label.replace(/^(https:\/\/)?(http:\/\/)?[^/]+/i, '');
         };
     }
-    return (react_1.default.createElement(ControllablePlot_1.default, { wagnerUrl: wagnerUrl, eventType: 'page_view', groupBy: groupBy === 'page' ? 'event_value' : 'user', yAxisTitle: 'Page Visits', formatSeriesName: formatSeriesName, sx: sx }));
+    return (react_1.default.createElement(ControllablePlot_1.default, { wagnerUrl: wagnerUrl, eventType: 'page_view', groupBy: groupBy === 'page' ? 'event_value' : 'user', yAxisTitle: 'Page Visits', formatSeriesName: formatSeriesName, sx: sx, title: title }));
 };
 exports.default = PageViewsPlot;

package/lib/TimeSeriesPlot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface TimeSeriesPlotPros {
     wagnerUrl: string;
     stacked?: boolean;
@@ -11,8 +11,9 @@ interface TimeSeriesPlotPros {
     width?: number;
     height?: number;
     yAxisTitle?: string;
+    timestep?: string;
     formatSeriesName?: (_: string) => string;
 }
-declare const TimeSeriesPlot: ({ wagnerUrl, stacked, groupBy, eventType, eventValue, user, from, to, width, height, yAxisTitle, formatSeriesName, }: TimeSeriesPlotPros) => JSX.Element;
+declare const TimeSeriesPlot: ({ wagnerUrl, stacked, groupBy, eventType, eventValue, user, from, to, width, height, yAxisTitle, timestep, formatSeriesName, }: TimeSeriesPlotPros) => React.JSX.Element;
 export default TimeSeriesPlot;
 //# sourceMappingURL=TimeSeriesPlot.d.ts.map

package/lib/TimeSeriesPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesPlot.d.ts","sourceRoot":"","sources":["../src/components/TimeSeriesPlot.tsx"],"names":[],"mappings":";AAeA,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAQD,QAAA,MAAM,cAAc,yHAajB,kBAAkB,gBAoEpB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"TimeSeriesPlot.d.ts","sourceRoot":"","sources":["../src/components/TimeSeriesPlot.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AA4CD,QAAA,MAAM,cAAc,mIAcjB,kBAAkB,sBAgFpB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/TimeSeriesPlot.js

@@ -1,18 +1,72 @@
 "use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("react");
+var date_fns_1 = require("date-fns");
+var react_1 = __importStar(require("react"));
 var react_plotly_js_1 = __importDefault(require("react-plotly.js"));
+var groupByWeek = function (serie) {
+    var sumGropuBy = {};
+    for (var _i = 0, _a = serie.data; _i < _a.length; _i++) {
+        var day = _a[_i];
+        var startingStep = (0, date_fns_1.startOfWeek)(new Date(day.date), {
+            weekStartsOn: 1,
+        });
+        var label = "".concat(startingStep.getFullYear(), "-").concat(startingStep.getMonth() + 1, "-").concat(startingStep.getDate());
+        sumGropuBy[label] = (sumGropuBy[label] || 0) + day.count;
+    }
+    return Object.keys(sumGropuBy).map(function (label) {
+        return {
+            date: label,
+            count: sumGropuBy[label],
+        };
+    });
+};
+var groupByMonth = function (serie) {
+    var sumGroupBy = {};
+    for (var _i = 0, _a = serie.data; _i < _a.length; _i++) {
+        var day = _a[_i];
+        var d = new Date(day.date);
+        var label = "".concat(d.getFullYear(), "-").concat(d.getMonth() + 1);
+        sumGroupBy[label] = (sumGroupBy[label] || 0) + day.count;
+    }
+    return Object.keys(sumGroupBy).map(function (label) { return ({
+        date: label,
+        count: sumGroupBy[label],
+    }); });
+};
 var dateToString = function (date) {
     return "".concat(date.getUTCFullYear(), "-").concat(date.getUTCMonth() + 1, "-").concat(date.getUTCDate());
 };
 var TimeSeriesPlot = function (_a) {
-    var wagnerUrl = _a.wagnerUrl, _b = _a.stacked, stacked = _b === void 0 ? false : _b, groupBy = _a.groupBy, eventType = _a.eventType, eventValue = _a.eventValue, user = _a.user, from = _a.from, to = _a.to, width = _a.width, height = _a.height, _c = _a.yAxisTitle, yAxisTitle = _c === void 0 ? 'Count' : _c, formatSeriesName = _a.formatSeriesName;
-    var _d = (0, react_2.useState)([]), data = _d[0], setData = _d[1];
-    (0, react_2.useEffect)(function () {
+    var wagnerUrl = _a.wagnerUrl, _b = _a.stacked, stacked = _b === void 0 ? false : _b, groupBy = _a.groupBy, eventType = _a.eventType, eventValue = _a.eventValue, user = _a.user, from = _a.from, to = _a.to, width = _a.width, height = _a.height, _c = _a.yAxisTitle, yAxisTitle = _c === void 0 ? 'Count' : _c, _d = _a.timestep, timestep = _d === void 0 ? 'Daily' : _d, formatSeriesName = _a.formatSeriesName;
+    var _e = (0, react_1.useState)([]), data = _e[0], setData = _e[1];
+    (0, react_1.useEffect)(function () {
         var searchParams = new URLSearchParams({
             group_by: groupBy,
         });
@@ -39,6 +93,14 @@ var TimeSeriesPlot = function (_a) {
                 var label = formatSeriesName
                     ? formatSeriesName(dataSeries.key)
                     : dataSeries.key;
+                switch (timestep) {
+                    case 'Weekly':
+                        dataSeries.data = groupByWeek(dataSeries);
+                        break;
+                    case 'Monthly':
+                        dataSeries.data = groupByMonth(dataSeries);
+                        break;
+                }
                 return {
                     name: label,
                     x: dataSeries.data.map(function (dataPoint) { return dataPoint.date; }),
@@ -59,6 +121,7 @@ var TimeSeriesPlot = function (_a) {
         from,
         to,
         groupBy,
+        timestep,
         formatSeriesName,
     ]);
     return (react_1.default.createElement(react_plotly_js_1.default, { style: { width: '100%' }, data: data, layout: {