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/chart legend #13437

Merged
merged 12 commits into from
Dec 17, 2021
Merged

UI/chart legend #13437

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
199b8fc
fixes axes lines blend
hellobontempo Dec 14, 2021
9d620ee
add pixel conversions to variable css file
hellobontempo Dec 15, 2021
05dea73
reorganizes css file
hellobontempo Dec 15, 2021
1507426
adds legend
hellobontempo Dec 15, 2021
5f82b9c
fixes scales and makes room for legend
hellobontempo Dec 15, 2021
025c139
fixes grid for dual charts
hellobontempo Dec 15, 2021
29ea22c
made grid responsive
hellobontempo Dec 16, 2021
dcafe31
fixes legend styling
hellobontempo Dec 16, 2021
908ca55
fixes legend, removes ticks and fixes scale
hellobontempo Dec 16, 2021
3f3bba6
adjusts tooltip target
hellobontempo Dec 16, 2021
e17dda9
un-comment mouse events
hellobontempo Dec 17, 2021
b0c3200
remove console log
hellobontempo Dec 17, 2021
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
11 changes: 6 additions & 5 deletions ui/app/components/clients/horizontal-bar-charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ import { max, maxIndex } from 'd3-array';
// TODO: Move constants to helper

// SIZING CONSTANTS
const CHART_MARGIN = { top: 10, left: 137 }; // makes space for y-axis legend
const TRANSLATE = { down: 16 };
const CHAR_LIMIT = 18; // character count limit for y-axis labels to trigger truncating
const CHART_MARGIN = { top: 10, left: 95 }; // makes space for y-axis legend
const TRANSLATE = { down: 13 };
const CHAR_LIMIT = 15; // character count limit for y-axis labels to trigger truncating
const LINE_HEIGHT = 24; // each bar w/ padding is 24 pixels thick

// COLOR THEME:
Expand All @@ -37,7 +37,7 @@ const BACKGROUND_BAR_COLOR = '#EBEEF2';

