-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
UI/bar chart horizontal #12437
Conversation
* | ||
* @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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All on one line because storybook didn't like when each arg was on its own line...
} | ||
} | ||
|
||
.header-right { |
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?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 5
is responsible for the small gap between horizontal bars
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.
This is a great start. I know you still have some refinements that can come in future PRs. This component works, and getting it merged will make it easier for the development process on the metrics project.
Horizontal bar chart component for client counts.
TO DO: