@grafana/data#PanelProps TypeScript Examples

export function getPanelPluginLoadError(meta: PanelPluginMeta, err: any): PanelPlugin {
  const LoadError = class LoadError extends PureComponent<PanelProps> {
    render() {
      const text = (
        <>
          Check the server startup logs for more information. <br />
          If this plugin was loaded from git, make sure it was compiled.
        </>
      );
      return <PanelPluginError title={`Error loading: ${meta.id}`} text={text} />;
    }
  };
  const plugin = new PanelPlugin(LoadError);
  plugin.meta = meta;
  plugin.loadError = true;
  return plugin;
}

export function getPanelPluginNotFound(id: string): PanelPlugin {
  const NotFound = class NotFound extends PureComponent<PanelProps> {
    render() {
      return <PanelPluginError title={`Panel plugin not found: ${id}`} />;
    }
  };

  const plugin = new PanelPlugin(NotFound);
  plugin.meta = {
    id: id,
    name: id,
    sort: 100,
    type: PluginType.panel,
    module: '',
    baseUrl: '',
    info: {
      author: {
        name: '',
      },
      description: '',
      links: [],
      logos: {
        large: '',
        small: '',
      },
      screenshots: [],
      updated: '',
      version: '',
    },
  };
  return plugin;
}

getPanelPlugin = (
  options: Partial<PanelPluginMeta>,
  reactPanel?: ComponentType<PanelProps>,
  angularPanel?: any
): PanelPlugin => {
  const plugin = new PanelPlugin(reactPanel);
  plugin.angularPanelCtrl = angularPanel;
  plugin.meta = {
    id: options.id,
    type: PluginType.panel,
    name: options.id,
    sort: options.sort || 1,
    info: {
      author: {
        name: options.id + 'name',
      },
      description: '',
      links: [],
      logos: {
        large: '',
        small: '',
      },
      screenshots: [],
      updated: '',
      version: '',
    },
    hideFromList: options.hideFromList === true,
    module: '',
    baseUrl: '',
  };
  return plugin;
}

function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<BarGaugeOptions>> {
  const timeRange = createTimeRange();

  const options: BarGaugeOptions = {
    displayMode: BarGaugeDisplayMode.Lcd,
    fieldOptions: {
      calcs: ['mean'],
      defaults: {},
      values: false,
      overrides: [],
    },
    orientation: VizOrientation.Horizontal,
    showUnfilled: true,
  };

  return mount<BarGaugePanel>(
    <BarGaugePanel
      id={1}
      data={data}
      timeRange={timeRange}
      timeZone={'utc'}
      options={options}
      onOptionsChange={() => {}}
      onChangeTimeRange={() => {}}
      replaceVariables={s => s}
      renderCounter={0}
      width={532}
      transparent={false}
      height={250}
    />
  );
}

export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
  renderValue = (
    value: FieldDisplay,
    width: number,
    height: number,
    alignmentFactors: DisplayValueAlignmentFactors
  ): JSX.Element => {
    const { options } = this.props;
    const { field, display, view, colIndex } = value;

    return (
      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
        {({ openMenu, targetClassName }) => {
          return (
            <BarGauge
              value={display}
              width={width}
              height={height}
              orientation={options.orientation}
              field={field}
              display={view?.getFieldDisplayProcessor(colIndex)}
              theme={config.theme}
              itemSpacing={this.getItemSpacing()}
              displayMode={options.displayMode}
              onClick={openMenu}
              className={targetClassName}
              alignmentFactors={alignmentFactors}
              showUnfilled={options.showUnfilled}
            />
          );
        }}
      </DataLinksContextMenu>
    );
  };

  getValues = (): FieldDisplay[] => {
    const { data, options, replaceVariables } = this.props;
    return getFieldDisplayValues({
      ...options,
      replaceVariables,
      theme: config.theme,
      data: data.series,
      autoMinMax: true,
    });
  };

  getItemSpacing(): number {
    if (this.props.options.displayMode === 'lcd') {
      return 2;
    }

    return 10;
  }

  render() {
    const { height, width, options, data, renderCounter } = this.props;

    return (
      <VizRepeater
        source={data}
        getAlignmentFactors={getDisplayValueAlignmentFactors}
        getValues={this.getValues}
        renderValue={this.renderValue}
        renderCounter={renderCounter}
        width={width}
        height={height}
        itemSpacing={this.getItemSpacing()}
        orientation={options.orientation}
      />
    );
  }
}

