Merge branch 'fix-errors-on-panel-init' into 'main'

TypeError: Cannot read properties of undefined (reading 'useMetric')

See merge request chartwerk/grafana-chartwerk-panel!9

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grafana-chartwerk-panel",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Chartwerk Panel",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

src/components/editors/UseMetricEditor.tsx

@@ -18,7 +18,7 @@ const fieldNamePickerSettings = {
 } as any;
 
 export function UseMetricEditor({ onChange, value, context }: StandardEditorProps<UseMetricConfig>) {
-  const config = value;
+  let config: UseMetricConfig = value;
 
   const onFieldChange = (field: keyof UseMetricConfig, value: any) => {
     // @ts-ignore
@@ -31,22 +31,22 @@ export function UseMetricEditor({ onChange, value, context }: StandardEditorProp
     <HorizontalGroup>
       <InlineField label="Use metric">
         <InlineSwitch
-          value={config.useMetric}
+          value={config?.useMetric}
           onChange={(evt) => onFieldChange('useMetric', (evt.target as any).checked)}
         />
       </InlineField>
       <InlineField>
-        {config.useMetric ? (
+        {config?.useMetric ? (
           <FieldNamePicker
             context={context}
-            value={config.metricName as string}
+            value={config?.metricName as string}
             onChange={(newVal: any) => onFieldChange('metricName', newVal)}
             item={fieldNamePickerSettings}
           />
         ) : (
           <Input
             placeholder="value"
-            value={config.value}
+            value={config?.value}
             width={24}
             onChange={(evt) => onFieldChange('value', (evt.target as any).value)}
           />

src/models/options.ts

@@ -21,7 +21,10 @@ export class Options {
   }
 
   private _setMin(): void {
-    if (!this.grafanaOptions.gauge.min.useMetric) {
+    if (!this.grafanaOptions.gauge.min) {
+      throw new Error(`Min Config is not selected: [See options: Extremum -> Min]`);
+    }
+    if (!this.grafanaOptions.gauge.min?.useMetric) {
       this.minValue = this.grafanaOptions.gauge.min.value;
       return;
     }
@@ -30,7 +33,10 @@ export class Options {
   }
 
   private _setMax(): void {
-    if (!this.grafanaOptions.gauge.max.useMetric) {
+    if (!this.grafanaOptions.gauge.max) {
+      throw new Error(`Max Config is not selected: [See options: Extremum -> Max]`);
+    }
+    if (!this.grafanaOptions.gauge.max?.useMetric) {
       this.maxValue = this.grafanaOptions.gauge.max.value;
       return;
     }

src/models/series.ts

@@ -10,7 +10,7 @@ export class Series {
   private _selectedSerieName;
 
   constructor(grafanaSeriesList: any, private gaugeValueOptions: ValueOptions) {
-    if (_.isEmpty(this.gaugeValueOptions.metricName)) {
+    if (_.isEmpty(this.gaugeValueOptions?.metricName)) {
       throw new Error(`Value: metric is not selected. [See options: Value -> Metric]`);
     }
     this._selectedSerieName = this.gaugeValueOptions.metricName;

src/module.ts

@@ -49,12 +49,12 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
         category: ['Value'],
         showIf: (config) => config.visualizationType === Pod.GAUGE,
       })
-      // TODO: defaults?
       .addCustomEditor({
         id: 'min',
         name: 'Min',
         path: 'gauge.min',
         category: ['Extremum'],
+        defaultValue: { useMetric: false, value: 0 },
         showIf: (config) => config.visualizationType === Pod.GAUGE,
         editor: UseMetricEditor as any,
       })
@@ -63,6 +63,7 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
         name: 'Max',
         path: 'gauge.max',
         category: ['Extremum'],
+        defaultValue: { useMetric: false },
         showIf: (config) => config.visualizationType === Pod.GAUGE,
         editor: UseMetricEditor as any,
       })