New: Add number format selector component

yavin-dev · May 1, 2018 · 0f18ce1 · 0f18ce1
1 parent c3cdd20
commit 0f18ce1
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 178 deletions.
diff --git a/packages/visualizations/addon/components/number-format-selector.js b/packages/visualizations/addon/components/number-format-selector.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2018, Yahoo Holdings Inc.
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ *
+ * Usage:
+ *  {{number-format-selector
+ *    format=format
+ *    onUpdateFormat = (action 'onUpdateFormat')
+ *  }}
+ */
+
+import { get, computed } from '@ember/object';
+import { A } from '@ember/array';
+import Component from '@ember/component';
+import layout from '../templates/components/number-format-selector';
+import NumberFormats from 'navi-visualizations/utils/enums/number-formats';
+
+export default Component.extend({
+  layout,
+
+  /**
+   * @property {Array} classNames
+   */
+  classNames: ['number-format-selector'],
+
+  /**
+   * @property {Array} predefinedFormats
+   * list of format types shown to the user
+   */
+  predefinedFormats: NumberFormats,
+
+  /**
+   * @property {String} customFormat
+   * returns empty string if the current format
+   * is one of the predefined formats
+   */
+  customFormat: computed('format', function () {
+    let predefinedFormats = A(get(this, 'predefinedFormats')),
+        currentFormat = get(this, 'format'),
+        match = predefinedFormats.findBy('format', currentFormat);
+    return match ? '' : currentFormat;
+  }),
+
+  actions: {
+    /**
+     * @action updateFormat
+     */
+    updateFormat(format) {
+      this.attrs.onUpdateFormat({ format });
+    },
+
+    /**
+     * @action clearFormat
+     * format is cleared after selecting the custom format type
+     */
+    clearFormat() {
+      this.attrs.onUpdateFormat({ format: '' });
+    }
+  }
+});
diff --git a/packages/visualizations/addon/components/visualization-config/metric-label.js b/packages/visualizations/addon/components/visualization-config/metric-label.js
@@ -1,48 +1,24 @@
 /**
- * Copyright 2017, Yahoo Holdings Inc.
+ * Copyright 2018, Yahoo Holdings Inc.
  * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
  *
  * Usage:
  *  {{visualization-config/metric-label
  *    request=request
  *    response=response
  *    options=options
+ *    onUpdateConfig=(action 'onUpdateConfig')
  *  }}
  */
-import Ember from 'ember';
+import Component from '@ember/component';
 import layout from '../../templates/components/visualization-config/metric-label';
 
