Okay, here is a quick approximation of the Analog Indicator. There are many other things that could be added to this, however, I would honestly recommend something more like what @Felipe_CRM suggested in their last post. Or quite frankly just a simple Bar Chart.
I did it in a vertical orientation rather than Horizontal, but it wouldn't be too difficult to convert this.
Here is what it looks like:
Here is the script which does the magic. Note that while it is included completely in a script transform, I would recommend that you move this to a script library and then call this from a runScript()
expression.
from copy import deepcopy
groupElement = {'type': 'group', 'elements':[]}
arrowElement = value.element
textElement = {'type': 'text', 'fill':{'paint':'#FFFFFF'},'style':{'fontFamily':'Verdana', 'fontSize':14, 'fontWeight': 'bold', 'text-anchor':'end'}, 'x':'12.5px', 'y':'','text':''}
elements = []
for arrow,val in value.processValues.iteritems():
group = deepcopy(groupElement)
text = deepcopy(textElement)
element = deepcopy(system.util.jsonDecode(system.util.jsonEncode(arrowElement)))
element['fill']['paint'] = val['color']
element['style']['translate'] = '0px {}px'.format((self.custom.maxValue - val['value']) * 500 / (self.custom.maxValue - self.custom.minValue))
text['y'] = '{}px'.format((self.custom.maxValue - val['value']) * 500 / (self.custom.maxValue - self.custom.minValue) + 25)
text['text'] = arrow[-1:]
group['elements'].extend([element,text])
elements.append(group)
return elements
Here is the view JSON, which you can import into a project (NOTE: create a new view to import this into, then you can directly copy the SVG element.)
View JSON
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 563,
"width": 145
}
},
"root": {
"children": [
{
"custom": {
"arrow": {
"collisionDistance": 50,
"element": {
"fill": {
"paint": "#787878"
},
"points": "0,0 30,20 0,40",
"type": "polygon"
},
"processValues": {
"Arrow1": {
"color": "#CDC65E",
"value": 15
},
"Arrow2": {
"color": "#0F0F0F",
"value": 50
},
"Arrow3": {
"color": "#00FF00",
"value": 30
},
"Arrow4": {
"color": "#0000FF",
"value": 80
},
"Arrow5": {
"color": "#FF0000",
"value": 10
}
},
"reverseIndicator": false,
"reversed": {}
},
"desiredHigh": 65,
"desiredLow": 40,
"desiredRangeColor": "#8EBAE3",
"maxValue": 100,
"minValue": 0
},
"meta": {
"name": "blank_1"
},
"position": {
"height": 500,
"rotate": {
"anchor": "377% 50%"
},
"width": 100,
"x": 22,
"y": 23
},
"propConfig": {
"custom.arrow.element.style": {
"binding": {
"config": {
"struct": {
"transform": "if({this.custom.arrow.reverseIndicator},\u0027rotate(180deg)\u0027,\u0027\u0027)",
"transform-origin": "\u002750px 20px\u0027"
},
"waitOnAll": true
},
"type": "expr-struct"
}
},
"props.elements[1].fill.paint": {
"binding": {
"config": {
"path": "this.custom.desiredRangeColor"
},
"type": "property"
}
},
"props.elements[1].height": {
"binding": {
"config": {
"expression": "(({this.custom.desiredHigh} - {this.custom.desiredLow}) * 500 / ({this.custom.maxValue} - {this.custom.minValue}))"
},
"type": "expr"
}
},
"props.elements[1].y": {
"binding": {
"config": {
"expression": "500 - ({this.custom.desiredHigh} * 500 / ({this.custom.maxValue} - {this.custom.minValue}))"
},
"type": "expr"
}
},
"props.elements[2].elements": {
"binding": {
"config": {
"path": "this.custom.arrow"
},
"transforms": [
{
"code": "\tfrom copy import deepcopy\n\tgroupElement \u003d {\u0027type\u0027: \u0027group\u0027, \u0027elements\u0027:[]}\n\tarrowElement \u003d value.element\n\ttextElement \u003d {\u0027type\u0027: \u0027text\u0027, \u0027fill\u0027:{\u0027paint\u0027:\u0027#FFFFFF\u0027},\u0027style\u0027:{\u0027fontFamily\u0027:\u0027Verdana\u0027, \u0027fontSize\u0027:14, \u0027fontWeight\u0027: \u0027bold\u0027, \u0027text-anchor\u0027:\u0027end\u0027}, \u0027x\u0027:\u002712.5px\u0027, \u0027y\u0027:\u0027\u0027,\u0027text\u0027:\u0027\u0027}\n\telements \u003d []\n\t\n\tfor arrow,val in value.processValues.iteritems():\n\t\tgroup \u003d deepcopy(groupElement)\n\t\ttext \u003d deepcopy(textElement)\n\t\telement \u003d deepcopy(system.util.jsonDecode(system.util.jsonEncode(arrowElement)))\n\t\telement[\u0027fill\u0027][\u0027paint\u0027] \u003d val[\u0027color\u0027]\n\t\telement[\u0027style\u0027][\u0027translate\u0027] \u003d \u00270px {}px\u0027.format((self.custom.maxValue - val[\u0027value\u0027]) * 500 / (self.custom.maxValue - self.custom.minValue))\n\t\ttext[\u0027y\u0027] \u003d \u0027{}px\u0027.format((self.custom.maxValue - val[\u0027value\u0027]) * 500 / (self.custom.maxValue - self.custom.minValue) + 25)\n\t\ttext[\u0027text\u0027] \u003d arrow[-1:]\n\t\tgroup[\u0027elements\u0027].extend([element,text])\n\t\telements.append(group)\n\t\n\treturn elements",
"type": "script"
}
],
"type": "property"
}
}
},
"props": {
"elements": [
{
"fill": {
"paint": "#00000000"
},
"height": "100%",
"id": "backGround",
"stroke": {
"paint": "#c0c0c0",
"width": 3
},
"type": "rect",
"width": "25%",
"x": "37.5%",
"y": 0
},
{
"fill": {},
"id": "backGround",
"stroke": {
"paint": "#c0c0c0",
"width": 3
},
"type": "rect",
"width": "25%",
"x": "37.5%"
},
{
"id": "Arrows",
"type": "group"
}
],
"viewBox": "0 0 100 500",
"viewPort": {
"height": 50,
"width": 50
}
},
"type": "ia.shapes.svg"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}