@grafana/data#SelectableValue TypeScript Examples

The following examples show how to use @grafana/data#SelectableValue. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts    From grafana-chinese with Apache License 2.0 7 votes vote down vote up 
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 [];
}
Example #2
Source File: QueryEditor.tsx    From grafana-kdb-datasource-ws with Apache License 2.0 6 votes vote down vote up 
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;
      });
  }
Example #3
Source File: editGoodParameterPoint.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
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;
}
Example #4
Source File: Multiselect.tsx    From druid-grafana with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #5
Source File: Cascader.tsx    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
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: '' };
  }
Example #6
Source File: ConfigEditor.tsx    From grafana-s3-plugin with Apache License 2.0 6 votes vote down vote up 
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);
  };
Example #7
Source File: QueryEditor.tsx    From grafana-kdb-datasource-ws with Apache License 2.0 5 votes vote down vote up 
// 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);
    });
  }
Example #8
Source File: editGoodParameterLink.tsx    From grafana-weathermap-panel with Apache License 2.0 5 votes vote down vote up 
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;
}