Feats and fixes (#4)

* fix source data, add color selector and gradient selector

* add dependency to package.json

* fix errors

* change version in package*.json

package.json

@@ -1,6 +1,7 @@
 {
   "name": "radar",
-  "version": "0.0.3",
+  "version": "0.0.4",
+
   "description": "",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
@@ -28,6 +29,7 @@
     "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.4",
+    "@types/javascript-color-gradient": "^2.4.2",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
     "@types/node": "^20.8.7",
@@ -61,6 +63,8 @@
     "@grafana/data": "10.0.3",
     "@grafana/runtime": "10.0.3",
     "@grafana/ui": "10.0.3",
+    "gradient-parser": "^1.0.2",
+    "javascript-color-gradient": "^2.4.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "tslib": "2.5.3"

src/Panel.tsx

@@ -6,6 +6,8 @@ import { useStyles2, useTheme2 } from '@grafana/ui';
 import { getStyles } from './components/getStyles';
 import { maping_value, describeArc, degrees_to_radians } from './components/drawSVGArc';
 
+import Gradient from "javascript-color-gradient";
+
 
 interface Props extends PanelProps<Options> {}
 
@@ -77,17 +79,29 @@ export function Panel({
   }  
   let data_len = data.series[0].fields[0].values.length;
 
-  console.log(options);
+  console.log(data);
 
   for (let inc_field = 0; inc_field < data_len; inc_field++){
     let dist = data.series[0].fields[1].values[inc_field];
     if(dist < 0) {dist = 0;}
     if(dist > 100) {dist = 100;}
     dist = maping_value(dist,0,100,zero_offset*scale_size,r*scale_size);
-    let rot  = maping_value(data.series[0].fields[2].values[inc_field],0,360,-start * scale_range,-end * scale_range) - rotate_radar;
+    let power = data.series[1].fields[1].values[inc_field];
+    let rot  = maping_value(data.series[2].fields[1].values[inc_field],0,360,-start * scale_range,-end * scale_range) - rotate_radar;
     let x_c  = dist * Math.sin(degrees_to_radians(rot));
     let y_c  = dist * Math.cos(degrees_to_radians(rot));
-    options_as.push(<circle cx={x_c} cy={y_c} r="1" fill='white' />);
+    if(options.GradientSource === "Color"){
+      options_as.push(<circle cx={x_c} cy={y_c} r="1" fill={options.DotsColor} />);
+    }
+    if(options.GradientSource === "3dField"){
+      if(power === 0){ power++;}
+      const gradientArray = new Gradient()
+        .setColorGradient.apply(null, options.Gradient.split(" "))
+        .setMidpoint(100)
+        .getColor(power);
+
+      options_as.push(<circle cx={x_c} cy={y_c} r="1" fill={gradientArray} />);
+    }
   }
 
   return (

src/module.ts

@@ -109,5 +109,38 @@ export const plugin = new PanelPlugin<Options>(Panel)
         step: 1
       },
     })
+    .addRadio({
+      path: 'GradientSource',
+      name: 'Dots gradient Source',
+      defaultValue: 'Color',
+      settings: {
+        options: [
+          {
+            value: 'Color',
+            label: 'Color',
+          },
+          // {
+          //   value: 'Time',
+          //   label: 'Time',
+          // },
+          {
+            value: '3dField',
+            label: '3d field',
+          },
+        ],
+      },
+    })
+    .addTextInput({
+      path: 'Gradient',
+      name: "",
+      defaultValue: "#ffffff #000000",
+      showIf: (config: Options) => config.GradientSource !== "Color",
+    })
+    .addColorPicker({
+      path: 'DotsColor',
+      name: "",
+      defaultValue: '#ffffff',
+      showIf: (config: Options) => config.GradientSource === "Color",
+    })
   })
   // .setNoPadding()

src/types.ts

@@ -16,4 +16,9 @@ export interface Options {
   XMove: number;
   YMove: number;
   colorMode: any;
+
+  GradientSource: string;
+
+  Gradient: string;
+  DotsColor: string;
 }