-const { get, computed } = Ember;
-
-export default Ember.Component.extend({
+export default Component.extend({
   /**
    * @property {Object} layout
    */
   layout,
 
-  /**
-   * @property {Array} predefinedFormats
-   * list of format types shown to the user
-   */
-  predefinedFormats: [
-    {name: 'Number', format: '0,0.00', class: "metric-label-config__radio-number"},
-    {name: 'Decimal', format: '0.000', class: "metric-label-config__radio-decimal"},
-    {name: 'Nice Number', format: '0.0a', class: "metric-label-config__radio-nice-number"},
-    {name: 'Money', format: '$0,0[.]00', class: "metric-label-config__radio-money"}
-  ],
-
-  /**
-   * @property {String} customFormat
-   * returns empty string if the current format
-   * is one of the predefined formats
-   */
-  customFormat: computed('options.format', function() {
-    let predefinedFormats = Ember.A(get(this, 'predefinedFormats')),
-        currentFormat = get(this, 'options.format'),
-        match = predefinedFormats.findBy('format', currentFormat);
-    return match ? '' : currentFormat;
-  }),
-
   /**
    * @property {Array} classNames
    */
@@ -54,21 +30,6 @@ export default Ember.Component.extend({
      */
     updateLabel(description) {
       this.sendAction('onUpdateConfig', { description });
-    },
-
-    /**
-     * @action updateFormat
-     */
-    updateFormat(format) {
-      this.sendAction('onUpdateConfig', { format });
-    },
-
-    /**
-     * @action clearFormat
-     * format is cleared after selecting the custom format type
-     */
-    clearFormat() {
-      this.sendAction('onUpdateConfig', { format: '' });
     }
   }
 });
diff --git a/packages/visualizations/addon/models/metric-label.js b/packages/visualizations/addon/models/metric-label.js
@@ -3,11 +3,11 @@
  * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
  */
 import VisualizationBase from './visualization';
-import MetricLabelConfig from '../components/visualization-config/metric-label';
 import { buildValidations, validator } from 'ember-cp-validations';
 import Ember from 'ember';
 import DS from 'ember-data';
 import { metricFormat } from 'navi-data/helpers/metric-format';
+import NumberFormats from 'navi-visualizations/utils/enums/number-formats';
 
 const { computed, set, get } = Ember;
 
@@ -43,7 +43,7 @@ export default VisualizationBase.extend(Validations, {
     let metrics = Ember.A( get(request, 'metrics') ),
         metric =  get(metrics, 'firstObject').toJSON(),
         description =  metricFormat(get(metrics, 'firstObject'), get(metrics, 'firstObject.metric.longName')),
-        allFormats = get(MetricLabelConfig.proto(), 'predefinedFormats'),
+        allFormats = NumberFormats,
         format = get(this, 'metadata.format') || get(allFormats[0], 'format');
 
     set(this, 'metadata', { metric, description, format });

diff --git a/packages/visualizations/addon/templates/components/number-format-selector.hbs b/packages/visualizations/addon/templates/components/number-format-selector.hbs
@@ -0,0 +1,52 @@
+{{!-- Copyright 2018, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
+<div class="number-format-selector__section-header">
+    Format Type
+</div>
+<div class="number-format-selector__format-list number-format-selector__section">
+    {{#each predefinedFormats as |predefinedFormat|}}
+        <div class={{concat 'number-format-selector__radio-' (dasherize predefinedFormat.name)}}>
+            {{#radio-button
+                name='format'
+                groupValue=(readonly format)
+                changed=(action 'updateFormat' predefinedFormat.format)
+                value=predefinedFormat.format
+            }}
+                {{predefinedFormat.name}}
+            {{/radio-button}}
+        </div>
+    {{/each}}
+    <div class="number-format-selector__radio-custom">
+        {{#radio-button
+            name='format'
+            groupValue=(readonly format)
+            value=customFormat
+            changed=(action 'clearFormat')
+        }}
+            Custom
+        {{/radio-button}}
+    </div>
+</div>
+
+<div class="number-format-selector__section-header">
+    Format
+</div>
+<div class="number-format-selector__format number-format-selector__section">
+    {{input
+        autofocus=true
+        class='number-format-selector__format-input number-format-selector__text-input'
+        name='format-input'
+        type='text'
+        maxlength="22"
+        placeholder='Raw Format'
+        value=format
+        enter='updateFormat'
+        focus-out='updateFormat'
+    }}
+</div>
+<a class='number-format-selector__doc-link'
+    href='http://numeraljs.com/#format'
+    target='_blank'
+>
+    {{navi-icon 'life-ring' class='number-format-selector__icon-documentation'}}
+    Format Documentation
+</a>
diff --git a/packages/visualizations/addon/templates/components/visualization-config/metric-label.hbs b/packages/visualizations/addon/templates/components/visualization-config/metric-label.hbs
@@ -1,4 +1,4 @@
-{{!-- Copyright 2017, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
+{{!-- Copyright 2018, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
 <div class="metric-label-config">
     <div class="metric-label-config__section-header">
         Label
@@ -14,55 +14,5 @@
             placeholder='No Label'
         }}
     </div>
-    <div class="metric-label-config__section-header">
-        Format Type
-    </div>
-    <div class="metric-label-config__format-list metric-label-config__section">
-        {{#each predefinedFormats as |format|}}
-            <div class={{format.class}}>
-                {{#radio-button
-                    name='format'
-                    groupValue=(readonly options.format)
-                    changed=(action 'updateFormat' format.format)
-                    value=format.format
-                }}
-                    {{format.name}}
-                {{/radio-button}}
-            </div>
-        {{/each}}
-        <div class="metric-label-config__radio-custom">
-            {{#radio-button
-                name='format'
-                groupValue=(readonly options.format)
-                value=customFormat
-                changed=(action 'clearFormat')
-            }}
-                Custom
-            {{/radio-button}}
-        </div>
-    </div>
-
-    <div class="metric-label-config__section-header">
-        Format
-    </div>
-    <div class="metric-label-config__format metric-label-config__section">
-        {{input
-            autofocus=true
-            class='metric-label-config__format-input metric-label-config__text-input'
-            name='format-input'
-            type='text'
-            maxlength="22"
-            placeholder='Raw Format'
-            value=options.format
-            enter='updateFormat'
-            focus-out='updateFormat'
-        }}
-    </div>
-    <a class='metric-label-config__doc-link'
-       href='http://numeraljs.com/#format'
-       target='_blank'
-    >
-        {{navi-icon 'life-ring' class='metric-label-config__icon-documentation'}}
-        Format Documentation
-    </a>
+    {{number-format-selector format=options.format onUpdateFormat=onUpdateConfig}}
 </div>
diff --git a/packages/visualizations/addon/utils/enums/number-formats.js b/packages/visualizations/addon/utils/enums/number-formats.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright 2018, Yahoo Holdings Inc.
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+import { A } from '@ember/array';
+
+/**
+ * List of number formats
+ */
+export default A([
+  { name: 'Number', format: '0,0.00' },
+  { name: 'Decimal', format: '0.000' },
+  { name: 'Nice Number', format: '0.0a' },
+  { name: 'Money', format: '$0,0[.]00' }
+]);
diff --git a/packages/visualizations/app/components/number-format-selector.js b/packages/visualizations/app/components/number-format-selector.js
@@ -0,0 +1 @@
+export { default } from 'navi-visualizations/components/number-format-selector';
diff --git a/packages/visualizations/app/styles/navi-visualizations/components/index.less b/packages/visualizations/app/styles/navi-visualizations/components/index.less
@@ -8,4 +8,5 @@
 @import 'chart-series-collection';
 @import 'series-selector';
 @import 'navi-table-sort-icon';
+@import 'number-format-selector';
 @import 'subtotal-dimension-select-trigger';
diff --git a/...ages/visualizations/app/styles/navi-visualizations/components/number-format-selector.less b/...ages/visualizations/app/styles/navi-visualizations/components/number-format-selector.less
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2018, Yahoo Holdings Inc.
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+.number-format-selector {
+    &__format-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__format {
+        height: @report-form-height;
+    }
+
+    &__doc-link {
+        font-size: 15px;
+    }
+
+    &__format-input {
+        font-size: @font-size-base-large;
+    }
+
+    &__section {
+        .config-section();
+    }
+
+    &__text-input {
+        font-family: @font-family-thin;
+        line-height: @navi-ideal-line-height;
+        overflow-y: hidden;
+        padding: 0;
+    }
+}
diff --git a/...alizations/app/styles/navi-visualizations/components/visualization-config/goal-gauge.less b/...alizations/app/styles/navi-visualizations/components/visualization-config/goal-gauge.less
@@ -16,7 +16,7 @@
 }
 
 .goal-gauge-config__goal-input, .goal-gauge-config__baseline-input {
-  .metric-label-config__format-input;
+  font-size: @font-size-base-large;
 }
 
 .goal-gauge-config__section {

diff --git a/...izations/app/styles/navi-visualizations/components/visualization-config/metric-label.less b/...izations/app/styles/navi-visualizations/components/visualization-config/metric-label.less
@@ -5,30 +5,20 @@
 
 .metric-label-config {
   .config-container();
-}
 
-.metric-label-config__format-list {
-    display: flex;
-    flex-direction: column;
+  .number-format-selector__section-header {
+    .metric-label-config__section-header;
+  }
 }
 
-.metric-label-config__description,
-.metric-label-config__format {
+.metric-label-config__description {
     height: @report-form-height;
 }
 
 .metric-label-config__description-input {
     font-size: @font-size-base-large;
 }
 
-.metric-label-config__doc-link {
-  font-size: 15px;
-}
-
-.metric-label-config__format-input {
-    font-size: @font-size-base-large;
-}
-
 .metric-label-config__section {
     .config-section();
 }

diff --git a/packages/visualizations/app/utils/enums/number-formats.js b/packages/visualizations/app/utils/enums/number-formats.js
@@ -0,0 +1 @@
+export { default } from 'navi-visualizations/utils/enums/number-formats';
diff --git a/packages/visualizations/blueprints/navi-visualizations/index.js b/packages/visualizations/blueprints/navi-visualizations/index.js
@@ -26,6 +26,7 @@ module.exports = {
         { name: 'ember-power-select',           target: '1.10.4' },
         { name: 'ember-radio-button',           target: '1.2.1' },
         { name: 'ember-sortable',               target: '1.10.0' },
+        { name: 'ember-cli-string-helpers',     target: '1.8.1' },
         { name: 'ember-tether',                 target: '0.4.1' },
         { name: 'ember-toggle',                 target: '5.2.1' },
         { name: 'ember-tooltips',               target: '2.9.2' },

diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json
@@ -42,6 +42,7 @@
     "ember-cli-qunit": "^4.2.1",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
+    "ember-cli-string-helpers": "^1.8.1",
     "ember-cli-uglify": "^2.0.0",
     "ember-collection": "1.0.0-alpha.7",
     "ember-composable-helpers": "^2.1.0",