From a274bc7b706d591245a90b04a6c083d9c1def5a0 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 7 Jul 2021 16:33:48 -0400
Subject: [PATCH 01/16] Add the snapshot to the left column

---
 fec/data/templates/committees-single.jinja | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fec/data/templates/committees-single.jinja b/fec/data/templates/committees-single.jinja
index c5cde77d8d..42b6c58868 100644
--- a/fec/data/templates/committees-single.jinja
+++ b/fec/data/templates/committees-single.jinja
@@ -63,6 +63,7 @@
             aria-selected="true">Financial Summary</a>
             {% if committee_type != 'I' %}
             <ul>
+              <li><a href="#committee-snapshot">Committee snapshot</a></li>
               <li><a href="#total-raised">Total raised</a></li>
               <li><a href="#total-spent">Total spent</a></li>
               <li><a href="#cash-summary">Cash summary</a></li>

From 60f12e04d9cea330e6a538e38958cb2ebbf05a46 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 7 Jul 2021 16:34:16 -0400
Subject: [PATCH 02/16] WIP

---
 .../committee/financial-summary.jinja         | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index ec7f8ebf05..1bc2ef9d44 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -34,6 +34,136 @@
             {{ missing_transferred.missing_transferred_committee_message(former_committee_name, former_authorized_candidate_name, former_authorized_candidate_id) }}
           </div>
         {% endif %}
+        <style>
+          #committee-snapshot .tag__category {
+            border-bottom-color: #112e51;
+            border-bottom-style: solid;
+            border-bottom-width: 2px 0;
+          }
+          #committee-snapshot .donut text {
+            font-family: 'karla';
+            font-size: 1rem;
+            font-weight: bold;
+          }
+
+          #committee-snapshot .donut.raising .segment {
+            stroke: #F77B42;
+          }
+          #committee-snapshot .donut.raising text {
+            fill: #F77B42;
+          }
+
+          #committee-snapshot .donut.spending .segment {
+            stroke: #35BDBB;
+          }
+          #committee-snapshot .donut.spending text {
+            fill: #35BDBB;
+          }
+        </style>
+        <div class="entity__figure entity__figure--narrow" id="committee-snapshot">
+          <div class="heading--section heading--with-action">
+            <h3>Committee snapshot</h3>
+          </div>
+          <p>Learn more about hybrid PACs like ACTBLUE.</p>
+          <div class="tag__category">
+            <div class="tag__item">Coverage dates: {{totals.coverage_start_date|date}} to {{totals.coverage_end_date|date}}</div>
+          </div>
+          <div>Total receipts: $ <div></div>| Total disbursements: $ <div></div>| Cash on hand: $<div></div></div>
+          <div class="grid grid--2-wide">
+            <div class="grid__item">
+              <h4 class="t-centered">Money raised</h4>
+              <div class="grid grid--2-wide">
+                <div class="grid__item">
+                  <figure>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut raising" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
+                      <title id="snap-raise-ind-t">Percent raised from individual conributions during 2019-2020</title>
+                      <desc id="snap-raise-ind-d">98% of money raised came from individual contributions</desc>
+                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
+                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="98 2" stroke-dashoffset="25"></circle>
+                      <g class="chart-text">
+                        <text x="50%" y="57%" text-anchor="middle">98%</text>
+                      </g>
+                    </svg>
+                    <figcaption class="t-centered">Percent raised in invididual contributions</figcaption>
+                  </figure>
+                </div>
+                <div class="grid__item">
+                  <figure>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut raising" aria-labelledby="snap-raise-com-t snap-raise-com-d">
+                      <title id="snap-raise-com-t">Percent raised from other federal political committees during 2019-2020</title>
+                      <desc id="snap-raise-com-d">0% of money raised came from other federal political committees during 2019-2020</desc>
+                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
+                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="0.1 99.9" stroke-dashoffset="25"></circle>
+                      <text x="50%" y="57%" text-anchor="middle">0%</text>
+                    </svg>
+                    <figcaption class="t-centered">Percent raised in contributions from other federal political committees</figcaption>
+                  </figure>
+                </div>
+              </div>
+            </div>
+            <div class="grid__item">
+              <h4 class="t-centered">Money spent</h4>
+              <div class="grid grid--2-wide">
+                <div class="grid__item">
+                  <figure>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut spending" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
+                      <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees during 2019-2020</title>
+                      <desc id="snap-spend-com-d">96% of money spent went to other federal political committees during 2019-2020</desc>
+                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
+                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="96 4" stroke-dashoffset="25"></circle>
+                      <g class="chart-text">
+                        <text x="50%" y="57%" text-anchor="middle">96%</text>
+                      </g>
+                    </svg>
+                    <figcaption class="t-centered">Percent spent on contributions to other federal committees</figcaption>
+                  </figure>
+                </div>
+                <div class="grid__item">
+                  <figure>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut spending" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
+                      <title id="snap-spend-ox-t">Percent spent on operating expenditures during 2019-2020</title>
+                      <desc id="snap-spend-ox-d">96% of money spent on operating expenditures during 2019-2020</desc>
+                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
+                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="0.1 99.9" stroke-dashoffset="25"></circle>
+                      <text x="50%" y="57%" text-anchor="middle">&lt;1%</text>
+                    </svg>
+                    <figcaption class="t-centered">Percent spent on operating expenditures</figcaption>
+                  </figure>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="heading--with-action">
+            <p class="heading__left t-note">The percentages shown do not represent 100% of this committee's activity. Refer to the tables that follow for a complete breakdown of raising and spending.</p>
+            <button class="heading__right button--alt js-methodology" data-a11y-dialog-show="methodology-committee-snapshot">Methodology</button>
+          </div>
+          <div class="js-modal modal" id="methodology-committee-snapshot" aria-hidden="true">
+            <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>
+            <div role="dialog" class="modal__content" aria-labelledby="raised-modal-title">
+              <div role="document">
+                <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide="" title="Close this dialog window"></button>
+                <h2 id="raised-modal-title">Methodology</h2>
+                <strong>Receipts</strong>
+                <p>Percentage contributions from individuals</p>
+                <ul><li>Total individual contributions divided by total receipts (Form 3X Line 11(a)(iii) divided by Line 19)</li></ul>
+
+                <p>Contributions from party committees plus contributions from other federal committees divided by total receipts (Form 3X Line 11(b) + Line 11(c) divided by Line 19)</p>
+                <ul><li><strong>The language under the doughnut could be something like, "percent raised from contrbutions from PACS and party committees."</strong></li></ul>
+                <strong>Disbursements</strong>
+                <p>Percentage IEs, federal candidate contributions and party coordinated expenditures</p>
+                <ul><li>Contributions to federal candidates plus independent expenditures plus party coordinated expenditures divided by total disbursements (Form 3X Line 23 + 24 + 25 divided by Line 31)</li></ul>
+                <p>Percentage operating expenditures</p>
+                <ul><li>Total operating expenditures divided by total disbursements (Form 3X Line 21(c) divided by Line 31)</li></ul>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="entity__figure entity__figure--narrow" id="total-raised">
           <div class="heading--section heading--with-action">
             <h3 class="heading__left">Total raised</h3>

From 1583d9a87ab2cdf4818f330b1def31c14edb2c13 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Fri, 9 Jul 2021 14:54:10 -0400
Subject: [PATCH 03/16] Additional functionality and styles

---
 .../committee/financial-summary.jinja         | 155 +++++++++++++++---
 1 file changed, 129 insertions(+), 26 deletions(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index 1bc2ef9d44..ad55142a8c 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -40,6 +40,10 @@
             border-bottom-style: solid;
             border-bottom-width: 2px 0;
           }
+          #committee-snapshot figcaption {
+            text-align: center;
+          }
+
           #committee-snapshot .donut text {
             font-family: 'karla';
             font-size: 1rem;
@@ -59,47 +63,146 @@
           #committee-snapshot .donut.spending text {
             fill: #35BDBB;
           }
+
+          @media(max-width:648px) {
+            #committee-snapshot figure {
+              display: flex;
+              align-items: center;
+            }
+            #committee-snapshot figure svg {
+              width: 33.3%;
+            }
+            #committee-snapshot figcaption {
+              text-align: left;
+              width: 66.6%;
+            }
+          }
         </style>
         <div class="entity__figure entity__figure--narrow" id="committee-snapshot">
           <div class="heading--section heading--with-action">
             <h3>Committee snapshot</h3>
           </div>
