-
Notifications
You must be signed in to change notification settings - Fork 184
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.
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
feat: add skeleton error states #727
base: master
Are you sure you want to change the base?
Changes from all commits
20ec19a
af4f9e5
0e2d871
a411211
0c5304a
9460330
bcbb21a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -422,3 +422,29 @@ export const lineSkeletonOptions = { | |
loading: true | ||
} | ||
}; | ||
|
||
// line - error | ||
export const lineErrorData = []; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What happens if data is provided? would it still show the error? |
||
export const lineErrorOptions = { | ||
title: "Line (error)", | ||
axes: { | ||
bottom: { | ||
title: "2019 Annual Sales Figures", | ||
mapsTo: "date", | ||
scaleType: "time" | ||
}, | ||
left: { | ||
mapsTo: "value", | ||
title: "Conversion rate", | ||
scaleType: "linear" | ||
} | ||
}, | ||
curve: "curveMonotoneX", | ||
data: { | ||
loading: false, | ||
error: { | ||
title: "No usage available", | ||
subtitle: "Spending summary is not available for trial accounts" | ||
} | ||
} | ||
}; |
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
|
@@ -28,12 +28,27 @@ export class Skeleton extends Component { | |||
"data", | ||||
"loading" | ||||
); | ||||
const error = Tools.getProperty( | ||||
this.model.getOptions(), | ||||
"data", | ||||
"error" | ||||
); | ||||
|
||||
// display a skeleton if there is no chart data or the loading flag is set to true | ||||
if (isDataLoading) { | ||||
this.renderSkeleton(isDataLoading); | ||||
} else { | ||||
} | ||||
|
||||
// if we're done loading, and there's an error, render the skeleton (no shimmer) with an error message | ||||
if (!isDataLoading && error) { | ||||
this.renderSkeleton(false); | ||||
this.renderErrorMesssage(error); | ||||
} | ||||
|
||||
// if neither are true, clean up | ||||
if (!isDataLoading && !error) { | ||||
this.removeSkeleton(); | ||||
this.removeErrorMessage(); | ||||
} | ||||
} | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. shouldn't the error be shown at all times regardless of whether the chart is loading or not? Errors probably won't always just be contained to the data, they could be about anything, and if you don't want an error to show you'd probably just remove it from options...? |
||||
|
||||
|
@@ -301,4 +316,119 @@ export class Skeleton extends Component { | |||
const container = this.parent.select(".chart-skeleton"); | ||||
container.remove(); | ||||
} | ||||
|
||||
renderErrorMesssage(error) { | ||||
const skeleton = this.parent.select(".chart-skeleton"); | ||||
|
||||
const errorContainer = DOMUtils.appendOrSelect( | ||||
skeleton, | ||||
"svg.bx--cc--error-message" | ||||
) | ||||
.attr("width", "90%") | ||||
.attr("height", "25%") | ||||
.attr("x", "16") // usually 1rem | ||||
.attr("y", "45%"); | ||||
|
||||
// Error icon | ||||
const radius = 8; | ||||
const errorIcon = errorContainer | ||||
.selectAll("circle.bx--cc--error-message__icon") | ||||
.data([ | ||||
{ | ||||
cx: "0", | ||||
cy: "0", | ||||
r: radius | ||||
} | ||||
]); | ||||
|
||||
errorIcon | ||||
.enter() | ||||
.append("circle") | ||||
.classed("bx--cc--error-message__icon", true) | ||||
.merge(errorIcon) | ||||
.attr("cx", (d) => d.cx) | ||||
.attr("cy", (d) => d.cy) | ||||
.attr("r", (d) => d.r) | ||||
.attr("transform", (d) => `translate(${d.r}, ${d.r})`); | ||||
|
||||
DOMUtils.appendOrSelect( | ||||
errorContainer, | ||||
"circle.bx--cc--error-message__icon" | ||||
); | ||||
|
||||
errorIcon.exit().remove(); | ||||
|
||||
// Exclamation point | ||||
|
||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||
const exclamationPoint = errorContainer.selectAll( | ||||
"path.bx--cc--error-message__exclamation-point" | ||||
); | ||||
|
||||
exclamationPoint | ||||
.enter() | ||||
.append("path") | ||||
.classed("bx--cc--error-message__exclamation-point", true) | ||||
.merge(exclamationPoint) | ||||
.attr( | ||||
"d", | ||||
"M7.9375,11.125 C7.41973305,11.125 7,11.544733 7,12.0625 C7,12.580267 7.41973305,13 7.9375,13 C8.45526695,13 8.875,12.580267 8.875,12.0625 C8.875,11.544733 8.45526695,11.125 7.9375,11.125 M7.3125, 3 8.5625, 3 8.5625, 9.875 7.3125, 9.875, 7.3125, 3 Z" | ||||
); | ||||
|
||||
DOMUtils.appendOrSelect( | ||||
errorContainer, | ||||
"path.bx--cc--error-message__exclamation-point" | ||||
); | ||||
|
||||
exclamationPoint.exit().remove(); | ||||
|
||||
// Title | ||||
const errorTitle = errorContainer | ||||
.selectAll("text.bx--cc--error-message__title") | ||||
.data([error.title]); | ||||
|
||||
const textHorizontalOffset = radius + 16; | ||||
const textVerticalOffset = 12.5; // this roughly centers our text with the icon | ||||
|
||||
errorTitle | ||||
.enter() | ||||
.append("text") | ||||
.classed("bx--cc--error-message__title", true) | ||||
.merge(errorTitle) | ||||
.attr("x", textHorizontalOffset) | ||||
.attr("y", textVerticalOffset) | ||||
.html((d) => d); | ||||
|
||||
DOMUtils.appendOrSelect( | ||||
errorContainer, | ||||
"text.bx--cc--error-message__title" | ||||
); | ||||
|
||||
errorTitle.exit().remove(); | ||||
|
||||
// Subtitle | ||||
const errorSubtitle = errorContainer | ||||
.selectAll("text.bx--cc--error-message__subtitle") | ||||
.data([error.subtitle]); | ||||
|
||||
errorSubtitle | ||||
.enter() | ||||
.append("text") | ||||
.classed("bx--cc--error-message__subtitle", true) | ||||
.merge(errorSubtitle) | ||||
.attr("x", textHorizontalOffset) | ||||
.attr("y", textVerticalOffset + 16) | ||||
.html((d) => d); | ||||
|
||||
DOMUtils.appendOrSelect( | ||||
errorContainer, | ||||
"text.bx--cc--error-message__subtitle" | ||||
); | ||||
|
||||
errorSubtitle.exit().remove(); | ||||
} | ||||
|
||||
removeErrorMessage() { | ||||
const container = this.parent.select(".bx--cc--error-message"); | ||||
container.remove(); | ||||
} | ||||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should use a real subtitle here to make for a better demo? e.g.
Unable to reach application servers at this time