Merge pull request #33 from Martin-Gleiss/develop

merge upstream changes

widgets/plot.html

@@ -7,7 +7,6 @@
 * -----------------------------------------------------------------------------
 */
 
-
 /**
 * The diagram showing curves of relative humidity and effective temperature superimposed upon rectangular coordinates. The comfort-zones indicate when humans feel good.
 *
@@ -48,6 +47,27 @@
 {% endmacro %}
 
 
+/**
+* Displays a heating curve (outside temperature compared to heating flow temperature) with current datapoint
+*
+* @param {id=} unique id for this widget (optional)
+* @param {item[](list)} an item containing the pairs of temperatures
+*        Sorted array in format: [[outside1, heating_temp], [outside2, heating_temp] ...]
+* @param {item(num)} an item for the current outside temperature
+* @param {item(num)} an item for the current heating flow temperature
+* @param {unchecked[?]=} object with additional options for Highcharts, see https://api.highcharts.com/ (optional)
+*/
+{% macro heatingcurve(id, item_datapoints, item_current_outsidetemp, item_current_flowtemp, chartoptions) %}
+
+    <div {% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}
+        data-widget="plot.heatingcurve"
+        data-item="{{ item_datapoints }}, {{ item_current_outsidetemp }}, {{ item_current_flowtemp }}"
+        data-chart-options="{{ chartoptions|json_encode()|escape('html_attr') }}">
+    </div>
+
+{% endmacro %}
+
+
 /**
 * Plots a chart of time series data
 *

widgets/plot.js

@@ -86,6 +86,84 @@ $.widget("sv.plot_comfortchart", $.sv.widget, {
 });
 
 
+// ----- plot.heatingcurve ----------------------------------------------------
+$.widget("sv.plot_heatingcurve", $.sv.widget, {
+
+    initSelector: 'div[data-widget="plot.heatingcurve"]',
+
+    options: {
+        chartOptions: null
+    },
+
+    _create: function() {
+        this._super();
+
+        var plots = Array();
+        var userOptions = this.options.chartOptions;
+
+        plots[0] = {
+            type: 'spline',
+            name: 'Vorlauftemperatur',
+            lineWidth: 1
+        };
+
+        plots[1] = {
+            name: 'point',
+            marker: { enabled: true, radius: 10, symbol: 'diamond', fillColor: 'rgb(255,255,0)', lineColor: 'rgb(255,255,0)' },
+            showInLegend: false
+        };
+
+        var allOptions = {
+            series: plots,
+            chart: { className: 'heatingcurve' },
+            title: { text: 'Heizkurve', y: 70 },
+            xAxis: { min: -30, max: 20, minTickInterval: 5, title: { text: 'AT', align: 'high', margin: -2, x: -5, y: -40 } },
+            yAxis: { min:  22, max: 33, minTickInterval: 5, title: { text: 'VL', align: 'high', rotation: 00, x: 60, y: 20 } },
+            legend: {
+                align: 'center',
+                verticalAlign: 'top',
+                floating: true,
+                y: 70
+            },
+            plotOptions: {
+                area: { enableMouseTracking: false },
+            },
+            tooltip: {
+                formatter: function () {
+                    return this.x.transUnit('temp') + ' / ' + this.y.transUnit('temp');
+                }
+            }
+        };
+
+        $.extend(true, allOptions, userOptions);
+        this.element.highcharts(allOptions);
+
+    },
+
+    _update: function(response) {
+
+        var chart = this.element.highcharts();
+
+        chart.series[0].setData(JSON.parse(response[0]));
+
+        var point = chart.series[1].data[0];
+        if (!response[1] && point) {
+            response[1] = point.x;
+        }
+        if (!response[2] && point) {
+            response[2] = point.y;
+        }
+        if(point)
+            point.update([response[1] * 1.0, response[2] * 1.0], true);
+        else
+            chart.series[1].addPoint([response[1] * 1.0, response[2] * 1.0], true);
+
+        // chart.redraw();
+    }
+
+});
+
+
 // ----- plot.period ----------------------------------------------------------
 $.widget("sv.plot_period", $.sv.widget, {