-          <p>Learn more about hybrid PACs like ACTBLUE.</p>
+          {% set coverage_str = totals.coverage_start_date|date ~' to ' ~totals.coverage_end_date|date %}
+
+          {% if totals.individual_contributions_percent %}
+            {% set rec_ind = totals.individual_contributions_percent|round|int %}
+            {% set rec_ind_class = 'raising' %}
+            {% set rec_ind_ring = '0 100' %}
+            {% set rec_ind_l = rec_ind ~'%' %}
+            {% if rec_ind > 100 %}
+            {% set rec_ind_l = '>100%' %}
+            {% set rec_ind_ring = '100 0' %}
+            {% elif rec_ind > 0 and rec_ind < 1 %}
+            {% set rec_ind_l = '<1%' %}
+            {% else %}
+            {% set rec_ind_ring = rec_ind ~ ' ' ~ (100 - rec_ind) %}
+            {% endif %}
+          {% else %}
+            {% set rec_ind_l = '!' %}
+            {% set rec_ind_ring = '0 100' %}
+            {% set rec_ind_class = '' %}
+          {% endif %}
+
+          {% if totals.party_and_other_committee_contributions_percent %}
+            {% set rec_com = totals.party_and_other_committee_contributions_percent|round|int %}
+            {% set rec_com_class = 'raising' %}
+            {% set rec_com_ring = '0 100' %}
+            {% set rec_com_l = rec_com ~'%' %}
+            {% if rec_com > 100 %}
+            {% set rec_com_l = '>100%' %}
+            {% set rec_com_ring = '100 0' %}
+            {% elif rec_com > 0 and rec_com < 1 %}
+            {% set rec_com_l = '<1%' %}
+            {% else %}
+            {% set rec_com_ring = rec_com ~ ' ' ~ (100 - rec_com) %}
+            {% endif %}
+          {% else %}
+            {% set rec_com_l = '!' %}
+            {% set rec_com_ring = '0 100' %}
+            {% set rec_com_class = '' %}
+          {% endif %}
+
+          {% if totals.contributions_ie_and_party_expenditures_made_percent %}
+            {% set dis_com = totals.contributions_ie_and_party_expenditures_made_percent|round|int %}
+            {% set dis_com_class = 'spending' %}
+            {% set dis_com_ring = '0 100' %}
+            {% set dis_com_l = dis_com ~'%' %}
+            {% if dis_com > 100 %}
+            {% set dis_com_l = '>100%' %}
+            {% set dis_com_ring = '100 0' %}
+            {% elif dis_com > 0 and dis_com < 1 %}
+            {% set dis_com_l = '<1%' %}
+            {% else %}
+            {% set dis_com_ring = dis_com ~ ' ' ~ (100 - dis_com) %}
+            {% endif %}
+          {% else %}
+            {% set dis_com_l = '!' %}
+            {% set dis_com_ring = '0 100' %}
+            {% set dis_com_class = '' %}
+          {% endif %}
+
+          {% if totals.operating_expenditures_percent %}
+            {% set dis_oe = totals.operating_expenditures_percent|round|int %}
+            {% set dis_oe_class = 'spending' %}
+            {% set dis_oe_ring = '0 100' %}
+            {% set dis_oe_l = dis_oe ~'%' %}
+            {% if dis_oe > 100 %}
+            {% set dis_oe_l = '>100%' %}
+            {% set dis_oe_ring = '100 0' %}
+            {% elif dis_oe > 0 and dis_oe < 1 %}
+            {% set dis_oe_l = '<1%' %}
+            {% else %}
+            {% set dis_oe_ring = dis_oe ~ ' ' ~ (100 - dis_oe) %}
+            {% endif %}
+          {% else %}
+            {% set dis_oe_l = '!' %}
+            {% set dis_oe_ring = '0 100' %}
+            {% set dis_oe_class = '' %}
+          {% endif %}
+
+
+          <p>Learn more about <span class="term" data-term="hybrid pac" title="Click to define" tabindex="0">hybrid PACs</span> like ACTBLUE.</p>
           <div class="tag__category">
-            <div class="tag__item">Coverage dates: {{totals.coverage_start_date|date}} to {{totals.coverage_end_date|date}}</div>
+            <div class="tag__item">Coverage dates: {{ coverage_str }}</div>
+          </div>
+          <div>
+            <div>Total receipts: <strong>{{ totals.fed_receipts|currency }}</strong></div>
+            <div>|</div>
+            <div>Total disbursements: <strong>{{ totals.fed_disbursements|currency }}</strong></div>
+            <div>|</div>
+            <div>Cash on hand: <strong>{{ totals.last_cash_on_hand_end_period|currency }}</strong></div>
           </div>
-          <div>Total receipts: $ <div></div>| Total disbursements: $ <div></div>| Cash on hand: $<div></div></div>
           <div class="grid grid--2-wide">
             <div class="grid__item">
               <h4 class="t-centered">Money raised</h4>
               <div class="grid grid--2-wide">
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut raising" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
-                      <title id="snap-raise-ind-t">Percent raised from individual conributions during 2019-2020</title>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
+                      <title id="snap-raise-ind-t">Percent raised from individual conributions {{ coverage_str }}</title>
                       <desc id="snap-raise-ind-d">98% of money raised came from individual contributions</desc>
                       <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
                       <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="98 2" stroke-dashoffset="25"></circle>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="{{ rec_ind_ring }}" stroke-dashoffset="25"></circle>
                       <g class="chart-text">
-                        <text x="50%" y="57%" text-anchor="middle">98%</text>
+                        <text x="50%" y="57%" text-anchor="middle">{{ rec_ind_l }}</text>
                       </g>
                     </svg>
-                    <figcaption class="t-centered">Percent raised in invididual contributions</figcaption>
+                    <figcaption>Percent raised in individual <span class="term" data-term="contribution" title="Click to define" tabindex="0">contributions</span></figcaption>
                   </figure>
                 </div>
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut raising" aria-labelledby="snap-raise-com-t snap-raise-com-d">
-                      <title id="snap-raise-com-t">Percent raised from other federal political committees during 2019-2020</title>
-                      <desc id="snap-raise-com-d">0% of money raised came from other federal political committees during 2019-2020</desc>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
+                      <title id="snap-raise-com-t">Percent raised from other federal political committees {{ coverage_str }}</title>
+                      <desc id="snap-raise-com-d">0% of money raised came from other federal political committees</desc>
                       <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
                       <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="0.1 99.9" stroke-dashoffset="25"></circle>
-                      <text x="50%" y="57%" text-anchor="middle">0%</text>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="{{ rec_com_ring }}" stroke-dashoffset="25"></circle>
+                      <text x="50%" y="57%" text-anchor="middle">{{ rec_com_l }}</text>
                     </svg>
-                    <figcaption class="t-centered">Percent raised in contributions from other federal political committees</figcaption>
+                    <figcaption>Percent raised in contributions from other federal <span class="term" data-term="political committee" title="Click to define" tabindex="0">political committees</span></figcaption>
                   </figure>
                 </div>
               </div>
@@ -109,31 +212,31 @@
               <div class="grid grid--2-wide">
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut spending" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
-                      <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees during 2019-2020</title>
-                      <desc id="snap-spend-com-d">96% of money spent went to other federal political committees during 2019-2020</desc>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
+                      <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees {{ coverage_str }}</title>
+                      <desc id="snap-spend-com-d">96% of money spent went to other federal political committees</desc>
                       <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
                       <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="96 4" stroke-dashoffset="25"></circle>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="{{ dis_com_ring }}" stroke-dashoffset="25"></circle>
                       <g class="chart-text">
-                        <text x="50%" y="57%" text-anchor="middle">96%</text>
+                        <text x="50%" y="57%" text-anchor="middle">{{ dis_com_l }}</text>
                       </g>
                     </svg>
-                    <figcaption class="t-centered">Percent spent on contributions to other federal committees</figcaption>
+                    <figcaption>Percent spent on contributions to other <span class="term" data-term="national committee" title="Click to define" tabindex="0">federal committees</span></figcaption>
                   </figure>
                 </div>
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut spending" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
-                      <title id="snap-spend-ox-t">Percent spent on operating expenditures during 2019-2020</title>
-                      <desc id="snap-spend-ox-d">96% of money spent on operating expenditures during 2019-2020</desc>
+                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
+                      <title id="snap-spend-ox-t">Percent spent on operating expenditures {{ coverage_str }}</title>
+                      <desc id="snap-spend-ox-d">96% of money spent on operating expenditures</desc>
                       <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
                       <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="0.1 99.9" stroke-dashoffset="25"></circle>
-                      <text x="50%" y="57%" text-anchor="middle">&lt;1%</text>
+                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="{{ dis_oe_ring }}" stroke-dashoffset="25"></circle>
+                      <text x="50%" y="57%" text-anchor="middle">{{ dis_oe_l }}</text>
                     </svg>
-                    <figcaption class="t-centered">Percent spent on operating expenditures</figcaption>
+                    <figcaption>Percent spent on <span class="term" data-term="operating expenditures" title="Click to define" tabindex="0">operating expenditures</span></figcaption>
                   </figure>
                 </div>
               </div>

From c28b1f5159b5facd46915a0b31bbe8e6a10dc401 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 14 Jul 2021 16:44:37 -0400
Subject: [PATCH 04/16] Add human-friendly committee types to get_committee?

---
 fec/data/views.py | 84 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/fec/data/views.py b/fec/data/views.py
index 183f4ccd6b..0fd9862783 100644
--- a/fec/data/views.py
+++ b/fec/data/views.py
@@ -456,11 +456,91 @@ def get_committee(committee_id, cycle):
                 sponsor_candidate["related_cycle"] = cycle if election_years else None
                 sponsor_candidates.append(sponsor_candidate)
 
+    # Human-friendly text and glossary links for the front-end
+    com_org_type = committee.get('organization_type')
+    com_com_type = committee.get('committee_type')
+    com_desig = committee.get('designation')
+    # The big "can't be" tests for the others
+    if com_org_type == 'C':
+        com_type_text = 'corporate'
+        com_type_glossary = 'Corporation'
+    elif com_org_type == 'W':
+        com_type_text = 'corporations without capital stock'
+        com_type_glossary = ''
+    elif com_org_type == 'L':
+        com_type_text = 'labor organization'
+        com_type_glossary = 'Labor organization'
+    elif com_org_type == 'M':
+        com_type_text = 'membership organization'
+        com_type_glossary = 'Membership organization'
+    elif com_org_type == 'T':
+        com_type_text = 'trade association'
+        com_type_glossary = 'Trade association'
+    elif com_org_type == 'V':
+        com_type_text = 'cooperatives'
+        com_type_glossary = ''
+    elif com_org_type == 'D':
+        com_type_text = 'leadership PACs'
+        com_type_glossary = ''
+    elif com_com_type == 'H':
+        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_glossary = ''
+    elif com_com_type == 'S':
+        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_glossary = ''
+    elif com_com_type == 'P':
+        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_glossary = ''
+    elif com_desig == 'B':
+        com_type_text = 'lobbyist-registrant PACs'
+        com_type_glossary = 'Lobbyist/Registrant PAC'
+    elif com_desig == 'D':
+        com_type_text = 'leadership PACs'
+        com_type_glossary = 'Leadership PAC'
+    elif com_desig == 'J':
+        com_type_text = 'joint fundraising committees'
+        com_type_glossary = 'Joint fundraising committee'
+    elif com_desig == 'A':
+        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_glossary = ''
+    elif com_desig == 'P':
+        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_glossary = ''
+    elif com_com_type == 'O':
+        com_type_text = 'super PACs'
+        com_type_glossary = 'Super PAC'
+    elif com_com_type == 'W':
+        com_type_text = 'hybrid PACs'
+        com_type_glossary = 'Hybrid PAC'
+    elif com_com_type == 'V':
+        com_type_text = 'hybrid PACs'
+        com_type_glossary = 'Hybrid PAC'
+    elif com_com_type == 'N':
+        com_type_text = 'political action committees'
+        com_type_glossary = 'Political Action Committee (PAC)'
+    elif com_com_type == 'Q':
+        com_type_text = 'political action committees'
+        com_type_glossary = 'Political Action Committee (PAC)'
+    elif com_com_type == 'U':
+        com_type_text = '=====TBD====='
+        com_type_glossary = ''
+    elif com_com_type == 'I':
+        com_type_text = '=====TBD====='
+        com_type_glossary = ''
+    elif com_com_type == 'Y':
+        com_type_text = 'party committees'
+        com_type_glossary = 'Party committee'
+    elif com_com_type == 'X':
+        com_type_text = 'party committees'
+        com_type_glossary = 'Party committee'
+
     template_variables = {
         "candidates": candidates,
         "committee": committee,
         "committee_id": committee_id,
         "committee_type": committee["committee_type"],
+        "com_type_text": com_type_text,
+        "com_type_glossary": com_type_glossary,
         "context_vars": context_vars,
         "cycle": cycle,
         "cycles": cycles,
@@ -559,6 +639,10 @@ def committee(request, committee_id):
 
     cycle = request.GET.get("cycle", None)
     committee = get_committee(committee_id, cycle)
+
+    com_type_text = ''
+    com_type_glossary = ''
+
     return render(request, "committees-single.jinja", committee)
 
 

From 2ad652886ac59754371dc658f34d81284d822873 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 14 Jul 2021 16:45:06 -0400
Subject: [PATCH 05/16] Snapshot template progress

---
 .../committee/financial-summary.jinja         | 126 +++++++-----------
 1 file changed, 51 insertions(+), 75 deletions(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index ad55142a8c..ddc7d342b8 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -34,54 +34,13 @@
             {{ missing_transferred.missing_transferred_committee_message(former_committee_name, former_authorized_candidate_name, former_authorized_candidate_id) }}
           </div>
         {% endif %}
-        <style>
-          #committee-snapshot .tag__category {
-            border-bottom-color: #112e51;
-            border-bottom-style: solid;
-            border-bottom-width: 2px 0;
-          }
-          #committee-snapshot figcaption {
-            text-align: center;
-          }
-
-          #committee-snapshot .donut text {
-            font-family: 'karla';
-            font-size: 1rem;
-            font-weight: bold;
-          }
-
-          #committee-snapshot .donut.raising .segment {
-            stroke: #F77B42;
-          }
-          #committee-snapshot .donut.raising text {
-            fill: #F77B42;
-          }
-
-          #committee-snapshot .donut.spending .segment {
-            stroke: #35BDBB;
-          }
-          #committee-snapshot .donut.spending text {
-            fill: #35BDBB;
-          }
-
-          @media(max-width:648px) {
-            #committee-snapshot figure {
-              display: flex;
-              align-items: center;
-            }
-            #committee-snapshot figure svg {
-              width: 33.3%;
-            }
-            #committee-snapshot figcaption {
-              text-align: left;
-              width: 66.6%;
-            }
-          }
-        </style>
         <div class="entity__figure entity__figure--narrow" id="committee-snapshot">
-          <div class="heading--section heading--with-action">
+          <div class="heading--section">
             <h3>Committee snapshot</h3>
           </div>
+
+          {% set shared_circle_props = 'cx=21 cy=21 r=15.91549430918954' %}
+          {% set shared_text_props = 'x=50% y=57%' %}
           {% set coverage_str = totals.coverage_start_date|date ~' to ' ~totals.coverage_end_date|date %}
 
           {% if totals.individual_contributions_percent %}
@@ -160,17 +119,30 @@
             {% set dis_oe_class = '' %}
           {% endif %}
 
+          {# set the meters' max value to the greater of receipts or disbursements #}
+          {% if totals.fed_receipts and totals.fed_disbursements and totals.last_cash_on_hand_end_period %}
+            {% if totals.fed_receipts >= totals.fed_disbursements %}
+              {% set meters_max = totals.fed_receipts %}
+            {% else %}
+              {% set meters_max = totals.fed_disbursements %}
+            {% endif %}
+            {# but override both if COH is larger for some reason #}
+            {% if totals.last_cash_on_hand_end_period > meters_max %}
+              {% set meters_max = totals.last_cash_on_hand_end_period %}
+            {% endif %}
+          {% endif %}
 
-          <p>Learn more about <span class="term" data-term="hybrid pac" title="Click to define" tabindex="0">hybrid PACs</span> like ACTBLUE.</p>
+          <p>Learn more about <span class="term" data-term="{{ com_type_glossary }}" title="Click to define" tabindex="0">{{ com_type_text }}</span> like {{ committee.name }}.</p>
           <div class="tag__category">
             <div class="tag__item">Coverage dates: {{ coverage_str }}</div>
           </div>
-          <div>
-            <div>Total receipts: <strong>{{ totals.fed_receipts|currency }}</strong></div>
-            <div>|</div>
-            <div>Total disbursements: <strong>{{ totals.fed_disbursements|currency }}</strong></div>
-            <div>|</div>
-            <div>Cash on hand: <strong>{{ totals.last_cash_on_hand_end_period|currency }}</strong></div>
+          <div class="snapshot-summary">
+            <span class="t-data t-bold">Total receipts: <span class="t-normal">{{ totals.fed_receipts|currency }}</span></span>
+            <meter min="0" max="{{ meters_max }}" value="{{ totals.fed_receipts }}" title="US Dollars" data-cat="raising"></meter>
+            <span class="t-data t-bold">Total disbursements: <span class="t-normal">{{ totals.fed_disbursements|currency }}</span></span>
+            <meter min="0" max="{{ meters_max }}" value="{{ totals.fed_disbursements }}" title="US Dollars" data-cat="spending"></meter>
+            <span class="t-data t-bold">Cash on hand: <span class="t-normal">{{ totals.last_cash_on_hand_end_period|currency }}</span></span>
+            <meter min="0" max="{{ meters_max }}" value="{{ totals.last_cash_on_hand_end_period }}" title="US Dollars" data-cat="cash"></meter>
           </div>
           <div class="grid grid--2-wide">
             <div class="grid__item">
@@ -178,14 +150,14 @@
               <div class="grid grid--2-wide">
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
+                    <svg viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
                       <title id="snap-raise-ind-t">Percent raised from individual conributions {{ coverage_str }}</title>
                       <desc id="snap-raise-ind-d">98% of money raised came from individual contributions</desc>
-                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
-                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="{{ rec_ind_ring }}" stroke-dashoffset="25"></circle>
+                      <circle class="center" {{ shared_circle_props }}></circle>
+                      <circle class="ring" {{ shared_circle_props }}></circle>
+                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ rec_ind_ring }}"></circle>
                       <g class="chart-text">
