How to use @grafana/ui - 10 common examples

processChunk = (value: ReadableStreamReadResult): any => {
    if (this.observer == null) {
      return; // Nothing more to do
    }

    if (value.value) {
      const text = new TextDecoder().decode(value.value);
      this.csv.readCSV(text);
    }

    if (value.done) {
      console.log('Finished stream');
      this.stream.state = LoadingState.Done;
      return;
    }

    return this.reader.read().then(this.processChunk);
  };

request.endTime = Date.now();

      if (this.isUnmounted) {
        return;
      }

      // Make sure the data is SeriesData[]
      const series = getProcessedSeriesData(resp.data);
      if (onDataResponse) {
        onDataResponse(series);
      }

      this.setState({
        isFirstLoad: false,
        data: {
          state: LoadingState.Done,
          series,
          request,
        },
      });
    } catch (err) {
      console.log('DataPanel error', err);

      let message = 'Query error';

      if (err.message) {
        message = err.message;
      } else if (err.data && err.data.message) {
        message = err.data.message;
      } else if (err.data && err.data.error) {
        message = err.data.error;
      } else if (err.status) {

mergeMap((action: ActionOf) => {
      const { exploreId, datasourceId, latency, loadingState, series, delta } = action.payload;
      const { datasourceInstance, scanning, eventBridge } = state$.value.explore[exploreId];

      // If datasource already changed, results do not matter
      if (datasourceInstance.meta.id !== datasourceId) {
        return NEVER;
      }

      const result = series || delta || [];
      const replacePreviousResults = loadingState === LoadingState.Done && series && !delta ? true : false;
      const resultProcessor = new ResultProcessor(state$.value.explore[exploreId], replacePreviousResults, result);
      const graphResult = resultProcessor.getGraphResult();
      const tableResult = resultProcessor.getTableResult();
      const logsResult = resultProcessor.getLogsResult();
      const refIds = getRefIds(result);
      const actions: Array> = [];

      // For Angular editors
      eventBridge.emit('data-received', resultProcessor.getRawData());

      // Clears any previous errors that now have a successful query, important so Angular editors are updated correctly
      actions.push(
        resetQueryErrorAction({
          exploreId,
          refIds,
        })

const getSearchFieldStyles = (theme: GrafanaTheme) => ({
  wrapper: css`
    width: 100%;
    height: 55px; /* this variable is not part of GrafanaTheme yet*/
    display: flex;
    background-color: ${selectThemeVariant(
      {
        light: theme.colors.white,
        dark: theme.colors.dark4,
      },
      theme.type
    )};
    position: relative;
  `,
  input: css`
    max-width: 653px;
    padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
    height: 51px;
    box-sizing: border-box;
    outline: none;
    background: ${selectThemeVariant(
      {

// Types
import { DashboardModel } from '../../state';
import { LocationState, CoreEvents } from 'app/types';
import { TimeRange } from '@grafana/data';

// State
import { updateLocation } from 'app/core/actions';

// Components
import { RefreshPicker, withTheme, stylesFactory, Themeable } from '@grafana/ui';
import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';

// Utils & Services
import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';

const getStyles = stylesFactory((theme: GrafanaTheme) => {
  return {
    container: css`
      position: relative;
      display: flex;
      padding: 2px 2px;
    `,
  };
});

export interface Props extends Themeable {
  $injector: any;
  dashboard: DashboardModel;
  updateLocation: typeof updateLocation;
  location: LocationState;
}
class UnthemedDashNavTimeControls extends Component {

// Types
import { DashboardModel } from '../../state';
import { LocationState, CoreEvents } from 'app/types';
import { TimeRange } from '@grafana/data';

// State
import { updateLocation } from 'app/core/actions';

// Components
import { RefreshPicker, withTheme, stylesFactory, Themeable } from '@grafana/ui';
import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';

// Utils & Services
import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';

const getStyles = stylesFactory((theme: GrafanaTheme) => {
  return {
    container: css`
      position: relative;
      display: flex;
      padding: 2px 2px;
    `,
  };
});

export interface Props extends Themeable {
  $injector: any;
  dashboard: DashboardModel;
  updateLocation: typeof updateLocation;
  location: LocationState;
}
class UnthemedDashNavTimeControls extends Component {

// Calculate the value
      val = reduceField({
        field: calcField,
        reducers: [calc],
      })[calc];
    }

    const processor = getDisplayProcessor({
      field: {
        ...fieldInfo.field,
        config: {
          ...fieldInfo.field.config,
          unit: panel.format,
          decimals: panel.decimals,
          mappings: convertOldAngularValueMapping(panel),
        },
      },
      theme: config.theme,
      isUtc: dashboard.isTimezoneUtc && dashboard.isTimezoneUtc(),
    });

    const sparkline: any[] = [];
    const data = {
      field: fieldInfo.field,
      value: val,
      display: processor(val),
      scopedVars: _.extend({}, panel.scopedVars),
      sparkline,
    };

    data.scopedVars['__name'] = { value: name };

return;
    }

    const distinct = getDistinctNames(frames);
    let fieldInfo = distinct.byName[panel.tableColumn]; //
    this.fieldNames = distinct.names;

    if (!fieldInfo) {
      fieldInfo = distinct.first;
    }

    if (!fieldInfo) {
      const processor = getDisplayProcessor({
        field: {
          config: {
            mappings: convertOldAngularValueMapping(this.panel),
            noValue: 'No Data',
          },
        },
        theme: config.theme,
      });
      // When we don't have any field
      this.data = {
        value: null,
        display: processor(null),
      };
    } else {
      this.data = this.processField(fieldInfo);
    }

    this.render();
  }

return;
    }

    const distinct = getDistinctNames(frames);
    let fieldInfo = distinct.byName[panel.tableColumn]; //
    this.fieldNames = distinct.names;

    if (!fieldInfo) {
      fieldInfo = distinct.first;
    }

    if (!fieldInfo) {
      const processor = getDisplayProcessor({
        field: {
          config: {
            mappings: convertOldAngularValueMapping(this.panel),
            noValue: 'No Data',
          },
        },
        theme: config.theme,
      });
      // When we don't have any field
      this.data = {
        value: null,
        display: processor(null),
      };
    } else {
      this.data = this.processField(fieldInfo);
    }

    this.render();
  }

// Calculate the value
      val = reduceField({
        field: calcField,
        reducers: [calc],
      })[calc];
    }

    const processor = getDisplayProcessor({
      field: {
        ...fieldInfo.field,
        config: {
          ...fieldInfo.field.config,
          unit: panel.format,
          decimals: panel.decimals,
          mappings: convertOldAngularValueMapping(panel),
        },
      },
      theme: config.theme,
      timeZone: dashboard.getTimezone(),
    });

    const sparkline: any[] = [];
    const data = {
      field: fieldInfo.field,
      value: val,
      display: processor(val),
      scopedVars: _.extend({}, panel.scopedVars),
      sparkline,
    };

    data.scopedVars['__name'] = { value: name };