export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
  renderValue = (value: FieldDisplay, width: number, height: number): JSX.Element => {
    const { options } = this.props;
    const { field, display } = value;

    return (
      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
        {({ openMenu, targetClassName }) => {
          return (
            <Gauge
              value={display}
              width={width}
              height={height}
              field={field}
              showThresholdLabels={options.showThresholdLabels}
              showThresholdMarkers={options.showThresholdMarkers}
              theme={config.theme}
              onClick={openMenu}
              className={targetClassName}
            />
          );
        }}
      </DataLinksContextMenu>
    );
  };

  getValues = (): FieldDisplay[] => {
    const { data, options, replaceVariables } = this.props;
    return getFieldDisplayValues({
      fieldOptions: options.fieldOptions,
      replaceVariables,
      theme: config.theme,
      data: data.series,
      autoMinMax: true,
    });
  };

  render() {
    const { height, width, data, renderCounter } = this.props;
    return (
      <VizRepeater
        getValues={this.getValues}
        renderValue={this.renderValue}
        width={width}
        height={height}
        source={data}
        renderCounter={renderCounter}
        orientation={VizOrientation.Auto}
      />
    );
  }
}

constructor(props: PanelProps) {
    super(props);

    this.state = {
      checksDone: false,
    };

    this.steps = [
      {
        title: 'Install Grafana',
        icon: 'icon-gf icon-gf-check',
        href: 'http://docs.grafana.org/',
        target: '_blank',
        note: 'Review the installation docs',
        check: () => Promise.resolve(true),
      },
      {
        title: 'Create a data source',
        cta: 'Add data source',
        icon: 'gicon gicon-datasources',
        href: 'datasources/new?gettingstarted',
        check: () => {
          return new Promise(resolve => {
            resolve(
              getDatasourceSrv()
                .getMetricSources()
                .filter(item => {
                  return item.meta.builtIn !== true;
                }).length > 0
            );
          });
        },
      },
      {
        title: 'Build a dashboard',
        cta: 'New dashboard',
        icon: 'gicon gicon-dashboard',
        href: 'dashboard/new?gettingstarted',
        check: () => {
          return backendSrv.search({ limit: 1 }).then(result => {
            return result.length > 0;
          });
        },
      },
      {
        title: 'Invite your team',
        cta: 'Add Users',
        icon: 'gicon gicon-team',
        href: 'org/users?gettingstarted',
        check: () => {
          return backendSrv.get('/api/org/users/lookup').then((res: any) => {
            /* return res.length > 1; */
            return false;
          });
        },
      },
      {
        title: 'Install apps & plugins',
        cta: 'Explore plugin repository',
        icon: 'gicon gicon-plugins',
        href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
        check: () => {
          return backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then((plugins: any[]) => {
            return plugins.length > 0;
          });
        },
      },
    ];
  }

export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
  renderValue = (
    value: FieldDisplay,
    width: number,
    height: number,
    alignmentFactors: DisplayValueAlignmentFactors
  ): JSX.Element => {
    const { timeRange, options } = this.props;
    let sparkline: BigValueSparkline | undefined;

    if (value.sparkline) {
      sparkline = {
        data: value.sparkline,
        xMin: timeRange.from.valueOf(),
        xMax: timeRange.to.valueOf(),
        yMin: value.field.min,
        yMax: value.field.max,
      };

      const calc = options.fieldOptions.calcs[0];
      if (calc === ReducerID.last) {
        sparkline.highlightIndex = sparkline.data.length - 1;
      }
    }

    return (
      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
        {({ openMenu, targetClassName }) => {
          return (
            <BigValue
              value={value.display}
              sparkline={sparkline}
              colorMode={options.colorMode}
              graphMode={options.graphMode}
              justifyMode={options.justifyMode}
              alignmentFactors={alignmentFactors}
              width={width}
              height={height}
              theme={config.theme}
              onClick={openMenu}
              className={targetClassName}
            />
          );
        }}
      </DataLinksContextMenu>
    );
  };

  getValues = (): FieldDisplay[] => {
    const { data, options, replaceVariables } = this.props;

    return getFieldDisplayValues({
      ...options,
      replaceVariables,
      theme: config.theme,
      data: data.series,
      sparkline: options.graphMode !== BigValueGraphMode.None,
      autoMinMax: true,
    });
  };

  render() {
    const { height, options, width, data, renderCounter } = this.props;

    return (
      <VizRepeater
        getValues={this.getValues}
        getAlignmentFactors={getDisplayValueAlignmentFactors}
        renderValue={this.renderValue}
        width={width}
        height={height}
        source={data}
        renderCounter={renderCounter}
        orientation={getOrientation(width, height, options.orientation)}
      />
    );
  }
}

