Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Adds loading, failure/error, and empty states to Line Charts #9

Merged
merged 3 commits into from
Jan 23, 2024
Merged

feat: Adds loading, failure/error, and empty states to Line Charts #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
075e18b
Add loading, fail, and empty states to line charts
dthyresson Jan 23, 2024
dc7b018
Cleanup LineChart props; add Loading
dthyresson Jan 23, 2024
97d3cdd
Fixes icon type
dthyresson Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions web/src/components/ApiPerformanceCell/ApiPerformanceCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import type {

import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

import ChartCard from 'src/components/Charts/ChartCard'
import ChartEmptyState from 'src/components/Charts/ChartEmptyState'
import ChartFailureState from 'src/components/Charts/ChartFailureState'
import ChartHeading from 'src/components/Charts/ChartHeading'
import ChartLoadingState from 'src/components/Charts/ChartLoadingState'
import PerformanceLineChart from 'src/components/Charts/LineCharts/PerformanceLineChart'
import { ApiPerformanceIcon } from 'src/icons/Icons'
Expand All @@ -34,14 +34,36 @@ export const QUERY = gql`
}
`

export const Loading = () => <ChartLoadingState />
export const Loading = () => (
<ChartCard
caption="API Performance"
icon={ApiPerformanceIcon}
tooltip="API Performance"
>
<ChartLoadingState />
</ChartCard>
)

export const Empty = () => <ChartEmptyState />
export const Empty = () => (
<ChartCard
caption="API Performance"
icon={ApiPerformanceIcon}
tooltip="API Performance"
>
<ChartEmptyState />
</ChartCard>
)

export const Failure = ({
error,
}: CellFailureProps<GetApiPerformanceQueryVariables>) => (
<ChartFailureState message={error.message} />
<ChartCard
caption="API Performance"
icon={ApiPerformanceIcon}
tooltip="API Performance"
>
<ChartFailureState message={error.message} />
</ChartCard>
)

export const Success = ({
Expand All @@ -51,13 +73,12 @@ export const Success = ({
GetApiPerformanceQueryVariables
>) => {
return (
<Card>
<ChartHeading
caption="API Performance"
icon={ApiPerformanceIcon}
tooltip="API Performance"
/>
<ChartCard
caption="API Performance"
icon={ApiPerformanceIcon}
tooltip="API Performance"
>
<PerformanceLineChart dataPoints={dataPoints} />
</Card>
</ChartCard>
)
}
25 changes: 25 additions & 0 deletions web/src/components/Charts/ChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React, { ReactNode } from 'react'

import { Card } from '@tremor/react'

import ChartHeading from './ChartHeading'

interface ChartCardProps {
caption: string
icon: React.ElementType
tooltip?: string
children: ReactNode
}

const ChartCard: React.FC<ChartCardProps> = ({
caption,
icon,
tooltip,
children,
}) => (
<Card>
<ChartHeading caption={caption} icon={icon} tooltip={tooltip || caption} />
{children}
</Card>
)
export default ChartCard
12 changes: 10 additions & 2 deletions web/src/components/Charts/ChartEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import { Title } from '@tremor/react'
import { LineChart } from '@tremor/react'

const ChartEmptyState = () => <Title>Empty</Title>
const ChartEmptyState = () => (
<LineChart
className="mt-6"
data={[]}
index="ago"
categories={[]}
noDataText="No recent data to display"
/>
)

export default ChartEmptyState
10 changes: 8 additions & 2 deletions web/src/components/Charts/ChartFailureState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { Bold } from '@tremor/react'
import { LineChart } from '@tremor/react'

const ChartFailureState = ({ message }: { message: string }) => (
<Bold color="red">{message}</Bold>
<LineChart
className="mt-6"
data={[]}
index="ago"
categories={[]}
noDataText={message}
/>
)

export default ChartFailureState
12 changes: 10 additions & 2 deletions web/src/components/Charts/ChartLoadingState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import { Title } from '@tremor/react'
import { LineChart } from '@tremor/react'

const ChartLoadingState = ({
message = 'Loading ...',
}: {
message?: string
}) => <Title>{message}</Title>
}) => (
<LineChart
className="mt-6"
data={[]}
index="ago"
categories={[]}
noDataText={message}
/>
)

export default ChartLoadingState
43 changes: 32 additions & 11 deletions web/src/components/DatabasePerformanceCell/DatabasePerformanceCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import type {

import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

import ChartCard from 'src/components/Charts/ChartCard'
import ChartEmptyState from 'src/components/Charts/ChartEmptyState'
import ChartFailureState from 'src/components/Charts/ChartFailureState'
import ChartHeading from 'src/components/Charts/ChartHeading'
import ChartLoadingState from 'src/components/Charts/ChartLoadingState'
import PerformanceLineChart from 'src/components/Charts/LineCharts/PerformanceLineChart'
import { DatabasePerformanceIcon } from 'src/icons/Icons'
Expand All @@ -34,14 +34,36 @@ export const QUERY = gql`
}
`

export const Loading = () => <ChartLoadingState />
export const Loading = () => (
<ChartCard
caption="Database Performance"
icon={DatabasePerformanceIcon}
tooltip="Database Performance"
>
<ChartLoadingState />
</ChartCard>
)

export const Empty = () => <ChartEmptyState />
export const Empty = () => (
<ChartCard
caption="Database Performance"
icon={DatabasePerformanceIcon}
tooltip="Database Performance"
>
<ChartEmptyState />
</ChartCard>
)

export const Failure = ({
error,
}: CellFailureProps<GetDatabasePerformanceQueryVariables>) => (
<ChartFailureState message={error.message} />
<ChartCard
caption="Database Performance"
icon={DatabasePerformanceIcon}
tooltip="Database Performance"
>
<ChartFailureState message={error.message} />
</ChartCard>
)

export const Success = ({
Expand All @@ -51,13 +73,12 @@ export const Success = ({
GetDatabasePerformanceQueryVariables
>) => {
return (
<Card>
<ChartHeading
caption="Database Performance"
icon={DatabasePerformanceIcon}
tooltip="Database Performance"
/>
<ChartCard
caption="Database Performance"
icon={DatabasePerformanceIcon}
tooltip="Database Performance"
>
<PerformanceLineChart dataPoints={dataPoints} />
</Card>
</ChartCard>
)
}
43 changes: 32 additions & 11 deletions web/src/components/GraphQLPerformanceCell/GraphQLPerformanceCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import type {

import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

import ChartCard from 'src/components/Charts/ChartCard'
import ChartEmptyState from 'src/components/Charts/ChartEmptyState'
import ChartFailureState from 'src/components/Charts/ChartFailureState'
import ChartHeading from 'src/components/Charts/ChartHeading'
import ChartLoadingState from 'src/components/Charts/ChartLoadingState'
import PerformanceLineChart from 'src/components/Charts/LineCharts/PerformanceLineChart'
import { GraphQLPerformanceIcon } from 'src/icons/Icons'
Expand All @@ -34,14 +34,36 @@ export const QUERY = gql`
}
`

export const Loading = () => <ChartLoadingState />
export const Loading = () => (
<ChartCard
caption="GraphQL Performance"
icon={GraphQLPerformanceIcon}
tooltip="GraphQL Performance"
>
<ChartLoadingState />
</ChartCard>
)

export const Empty = () => <ChartEmptyState />
export const Empty = () => (
<ChartCard
caption="GraphQL Performance"
icon={GraphQLPerformanceIcon}
tooltip="GraphQL Performance"
>
<ChartEmptyState />
</ChartCard>
)

export const Failure = ({
error,
}: CellFailureProps<GetGraphQLPerformanceQueryVariables>) => (
<ChartFailureState message={error.message} />
<ChartCard
caption="GraphQL Performance"
icon={GraphQLPerformanceIcon}
tooltip="GraphQL Performance"
>
<ChartFailureState message={error.message} />
</ChartCard>
)

export const Success = ({
Expand All @@ -51,13 +73,12 @@ export const Success = ({
GetGraphQLPerformanceQueryVariables
>) => {
return (
<Card>
<ChartHeading
caption="GraphQL Performance"
icon={GraphQLPerformanceIcon}
tooltip="GraphQL Performance"
/>
<ChartCard
caption="GraphQL Performance"
icon={GraphQLPerformanceIcon}
tooltip="GraphQL Performance"
>
<PerformanceLineChart dataPoints={dataPoints} />{' '}
</Card>
</ChartCard>
)
}
43 changes: 32 additions & 11 deletions web/src/components/NetworkPerformanceCell/NetworkPerformanceCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import type {

import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

import ChartCard from 'src/components/Charts/ChartCard'
import ChartEmptyState from 'src/components/Charts/ChartEmptyState'
import ChartFailureState from 'src/components/Charts/ChartFailureState'
import ChartHeading from 'src/components/Charts/ChartHeading'
import ChartLoadingState from 'src/components/Charts/ChartLoadingState'
import PerformanceLineChart from 'src/components/Charts/LineCharts/PerformanceLineChart'
import { NetworkPerformanceIcon } from 'src/icons/Icons'
Expand All @@ -34,14 +34,36 @@ export const QUERY = gql`
}
`

export const Loading = () => <ChartLoadingState />
export const Loading = () => (
<ChartCard
caption="Network Performance"
icon={NetworkPerformanceIcon}
tooltip="Network Performance"
>
<ChartLoadingState />
</ChartCard>
)

export const Empty = () => <ChartEmptyState />
export const Empty = () => (
<ChartCard
caption="Network Performance"
icon={NetworkPerformanceIcon}
tooltip="Network Performance"
>
<ChartEmptyState />
</ChartCard>
)

export const Failure = ({
error,
}: CellFailureProps<GetNetworkPerformanceQueryVariables>) => (
<ChartFailureState message={error.message} />
<ChartCard
caption="Network Performance"
icon={NetworkPerformanceIcon}
tooltip="Network Performance"
>
<ChartFailureState message={error.message} />
</ChartCard>
)

export const Success = ({
Expand All @@ -51,13 +73,12 @@ export const Success = ({
GetNetworkPerformanceQueryVariables
>) => {
return (
<Card>
<ChartHeading
caption="Network Performance"
icon={NetworkPerformanceIcon}
tooltip="Network Performance"
/>
<ChartCard
caption="Network Performance"
icon={NetworkPerformanceIcon}
tooltip="Network Performance"
>
<PerformanceLineChart dataPoints={dataPoints} />{' '}
</Card>
</ChartCard>
)
}