Rename category to region internally

This is something that came up while I was working on the region persistence feature. ensemble-transposer uses the generic term "category" but as far as ensemble is concerned, they are always regions. Using the name region internally is clearer.
mozilla · Oct 12, 2018 · a27ecf7 · a27ecf7
1 parent 23b8a52
commit a27ecf7
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 44 deletions.
diff --git a/src/components/containers/DashboardContainer.js b/src/components/containers/DashboardContainer.js
@@ -9,12 +9,12 @@ import Dashboard from '../views/Dashboard';
 class DashboardContainer extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { activeCategory: null };
+        this.state = { activeRegion: null };
     }
 
-    _onCategoryChange = e => {
+    _onRegionChange = e => {
         this.setState({
-            activeCategory: e.target.value,
+            activeRegion: e.target.value,
         });
     }
 
@@ -36,7 +36,7 @@ class DashboardContainer extends React.Component {
                 />
             );
         } else if (dataFetch.fulfilled) {
-            const activeCategory = this.state.activeCategory || dataFetch.value.defaultCategory || dataFetch.value.categories[0];
+            const activeRegion = this.state.activeRegion || dataFetch.value.defaultCategory || dataFetch.value.categories[0];
             return (
                 <Dashboard
                     title={dataFetch.value.title}
@@ -45,10 +45,10 @@ class DashboardContainer extends React.Component {
                     dates={dataFetch.value.dates}
                     metrics={dataFetch.value.metrics}
                     summaryMetrics={dataFetch.value.summaryMetrics}
-                    categories={dataFetch.value.categories}
-                    activeCategory={activeCategory}
+                    regions={dataFetch.value.categories}
+                    activeRegion={activeRegion}
                     dashboardSource={this.props.source}
-                    onCategoryChange={this._onCategoryChange}
+                    onRegionChange={this._onRegionChange}
                 />
             );
         }

diff --git a/src/components/containers/MetricOverviewContainer.js b/src/components/containers/MetricOverviewContainer.js
@@ -72,5 +72,5 @@ class MetricOverviewContainer extends React.Component {
 }
 
 export default connect(props => ({
-    dataFetch: { url: `${props.dashboardSource}/${props.activeCategory}/${props.slug}` },
+    dataFetch: { url: `${props.dashboardSource}/${props.activeRegion}/${props.slug}` },
 }))(MetricOverviewContainer);
diff --git a/src/components/containers/SummaryMetricContainer.js b/src/components/containers/SummaryMetricContainer.js
@@ -54,7 +54,7 @@ class SummaryMetricContainer extends React.Component {
                 }
 
                 // Otherwise, if a chart has < otherThreshold representation, it
-                // should be grouped into an "Other" category.
+                // should be grouped into an "Other" region.
                 else {
                     otherValue += value;
                 }
@@ -115,5 +115,5 @@ class SummaryMetricContainer extends React.Component {
 }
 
 export default connect(props => ({
-    dataFetch: { url: `${props.dashboardSource}/${props.activeCategory}/${props.slug}` },
+    dataFetch: { url: `${props.dashboardSource}/${props.activeRegion}/${props.slug}` },
 }))(SummaryMetricContainer);
diff --git a/src/components/views/Dashboard.js b/src/components/views/Dashboard.js
@@ -23,7 +23,7 @@ export default props => {
                     key={summaryMetricSlug}
                     slug={summaryMetricSlug}
                     dashboardSource={props.dashboardSource}
-                    activeCategory={props.activeCategory}
+                    activeRegion={props.activeRegion}
                 />
             );
         });
@@ -62,17 +62,17 @@ export default props => {
         );
     }
 