-                        <text x="50%" y="57%" text-anchor="middle">{{ rec_ind_l }}</text>
+                        <text {{ shared_text_props }}>{{ rec_ind_l }}</text>
                       </g>
                     </svg>
                     <figcaption>Percent raised in individual <span class="term" data-term="contribution" title="Click to define" tabindex="0">contributions</span></figcaption>
@@ -193,14 +165,14 @@
                 </div>
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
+                    <svg viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
                       <title id="snap-raise-com-t">Percent raised from other federal political committees {{ coverage_str }}</title>
                       <desc id="snap-raise-com-d">0% of money raised came from other federal political committees</desc>
-                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
-                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <circle class="center" {{ shared_circle_props }}></circle>
+                      <circle class="ring" {{ shared_circle_props }}></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="{{ rec_com_ring }}" stroke-dashoffset="25"></circle>
-                      <text x="50%" y="57%" text-anchor="middle">{{ rec_com_l }}</text>
+                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ rec_com_ring }}"></circle>
+                      <text {{ shared_text_props }}>{{ rec_com_l }}</text>
                     </svg>
                     <figcaption>Percent raised in contributions from other federal <span class="term" data-term="political committee" title="Click to define" tabindex="0">political committees</span></figcaption>
                   </figure>
@@ -212,14 +184,14 @@
               <div class="grid grid--2-wide">
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
+                    <svg viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
                       <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees {{ coverage_str }}</title>
                       <desc id="snap-spend-com-d">96% of money spent went to other federal political committees</desc>
-                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
-                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke-width="3" stroke-dasharray="{{ dis_com_ring }}" stroke-dashoffset="25"></circle>
+                      <circle class="center"{{ shared_circle_props }}></circle>
+                      <circle class="ring"{{ shared_circle_props }}></circle>
+                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ dis_com_ring }}"></circle>
                       <g class="chart-text">
-                        <text x="50%" y="57%" text-anchor="middle">{{ dis_com_l }}</text>
+                        <text {{ shared_text_props }}>{{ dis_com_l }}</text>
                       </g>
                     </svg>
                     <figcaption>Percent spent on contributions to other <span class="term" data-term="national committee" title="Click to define" tabindex="0">federal committees</span></figcaption>
@@ -227,14 +199,14 @@
                 </div>
                 <div class="grid__item">
                   <figure>
-                    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
+                    <svg viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
                       <title id="snap-spend-ox-t">Percent spent on operating expenditures {{ coverage_str }}</title>
                       <desc id="snap-spend-ox-d">96% of money spent on operating expenditures</desc>
-                      <circle class="center" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
-                      <circle class="ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1F1F1" stroke-width="3"></circle>
+                      <circle class="center" {{ shared_circle_props }}></circle>
+                      <circle class="ring" {{ shared_circle_props }}></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F77B42" stroke-width="3" stroke-dasharray="{{ dis_oe_ring }}" stroke-dashoffset="25"></circle>
-                      <text x="50%" y="57%" text-anchor="middle">{{ dis_oe_l }}</text>
+                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ dis_oe_ring }}"></circle>
+                      <text {{ shared_text_props }}>{{ dis_oe_l }}</text>
                     </svg>
                     <figcaption>Percent spent on <span class="term" data-term="operating expenditures" title="Click to define" tabindex="0">operating expenditures</span></figcaption>
                   </figure>
@@ -242,9 +214,13 @@
               </div>
             </div>
           </div>
-          <div class="heading--with-action">
-            <p class="heading__left t-note">The percentages shown do not represent 100% of this committee's activity. Refer to the tables that follow for a complete breakdown of raising and spending.</p>
-            <button class="heading__right button--alt js-methodology" data-a11y-dialog-show="methodology-committee-snapshot">Methodology</button>
+          <div class="footer-methodology">
+            <p class="t-note">
+              The percentages shown do not represent 100% of this committee's activity. Refer to the tables that follow for a complete breakdown of raising and spending.
+            </p>
+            <div>
+              <button class="button--alt js-methodology" data-a11y-dialog-show="methodology-committee-snapshot">Methodology</button>
+            </div>
           </div>
           <div class="js-modal modal" id="methodology-committee-snapshot" aria-hidden="true">
             <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>

From f3438a832fdce92295a0bd427a2230b0eaa751d2 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 14 Jul 2021 16:45:26 -0400
Subject: [PATCH 06/16] Add stylesheet specifically for committee-snapshot

---
 .../scss/components/_committee-snapshot.scss  | 168 ++++++++++++++++++
 fec/fec/static/scss/entity.scss               |   2 +
 2 files changed, 170 insertions(+)
 create mode 100644 fec/fec/static/scss/components/_committee-snapshot.scss

