-
Notifications
You must be signed in to change notification settings - Fork 71
/
chart_2.json
20 lines (20 loc) · 29.9 KB
/
chart_2.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"alias": "chart2",
"name": "Chart 2",
"descriptor": {
"type": "timeseries",
"sizeX": 10,
"sizeY": 9,
"resources": [
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"
}
],
"templateHtml": "<div id=\"echart\" style=\"width:600px; height:400px;\"></div>",
"templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n",
"controllerScript": "var seriesMarkLine = {}\nvar myChart;\nvar option;\nvar serverAttributes = [];\nvar clientAttributes = [];\n\nself.onInit = function() {\n var settings = self.ctx.settings;\n if (self.ctx.settings.annotations !== undefined) {\n var clientAttributesToPoll = []\n var serverAttributesToPoll = []\n var clientAttributesCounter = 0;\n var serverAttributesCounter = 0;\n\n for (var i = 0; i < self.ctx.settings\n .annotations.length; i++) {\n if ((self.ctx.settings.annotations[i]\n .attributeType == 'Client') && (self\n .ctx.settings.annotations[i]\n .annotationsType == 'Attribute')) {\n if (clientAttributesCounter > 0)\n clientAttributesToPoll =\n clientAttributesToPoll + ','\n clientAttributesToPoll.push(self.ctx\n .settings.annotations[i]\n .attribute);\n clientAttributesCounter++;\n }\n if ((self.ctx.settings.annotations[i]\n .attributeType == 'Server') && (self\n .ctx.settings.annotations[i]\n .annotationsType == 'Attribute')) {\n\n\n if (serverAttributesCounter > 0)\n serverAttributesToPoll =\n serverAttributesToPoll + ','\n serverAttributesToPoll.push(self.ctx\n .settings.annotations[i]\n .attribute);\n serverAttributesCounter++;\n }\n\n }\n }\n\n\n\n\n\n\n if (clientAttributesToPoll !== '') {\n var entityId = self.ctx.datasources[0].entityId;\n var entity = {\n entityType: 'DEVICE',\n id: entityId\n }\n\n self.ctx.attributeService.getEntityAttributes(\n entity, 'CLIENT_SCOPE',\n clientAttributesToPoll\n ).subscribe((attributes) => {\n\n //Add Annotations that has been defined as ClientAttributes\n annotiatons = [];\n for (var i = 0; i < attributes\n .length; i++) {{\n\n \n for (var j = 0; j < self.ctx\n .settings.annotations\n .length; j++) {\n if (self.ctx.settings\n .annotations[j]\n .attribute ==\n attributes[i].key) {\n \n \n \n clientAttributes.push(\n {\n 'key': attributes[i].key,\n 'value': parseFloat(attributes[i].value),\n 'color': self.ctx\n .settings\n .annotations[j]\n .color,\n 'axisAssignment': self.ctx.settings.annotations[j].axisAssignment\n });\n \n \n\n\n \n }\n \n }\n }\n }\n \n\n\n })\n }\n\n\n\n\n if (serverAttributesToPoll !== '') {\n\n var entityId = self.ctx.datasources[0].entityId;\n var entity = {\n entityType: 'DEVICE',\n id: entityId\n }\n\n self.ctx.attributeService.getEntityAttributes(\n entity, 'SERVER_SCOPE',\n serverAttributesToPoll\n ).subscribe((attributes) => {\n\n //Add Annotations that has been defined as ClientAttributes\n annotiatons = [];\n \n for (var i = 0; i < attributes\n .length; i++) {\n\n \n for (var j = 0; j < self.ctx\n .settings.annotations\n .length; j++) {\n if (self.ctx.settings\n .annotations[j]\n .attribute ==\n attributes[i].key) {\n \n \n \n serverAttributes.push(\n {\n 'key': attributes[i].key,\n 'value': parseFloat(attributes[i].value),\n 'color': self.ctx\n .settings\n .annotations[j]\n .color,\n 'axisAssignment': self.ctx.settings.annotations[j].axisAssignment\n });\n \n \n\n\n \n }\n \n }\n }\n \n })\n }\n \n \n \n self.onResize();\n\n\n}\n\n function adjustHexOpacity(color, opacity) {\n \n const r = parseInt(color.slice(1, 3), 16);\n const g = parseInt(color.slice(3, 5), 16);\n const b = parseInt(color.slice(5, 7), 16);\n\n return 'rgba(' + r + ', ' + g + ', ' + b + ', ' +\n opacity + ')';\n }\n\nfunction draw() {\n \nlet seriesMarkLine = {\n\n data: []\n}\n\n var data1 = [\n [1640968951095, 2],\n [1640968961095, 4],\n [1640968971095, 6],\n [1640968981095, 8]\n ];\n\n var data2 = [\n [1640968951095, 1],\n [1640968961095, 2],\n [1640968971095, 3],\n [1640969981095, 4]\n ];\n\n\n myChart = echarts.init($('#echart', self.ctx\n .$container)[0]);\n\n\n var legend = Array();\n var series = Array();\n\n\n for (var i = 0; i < self.ctx.data.length; i++) {\n var settings = self.ctx.data[i].dataKey.settings;\n let legendElement = self.ctx.data[i].dataKey.label\n //legend.push(legendElement);\n\n\n let dataElement = Array();\n var datasourceData = self.ctx.data[i];\n var dataSet = datasourceData.data;\n var dataToAdd = Array();\n for (var d = 0; d < dataSet.length; d++) {\n var tsValuePair = dataSet[d];\n var ts = tsValuePair[0];\n var value = tsValuePair[1];\n\n dataElement.push([ts, value.toFixed(settings\n .numberOfDigits || 1)]);\n }\n dataToAdd.push(dataElement);\n\n\n\n let seriesMarkLineData = {\n type: 'average',\n name: 'Average'\n }\n if (settings.showAverage)\n seriesMarkLine.data.push(seriesMarkLineData)\n\n \n\n\n\n\n var markPoint = {\n data: [\n\n ]\n }\n if (settings.showMinValue)\n markPoint.data.push({\n type: 'min',\n name: 'min'\n })\n if (settings.showMaxValue)\n markPoint.data.push({\n type: 'max',\n name: 'max'\n })\n\n\n\n let seriesElement = {\n name: legendElement,\n itemStyle: {\n normal: {\n color: self.ctx.data[i].dataKey\n .color\n }\n },\n type: (settings.chartType == 'Bar') ?\n 'bar' : 'line',\n yAxisIndex: (settings.axisAssignment ==\n 'Right') ? 1 : 0,\n data: dataElement,\n symbol: (self.ctx.settings.showDataPoints) ?\n 'circle' : 'none',\n markLine: seriesMarkLine,\n markPoint: markPoint,\n\n\n }\n\n if (settings.fillChart) {\n\n let color1 = settings.gradientColor1 ||\n '#0366fc'\n\n let color2 = settings.gradientColor2 ||\n '#a7c5f2'\n seriesElement.areaStyle = {\n color: new echarts.graphic\n .LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: adjustHexOpacity(\n color1, settings.fillOpacity)\n },\n {\n offset: 1,\n color: adjustHexOpacity(\n color2, settings.fillOpacity)\n }\n ])\n }\n\n\n\n }\n\n\n\n series.push(seriesElement)\n\n\n\n\n\n }\n \n \n \n\n \n\n\n\n option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n crossStyle: {\n color: '#999'\n }\n }\n },\n toolbox: {\n\n feature: {\n dataView: {\n show: true,\n readOnly: false\n },\n //magicType: {show: true, type: ['line', 'bar']},\n //restore: {show: true},\n saveAsImage: {\n show: true\n },\n dataZoom: {\n yAxisIndex: 'none'\n },\n restore: {}\n }\n },\n legend: {\n data: legend\n },\n xAxis: [{\n type: 'time',\n axisLabel: {\n hideOverlap: true\n }\n\n //axisPointer: {\n // type: 'shadow'\n //}\n }],\n dataZoom: [{\n type: 'inside',\n throttle: 50\n }]\n ,\n yAxis: [{\n type: 'value',\n name: self.ctx.settings\n .yAxisLeftTitle || '',\n\n //interval: 50,\n axisLabel: {\n formatter: '{value} ' + (self\n .ctx.settings\n .yAxisLeftUnit || 'ml')\n }\n },\n {\n type: 'value',\n name: self.ctx.settings\n .yAxisRightTitle || '',\n\n //interval: 5,\n axisLabel: {\n formatter: '{value} ' + (self\n .ctx.settings\n .yAxisRightUnit || 'ml')\n }\n }\n ],\n series: series\n };\n if (self.ctx.settings.showPanZoomTool){\n option.dataZoom.push( \n {\n \n start: 0,\n stop: 100\n \n })\n \n \n }\n\n if (!self.ctx.settings.yAxisLeftAutoScale) {\n\n option.yAxis[0].min = self.ctx.settings\n .yAxisLeftMinScale || 0,\n option.yAxis[0].max = self.ctx.settings\n .yAxisLeftMaxScale || 100\n }\n if (!self.ctx.settings.yAxisRightAutoScale) {\n\n option.yAxis[1].min = self.ctx.settings\n .yAxisRightMinScale || 0,\n option.yAxis[1].max = self.ctx.settings\n .yAxisRightMaxScale || 100\n }\n\n myChart.setOption(option);\n myChart.resize();\n \n\n}\n\nself.onDataUpdated = function() {\n\n //self.onResize();\n var series = Array();\n for (var i = 0; i < self.ctx.data.length; i++) {\n let seriesMarkLine = {\n\n data: []\n}\n var settings = self.ctx.data[i].dataKey.settings;\n let legendElement = self.ctx.data[i].dataKey.label\n //legend.push(legendElement);\n\n\n let dataElement = Array();\n var datasourceData = self.ctx.data[i];\n var dataSet = datasourceData.data;\n var dataToAdd = Array();\n for (var d = 0; d < dataSet.length; d++) {\n var tsValuePair = dataSet[d];\n var ts = tsValuePair[0];\n var value = tsValuePair[1];\n\n dataElement.push([ts, value.toFixed(settings\n .numberOfDigits || 1)]);\n }\n dataToAdd.push(dataElement);\n\n\n\n var seriesMarkLineData = {\n type: 'average',\n name: 'Average'\n }\n if (settings.showAverage)\n seriesMarkLine.data.push(seriesMarkLineData)\n\n if (self.ctx.settings.annotations != undefined) {\n\n \n }\n\n\n\n\n var markPoint = {\n data: [\n\n ]\n }\n if (settings.showMinValue)\n markPoint.data.push({\n type: 'min',\n name: 'min'\n })\n if (settings.showMaxValue)\n markPoint.data.push({\n type: 'max',\n name: 'max'\n })\n\n\n\n let seriesElement = {\n name: legendElement,\n itemStyle: {\n normal: {\n color: self.ctx.data[i].dataKey\n .color\n }\n },\n type: (settings.chartType == 'Bar') ?\n 'bar' : 'line',\n yAxisIndex: (settings.axisAssignment ==\n 'Right') ? 1 : 0,\n data: dataElement,\n symbol: (self.ctx.settings.showDataPoints) ?\n 'circle' : 'none',\n markLine: seriesMarkLine,\n markPoint: markPoint,\n\n\n }\n\n if (settings.fillChart) {\n let color1 = settings.gradientColor1 ||\n '#0366fc'\n\n let color2 = settings.gradientColor2 ||\n '#a7c5f2'\n seriesElement.areaStyle = {\n color: new echarts.graphic\n .LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: adjustHexOpacity(\n color1, settings.fillOpacity)\n },\n {\n offset: 1,\n color: adjustHexOpacity(\n color2, settings.fillOpacity)\n }\n ])\n }\n }\n series.push(seriesElement)\n }\n \n // Add Fixed Annotations\n if (self.ctx.settings.annotations != undefined) {\n\n for (var j = 0; j < self.ctx.settings\n .annotations.length; j++) {\n var color = self.ctx.settings\n .annotations[j].color || 'blue';\n \n let seriesMarkLineData1 = {\n yAxis: self.ctx.settings\n .annotations[j].fixedNumber,\n name: self.ctx.settings\n .annotations[j].description,\n lineStyle: {\n type: \"solid\", \n color: color,\n width: 2\n \n },\n label:{\n position: 'middle',\n formatter: '{b}: {c}'\n } \n }\n \n if (self.ctx.settings\n .annotations[j].description == undefined)\n seriesMarkLineData1.label.formatter = '{c}'\n \n for (var i = 0; i < self.ctx.data.length; i++)\n {\n \n if (self.ctx.settings.annotations[j]\n .annotationsType == 'Fixed')\n {\n if ((self.ctx.settings.annotations[j].axisAssignment ==\n 'Right') && (series[i].yAxisIndex == 1))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n \n break;\n }\n if ((self.ctx.settings.annotations[j].axisAssignment ==\n 'Left') && (series[i].yAxisIndex == 0))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n break;\n }\n \n }\n }\n }\n \n \n }\n \n \n \n // Add Server Atttribute Annotations\n if (self.ctx.settings.annotations != undefined) {\n \n for (var j = 0; j < serverAttributes.length; j++) {\n\n \n let seriesMarkLineData1 = {\n yAxis: serverAttributes[j].value,\n name: serverAttributes[j].key,\n lineStyle: {\n type: \"solid\", \n color: serverAttributes[j].color,\n width: 2\n \n },\n label:{\n position: 'middle',\n formatter: '{b}: {c}'\n } \n }\n \n\n \n for (var i = 0; i < self.ctx.data.length; i++)\n {\n\n\n if ((serverAttributes[j].axisAssignment ==\n 'Right') && (series[i].yAxisIndex == 1))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n \n break;\n }\n if ((serverAttributes[j].axisAssignment ==\n 'Left') && (series[i].yAxisIndex == 0))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n break;\n }\n \n \n }\n }\n \n \n }\n \n \n // Add Client Atttribute Annotations\n if (self.ctx.settings.annotations != undefined) {\n \n for (var j = 0; j < clientAttributes.length; j++) {\n\n \n let seriesMarkLineData1 = {\n yAxis: clientAttributes[j].value,\n name: clientAttributes[j].key,\n lineStyle: {\n type: \"solid\", \n color: clientAttributes[j].color,\n width: 2\n \n },\n label:{\n position: 'middle',\n formatter: '{b}: {c}'\n } \n }\n \n\n \n for (var i = 0; i < self.ctx.data.length; i++)\n {\n\n \n if ((clientAttributes[j].axisAssignment ==\n 'Right') && (series[i].yAxisIndex == 1))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n \n break;\n }\n if ((clientAttributes[j].axisAssignment ==\n 'Left') && (series[i].yAxisIndex == 0))\n {\n \n series[i].markLine.data.push(seriesMarkLineData1)\n \n break;\n }\n \n \n }\n }\n \n \n }\n \n if (myChart != undefined)\n {\n option.series = series;\n myChart.setOption(option);\n }\n \n\n}\n\nself.onResize = function() {\n\n $('#echart', self.ctx.$container)[0].style.height =\n self.ctx.height + \"px\";\n $('#echart', self.ctx.$container)[0].style.width = (\n self.ctx.width - 15) + \"px\";\n $('#echart', self.ctx.$container)[0].style\n .paddingLeft = (5) + \"px\";\n\n draw();\n self.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n\n}\n\nself.onMobileModeChanged = function() {\n\n}\n\nself.getSettingsSchema = function() {\n\n}\n\nself.getDataKeySettingsSchema = function() {\n\n}\n\nself.onDestroy = function() {\n\n}",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"yAxisLeftTitle\": {\n \"title\": \"Title Left Y-Axis\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"yAxisLeftUnit\": {\n \"title\": \"Unit Left Y-Axis\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"yAxisRightTitle\": {\n \"title\": \"Title Right Y-Axis\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"yAxisRightUnit\": {\n \"title\": \"Unit Right Y-Axis\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"showDataPoints\": {\n \"title\": \"Show Data points\",\n \"type\": \"boolean\",\n \"default\": false\n }\n ,\n \"showPanZoomTool\": {\n \"title\": \"Show Pan and Zoom tool\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \n \"yAxisLeftAutoScale\": {\n \"title\": \"Left Y-Axis Autoscale\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"yAxisLeftMinScale\": {\n \"title\": \"Left Y-Axis Min-Value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"yAxisLeftMaxScale\": {\n \"title\": \"Left Y-Axis Max-Value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"yAxisRightAutoScale\": {\n \"title\": \"Right Y-Axis Autoscale\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"yAxisRightMinScale\": {\n \"title\": \"Right Y-Axis Min-Value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"yAxisRightMaxScale\": {\n \"title\": \"Right Y-Axis Max-Value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"annotations\": {\n \"title\": \"Annotations\",\n \"type\": \"array\",\n \"minItems\": 0,\n \"items\": {\n \"title\": \"Attribute\",\n \"type\": \"object\",\n \"properties\": {\n \"annotationsType\": {\n \"title\": \"Annotations Type\",\n \"type\": \"string\",\n \"enum\": [\n \"Fixed\",\n \"Attribute\"\n ],\n \"default\": \"Fixed\"\n },\n \"fixedNumber\": {\n \"title\": \"Fixed Number\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"attribute\": {\n \"title\": \"Attribute\",\n \"type\": \"string\"\n },\n \"description\": {\n \"title\": \"Description\",\n \"type\": \"string\"\n },\n \"color\": {\n \"title\": \"Color\",\n \"type\": \"string\",\n \"enum\": [\n \"Red\",\n \"Green\",\n \"Blue\",\n \"Yellow\"\n ],\n \"default\": \"Green\"\n },\n\n \"attributeType\": {\n \"title\": \"Attribute Type\",\n \"type\": \"string\",\n \"enum\": [\n \"Client\",\n \"Server\"\n ],\n \"default\": \"Client\"\n },\n \"axisAssignment\": {\n \"title\": \"Axis Assignment\",\n \"type\": \"string\",\n \"enum\": [\n \"Left\",\n \"Right\"\n ],\n \"default\": \"Left\"\n }\n },\n \"required\": [\"color\"]\n }\n }\n \n }\n },\n \"form\": [\n \"yAxisLeftTitle\",\n \"yAxisLeftUnit\",\n \"yAxisLeftAutoScale\",\n \"yAxisLeftMinScale\",\n \"yAxisLeftMaxScale\",\n \"yAxisRightTitle\",\n \"yAxisRightUnit\",\n \"yAxisRightAutoScale\",\n \"yAxisRightMinScale\",\n \"yAxisRightMaxScale\",\n \"showDataPoints\",\n \"showPanZoomTool\",\n \"annotations\"\n \n \n ]\n}",
"dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"chartType\": {\n \"title\": \"Type\",\n \"type\": \"string\",\n \"enum\": [\n \"Line\",\n \"Bar\"],\n \"default\": \"Line\"\n },\n \"showAverage\": {\n \"title\": \"Show horizonal average line\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"showMinValue\": {\n \"title\": \"Show min. Value\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"showMaxValue\": {\n \"title\": \"Show max. value\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \n \n \n \"gradientColor1\": {\n \"title\": \"Gradient Color 1\",\n \"type\": \"string\",\n \"default\": \"#008a00\"\n },\n \"gradientColor2\": {\n \"title\": \"Gradient Color 2\",\n \"type\": \"string\",\n \"default\": \"#008a00\"\n },\n \n \"fillOpacity\": {\n \"title\": \"Fill Opacity\",\n \"type\": \"number\",\n \"minimum\": 0,\n \"maximum\": 1,\n \"default\": 0.5\n },\n \"fillChart\": {\n \"title\": \"fill Chart\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"axisAssignment\": {\n \"title\": \"Axis Assignment\",\n \"type\": \"string\",\n \"enum\": [\n \"Left\",\n \"Right\"],\n \"default\": \"Left\"\n },\n \"numberOfDigits\": {\n \"title\": \"Number of Digits\",\n \"type\": \"number\",\n \"default\": 1\n },\n \n \"required\": [\n ]\n }\n },\n \"form\": [\n \"chartType\",\n \n \n \"showAverage\",\n \"showMinValue\",\n \"showMaxValue\",\n \n \n \"fillChart\",\n {\n \"key\": \"gradientColor1\",\n \"type\": \"color\"\n },\n {\n \"key\": \"gradientColor2\",\n \"type\": \"color\"\n },\n \"fillOpacity\",\n \"axisAssignment\",\n \"numberOfDigits\"\n ]\n}",
"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\":{\"yAxisLeftAutoScale\":true,\"yAxisLeftMaxScale\":100,\"yAxisRightAutoScale\":true,\"yAxisRightMaxScale\":100,\"showPanZoomTool\":true,\"annotations\":[{\"annotationsType\":\"Fixed\",\"fixedNumber\":10,\"color\":\"Red\",\"attributeType\":\"Client\",\"axisAssignment\":\"Left\"}]},\"title\":\"Chart 2\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
}
}