UI/bar chart horizontal #12437
Merged
UI/bar chart horizontal #12437
Conversation
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
hellobontempo
commented
Sep 1, 2021
| * | ||
| * @example | ||
| * ```js | ||
| * <BarChartComponent @title="Top 10 Namespaces" @description="Each namespace's client count includes clients in child namespaces." @labelKey="namespace_path" @dataset={{this.testData}} @mapLegend={{ array (hash key="non_entity_tokens" label="Active direct tokens") (hash key="distinct_entities" label="Unique Entities") }} @onClick={{this.onClick}} > |
There was a problem hiding this comment.
All on one line because storybook didn't like when each arg was on its own line...
hellobontempo
commented
Sep 1, 2021
| } | ||
| } | ||
|
|
||
| .header-right { |
There was a problem hiding this comment.
.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?
| import { select, event, selectAll } from 'd3-selection'; | ||
| // eslint-disable-next-line no-unused-vars | ||
| import { transition } from 'd3-transition'; | ||
|
|
There was a problem hiding this comment.
Chart styling is within the component file for now so that a future developer doesn't have to hunt down the .css file and some .css styling is kind of wonky when interacting with d3. In next PR, when cleaning up d3, may consider moving all static styling to .css
| .append('rect') | ||
| .attr('class', 'data-bar') | ||
| .style('cursor', 'pointer') | ||
| .attr('width', chartData => `${xScale(chartData[1] - chartData[0] - 5)}%`) |
There was a problem hiding this comment.
- 5 is responsible for the small gap between horizontal bars
Monkeychip
approved these changes
Sep 3, 2021
jartek
pushed a commit
to jartek/vault
that referenced
this pull request
Sep 11, 2021
* creates bar chart component * WIP//starts styling * fixes width of bars * WIP//barchart * uses d3 max method instead of Math.max * stacks data * adds y axis * fixes styling and spacing * adds spacing between bars * styling DONE * adds legend * adds tooltip * tweaks styling adds pointer cursor to rects * fixes tooltip placement * moves starget from bar to whole area * finishes hover selection styling * cleans up * cleans up a tiny bit * stopping point * adjusts tooltip placemnt * WIP//clean up time * sort of not broken * unbroken, ish * tooltip position fixed * truncates text and adds tooltip * changes tooltip width depending on content * unbroken * finishes initial refactor/cleanup * finishes documentation * passes in map legend to component * more tidying * add export option * adds grid to header for export button option * updates comments * fix variable name change * moves dataset formatting to parent * removes unused code" * adds assertions and empty state if no data * cleans up comments adds assertion to check for map legend * adds storybook * adds changelog * deletes dummy parent: * restores index.hbs * uses scss variables instead * exchanges more variables * remove unused variable in storybook * writes basic test * removes pauseTest()
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Horizontal bar chart component for client counts.
TO DO: