@grafana/data#SelectableValue TypeScript Examples

cleanValue = (value: any, options: SelectOptions): SelectableValue[] | [] => {
  if (Array.isArray(value)) {
    return value.filter(Boolean);
  }
  if (typeof value === 'object' && value !== null) {
    return [value];
  }
  if (typeof value === 'string' || typeof value === 'number') {
    const selectedValue = findSelectedValue(value, options);
    if (selectedValue) {
      return [selectedValue];
    }
  }
  return [];
}

async getOperators(field: string) {
    let target = {
      table: this.state.tableFrom,
    };
    const queryModel = new KDBQuery(target);
    const metaBuilder = new KDBMetaQuery(target, queryModel);

    let query = metaBuilder.buildDatatypeQuery(field);
    let temp: SelectableValue[] = [];
    return this.props.datasource
      .metricFindQueryDefault(query)
      .then((result) => {
        if (Array.isArray(result)) {
          if (typeof result[0].t == 'string') {
            return result[0].t;
          }
        }
      })
      .then((result: string) => metaBuilder.getOperators(result))
      .then(function (operators) {
        operators.forEach((operator) => temp.push({ value: operator, label: operator }));
        return temp;
      });
  }

editGoodParameterPoint = (name: string, editCoor: PointClass, newValue: string, newValueSelect: SelectableValue<any>): PointClass => {
  if (name.startsWith('label')) {
    editCoor.label = newValue;
  } else if (name.startsWith('drawGraphicMarker')) {
    editCoor.drawGraphicMarker = newValueSelect;
  } else if (name.startsWith('shape')) {
    editCoor.shape = newValueSelect;
  } else if (name.startsWith('sizeWidth')) {
    editCoor.sizeWidth = newValue;
  } else if (name.startsWith('sizeHeight')) {
    editCoor.sizeHeight = newValueSelect;
  } else if (name.startsWith('rotateArrow')) {
    editCoor.rotateArrow = newValue;
  } else if (name.startsWith('positionShapeX')) {
    editCoor.positionShapeX = newValue;
  } else if (name.startsWith('positionShapeY')) {
    editCoor.positionShapeY = newValue;
  } else if (name.startsWith('color')) {
    editCoor.color = newValue;
  } else if (name.startsWith('refIdMainMetric')) {
    editCoor.mainMetric.refId = newValue;
  } else if (name.startsWith('keyMainMetric')) {
    editCoor.mainMetric.key = newValue;
  } else if (name.startsWith('keyValueMainMetric')) {
    editCoor.mainMetric.keyValue = newValue;
  }
  return editCoor;
}

MultiSelect = (props: Props) => {
  const onChange = (options: Array<SelectableValue<string>>) => {
    if (null !== options) {
      onBuilderChange(
        props,
        options.map((option) => option.value)
      );
    }
  };
  const entries = Object.entries(props.entries).map((entry) => {
    return { value: entry[0], label: String(entry[1]) };
  });
  return (
    <InlineField label={props.label} tooltip={props.description} grow>
      <MultiSelectField
        options={entries}
        value={props.options.builder}
        onChange={onChange}
        isClearable={true}
        placeholder={props.description}
      />
    </InlineField>
  );
}

setInitialValue(searchableOptions: Array<SelectableValue<string[]>>, initValue?: string) {
    if (!initValue) {
      return { rcValue: [], activeLabel: '' };
    }
    for (const option of searchableOptions) {
      const optionPath = option.value || [];

      if (optionPath.indexOf(initValue) === optionPath.length - 1) {
        return {
          rcValue: optionPath,
          activeLabel: option.singleLabel || '',
        };
      }
    }
    if (this.props.allowCustomValue) {
      return { rcValue: [], activeLabel: initValue };
    }
    return { rcValue: [], activeLabel: '' };
  }

onSelectChange = (what: string) => (value: SelectableValue<string>) => {
    const { onOptionsChange, options } = this.props;
    const jsonData: any = {
      ...options.jsonData,
    };
    jsonData[what] = value.value;
    onOptionsChange({ ...options, jsonData });

    const _state: any = {};
    _state[what] = value;
    this.setState(_state);
  };

// conflationSettingsChanged() {
  //   //Conflation errors are reported in queryError at index 1
  //   this.state.target.queryError.error[1] = false;
  //   if (isNaN(this.conflationDurationSegment.value)) {
  //     //Test if its a variable
  //     let instVariables = this.templateSrv.getVariables();
  //     let namedVars: string[] = [];
  //     for (var i = 0; i < instVariables.length; i++) {
  //       namedVars = namedVars.concat('${' + instVariables[i].name + '}');
  //     }
  //     namedVars = namedVars.concat(['$__interval', '$__interval_ms']);
  //     //If it is a variable, set target.conflationDuration to it
  //     if (namedVars.indexOf(this.conflationDurationSegment.value) !== -1) {
  //       this.state.target.conflationDuration = this.conflationDurationSegment.value;
  //     } else {
  //       // Otherwise error
  //       this.state.target.queryError.error[1] = true;
  //       this.state.target.queryError.message[1] = 'Conflation duration must be a number.';
  //     }
  //   } else this.state.target.conflationDuration = this.conflationDurationSegment.value;

  //   if (this.state.target.useConflation === false) {
  //     this.selectParts.map((partGroup) => {
  //       for (let i = 0; i < partGroup.length; i++) {
  //         if (partGroup[i].part.type == 'aggregate') partGroup.splice(i, 1);
  //       }
  //     });
  //   }
  //   // this.updatePersistedParts();
  //   // this.panelCtrl.refresh();
  // }
  getTimeColumnSegments() {
    const { datasource, query } = this.props;

    const queryModel = new KDBQuery(query);
    const metaBuilder = new KDBMetaQuery(query, queryModel);

    return new Promise<Array<SelectableValue<any>>>((resolve) => {
      setTimeout(async () => {
        const response = await datasource
          .metricFindQueryDefault(metaBuilder.buildColumnQuery('time'))
          .then(this.transformToSegments({}));
        const result = response.map((option: any) => {
          return { value: option.value, label: option.label };
        });
        resolve(result);
      }, 0);
    });
  }

editGoodParameterLink = (name: string, editCoor: LinkClass, newValue: string, newValueSelect: SelectableValue<any>): LinkClass => {
  if (name.startsWith('getCoordinate')) {
    editCoor.defineHowToGetCoordonate = newValueSelect;
  } else if (name.startsWith('orientationLink')) {
    editCoor.orientationLink = newValueSelect;
  } else if (name.startsWith('pointIn')) {
    editCoor.pointIn = newValueSelect;
  } else if (name.startsWith('pointOut')) {
    editCoor.pointOut = newValueSelect;
  } else if (name.startsWith('regionIn')) {
    editCoor.regionIn = newValueSelect;
  } else if (name.startsWith('regionOut')) {
    editCoor.regionOut = newValueSelect;
  } else if (name.startsWith('pointAX')) {
    editCoor.pointAPositionX = newValue;
  } else if (name.startsWith('pointAY')) {
    editCoor.pointAPositionY = newValue;
  } else if (name.startsWith('pointBX')) {
    editCoor.pointBPositionX = newValue;
  } else if (name.startsWith('pointBY')) {
    editCoor.pointBPositionY = newValue;
  } else if (name.startsWith('colorCoordinateA')) {
    editCoor.colorCoordinateA = newValue;
  } else if (name.startsWith('colorCoordinateB')) {
    editCoor.colorCoordinateB = newValue;
  } else if (name.startsWith('colorRegionIn')) {
    editCoor.colorRegionIn = newValue;
  } else if (name.startsWith('colorRegionOut')) {
    editCoor.colorRegionOut = newValue;
  } else if (name.startsWith('labelLinkA')) {
    editCoor.labelLinkA = newValue;
  } else if (name.startsWith('labelLinkB')) {
    editCoor.labelLinkB = newValue;
  } else if (name.startsWith('positionXLabelLinkA')) {
    editCoor.positionXLabelA = newValue;
  } else if (name.startsWith('positionYLabelLinkA')) {
    editCoor.positionYLabelA = newValue;
  } else if (name.startsWith('positionXLabelLinkB')) {
    editCoor.positionXLabelB = newValue;
  } else if (name.startsWith('positionYLabelLinkB')) {
    editCoor.positionYLabelB = newValue;
  }
  return editCoor;
}