Skip to content
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 51 commits into from
Sep 7, 2021
Merged

UI/bar chart horizontal #12437

merged 51 commits into from
Sep 7, 2021

Conversation

hellobontempo
Copy link
Contributor

@hellobontempo hellobontempo commented Aug 25, 2021

Horizontal bar chart component for client counts.

bar_chart

TO DO:

  • Abstract to make more reusable for other use cases (i.e. unstacked data)
  • Clean up D3
  • Accessibility (this will happen in tandem with D3 cleanup)

@vercel vercel bot temporarily deployed to Preview – vault September 1, 2021 18:17 Inactive
@hellobontempo hellobontempo added this to the 1.9 milestone 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}} >
Copy link
Contributor Author

@hellobontempo hellobontempo Sep 1, 2021

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...

@vercel vercel bot temporarily deployed to Preview – vault September 1, 2021 18:20 Inactive
}
}

.header-right {
Copy link
Contributor Author

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';

Copy link
Contributor Author

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)}%`)
Copy link
Contributor Author

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

@hellobontempo hellobontempo marked this pull request as ready for review September 1, 2021 18:32
Copy link
Contributor

@Monkeychip Monkeychip left a 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants