fix: reorganizing readme.md

README.md

@@ -11,36 +11,10 @@ Visualize your Prometheus metrics in 3D and in real time with the Grafana Palind
 
 <p align="center">
     <a href="https://github.com/Smile-SA/palindrome.js/">
-      <img src="./src/img/Palindrome.js-logo-and-title.jpg" alt="Grafana Palindrome.js Panel" width=350">
+      <img src="https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/Palindrome.js-logo-and-title.jpg" alt="Grafana Palindrome.js Panel" width=350">
     </a>
 </p>
 
-## 🎯 Key Features and usage
-Actually, Palindrome.js is composed of layers defined by the user. Each layer can contain from 1 to 5 metrics. Each metric is presented by minimum, median, and maximum values, which are entered by the user, along with the current value obtained from the Prometheus data source. Based on the current value compared to the other values, the shape and color state of the 3D model will change. For further details, please refer to the Palindrome.js [documentation](https://github.com/Smile-SA/palindrome.js/wiki).
-
-This panel should be connected to a Prometheus data source, enabling you to:
-
-- Define layers and metrics: Select your Prometheus metrics using code queries in the following format:
-  ```Promql
-  <promql_query> #layer: <layerName>, ranges: [<min value>, <med value>, <max value>]
-  ```
-  **For example:**
-  ```
-  node_disk_io_now{device="nvme0n1"} #layer: systemMetrics, ranges: [0, 50, 100]
-  ```
-- Once you've finished typing queries, click on Run queries, and the 3D object will appear. Additionally, two fields will be populated:` Palindrome Data Structure` and `Palindrome Configuration`:
-
-  - **Palindrome Data Structure:** This is the data structure of Palindrome.js based on the metrics entered by the user. It is a read-only text area.
-
-  - **Palindrome Configuration:** This field displays the current configuration used to display the 3D object. It is editable. For more information, please refer to our [API reference](https://github.com/Smile-SA/palindrome.js/wiki/API-Reference).
-
-![Palindrome.js integration in Grafana](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/dashboard.png)
-
-Palindrome.js is also available in a light theme version.
-
-![Palindrome.js light](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/light-panel.png).
-
-
 ## ⚙️ Getting started
 
 ### Install dependencies and build the project
@@ -77,9 +51,32 @@ Palindrome.js is also available in a light theme version.
    npm run lint:fix
    ```
 
+## 🎯 Features and usage
+Actually, Palindrome.js is composed of layers defined by the user. Each layer can contain from 1 to 5 metrics. Each metric is presented by minimum, median, and maximum values, which are entered by the user, along with the current value obtained from the Prometheus data source. Based on the current value compared to the other values, the shape and color state of the 3D model will change. For further details, please refer to the Palindrome.js [documentation](https://github.com/Smile-SA/palindrome.js/wiki).
+
+This panel should be connected to a Prometheus data source, enabling you to:
+
+- Define layers and metrics: Select your Prometheus metrics using code queries in the following format:
+  ```Promql
+  <promql_query> #layer: <layerName>, ranges: [<min value>, <med value>, <max value>]
+  ```
+  **For example:**
+  ```
+  node_disk_io_now{device="nvme0n1"} #layer: systemMetrics, ranges: [0, 50, 100]
+  ```
+- Once you've finished typing queries, click on Run queries, and the 3D object will appear. Additionally, two fields will be populated:` Palindrome Data Structure` and `Palindrome Configuration`:
+
+  - **Palindrome Data Structure:** This is the data structure of Palindrome.js based on the metrics entered by the user. It is a read-only text area.
+
+  - **Palindrome Configuration:** This field displays the current configuration used to display the 3D object. It is editable. For more information, please refer to our [API reference](https://github.com/Smile-SA/palindrome.js/wiki/API-Reference).
+
+![Palindrome.js integration in Grafana](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/dashboard.png)
+
+Palindrome.js is also available in a light theme version.
 
+![Palindrome.js light](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/light-panel.png)
 
-## Realtime Palindrome.js
+## ⚡ Realtime Palindrome.js
 ![Palindrome.js integration in Grafana](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/realtime.gif)
 
 ## ⚠️ Credits

src/README.md

@@ -35,7 +35,7 @@ This panel should be connected to a Prometheus data source, enabling you to:
   - **Palindrome Configuration:** This field displays the current configuration used to display the 3D object. It is editable. For more information, please refer to our [API reference](https://github.com/Smile-SA/palindrome.js/wiki/API-Reference).
 
 
-## Realtime Palindrome.js (speeded up)
+## ⚡ Realtime Palindrome.js (speeded up)
 ![Palindrome.js integration in Grafana](https://github.com/Smile-SA/palindrome.js-grafana-plugin/raw/main/src/img/realtime.gif)