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.

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

UI: Fix the missing pixels issue with distribution-bar #4507

Merged
merged 3 commits into from
Jul 13, 2018
Merged

UI: Fix the missing pixels issue with distribution-bar #4507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e435d54
Fix a bug where the wrong index could be used when some bars had no v…
DingoEatingFuzz Jul 12, 2018
7e51502
Create a single-bar example of distribution-bar in the styleguide
DingoEatingFuzz Jul 12, 2018
d5af5e6
Compute the correct number of pixels to shave off of bar width
DingoEatingFuzz Jul 12, 2018
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
16 changes: 13 additions & 3 deletions ui/app/components/distribution-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Component from '@ember/component';
import { computed, observer } from '@ember/object';
import { computed, observer, set } from '@ember/object';
import { run } from '@ember/runloop';
import { assign } from '@ember/polyfills';
import { guidFor, copy } from '@ember/object/internals';
Expand Down Expand Up @@ -76,6 +76,9 @@ export default Component.extend(WindowResizable, {
const { chart, _data, isNarrow } = this.getProperties('chart', '_data', 'isNarrow');
const width = this.$('svg').width();
const filteredData = _data.filter(d => d.value > 0);
filteredData.forEach((d, index) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I read a thing about preference of for ... of over forEach loops recently and have been trying to use them more. I certainly like they way they read, though that's not necessarily true of the transpiled code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always forget that JS has better for loops now.

set(d, 'index', index);
});

let slices = chart.select('.bars').selectAll('g').data(filteredData, d => d.label);
let sliceCount = filteredData.length;
Expand Down Expand Up @@ -114,8 +117,15 @@ export default Component.extend(WindowResizable, {

this.set('slices', slices);

const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`
const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`
const setWidth = d => {
// Remove a pixel from either side of the slice
let modifier = 2;
if (d.index === 0) modifier--; // But not the left side
if (d.index === sliceCount - 1) modifier--; // But not the right side
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These three lines are clever (in a good way).


return `${width * d.percent - modifier}px`;
};
const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`;

let hoverTargets = slices.selectAll('.target').data(d => [d]);
hoverTargets.enter()
Expand Down
4 changes: 4 additions & 0 deletions ui/app/components/freestyle/sg-distribution-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export default Component.extend({
clearInterval(this.get('timer'));
},

distributionBarDatum: computed(() => {
return [{ label: 'one', value: 10 }];
}),

distributionBarData: computed(() => {
return [
{ label: 'one', value: 10 },
Expand Down
7 changes: 7 additions & 0 deletions ui/app/templates/components/freestyle/sg-distribution-bar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,11 @@
</div>
{{/freestyle-annotation}}
{{/collection.variant}}
{{#collection.variant key="single bar"}}
{{#freestyle-usage 'distribution-bar-single'}}
<div class="block" style="height:50px; width:600px;">
{{distribution-bar data=distributionBarDatum}}
</div>
{{/freestyle-usage}}
{{/collection.variant}}
{{/freestyle-collection}}