diff --git a/fec/fec/static/scss/components/_committee-snapshot.scss b/fec/fec/static/scss/components/_committee-snapshot.scss
new file mode 100644
index 0000000000..de810d9ba7
--- /dev/null
+++ b/fec/fec/static/scss/components/_committee-snapshot.scss
@@ -0,0 +1,168 @@
+#committee-snapshot {
+//   .tag__category {
+//     border-bottom-color: #112e51;
+//     border-bottom-style: solid;
+//     border-bottom-width: 2px 0;
+//   }
+  .footer-methodology {
+    border-top: 1px solid;
+    padding-top: 1em;
+
+    @include media($med) {
+      display: flex;
+    }
+    p {
+      margin-bottom: 1em;
+      
+      @include media($med) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .snapshot-summary {
+    padding-top: 1rem;
+
+    .divider {
+      display: none;
+
+      @include media($med) {
+        display: initial;
+      }
+    }
+    span {
+      white-space: nowrap;
+
+      @include media($med) {
+        &:not(:last-of-type) {
+          border-right: 1px solid;
+          margin-right: 1em;
+          padding-right: 1em;
+        }
+      } 
+    }
+    > span {
+      display: block;
+
+      @include media($med) {
+        display: initial;
+      }
+    }
+
+    meter {
+      margin-left: 0;
+      background: transparent;
+      height: 1.5em;
+      width: 100%;
+
+      @include media($med) {
+        display: none;
+      }
+
+      &::-webkit-meter-bar {
+        background: transparent;
+        border: none;
+        border-radius: 0;
+      }
+      &::-moz-meter-bar {
+        background: transparent;
+        border: none;
+        border-radius: 0;
+      }
+      &::-webkit-meter-optimum-value {
+        background: $gray-dark;
+        border-radius: 0;
+      }
+      &:-moz-meter-optimum::-moz-meter-bar {
+        background: $gray-dark;
+        border-radius: 0;
+      }
+      &[data-cat='raising'] {
+        &::-webkit-meter-optimum-value {
+          background: $orange;
+        }
+        &:-moz-meter-optimum::-moz-meter-bar {
+          background: $orange;
+        }
+      }
+      &[data-cat='spending'] {
+        &::-webkit-meter-optimum-value {
+          background: $aqua;
+          transition: all 1s;
+        }
+        &:-moz-meter-optimum::-moz-meter-bar {
+          background: $aqua;
+          transition: all 1s;
+        }
+      }
+    }
+  }
+
+  figure {
+    display: flex;
+    align-items: center;
+
+    @include media($med) {
+      display: initial;
+      align-items: unset;
+    }
+  }
+
+  figcaption {
+    text-align: left;
+    width: 66.6%;
+
+    @include media($med) {
+      text-align: center;
+      width: initial;
+    }
+  }
+
+  .donut {
+    width: 33%;
+    height: 100%;
+
+    @include media($med) {
+      width: 100%
+    }
+
+    .center {
+      fill: $inverse
+    }
+    .ring {
+      fill: transparent;
+      stroke: $gray-light;
+      stroke-width: 3;
+    }
+    .segment {
+      fill: transparent;
+      stroke-dashoffset: 25;
+      stroke-width: 3;
+    }
+    text {
+      fill: $gray-light;
+      font-family: $sans-serif;
+      font-size: 1rem;
+      font-weight: bold;
+      text-anchor: middle;
+    }
+
+    &.raising {
+      .segment {
+        stroke: $orange;
+      }
+      text {
+        fill: $orange;
+      }
+    }
+
+    &.spending {
+      .segment {
+        stroke: $aqua;
+      }
+      text {
+        fill: $aqua;
+      }
+    }
+  }
+}
diff --git a/fec/fec/static/scss/entity.scss b/fec/fec/static/scss/entity.scss
index c6837aca76..87011bb5df 100644
--- a/fec/fec/static/scss/entity.scss
+++ b/fec/fec/static/scss/entity.scss
@@ -1,3 +1,4 @@
+/* Used inside candidate-single and committee-single */
 @import "base";
 
 @import "common";
@@ -12,3 +13,4 @@
 @import "components/table-styles";
 @import "components/results-info";
 @import "components/callouts";
+@import "components/committee-snapshot";

From 3aeb61b6076301986ae92bcb96409766904f4a4b Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 14 Jul 2021 16:51:58 -0400
Subject: [PATCH 07/16] Remove unused vars

---
 fec/data/views.py | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/fec/data/views.py b/fec/data/views.py
index 0fd9862783..a27d51f0b4 100644
--- a/fec/data/views.py
+++ b/fec/data/views.py
@@ -483,13 +483,13 @@ def get_committee(committee_id, cycle):
         com_type_text = 'leadership PACs'
         com_type_glossary = ''
     elif com_com_type == 'H':
-        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_text = '[H committee_type]'
         com_type_glossary = ''
     elif com_com_type == 'S':
-        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_text = '[S committee_type]'
         com_type_glossary = ''
     elif com_com_type == 'P':
-        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_text = '[P committee_type]'
         com_type_glossary = ''
     elif com_desig == 'B':
         com_type_text = 'lobbyist-registrant PACs'
@@ -501,10 +501,10 @@ def get_committee(committee_id, cycle):
         com_type_text = 'joint fundraising committees'
         com_type_glossary = 'Joint fundraising committee'
     elif com_desig == 'A':
-        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_text = '[A designation]'
         com_type_glossary = ''
     elif com_desig == 'P':
-        com_type_text = '=====NO LINE IN SPREADSHEET====='
+        com_type_text = '[P designation]'
         com_type_glossary = ''
     elif com_com_type == 'O':
         com_type_text = 'super PACs'
@@ -522,10 +522,10 @@ def get_committee(committee_id, cycle):
         com_type_text = 'political action committees'
         com_type_glossary = 'Political Action Committee (PAC)'
     elif com_com_type == 'U':
-        com_type_text = '=====TBD====='
+        com_type_text = '[U committee_type]'
         com_type_glossary = ''
     elif com_com_type == 'I':
-        com_type_text = '=====TBD====='
+        com_type_text = '[I committee_type]'
         com_type_glossary = ''
     elif com_com_type == 'Y':
         com_type_text = 'party committees'
@@ -640,9 +640,6 @@ def committee(request, committee_id):
     cycle = request.GET.get("cycle", None)
     committee = get_committee(committee_id, cycle)
 
-    com_type_text = ''
-    com_type_glossary = ''
-
     return render(request, "committees-single.jinja", committee)
 
 

From f9d41b3fd3ce436f47a084b0fb77ef4410ef9475 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Mon, 19 Jul 2021 09:55:19 -0400
Subject: [PATCH 08/16] Create and implement feature flag for pac snapshot

---
 fec/data/templates/committees-single.jinja                    | 2 +-
 fec/data/templates/partials/committee/financial-summary.jinja | 3 +++
 fec/fec/settings/base.py                                      | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/fec/data/templates/committees-single.jinja b/fec/data/templates/committees-single.jinja
index 42b6c58868..01d1c513ce 100644
--- a/fec/data/templates/committees-single.jinja
+++ b/fec/data/templates/committees-single.jinja
@@ -63,7 +63,7 @@
             aria-selected="true">Financial Summary</a>
             {% if committee_type != 'I' %}
             <ul>
-              <li><a href="#committee-snapshot">Committee snapshot</a></li>
+              {% if FEATURES.pac_snapshot %}<li><a href="#committee-snapshot">Committee snapshot</a></li>{% endif %}
               <li><a href="#total-raised">Total raised</a></li>
               <li><a href="#total-spent">Total spent</a></li>
               <li><a href="#cash-summary">Cash summary</a></li>
diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index ddc7d342b8..8b28506ac4 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -34,6 +34,7 @@
             {{ missing_transferred.missing_transferred_committee_message(former_committee_name, former_authorized_candidate_name, former_authorized_candidate_id) }}
           </div>
         {% endif %}
+        {% if FEATURES.pac_snapshot %}
         <div class="entity__figure entity__figure--narrow" id="committee-snapshot">
           <div class="heading--section">
             <h3>Committee snapshot</h3>
@@ -243,6 +244,8 @@
             </div>
           </div>
         </div>
+        {# end pac_snapshot (next line) #}
+        {% endif %}
         <div class="entity__figure entity__figure--narrow" id="total-raised">
           <div class="heading--section heading--with-action">
             <h3 class="heading__left">Total raised</h3>
diff --git a/fec/fec/settings/base.py b/fec/fec/settings/base.py
index 071150b4ee..93893981a8 100644
--- a/fec/fec/settings/base.py
+++ b/fec/fec/settings/base.py
@@ -64,6 +64,7 @@
     'debts': bool(env.get_credential('FEC_FEATURE_DEBTS', '')),  # TODO: debts dates
     'map': bool(env.get_credential('FEC_FEATURE_HOME_MAP', '')),
     'pac_party': bool(env.get_credential('FEC_FEATURE_PAC_PARTY', '')),
+    'pac_snapshot': bool(env.get_credential('FEC_FEATURE_PAC_SNAPSHOT', '')),
     'presidential_map': bool(env.get_credential('FEC_FEATURE_PRESIDENTIAL_MAP', '')),
 }
 
@@ -77,6 +78,7 @@
     FEATURES['debts'] = True
     FEATURES['map'] = True
     FEATURES['pac_party'] = True
+    FEATURES['pac_snapshot'] = True
     FEATURES['presidential_map'] = True
 
 # Application definition

From fe1b3c560fb8ce4c967c21b992ce7b8987147da8 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Mon, 19 Jul 2021 10:00:45 -0400
Subject: [PATCH 09/16] =?UTF-8?q?Make=20"Learn=20more=20about=E2=80=A6"=20?=
 =?UTF-8?q?text=20conditional,?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

only showing the rest of the sentence if there are values to put in it
---
 fec/data/templates/partials/committee/financial-summary.jinja | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index 8b28506ac4..babd96f19d 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -133,7 +133,9 @@
             {% endif %}
           {% endif %}
 
+          {% if com_type_glossary && com_type_text %}
           <p>Learn more about <span class="term" data-term="{{ com_type_glossary }}" title="Click to define" tabindex="0">{{ com_type_text }}</span> like {{ committee.name }}.</p>
+          {% endif %}
           <div class="tag__category">
             <div class="tag__item">Coverage dates: {{ coverage_str }}</div>
           </div>

From d5ebd705e5bdee50e351df4008b1c98c4e9185e8 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Mon, 19 Jul 2021 10:15:09 -0400
Subject: [PATCH 10/16] Fix syntax

---
 fec/data/templates/partials/committee/financial-summary.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index babd96f19d..455cd8c0bb 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -133,7 +133,7 @@
             {% endif %}
           {% endif %}
 
-          {% if com_type_glossary && com_type_text %}
+          {% if com_type_glossary and com_type_text %}
           <p>Learn more about <span class="term" data-term="{{ com_type_glossary }}" title="Click to define" tabindex="0">{{ com_type_text }}</span> like {{ committee.name }}.</p>
           {% endif %}
           <div class="tag__category">

From 8cf039f67b85e0ff5bebd5dba8c5918fd92c797e Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Mon, 19 Jul 2021 11:12:44 -0400
Subject: [PATCH 11/16] Remove the right border for the last entity__type items

---
 fec/fec/static/scss/components/_entity-header.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/fec/fec/static/scss/components/_entity-header.scss b/fec/fec/static/scss/components/_entity-header.scss
index 28df0dfdb7..93ab768ef0 100644
--- a/fec/fec/static/scss/components/_entity-header.scss
+++ b/fec/fec/static/scss/components/_entity-header.scss
@@ -141,8 +141,12 @@
   @include u-bg--neutral();
 
   .entity__info,
-  .entity__type  {
+  .entity__type {
     border-color: $primary;
+    
+    &:last-of-type {
+      border-right: none;
+    }
   }
 }
 

From 85c22a75f392f5eea62948550aacae328a987138 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Tue, 20 Jul 2021 09:17:40 -0400
Subject: [PATCH 12/16] Improve shared html vars' strings

---
 .../committee/financial-summary.jinja         | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index 455cd8c0bb..7d87126691 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -40,8 +40,8 @@
             <h3>Committee snapshot</h3>
           </div>
 
-          {% set shared_circle_props = 'cx=21 cy=21 r=15.91549430918954' %}
-          {% set shared_text_props = 'x=50% y=57%' %}
+          {% set shared_circle_props = 'cx="21" cy="21" r="15.91549430918954"' %}
+          {% set shared_text_props = 'x="50%" y="57%"' %}
           {% set coverage_str = totals.coverage_start_date|date ~' to ' ~totals.coverage_end_date|date %}
 
           {% if totals.individual_contributions_percent %}
@@ -156,11 +156,11 @@
                     <svg viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
                       <title id="snap-raise-ind-t">Percent raised from individual conributions {{ coverage_str }}</title>
                       <desc id="snap-raise-ind-d">98% of money raised came from individual contributions</desc>
-                      <circle class="center" {{ shared_circle_props }}></circle>
-                      <circle class="ring" {{ shared_circle_props }}></circle>
-                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ rec_ind_ring }}"></circle>
+                      <circle class="center" {{ shared_circle_props|safe }}></circle>
+                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
+                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_ind_ring }}"></circle>
                       <g class="chart-text">
