feat(piechart): radius configuration enabled

Signed-off-by: Daniel Chromik <dchromik@redhat.com>

Author: dchromik

docs/piechart/go-sdk.md

@@ -15,7 +15,8 @@ Need a list of options.
 
 ## Default options
 
-- None
+- Calculation: `last`
+- Visual outer radius: `"90%"`
 
 ## Available options
 
@@ -43,13 +44,29 @@ package main
 import pie "github.com/perses/plugins/piechart/sdk/go"
 
 pie.WithVisual(pie.Visual{
-	Palette: pie.Palette{
-		Mode: pie.AutoMode, // or pie.CategoricalMode
-	},
+	OuterRadius: "90%",
 })
 ```
 
-Define visual properties of the pie chart including color palette mode.
+Define the pie chart's radii and colors. Radius values can be percentages or unitless pixel strings.
+
+```golang
+pie.WithVisual(pie.Visual{
+	InnerRadius:  "40%",
+	OuterRadius:  "90%",
+	ColorPalette: []string{"#3366cc", "#dc3912"},
+})
+```
+
+Set `InnerRadius` to create a doughnut chart. When omitted, the chart renders as a pie.
+
+### WithShowLabels
+
+```golang
+pie.WithShowLabels(true)
+```
+
+Show labels inside the pie chart segments.
 
 ### WithFormat
 
@@ -69,33 +86,15 @@ pie.WithFormat(&common.Format{
 
 Define the format for pie chart values.
 
-### WithQuerySettings
-
-```golang
-package main
-
-import pie "github.com/perses/plugins/piechart/sdk/go"
-
-pie.WithQuerySettings([]pie.QuerySettingsItem{
-	{
-		QueryIndex: 0,
-		ColorMode:  pie.FixedMode,
-		ColorValue: "#FF5733",
-	},
-})
-```
-
-Define color settings for specific queries. Available color modes: `FixedMode`, `FixedSingleMode`.
-
 ## Example
 
 ```golang
 package main
 
 import (
+	"github.com/perses/perses/go-sdk/common"
 	"github.com/perses/perses/go-sdk/dashboard"
 	"github.com/perses/perses/go-sdk/panel"
-	"github.com/perses/perses/go-sdk/common"
 	pie "github.com/perses/plugins/piechart/sdk/go"
 )
 
@@ -110,7 +109,8 @@ func main() {
 						Size:     pie.MediumSize,
 					}),
 					pie.WithVisual(pie.Visual{
-						Palette: pie.Palette{Mode: pie.CategoricalMode},
+						InnerRadius: "40%",
+						OuterRadius: "90%",
 					}),
 					pie.WithFormat(&common.Format{
 						Unit:          &common.BytesUnit,
@@ -120,5 +120,5 @@ func main() {
 			),
 		),
 	)
-}```
+}
 ```

docs/piechart/model.md

@@ -8,7 +8,11 @@ spec:
   format:        <Format specification> # Optional
   sort:          <enum = "asc" | "desc"> # Optional
   mode:          <enum = "value" | "percentage"> # Optional
-  radius:        <number>
+  showLabels:    <boolean> # Optional
+  visual:
+    innerRadius:  <string> # Optional
+    outerRadius:  <string>
+    colorPalette: <array of strings> # Optional
 ```
 
 ## Legend-with-values specification
@@ -22,3 +26,23 @@ See [common plugin definitions](https://perses.dev/perses/docs/plugins/common/#c
 ## Format specification
 
 See [common plugin definitions](https://perses.dev/perses/docs/plugins/common/#format-specification).
+
+## Radii
+
+`visual.outerRadius` is required and defaults to `"90%"`. Set `visual.innerRadius` to create a doughnut chart. 
+Radius values can be percentages or unitless pixel strings and are passed to Apache ECharts.
+
+Persisted charts using the former top-level `radius` and `colorPalette` fields remain supported. The editor moves their
+color settings into `visual` the next time the chart is saved; the former numeric `radius` did not affect rendering, so
+these charts retain the `"90%"` rendered default.
+
+```yaml
+# A pie chart with an outer radius relative to the shorter panel edge.
+visual:
+  outerRadius: "90%"
+
+# A doughnut chart with a pixel inner radius and percentage outer radius.
+visual:
+  innerRadius: "40"
+  outerRadius: "90%"
+```

piechart/schemas/migrate/migrate.cue

@@ -52,11 +52,13 @@ spec: {
 		showLabels: true
 	}
 
-	#colorMode: *#panel.fieldConfig.defaults.color.mode | null
-	if #colorMode == "shades" {
-		#mappedColor: *commonMigrate.#mapping.color[#panel.fieldConfig.defaults.color.fixedColor] | "#555555"
-		colorPalette: [#mappedColor]
-	}
+	visual: {
+		#colorMode: *#panel.fieldConfig.defaults.color.mode | null
+		if #colorMode == "shades" {
+			#mappedColor: *commonMigrate.#mapping.color[#panel.fieldConfig.defaults.color.fixedColor] | "#555555"
+			colorPalette: [#mappedColor]
+		}
 
-	radius: 50
+		outerRadius: "90%"
+	}
 }

piechart/schemas/migrate/tests/basic/expected.json

@@ -7,7 +7,9 @@
       "position": "bottom"
     },
     "showLabels": true,
-    "colorPalette": ["#e02f44"],
-    "radius": 50
+    "visual": {
+      "colorPalette": ["#e02f44"],
+      "outerRadius": "90%"
+    }
   }
 }

piechart/schemas/pie.cue

@@ -30,7 +30,15 @@ spec: close({
 	format?:     common.#format
 	sort?:       "asc" | "desc"
 	mode?:       "value" | "percentage"
+
 	showLabels?: bool
-	radius:      number
+
+	// Deprecated top-level visual options remain accepted for persisted dashboards.
+	radius?:       number
 	colorPalette?: [...string]
+	visual?: close({
+		innerRadius?:  string
+		outerRadius:   string
+		colorPalette?: [...string]
+	})
 })

piechart/schemas/tests/invalid/pie-numeric-radius.json

@@ -0,0 +1,9 @@
+{
+  "kind": "PieChart",
+  "spec": {
+    "calculation": "last",
+    "visual": {
+      "outerRadius": 90
+    }
+  }
+}

piechart/schemas/tests/invalid/pie-top-level-radius.json

@@ -0,0 +1,7 @@
+{
+  "kind": "PieChart",
+  "spec": {
+    "calculation": "last",
+    "outerRadius": "50"
+  }
+}

piechart/schemas/tests/invalid/pie-unsupported-visual-field.json

@@ -0,0 +1,10 @@
+{
+  "kind": "PieChart",
+  "spec": {
+    "calculation": "last",
+    "visual": {
+      "outerRadius": "90%",
+      "lineWidth": 1
+    }
+  }
+}

piechart/schemas/tests/valid/pie-legacy.json

@@ -0,0 +1,9 @@
+{
+  "kind": "PieChart",
+  "spec": {
+    "calculation": "last-number",
+    "radius": 50,
+    "showLabels": true,
+    "colorPalette": ["#3366cc", "#dc3912"]
+  }
+}

piechart/schemas/tests/valid/pie-radius-pixels.json

@@ -0,0 +1,10 @@
+{
+  "kind": "PieChart",
+  "spec": {
+    "calculation": "last-number",
+    "visual": {
+      "innerRadius": "40",
+      "outerRadius": "200"
+    }
+  }
+}