update readme

Author: aozisik

README.md

@@ -11,13 +11,60 @@ This is a panel plugin for generating Sankey diagrams in Grafana 8.0+. Sankey di
 
 ## What's Different in This Fork
 
-This fork simplifies the data parser to support **multi-step Sankey charts from just 3 columns of data**: `source`, `destination`, and `value`. This makes it easier to create complex flow visualizations without complex query structuring.
+This fork simplifies the data parser to support **multi-step Sankey charts from 3 or 4 columns of data**:
+- **3-column format**: `source`, `destination`, `value`
+- **4-column format**: `source`, `destination`, `color`, `value`
+
+This makes it easier to create complex flow visualizations without complex query structuring.
 
 ![](https://github.com/netsage-project/netsage-sankey-panel/blob/master/src/img/sankey2.png?raw=true)
 
+## Data Format
+
+### Basic Format (3 columns)
+The basic format requires exactly 3 columns:
+1. **Source** - The starting node of the flow (string)
+2. **Destination** - The ending node of the flow (string)
+3. **Value** - The numeric value/weight of the flow (number)
+
+Example query result:
+```
+source | destination | value
+-------|-------------|------
+A      | B           | 100
+B      | C           | 80
+A      | C           | 50
+```
+
+### Custom Colors Format (4 columns)
+You can optionally add a 4th column to specify custom colors for each link:
+1. **Source** - The starting node of the flow (string)
+2. **Destination** - The ending node of the flow (string)
+3. **Color** - The color for this specific link (string)
+4. **Value** - The numeric value/weight of the flow (number)
+
+The color column is automatically detected by:
+- **Column name**: If the column is named "color" or "colour"
+- **Column values**: If the values look like colors (hex codes, rgb, hsl, or CSS color names)
+
+Example query result with colors:
+```
+source | destination | color     | value
+-------|-------------|-----------|------
+A      | B           | #FF0000   | 100
+B      | C           | #00FF00   | 80
+A      | C           | blue      | 50
+```
+
+Supported color formats:
+- **Hex codes**: `#FF0000`, `#F00`, `#FF0000FF`
+- **RGB/RGBA**: `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)`
+- **HSL/HSLA**: `hsl(120, 100%, 50%)`, `hsla(120, 100%, 50%, 0.5)`
+- **CSS color names**: `red`, `blue`, `green`, etc.
+- **Named theme colors**: `dark-green`, `dark-blue`, `dark-red`, `dark-yellow`, `dark-orange`, `dark-purple` (and their `semi-dark-`, `light-`, `super-light-` variants)
+
 ## How it works
-The sankey panel requires at least 2 columns of data, a source and destination for the flows. This means your query should group your data into at least two groups.  The screenshot above shows data grouped by source country, then by destination county.
-The panel will draw links from the first column of data points, to the last in order of the query.  The thickness of the links will be proportionate to the value as assigned by the metric in the query.
+The panel will draw links from the source to the destination nodes. The thickness of the links will be proportionate to the value. When using the 4-column format with custom colors, each link will use its specified color. Otherwise, colors are automatically assigned based on the source node.
 
 ![](https://github.com/netsage-project/netsage-sankey-panel/blob/master/src/img/sankey3.png?raw=true)