export class GettingStarted extends PureComponent<PanelProps, State> {
  stepIndex = 0;
  readonly steps: Step[];

  constructor(props: PanelProps) {
    super(props);

    this.state = {
      checksDone: false,
    };

    this.steps = [
      {
        title: 'Install Grafana',
        icon: 'icon-gf icon-gf-check',
        href: 'http://docs.grafana.org/',
        target: '_blank',
        note: 'Review the installation docs',
        check: () => Promise.resolve(true),
      },
      {
        title: 'Create a data source',
        cta: 'Add data source',
        icon: 'gicon gicon-datasources',
        href: 'datasources/new?gettingstarted',
        check: () => {
          return new Promise(resolve => {
            resolve(
              getDatasourceSrv()
                .getMetricSources()
                .filter(item => {
                  return item.meta.builtIn !== true;
                }).length > 0
            );
          });
        },
      },
      {
        title: 'Build a dashboard',
        cta: 'New dashboard',
        icon: 'gicon gicon-dashboard',
        href: 'dashboard/new?gettingstarted',
        check: () => {
          return backendSrv.search({ limit: 1 }).then(result => {
            return result.length > 0;
          });
        },
      },
      {
        title: 'Invite your team',
        cta: 'Add Users',
        icon: 'gicon gicon-team',
        href: 'org/users?gettingstarted',
        check: () => {
          return backendSrv.get('/api/org/users/lookup').then((res: any) => {
            /* return res.length > 1; */
            return false;
          });
        },
      },
      {
        title: 'Install apps & plugins',
        cta: 'Explore plugin repository',
        icon: 'gicon gicon-plugins',
        href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
        check: () => {
          return backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then((plugins: any[]) => {
            return plugins.length > 0;
          });
        },
      },
    ];
  }

  componentDidMount() {
    this.stepIndex = -1;
    return this.nextStep().then((res: any) => {
      this.setState({ checksDone: true });
    });
  }

  nextStep(): any {
    if (this.stepIndex === this.steps.length - 1) {
      return Promise.resolve();
    }

    this.stepIndex += 1;
    const currentStep = this.steps[this.stepIndex];
    return currentStep.check().then(passed => {
      if (passed) {
        currentStep.done = true;
        return this.nextStep();
      }
      return Promise.resolve();
    });
  }

  dismiss = () => {
    const { id } = this.props;
    const dashboard = getDashboardSrv().getCurrent();
    const panel = dashboard.getPanelById(id);
    dashboard.removePanel(panel);
    backendSrv
      .request({
        method: 'PUT',
        url: '/api/user/helpflags/1',
        showSuccessAlert: false,
      })
      .then((res: any) => {
        contextSrv.user.helpFlags1 = res.helpFlags1;
      });
  };

  render() {
    const { checksDone } = this.state;
    if (!checksDone) {
      return <div>checking...</div>;
    }

    return (
      <div className="progress-tracker-container">
        <button className="progress-tracker-close-btn" onClick={this.dismiss}>
          <i className="fa fa-remove" />
        </button>
        <div className="progress-tracker">
          {this.steps.map((step, index) => {
            return (
              <div key={index} className={step.done ? 'progress-step completed' : 'progress-step active'}>
                <a className="progress-link" href={step.href} target={step.target} title={step.note}>
                  <span className="progress-marker">
                    <i className={step.icon} />
                  </span>
                  <span className="progress-text">{step.title}</span>
                </a>
                <a className="btn-small progress-step-cta" href={step.href} target={step.target}>
                  {step.cta}
                </a>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}