From 5cdf84354656efb4fd7718d84d8d30f3c26aab95 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Tue, 30 Jun 2020 13:00:26 -0400
Subject: [PATCH 1/5] WIP

---
 fec/data/templates/browse-data.jinja          |   5 +-
 .../partials/browse-data/committees.jinja     |  30 ++
 fec/fec/static/js/modules/pac-comparator.js   | 300 ++++++++++++++++++
 fec/webpack.config.js                         |   3 +-
 4 files changed, 335 insertions(+), 3 deletions(-)
 create mode 100644 fec/fec/static/js/modules/pac-comparator.js

diff --git a/fec/data/templates/browse-data.jinja b/fec/data/templates/browse-data.jinja
index d31f7abf75..5f66c87ee6 100644
--- a/fec/data/templates/browse-data.jinja
+++ b/fec/data/templates/browse-data.jinja
@@ -180,6 +180,7 @@
 {% endblock %}
 
 {% block scripts %}
-  <script src="{{ asset_for_js('dataviz-common.js') }}"></script>
-  <script src="{{ asset_for_js('data-browse-data.js') }}"></script>
+  <script type="text/javascript" src="{{ asset_for_js('dataviz-common.js') }}"></script>
+  <script type="text/javascript" src="{{ asset_for_js('data-browse-data.js') }}"></script>
+  <script type="text/javascript" src="{{ asset_for_js('pac-comparator.js') }}"></script>
 {% endblock %}
diff --git a/fec/data/templates/partials/browse-data/committees.jinja b/fec/data/templates/partials/browse-data/committees.jinja
index 8cc94a0b05..d408a082d1 100644
--- a/fec/data/templates/partials/browse-data/committees.jinja
+++ b/fec/data/templates/partials/browse-data/committees.jinja
@@ -2,6 +2,36 @@
   <h2>Committees</h2>
   <p>The term <span class="term" data-term="political committee">committee</span> encompasses several different political groups that receive and spend money in federal elections.</p>
   <h3>Search or browse data</h3>
+  <div class="content__section--ruled t-sans" >
+    <div id="pac-comparator">
+      <h3>PAC Comparator</h3>
+    </div>
+    <style>
+      .committees-holder {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .committee-details {
+
+      }
+      .committee-details h4 {
+        margin-top: 0;
+      }
+      .controls {
+        display: flex;
+        justify-content: space-between;
+      }
+      .committee-details:first-child .btn-lft {
+        pointer-events: none;
+        opacity: .5;
+      }
+      .committee-details:last-child .btn-rgt {
+        pointer-events: none;
+        opacity: .5;
+      }
+    </style>
+  </div>
   <div class="content__section--ruled t-sans">
     <ul>
       <li>
diff --git a/fec/fec/static/js/modules/pac-comparator.js b/fec/fec/static/js/modules/pac-comparator.js
new file mode 100644
index 0000000000..700229361c
--- /dev/null
+++ b/fec/fec/static/js/modules/pac-comparator.js
@@ -0,0 +1,300 @@
+// Testing
+
+import { buildUrl } from './helpers';
+import Vue from 'vue/dist/vue.js';
+import typeahead from './typeahead';
+
+Vue.component('typeahead-control', {
+  template: `
+    <div class="combo combo--search--mini filter__typeahead">
+      <ul class="dropdown__selected"></ul>
+      <input id="pac-comparator-typeahead" type="text" class="combo__input">
+      <button class="combo__button button--search button--standard" type="button">
+        <span class="u-visually-hidden">Search</span>
+      </button>
+    </div>`
+});
+
+Vue.component('committee-data', {
+  props: {
+    slotID: {
+      type: Number,
+      required: true
+    },
+    committeeSummary: {
+      type: Object,
+      required: false
+    },
+    isEmpty: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      results_typeAhead_default: [
+        {
+          name: '',
+          id: 'C00703975',
+          is_active: true,
+          type: 'committee'
+        }
+      ],
+      results_default: [{}],
+      results_typeAhead: {},
+      results: [{}],
+      isLoading: false,
+      testingLoopCount: 0
+    };
+  },
+  template: `<aside
+    class="committee-details">
+    <div class="controls">
+      <button class="btn-lft" v-on:click="handleButtonClick('left', $event)">◀️</button>
+      <button class="btn-cls" v-on:click="handleButtonClick('clear', $event)">❎</button>
+      <button class="btn-rgt" v-on:click="handleButtonClick('right', $event)">▶️</button>
+    </div>
+    <h1>{{ this.committeeSummary.name }}</h1>
+    <h4>({{ this.committeeSummary.id }})</h4>
+    <table>
+      <tbody>
+        <tr v-if="this.isLoading == true">
+          <td colspan="2" class="overlay__container">
+            <div class="overlay is-loading">&nbsp;</div>
+          </td>
+        </tr>
+        <tr v-for="(value, name) in this.results[0]">
+          <td class="t-bold" style="overflow:hidden">{{name}}: </td><td class="t-mono">{{ formatAsCurrency(value) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </aside>`,
+  beforeMount: function() {
+    this.results = this.results_default;
+    // this.updateCommittee(this.defaultCommitteeID, this.defaultCommitteeName);
+  },
+  beforeUpdate: function(e) {
+    // TODO: this gets called again and again. TODO: make it only load more data if the committee id has changed
+    console.log('component updated(): ', e);
+    this.getUpdatedCommitteeDetails();
+    // console.log('components updated.$nextTick');
+    // this.$nextTick(function() {
+    //   console.log('components updated.$nextTick');
+    // })
+  },
+  methods: {
+    handleButtonClick: function(buttonActionID, e) {
+      this.$emit('committee-header-click', buttonActionID, this.slotID, e);
+    },
+    formatAsCurrency: function(passedValue) {
+      if (!passedValue) return passedValue;
+      // if null, just return and be done
+      else if (isNaN(passedValue)) return passedValue;
+      // if it's not a number, return it
+      else if (
+        passedValue.toString().indexOf('.') !=
+        passedValue.toString().length - 3
+      )
+        return passedValue;
+      // if there's no decimal + two characters, return it because it's probably not money
+      else return '$' + passedValue.toLocaleString(); // otherwise format it as money
+      // (
+      // '$' +
+      // (roundToWhole
+      //   ? Math.round(passedValue).toLocaleString()
+      // : passedValue.toLocaleString())
+      // );
+    },
+    getUpdatedCommitteeDetails: function() {
+      console.log('getUpdatedCommitteeDetails()');
+      console.log('this.testingLoopCount: ', this.testingLoopCount);
+      if (
+        !this.isLoading &&
+        this.committeeSummary.id != this.results_typeAhead_default.id &&
+        this.testingLoopCount < 2
+      ) {
+        console.log('  if()');
+        this.testingLoopCount++; // TODO remove this
+        let instance = this;
+        instance.isLoading = true;
+        window
+          .fetch(
+            buildUrl(
+              ['committee', this.committeeSummary.id, 'totals'],
+              {
+                election_year: '2020',
+                per_page: 100,
+                sort_null_only: false,
+                sort_hide_null: false,
+                sort_nulls_last: false,
+                page: 1
+              },
+              {
+                cache: 'no-cache',
+                mode: 'cors',
+                signal: null
+              }
+            )
+          )
+          .then(function(response) {
+            console.log('fetch.then response: ', response);
+            if (response.status !== 200)
+              throw new Error(
+                'The network rejected the candidate details request.'
+              );
+            // else if (response.type == 'cors') throw new Error('CORS error');
+            response.json().then(data => {
+              instance.claimUpdatedCommitteeDetails(data);
+            });
+          }); // /then
+      } // /if
+    }, // /getUpdatedDetails
+    claimUpdatedCommitteeDetails: function(data) {
+      console.log('claimUpdatedCommitteeDetails(): ', data);
+      this.results = data.results;
+      console.log('claimUpdatedCommitteeDetails(): ', data);
+      this.isLoading = false;
+    }
+  } // /methods
+});
+
+new Vue({
+  el: '#pac-comparator',
+  data: {
+    showingMaxCommittees: false,
+    maxCommitteesToCompare: 2,
+    committeeSlots: [
+      {
+        slotID: 0,
+        cSummary: { name: 'Committee 0' },
+        isEmpty: true,
+        displayOrder: 0
+      },
+      {
+        slotID: 1,
+        cSummary: { name: 'Committee 1' },
+        isEmpty: true,
+        displayOrder: 1
+      },
+      {
+        slotID: 2,
+        cSummary: { name: 'Committee 2' },
+        isEmpty: true,
+        displayOrder: 2
+      },
+      {
+        slotID: 3,
+        cSummary: { name: 'Committee 3' },
+        isEmpty: true,
+        displayOrder: 3
+      }
+    ],
+    el_typeahead: ''
+  },
+  template: `<div>
+    <h3>PAC Comparator</h3>
+    <typeahead-control
+      :is-disabled="showingMaxCommittees"
+    ></typeahead-control>
+    <div class="committees-holder">
+      <committee-data
+        v-for="(committee, index) in committeeSlots"
+        v-if="index < maxCommitteesToCompare"
+        :cID="committee.cID"
+        :committeeSummary="committee.cSummary"
+        :isEmpty="committee.isEmpty"
+        :slotID="committee.slotID"
+        :key="committee.displayOrder"
+        @committee-header-click="handleCommitteeHeaderClick"
+      >
+      </committee-data>
+    </div>
+  </div>`,
+  methods: {
+    handleTypeaheadSelect: function(jQueryEvent, e, typeaheadType) {
+      this.setNewCommittee(e);
+    },
+    handleCommitteeHeaderClick: function(
+      buttonActionID,
+      clickedCommitteeSlotID
+    ) {
+      for (let i = 0; i < this.committeeSlots.length; i++) {
+        if (this.committeeSlots[i].slotID == clickedCommitteeSlotID) {
+          if (buttonActionID == 'clear') {
+            this.resetCommitteeSlot(this.committeeSlots[i]);
+          } else {
+            if (buttonActionID == 'left') {
+              this.committeeSlots[i - 1].displayOrder++;
+              this.committeeSlots[i].displayOrder--;
+            } else if (buttonActionID == 'right') {
+              this.committeeSlots[i].displayOrder++;
+              this.committeeSlots[i + 1].displayOrder--;
+            }
+            this.committeeSlots.sort(function(a, b) {
+              return a.displayOrder - b.displayOrder;
+            });
+            break;
+          }
+        }
+      }
+    },
+    setNewCommittee: function(typeaheadEvent) {
+      let haveSetIt = false;
+      for (
+        let i = 0;
+        i < this.committeeSlots.length && i < this.maxCommitteesToCompare;
+        i++
+      ) {
+        if (this.committeeSlots[i].isEmpty == true && haveSetIt == false) {
+          this.committeeSlots[i].cSummary = typeaheadEvent;
+          this.committeeSlots[i].isEmpty = false;
+          haveSetIt = true;
+        }
+      }
+      this.typeahead_updateActiveState();
+    },
+    resetCommitteeSlot: function(committeeSlotToClear) {
+      let toClear = committeeSlotToClear;
+      toClear.isEmpty = true;
+      toClear.cSummary = {
+        name: '—',
+        id: 'C00703975',
+        is_active: true,
+        type: 'committee'
+      };
+      this.typeahead_updateActiveState();
+    },
+    typeahead_updateActiveState: function() {
+      let committeesShowing = 0;
+      for (
+        let i = 0;
+        i < this.committeeSlots.length && i < this.maxCommitteesToCompare;
+        i++
+      ) {
+        if (!this.committeeSlots[i].isEmpty) committeesShowing++;
+      }
+      if (committeesShowing >= this.maxCommitteesToCompare) {
+        this.el_typeahead.$input[0].setAttribute('disabled', 'disabled');
+        this.el_typeahead.$input[0].setAttribute('aria-readonly', 'true');
+      } else {
+        this.el_typeahead.$input[0].removeAttribute('disabled');
+        this.el_typeahead.$input[0].setAttribute('aria-readonly', 'false');
+      }
+    }
+  },
+  mounted: function() {
+    this.$nextTick(function() {
+      // Initialize the typeahead
+      this.el_typeahead = new typeahead.Typeahead(
+        '#pac-comparator-typeahead',
+        'committees'
+      );
+      // Remove the typeahead default action and assign ours
+      this.el_typeahead.$input.off('typeahead:select');
+      this.el_typeahead.$input.on(
+        'typeahead:select',
+        this.handleTypeaheadSelect.bind(this)
+      );
+    });
+  }
+});
diff --git a/fec/webpack.config.js b/fec/webpack.config.js
index 294ef7d301..73ad398f81 100644
--- a/fec/webpack.config.js
+++ b/fec/webpack.config.js
@@ -15,7 +15,8 @@ const entries = {
   'data-init': './fec/static/js/data-init.js',
   vendor: ['jquery', 'handlebars'],
   'calc-admin-fines-modal': './fec/static/js/modules/calc-admin-fines-modal.js', // Used inside base.html
-  'calc-admin-fines': './fec/static/js/modules/calc-admin-fines.js'
+  'calc-admin-fines': './fec/static/js/modules/calc-admin-fines.js',
+  'pac-comparator': './fec/static/js/modules/pac-comparator.js'
 };
 
 const datatablePages = [];

