Repository: VolkovLabs/volkovlabs-dynamictext-panel
Pull request #311 (2024-05-31 08:38:38)

Add Units and Decimals in panel options
Per issue: #307 
Added provisioning with examples;   
enable Unit property 

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/VolkovLabs/volkovlabs-dynamictext-panel/pull/311?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VolkovLabs) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 98.92%. Comparing base [(`cf88dc7`)](https://app.codecov.io/gh/VolkovLabs/volkovlabs-dynamictext-panel/commit/cf88dc7de09ae68fff017a905f52c58727f0b88b?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VolkovLabs) to head [(`be53e0f`)](https://app.codecov.io/gh/VolkovLabs/volkovlabs-dynamictext-panel/commit/be53e0fc70f4647de6ad74495bd7d14b62ca875f?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VolkovLabs).


<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main     #311   +/-   ##
=======================================
  Coverage   98.92%   98.92%           
=======================================
  Files          35       35           
  Lines         463      463           
  Branches       60       72   +12     
=======================================
  Hits          458      458           
  Misses          5        5           
```



</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/VolkovLabs/volkovlabs-dynamictext-panel/pull/311?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VolkovLabs).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VolkovLabs).


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc74713..b5b1ca5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - Updated name to Business Text Panel (#304)
 - Prepared for Grafana 11 (#304)
 - Added ES6 Modules Support (#312)
+- Added Units and Decimal in panel options (#311)
 
 ## 4.5.0 (2024-03-13)
 
diff --git a/provisioning/dashboards/units.json b/provisioning/dashboards/units.json
new file mode 100644
index 0000000..b77033c
--- /dev/null
+++ b/provisioning/dashboards/units.json
@@ -0,0 +1,920 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "target": {
+          "limit": 100,
+          "matchAny": false,
+          "tags": [],
+          "type": "dashboard"
+        },
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": 6,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "decbytes"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 0,
+        "y": 0
+      },
+      "id": 25,
+      "options": {
+        "afterRender": "",
+        "content": "{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Value 1", "Value 2", "Value 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["1048576", "2048576", "3048576"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Bytes",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "watt"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 4,
+        "y": 0
+      },
+      "id": 26,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Watt 1", "Watt 2", "Watt 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["1500", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Energy: Watt",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "forceN"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 8,
+        "y": 0
+      },
+      "id": 27,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Force 1", "Force 2", "Force 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["1500", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Force: Newtons",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "massg"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 12,
+        "y": 0
+      },
+      "id": 28,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Mass 1", "Mass 2", "Mass 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["1500", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Mass: gram",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "pressurepa"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 16,
+        "y": 0
+      },
+      "id": 33,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Pressure 1", "Pressure 2", "Pressure 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["173", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Pressure: pascals",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "lengthmm"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 0,
+        "y": 7
+      },
+      "id": 31,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Length 1", "Length 2", "Length 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["173", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Length: millimeter",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "litre"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 4,
+        "y": 7
+      },
+      "id": 29,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Volume 1", "Volume 2", "Volume 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["1", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Volume: litre",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "s"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 8,
+        "y": 7
+      },
+      "id": 30,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Time 1", "Time 2", "Time 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["173", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Time: seconds",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "U0HP2Rv4z"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Value"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "rothz"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 12,
+        "y": 7
+      },
+      "id": 32,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{Text}}: {{Value}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": ["helpers"],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "U0HP2Rv4z"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Text",
+                "type": "string",
+                "values": ["Rotation Speed 1", "Rotation Speed 2", "Rotation Speed 3"]
+              },
+              {
+                "config": {},
+                "name": "Value",
+                "type": "string",
+                "values": ["10", "1600", "100000"]
+              }
+            ],
+            "meta": {},
+            "name": "Value"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Rotation Speed: Hertz",
+      "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "datasource",
+        "uid": "grafana"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "decimals": 5,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 16,
+        "y": 7
+      },
+      "id": 34,
+      "options": {
+        "afterRender": "",
+        "content": "{{!-- Return --}}\n{{A-series}}\n",
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "handlebars"
+        },
+        "editors": [],
+        "externalScripts": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "everyRow",
+        "styles": "",
+        "wrap": true
+      },
+      "pluginVersion": "5.0.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "datasource",
+            "uid": "grafana"
+          },
+          "queryType": "randomWalk",
+          "refId": "A"
+        }
+      ],
+      "title": "Time Series: decimals",
+      "type": "marcusolsson-dynamictext-panel"
+    }
+  ],
+  "refresh": "",
+  "revision": 1,
+  "schemaVersion": 39,
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-1y",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Units",
+  "uid": "d2296f50-eee2-4171-b894-5b0f62312c83",
+  "version": 40,
+  "weekStart": ""
+}
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 4783628..e464a11 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -5,6 +5,7 @@ import {
   AppEvents,
   DataFrame,
   EventBus,
+  formattedValueToString,
   InterpolateFunction,
   PanelData,
   TimeRange,
@@ -182,15 +183,25 @@ export const Text: React.FC<Props> = ({
           frame.fields.reduce(
             (acc, { config, name, values, display }) => {
               values.forEach((value, i) => {
+                /**
+                 * Formatted Value
+                 */
+                const formattedValue = display?.(value);
+
                 /**
                  * Status Color
                  */
-                const statusColor = options.status === name ? display?.(value).color : acc[i]?.statusColor;
+                const statusColor = options.status === name ? formattedValue?.color : acc[i]?.statusColor;
 
                 /**
                  * Set Value and Status Color
                  */
-                acc[i] = { ...acc[i], [config.displayName || name]: value, statusColor };
+                acc[i] = {
+                  ...acc[i],
+                  [config.displayName || name]:
+                    config.unit && formattedValue ? formattedValueToString(formattedValue) : value,
+                  statusColor,
+                };
               });
 
               return acc;
diff --git a/src/module.ts b/src/module.ts
index 950cc2c..2aab4ea 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -20,11 +20,9 @@ export const plugin = new PanelPlugin<PanelOptions>(TextPanel)
   .setMigrationHandler(getMigratedOptions)
   .useFieldConfig({
     disableStandardOptions: [
-      FieldConfigProperty.Unit,
       FieldConfigProperty.Color,
       FieldConfigProperty.Min,
       FieldConfigProperty.Max,
-      FieldConfigProperty.Decimals,
       FieldConfigProperty.DisplayName,
       FieldConfigProperty.NoValue,
       FieldConfigProperty.Links,


Test patch:
diff --git a/provisioning/dashboards/e2e.json b/provisioning/dashboards/e2e.json
index 9636c5a..f8cca7b 100644
--- a/provisioning/dashboards/e2e.json
+++ b/provisioning/dashboards/e2e.json
@@ -18,7 +18,6 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 1,
   "links": [],
   "liveNow": false,
   "panels": [
@@ -29,6 +28,7 @@
       },
       "fieldConfig": {
         "defaults": {
+          "decimals": 5,
           "thresholds": {
             "mode": "absolute",
             "steps": [
@@ -43,7 +43,24 @@
             ]
           }
         },
-        "overrides": []
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "series"
+            },
+            "properties": [
+              {
+                "id": "unit",
+                "value": "none"
+              },
+              {
+                "id": "decimals",
+                "value": 3
+              }
+            ]
+          }
+        ]
       },
       "gridPos": {
         "h": 9,
@@ -69,7 +86,7 @@
         "styles": "",
         "wrap": true
       },
-      "pluginVersion": "4.5.0",
+      "pluginVersion": "5.0.0",
       "targets": [
         {
           "datasource": {
@@ -82,14 +99,25 @@
                 "config": {},
                 "name": "time",
                 "type": "number",
-                "values": [1713328742800, 1713328762800, 1713328782800, 1713328802800, 1713328822800, 1713328842800]
+                "values": [
+                  1713328742800,
+                  1713328762800,
+                  1713328782800,
+                  1713328802800,
+                  1713328822800,
+                  1713328842800
+                ]
               },
               {
                 "config": {},
                 "name": "series",
                 "type": "number",
                 "values": [
-                  71.60611982291123, 71.61689011800895, 72.01347581897211, 71.86455471820847, 72.16478293268965,
+                  71.60611982291123,
+                  71.61689011800895,
+                  72.01347581897211,
+                  71.86455471820847,
+                  72.16478293268965,
                   71.71156805525236
                 ]
               }
@@ -113,6 +141,7 @@
     "from": "now-6h",
     "to": "now"
   },
+  "timeRangeUpdatedDuringEditOrView": false,
   "timepicker": {},
   "timezone": "",
   "title": "E2E",
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
index a37d6e0..0514e5c 100644
--- a/src/components/Text/Text.test.tsx
+++ b/src/components/Text/Text.test.tsx
@@ -287,6 +287,101 @@ describe('Text', () => {
     expect(statuses[0]).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should apply formatted value', async () => {
+    const replaceVariables = jest.fn((str: string) => str);
+    const dataFrame = toDataFrame({
+      fields: [
+        {
+          name: 'Text',
+          type: FieldType.string,
+          display: (value: number) => ({
+            color: '#E02F44',
+            numeric: NaN,
+            percent: 0,
+            prefix: undefined,
+            suffix: undefined,
+            text: 'Value 1',
+          }),
+          values: ['Value 1'],
+        },
+        {
+          name: 'Value',
+          type: FieldType.number,
+          display: (value: number) => ({
+            color: '#E02F44',
+            numeric: 1048576,
+            percent: 1,
+            prefix: undefined,
+            suffix: ' MB',
+            text: '1.05',
+          }),
+          values: [1048576],
+          config: {
+            unit: 'mb',
+          },
+        },
+      ],
+    });
+
+    const props: Props = {
+      data: {} as any,
+      frame: dataFrame,
+      options: {
+        ...DEFAULT_OPTIONS,
+        status: 'number',
+        content: '<div data-testid="status">{{Text}} {{Value}}</div>',
+        defaultContent: 'Test default content',
+        renderMode: RenderMode.EVERY_ROW,
+      },
+      timeRange: {} as any,
+      timeZone: '',
+      replaceVariables,
+      eventBus: {} as any,
+    };
+
+    render(<Text {...props} />);
+    expect(screen.getAllByTestId(TEST_IDS.text.content)[0]).toBeInTheDocument();
+    expect(screen.getAllByTestId(TEST_IDS.text.content)[0]).toHaveTextContent('Value 1 1.05 MB');
+  });
+
+  it('Should apply value instead formatted value if display unavailable', async () => {
+    const replaceVariables = jest.fn((str: string) => str);
+    const dataFrame = toDataFrame({
+      fields: [
+        {
+          name: 'Text',
+          type: FieldType.string,
+          values: ['Value 1'],
+        },
+        {
+          name: 'Value',
+          type: FieldType.number,
+          values: [1048576],
+        },
+      ],
+    });
+
+    const props: Props = {
+      data: {} as any,
+      frame: dataFrame,
+      options: {
+        ...DEFAULT_OPTIONS,
+        status: 'number',
+        content: '<div data-testid="status">{{Text}} {{Value}}</div>',
+        defaultContent: 'Test default content',
+        renderMode: RenderMode.EVERY_ROW,
+      },
+      timeRange: {} as any,
+      timeZone: '',
+      replaceVariables,
+      eventBus: {} as any,
+    };
+
+    render(<Text {...props} />);
+    expect(screen.getAllByTestId(TEST_IDS.text.content)[0]).toBeInTheDocument();
+    expect(screen.getAllByTestId(TEST_IDS.text.content)[0]).toHaveTextContent('Value 1 1048576');
+  });
+
   /**
    * Render every row
    */
@@ -405,11 +500,11 @@ describe('Text', () => {
     const ageData: number[] = [42, 38];
 
     const template = `| Name | Age |
-| ---- | --- |
-{{#each data}}
-| {{name}} | {{age}} |
-{{/each}}
-`;
+  | ---- | --- |
+  {{#each data}}
+  | {{name}} | {{age}} |
+  {{/each}}
+  `;
 
     const props: Props = {
       data: {} as any,
@@ -456,11 +551,11 @@ describe('Text', () => {
     const ageData: number[] = [42, 38];
 
     const template = `| Name | Age |
-| ---- | --- |
-{{#each data.[0]}}
-{{name}} - {{#with (lookup ../data.[1] @index)}}{{age}}{{/with}}
-{{/each}}
-`;
+  | ---- | --- |
+  {{#each data.[0]}}
+  {{name}} - {{#with (lookup ../data.[1] @index)}}{{age}}{{/with}}
+  {{/each}}
+  `;
 
     const frames = [
       toDataFrame({