-                        <text {{ shared_text_props }}>{{ rec_ind_l }}</text>
+                        <text {{ shared_text_props|safe }}>{{ rec_ind_l }}</text>
                       </g>
                     </svg>
                     <figcaption>Percent raised in individual <span class="term" data-term="contribution" title="Click to define" tabindex="0">contributions</span></figcaption>
@@ -171,11 +171,11 @@
                     <svg viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
                       <title id="snap-raise-com-t">Percent raised from other federal political committees {{ coverage_str }}</title>
                       <desc id="snap-raise-com-d">0% of money raised came from other federal political committees</desc>
-                      <circle class="center" {{ shared_circle_props }}></circle>
-                      <circle class="ring" {{ shared_circle_props }}></circle>
+                      <circle class="center" {{ shared_circle_props|safe }}></circle>
+                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ rec_com_ring }}"></circle>
-                      <text {{ shared_text_props }}>{{ rec_com_l }}</text>
+                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_com_ring }}"></circle>
+                      <text {{ shared_text_props|safe }}>{{ rec_com_l }}</text>
                     </svg>
                     <figcaption>Percent raised in contributions from other federal <span class="term" data-term="political committee" title="Click to define" tabindex="0">political committees</span></figcaption>
                   </figure>
@@ -190,11 +190,11 @@
                     <svg viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
                       <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees {{ coverage_str }}</title>
                       <desc id="snap-spend-com-d">96% of money spent went to other federal political committees</desc>
-                      <circle class="center"{{ shared_circle_props }}></circle>
-                      <circle class="ring"{{ shared_circle_props }}></circle>
-                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ dis_com_ring }}"></circle>
+                      <circle class="center"{{ shared_circle_props|safe }}></circle>
+                      <circle class="ring"{{ shared_circle_props|safe }}></circle>
+                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_com_ring }}"></circle>
                       <g class="chart-text">
-                        <text {{ shared_text_props }}>{{ dis_com_l }}</text>
+                        <text {{ shared_text_props|safe }}>{{ dis_com_l }}</text>
                       </g>
                     </svg>
                     <figcaption>Percent spent on contributions to other <span class="term" data-term="national committee" title="Click to define" tabindex="0">federal committees</span></figcaption>
@@ -205,11 +205,11 @@
                     <svg viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
                       <title id="snap-spend-ox-t">Percent spent on operating expenditures {{ coverage_str }}</title>
                       <desc id="snap-spend-ox-d">96% of money spent on operating expenditures</desc>
-                      <circle class="center" {{ shared_circle_props }}></circle>
-                      <circle class="ring" {{ shared_circle_props }}></circle>
+                      <circle class="center" {{ shared_circle_props|safe }}></circle>
+                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
                       <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" {{ shared_circle_props }} stroke-dasharray="{{ dis_oe_ring }}"></circle>
-                      <text {{ shared_text_props }}>{{ dis_oe_l }}</text>
+                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_oe_ring }}"></circle>
+                      <text {{ shared_text_props|safe }}>{{ dis_oe_l }}</text>
                     </svg>
                     <figcaption>Percent spent on <span class="term" data-term="operating expenditures" title="Click to define" tabindex="0">operating expenditures</span></figcaption>
                   </figure>

From 5118f679fd21ffbf0399aadf69518e7392c4767a Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 21 Jul 2021 12:33:19 -0400
Subject: [PATCH 13/16] Add filter for rounded and whole-number dollars

---
 fec/data/templatetags/filters.py | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/fec/data/templatetags/filters.py b/fec/data/templatetags/filters.py
index aa199c8967..6fbeeef760 100644
--- a/fec/data/templatetags/filters.py
+++ b/fec/data/templatetags/filters.py
@@ -21,6 +21,17 @@ def currency(num, grouping=True):
     return None
 
 
+@library.filter
+def currency_rounded(num, grouping=True):
+    # set locale for currency filter
+    locale.setlocale(locale.LC_ALL, 'en_US.UTF-8')
+    to_return = None
+    if isinstance(num, (int, float)):
+        to_return = locale.currency(round(num), grouping=grouping)
+        return to_return[:-3]
+    return to_return
+
+
 def ensure_date(value):
     if isinstance(value, (datetime.date, datetime.datetime)):
         return value

From 23de61bba6d9225fe2156334db5c6646c6efd82d Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 21 Jul 2021 12:34:21 -0400
Subject: [PATCH 14/16] Account for values of 0.0

---
 .../committee/financial-summary.jinja         | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index 7d87126691..6a3770c4f2 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -44,18 +44,20 @@
           {% set shared_text_props = 'x="50%" y="57%"' %}
           {% set coverage_str = totals.coverage_start_date|date ~' to ' ~totals.coverage_end_date|date %}
 
-          {% if totals.individual_contributions_percent %}
-            {% set rec_ind = totals.individual_contributions_percent|round|int %}
+          {% if totals.individual_contributions_percent or totals.individual_contributions_percent == 0 %}
+            {% set rec_ind = totals.individual_contributions_percent %}
             {% set rec_ind_class = 'raising' %}
             {% set rec_ind_ring = '0 100' %}
-            {% set rec_ind_l = rec_ind ~'%' %}
-            {% if rec_ind > 100 %}
-            {% set rec_ind_l = '>100%' %}
-            {% set rec_ind_ring = '100 0' %}
+            {% set rec_ind_l = rec_ind|round|int ~'%' %}
+            {% if rec_ind == 0 %}
+              {% set rec_ind_l = '0%' %}
+            {% elif rec_ind > 100 %}
+              {% set rec_ind_l = '>100%' %}
+              {% set rec_ind_ring = '100 0' %}
             {% elif rec_ind > 0 and rec_ind < 1 %}
-            {% set rec_ind_l = '<1%' %}
+              {% set rec_ind_l = '<1%' %}
             {% else %}
-            {% set rec_ind_ring = rec_ind ~ ' ' ~ (100 - rec_ind) %}
+              {% set rec_ind_ring = rec_ind|round|int ~ ' ' ~ (100 - rec_ind|round|int) %}
             {% endif %}
           {% else %}
             {% set rec_ind_l = '!' %}
@@ -63,18 +65,20 @@
             {% set rec_ind_class = '' %}
           {% endif %}
 
-          {% if totals.party_and_other_committee_contributions_percent %}
+          {% if totals.party_and_other_committee_contributions_percent or totals.party_and_other_committee_contributions_percent == 0 %}
             {% set rec_com = totals.party_and_other_committee_contributions_percent|round|int %}
             {% set rec_com_class = 'raising' %}
             {% set rec_com_ring = '0 100' %}
             {% set rec_com_l = rec_com ~'%' %}
-            {% if rec_com > 100 %}
-            {% set rec_com_l = '>100%' %}
-            {% set rec_com_ring = '100 0' %}
+            {% if rec_com == 0 %}
+              {% set rec_com_l = '0%' %}
+            {% elif rec_com > 100 %}
+              {% set rec_com = '>100%' %}
+              {% set rec_com_ring = '100 0' %}
             {% elif rec_com > 0 and rec_com < 1 %}
-            {% set rec_com_l = '<1%' %}
+              {% set rec_com_l = '<1%' %}
             {% else %}
-            {% set rec_com_ring = rec_com ~ ' ' ~ (100 - rec_com) %}
+              {% set rec_com_ring = rec_com ~ ' ' ~ (100 - rec_com) %}
             {% endif %}
           {% else %}
             {% set rec_com_l = '!' %}
@@ -82,18 +86,20 @@
             {% set rec_com_class = '' %}
           {% endif %}
 