From 0c9a6728f09d0f7cca9a9c6bb34350d84bce850b Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 15 Jul 2020 17:44:42 -0400
Subject: [PATCH 2/5] WIP

---
 .../partials/browse-data/committees.jinja     | 107 ++-
 fec/fec/static/js/modules/pac-comparator.js   | 804 +++++++++++++-----
 2 files changed, 675 insertions(+), 236 deletions(-)

diff --git a/fec/data/templates/partials/browse-data/committees.jinja b/fec/data/templates/partials/browse-data/committees.jinja
index d408a082d1..7c6da35a91 100644
--- a/fec/data/templates/partials/browse-data/committees.jinja
+++ b/fec/data/templates/partials/browse-data/committees.jinja
@@ -1,37 +1,114 @@
 <section id="committees" class="row" aria-hidden="true" role="tabpanel">
   <h2>Committees</h2>
   <p>The term <span class="term" data-term="political committee">committee</span> encompasses several different political groups that receive and spend money in federal elections.</p>
-  <h3>Search or browse data</h3>
   <div class="content__section--ruled t-sans" >
     <div id="pac-comparator">
       <h3>PAC Comparator</h3>
     </div>
     <style>
-      .committees-holder {
+      #pac-comparator .top-left {
+        float: left;
+        padding-right: 2rem;
+        position: relative;
+        width: 25%;
+
+        /* from Sketch */
+        border-right: 1px solid #979797;
+      }
+      #pac-comparator .top-right {
+        float: left;
+        padding-left: 2rem;
+        position: relative;
+        width: 75%;
+      }
+      #pac-comparator .controls-holder {
+        display: flex;
+        position: relative;
+      }
+      .typeaheads-holder {
         display: flex;
-        flex-direction: row;
         justify-content: space-between;
+        position: relative;
+      }
+      .typeaheads-holder .ta {
+        margin-bottom: 1rem;
+        position: relative;
+        padding: 0 2.5rem;
+        width: 50%;
+      }
+      .typeaheads-holder .ta:first-child {
+        padding-left: 0;
       }
