Merge pull request #350 from hashmapinc/tempus-261

Tempus 261

application/src/main/data/json/system/widget_bundles/trajectory_widgets.json

@@ -0,0 +1,25 @@
+{
+  "widgetsBundle": {
+    "alias": "trajectory_widgets",
+    "title": "Trajectory Viewers",
+    "image": null
+  },
+  "widgetTypes": [
+    {
+      "alias": "demo_trajectory_viewer",
+      "name": "Demo Trajectory Viewer",
+      "descriptor": {
+        "type": "timeseries",
+        "sizeX": 8,
+        "sizeY": 5,
+        "resources": [],
+        "templateHtml": "",
+        "templateCss": "",
+        "controllerScript": "self.onInit = function() {\n    TrajectoryViewer.init(self.ctx);\n}\n\nself.onDataUpdated = function() {\n    TrajectoryViewer.onDataUpdated();\n}\n\nself.onResize = function() {\n    TrajectoryViewer.onWindowResize();\n}\n\nself.onEditModeChanged = function() {\n    console.log('edit mode changed...');\n}\n\nself.onMobileModeChanged = function() {\n    console.log('mobile mode changed...');\n}\n\nself.getSettingsSchema = function() {\n    return TbDsFlot.settingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n    return TbDsFlot.datakeySettingsSchema(true);\n}\n\nself.onDestroy = function() {\n    TrajectoryViewer.destroyWidget();\n}\n",
+        "settingsSchema": "{}",
+        "dataKeySettingsSchema": "{}",
+        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"legend\":{\"show\":false,\"position\":\"nw\",\"backgroundColor\":\"#f0f0f0\",\"backgroundOpacity\":0.85,\"labelBoxBorderColor\":\"rgba(1, 1, 1, 0.45)\"},\"decimals\":1,\"stack\":false,\"tooltipIndividual\":false},\"title\":\"Trajectory Viewer\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
+      }
+    }
+  ]
+}

docs/development/customWidgets/trajectory-viewer.rst

@@ -0,0 +1,19 @@
+####################
+3D Trajectory Viewer
+####################
+
+This widget displays witsml trajectory data in a 3D chart.
+
+Usage
+=====
+This widget expects data to exist in the first data source of the widget.
+
+It will look for trajectory data objects with the following fields:
+
+``azi`` - azimuth in degrees
+``incl`` - incline in degrees
+``md`` - measured depth in any units. The metric of this measure will be used in the chart.
+
+Help
+====
+If you need any help, please reach out to `Randy Pitcher <https://github.com/randypitcherii>`_.

docs/development/widget.rst

@@ -688,4 +688,22 @@ Widget code debugging tips
 **************************
 
 The most simple method of debugging is Web console output. Just place console.log(…) function inside any part of widget JavaScript code. Then click Run button to restart widget code and observe debug information in the Web console.
-Another and most effective method of debugging is to invoke browser debugger. Put debugger; statement into the place of widget code you are interested in and then click Run button to restart widget code. Browser debugger (if enabled) will automatically pause code execution at the debugger statement and you will be able to analyze script execution using browser debugging tools.
+
+Another and most effective method of debugging is to invoke browser debugger. Put debugger; statement into the place of widget code you are interested in and then click Run button to restart widget code. Browser debugger (if enabled) will automatically pause code execution at the debugger statement and you will be able to analyze script execution using browser debugging tools.
+
+While developing client-side js, if you need to access the ``document`` or ``window`` objects, add this comment at the end of the line in your code referencing the object: 
+
+``//eslint-disable-line``
+
+This will tell the linter to ignore the line. Only do this if you have to. In most cases, use the angular ``$window`` object instead.
+
+**************
+Custom Widgets
+**************
+See documentation on custom widgets below:
+
+.. toctree::
+    :maxdepth: 1
+
+    customWidgets/trajectory-viewer
+  

ui/.eslintrc

@@ -15,5 +15,9 @@
   "globals": {
     "FileReader": true,
     "FormData": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
   }
 }