-          {% if totals.contributions_ie_and_party_expenditures_made_percent %}
+          {% if totals.contributions_ie_and_party_expenditures_made_percent or totals.contributions_ie_and_party_expenditures_made_percent == 0 %}
             {% set dis_com = totals.contributions_ie_and_party_expenditures_made_percent|round|int %}
             {% set dis_com_class = 'spending' %}
             {% set dis_com_ring = '0 100' %}
             {% set dis_com_l = dis_com ~'%' %}
-            {% if dis_com > 100 %}
-            {% set dis_com_l = '>100%' %}
-            {% set dis_com_ring = '100 0' %}
+            {% if dis_com == 0 %}
+              {% set dis_com_l = '0%' %}
+            {% elif dis_com > 100 %}
+              {% set dis_com_l = '>100%' %}
+              {% set dis_com_ring = '100 0' %}
             {% elif dis_com > 0 and dis_com < 1 %}
-            {% set dis_com_l = '<1%' %}
+              {% set dis_com_l = '<1%' %}
             {% else %}
-            {% set dis_com_ring = dis_com ~ ' ' ~ (100 - dis_com) %}
+              {% set dis_com_ring = dis_com ~ ' ' ~ (100 - dis_com) %}
             {% endif %}
           {% else %}
             {% set dis_com_l = '!' %}
@@ -101,18 +107,20 @@
             {% set dis_com_class = '' %}
           {% endif %}
 
-          {% if totals.operating_expenditures_percent %}
+          {% if totals.operating_expenditures_percent or totals.operating_expenditures_percent == 0 %}
             {% set dis_oe = totals.operating_expenditures_percent|round|int %}
             {% set dis_oe_class = 'spending' %}
             {% set dis_oe_ring = '0 100' %}
             {% set dis_oe_l = dis_oe ~'%' %}
-            {% if dis_oe > 100 %}
-            {% set dis_oe_l = '>100%' %}
-            {% set dis_oe_ring = '100 0' %}
+            {% if dis_oe == 0 %}
+              {% set dis_oe_l = '0%' %}
+            {% elif dis_oe > 100 %}
+              {% set dis_oe_l = '>100%' %}
+              {% set dis_oe_ring = '100 0' %}
             {% elif dis_oe > 0 and dis_oe < 1 %}
-            {% set dis_oe_l = '<1%' %}
+              {% set dis_oe_l = '<1%' %}
             {% else %}
-            {% set dis_oe_ring = dis_oe ~ ' ' ~ (100 - dis_oe) %}
+              {% set dis_oe_ring = dis_oe ~ ' ' ~ (100 - dis_oe) %}
             {% endif %}
           {% else %}
             {% set dis_oe_l = '!' %}

From 91a471a09dd3bea6de5ef384181251f0ba33397a Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 21 Jul 2021 12:34:54 -0400
Subject: [PATCH 15/16] Update style and structure after QA reviews

---
 .../committee/financial-summary.jinja         | 146 ++++++++++--------
 .../scss/components/_committee-snapshot.scss  |  63 +++++++-
 2 files changed, 136 insertions(+), 73 deletions(-)

diff --git a/fec/data/templates/partials/committee/financial-summary.jinja b/fec/data/templates/partials/committee/financial-summary.jinja
index 6a3770c4f2..6c2f3feda4 100644
--- a/fec/data/templates/partials/committee/financial-summary.jinja
+++ b/fec/data/templates/partials/committee/financial-summary.jinja
@@ -148,80 +148,90 @@
             <div class="tag__item">Coverage dates: {{ coverage_str }}</div>
           </div>
           <div class="snapshot-summary">
-            <span class="t-data t-bold">Total receipts: <span class="t-normal">{{ totals.fed_receipts|currency }}</span></span>
+            <span class="t-data t-bold">Total receipts: <span class="t-normal">{{ totals.fed_receipts|currency_rounded }}</span></span>
             <meter min="0" max="{{ meters_max }}" value="{{ totals.fed_receipts }}" title="US Dollars" data-cat="raising"></meter>
-            <span class="t-data t-bold">Total disbursements: <span class="t-normal">{{ totals.fed_disbursements|currency }}</span></span>
+            <span class="t-data t-bold">Total disbursements: <span class="t-normal">{{ totals.fed_disbursements|currency_rounded }}</span></span>
             <meter min="0" max="{{ meters_max }}" value="{{ totals.fed_disbursements }}" title="US Dollars" data-cat="spending"></meter>
-            <span class="t-data t-bold">Cash on hand: <span class="t-normal">{{ totals.last_cash_on_hand_end_period|currency }}</span></span>
+            <span class="t-data t-bold">Cash on hand: <span class="t-normal">{{ totals.last_cash_on_hand_end_period|currency_rounded }}</span></span>
             <meter min="0" max="{{ meters_max }}" value="{{ totals.last_cash_on_hand_end_period }}" title="US Dollars" data-cat="cash"></meter>
           </div>
-          <div class="grid grid--2-wide">
-            <div class="grid__item">
-              <h4 class="t-centered">Money raised</h4>
-              <div class="grid grid--2-wide">
-                <div class="grid__item">
-                  <figure>
-                    <svg viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
-                      <title id="snap-raise-ind-t">Percent raised from individual conributions {{ coverage_str }}</title>
-                      <desc id="snap-raise-ind-d">98% of money raised came from individual contributions</desc>
-                      <circle class="center" {{ shared_circle_props|safe }}></circle>
-                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
-                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_ind_ring }}"></circle>
-                      <g class="chart-text">
-                        <text {{ shared_text_props|safe }}>{{ rec_ind_l }}</text>
-                      </g>
-                    </svg>
-                    <figcaption>Percent raised in individual <span class="term" data-term="contribution" title="Click to define" tabindex="0">contributions</span></figcaption>
-                  </figure>
-                </div>
-                <div class="grid__item">
-                  <figure>
-                    <svg viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
-                      <title id="snap-raise-com-t">Percent raised from other federal political committees {{ coverage_str }}</title>
-                      <desc id="snap-raise-com-d">0% of money raised came from other federal political committees</desc>
-                      <circle class="center" {{ shared_circle_props|safe }}></circle>
-                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
-                      <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_com_ring }}"></circle>
-                      <text {{ shared_text_props|safe }}>{{ rec_com_l }}</text>
-                    </svg>
-                    <figcaption>Percent raised in contributions from other federal <span class="term" data-term="political committee" title="Click to define" tabindex="0">political committees</span></figcaption>
-                  </figure>
-                </div>
+          <div class="donuts-all">
+            <div class="donuts-pair">
+              <h4 class="donuts-head t-centered">Money raised</h4>
+              <div class="donut-cell">
+                <figure>
+                  <svg viewBox="0 0 42 42" class="donut {{ rec_ind_class }}" role="img" aria-labelledby="snap-raise-ind-t snap-raise-ind-d">
+                    <title id="snap-raise-ind-t">Percent raised from individual contributions {{ coverage_str }}</title>
+                    <desc id="snap-raise-ind-d">{% if rec_ind_l != '!' %}{{ rec_ind_l }} of money raised came from individual contributions{% endif %}</desc>
+                    <circle class="center" {{ shared_circle_props|safe }}></circle>
+                    <circle class="ring" {{ shared_circle_props|safe }}></circle>
+                    <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_ind_ring }}"></circle>
+                    <g class="chart-text">
+                      <text {{ shared_text_props|safe }}>{{ rec_ind_l }}</text>
+                    </g>
+                  </svg>
+                  <figcaption>
+                    {% if rec_ind_class == '' %}Could not calculate a percent based on available data
+                    {% else %}Percent raised in individual <span class="term" data-term="contribution" title="Click to define" tabindex="0">contributions</span>
+                    {% endif %}
+                  </figcaption>
+                </figure>
+              </div>
+              <div class="donut-cell">
+                <figure>
+                  <svg viewBox="0 0 42 42" class="donut {{ rec_com_class }}" aria-labelledby="snap-raise-com-t snap-raise-com-d">
+                    <title id="snap-raise-com-t">Percent raised from other federal political committees {{ coverage_str }}</title>
+                    <desc id="snap-raise-com-d">{% if rec_com_l != '!' %}{{ rec_com_l }} of money raised came from other federal political committees{% endif %}</desc>
+                    <circle class="center" {{ shared_circle_props|safe }}></circle>
+                    <circle class="ring" {{ shared_circle_props|safe }}></circle>
+                    <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ rec_com_ring }}"></circle>
+                    <text {{ shared_text_props|safe }}>{{ rec_com_l }}</text>
+                  </svg>
+                  <figcaption>
+                    {%- if rec_com_class == '' %}Could not calculate a percent based on available data
+                    {%- else %}Percent raised in contributions from other federal <span class="term" data-term="political committee" title="Click to define" tabindex="0">political committees</span>
+                    {%- endif -%}
+                  </figcaption>
+                </figure>
               </div>
             </div>