-    let maybeCategory = null;
-    const sortedCategories = bumpSort(props.categories, 'All');
-    if (sortedCategories.length > 1) {
-        maybeCategory = (
-            <aside id="category">
+    let maybeRegion = null;
+    const sortedRegions = bumpSort(props.regions, 'All');
+    if (sortedRegions.length > 1) {
+        maybeRegion = (
+            <aside id="region">
                 <div className="labelled-selector">
-                    <label htmlFor="category-selector">Region</label>
-                    <select id="category-selector" name="category" value={props.activeCategory} onChange={props.onCategoryChange}>
-                        {sortedCategories.map(categoryName => (
-                            <option key={categoryName} value={categoryName}>
-                                {categoryName}
+                    <label htmlFor="region-selector">Region</label>
+                    <select id="region-selector" name="region" value={props.activeRegion} onChange={props.onRegionChange}>
+                        {sortedRegions.map(regionName => (
+                            <option key={regionName} value={regionName}>
+                                {regionName}
                             </option>
                         ))}
                     </select>
@@ -92,7 +92,7 @@ export default props => {
                         sectionKey={s.key}
                         title={s.title}
                         metrics={s.metrics}
-                        activeCategory={props.activeCategory}
+                        activeRegion={props.activeRegion}
                         dashboardSource={props.dashboardSource}
                     />
                 ))}
@@ -102,7 +102,7 @@ export default props => {
         body = (
             <MetricOverviewCollection
                 metrics={props.metrics}
-                activeCategory={props.activeCategory}
+                activeRegion={props.activeRegion}
                 dashboardSource={props.dashboardSource}
             />
         );
@@ -122,7 +122,7 @@ export default props => {
                 <header className="dashboard-header">
                     <h2 id="dashboard-title" className="contrasted">{props.title}</h2>
                     {maybeDescription}
-                    {maybeCategory}
+                    {maybeRegion}
                 </header>
                 {maybeSummaryMetrics}
                 <h3 id="metrics-heading">Metrics</h3>

diff --git a/src/components/views/DashboardSection.js b/src/components/views/DashboardSection.js
@@ -12,7 +12,7 @@ export default props => (
         </header>
         <MetricOverviewCollection
             metrics={props.metrics}
-            activeCategory={props.activeCategory}
+            activeRegion={props.activeRegion}
             sectionKey={props.sectionKey}
             dashboardSource={props.dashboardSource}
             inSection={true}

diff --git a/src/components/views/MetricOverviewCollection.js b/src/components/views/MetricOverviewCollection.js
@@ -19,7 +19,7 @@ export default props => (
                     slug={metricSlug}
                     identifier={identifier}
                     dashboardSource={props.dashboardSource}
-                    activeCategory={props.activeCategory}
+                    activeRegion={props.activeRegion}
                     inSection={props.inSection}
                 />
             );

diff --git a/src/components/views/css/Dashboard.css b/src/components/views/css/Dashboard.css
@@ -17,7 +17,7 @@
     margin: 0;
 }
 
-#category {
+#region {
     background: #fff;
     padding: 20px 0;
     z-index: 10;

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -7,14 +7,14 @@
  * > bumpSort(['group B', 'group A', 'group C', 'control'], 'control');
  * ['control', 'group A', 'group B', 'group C']
  */
-export function bumpSort(array, valueToBump) {
-  const arrayCopy = array.slice();
-  const valueIndex = arrayCopy.indexOf(valueToBump);
+export function bumpSort(arr, valueToBump) {
+  const arrCopy = arr.slice();
+  const valueIndex = arrCopy.indexOf(valueToBump);
 
-  if (valueIndex === -1) return arrayCopy.sort();
+  if (valueIndex === -1) return arrCopy.sort();
 
-  const arrayOfBumped = arrayCopy.splice(valueIndex, 1);
-  return arrayOfBumped.concat(arrayCopy.sort());
+  const arrOfBumped = arrCopy.splice(valueIndex, 1);
+  return arrOfBumped.concat(arrCopy.sort());
 }
 
 /**

diff --git a/src/tests/jest/Dashboard.test.js b/src/tests/jest/Dashboard.test.js
@@ -6,7 +6,7 @@ let requiredProps;
 beforeAll(() => {
     requiredProps = {
         metrics: [],
-        categories: [],
+        regions: [],
     };
 });
 

diff --git a/src/tests/nightwatch/dashboards/usage-behavior.js b/src/tests/nightwatch/dashboards/usage-behavior.js
@@ -69,20 +69,20 @@ module.exports = {
         linkWorks(browser, '.next-button a');
     },
 
-    'Page does not crash when category selector is used': browser => {
+    'Page does not crash when region selector is used': browser => {
         const effectWait = 5000;
 
-        browser.waitForElementVisible('#category-selector');
+        browser.waitForElementVisible('#region-selector');
 
-        browser.click('#category-selector option:nth-child(1)');
+        browser.click('#region-selector option:nth-child(1)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
 
-        browser.click('#category-selector option:nth-child(2)');
+        browser.click('#region-selector option:nth-child(2)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
 
-        browser.click('#category-selector option:nth-child(3)');
+        browser.click('#region-selector option:nth-child(3)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
     },

diff --git a/src/tests/nightwatch/dashboards/user-activity.js b/src/tests/nightwatch/dashboards/user-activity.js
@@ -66,20 +66,20 @@ module.exports = {
         linkWorks(browser, '.next-button a');
     },
 
-    'Page does not crash when category selector is used': browser => {
+    'Page does not crash when region selector is used': browser => {
         const effectWait = 10000;
 
-        browser.waitForElementVisible('#category-selector');
+        browser.waitForElementVisible('#region-selector');
 
-        browser.click('#category-selector option:nth-child(1)');
+        browser.click('#region-selector option:nth-child(1)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
 
-        browser.click('#category-selector option:nth-child(2)');
+        browser.click('#region-selector option:nth-child(2)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
 
-        browser.click('#category-selector option:nth-child(3)');
+        browser.click('#region-selector option:nth-child(3)');
         browser.pause(effectWait);
         browser.expect.element('#dashboard').to.be.visible;
     },