Skip to content

Commit

Permalink
added a wrapper component.
Browse files Browse the repository at this point in the history
  • Loading branch information
mckn committed Aug 30, 2024
1 parent 5f8cae1 commit d9799b1
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 6 deletions.
22 changes: 22 additions & 0 deletions src/components/Center.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { PropsWithChildren } from 'react';
import { Stack, HorizontalGroup } from '@grafana/ui';

// This component is used to keep backwards compatability
// for older Grafana versions that doesn't have the Stack
// component.
export function Center({ children }: PropsWithChildren) {
if (typeof Stack !== 'undefined') {
return (
<Stack justifyContent="center" alignItems="center">
{children}
</Stack>
);
}

return (
// eslint-disable-next-line deprecation/deprecation
<HorizontalGroup justify="center" align="center">
{children}
</HorizontalGroup>
);
}
7 changes: 4 additions & 3 deletions src/components/Nodata.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { css } from '@emotion/css';
import { type GrafanaTheme2 } from '@grafana/data';
import { Stack, useStyles2 } from '@grafana/ui';
import { useStyles2 } from '@grafana/ui';
import React, { type ReactElement } from 'react';
import { Center } from './Center';

export function Nodata(): ReactElement {
const styles = useStyles2(getStyles);

return (
<Stack justifyContent="center" alignItems="center">
<Center>
<p className={styles.text}>No data</p>
</Stack>
</Center>
);
}

Expand Down
7 changes: 4 additions & 3 deletions src/components/Unsupported.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { css } from '@emotion/css';
import { Alert, Stack, useStyles2 } from '@grafana/ui';
import { Alert, useStyles2 } from '@grafana/ui';
import React, { type ReactElement } from 'react';
import { Center } from './Center';

export function Unsupported(): ReactElement {
const styles = useStyles2(getStyles);

return (
<div className={styles.container}>
<Stack justifyContent="center" alignItems="center">
<Center>
<Alert severity="info" title="Unsupported data">
The data you have provided is not supported by this panel. Every data frame provided to the panel needs to
contain at least one numeric field which will be used to visualize each step in the funnel.
</Alert>
</Stack>
</Center>
</div>
);
}
Expand Down

0 comments on commit d9799b1

Please sign in to comment.