From ece79f16953c5ac00b6d50466fb653b161b2df96 Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Thu, 13 Jan 2022 10:00:50 -0800 Subject: [PATCH] UI/Clients single month template (#13635) * create SingleMonth template * updates stattext styling * add flex helper and fix header margin * rename variable in formatNumber helper * update templates with size-specific margins * clarify class name * fix jsdoc param type --- ui/app/styles/components/stat-text.scss | 15 +++++++-- ui/app/styles/core/charts.scss | 5 ++- ui/app/styles/core/helpers.scss | 4 +++ .../components/clients/attribution.hbs | 2 +- .../components/clients/monthly-usage.hbs | 2 +- .../components/clients/running-total.hbs | 2 +- .../components/clients/single-month.hbs | 33 +++++++++++++++++++ ui/lib/core/addon/components/stat-text.js | 4 +-- ui/lib/core/addon/helpers/format-number.js | 8 ++--- .../addon/templates/components/bar-chart.hbs | 2 +- 10 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 ui/app/templates/components/clients/single-month.hbs diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss index 129771435..4059545ad 100644 --- a/ui/app/styles/components/stat-text.scss +++ b/ui/app/styles/components/stat-text.scss @@ -1,6 +1,6 @@ .stat-text-container { line-height: normal; - height: 100%; + max-height: 100%; display: flex; flex-direction: column; @@ -17,7 +17,6 @@ font-weight: $font-weight-normal; color: $ui-gray-700; line-height: inherit; - flex-grow: 1; } .stat-value { font-size: $size-3; @@ -104,3 +103,15 @@ } } } + +.has-gap { + gap: $spacing-xxl; +} + +.stat-text-flex-wrapper { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + column-gap: 70px; + row-gap: 20px; +} diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss index 4de34306c..6bda0f123 100644 --- a/ui/app/styles/core/charts.scss +++ b/ui/app/styles/core/charts.scss @@ -32,7 +32,10 @@ grid-column-end: span col4-end; grid-row-start: 1; box-shadow: inset 0 -1px 0 $vault-gray-200; - margin-bottom: $spacing-xl; + + > h2 { + padding-bottom: $spacing-xs; + } } .has-export { diff --git a/ui/app/styles/core/helpers.scss b/ui/app/styles/core/helpers.scss index 712554e02..17fdd97ad 100644 --- a/ui/app/styles/core/helpers.scss +++ b/ui/app/styles/core/helpers.scss @@ -75,6 +75,10 @@ display: flex !important; justify-content: flex-end; } +.is-flex-start { + display: flex !important; + justify-content: flex-start; +} .is-flex-full { flex-basis: 100%; } diff --git a/ui/app/templates/components/clients/attribution.hbs b/ui/app/templates/components/clients/attribution.hbs index 3bb5040c5..871b190e4 100644 --- a/ui/app/templates/components/clients/attribution.hbs +++ b/ui/app/templates/components/clients/attribution.hbs @@ -1,5 +1,5 @@
-
+

{{@title}}

{{this.chartText.description}}

diff --git a/ui/app/templates/components/clients/monthly-usage.hbs b/ui/app/templates/components/clients/monthly-usage.hbs index 6ae22a513..aea831438 100644 --- a/ui/app/templates/components/clients/monthly-usage.hbs +++ b/ui/app/templates/components/clients/monthly-usage.hbs @@ -1,5 +1,5 @@
-
+

{{@title}}

{{#if @description}}

{{@description}}

diff --git a/ui/app/templates/components/clients/running-total.hbs b/ui/app/templates/components/clients/running-total.hbs index c41814e1b..53049b448 100644 --- a/ui/app/templates/components/clients/running-total.hbs +++ b/ui/app/templates/components/clients/running-total.hbs @@ -1,6 +1,6 @@
-
+

{{@title}}

{{@description}}

diff --git a/ui/app/templates/components/clients/single-month.hbs b/ui/app/templates/components/clients/single-month.hbs new file mode 100644 index 000000000..49ce09a17 --- /dev/null +++ b/ui/app/templates/components/clients/single-month.hbs @@ -0,0 +1,33 @@ +
+
+

{{@month}}

+
+ +
+
+ +
+ + +
+
+ +
+ +
+ + +
+
+
+
\ No newline at end of file diff --git a/ui/lib/core/addon/components/stat-text.js b/ui/lib/core/addon/components/stat-text.js index ae4c86a67..dfa5f4fa9 100644 --- a/ui/lib/core/addon/components/stat-text.js +++ b/ui/lib/core/addon/components/stat-text.js @@ -4,10 +4,10 @@ * * @example * ```js - * + * * ``` * @param {string} label=null - The label for the statistic - * @param {string} value=null - Value passed in, usually a number or statistic + * @param {number} value=null - Value passed in, usually a number or statistic * @param {string} size=null - Sizing changes whether or not there is subtext. If there is subtext 's' and 'l' are valid sizes. If no subtext, then 'm' is also acceptable. * @param {string} [subText] - SubText is optional and will display below the label */ diff --git a/ui/lib/core/addon/helpers/format-number.js b/ui/lib/core/addon/helpers/format-number.js index 1d863c5c2..51bad2971 100644 --- a/ui/lib/core/addon/helpers/format-number.js +++ b/ui/lib/core/addon/helpers/format-number.js @@ -1,11 +1,11 @@ import { helper } from '@ember/component/helper'; -export function formatNumber([number]) { - if (typeof number !== 'number') { - return number; +export function formatNumber([value]) { + if (typeof value !== 'number') { + return value; } // formats a number according to the locale - return new Intl.NumberFormat().format(number); + return new Intl.NumberFormat().format(value); } export default helper(formatNumber); diff --git a/ui/lib/core/addon/templates/components/bar-chart.hbs b/ui/lib/core/addon/templates/components/bar-chart.hbs index 4d7af18cd..8e4769c40 100644 --- a/ui/lib/core/addon/templates/components/bar-chart.hbs +++ b/ui/lib/core/addon/templates/components/bar-chart.hbs @@ -1,5 +1,5 @@
-
+

{{@title}}

{{#if @description}}