-      .committee-details {
+      .typeaheads-holder .ta:last-child {
+        padding-right: 0;
+      }
+      .typeaheads-holder:after {
+        content: "with";
+        display: block;
+        float: left;
+        left: 50%;
+        margin-left: -2rem;
+        padding-top: 4rem;
+        position: absolute;
+        text-align: center;
+        text-transform: uppercase;
+        top: 0;
+        width: 4rem;
 
+        /* from Sketch */
+        font-size: 14px;
+        color: #212121;
+        letter-spacing: -0.3px;
+        line-height: 16px;
       }
-      .committee-details h4 {
-        margin-top: 0;
+      .committees-holder .committee-details {
+        float: left;
+        min-height: 100px;
+        padding: 0 2.5rem;
+        width: 50%;
       }
-      .controls {
-        display: flex;
-        justify-content: space-between;
+      .committees-holder .committee-details:first-child {
+        padding-left: 0;
       }
-      .committee-details:first-child .btn-lft {
-        pointer-events: none;
-        opacity: .5;
+      .committees-holder .committee-details:last-child {
+        padding-right: 0;
       }
-      .committee-details:last-child .btn-rgt {
-        pointer-events: none;
-        opacity: .5;
+      .committee-details h1 {
+        font-family: karla;
+
+        /* from Sketch */
+        font-size: 14px;
+        color: #212121;
+        letter-spacing: -0.3px;
       }
+      .committee-details h2 {
+        font-family: karla;
+        margin-bottom: 0;
+
+        /* from Sketch */
+        font-size: 18px;
+        color: #212121;
+        letter-spacing: -0.38px;
+      }
+      .committee-details h3 {
+        font-family: karla;
+
+        /* from Sketch */
+        font-size: 10px;
+        color: #5B616B;
+        letter-spacing: -0.22px;
+      }
+      .message__error {
+        /* from Sketch */
+        color: #CD2026;
+        font-family: Helvetica;
+        font-size: 12px;
+        letter-spacing: -0.25px;
+      }
+
     </style>
   </div>
+  <h3>Search or browse data</h3>
   <div class="content__section--ruled t-sans">
     <ul>
       <li>
diff --git a/fec/fec/static/js/modules/pac-comparator.js b/fec/fec/static/js/modules/pac-comparator.js
index 700229361c..6a69408ed3 100644
--- a/fec/fec/static/js/modules/pac-comparator.js
+++ b/fec/fec/static/js/modules/pac-comparator.js
@@ -3,216 +3,273 @@
 import { buildUrl } from './helpers';
 import Vue from 'vue/dist/vue.js';
 import typeahead from './typeahead';
+// import { now } from 'jquery';
 
-Vue.component('typeahead-control', {
+Vue.component('election-cycle-selector', {
+  props: {
+    electionCycle: {
+      type: Number,
+      required: true
+    },
+    cycles: {
+      type: Array,
+      required: true
+    }
+  },
   template: `
-    <div class="combo combo--search--mini filter__typeahead">
-      <ul class="dropdown__selected"></ul>
-      <input id="pac-comparator-typeahead" type="text" class="combo__input">
-      <button class="combo__button button--search button--standard" type="button">
-        <span class="u-visually-hidden">Search</span>
-      </button>
-    </div>`
+  <fieldset class="select">
+    <label for="election-year" class="breakdown__title label t-inline-block">Time period: </label>
+    <select
+      :value="electionCycle"
+      @input="$emit('input', $event.target.value)"
+      id="election-year" name="cycle" class="form-element--inline" aria-controls="top-table">
+      <option
+        v-for="item in cycles"
+          :value="item.value"
+          :selected="electionCycle == item.value ? 'selected' : false"
+        >{{ item.label }}
+      </option>
+    </select>
+</fieldset>
+  `
 });
 
-Vue.component('committee-data', {
+Vue.component('typeahead', {
   props: {
-    slotID: {
+    id: {
       type: Number,
       required: true
     },
-    committeeSummary: {
-      type: Object,
-      required: false
-    },
-    isEmpty: {
+    isDisabled: {
       type: Boolean,
       required: true
     }
   },
+  template: `
+    <div class="ta">
+      <label class="label" v-bind:for="'pac-comparator-typeahead-' + id">Committee name or ID</label>
+      <div class="combo combo--search--mini filter__typeahead">
+        <ul class="dropdown__selected"></ul>
+        <input
+          :id="'pac-comparator-typeahead-' + id"
+          :disabled="isDisabled ? 'disabled' : false"
+          :aria-readonly="isDisabled"
+          type="text" class="combo__input">
+        <button
+          :disabled="isDisabled ? 'disabled' : false"
+          :aria-readonly="isDisabled"
+          class="combo__button button--search button--standard" type="button">
+          <span class="u-visually-hidden">Search</span>
+        </button>
+      </div>
+    </div>`,
+  computed: {
+    //
+  },
+  mounted: function() {
+    this.$nextTick(function() {
+      // Initialize this typeahead
+      this.el_typeahead = new typeahead.Typeahead(
+        '#pac-comparator-typeahead-' + this.id,
+        'committees'
+      );
+      // Remove the typeahead default action and assign ours
+      this.el_typeahead.$input.off('typeahead:select');
+      this.el_typeahead.$input.on(
+        'typeahead:select',
+        this.handleSelect.bind(this)
+      );
+    });
+  },
+  methods: {
+    handleSelect: function(jQueryEvent, typeaheadResults) {
+      this.$emit('typeahead-select', typeaheadResults, this);
+    }
+  }
+});
+
+Vue.component('pac-details', {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
   data: function() {
     return {
-      results_typeAhead_default: [
-        {
-          name: '',
-          id: 'C00703975',
-          is_active: true,
-          type: 'committee'
-        }
-      ],
-      results_default: [{}],
-      results_typeAhead: {},
-      results: [{}],
-      isLoading: false,
-      testingLoopCount: 0
+      //
     };
   },
-  template: `<aside
+  template: `<div
     class="committee-details">
-    <div class="controls">
-      <button class="btn-lft" v-on:click="handleButtonClick('left', $event)">◀️</button>
-      <button class="btn-cls" v-on:click="handleButtonClick('clear', $event)">❎</button>
-      <button class="btn-rgt" v-on:click="handleButtonClick('right', $event)">▶️</button>
+    <h1 v-if="data.dataSummary.name">{{ data.dataSummary.name }} <span v-if="data.calc.pacType">({{ data.calc.pacType }})</span></h1>
+    <h2 v-if="data.calc.totDisburseStr != ''">{{ data.calc.totDisburseStr }}</h2>
+    <h3 v-if="data.calc.coverageDatesStatement != ''">{{ data.calc.coverageDatesStatement }}</h3>
+    <div v-if="data.errorMessage != ''">{{ data.errorMessage }}</div>
+    <div v-else-if="data.isLoading == true">
+      <div colspan="2" class="overlay__container">
+        <div class="overlay is-loading">&nbsp;</div>
+      </div>
     </div>
-    <h1>{{ this.committeeSummary.name }}</h1>
-    <h4>({{ this.committeeSummary.id }})</h4>
-    <table>
-      <tbody>
-        <tr v-if="this.isLoading == true">
-          <td colspan="2" class="overlay__container">
-            <div class="overlay is-loading">&nbsp;</div>
-          </td>
-        </tr>
-        <tr v-for="(value, name) in this.results[0]">
-          <td class="t-bold" style="overflow:hidden">{{name}}: </td><td class="t-mono">{{ formatAsCurrency(value) }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </aside>`,
-  beforeMount: function() {
-    this.results = this.results_default;
-    // this.updateCommittee(this.defaultCommitteeID, this.defaultCommitteeName);
-  },
-  beforeUpdate: function(e) {
-    // TODO: this gets called again and again. TODO: make it only load more data if the committee id has changed
-    console.log('component updated(): ', e);
-    this.getUpdatedCommitteeDetails();
-    // console.log('components updated.$nextTick');
-    // this.$nextTick(function() {
-    //   console.log('components updated.$nextTick');
-    // })
-  },
+  </div>`,
   methods: {
-    handleButtonClick: function(buttonActionID, e) {
-      this.$emit('committee-header-click', buttonActionID, this.slotID, e);
-    },
     formatAsCurrency: function(passedValue) {
-      if (!passedValue) return passedValue;
-      // if null, just return and be done
-      else if (isNaN(passedValue)) return passedValue;
       // if it's not a number, return it
-      else if (
-        passedValue.toString().indexOf('.') !=
-        passedValue.toString().length - 3
-      )
+      if (passedValue === '' || passedValue === null || isNaN(passedValue))
         return passedValue;
-      // if there's no decimal + two characters, return it because it's probably not money
       else return '$' + passedValue.toLocaleString(); // otherwise format it as money
-      // (
-      // '$' +
-      // (roundToWhole
-      //   ? Math.round(passedValue).toLocaleString()
-      // : passedValue.toLocaleString())
-      // );
-    },
-    getUpdatedCommitteeDetails: function() {
-      console.log('getUpdatedCommitteeDetails()');
-      console.log('this.testingLoopCount: ', this.testingLoopCount);
-      if (
-        !this.isLoading &&
-        this.committeeSummary.id != this.results_typeAhead_default.id &&
-        this.testingLoopCount < 2
-      ) {
-        console.log('  if()');
-        this.testingLoopCount++; // TODO remove this
-        let instance = this;
-        instance.isLoading = true;
-        window
-          .fetch(
-            buildUrl(
-              ['committee', this.committeeSummary.id, 'totals'],
-              {
-                election_year: '2020',
-                per_page: 100,
-                sort_null_only: false,
-                sort_hide_null: false,
-                sort_nulls_last: false,
-                page: 1
-              },
-              {
-                cache: 'no-cache',
-                mode: 'cors',
-                signal: null
-              }
-            )
-          )
-          .then(function(response) {
-            console.log('fetch.then response: ', response);
-            if (response.status !== 200)
-              throw new Error(
-                'The network rejected the candidate details request.'
-              );
-            // else if (response.type == 'cors') throw new Error('CORS error');
-            response.json().then(data => {
-              instance.claimUpdatedCommitteeDetails(data);
-            });
-          }); // /then
-      } // /if
-    }, // /getUpdatedDetails
-    claimUpdatedCommitteeDetails: function(data) {
-      console.log('claimUpdatedCommitteeDetails(): ', data);
-      this.results = data.results;
-      console.log('claimUpdatedCommitteeDetails(): ', data);
-      this.isLoading = false;
     }
   } // /methods
 });
 
+Vue.component('sliders', {
+  props: {
+    pacs: {
+      type: Array,
+      required: true
+    }
+  },
+  template: `
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Expenditure type</th>
+        <th scope="col">Percentage of total expenditures</th>
+        <th scope="col" colspan="2">Totals</th>
+      </tr>
+      <tr>
+        <td></td>
+        <td></td>
+        <th scope="col">(orange)</th>
+        <th scope="col">(teal)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">Operating expenditures</th>
+        <td></td>
+        <td class="t-right-aligned t-mono">{{ pacs[0].calc.operExpendPctStr }}<br>{{ pacs[0].calc.operExpendStr }}</td>
+        <td class="t-right-aligned t-mono">{{ pacs[1].calc.operExpendPctStr }}<br>{{ pacs[1].calc.operExpendStr }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Contributions to federal candidates / committees</th>
+        <td></td>
+        <td class="t-right-aligned t-mono">{{ pacs[0].calc.contribsPctStr }}<br>{{ pacs[0].calc.contribsStr }}</td>
+        <td class="t-right-aligned t-mono">{{ pacs[1].calc.contribsPctStr }}<br>{{ pacs[1].calc.contribsStr }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Independent expenditures</th>
+        <td></td>
+        <td class="t-right-aligned t-mono">{{ pacs[0].calc.indExpendPctStr }}<br>{{ pacs[0].calc.indExpendStr }}</td>
+        <td class="t-right-aligned t-mono">{{ pacs[1].calc.indExpendPctStr }}<br>{{ pacs[1].calc.indExpendStr }}</td>
+      </tr>
+      <tr>
+        <th scope="row">All other spending</th>
+        <td></td>
+        <td class="t-right-aligned t-mono">{{ pacs[0].calc.otherSpendingPctStr }}<br>{{ pacs[0].calc.otherSpendingStr }}</td>
+        <td class="t-right-aligned t-mono">{{ pacs[1].calc.otherSpendingPctStr }}<br>{{ pacs[1].calc.otherSpendingStr }}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td></td>
+        <th scope="col" class="markers">
+          <span class="marker">0%</span>
+          <span class="marker">25%</span>
+          <span class="marker">50%</span>
+          <span class="marker">75%</span>
+          <span class="marker">100%</span>
+        </th>
+        <td></td>
+        <td></td>
+      </tr>
+    </tfoot>
+  </table>
+  `
+});
+
 new Vue({
   el: '#pac-comparator',
   data: {
-    showingMaxCommittees: false,
-    maxCommitteesToCompare: 2,
-    committeeSlots: [
+    election_cycle: 2020, // Used for queries
+    electionCycles: [], // Values for the <select>
+    typeaheads: [{ key: 'taSlot0' }, { key: 'taSlot1' }],
+    pacs: [
       {
-        slotID: 0,
-        cSummary: { name: 'Committee 0' },
-        isEmpty: true,
-        displayOrder: 0
+        key: 'pacSlot0',
+        calc: {}, // Calculated values
+        cmteDetails: {}, // Details about the committee org
+        dataDetails: {}, // Committee's financial query results
+        dataSummary: { id: '', name: '' }, // Typeahead results
+        errorMessage: '', // Triggers error messages
+        isLoading: false // Controls visual indicator and deactivates typeahead
       },
       {
-        slotID: 1,
-        cSummary: { name: 'Committee 1' },
-        isEmpty: true,
-        displayOrder: 1
-      },
-      {
-        slotID: 2,
-        cSummary: { name: 'Committee 2' },
-        isEmpty: true,
-        displayOrder: 2
-      },
-      {
-        slotID: 3,
-        cSummary: { name: 'Committee 3' },
-        isEmpty: true,
-        displayOrder: 3
+        key: 'pacSlot1',
+        calc: {},
+        cmteDetails: {},
+        dataDetails: {},
+        dataSummary: { id: '', name: '' },
+        errorMessage: '',
+        isLoading: false
       }
-    ],
-    el_typeahead: ''
+    ]
   },
-  template: `<div>
-    <h3>PAC Comparator</h3>
-    <typeahead-control
-      :is-disabled="showingMaxCommittees"
-    ></typeahead-control>
-    <div class="committees-holder">
-      <committee-data
-        v-for="(committee, index) in committeeSlots"
-        v-if="index < maxCommitteesToCompare"
-        :cID="committee.cID"
-        :committeeSummary="committee.cSummary"
-        :isEmpty="committee.isEmpty"
-        :slotID="committee.slotID"
-        :key="committee.displayOrder"
-        @committee-header-click="handleCommitteeHeaderClick"
-      >
-      </committee-data>
+  template: `<div id="pac-comparator">
+    <h3>Compare nonconnected political action committee spending</h3>
+    <div class="controls-holder">
+      <div class="top-left">
+        <election-cycle-selector
+          :cycles="electionCycles"
+          :election-cycle="election_cycle"
+          @input="handleElectionYearChange"
+        ></election-cycle-selector>
+      </div>
+      <div class="top-right">
+        <div class="typeaheads-holder">
+          <typeahead
+            v-for="(item, index) in typeaheads"
+            :id="index"
+            :is-disabled="pacs[index].isLoading"
+            :key="item.key"
+            @typeahead-select=handleTypeaheadSelect
+          ></typeahead>
+        </div>
+        <div class="committees-holder">
+          <pac-details
+            v-for="(item, index) in pacs"
+            :data="item"
+            :key="item.key"
+          ></pac-details>
+        </div>
+      </div>
+    </div>
+    <div class="charts-holder">
+      <sliders
+        :pacs="pacs">
+      </sliders>
     </div>
   </div>`,
+  beforeMount: function() {
+    // Build the list of election cycles
+    for (let i = 2020; i >= 1980; i -= 2) {
+      this.electionCycles.push({ value: i, label: `${i - 1}-${i}` });
+    }
+  },
   methods: {
-    handleTypeaheadSelect: function(jQueryEvent, e, typeaheadType) {
-      this.setNewCommittee(e);
+    handleElectionYearChange: function(newValue) {
+      this.election_cycle = parseInt(newValue);
+      // Check the pacs that are currently loaded and load either that need it
+      for (let i = 0; i < this.pacs.length; i++) {
+        if (this.pacs[i].dataSummary.id != '') this.startLoadingCommitteeData(i);
+      }
+    },
+    handleTypeaheadSelect: function(typeaheadResults, vueComponent) {
+      this.pacs[vueComponent.id].dataSummary = typeaheadResults;
+      this.pacs[vueComponent.id].cmteDetails = {}; // reset committee details
+      this.pacs[vueComponent.id].dataDetails = {}; // reset committee data
+      this.pacs[vueComponent.id].calc = {}; // reset calculated fields
+      this.startLoadingCommitteeData(vueComponent.id);
     },
     handleCommitteeHeaderClick: function(
       buttonActionID,
@@ -238,63 +295,368 @@ new Vue({
         }
       }
     },
-    setNewCommittee: function(typeaheadEvent) {
-      let haveSetIt = false;
-      for (
-        let i = 0;
-        i < this.committeeSlots.length && i < this.maxCommitteesToCompare;
-        i++
+    startLoadingCommitteeData: function(typeaheadsArrayPos) {
+      // this.typeaheads[typeaheadsArrayPos].isDisabled = true;
+      console.log('startLoadingCommitteeData(): ', typeaheadsArrayPos);
+
+      let instance = this;
+      // instance.isLoading = true;
+      this.pacs[typeaheadsArrayPos].errorMessage = '';
+      this.pacs[typeaheadsArrayPos].isLoading = true;
+      window
+        .fetch(
+          buildUrl(
+            [
+              'committee',
+              this.pacs[typeaheadsArrayPos].dataSummary.id,
+              'totals'
+            ],
+            {
+              cycle: this.election_cycle,
+              per_page: 100,
+              sort_null_only: false,
+              sort_hide_null: false,
+              sort_nulls_last: false,
+              page: 1
+            },
+            {
+              cache: 'no-cache',
+              mode: 'no-cors', // TODO: change this to 'cors'
+              signal: null
+            }
+          )
+        )
+        .then(response => {
+          console.log('data fetch.then response: ', response);
+          if (response.status !== 200)
+            throw new Error('ERROR:REJECTED_DATA_REQUEST', response); // (throw error, be done)
+          // else if (response.type == 'cors') throw new Error('CORS error');
+          // If the response has a message, (otherwise, it's a data response)
+          if (response.message)
+            instance.handleCommitteeRequestRejected(
+              response,
+              this.pacs[typeaheadsArrayPos].dataSummary.id,
+              this.election_cycle
+            );
+          else {
+            response.json().then(data => {
+              instance.handleCommitteeDataLoaded(data);
+            });
+          }
+        }) // / then
+        .catch(error => {
+          instance.handleCommitteeRequestRejected(
+            error,
+            this.pacs[typeaheadsArrayPos].dataSummary.id,
+            this.election_cycle
+          );
+        });
+    },
+    handleCommitteeDataLoaded: function(data) {
+      console.log('handleCommitteeDataLoaded(): ', data);
+
+      // Figger out where to put these details — let's loop through the pacs list until we find a matching ID
+      if (data.results && data.results[0].committee_id) {
+        let idToFind = data.results[0].committee_id;
+        for (let i = 0; i < this.pacs.length; i++) {
+          if (this.pacs[i].dataSummary.id == idToFind) {
+            // Save the data details
+            this.pacs[i].dataDetails = data.results[0];
+            // And handle the quick-access values
+            this.calcPacValues(i);
+            // Check to make sure it's a non-connected PAC
+            let isNoncomm = this.isNonconnectedPac(i);
+            if (isNoncomm === true) {
+              // We don't need to load the committee details so let's skip it
+              this.pacs[i].isLoading = false;
+            } else if (this.isNonconnectedPac(i) === 'maybe') {
+              this.startLoadingCommitteeDetails(i);
+            } else {
+              this.pacs[i].errorMessage =
+                'You entered a committee that is not a nonconnected PAC. Please enter an active nonconnected PAC name or ID.';
+            }
+
+            // this.pacs[i].isLoading = false;
+            break; // no reason to check another
+          }
+        }
+      }
+    },
+    handleCommitteeRequestRejected: function(
+      error,
+      requestedPacID,
+      requestedElectionCycle
+    ) {
+      console.log('handleCommitteeRequestRejected(): ', error, requestedPacID, requestedElectionCycle);
+      // Since we had a requested rejected, let's check to make sure it's still a legit request
+      // (e.g., if we requested on pac-cycle combo but the user has changed the year since then, this rejection is outdated)
+      if (
+        requestedElectionCycle &&
+        requestedElectionCycle == this.election_cycle
       ) {
-        if (this.committeeSlots[i].isEmpty == true && haveSetIt == false) {
-          this.committeeSlots[i].cSummary = typeaheadEvent;
-          this.committeeSlots[i].isEmpty = false;
-          haveSetIt = true;
+        for (let i = 0; i < this.pacs.length; i++) {
+          if (this.pacs[i].dataSummary.id == requestedPacID) {
+            if (error.message == 'ERROR:REJECTED_DATA_REQUEST') {
+              this.pacs[i].errorMessage =
+                'You entered a committee that was not active during 2017-2018 period. Please enter a nonconnected PAC name or ID active during 2017-2018.';
+            } else {
+              this.pacs[i].errorMessage = 'HANDLE THIS';
+            }
+            this.pacs[i].isLoading = false;
+            // re-enable the typeahead
+            break; // no reason to check another
+          }
         }
+      } else {
+        // if the election year has changed, meh, ignore this rejection
       }
-      this.typeahead_updateActiveState();
     },
-    resetCommitteeSlot: function(committeeSlotToClear) {
-      let toClear = committeeSlotToClear;
-      toClear.isEmpty = true;
-      toClear.cSummary = {
-        name: '—',
-        id: 'C00703975',
-        is_active: true,
-        type: 'committee'
-      };
-      this.typeahead_updateActiveState();
+    startLoadingCommitteeDetails: function(typeaheadsArrayPos) {
+      // this.typeaheads[typeaheadsArrayPos].isDisabled = true;
+      console.log('startLoadingCommitteeDetails(): ', typeaheadsArrayPos);
+
+      let instance = this;
+
+      window
+        .fetch(
+          buildUrl(
+            ['committee', this.pacs[typeaheadsArrayPos].dataSummary.id],
+            {
+              per_page: 100,
+              sort_null_only: false,
+              sort_hide_null: false,
+              sort_nulls_last: false,
+              page: 1
+            },
+            {
+              cache: 'no-cache',
+              mode: 'no-cors', // TODO: change this to 'cors'
+              signal: null
+            }
+          )
+        )
+        .then(response => {
+          console.log('details fetch.then response: ', response);
+          if (response.status !== 200)
+            throw new Error('ERROR:REJECTED_DETAILS_REQUEST', response); // (throw error, be done)
+          // else if (response.type == 'cors') throw new Error('CORS error');
+          // If the response has a message, (otherwise, it's a data response)
+          // if (response.message)
+          // instance.handleCommitteeRequestRejected(
+          //   response,
+          //   this.pacs[typeaheadsArrayPos].dataSummary.id
+          // );
+          if (!response.message) {
+            response.json().then(data => {
+              instance.handleCommitteeDetailsLoaded(data);
+            });
+          }
+        }) // / then
+        .catch(error => {
+          instance.handleCommitteeRequestRejected(
+            error,
+            this.pacs[typeaheadsArrayPos].dataSummary.id,
+            this.election_cycle
+          );
+        });
     },
-    typeahead_updateActiveState: function() {
-      let committeesShowing = 0;
-      for (
-        let i = 0;
-        i < this.committeeSlots.length && i < this.maxCommitteesToCompare;
-        i++
+    handleCommitteeDetailsLoaded: function(data) {
+      console.log('handleCommitteeDetailsLoaded(): ', data);
+      let idToFind = data.results[0].committee_id;
+
+      for (let i = 0; i < this.pacs.length; i++) {
+        // TODO pull this into its own thing so it's not a dupe
+        if (this.pacs[i].dataSummary.id == idToFind) {
+          // Save the data details
+          this.pacs[i].cmteDetails = data.results[0];
+
+          // Check to make sure it's a non-connected PAC
+          if (this.isNonconnectedPac(i) == false)
+            this.pacs[i].errorMessage =
+              'You entered a committee that is not a nonconnected PAC. Please enter an active nonconnected PAC name or ID.';
+
+          this.pacs[i].isLoading = false;
+          break; // no reason to check another
+        }
+      }
+    },
+    isNonconnectedPac: function(pacSlotPos) {
+      /* Valid rules to find nonconnected committees:
+
+        1. committee type in            [O, U, V, W]
+        2. committee designation NOT in [A, J, P]
+
+        OR
+
+        1. committee type in            [N, Q]
+        2. committee designation NOT in [A, J, P]
+        3. org type NOT in              [C, L, M, T, W]
+
+      */
+      let cType = this.pacs[pacSlotPos].dataDetails.committee_type;
+      let cDesig = this.pacs[pacSlotPos].dataDetails.committee_designation;
+      let oType = false;
+      if (
+        this.pacs[pacSlotPos].cmteDetails &&
+        this.pacs[pacSlotPos].cmteDetails.organization_type !== undefined
+      )
+        oType = String(this.pacs[pacSlotPos].cmteDetails.organization_type);
+
+      console.log('cmteDetails: ', this.pacs[pacSlotPos].cmteDetails);
+      console.log('organization_type: ', this.pacs[pacSlotPos].cmteDetails.organization_type);
+      console.log('cType, cDesig, oType: ', cType, cDesig, oType);
+
+      let validCmteTypesWithOrgType = ['O', 'U', 'V', 'W'];
+      let validCmteTypesWithoutOrgType = ['N', 'Q'];
+      let invalidOrgTypes = ['C', 'L', 'M', 'T', 'W'];
+      let invalidDesigs = ['A', 'J', 'P'];
+
+      let toReturn = false;
+
+      if (invalidDesigs.includes(cDesig)) {
+        // If we have an invalid designation, its not nonconnected
+        // We'll let toReturn stay false
+      } else if (validCmteTypesWithoutOrgType.includes(cType)) {
+        // If the committee type doesn't need an org type, we're safe to return
+        // Designation is valid (from the if)
+        toReturn = true;
+      } else if (oType === false) {
+        // oType is false if we don't have committee details yet (which includes org type)
+        toReturn = 'maybe';
+      } else if (
+        validCmteTypesWithOrgType.includes(cType) &&
+        !invalidOrgTypes.includes(oType)
       ) {
-        if (!this.committeeSlots[i].isEmpty) committeesShowing++;
+        // We've made it to the committee types that need an org type so we need those details
+        // If oType is false, we haven't loaded the committee details yet
+        toReturn = true;
       }
-      if (committeesShowing >= this.maxCommitteesToCompare) {
-        this.el_typeahead.$input[0].setAttribute('disabled', 'disabled');
-        this.el_typeahead.$input[0].setAttribute('aria-readonly', 'true');
-      } else {
-        this.el_typeahead.$input[0].removeAttribute('disabled');
-        this.el_typeahead.$input[0].setAttribute('aria-readonly', 'false');
+
+      console.log('isNonConnectedPac: ', toReturn);
+
+      return toReturn;
+    },
+    calcPacValues: function(pacSlotPos) {
+      let toReturn = {};
+      let d = this.pacs[pacSlotPos].dataDetails;
+
+      // Total disbursements
+      toReturn.totDisburse = d.disbursements;
+      toReturn.totDisburseStr = this.formatAsCurrency(d.disbursements);
+
+      // PAC type
+      toReturn.pacType = d.committee_type;
+
+      // Coverage dates string
+      toReturn.coverageDatesStatement = '';
+      if (d.coverage_start_date && d.coverage_end_date) {
+        let dateFormatOptions = {
+          day: '2-digit',
+          month: '2-digit',
+          year: '2-digit',
+          timeZone: 'America/New_York'
+        };
+        let startDate = new Date(d.coverage_start_date).toLocaleDateString(
+          'us-EN',
+          dateFormatOptions
+        );
+        let endDate = new Date(d.coverage_end_date).toLocaleDateString(
+          'us-EN',
+          dateFormatOptions
+        );
+        toReturn.coverageDatesStatement = `total expenditures from ${startDate}-${endDate}`;
       }
-    }
-  },
-  mounted: function() {
-    this.$nextTick(function() {
-      // Initialize the typeahead
-      this.el_typeahead = new typeahead.Typeahead(
-        '#pac-comparator-typeahead',
-        'committees'
-      );
-      // Remove the typeahead default action and assign ours
-      this.el_typeahead.$input.off('typeahead:select');
-      this.el_typeahead.$input.on(
-        'typeahead:select',
-        this.handleTypeaheadSelect.bind(this)
+
+      // Operating expenditures
+      toReturn.operExpend = 0;
+      toReturn.operExpendStr = '';
+      toReturn.operExpendPct = 0;
+      toReturn.operExpendPctStr = '';
+      if (d.operating_expenditures || d.operating_expenditures === 0) {
+        toReturn.operExpend = d.operating_expenditures;
+        toReturn.operExpendStr = this.formatAsCurrency(
+          d.operating_expenditures,
+          true
+        );
+        toReturn.operExpendPct =
+          d.operating_expenditures / toReturn.totDisburse;
+        toReturn.operExpendPctStr = this.percentString(toReturn.operExpendPct);
+      }
+
+      // Contributions to federal candidates / committees
+      toReturn.contribs = 0;
+      toReturn.contribsStr = '';
+      toReturn.contribsPct = 0;
+      toReturn.contribsPctStr = '';
+      if (
+        (d.contributions && d.contribution_refunds) ||
+        (d.contributions === 0 && d.contribution_refunds === 0)
+      ) {
+        toReturn.contribs = d.contributions - d.contribution_refunds;
+        toReturn.contribsStr = this.formatAsCurrency(toReturn.contribs, true);
+        toReturn.contribsPct = toReturn.contribs / toReturn.totDisburse;
+        toReturn.contribsPctStr = this.percentString(toReturn.contribsPct);
+      }
+
+      // Independent expenditures
+      toReturn.indExpend = 0;
+      toReturn.indExpendStr = '';
+      toReturn.indExpendPct = 0;
+      toReturn.indExpendPctStr = '';
+      if (d.independent_expenditures || d.independent_expenditures === 0) {
+        toReturn.indExpend = d.independent_expenditures;
+        toReturn.indExpendStr = this.formatAsCurrency(toReturn.indExpend, true);
+        toReturn.indExpendPct = toReturn.indExpend / toReturn.totDisburse;
+        toReturn.indExpendPctStr = this.percentString(toReturn.indExpendPct);
+      }
+
+      // Other spending
+      toReturn.otherSpending = 0;
+      toReturn.otherSpendingStr = '';
+      toReturn.otherSpendingPct = 0;
+      toReturn.otherSpendingPctStr = '';
+      // To make the code shorter, here's a list of var names included with otherSpending
+      let otherSpend = [
+        'coordinated_expenditures_by_party_committee',
+        'fed_election_activity',
+        'other_disbursements',
+        'total_transfers',
+        'loan_repayments_made',
+        'loan_repayments_received',
+        'loans_and_loan_repayments_made',
+        'loans_and_loan_repayments_received',
+        'loans_made',
+        'refunded_individual_contributions',
+        'refunded_other_political_committee_contributions',
+        'refunded_political_party_committee_contributions',
+        'refunds_relating_convention_exp'
+      ];
+      otherSpend.forEach(value => {
+        console.log('otherSpend.forEach(): ', value, d[value]);
+        if (d[value]) toReturn.otherSpending += d[value];
+      });
+      console.log('toReturn.otherSpending: ', toReturn.otherSpending);
+      toReturn.otherSpendingStr = this.formatAsCurrency(toReturn.otherSpending);
+      toReturn.otherSpendingPct = toReturn.otherSpending / toReturn.totDisburse;
+      toReturn.otherSpendingPctStr = this.percentString(
+        toReturn.otherSpendingPct
       );
-    });
+
+      // Put the values onto this.pacs
+      this.pacs[pacSlotPos].calc = toReturn;
+    },
+    formatAsCurrency: function(passedValue, roundToWhole) {
+      // If it's invalid, just send it back
+      if (passedValue === '' || passedValue === null || isNaN(passedValue))
+        return passedValue;
+
+      // Round if we should
+      let toReturn = roundToWhole ? Math.round(passedValue) : passedValue;
+      return '$' + toReturn.toLocaleString(); // otherwise format it as money
+    },
+    percentString: function(val) {
+      let v = val * 100;
+      return v < 1 ? '<1%' : `${Math.round(v)}%`;
+    }
   }
 });

From e415d539d6bc2f3d17ceb6ff24c4aa09e7f9517c Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Thu, 16 Jul 2020 11:53:46 -0400
Subject: [PATCH 3/5] Broad strokes of functionality and style are in

---
 .../partials/browse-data/committees.jinja     | 144 ++++++++++-
 fec/fec/static/js/modules/pac-comparator.js   | 223 ++++++++++++------
 2 files changed, 295 insertions(+), 72 deletions(-)

diff --git a/fec/data/templates/partials/browse-data/committees.jinja b/fec/data/templates/partials/browse-data/committees.jinja
index 7c6da35a91..3e10e74a74 100644
--- a/fec/data/templates/partials/browse-data/committees.jinja
+++ b/fec/data/templates/partials/browse-data/committees.jinja
@@ -25,6 +25,9 @@
         display: flex;
         position: relative;
       }
+      #pac-comparator .overlay__container {
+        min-height: 100px;
+      }
       .typeaheads-holder {
         display: flex;
         justify-content: space-between;
@@ -74,7 +77,8 @@
         padding-right: 0;
       }
       .committee-details h1 {
-        font-family: karla;
+        font-family: karla,sans-serif;
+        padding-left: 1.5rem;
 
         /* from Sketch */
         font-size: 14px;
@@ -84,6 +88,8 @@
       .committee-details h2 {
         font-family: karla;
         margin-bottom: 0;
+        padding-left: 1.5rem;
+        position: relative;
 
         /* from Sketch */
         font-size: 18px;
@@ -91,7 +97,8 @@
         letter-spacing: -0.38px;
       }
       .committee-details h3 {
-        font-family: karla;
+        font-family: karla,sans-serif;
+        padding-left: 1.5rem;
 
         /* from Sketch */
         font-size: 10px;
@@ -105,6 +112,139 @@
         font-size: 12px;
         letter-spacing: -0.25px;
       }
+      .icon-pac {
+        border-radius: 50%;
+        display: inline-block;
+        height: 1rem;
+        position: absolute;
+        width: 1rem;
+      }
+      .icon-pac.pac-0 {
+        /* Sketch */
+        background-color: #F77B42;
+      }
+      .icon-pac.pac-1 {
+        /* Sketch */
+        background-color: #36BDBB;
+      }
+      h2 .icon-pac {
+        left: 0;
+        top: 5px;
+      }
+      th .icon-pac {
+        position: relative;
+      }
+      table.sliders {
+        display: block;
+        font-family: karla,sans-serif;
+        width: 100%;
+      }
+      table.sliders th {
+        /* Sketch */
+        color: #212121;
+        font-size: 16px;
+        font-weight: bold;
+        letter-spacing: -0.34px;
+        line-height: 16px;
+        text-align: center;
+      }
+      table.sliders td, table.sliders th {
+        padding: 1rem;
+      }
+      table.sliders td.meters {
+        padding-left: 0;
+        padding-right: 0;
+      }
+      table.sliders th.t-right-aligned {
+        text-align: right;
+      }
+      table.sliders thead tr:first-child th {
+        border-bottom: solid thin #112E51;
+        padding: .5em;
+      }
+      table.sliders thead tr:first-child th {
+        border-left: solid 1rem white;
+        border-right: solid 1rem white;
+      }
+      table.sliders thead th:first-child {
+        border-left: none;
+      }
+      table.sliders thead th:last-child {
+        border-right: none;
+      }
+      table.sliders tbody th {
+        font-weight: normal;
+
+        /* Sketch */
+        color: #000000;
+        font-size: 14px;
+        letter-spacing: -0.31px;
+        line-height: 13px;
+        text-align: right;
+      }
+      table.sliders tbody td:last-child, table.sliders thead tr:last-child th:last-child {
+        border-left: solid thin #979797;
+      }
+      table.sliders .slider {
+        position: relative;
+
+        /* Sketch */
+        height: 2px;
+        background-color: #E8E8E8;
+      }
+      table.sliders .slider .icon-pac {
+        top: calc(-.5rem + 1px);
+        transition: left 1s;
+      }
+      table.sliders .t-right-aligned span {
+        display: block;
+        line-height: 1.1em;
+      }
+
+      table.sliders .ticks {
+        display: flex;
+        justify-content: space-between;
+        padding-left: 0;
+        padding-right: 0;
+        margin-right: -2rem;
+        margin-left: -1.5rem;
+        position: relative;
+      }
+      table.sliders .ticks .tick {
+        width: 4rem;
+        text-align: center;
+        position: relative;
+        display: inline-block;
+
+        /* Sketch */
+        color: #4A4A4A;
+        font-size: 12px;
+        letter-spacing: -0.29px;
+      }
+      table.sliders .ticks .tick:before {
+        background-color: #E8E8E8;
+        bottom: 100%;
+        content: "";
+        display: block;
+        height: 1rem;
+        left: 50%;
+        position: absolute;
+        width: 2px;
+      }
+      table.sliders .ticks .rule {
+        background-color: #E8E8E8;
+        height: 1px;
+        left: 2rem;
+        position: absolute;
+        top: .5rem;
+        width: calc(100% - 4rem);
+      }
+      table.sliders thead tr:last-child th {
+        padding-bottom: 0;
+      }
+      table.sliders tbody tr:first-child > * {
+        padding-top: 0;
+      }
 
     </style>
   </div>
diff --git a/fec/fec/static/js/modules/pac-comparator.js b/fec/fec/static/js/modules/pac-comparator.js
index 6a69408ed3..092c115534 100644
--- a/fec/fec/static/js/modules/pac-comparator.js
+++ b/fec/fec/static/js/modules/pac-comparator.js
@@ -93,19 +93,17 @@ Vue.component('pac-details', {
     data: {
       type: Object,
       required: true
+    },
+    index: {
+      type: Number,
+      required: true
     }
   },
-  data: function() {
-    return {
-      //
-    };
-  },
-  template: `<div
-    class="committee-details">
+  template: `<div class="committee-details">
     <h1 v-if="data.dataSummary.name">{{ data.dataSummary.name }} <span v-if="data.calc.pacType">({{ data.calc.pacType }})</span></h1>
-    <h2 v-if="data.calc.totDisburseStr != ''">{{ data.calc.totDisburseStr }}</h2>
-    <h3 v-if="data.calc.coverageDatesStatement != ''">{{ data.calc.coverageDatesStatement }}</h3>
-    <div v-if="data.errorMessage != ''">{{ data.errorMessage }}</div>
+    <h2 v-if="data.calc.totDisburseStr"><i :class="['icon-pac', 'pac-' + index]"></i>{{ data.calc.totDisburseStr }}</h2>
+    <h3 v-if="data.calc.coverageDatesStatement">{{ data.calc.coverageDatesStatement }}</h3>
+    <div v-if="data.errorMessage != ''" class="message__error">{{ data.errorMessage }}</div>
     <div v-else-if="data.isLoading == true">
       <div colspan="2" class="overlay__container">
         <div class="overlay is-loading">&nbsp;</div>
@@ -122,66 +120,134 @@ Vue.component('pac-details', {
   } // /methods
 });
 
+Vue.component('slider', {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  template: `
+    <div
+      :style="'width:' + data.width + 'px'"
+      class="slider"
+    >
+      <i
+        :style="'left: ' + data.v0 + '%'"
+        class="icon-pac pac-0">&nbsp;</i>
+      <i
+        :style="'left: ' + data.v1 + '%'"
+        class="icon-pac pac-1">&nbsp;</i>
+      &nbsp;
+  </div>
+  `
+});
+
 Vue.component('sliders', {
   props: {
     pacs: {
       type: Array,
       required: true
+    },
+    sliderWidth: {
+      type: Number,
+      required: true
     }
   },
   template: `
-  <table>
+  <table class="sliders">
     <thead>
       <tr>
-        <th scope="col">Expenditure type</th>
-        <th scope="col">Percentage of total expenditures</th>
-        <th scope="col" colspan="2">Totals</th>
+        <th>Expenditure type</th>
+        <th>Percentage of total expenditures</th>
+        <th colspan="2">Totals</th>
       </tr>
       <tr>
-        <td></td>
-        <td></td>
-        <th scope="col">(orange)</th>
-        <th scope="col">(teal)</th>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+        <th class="t-right-aligned"><i class="icon-pac pac-0">&nbsp;</i></th>
+        <th class="t-right-aligned"><i class="icon-pac pac-1">&nbsp;</i></th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <th scope="row">Operating expenditures</th>
-        <td></td>
-        <td class="t-right-aligned t-mono">{{ pacs[0].calc.operExpendPctStr }}<br>{{ pacs[0].calc.operExpendStr }}</td>
-        <td class="t-right-aligned t-mono">{{ pacs[1].calc.operExpendPctStr }}<br>{{ pacs[1].calc.operExpendStr }}</td>
+        <th>Operating expenditures</th>
+        <td class="meters" role="graphics-dataline">
+          <slider
+            :data="{'v0': pacs[0].calc.operExpendPct * 100, 'v1': pacs[1].calc.operExpendPct * 100, 'width': sliderWidth}"
+          ></slider>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[0].calc.operExpendPctStr }}</span>
+          <span>{{ pacs[0].calc.operExpendStr }}</span>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[1].calc.operExpendPctStr }}</span>
+          <span>{{ pacs[1].calc.operExpendStr }}</span>
+        </td>
       </tr>
       <tr>
-        <th scope="row">Contributions to federal candidates / committees</th>
-        <td></td>
-        <td class="t-right-aligned t-mono">{{ pacs[0].calc.contribsPctStr }}<br>{{ pacs[0].calc.contribsStr }}</td>
-        <td class="t-right-aligned t-mono">{{ pacs[1].calc.contribsPctStr }}<br>{{ pacs[1].calc.contribsStr }}</td>
+        <th>Contributions to federal candidates / committees</th>
+        <td class="meters" role="graphics-dataline">
+          <slider
+            :data="{'v0': pacs[0].calc.contribsPct * 100, 'v1': pacs[1].calc.contribsPct * 100, 'width': sliderWidth}"
+          ></slider>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[0].calc.contribsPctStr }}</span>
+          <span>{{ pacs[0].calc.contribsStr }}</span>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[1].calc.contribsPctStr }}</span>
+          <span>{{ pacs[1].calc.contribsStr }}</span>
+        </td>
       </tr>
       <tr>
-        <th scope="row">Independent expenditures</th>
-        <td></td>
-        <td class="t-right-aligned t-mono">{{ pacs[0].calc.indExpendPctStr }}<br>{{ pacs[0].calc.indExpendStr }}</td>
-        <td class="t-right-aligned t-mono">{{ pacs[1].calc.indExpendPctStr }}<br>{{ pacs[1].calc.indExpendStr }}</td>
+        <th>Independent expenditures</th>
+        <td class="meters" role="graphics-dataline">
+          <slider
+            :data="{'v0': pacs[0].calc.indExpendPct * 100, 'v1': pacs[1].calc.indExpendPct * 100, 'width': sliderWidth}"
+          ></slider>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[0].calc.indExpendPctStr }}</span>
+          <span>{{ pacs[0].calc.indExpendStr }}</span>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[1].calc.indExpendPctStr }}</span>
+          <span>{{ pacs[1].calc.indExpendStr }}</span>
+        </td>
       </tr>
       <tr>
-        <th scope="row">All other spending</th>
-        <td></td>
-        <td class="t-right-aligned t-mono">{{ pacs[0].calc.otherSpendingPctStr }}<br>{{ pacs[0].calc.otherSpendingStr }}</td>
-        <td class="t-right-aligned t-mono">{{ pacs[1].calc.otherSpendingPctStr }}<br>{{ pacs[1].calc.otherSpendingStr }}</td>
+        <th>All other spending</th>
+        <td class="meters" role="graphics-dataline">
+          <slider
+            :data="{'val0': pacs[0].calc.otherSpendingPct * 100, 'val1': pacs[1].calc.otherSpendingPct * 100, 'width': sliderWidth}"
+          ></slider>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[0].calc.otherSpendingPctStr }}</span>
+          <span>{{ pacs[0].calc.otherSpendingStr }}</span>
+        </td>
+        <td class="t-right-aligned t-mono">
+          <span>{{ pacs[1].calc.otherSpendingPctStr }}</span>
+          <span>{{ pacs[1].calc.otherSpendingStr }}</span>
+        </td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
-        <td></td>
-        <th scope="col" class="markers">
-          <span class="marker">0%</span>
-          <span class="marker">25%</span>
-          <span class="marker">50%</span>
-          <span class="marker">75%</span>
-          <span class="marker">100%</span>
+        <th>&nbsp;</th>
+        <th class="ticks">
+          <span class="rule" role="display-only">&nbsp;</span>
+          <span class="tick" role="graphics-tick">0%</span>
+          <span class="tick" role="graphics-tick">25%</span>
+          <span class="tick" role="graphics-tick">50%</span>
+          <span class="tick" role="graphics-tick">75%</span>
+          <span class="tick" role="graphics-tick">100%</span>
         </th>
-        <td></td>
-        <td></td>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
       </tr>
     </tfoot>
   </table>
@@ -193,11 +259,12 @@ new Vue({
   data: {
     election_cycle: 2020, // Used for queries
     electionCycles: [], // Values for the <select>
+    sliderWidth: 100,
     typeaheads: [{ key: 'taSlot0' }, { key: 'taSlot1' }],
     pacs: [
       {
         key: 'pacSlot0',
-        calc: {}, // Calculated values
+        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpend: 0 }, // Calculated values (derived from dataDetails when they're loaded)
         cmteDetails: {}, // Details about the committee org
         dataDetails: {}, // Committee's financial query results
         dataSummary: { id: '', name: '' }, // Typeahead results
@@ -206,7 +273,7 @@ new Vue({
       },
       {
         key: 'pacSlot1',
-        calc: {},
+        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpend: 0 },
         cmteDetails: {},
         dataDetails: {},
         dataSummary: { id: '', name: '' },
@@ -239,6 +306,7 @@ new Vue({
           <pac-details
             v-for="(item, index) in pacs"
             :data="item"
+            :index="index"
             :key="item.key"
           ></pac-details>
         </div>
@@ -246,7 +314,8 @@ new Vue({
     </div>
     <div class="charts-holder">
       <sliders
-        :pacs="pacs">
+        :pacs="pacs"
+        :slider-width="sliderWidth">
       </sliders>
     </div>
   </div>`,
@@ -255,20 +324,31 @@ new Vue({
     for (let i = 2020; i >= 1980; i -= 2) {
       this.electionCycles.push({ value: i, label: `${i - 1}-${i}` });
     }
+
+    // Listen to window resize to determine internet component sizes
+    window.addEventListener('resize', this.handleWindowResize);
+    // And grab the width now
+    this.sliderWidth = this.$el.offsetWidth * 0.45;
   },
   methods: {
     handleElectionYearChange: function(newValue) {
       this.election_cycle = parseInt(newValue);
       // Check the pacs that are currently loaded and load either that need it
       for (let i = 0; i < this.pacs.length; i++) {
-        if (this.pacs[i].dataSummary.id != '') this.startLoadingCommitteeData(i);
+        if (this.pacs[i].dataSummary.id != '')
+          this.startLoadingCommitteeData(i);
       }
     },
     handleTypeaheadSelect: function(typeaheadResults, vueComponent) {
       this.pacs[vueComponent.id].dataSummary = typeaheadResults;
       this.pacs[vueComponent.id].cmteDetails = {}; // reset committee details
       this.pacs[vueComponent.id].dataDetails = {}; // reset committee data
-      this.pacs[vueComponent.id].calc = {}; // reset calculated fields
+      this.pacs[vueComponent.id].calc = {
+        contribs: 0,
+        indExpend: 0,
+        operExpend: 0,
+        otherSpend: 0
+      }; // reset calculated fields
       this.startLoadingCommitteeData(vueComponent.id);
     },
     handleCommitteeHeaderClick: function(
@@ -375,8 +455,6 @@ new Vue({
               this.pacs[i].errorMessage =
                 'You entered a committee that is not a nonconnected PAC. Please enter an active nonconnected PAC name or ID.';
             }
-
-            // this.pacs[i].isLoading = false;
             break; // no reason to check another
           }
         }
@@ -387,9 +465,8 @@ new Vue({
       requestedPacID,
       requestedElectionCycle
     ) {
-      console.log('handleCommitteeRequestRejected(): ', error, requestedPacID, requestedElectionCycle);
-      // Since we had a requested rejected, let's check to make sure it's still a legit request
-      // (e.g., if we requested on pac-cycle combo but the user has changed the year since then, this rejection is outdated)
+      // Since we had a request rejected, let's check to make sure it's still a legit request
+      // (e.g., if we requested a pac-cycle combo but the user has changed the year since then, this rejection is outdated)
       if (
         requestedElectionCycle &&
         requestedElectionCycle == this.election_cycle
@@ -397,10 +474,15 @@ new Vue({
         for (let i = 0; i < this.pacs.length; i++) {
           if (this.pacs[i].dataSummary.id == requestedPacID) {
             if (error.message == 'ERROR:REJECTED_DATA_REQUEST') {
-              this.pacs[i].errorMessage =
-                'You entered a committee that was not active during 2017-2018 period. Please enter a nonconnected PAC name or ID active during 2017-2018.';
+              let yearSpanStr = requestedElectionCycle - 1;
+              yearSpanStr += `-${requestedElectionCycle}`;
+
+              let message = `You entered a committee that was not active during the ${yearSpanStr} period. \
+                Please enter a nonconnected PAC name or ID active during ${yearSpanStr}.`;
+              this.pacs[i].errorMessage = message;
             } else {
               this.pacs[i].errorMessage = 'HANDLE THIS';
+              // TODO
             }
             this.pacs[i].isLoading = false;
             // re-enable the typeahead
@@ -480,18 +562,22 @@ new Vue({
         }
       }
     },
+    handleWindowResize: function() {
+      this.sliderWidth = this.$el.offsetWidth / 2;
+    },
+    /**
+     * The rules are complicated for whether a committee is nonconnected so they're their own function
+     * @returns {(Boolean|String)} Boolean if a committee IS or is NOT a nonconnected committee, 'maybe' if more data is needed (i.e., organization_type)
+     * TODO: move this to calcPacValues when the API returns a is_nonconnected value
+     */
     isNonconnectedPac: function(pacSlotPos) {
       /* Valid rules to find nonconnected committees:
-
         1. committee type in            [O, U, V, W]
         2. committee designation NOT in [A, J, P]
-
         OR
-
         1. committee type in            [N, Q]
         2. committee designation NOT in [A, J, P]
         3. org type NOT in              [C, L, M, T, W]
-
       */
       let cType = this.pacs[pacSlotPos].dataDetails.committee_type;
       let cDesig = this.pacs[pacSlotPos].dataDetails.committee_designation;
@@ -502,10 +588,6 @@ new Vue({
       )
         oType = String(this.pacs[pacSlotPos].cmteDetails.organization_type);
 
-      console.log('cmteDetails: ', this.pacs[pacSlotPos].cmteDetails);
-      console.log('organization_type: ', this.pacs[pacSlotPos].cmteDetails.organization_type);
-      console.log('cType, cDesig, oType: ', cType, cDesig, oType);
-
       let validCmteTypesWithOrgType = ['O', 'U', 'V', 'W'];
       let validCmteTypesWithoutOrgType = ['N', 'Q'];
       let invalidOrgTypes = ['C', 'L', 'M', 'T', 'W'];
@@ -514,7 +596,7 @@ new Vue({
       let toReturn = false;
 
       if (invalidDesigs.includes(cDesig)) {
-        // If we have an invalid designation, its not nonconnected
+        // If we have an invalid designation, it's not nonconnected
         // We'll let toReturn stay false
       } else if (validCmteTypesWithoutOrgType.includes(cType)) {
         // If the committee type doesn't need an org type, we're safe to return
@@ -532,10 +614,12 @@ new Vue({
         toReturn = true;
       }
 
-      console.log('isNonConnectedPac: ', toReturn);
-
       return toReturn;
     },
+    /**
+     *
+     * @param {number} pacSlotPos {integer}
+     */
     calcPacValues: function(pacSlotPos) {
       let toReturn = {};
       let d = this.pacs[pacSlotPos].dataDetails;
@@ -554,7 +638,7 @@ new Vue({
           day: '2-digit',
           month: '2-digit',
           year: '2-digit',
-          timeZone: 'America/New_York'
+          timeZone: 'GMT'
         };
         let startDate = new Date(d.coverage_start_date).toLocaleDateString(
           'us-EN',
@@ -632,10 +716,8 @@ new Vue({
         'refunds_relating_convention_exp'
       ];
       otherSpend.forEach(value => {
-        console.log('otherSpend.forEach(): ', value, d[value]);
         if (d[value]) toReturn.otherSpending += d[value];
       });
-      console.log('toReturn.otherSpending: ', toReturn.otherSpending);
       toReturn.otherSpendingStr = this.formatAsCurrency(toReturn.otherSpending);
       toReturn.otherSpendingPct = toReturn.otherSpending / toReturn.totDisburse;
       toReturn.otherSpendingPctStr = this.percentString(
@@ -656,7 +738,8 @@ new Vue({
     },
     percentString: function(val) {
       let v = val * 100;
-      return v < 1 ? '<1%' : `${Math.round(v)}%`;
+      if (val === 0) return '0%';
+      else return v < 1 ? '<1%' : `${Math.round(v)}%`;
     }
   }
 });

From cbf53bbb6e7c7690c16fd34c2cb1acac439ac99e Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Fri, 17 Jul 2020 17:12:02 -0400
Subject: [PATCH 4/5] Added a couple more chart formats

---
 .../partials/browse-data/committees.jinja     |  79 +++++-
 fec/fec/static/js/modules/pac-comparator.js   | 262 ++++++++++++++----
 2 files changed, 280 insertions(+), 61 deletions(-)

diff --git a/fec/data/templates/partials/browse-data/committees.jinja b/fec/data/templates/partials/browse-data/committees.jinja
index 3e10e74a74..fe5ebe08c4 100644
--- a/fec/data/templates/partials/browse-data/committees.jinja
+++ b/fec/data/templates/partials/browse-data/committees.jinja
@@ -119,6 +119,12 @@
         position: absolute;
         width: 1rem;
       }
+      .icon-bar {
+        border-radius: 0;
+        height: .5rem;
+        min-width: 1px;
+        width: 1px;
+      }
       .icon-pac.pac-0 {
         /* Sketch */
         background-color: #F77B42;
@@ -192,10 +198,21 @@
         height: 2px;
         background-color: #E8E8E8;
       }
+      table.sliders .slider.bars {
+        height: 1rem;
+      }
       table.sliders .slider .icon-pac {
         top: calc(-.5rem + 1px);
         transition: left 1s;
       }
+      table.sliders .slider .icon-bar.pac-0 {
+        top: 0;
+        transition: width 1s;
+      }
+      table.sliders .slider .icon-bar.pac-1 {
+        top: .5rem;
+        transition: width 1s;
+      }
       table.sliders .t-right-aligned span {
         display: block;
         line-height: 1.1em;
@@ -211,10 +228,11 @@
         position: relative;
       }
       table.sliders .ticks .tick {
-        width: 4rem;
-        text-align: center;
-        position: relative;
         display: inline-block;
+        font-weight: normal;
+        position: relative;
+        text-align: center;
+        width: 4rem;
 
         /* Sketch */
         color: #4A4A4A;
@@ -246,6 +264,61 @@
         padding-top: 0;
       }
 
+      .barsV {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+      .barsV figure {
+        width: 25%;
+        text-align: center;
+      }
+      .barsV figure figcaption {
+        line-height: 1.25em;
+      }
+      .bar-v-group {
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+      }
+      .bar-v-group .icon-pac {
+        position: relative;
+      }
+      .icon-bar-v {
+        border-radius: 0;
+        height: 1px;
+        min-height: 1px;
+        width: 4rem;
+      }
+      .icon-bar-v label {
+        line-height: 1.1em;
+        padding-top: .25rem;
+        position: absolute;
+        top: .5rem;
+      }
+      .icon-bar-v.pac-0 label {
+        right: .5rem;
+        text-align: right;
+      }
+      .icon-bar-v.pac-1 label {
+        left: .5rem;
+        text-align: left;
+      }
+      .icon-bar-v label span {
+        display: block;
+        font-style: normal;
+      }
+      .icon-bar-v label span:first-child {
+        font-weight: bold;
+        font-size: 1.5rem;
+      }
+      .icon-bar-v label span:last-child {
+        font-size: 1.1rem;
+      }
+      .icon-bar-v label.above {
+        top: -35px;
+      }
     </style>
   </div>
   <h3>Search or browse data</h3>
diff --git a/fec/fec/static/js/modules/pac-comparator.js b/fec/fec/static/js/modules/pac-comparator.js
index 092c115534..19094e6f6b 100644
--- a/fec/fec/static/js/modules/pac-comparator.js
+++ b/fec/fec/static/js/modules/pac-comparator.js
@@ -129,14 +129,13 @@ Vue.component('slider', {
   },
   template: `
     <div
-      :style="'width:' + data.width + 'px'"
       class="slider"
     >
       <i
-        :style="'left: ' + data.v0 + '%'"
+        :style="'left: ' + Math.min(data.v0, 100) + '%'"
         class="icon-pac pac-0">&nbsp;</i>
       <i
-        :style="'left: ' + data.v1 + '%'"
+        :style="'left: ' + Math.min(data.v1, 100) + '%'"
         class="icon-pac pac-1">&nbsp;</i>
       &nbsp;
   </div>
@@ -170,70 +169,109 @@ Vue.component('sliders', {
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <th>Operating expenditures</th>
+      <tr v-for="root in ['operExpend', 'contribs', 'indExpend', 'otherSpending']">
+        <th>{{ pacs[0].calc[root + 'Label'] }}</th>
         <td class="meters" role="graphics-dataline">
           <slider
-            :data="{'v0': pacs[0].calc.operExpendPct * 100, 'v1': pacs[1].calc.operExpendPct * 100, 'width': sliderWidth}"
+            :data="{'v0': pacs[0].calc[root + 'Pct'] * 100, 'v1': pacs[1].calc[root + 'Pct'] * 100, 'width': sliderWidth}"
           ></slider>
         </td>
         <td class="t-right-aligned t-mono">
-          <span>{{ pacs[0].calc.operExpendPctStr }}</span>
-          <span>{{ pacs[0].calc.operExpendStr }}</span>
+          <span>{{ pacs[0].calc[root + 'PctStr'] }}</span>
+          <span>{{ pacs[0].calc[root + 'Str'] }}</span>
         </td>
         <td class="t-right-aligned t-mono">
-          <span>{{ pacs[1].calc.operExpendPctStr }}</span>
-          <span>{{ pacs[1].calc.operExpendStr }}</span>
+          <span>{{ pacs[1].calc[root + 'PctStr'] }}</span>
+          <span>{{ pacs[1].calc[root + 'Str'] }}</span>
         </td>
       </tr>
+      </tr>
+    </tbody>
+    <tfoot>
       <tr>
-        <th>Contributions to federal candidates / committees</th>
-        <td class="meters" role="graphics-dataline">
-          <slider
-            :data="{'v0': pacs[0].calc.contribsPct * 100, 'v1': pacs[1].calc.contribsPct * 100, 'width': sliderWidth}"
-          ></slider>
-        </td>
-        <td class="t-right-aligned t-mono">
-          <span>{{ pacs[0].calc.contribsPctStr }}</span>
-          <span>{{ pacs[0].calc.contribsStr }}</span>
-        </td>
-        <td class="t-right-aligned t-mono">
-          <span>{{ pacs[1].calc.contribsPctStr }}</span>
-          <span>{{ pacs[1].calc.contribsStr }}</span>
-        </td>
+        <th>&nbsp;</th>
+        <th class="ticks">
+          <span class="rule" role="display-only">&nbsp;</span>
+          <span class="tick" role="graphics-tick">0%</span>
+          <span class="tick" role="graphics-tick">25%</span>
+          <span class="tick" role="graphics-tick">50%</span>
+          <span class="tick" role="graphics-tick">75%</span>
+          <span class="tick" role="graphics-tick">100%</span>
+        </th>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
       </tr>
+    </tfoot>
+  </table>
+  `
+});
+
+Vue.component('sliderBar', {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  template: `
+    <div
+      class="slider bars"
+    >
+      <i
+        :style="'width: ' + Math.min(data.v0, 100) + '%'"
+        class="icon-pac icon-bar pac-0">&nbsp;</i>
+      <i
+        :style="'width: ' + Math.min(data.v1, 100) + '%'"
+        class="icon-pac icon-bar pac-1 ">&nbsp;</i>
+      &nbsp;
+  </div>
+  `
+});
+
+Vue.component('barsH', {
+  props: {
+    pacs: {
+      type: Array,
+      required: true
+    },
+    sliderWidth: {
+      type: Number,
+      required: true
+    }
+  },
+  template: `
+  <table class="sliders">
+    <thead>
       <tr>
-        <th>Independent expenditures</th>
-        <td class="meters" role="graphics-dataline">
-          <slider
-            :data="{'v0': pacs[0].calc.indExpendPct * 100, 'v1': pacs[1].calc.indExpendPct * 100, 'width': sliderWidth}"
-          ></slider>
-        </td>
-        <td class="t-right-aligned t-mono">
-          <span>{{ pacs[0].calc.indExpendPctStr }}</span>
-          <span>{{ pacs[0].calc.indExpendStr }}</span>
-        </td>
-        <td class="t-right-aligned t-mono">
-          <span>{{ pacs[1].calc.indExpendPctStr }}</span>
-          <span>{{ pacs[1].calc.indExpendStr }}</span>
-        </td>
+        <th>Expenditure type</th>
+        <th>Percentage of total expenditures</th>
+        <th colspan="2">Totals</th>
       </tr>
       <tr>
-        <th>All other spending</th>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+        <th class="t-right-aligned"><i class="icon-pac pac-0">&nbsp;</i></th>
+        <th class="t-right-aligned"><i class="icon-pac pac-1">&nbsp;</i></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="root in ['operExpend', 'contribs', 'indExpend', 'otherSpending']">
+        <th>{{ pacs[0].calc[root + 'Label'] }}</th>
         <td class="meters" role="graphics-dataline">
-          <slider
-            :data="{'val0': pacs[0].calc.otherSpendingPct * 100, 'val1': pacs[1].calc.otherSpendingPct * 100, 'width': sliderWidth}"
-          ></slider>
+          <sliderBar
+            :data="{'v0': pacs[0].calc[root + 'Pct'] * 100, 'v1': pacs[1].calc[root + 'Pct'] * 100, 'width': sliderWidth}"
+          ></sliderBar>
         </td>
         <td class="t-right-aligned t-mono">
-          <span>{{ pacs[0].calc.otherSpendingPctStr }}</span>
-          <span>{{ pacs[0].calc.otherSpendingStr }}</span>
+          <span>{{ pacs[0].calc[root + 'PctStr'] }}</span>
+          <span>{{ pacs[0].calc[root + 'Str'] }}</span>
         </td>
         <td class="t-right-aligned t-mono">
-          <span>{{ pacs[1].calc.otherSpendingPctStr }}</span>
-          <span>{{ pacs[1].calc.otherSpendingStr }}</span>
+          <span>{{ pacs[1].calc[root + 'PctStr'] }}</span>
+          <span>{{ pacs[1].calc[root + 'Str'] }}</span>
         </td>
       </tr>
+      </tr>
     </tbody>
     <tfoot>
       <tr>
@@ -254,6 +292,63 @@ Vue.component('sliders', {
   `
 });
 
+Vue.component('barV', {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      labelPos: { top: '0px;' }
+    };
+  },
+  template: `
+  <i
+    :style="'height: ' + Math.min(data.pct * 100, 100) + '%'"
+    :class="data.barClasses"
+    >
+    <label :class="{above: data.pct < 0.5}"><span>{{ data.pctStr }}</span><span>{{ data.vStr }}</span></label>
+  </i>
+  `
+});
+
+Vue.component('barsV', {
+  props: {
+    pacs: {
+      type: Array,
+      required: true
+    }
+  },
+  template: `
+  <div class="barsV">
+    <figure
+      v-for="root in ['operExpend', 'contribs', 'indExpend', 'otherSpending']">
+      <div class="bar-v-group">
+        <barV
+          :data="{
+            'pct': pacs[0].calc[root + 'Pct'],
+            'pctStr': pacs[0].calc[root + 'PctStr'],
+            'vStr': pacs[0].calc[root + 'Str'],
+            'barClasses': 'icon-pac icon-bar-v pac-0'
+          }"
+        ></barV>
+        <barV
+          :data="{
+            'pct': pacs[1].calc[root + 'Pct'],
+            'pctStr': pacs[1].calc[root + 'PctStr'],
+            'vStr': pacs[1].calc[root + 'Str'],
+            'barClasses': 'icon-pac icon-bar-v pac-1'
+          }"
+        ></barV>
+      </div>
+      <figcaption>{{ pacs[0].calc[root + 'Label'] }}</figcaption>
+    </figure>
+  </div>
+  `
+});
+
 new Vue({
   el: '#pac-comparator',
   data: {
@@ -264,7 +359,7 @@ new Vue({
     pacs: [
       {
         key: 'pacSlot0',
-        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpend: 0 }, // Calculated values (derived from dataDetails when they're loaded)
+        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpending: 0 }, // Calculated values (derived from dataDetails when they're loaded)
         cmteDetails: {}, // Details about the committee org
         dataDetails: {}, // Committee's financial query results
         dataSummary: { id: '', name: '' }, // Typeahead results
@@ -273,7 +368,7 @@ new Vue({
       },
       {
         key: 'pacSlot1',
-        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpend: 0 },
+        calc: { contribs: 0, indExpend: 0, operExpend: 0, otherSpending: 0 },
         cmteDetails: {},
         dataDetails: {},
         dataSummary: { id: '', name: '' },
@@ -317,6 +412,13 @@ new Vue({
         :pacs="pacs"
         :slider-width="sliderWidth">
       </sliders>
+      <barsH
+        :pacs="pacs"
+        :slider-width="sliderWidth">
+      </barsH>
+      <barsV
+        :pacs="pacs">
+      </barsV>
     </div>
   </div>`,
   beforeMount: function() {
@@ -325,6 +427,9 @@ new Vue({
       this.electionCycles.push({ value: i, label: `${i - 1}-${i}` });
     }
 
+    // Init (reset) pac values
+    this.calcPacValues(null, { reset: true });
+
     // Listen to window resize to determine internet component sizes
     window.addEventListener('resize', this.handleWindowResize);
     // And grab the width now
@@ -343,12 +448,7 @@ new Vue({
       this.pacs[vueComponent.id].dataSummary = typeaheadResults;
       this.pacs[vueComponent.id].cmteDetails = {}; // reset committee details
       this.pacs[vueComponent.id].dataDetails = {}; // reset committee data
-      this.pacs[vueComponent.id].calc = {
-        contribs: 0,
-        indExpend: 0,
-        operExpend: 0,
-        otherSpend: 0
-      }; // reset calculated fields
+      this.calcPacValues(vueComponent.id, { reset: true }); // reset calculated fields
       this.startLoadingCommitteeData(vueComponent.id);
     },
     handleCommitteeHeaderClick: function(
@@ -454,6 +554,8 @@ new Vue({
             } else {
               this.pacs[i].errorMessage =
                 'You entered a committee that is not a nonconnected PAC. Please enter an active nonconnected PAC name or ID.';
+              this.calcPacValues(i, { reset: true });
+              this.pacs[i].isLoading = false;
             }
             break; // no reason to check another
           }
@@ -618,12 +720,56 @@ new Vue({
     },
     /**
      *
-     * @param {number} pacSlotPos {integer}
+     * @param {(number|null)} pacSlotPos Indicates which this.pacs to save. A null value will reset all of them regardless of options.reset
+     * @param {Object} options Object
+     * @param {Boolean} options.reset Used to reset an item in this.pacs
      */
-    calcPacValues: function(pacSlotPos) {
-      let toReturn = {};
-      let d = this.pacs[pacSlotPos].dataDetails;
+    calcPacValues: function(pacSlotPos, options = { reset: false }) {
+      let d = this.pacs[pacSlotPos] ? this.pacs[pacSlotPos].dataDetails : {};
+
+      let toReturn = {
+        // Default, universal
+        contribsLabel: 'Contributions to federal candidates / committees',
+        indExpendLabel: 'Independent expenditures',
+        operExpendLabel: 'Operating expenditures',
+        otherSpendingLabel: 'Other spending'
+      };
+
+      // If we need to reset, let's just do that and jump out
+      if (options.reset === true) {
+        toReturn = Object.assign(toReturn, {
+          pacType: '',
+          coverageDatesStatement: '',
+          totDisburse: 0,
+          totDisburseStr: '',
+          contribs: 0,
+          contribsStr: '',
+          contribsPct: 0,
+          contribsPctStr: '',
+          indExpend: 0,
+          indExpendStr: '',
+          indExpendPct: 0,
+          indExpendPctStr: '',
+          operExpend: 0,
+          operExpendStr: '',
+          operExpendPct: 0,
+          operExpendPctStr: '',
+          otherSpending: 0,
+          otherSpendingStr: '',
+          otherSpendingPct: 0,
+          otherSpendingPctStr: ''
+        });
 
+        if (options.reset === true && pacSlotPos === null) {
+          // If there's no slot provided, let's hit them all
+          for (let i = 0; i < this.pacs.length; i++) {
+            this.pacs[i].calc = toReturn;
+          }
+        } else if (options.reset === true && this.pacs[pacSlotPos]) {
+          this.pacs[pacSlotPos].calc = toReturn;
+        }
+        return;
+      }
       // Total disbursements
       toReturn.totDisburse = d.disbursements;
       toReturn.totDisburseStr = this.formatAsCurrency(d.disbursements);

From 0d93053ea87b90011edbf18e9221038d66055de1 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Mon, 20 Jul 2020 17:21:33 -0400
Subject: [PATCH 5/5] Fixed some math

---
 fec/fec/static/js/modules/pac-comparator.js | 32 +++++++++------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/fec/fec/static/js/modules/pac-comparator.js b/fec/fec/static/js/modules/pac-comparator.js
index 19094e6f6b..668d7aa53a 100644
--- a/fec/fec/static/js/modules/pac-comparator.js
+++ b/fec/fec/static/js/modules/pac-comparator.js
@@ -802,14 +802,16 @@ new Vue({
       toReturn.operExpendStr = '';
       toReturn.operExpendPct = 0;
       toReturn.operExpendPctStr = '';
-      if (d.operating_expenditures || d.operating_expenditures === 0) {
-        toReturn.operExpend = d.operating_expenditures;
+      if (
+        d.other_fed_operating_expenditures ||
+        d.other_fed_operating_expenditures === 0
+      ) {
+        toReturn.operExpend = d.other_fed_operating_expenditures;
         toReturn.operExpendStr = this.formatAsCurrency(
-          d.operating_expenditures,
+          d.other_fed_operating_expenditures,
           true
         );
-        toReturn.operExpendPct =
-          d.operating_expenditures / toReturn.totDisburse;
+        toReturn.operExpendPct = toReturn.operExpend / toReturn.totDisburse;
         toReturn.operExpendPctStr = this.percentString(toReturn.operExpendPct);
       }
 
@@ -819,10 +821,10 @@ new Vue({
       toReturn.contribsPct = 0;
       toReturn.contribsPctStr = '';
       if (
-        (d.contributions && d.contribution_refunds) ||
-        (d.contributions === 0 && d.contribution_refunds === 0)
+        d.fed_candidate_committee_contributions ||
+        d.fed_candidate_committee_contributions === 0
       ) {
-        toReturn.contribs = d.contributions - d.contribution_refunds;
+        toReturn.contribs = d.fed_candidate_committee_contributions;
         toReturn.contribsStr = this.formatAsCurrency(toReturn.contribs, true);
         toReturn.contribsPct = toReturn.contribs / toReturn.totDisburse;
         toReturn.contribsPctStr = this.percentString(toReturn.contribsPct);
@@ -847,19 +849,13 @@ new Vue({
       toReturn.otherSpendingPctStr = '';
       // To make the code shorter, here's a list of var names included with otherSpending
       let otherSpend = [
+        'contribution_refunds',
         'coordinated_expenditures_by_party_committee',
         'fed_election_activity',
-        'other_disbursements',
-        'total_transfers',
-        'loan_repayments_made',
-        'loan_repayments_received',
-        'loans_and_loan_repayments_made',
-        'loans_and_loan_repayments_received',
+        'loan_repayments',
         'loans_made',
-        'refunded_individual_contributions',
-        'refunded_other_political_committee_contributions',
-        'refunded_political_party_committee_contributions',
-        'refunds_relating_convention_exp'
+        'other_disbursements',
+        'transfers_to_affiliated_committee'
       ];
       otherSpend.forEach(value => {
         if (d[value]) toReturn.otherSpending += d[value];