initial commit

thingworx-field-work · Dec 31, 2020 · a8c3c0b · a8c3c0b
1 parent dd0381c
commit a8c3c0b
Show file tree

Hide file tree

Showing 8 changed files with 3,004 additions and 193 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.env.sample b/.env.sample
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "demoWebpack",
+    "name": "PlotlyHeatChart",
     "version": "1.1.0",
     "description": "Example of a widget built using typescript, babel and webpack",
     "author": "placatus@iqnox.com",
@@ -16,6 +16,9 @@
         "upload": "webpack --mode development --env upload",
         "prepublishOnly": "rm -rf dist && mkdir dist && yarn run build && mv zip/* dist && yarn run buildDev && mv zip/* dist"
     },
+    "browser": {
+        "image-size": false
+    },
     "license": "ISC",
     "devDependencies": {
         "@babel/core": "^7.12.3",
@@ -47,6 +50,8 @@
         "semantic-release": "^17.1.2",
         "source-map-loader": "^1.1.2",
         "style-loader": "^2.0.0",
+        "sass": "1.26.11",
+        "sass-loader": "10.0.2",
         "ts-declaration-webpack-plugin": "^1.2.3",
         "ts-loader": "^8.0.7",
         "typescript": "^4.0.5",
@@ -59,7 +64,8 @@
         "zip-webpack-plugin": "^3.0.0"
     },
     "dependencies": {
-        "typescriptwebpacksupport": "^2.0.9"
+        "typescriptwebpacksupport": "^2.0.9",
+        "plotly.js": "^1.55.2"
     },
     "config": {
         "commitizen": {

diff --git a/src/ide/index.ts b/src/ide/index.ts
@@ -13,58 +13,38 @@ import {
     nonEditable,
     willSet,
     didSet,
+    sourcePropertyName,
 } from 'typescriptwebpacksupport/widgetIDESupport';
-
 import widgetIconUrl from '../images/icon.png';
 
 /**
- * The `@TWWidgetDefinition` decorator marks a class as a Thingworx widget. It can only be applied to classes
- * that inherit from the `TWComposerWidget` class. It must receive the display name of the widget as its first parameter.
- * Afterwards any number of widget aspects may be specified.
- *
- * Because of this, the `widgetProperties` method is now optional. If overriden, you must invoke the superclass
- * implementation to ensure that decorated aspects are initialized correctly.
+ * A 2D heat chart that uses the plotly library.
  */
-@description('A widget')
-@TWWidgetDefinition('Test', autoResizable)
-class DemoWebpackWidget extends TWComposerWidget {
+@TWWidgetDefinition('Heat Chart', autoResizable)
+class PlotlyHeatChart extends TWComposerWidget {
+
     /**
-     * The `@property` decorator can be applied to class members to mark them as widget properties.
-     * This must be applied with the base type of the property as its first parameter.
-     * The decorator can then also receive a series of aspects to apply to that properties as parameters.
-     *
-     * Because of this, the `widgetProperties` method is now optional. If overriden, you must invoke the superclass
-     * implementation to ensure that decorated properties are initialized correctly.
+     * The data source for this chart. This must be an infotable containing fields for the X, Y and Z axes.
      */
-    @property('NUMBER', defaultValue(90)) width: number;
+    @property('INFOTABLE', bindingTarget) data: TWInfotable;
 
     /**
-     * When the `@description` decorator is not used, the JSDoc documentation will be used as
-     * the description for the property.
+     * The field to use for the X axis values.
      */
-    @property('NUMBER', defaultValue(30)) height: number;
+    @property("FIELDNAME", sourcePropertyName('data')) xField: string;
 
     /**
-     * A number of aspects such as `willSet`, `didSet` and `didBind` can be used to specify various callback
-     * that will be invoked when the value of the property is bound or updated by the user through using the composer.
+     * The field to use for the Y axis values.
      */
-    @description('A label to display on the widget.')
-    @property(
-        'STRING',
-        bindingTarget,
-        defaultValue('my value'),
-        willSet('valueWillSet'),
-        didSet('valueDidSet'),
-    )
-    value: string;
+    @property('FIELDNAME', sourcePropertyName('data')) yField: string;
 
     /**
-     * The `@description` decorator can be applied before widget definitions and property, event or service decorators to specify
-     * the description of the decorated class member. That description will appear in the composer.
+     * The field to use for the Z axis values.  This should be a numeric value.
      */
-    @description('Tracks how many times the widget was clicked')
-    @property('NUMBER', bindingSource, nonEditable)
-    clickedAmount: number;
+    @property('FIELDNAME', sourcePropertyName('data')) zField: string;
+
+    @description('If enabled, rows for the same X and Y coordinates will be summed up. If disabled, subsequent values will ovewrite the previous values.')
+    @property('BOOLEAN', defaultValue(true)) mergeOverlappingValues: boolean;
 
     /**
      * Invoked to obtain the URL to this widget's icon.
@@ -79,67 +59,9 @@ class DemoWebpackWidget extends TWComposerWidget {
      * @return      The HTML structure.
      */
     renderHtml(): string {
-        return `<div class="widget-content widget-demo-viewer">${this.value}</div>`;
-    }
-
-    /**
-     * This method is invoked whenever the `value` property is about to be updated for any reason, either through
-     * direct assignment or because the user has edited its value in the composer,
-     * because it has been specified in the `willSet` aspect of the `value` property.
-     *
-     * Because of this, the `beforeSetProperty` method is now optional. If overriden, you must invoke the superclass
-     * implementation to ensure that decorated properties are updated correctly.
-     *
-     * @param value         Represents the property's new value.
-     * @return              A string, if the new value should be rejected, in which case the returned string will be
-     *                      displayed as an error message to the user. If the value should be accepted, this method should return nothing.
-     */
-    valueWillSet(value: string): string | void {
-        if (value == 'test') return 'Invalid value specified';
-    }
-
-    /**
-     * This method is invoked whenever the `value` property has been updated for any reason, either through
-     * direct assignment or because the user has edited its value in the composer,
-     * because it has been specified in the `didSet` aspect of the `value` property.
-     *
-     * Because of this, the `afterSetProperty` method is now optional. If overriden, you must invoke the superclass
-     * implementation to ensure that decorated properties are handled correctly.
-     *
-     * @param value         Represents the property's new value.
-     * @return              `true` if the widget should be redrawn because of this change, nothing or `false` otherwise.
-     */
-    valueDidSet(value: string): boolean | void {
-        this.jqElement[0].innerText = value;
+        return `<div class="widget-content widget-plotly-heatchart"></div>`;
     }
 
-    /**
-     * The service decorator defines a service.
-     *
-     * Because of this, the `widgetServices` method is now optional. If overriden, you must invoke the superclass
-     * implementation to ensure that decorated services are initialized correctly.
-     */
-    @description('Prints out a message when invoked')
-    @service
-    testService;
-
-    /**
-     * Property declarations can be mixed in with other method and event or service declarations.
-     */
-    @description('A message to display when the widget is clicked.')
-    @property('STRING', bindingTarget, defaultValue('Invoked via decorator'))
-    clickMessage: string;
-
-    /**
-     * The event decorator defines an event.
-     *
-     * Because of this, the `widgetEvents` method is now optional. If overriden, you must invoke the superclass
-     * implementation to ensure that decorated events are initialized correctly.
-     */
-    @description('Triggered when the widget is clicked')
-    @event
-    clicked;
-
     /**
      * Invoked after the widget's HTML element has been created.
      * The `jqElement` property will reference the correct element within this method.

diff --git a/src/runtime/index.scss b/src/runtime/index.scss
@@ -0,0 +1,11 @@
+@import "../../node_modules/plotly.js/src/css/_vars.scss";
+
+.js-plotly-plot .plotly {
+    @import "../../node_modules/plotly.js/src/css/_mixins.scss";
+    @import "../../node_modules/plotly.js/src/css/_base.scss";
+    @import "../../node_modules/plotly.js/src/css/_cursor.scss";
+    @import "../../node_modules/plotly.js/src/css/_modebar.scss";
+    @import "../../node_modules/plotly.js/src/css/_tooltip.scss";
+    @import "../../node_modules/plotly.js/src/css/_drag.scss";
+}
+@import "../../node_modules/plotly.js/src/css/_notifier.scss";