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
UI/bar chart horizontal #12437
Merged
Merged
UI/bar chart horizontal #12437
Changes from all commits
Commits
Show all changes
51 commits
Select commit
Hold shift + click to select a range
20eef6a
creates bar chart component
hellobontempo 9c28a8b
WIP//starts styling
hellobontempo 8b6251d
Merge branch 'main' into ui/bar-chart-horizontal
hellobontempo 3095db0
fixes width of bars
hellobontempo 0ec54d1
WIP//barchart
hellobontempo 8f3b735
uses d3 max method instead of Math.max
hellobontempo 0f03ffc
stacks data
hellobontempo 83af87e
adds y axis
hellobontempo 3611871
fixes styling and spacing
hellobontempo 5f42ea6
adds spacing between bars
hellobontempo 704bdfd
styling DONE
hellobontempo 238d6ec
adds legend
hellobontempo 3d96d6b
adds tooltip
hellobontempo 9c7b764
tweaks styling adds pointer cursor to rects
hellobontempo 05a1619
fixes tooltip placement
hellobontempo b54fa3c
moves starget from bar to whole area
hellobontempo e76666f
finishes hover selection styling
hellobontempo 45f8192
cleans up
hellobontempo 50dec44
cleans up a tiny bit
hellobontempo f747f89
stopping point
hellobontempo 655cf01
adjusts tooltip placemnt
hellobontempo addc811
WIP//clean up time
hellobontempo 64a1d90
sort of not broken
hellobontempo f07c9bd
unbroken, ish
hellobontempo 373802e
tooltip position fixed
hellobontempo bdd4467
truncates text and adds tooltip
hellobontempo 00fdd6c
changes tooltip width depending on content
hellobontempo 79cdc3c
unbroken
hellobontempo 18f8076
finishes initial refactor/cleanup
hellobontempo ad10d12
finishes documentation
hellobontempo 95f5603
passes in map legend to component
hellobontempo 684a302
more tidying
hellobontempo caa2a4a
add export option
hellobontempo 4e2f168
Merge branch 'main' into ui/bar-chart-horizontal
hellobontempo e37ac0e
adds grid to header for export button option
hellobontempo b0aa9d5
updates comments
hellobontempo 9802437
fix variable name change
hellobontempo 461ee0f
moves dataset formatting to parent
hellobontempo f09efc6
removes unused code"
hellobontempo c7dd44b
adds assertions and empty state if no data
hellobontempo 9c8aaa0
cleans up comments adds assertion to check for map legend
hellobontempo 987125f
adds storybook
hellobontempo ec674a8
adds changelog
hellobontempo fa8099f
deletes dummy parent:
hellobontempo 70bf01b
restores index.hbs
hellobontempo 99a9170
uses scss variables instead
hellobontempo 4f9d678
exchanges more variables
hellobontempo 07e3b2b
Merge branch 'main' into ui/bar-chart-horizontal
hellobontempo 3d4793e
remove unused variable in storybook
hellobontempo fab0db2
writes basic test
hellobontempo f936641
removes pauseTest()
hellobontempo File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```release-note:feature | ||
ui: creates bar chart component for displaying client count data by namespace | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
.bar-chart-wrapper { | ||
border: $light-border; | ||
border-radius: $radius-large; | ||
padding: $spacing-l $spacing-l $spacing-s $spacing-l; | ||
height: 100%; | ||
width: 100%; | ||
|
||
> div.is-border { | ||
border: 0.3px solid $ui-gray-200; | ||
width: 94%; | ||
margin-left: 3%; | ||
margin-bottom: $spacing-xxs; | ||
} | ||
} | ||
|
||
.chart-header { | ||
margin-left: $spacing-l; | ||
display: grid; | ||
grid-template-columns: 3fr 1fr; | ||
|
||
.header-left { | ||
.chart-title { | ||
font-size: $size-5; | ||
font-weight: $font-weight-bold; | ||
line-height: normal; | ||
} | ||
|
||
.chart-description { | ||
font-size: $size-8; | ||
font-weight: $font-weight-normal; | ||
color: $ui-gray-700; | ||
margin-bottom: $spacing-xs; | ||
} | ||
} | ||
|
||
.header-right { | ||
text-align: center; | ||
|
||
> button { | ||
font-size: $size-8; | ||
|
||
&:hover { | ||
text-decoration: underline; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.bar-chart-container { | ||
padding: $spacing-m $spacing-l $spacing-m $spacing-l; | ||
} | ||
|
||
.bar-chart { | ||
.tick > text { | ||
font-weight: $font-weight-semibold; | ||
font-size: $size-8; | ||
} | ||
} | ||
|
||
.legend-container { | ||
height: $spacing-l; | ||
margin-top: $spacing-xs; | ||
} | ||
|
||
.legend { | ||
width: 100%; | ||
height: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
.header-right
is where anything passed into the block is yielded (i.e. an export button). Should this styling be less specific since the button is no longer part of this component?