-            <div class="grid__item">
-              <h4 class="t-centered">Money spent</h4>
-              <div class="grid grid--2-wide">
-                <div class="grid__item">
-                  <figure>
-                    <svg viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
-                      <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees {{ coverage_str }}</title>
-                      <desc id="snap-spend-com-d">96% of money spent went to other federal political committees</desc>
-                      <circle class="center"{{ shared_circle_props|safe }}></circle>
-                      <circle class="ring"{{ shared_circle_props|safe }}></circle>
-                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_com_ring }}"></circle>
-                      <g class="chart-text">
-                        <text {{ shared_text_props|safe }}>{{ dis_com_l }}</text>
-                      </g>
-                    </svg>
-                    <figcaption>Percent spent on contributions to other <span class="term" data-term="national committee" title="Click to define" tabindex="0">federal committees</span></figcaption>
-                  </figure>
-                </div>
-                <div class="grid__item">
-                  <figure>
-                    <svg viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
-                      <title id="snap-spend-ox-t">Percent spent on operating expenditures {{ coverage_str }}</title>
-                      <desc id="snap-spend-ox-d">96% of money spent on operating expenditures</desc>
-                      <circle class="center" {{ shared_circle_props|safe }}></circle>
-                      <circle class="ring" {{ shared_circle_props|safe }}></circle>
-                      <!-- The stroke-dashoffset should add up to 100, with the first value being the color -->
-                      <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_oe_ring }}"></circle>
-                      <text {{ shared_text_props|safe }}>{{ dis_oe_l }}</text>
-                    </svg>
-                    <figcaption>Percent spent on <span class="term" data-term="operating expenditures" title="Click to define" tabindex="0">operating expenditures</span></figcaption>
-                  </figure>
-                </div>
+            <div class="donuts-pair">
+              <h4 class="donuts-head t-centered">Money spent</h4>
+              <div class="donut-cell">
+                <figure>
+                  <svg viewBox="0 0 42 42" class="donut {{ dis_com_class }}" role="img" aria-labelledby="snap-spend-com-t snap-spend-com-d">
+                    <title id="snap-spend-com-t">Percent spent on contributions to other federal political committees {{ coverage_str }}</title>
+                    <desc id="snap-spend-com-d">{% if dis_com_l != '!' %}{{ dis_com_l }} of money spent went to other federal political committees{% endif %}</desc>
+                    <circle class="center"{{ shared_circle_props|safe }}></circle>
+                    <circle class="ring"{{ shared_circle_props|safe }}></circle>
+                    <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_com_ring }}"></circle>
+                    <g class="chart-text">
+                      <text {{ shared_text_props|safe }}>{{ dis_com_l }}</text>
+                    </g>
+                  </svg>
+                  <figcaption>
+                    {% if dis_com_class == '' %}Could not calculate a percent based on available data
+                    {% else %}Percent spent on contributions to other <span class="term" data-term="national committee" title="Click to define" tabindex="0">federal committees</span>
+                    {% endif %}
+                  </figcaption>
+                </figure>
+              </div>
+              <div class="donut-cell">
+                <figure>
+                  <svg viewBox="0 0 42 42" class="donut {{ dis_oe_class }}" role="img" aria-labelledby="snap-spend-ox-t snap-spend-ox-d">
+                    <title id="snap-spend-ox-t">Percent spent on operating expenditures {{ coverage_str }}</title>
+                    <desc id="snap-spend-ox-d">{% if dis_oe_l != '!' %}{{ dis_oe_l }} of money spent on operating expenditures{% endif %}</desc>
+                    <circle class="center" {{ shared_circle_props|safe }}></circle>
+                    <circle class="ring" {{ shared_circle_props|safe }}></circle>
+                    <circle class="segment" {{ shared_circle_props|safe }} stroke-dasharray="{{ dis_oe_ring }}"></circle>
+                    <text {{ shared_text_props|safe }}>{{ dis_oe_l }}</text>
+                  </svg>
+                  <figcaption>
+                    {% if dis_oe_class == '' %}Could not calculate a percent based on available data
+                    {% else %}Percent spent on <span class="term" data-term="operating expenditures" title="Click to define" tabindex="0">operating expenditures</span>
+                    {% endif %}
+                  </figcaption>
+                </figure>
               </div>
             </div>
           </div>
diff --git a/fec/fec/static/scss/components/_committee-snapshot.scss b/fec/fec/static/scss/components/_committee-snapshot.scss
index de810d9ba7..663e059de5 100644
--- a/fec/fec/static/scss/components/_committee-snapshot.scss
+++ b/fec/fec/static/scss/components/_committee-snapshot.scss
@@ -21,6 +21,11 @@
   }
 
   .snapshot-summary {
+    border-bottom: 1px solid $gray-light;
+    border-top: 1px solid $federal-blue;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    padding-bottom: 1rem;
     padding-top: 1rem;
 
     .divider {
@@ -36,10 +41,10 @@
       @include media($med) {
         &:not(:last-of-type) {
           border-right: 1px solid;
-          margin-right: 1em;
-          padding-right: 1em;
-        }
-      } 
+          margin-right: 10px;
+          padding-right: 10px;
+        } 
+      }
     }
     > span {
       display: block;
@@ -109,15 +114,63 @@
   }
 
   figcaption {
+    font-family: $sans-serif;
+    line-height: 1.25em;
     text-align: left;
     width: 66.6%;
-
+    
     @include media($med) {
+      margin-bottom: 1em;
+      padding: 0 1em;
       text-align: center;
       width: initial;
     }
   }
 
+  .donuts-all {
+    margin-bottom: 1rem;
+
+    .donuts-head {
+      margin-bottom: 0;
+    }
+
+    @include media($med) {
+      display: flex;
+      position: relative;
+
+      .donuts-pair {
+        position: relative;
+        width: 50%;
+
+        .donuts-head {
+          width: 100%;
+          margin-bottom: 1rem;
+        }
+        .donut-cell {
+          float: left;
+          margin-left: 0;
+          margin-right: 0;
+          width: 50%;
+          
+          &:first-child {
+            border-right: 1px solid $gray-light;
+          }
+        }
+      }
+
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        background: $gray-light;
+        height: 90%;
+        width: 1px;
+        top: 5%;
+        left: 50%;
+      }
+    }
+  }
+
   .donut {
     width: 33%;
     height: 100%;

From 08652465540d412449ebf561df4a424240e0f4a2 Mon Sep 17 00:00:00 2001
From: rfultz <lashermylasher@yahoo.com>
Date: Wed, 21 Jul 2021 12:45:33 -0400
Subject: [PATCH 16/16] Commenting the logic for the comm-type text

---
 fec/data/views.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/fec/data/views.py b/fec/data/views.py
index a27d51f0b4..165e5bc6b1 100644
--- a/fec/data/views.py
+++ b/fec/data/views.py
@@ -460,7 +460,7 @@ def get_committee(committee_id, cycle):
     com_org_type = committee.get('organization_type')
     com_com_type = committee.get('committee_type')
     com_desig = committee.get('designation')
-    # The big "can't be" tests for the others
+    # The big "can't be" tests for organization_types
     if com_org_type == 'C':
         com_type_text = 'corporate'
         com_type_glossary = 'Corporation'
@@ -479,9 +479,7 @@ def get_committee(committee_id, cycle):
     elif com_org_type == 'V':
         com_type_text = 'cooperatives'
         com_type_glossary = ''
-    elif com_org_type == 'D':
-        com_type_text = 'leadership PACs'
-        com_type_glossary = ''
+    # The three biggies which are also 'not' rules for committee_type
     elif com_com_type == 'H':
         com_type_text = '[H committee_type]'
         com_type_glossary = ''
@@ -491,12 +489,14 @@ def get_committee(committee_id, cycle):
     elif com_com_type == 'P':
         com_type_text = '[P committee_type]'
         com_type_glossary = ''
+    # regular designation with no other rules
     elif com_desig == 'B':
         com_type_text = 'lobbyist-registrant PACs'
         com_type_glossary = 'Lobbyist/Registrant PAC'
     elif com_desig == 'D':
         com_type_text = 'leadership PACs'
         com_type_glossary = 'Leadership PAC'
+    # 'not' rules for designation
     elif com_desig == 'J':
         com_type_text = 'joint fundraising committees'
         com_type_glossary = 'Joint fundraising committee'
@@ -506,6 +506,7 @@ def get_committee(committee_id, cycle):
     elif com_desig == 'P':
         com_type_text = '[P designation]'
         com_type_glossary = ''
+    # all the others that were restricted by the 'not' rules above
     elif com_com_type == 'O':
         com_type_text = 'super PACs'
         com_type_glossary = 'Super PAC'