Skip to content

[Uptime] condense waterfall chart visuals #96914

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

Merged
dominiqueclarke merged 6 commits into from
Apr 20, 2021
Merged

[Uptime] condense waterfall chart visuals #96914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb86660
condense waterfall chart visuals
dominiqueclarke Apr 13, 2021
cb711ea
Merge branch 'master' into feature/90913-uptime-waterfall-condense-vi…
kibanamachine Apr 13, 2021
4569b32
Merge branch 'master' into feature/90913-uptime-waterfall-condense-vi…
kibanamachine Apr 18, 2021
1775f57
Merge branch 'master' of github.com:elastic/kibana into feature/90913…
dominiqueclarke Apr 19, 2021
81f2bcb
Merge branch 'feature/90913-uptime-waterfall-condense-visuals' of htt…
dominiqueclarke Apr 19, 2021
3b86633
adjust font size of waterfall chart items to medium
dominiqueclarke Apr 19, 2021
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
18 changes: 11 additions & 7 deletions ...ime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,17 @@ export const WaterfallSidebarItem = ({
data-test-subj={isHighlighted ? 'sideBarHighlightedItem' : 'sideBarDimmedItem'}
>
{!status || !isErrorStatusCode(status) ? (
<MiddleTruncatedText
text={text}
url={url}
ariaLabel={ariaLabel}
onClick={handleSidebarClick}
setButtonRef={setRef}
/>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ minWidth: 0 }}>
<MiddleTruncatedText
text={text}
url={url}
ariaLabel={ariaLabel}
onClick={handleSidebarClick}
setButtonRef={setRef}
/>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false} style={{ minWidth: 0 }}>
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
*/

// Pixel value
export const BAR_HEIGHT = 32;
export const BAR_HEIGHT = 24;
// Flex grow value
export const MAIN_GROW_SIZE = 8;
// Flex grow value
export const SIDEBAR_GROW_SIZE = 2;
// Axis height
// NOTE: This isn't a perfect solution - changes in font size etc within charts could change the ideal height here.
export const FIXED_AXIS_HEIGHT = 32;
export const FIXED_AXIS_HEIGHT = 24;

// number of items to display in canvas, since canvas can only have limited size
export const CANVAS_MAX_ITEMS = 150;
Expand Down
1 change: 0 additions & 1 deletion ...ptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ const LastChunk = styled.span`

const StyledButton = styled(EuiButtonEmpty)`
&&& {
height: auto;
border: none;

.euiButtonContent {
Expand Down
8 changes: 6 additions & 2 deletions x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,10 @@ export const WaterfallChartSidebarFlexItem = euiStyled(EuiFlexItem)`
export const SideBarItemHighlighter = euiStyled(EuiFlexItem)<{ isHighlighted: boolean }>`
opacity: ${(props) => (props.isHighlighted ? 1 : 0.4)};
height: 100%;
.euiButtonEmpty {
height: ${FIXED_AXIS_HEIGHT}px;
font-size:${({ theme }) => theme.eui.euiFontSizeM};
}
`;

interface WaterfallChartChartContainer {
Expand All @@ -124,8 +128,8 @@ interface WaterfallChartChartContainer {

export const WaterfallChartChartContainer = euiStyled.div<WaterfallChartChartContainer>`
width: 100%;
height: ${(props) => `${props.height + FIXED_AXIS_HEIGHT - 4}px`};
margin-top: -${FIXED_AXIS_HEIGHT - 4}px;
height: ${(props) => `${props.height + FIXED_AXIS_HEIGHT + 4}px`};
margin-top: -${FIXED_AXIS_HEIGHT + 4}px;
z-index: ${(props) => Math.round(props.theme.eui.euiZLevel3 / (props.chartIndex + 1))};
`;

Expand Down