Skip to content

Commit

Permalink
feat(charts): introduce loadingDelay prop (#6027)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukas742 authored Jul 8, 2024
1 parent ca13875 commit 71fcb40
Show file tree
Hide file tree
Showing 13 changed files with 46 additions and 7 deletions.
2 changes: 2 additions & 0 deletions packages/charts/src/components/BarChart/BarChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export interface BarChartProps extends IChartBaseProps {
const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
noLegend,
noAnimation,
Expand Down Expand Up @@ -226,6 +227,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
<ChartContainer
dataset={dataset}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
ref={componentRef}
style={style}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/BulletChart/BulletChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ type AvailableChartTypes = 'primary' | 'comparison' | 'additional' | string;
const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
onDataPointClick,
noLegend,
Expand Down Expand Up @@ -271,6 +272,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
<ChartContainer
ref={componentRef}
loading={loading}
loadingDelay={loadingDelay}
dataset={dataset}
Placeholder={ChartPlaceholder ?? Placeholder}
style={style}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/ColumnChart/ColumnChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const valueAccessor =
const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
noLegend,
noAnimation,
Expand Down Expand Up @@ -225,6 +226,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
<ChartContainer
dataset={dataset}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? ColumnChartPlaceholder}
ref={componentRef}
style={style}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ type AvailableChartTypes = 'line' | 'bar' | string;
const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
style,
className,
Expand Down Expand Up @@ -177,6 +178,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
tooltipConfig={lineTooltipConfig}
noAnimation={noAnimation}
loading={loading}
loadingDelay={loadingDelay}
onClick={onClick}
syncId={syncId}
style={{ ...style, height: `calc(${style?.height} * 0.2)` }}
Expand All @@ -201,6 +203,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
noAnimation={noAnimation}
noLegend={noLegend}
loading={loading}
loadingDelay={loadingDelay}
onClick={onClick}
onDataPointClick={onDataPointClick}
syncId={syncId}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/ComposedChart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
onDataPointClick,
noLegend,
Expand Down Expand Up @@ -276,6 +277,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
<ChartContainer
ref={componentRef}
loading={loading}
loadingDelay={loadingDelay}
dataset={dataset}
Placeholder={ChartPlaceholder ?? Placeholder}
style={style}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/LineChart/LineChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
const {
dataset,
loading,
loadingDelay,
noLegend,
noAnimation,
tooltipConfig,
Expand Down Expand Up @@ -214,6 +215,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
<ChartContainer
dataset={dataset}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? LineChartPlaceholder}
ref={componentRef}
style={style}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const resolveColor = (index: number, color = null) => {
* The `MicroBarChart` compares different values of the same category to each other by displaying them in a compact way.
*/
const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref) => {
const { loading, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;
const { loading, loadingDelay, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props;

useStylesheet(styleData, MicroBarChart.displayName);

Expand Down Expand Up @@ -140,6 +140,7 @@ const MicroBarChart = forwardRef<HTMLDivElement, MicroBarChartProps>((props, ref
<ChartContainer
dataset={dataset}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? BarChartPlaceholder}
ref={ref}
style={style}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/PieChart/PieChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ const tooltipItemDefaultStyle = { color: 'var (--sapTextColor)' };
const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
noLegend,
noAnimation,
Expand Down Expand Up @@ -267,6 +268,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
dataset={dataset}
ref={ref}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
style={style}
className={className}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/RadarChart/RadarChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const measureDefaults = {
const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
const {
loading,
loadingDelay,
dataset,
noLegend,
noAnimation,
Expand Down Expand Up @@ -166,6 +167,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
dataset={dataset}
ref={ref}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
style={style}
className={className}
Expand Down
4 changes: 3 additions & 1 deletion packages/charts/src/components/RadialChart/RadialChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface RadialChartConfig {

[rest: string]: any;
}

//todo expose `loading`
export interface RadialChartProps extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'> {
/**
* The actual value which defines how much the ring is filled.
Expand Down Expand Up @@ -126,6 +126,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>

return (
<ChartContainer
loading={undefined}
loadingDelay={undefined}
dataset={dataset}
ref={ref}
Placeholder={PieChartPlaceholder}
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/src/components/ScatterChart/ScatterChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
const {
dataset,
loading,
loadingDelay,
noLegend,
noAnimation,
tooltipConfig,
Expand Down Expand Up @@ -216,6 +217,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
<ChartContainer
dataset={dataset}
loading={loading}
loadingDelay={loadingDelay}
Placeholder={ChartPlaceholder ?? ScatterChartPlaceholder}
ref={componentRef}
style={style}
Expand Down
9 changes: 7 additions & 2 deletions packages/charts/src/interfaces/IChartBaseProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,15 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
/**
* Flag whether the chart should display a loading indicator.
*
* This can either be a placeholder shimmer (in case the chart has no data yet) or a small
* loading bar in the top of the chart (in case the chart has already some data to display).
* This can either be a skeleton placeholder shimmer (in case the chart has no data yet) or a `BusyIndicator` on top of the chart (in case the chart has already some data to display).
*/
loading?: boolean;
/**
* Defines the delay in milliseconds, after which the `BusyIndicator` will be visible on the screen.
*
* @default 1000
*/
loadingDelay?: number;
/**
* The `dataset` is an array of object which will be displayed in the chart.
*/
Expand Down
18 changes: 15 additions & 3 deletions packages/charts/src/internal/ChartContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ addCustomCSSWithScoping(

export interface ContainerProps extends CommonProps {
children: ReactElement;
Placeholder?: ComponentType;
Placeholder: ComponentType;
dataset: unknown[];
loading?: boolean;
loading: boolean;
loadingDelay: number;
resizeDebounce: number;
}

Expand All @@ -49,7 +50,17 @@ class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: num
}

const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
const { Placeholder, loading = false, dataset, className, slot, children, resizeDebounce, ...rest } = props;
const {
Placeholder,
loading = false,
dataset,
className,
slot,
children,
resizeDebounce,
loadingDelay,
...rest
} = props;

useStylesheet(styleData, ChartContainer.displayName);

Expand All @@ -60,6 +71,7 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
{loading && (
<BusyIndicator
active
delay={loadingDelay}
className={classNames.busyIndicator}
data-component-name="ChartContainerBusyIndicator"
/>
Expand Down

0 comments on commit 71fcb40

Please sign in to comment.