Add Chart Conversion

README.md

@@ -19,7 +19,9 @@ Please note that this script does not cover everything, see below for a list of
 - `ui_slider` - converted to Dashboard 2.0's `ui-slider`
 - `ui_text_input` - converted to Dashboard 2.0's `ui-text-input`
     - `.tooltip` is not supported
+- `ui_chart` - converted to Dashboard 2.0's `ui-chart`
 - `ui_numeric` - converted to Dashboard 2.0's `ui-numeric-input`
+
 
 ### Config Nodes
 

tests/flows/basic-layout-after.json

@@ -231,38 +231,95 @@
         ]
     },
     {
-		"id": "940a12ce19bf2212",
-		"type": "ui-number-input",
-		"z": "94d6d107f1742efb",
-		"name": "",
-		"label": "numeric",
-		"tooltip": "",
-		"group": "f663864dda246564",
-		"order": 13,
-		"width": 0,
-		"height": 0,
-		"passthru": true,
-		"topic": "topic",
-		"topicType": "msg",
-		"min": 0,
-		"max": 10,
-		"step": 1,
-		"className": "",
-		"x": 320,
-		"y": 440,
-		"wires": [
-			[
+        "id": "1831c1945f33a193",
+        "type": "ui-chart",
+        "z": "b210791026f9bf3f",
+        "group": "856a31bba370e7fc",
+        "name": "My Favorite Chart",
+        "label": "My Favorite Chart",
+        "order": 4,
+        "chartType": "line",
+        "category": "topic",
+        "categoryType": "msg",
+        "xAxisLabel": "",
+        "xAxisProperty": "",
+        "xAxisPropertyType": "property",
+        "xAxisType": "time",
+        "xAxisFormat": "",
+        "xAxisFormatType": "HH:mm:ss",
+        "yAxisLabel": "",
+        "yAxisProperty": "",
+        "ymin": "",
+        "ymax": "",
+        "action": "append",
+        "stackSeries": false,
+        "pointShape": "circle",
+        "pointRadius": 4,
+        "showLegend": true,
+        "removeOlder": 1,
+        "removeOlderUnit": "3600",
+        "removeOlderPoints": "",
+        "colors": [
+            "#0095ff",
+            "#ff0000",
+            "#ff7f0e",
+            "#2ca02c",
+            "#a347e1",
+            "#d62728",
+            "#ff9896",
+            "#9467bd",
+            "#c5b0d5"
+        ],
+        "textColor": [
+            "#666666"
+        ],
+        "textColorDefault": true,
+        "gridColor": [
+            "#e5e5e5"
+        ],
+        "gridColorDefault": true,
+        "width": 6,
+        "height": "4",
+        "className": "",
+        "x": 760,
+        "y": 160,
+        "wires": [
+            []
+        ]
+    },
+    {
+      "id": "940a12ce19bf2212",
+      "type": "ui-number-input",
+      "z": "94d6d107f1742efb",
+      "name": "",
+      "label": "numeric",
+      "tooltip": "",
+      "group": "f663864dda246564",
+      "order": 13,
+      "width": 0,
+      "height": 0,
+      "passthru": true,
+      "topic": "topic",
+      "topicType": "msg",
+      "min": 0,
+      "max": 10,
+      "step": 1,
+      "className": "",
+      "x": 320,
+      "y": 440,
+      "wires": [
+        [
 
-			]
-		],
-		"sendOnBlur": true,
-		"sendOnEnter": true,
-		"clearable": false,
-		"icon": "",
-		"iconPosition": "left",
-		"iconInnerPosition": "inside",
-		"spinner": "default"
-	},
+        ]
+      ],
+      "sendOnBlur": true,
+      "sendOnEnter": true,
+      "clearable": false,
+      "icon": "",
+      "iconPosition": "left",
+      "iconInnerPosition": "inside",
+      "spinner": "default"
+    },
     {
         "id": "856a31bba370e7fc",
         "type": "ui-group",

tests/flows/basic-layout-before.json

@@ -223,6 +223,51 @@
             []
         ]
     },
