diff src/DML/MainVisBundle/Resources/assets/marionette/modules/GraphicsRenderingModule/GraphicsRenderingModule.20-Renderer.similarity-plane.js @ 0:493bcb69166c

added public content
author Daniel Wolff
date Tue, 09 Feb 2016 20:54:02 +0100
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/DML/MainVisBundle/Resources/assets/marionette/modules/GraphicsRenderingModule/GraphicsRenderingModule.20-Renderer.similarity-plane.js	Tue Feb 09 20:54:02 2016 +0100
@@ -0,0 +1,176 @@
+"use strict";
+
+App.module("GraphicsRenderingModule", function(GraphicsRenderingModule, App, Backbone, Marionette, $, _, Logger) {
+
+    GraphicsRenderingModule.addInitializer(function(options){
+
+        GraphicsRenderingModule.registerRenderer({
+            id: "similarity-plane",
+            inherit: "_",
+
+            defaultVegaConfig: {
+                comparisonMode: null,
+
+                symbolSize: 20,
+                internalSpaceOffset: 6,
+                colorForData: "#3182bd",
+
+                padding: {"top": 10, "left": 10, "bottom": 10, "right": 10},
+            },
+
+
+            _formVC: function(vc, data) {
+                vc.enoughSpaceForAxisLabels = vc.totalWidth > 200;
+                vc.width  = vc.totalWidth  - vc.padding.left - vc.padding.right;
+                vc.height = vc.totalHeight - vc.padding.top  - vc.padding.bottom;
+
+                var stats = {
+                        mds: [],
+                        list: []
+                }
+                if (data.self.stats) {
+                    data.self.stats = stats
+                }
+                var recordingCount = stats.list.length;
+
+                // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+                // Data
+                var mds = stats.mds;
+                var list = stats.list;
+
+                // .............................................................
+                // Data - points
+                var pointsInVegaData = [];
+                for (var i = 0; i < recordingCount; ++i) {
+                    var pointInVegaData = {
+                            x:     mds[i][0],
+                            y:     mds[i][1]
+                        };
+                    pointInVegaData.tooltip = list[i].label;
+//                                            + "<br/>x: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.x)
+//                                            + "<br/>y: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.y)
+
+                    pointsInVegaData.push(pointInVegaData);
+                }
+
+                vc.data.push({
+                    "name": "points",
+                    "values": pointsInVegaData
+                });
+
+
+                // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+                // Scales
+
+                // .............................................................
+                // Scale - x
+                vc.scales.push({
+                    "name": "x",
+                    "domain": {"data": "points", "field": "x"},
+                    "point": true,
+                    "round": true,
+                    "zero":  true,
+                    "range": [vc.internalSpaceOffset, vc.width - vc.internalSpaceOffset]
+                });
+
+                // .............................................................
+                // Scale - y
+                vc.scales.push({
+                    "name": "y",
+                    "domain": {"data": "points", "field": "y"},
+                    "point": true,
+                    "round": true,
+                    "zero":  true,
+                    "inverse": true,
+                    "range": [vc.internalSpaceOffset, vc.height - vc.internalSpaceOffset]
+                });
+
+
+                // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+                // Marks
+
+                // .............................................................
+                // Mark - background (to catch mouse events and remove tooltips)
+                vc.marks.push({
+                   "type": "rect",
+                   "properties": {
+                       "enter": {
+                           "x": {"value": -vc.padding.left},
+                           "y": {"value": -vc.padding.top},
+                           "fill": {"value": "#fff"},
+                           "y2": {"field": {"group": "height"}, "offset": vc.padding.left + vc.padding.right},
+                           "x2": {"field": {"group": "width"}, "offset": vc.padding.top + vc.padding.bottom},
+                       }
+                   }
+                });
+
+
+                // .............................................................
+                // Mark - frame
+                vc.marks.push({
+                    "type": "rect",
+                    "properties": {
+                        "enter": {
+                            "y": {"value": 0, "offset": .5},
+                            "y2": {"field": {"group": "height"}, "offset": -.5},
+                            "x": {"value": 0, "offset": .5},
+                            "x2": {"field": {"group": "width"}, "offset": -.5},
+                            "stroke": {"value": vc.colorForAxes},
+                            "strokeWidth": {"value": 1},
+//                            "x":  {"value": 0, "scale": "x" "offset": -1},
+//                            "width": {"value": 1},
+                        }
+                    }
+                 });
+
+                // .............................................................
+                // Mark - x axis
+//                vc.marks.push({
+//                   "type": "rect",
+//                   "properties": {
+//                       "enter": {
+//                           "x": {"value": 0},
+//                           "x2": {"field": {"group": "width"}},
+//                           "fill": {"value": vc.colorForAxes},
+//                           "y":  {"value": 0, "scale": "y"},
+//                           "height": {"value": 1},
+//                       }
+//                   }
+//                });
+
+
+                // .............................................................
+//                // Mark - y axis
+//                vc.marks.push({
+//                   "type": "rect",
+//                   "properties": {
+//                       "enter": {
+//                           "y": {"value": 0},
+//                           "y2": {"field": {"group": "height"}},
+//                           "fill": {"value": vc.colorForAxes},
+//                           "x":  {"value": 0, "scale": "x", "offset": -1},
+//                           "width": {"value": 1},
+//                       }
+//                   }
+//                });
+
+                // .............................................................
+                // Mark - cells
+                vc.marks.push({
+                    "type": "symbol",
+                    "from": {"data": "points"},
+                    "properties": {
+                        "enter": {
+                            "x":  {"field": "x", "scale": "x"},
+                            "y":  {"field": "y", "scale": "y"},
+                            "size": {"value": vc.symbolSize},
+                            "fill": {"value": vc.colorForData}
+                        }
+                    }
+                });
+
+
+            },
+        });
+    });
+}, Logger);