const SAMPLE_DATA = [
{
label: 'namespace80/',
label: 'longlongsuperlongnamespace80/',
non_entity_tokens: 1696,
distinct_entities: 1652,
total: 3348,
Expand Down Expand Up @@ -116,7 +116,8 @@ export default class HorizontalBarChart extends Component {
// creates an array of data for each key name
// each array contains coordinates for each data bar
let stackFunction = stack().keys(this.chartLegend.map(l => l.key));
let dataset = args[0];
// let dataset = args[0];
let dataset = SAMPLE_DATA;
let stackedData = stackFunction(dataset);
let labelKey = this.labelKey;
let handleClick = this.args.onClick;
Expand Down
13 changes: 3 additions & 10 deletions ui/app/components/clients/total-client-usage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const DATA = [
const BAR_COLOR_DEFAULT = ['#8AB1FF', '#1563FF'];
const BACKGROUND_BAR_COLOR = '#EBEEF2';

const AXES_MARGIN = { xLeft: 10, xDown: 290 }; // makes space for y-axis legend
const AXES_MARGIN = { xLeft: 10, xDown: 290 };
const TRANSLATE = { none: 0, right: 10, down: -30 };

export default class TotalClientUsage extends Component {
Expand Down Expand Up @@ -105,20 +105,13 @@ export default class TotalClientUsage extends Component {
.tickSizeInner(-svgChartSize.width) // makes grid lines correct length
.tickFormat(formatNumbers);

yAxis(
chartSvg
.append('g')
.attr('transform', `translate(${TRANSLATE.right})`)
.attr('class', 'axes-lines')
);
yAxis(chartSvg.append('g').attr('transform', `translate(${TRANSLATE.right})`));

// customize x-axis
let xAxisGenerator = axisBottom(xScale);
let xAxis = chartSvg.append('g').call(xAxisGenerator);

xAxis
.attr('transform', `translate(${TRANSLATE.right}, ${AXES_MARGIN.xDown})`)
.attr('class', 'axes-lines');
xAxis.attr('transform', `translate(${TRANSLATE.right}, ${AXES_MARGIN.xDown})`);

chartSvg.selectAll('.domain').remove(); // remove domain lines

Expand Down
152 changes: 68 additions & 84 deletions ui/app/styles/core/charts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,19 @@
border: $light-border;
border-radius: $radius-large;
padding: $spacing-l $spacing-l $spacing-s $spacing-l;
margin-bottom: $spacing-m;
height: 547px; // TODO amend for specific chart heights
width: 100%;

// ARG TODO we can manage this using css grid
// > div.is-border {
// border: 0.3px solid $ui-gray-200;
// margin-bottom: $spacing-xxs;
// }
}
.single-chart {

hellobontempo marked this conversation as resolved.
Show resolved Hide resolved
// GRID LAYOUT //
.single-chart-grid {
display: grid;
grid-template-columns: 1fr 0.3fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 0.3fr 1fr 1fr 0.3fr 1fr;
hellobontempo marked this conversation as resolved.
Show resolved Hide resolved
grid-template-rows: repeat(5, 1fr);
}

.double-chart {
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 know BIG difference here..dual just sounded...better?

.dual-chart-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 1fr);
Expand All @@ -29,20 +26,6 @@
grid-row-start: 1;
box-shadow: inset 0 -1px 0 $vault-gray-200;
margin-bottom: $spacing-xl;

.chart-title {
font-size: $size-5;
font-weight: $font-weight-bold;
line-height: normal;
margin-bottom: $spacing-xs;
}
}

p.chart-description {
font-size: $size-8;
font-weight: $font-weight-normal;
color: $ui-gray-700;
margin-bottom: $spacing-xs;
}

.has-export {
Expand All @@ -53,7 +36,6 @@ p.chart-description {
text-align: right;
> button {
font-size: $size-8;

&:hover {
text-decoration: underline;
}
Expand Down Expand Up @@ -81,11 +63,6 @@ p.chart-description {
grid-row-start: 2;
grid-row-end: 5;
box-shadow: inset 0 -1px 0 $vault-gray-200;

h2.chart-title {
font-size: $size-5;
font-weight: $font-weight-bold;
}
}

.chart-container-right {
Expand All @@ -94,66 +71,25 @@ p.chart-description {
grid-row-start: 2;
grid-row-end: 5;
box-shadow: inset 0 -1px 0 $vault-gray-200;

h2.chart-title {
font-size: $size-5;
font-weight: $font-weight-bold;
}
}

.horizontal-bar-chart {
.tick > text {
font-weight: $font-weight-semibold;
font-size: $size-8;
}
> div.legend {
height: $spacing-l;
margin-top: $spacing-xs;
float: right;
}
}

.data-subTitle {
.chart-subTitle {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
font-size: $size-5;
font-weight: $font-weight-bold;
margin-bottom: $spacing-l;

> p {
font-size: $size-8;
font-weight: $font-weight-normal;
}
}

.data-one {
.data-details-top {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
font-size: $size-6;
font-weight: $font-weight-bold;
margin-bottom: $spacing-l;

> p {
font-size: $size-4;
font-weight: $font-weight-normal;
margin-top: $spacing-xs;
}
}

.data-two {
.data-details-bottom {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
font-size: $size-6;
font-weight: $font-weight-bold;

> p {
font-size: $size-4;
font-weight: $font-weight-normal;
margin-top: $spacing-xs;
}
}

.timestamp {
Expand All @@ -165,13 +101,58 @@ p.chart-description {
align-self: end;
}

.legend-container {
grid-row-start: 5;
grid-column-start: 3;
grid-column-end: 5;
height: $spacing-l;
align-self: center;
justify-self: center;
font-size: $size-9;
}

// FONT STYLES //

h2.chart-title {
font-weight: $font-weight-bold;
font-size: $size-5;
line-height: $spacing-l;
}

p.chart-description {
color: $ui-gray-700;
font-size: $body-size;
line-height: $spacing-xm;
margin-bottom: $spacing-xs;
}

p.chart-subtext {
color: $ui-gray-500;
font-size: $size-9;
line-height: $body-size;
margin-top: $spacing-xs;
}

h3.data-details {
font-weight: $font-weight-bold;
font-size: $size-9;
line-height: $body-size;
margin-bottom: $spacing-xs;
}

p.data-details {
font-weight: $font-weight-normal;
font-size: $size-4;
}

// MISC STYLES

.light-dot {
background-color: #bfd4ff;
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
padding-right: 10px;
}

.dark-dot {
Expand All @@ -182,14 +163,9 @@ p.chart-description {
display: inline-block;
}

.legend-container {
grid-row-start: 5;
grid-column-start: 3;
grid-column-end: 4;
height: $spacing-l;
align-self: center;
justify-self: center;
font-size: $size-9;
.legend-label {
padding-left: $spacing-xs;
padding-right: $spacing-xl;
}

.chart-tooltip {
Expand All @@ -212,15 +188,23 @@ p.chart-description {
left: calc(50% - 5px);
}

.axes-lines {
.has-grid {
g > text {
color: $ui-gray-500;
font-weight: $font-weight-semibold;
font-size: $size-8;
}

g > line {
color: $ui-gray-300;
// TODO: mix-blend doesn't work in firefox browser?
mix-blend-mode: darken;
color: $ui-gray-300;
}
}

.is-horizontal {
.tick > text {
font-weight: $font-weight-semibold;
font-size: $size-8;
}
}
18 changes: 9 additions & 9 deletions ui/app/styles/utils/_bulma_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ $family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto'
$family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
$family-primary: $family-sans;
$body-size: 14px;
$size-3: (24/14) + 0rem; // ~1.714rem
$size-4: 1.5rem;
$size-5: 1.25rem;
$size-7: (13/14) + 0rem; // ~.929rem
$size-8: (12/14) + 0rem; // ~.857rem
$size-9: 0.75rem;
$size-10: 0.5rem;
$size-11: 0.25rem;
$console-spacing: 1.5rem;
$size-3: (24/14) + 0rem; // ~1.714rem ~27px
$size-4: 1.5rem; // 24px
$size-5: 1.25rem; // 20px
$size-7: (13/14) + 0rem; // ~.929rem ~15px
$size-8: (12/14) + 0rem; // ~.857rem ~13.7px
$size-9: 0.75rem; // 12px
$size-10: 0.5rem; // 8px
$size-11: 0.25rem; // 4px
$console-spacing: 1.5rem; // 24px
$size-small: $size-8;
$font-weight-normal: 400;
$font-weight-semibold: 600;
Expand Down
1 change: 1 addition & 0 deletions ui/app/styles/utils/_spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-s: 12px;
$spacing-m: 16px;
$spacing-xm: 18px;
$spacing-l: 24px;
$spacing-xl: 36px;
$spacing-xxl: 48px;
23 changes: 12 additions & 11 deletions ui/app/templates/components/clients/dashboard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,17 +136,6 @@
{{!-- ARG TODO end of part that goes to Running Client --}}
{{#if this.showGraphs}}
{{!-- ARG TODO chart playground --}}
<Clients::TotalClientUsage
@title="Vault usage"
@description="This data can be used to understand how many total clients are using Vault each month for the time period selected above."
@subTitle="Total monthly clients"
@subDescription="Each unique client is counted once per month. This can help with capacity planning."
@dataOne="Average total clients per month"
@dataOneData="100"
@dataTwo="Average new clients per month"
@dataTwoData="4"
/>

<Clients::HorizontalBarCharts
@title="Attribution"
@description="This data can be used to understand where unique clients are originating. These are total unique clients for the time period selected above. In each case, we will show the top ten."
Expand All @@ -159,6 +148,18 @@
>
Export attribution data
</Clients::HorizontalBarCharts>

<Clients::TotalClientUsage
@title="Vault usage"
@description="This data can be used to understand how many total clients are using Vault each month for the time period selected above."
@subTitle="Total monthly clients"
@subText="Each unique client is counted once per month. This can help with capacity planning."
@chartLegend={{this.chartLegend}}
@dataOne="Average total clients per month"
@dataOneData="100"
@dataTwo="Average new clients per month"
@dataTwoData="4"
/>
{{!-- ARG TODO this is the search select from the old graph that can be reused --}}
{{!-- <div class="column">
<div class="card">
Expand Down
Loading