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

@@ -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;
+}

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 {

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%;
 }

ui/app/templates/components/clients/attribution.hbs

@@ -1,5 +1,5 @@
 <div class="chart-wrapper dual-chart-grid">
-  <div class="chart-header has-export">
+  <div class="chart-header has-export has-bottom-margin-m">
     <div class="header-left">
       <h2 class="chart-title">{{@title}}</h2>
       <p class="chart-description">{{this.chartText.description}}</p>

ui/app/templates/components/clients/monthly-usage.hbs

@@ -1,5 +1,5 @@
 <div class="chart-wrapper single-chart-grid">
-  <div class="chart-header">
+  <div class="chart-header has-bottom-margin-xl">
     <h2 class="chart-title">{{@title}}</h2>
     {{#if @description}}
       <p class="chart-description">{{@description}}</p>

ui/app/templates/components/clients/running-total.hbs

@@ -1,6 +1,6 @@
 <div class="chart-wrapper stacked-charts">
   <div class="single-chart-grid">
-    <div class="chart-header">
+    <div class="chart-header has-bottom-margin-xl">
       <h2 class="chart-title">{{@title}}</h2>
       <p class="chart-description">{{@description}}</p>
     </div>

ui/app/templates/components/clients/single-month.hbs

@@ -0,0 +1,33 @@
+<div class="chart-wrapper">
+  <div class="chart-header has-bottom-margin-l">
+    <h2 class="chart-title">{{@month}}</h2>
+  </div>
+
+  <div class="stat-text-flex-wrapper">
+    <div class="column-left">
+      <StatText
+        @label="New clients"
+        @value={{2376}}
+        @size="l"
+        @subText="This is the number of clients which were created in Vault for the first time in the selected month."
+      />
+      <div class="has-top-margin-l is-flex-start has-gap">
+        <StatText @label={{capitalize @chartLegend.0.label}} @value={{521}} @size="m" />
+        <StatText @label={{capitalize @chartLegend.1.label}} @value={{1855}} @size="m" />
+      </div>
+    </div>
+
+    <div class="column-right">
+      <StatText
+        @label="Total monthly clients"
+        @value={{3013}}
+        @size="l"
+        @subText="This is the number of total clients which used Vault for the given month, both new and previous."
+      />
+      <div class="has-top-margin-l is-flex-start has-gap">
+        <StatText @label={{capitalize @chartLegend.0.label}} @value={{521}} @size="m" />
+        <StatText @label={{capitalize @chartLegend.1.label}} @value={{1855}} @size="m" />
+      </div>
+    </div>
+  </div>
+</div>

ui/lib/core/addon/components/stat-text.js

@@ -4,10 +4,10 @@
  *
  * @example
  * ```js
- * <StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
+ * <StatText @label="Active Clients" @value="4,198" @size="l" @subText="These are the active client counts"/>
  * ```
  * @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
  */

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

ui/lib/core/addon/templates/components/bar-chart.hbs

@@ -1,5 +1,5 @@
 <div data-test-bar-chart class="bar-chart-wrapper">
-  <div class="chart-header">
+  <div class="chart-header has-bottom-margin-l">
     <div class="header-left">
       <h2 class="chart-title">{{@title}}</h2>
       {{#if @description}}