Charts implementation

14 files changed, 244 insertions, 48 deletions

diff --git a/web/app/Application.js b/web/app/Application.js
index daa25b85..82caf1e0 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -70,6 +70,7 @@ Ext.define('Traccar.Application', {
         'ReportSummary',
         'ReportTypes',
         'ReportEventTypes',
+        'ReportChartTypes',
         'Statistics',
         'DeviceImages',
         'Calendars',
@@ -134,6 +135,22 @@ Ext.define('Traccar.Application', {
         }
     },
 
+    getReportColor: function (deviceId) {
+        var index, reportColor, device = Ext.getStore('Devices').getById(deviceId);
+        if (device) {
+            reportColor = device.get('attributes')['web.reportColor'];
+        }
+        if (reportColor) {
+            return reportColor;
+        } else {
+            index = 0;
+            if (deviceId !== undefined) {
+                index = deviceId % Traccar.Style.mapRouteColor.length;
+            }
+            return Traccar.Style.mapRouteColor[index];
+        }
+    },
+
     showError: function (response) {
         if (Ext.isString(response)) {
             Ext.Msg.alert(Strings.errorTitle, response);
diff --git a/web/app/Style.js b/web/app/Style.js
index c5fce9b6..c785e1c1 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -78,5 +78,14 @@ Ext.define('Traccar.Style', {
     coordinatePrecision: 6,
     numberPrecision: 2,
 
-    reportTagfieldWidth: 375
+    reportTagfieldWidth: 375,
+
+    chartPadding: {
+        top: 20,
+        bottom: 10,
+        left: 10,
+        right: 40
+    },
+    chartMarkerRadius: 3,
+    chartMarkerHighlightScaling: 1.5
 });
diff --git a/web/app/model/Position.js b/web/app/model/Position.js
index b2b12ee9..362ca589 100644
--- a/web/app/model/Position.js
+++ b/web/app/model/Position.js
@@ -56,6 +56,12 @@ Ext.define('Traccar.model.Position', {
         name: 'speed',
         type: 'float'
     }, {
+        name: 'speedConverted',
+        type: 'float',
+        calculate: function (data) {
+            return Ext.getStore('SpeedUnits').convertValue(data.speed, Traccar.app.getPreference('speedUnit'));
+        }
+    }, {
         name: 'course',
         type: 'float'
     }, {
@@ -63,5 +69,12 @@ Ext.define('Traccar.model.Position', {
         type: 'string'
     }, {
         name: 'attributes'
+    }, {
+        name: 'distanceConverted',
+        type: 'float',
+        calculate: function (data) {
+            return Ext.getStore('DistanceUnits').convertValue(data.attributes.distance,
+                    Traccar.app.getPreference('distanceUnit'));
+        }
     }]
 });
diff --git a/web/app/store/DistanceUnits.js b/web/app/store/DistanceUnits.js
index cc9f1e92..57d15fc8 100644
--- a/web/app/store/DistanceUnits.js
+++ b/web/app/store/DistanceUnits.js
@@ -33,6 +33,15 @@ Ext.define('Traccar.store.DistanceUnits', {
         factor: 0.000539957
     }],
 
+    convertValue: function (value, unit) {
+        var model;
+        if (!unit) {
+            unit = 'km';
+        }
+        model = this.findRecord('key', unit);
+        return value * model.get('factor');
+    },
+
     formatValue: function (value, unit) {
         var model;
         if (!unit) {
diff --git a/web/app/store/ReportChartTypes.js b/web/app/store/ReportChartTypes.js
new file mode 100644
index 00000000..7a63fd08
--- /dev/null
+++ b/web/app/store/ReportChartTypes.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.store.ReportChartTypes', {
+    extend: 'Ext.data.Store',
+    fields: ['key', 'name'],
+
+    data: [{
+        key: 'speedConverted',
+        name: Strings.positionSpeed
+    }, {
+        key: 'distanceConverted',
+        name: Strings.positionDistance
+    }]
+});
diff --git a/web/app/store/ReportTypes.js b/web/app/store/ReportTypes.js
index 18b0c74a..3305a10c 100644
--- a/web/app/store/ReportTypes.js
+++ b/web/app/store/ReportTypes.js
@@ -31,5 +31,8 @@ Ext.define('Traccar.store.ReportTypes', {
     }, {
         key: 'summary',
         name: Strings.reportSummary
+    }, {
+        key: 'charts',
+        name: Strings.reportCharts
     }]
 });
diff --git a/web/app/store/SpeedUnits.js b/web/app/store/SpeedUnits.js
index e29a42c7..0480ad42 100644
--- a/web/app/store/SpeedUnits.js
+++ b/web/app/store/SpeedUnits.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Anton Tananaev (anton@traccar.org)
+ * Copyright 2015 - 2016 Anton Tananaev (anton@traccar.org)
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -33,6 +33,15 @@ Ext.define('Traccar.store.SpeedUnits', {
         factor: 1.15078
     }],
 
+    convertValue: function (value, unit) {
+        var model;
+        if (!unit) {
+            unit = 'kn';
+        }
+        model = this.findRecord('key', unit);
+        return value * model.get('factor');
+    },
+
     formatValue: function (value, unit) {
         var model;
         if (!unit) {
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index 510e11bd..f8f0e43f 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -276,26 +276,10 @@ Ext.define('Traccar.view.MapMarkerController', {
         }
     },
 
-    getReportColor: function (deviceId) {
-        var index, reportColor, device = Ext.getStore('Devices').getById(deviceId);
-        if (device) {
-            reportColor = device.get('attributes')['web.reportColor'];
-        }
-        if (reportColor) {
-            return reportColor;
-        } else {
-            index = 0;
-            if (deviceId !== undefined) {
-                index = deviceId % Traccar.Style.mapRouteColor.length;
-            }
-            return Traccar.Style.mapRouteColor[index];
-        }
-    },
-
     getRouteStyle: function (deviceId) {
         return new ol.style.Style({
             stroke: new ol.style.Stroke({
-                color: this.getReportColor(deviceId),
+                color: Traccar.app.getReportColor(deviceId),
                 width: Traccar.Style.mapRouteWidth
             })
         });
@@ -325,7 +309,7 @@ Ext.define('Traccar.view.MapMarkerController', {
     },
 
     getReportMarker: function (deviceId, angle) {
-        return this.getMarkerStyle(false, this.getReportColor(deviceId), angle, 'arrow');
+        return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow');
     },
 
     resizeMarker: function (style, zoom) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 5851c4c3..bc78fe07 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -16,7 +16,7 @@
  */
 
 Ext.define('Traccar.view.Report', {
-    extend: 'Ext.grid.Panel',
+    extend: 'Ext.panel.Panel',
     xtype: 'reportView',
 
     requires: [
@@ -67,17 +67,50 @@ Ext.define('Traccar.view.Report', {
         }]
     },
 
-    listeners: {
-        selectionchange: 'onSelectionChange'
+    layout: {
+        type: 'fit'
     },
 
-    forceFit: true,
-
-    columns: {
-        defaults: {
-            minWidth: Traccar.Style.columnWidthNormal
+    items: [{
+        xtype: 'grid',
+        itemId: 'grid',
+        listeners: {
+            selectionchange: 'onSelectionChange'
+        },
+        hidden: true,
+        forceFit: true,
+        flex: 1,
+        columns: {
+            defaults: {
+                minWidth: Traccar.Style.columnWidthNormal
+            },
+            items: [
+            ]
+        },
+        style: 'borderTop: 1px solid lightgray'
+    }, {
+        xtype: 'cartesian',
+        itemId: 'chart',
+        plugins: {
+            ptype: 'chartitemevents',
+            moveEvents: true
+        },
+        hidden: true,
+        forceFit: true,
+        flex: 1,
+        store: 'ReportRoute',
+        axes: [{
+            title: Strings.reportCharts,
+            type: 'numeric',
+            position: 'left'
+        }, {
+            type: 'time',
+            position: 'bottom',
+            fields: ['fixTime']
+        }],
+        listeners: {
+            itemclick: 'onChartMarkerClick'
         },
-        items: [
-        ]
-    }
+        insetPadding: Traccar.Style.chartPadding
+    }]
 });
diff --git a/web/app/view/ReportConfigController.js b/web/app/view/ReportConfigController.js
index 0ae7c0a4..f76a0820 100644
--- a/web/app/view/ReportConfigController.js
+++ b/web/app/view/ReportConfigController.js
@@ -57,6 +57,7 @@ Ext.define('Traccar.view.ReportConfigController', {
         } else if (eventType.length === this.lookupReference('eventTypeField').getStore().getCount() - 1) {
             eventType = [Traccar.store.ReportEventTypes.allEvents];
         }
+        this.getView().callingPanel.chartType = this.lookupReference('chartTypeField').getValue();
         this.getView().callingPanel.eventType = eventType;
         this.getView().callingPanel.fromDate = this.lookupReference('fromDateField').getValue();
         this.getView().callingPanel.fromTime = this.lookupReference('fromTimeField').getValue();
diff --git a/web/app/view/ReportConfigDialog.js b/web/app/view/ReportConfigDialog.js
index 39e6ae15..4afa929d 100644
--- a/web/app/view/ReportConfigDialog.js
+++ b/web/app/view/ReportConfigDialog.js
@@ -56,6 +56,17 @@ Ext.define('Traccar.view.ReportConfigDialog', {
         displayField: 'name',
         queryMode: 'local'
     }, {
+        fieldLabel: Strings.reportChartTypes,
+        xtype: 'combobox',
+        width: Traccar.Style.reportTagfieldWidth,
+        reference: 'chartTypeField',
+        store: 'ReportChartTypes',
+        hidden: true,
+        value: 'speedConverted',
+        valueField: 'key',
+        displayField: 'name',
+        queryMode: 'local'
+    }, {
         xtype: 'fieldcontainer',
         layout: 'hbox',
         items: [{
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 1f3f3a2a..6c73ce80 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -43,6 +43,9 @@ Ext.define('Traccar.view.ReportController', {
                 '#ReportEvents': {
                     add: 'loadEvents',
                     load: 'loadEvents'
+                },
+                '#ReportRoute': {
+                    load: 'loadRoute'
                 }
             }
         }
@@ -52,9 +55,15 @@ Ext.define('Traccar.view.ReportController', {
         Traccar.app.showReports(false);
     },
 
+    init: function () {
+        this.grid = this.getView().getComponent('grid');
+        this.chart = this.getView().getComponent('chart');
+    },
+
     onConfigureClick: function () {
         var dialog = Ext.create('Traccar.view.ReportConfigDialog');
         dialog.lookupReference('eventTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'events');
+        dialog.lookupReference('chartTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'charts');
         dialog.callingPanel = this;
         dialog.lookupReference('deviceField').setValue(this.deviceId);
         dialog.lookupReference('groupField').setValue(this.groupId);
@@ -63,6 +72,9 @@ Ext.define('Traccar.view.ReportController', {
         } else {
             dialog.lookupReference('eventTypeField').setValue([Traccar.store.ReportEventTypes.allEvents]);
         }
+        if (this.chartType !== undefined) {
+            dialog.lookupReference('chartTypeField').setValue(this.chartType);
+        }
         if (this.fromDate !== undefined) {
             dialog.lookupReference('fromDateField').setValue(this.fromDate);
         }
@@ -85,7 +97,7 @@ Ext.define('Traccar.view.ReportController', {
         time = this.fromDate && this.fromTime && this.toDate && this.toTime;
         disabled = !reportType || !devices || !time;
         this.lookupReference('showButton').setDisabled(disabled);
-        this.lookupReference('exportButton').setDisabled(disabled);
+        this.lookupReference('exportButton').setDisabled(reportType === 'charts' || disabled);
     },
 
     onReportClick: function (button) {
@@ -103,7 +115,12 @@ Ext.define('Traccar.view.ReportController', {
                 this.toTime.getHours(), this.toTime.getMinutes(), this.toTime.getSeconds(), this.toTime.getMilliseconds());
 
             if (button.reference === 'showButton') {
-                store = this.getView().getStore();
+                if (reportType === 'charts') {
+                    store = this.chart.getStore();
+                    this.chart.setSeries([]);
+                } else {
+                    store = this.grid.getStore();
+                }
                 store.load({
                     params: {
                         deviceId: this.deviceId,
@@ -114,7 +131,7 @@ Ext.define('Traccar.view.ReportController', {
                     }
                 });
             } else if (button.reference === 'exportButton') {
-                url = this.getView().getStore().getProxy().url;
+                url = this.grid.getStore().getProxy().url;
                 this.downloadFile(url, {
                     deviceId: this.deviceId,
                     groupId: this.groupId,
@@ -132,10 +149,13 @@ Ext.define('Traccar.view.ReportController', {
     },
 
     clearReport: function (reportType) {
-        this.getView().getStore().removeAll();
+        this.grid.getStore().removeAll();
         if (reportType === 'trips' || reportType === 'events') {
             Ext.getStore('ReportRoute').removeAll();
         }
+        if (reportType === 'charts') {
+            this.chart.getStore().removeAll();
+        }
     },
 
     onSelectionChange: function (selected) {
@@ -154,7 +174,7 @@ Ext.define('Traccar.view.ReportController', {
 
     selectDevice: function (device) {
         if (device) {
-            this.getView().getSelectionModel().deselectAll();
+            this.grid.getSelectionModel().deselectAll();
         }
     },
 
@@ -162,12 +182,12 @@ Ext.define('Traccar.view.ReportController', {
         var positionEvent, reportType = this.lookupReference('reportTypeField').getValue();
         if (object instanceof Traccar.model.Position) {
             if (reportType === 'route') {
-                this.getView().getSelectionModel().select([object], false, true);
-                this.getView().getView().focusRow(object);
+                this.grid.getSelectionModel().select([object], false, true);
+                this.grid.getView().focusRow(object);
             } else if (reportType === 'events') {
-                positionEvent = this.getView().getStore().findRecord('positionId', object.get('id'), 0, false, true, true);
-                this.getView().getSelectionModel().select([positionEvent], false, true);
-                this.getView().getView().focusRow(positionEvent);
+                positionEvent = this.grid.getStore().findRecord('positionId', object.get('id'), 0, false, true, true);
+                this.grid.getSelectionModel().select([positionEvent], false, true);
+                this.grid.getView().focusRow(positionEvent);
             }
         }
     },
@@ -223,6 +243,45 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
+    loadRoute: function (store) {
+        var i, deviceIds, chartSeries, deviceStore;
+        if (this.lookupReference('reportTypeField').getValue() === 'charts') {
+            this.chart.getAxes()[0].setTitle(
+                    Ext.getStore('ReportChartTypes').findRecord('key', this.chartType).get('name'));
+            chartSeries = [];
+            deviceIds = store.collect('deviceId');
+            for (i = 0; i < deviceIds.length; i++) {
+                deviceStore = new Ext.create('Ext.data.ChainedStore', {
+                    source: 'ReportRoute',
+                    filters: [{
+                        property: 'deviceId',
+                        value   : deviceIds[i]
+                    }]
+                });
+                chartSeries.push({
+                    type: 'line',
+                    store: deviceStore,
+                    yField: this.chartType,
+                    xField: 'fixTime',
+                    highlightCfg: {
+                        scaling: Traccar.Style.chartMarkerHighlightScaling
+                    },
+                    colors: [Traccar.app.getReportColor(deviceIds[i])],
+                    marker: {
+                        type: 'circle',
+                        radius: Traccar.Style.chartMarkerRadius,
+                        fill: Traccar.app.getReportColor(deviceIds[i])
+                    }
+                });
+            }
+            this.chart.setSeries(chartSeries);
+        }
+    },
+
+    onChartMarkerClick: function (chart, item) {
+        this.fireEvent('selectreport', item.record, true);
+    },
+
     showSingleEvent: function (eventId) {
         this.lookupReference('reportTypeField').setValue('events');
         Ext.getStore('Events').load({
@@ -239,8 +298,8 @@ Ext.define('Traccar.view.ReportController', {
                                 this.getView().expand();
                             }
                         }
-                        this.getView().getSelectionModel().select([records[0]], false, true);
-                        this.getView().getView().focusRow(records[0]);
+                        this.grid.getSelectionModel().select([records[0]], false, true);
+                        this.grid.getView().focusRow(records[0]);
                     }
                 }
             }
@@ -289,13 +348,24 @@ Ext.define('Traccar.view.ReportController', {
         }
 
         if (newValue === 'route') {
-            this.getView().reconfigure('ReportRoute', this.routeColumns);
+            this.grid.reconfigure('ReportRoute', this.routeColumns);
+            this.chart.setHidden(true);
+            this.grid.setHidden(false);
         } else if (newValue === 'events') {
-            this.getView().reconfigure('ReportEvents', this.eventsColumns);
+            this.grid.reconfigure('ReportEvents', this.eventsColumns);
+            this.chart.setHidden(true);
+            this.grid.setHidden(false);
         } else if (newValue === 'summary') {
-            this.getView().reconfigure('ReportSummary', this.summaryColumns);
+            this.grid.reconfigure('ReportSummary', this.summaryColumns);
+            this.chart.setHidden(true);
+            this.grid.setHidden(false);
         } else if (newValue === 'trips') {
-            this.getView().reconfigure('ReportTrips', this.tripsColumns);
+            this.grid.reconfigure('ReportTrips', this.tripsColumns);
+            this.chart.setHidden(true);
+            this.grid.setHidden(false);
+        } else if (newValue === 'charts') {
+            this.grid.setHidden(true);
+            this.chart.setHidden(false);
         }
 
         this.updateButtons();
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 109482b8..5ac13283 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -104,6 +104,7 @@
     "positionCourse": "Course",
     "positionAddress": "Address",
     "positionProtocol": "Protocol",
+    "positionDistance": "Distance",
     "serverTitle": "Server Settings",
     "serverZoom": "Zoom",
     "serverRegistration": "Registration",
@@ -184,8 +185,10 @@
     "reportEvents": "Events",
     "reportTrips": "Trips",
     "reportSummary": "Summary",
+    "reportCharts": "Charts",
     "reportConfigure": "Configure",
     "reportEventTypes": "Event Types",
+    "reportChartTypes": "Chart Types",
     "reportExport": "Export",
     "reportDeviceName": "Device Name",
     "reportAverageSpeed": "Average Speed",
diff --git a/web/load.js b/web/load.js
index 7aee735d..ecf6f232 100644
--- a/web/load.js
+++ b/web/load.js
@@ -117,18 +117,22 @@
 
     extjsVersion = '6.2.0';
     fontAwesomeVersion = '4.7.0';
-    olVersion = '3.20.0';
+    olVersion = '3.20.1';
 
     if (debugMode) {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
+        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts-debug.js');
     } else {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all.js');
+        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/charts.js');
     }
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/locale/locale-' + locale.languages[locale.language].code + '.js');
 
     addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/theme-triton/resources/theme-triton-all.css');
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/classic/theme-triton/theme-triton.js');
 
+    addStyleFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/packages/charts/classic/triton/resources/charts-all.css');
+
     addStyleFile('//cdnjs.cloudflare.com/ajax/libs/font-awesome/' + fontAwesomeVersion + '/css/font-awesome.min.css');
 
     addStyleFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.css');