+    {
+        "id": "58d1200d4648ff7b",
+        "type": "ui_chart",
+        "z": "b210791026f9bf3f",
+        "d": true,
+        "name": "My Favorite Chart",
+        "group": "856a31bba370e7fc",
+        "order": 3,
+        "width": 6,
+        "height": 4,
+        "label": "My Favorite Chart",
+        "chartType": "line",
+        "legend": "false",
+        "xformat": "HH:mm:ss",
+        "interpolate": "linear",
+        "nodata": "",
+        "dot": false,
+        "ymin": "",
+        "ymax": "",
+        "removeOlder": 1,
+        "removeOlderPoints": "",
+        "removeOlderUnit": "3600",
+        "cutout": 0,
+        "useOneColor": false,
+        "useUTC": false,
+        "colors": [
+            "#1f77b4",
+            "#aec7e8",
+            "#ff7f0e",
+            "#2ca02c",
+            "#98df8a",
+            "#d62728",
+            "#ff9896",
+            "#9467bd",
+            "#c5b0d5"
+        ],
+        "outputs": 1,
+        "useDifferentColor": false,
+        "className": "abcd",
+        "x": 550,
+        "y": 160,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "b52c292d531874a6",
         "type": "ui_numeric",

tests/index.js

@@ -205,6 +205,20 @@ describe('Dashboard Migration Script', function () {
         })
     })
 
+    describe('UI Chart', function () {
+        const chart = utils.getByType(migratedFlow, 'ui-chart')[0]
+        const chart1 = utils.getByType(basicLayoutAfter, 'ui-chart')[0]
+
+        const excludeFromChecks = ['id', 'group']
+        Object.keys(chart).forEach((prop) => {
+            if (!excludeFromChecks.includes(prop)) {
+                it('should set ' + prop + ' correctly ', function () {
+                    chart[prop].should.eql(chart1[prop])
+                })
+            }
+        })
+    })
+
     describe('UI Number Input', function () {
         const input = utils.getByType(migratedFlow, 'ui-number-input')[0]
         const input1 = utils.getByType(basicLayoutAfter, 'ui-number-input')[0]

transformers/index.js

@@ -8,5 +8,6 @@ module.exports = {
     uiSwitch: require('./nodes/ui-switch'),
     uiText: require('./nodes/ui-text'),
     uiTextInput: require('./nodes/ui-text-input'),
+    uiChart: require('./nodes/ui-chart'),
     uiNumeric: require('./nodes/ui-numeric')
 }

transformers/map.json

@@ -8,5 +8,6 @@
   "ui_switch": "uiSwitch",
   "ui_text": "uiText",
   "ui_text_input": "uiTextInput",
+  "ui_chart": "uiChart",
   "ui_numeric": "uiNumeric"
 }

transformers/nodes/ui-chart.js

@@ -0,0 +1,41 @@
+module.exports = function (node, baseId, themeId) {
+    node.type = 'ui-chart'
+
+    // update properties
+    // NONE
+    node.xAxisFormatType = node.xformat
+    node.showLegend = node.legend
+    // new properties
+    node.category = 'topic'
+    node.categoryType = 'msg'
+    node.xAxisLabel = ''
+    node.xAxisFormat = ''
+    node.xAxisProperty = ''
+    node.xAxisPropertyType = 'property'
+    node.xAxisType = 'time'
+    node.yAxisLabel = ''
+    node.yAxisProperty = ''
+    node.textColor = ['#666666']
+    node.textColorDefault = true
+    node.gridColor = ['#e5e5e5']
+    node.gridColorDefault = true
+    node.action = 'append'
+    node.stackSeries = false
+    node.pointShape = 'circle'
+    node.pointRadius = 4
+
+    // remove properties
+    delete node.dot
+    delete node.useUTC
+    delete node.useDifferentColor
+    delete node.interpolate
+    delete node.nodata
+    delete node.cutout
+    delete node.useOneColor
+    delete node.outputs
+    // remove old properties
+    delete node.xformat
+    delete node.legend
+
+    return node
+}