qpp-style 0.0.8 → 0.0.10

package/coverage/lcov-report/react/components/SideNav/Chart/ScoreChart.jsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">47.19% </span>
+                <span class="strong">68.6% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>42/89</span>
+                <span class='fraction'>59/86</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">21.43% </span>
+                <span class="strong">47.22% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>9/42</span>
+                <span class='fraction'>17/36</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">41.67% </span>
+                <span class="strong">59.09% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>10/24</span>
+                <span class='fraction'>13/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">47.19% </span>
+                <span class="strong">68.6% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>42/89</span>
+                <span class='fraction'>59/86</span>
             </div>
         
             
@@ -54,8 +54,14 @@
         <p class="quiet">
             Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
         </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input oninput="onInput()" type="search" id="fileSearch">
+            </div>
+        </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -327,52 +333,7 @@
 <a name='L268'></a><a href='#L268'>268</a>
 <a name='L269'></a><a href='#L269'>269</a>
 <a name='L270'></a><a href='#L270'>270</a>
-<a name='L271'></a><a href='#L271'>271</a>
-<a name='L272'></a><a href='#L272'>272</a>
-<a name='L273'></a><a href='#L273'>273</a>
-<a name='L274'></a><a href='#L274'>274</a>
-<a name='L275'></a><a href='#L275'>275</a>
-<a name='L276'></a><a href='#L276'>276</a>
-<a name='L277'></a><a href='#L277'>277</a>
-<a name='L278'></a><a href='#L278'>278</a>
-<a name='L279'></a><a href='#L279'>279</a>
-<a name='L280'></a><a href='#L280'>280</a>
-<a name='L281'></a><a href='#L281'>281</a>
-<a name='L282'></a><a href='#L282'>282</a>
-<a name='L283'></a><a href='#L283'>283</a>
-<a name='L284'></a><a href='#L284'>284</a>
-<a name='L285'></a><a href='#L285'>285</a>
-<a name='L286'></a><a href='#L286'>286</a>
-<a name='L287'></a><a href='#L287'>287</a>
-<a name='L288'></a><a href='#L288'>288</a>
-<a name='L289'></a><a href='#L289'>289</a>
-<a name='L290'></a><a href='#L290'>290</a>
-<a name='L291'></a><a href='#L291'>291</a>
-<a name='L292'></a><a href='#L292'>292</a>
-<a name='L293'></a><a href='#L293'>293</a>
-<a name='L294'></a><a href='#L294'>294</a>
-<a name='L295'></a><a href='#L295'>295</a>
-<a name='L296'></a><a href='#L296'>296</a>
-<a name='L297'></a><a href='#L297'>297</a>
-<a name='L298'></a><a href='#L298'>298</a>
-<a name='L299'></a><a href='#L299'>299</a>
-<a name='L300'></a><a href='#L300'>300</a>
-<a name='L301'></a><a href='#L301'>301</a>
-<a name='L302'></a><a href='#L302'>302</a>
-<a name='L303'></a><a href='#L303'>303</a>
-<a name='L304'></a><a href='#L304'>304</a>
-<a name='L305'></a><a href='#L305'>305</a>
-<a name='L306'></a><a href='#L306'>306</a>
-<a name='L307'></a><a href='#L307'>307</a>
-<a name='L308'></a><a href='#L308'>308</a>
-<a name='L309'></a><a href='#L309'>309</a>
-<a name='L310'></a><a href='#L310'>310</a>
-<a name='L311'></a><a href='#L311'>311</a>
-<a name='L312'></a><a href='#L312'>312</a>
-<a name='L313'></a><a href='#L313'>313</a>
-<a name='L314'></a><a href='#L314'>314</a>
-<a name='L315'></a><a href='#L315'>315</a>
-<a name='L316'></a><a href='#L316'>316</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L271'></a><a href='#L271'>271</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -382,11 +343,7 @@
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -396,23 +353,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -420,16 +367,6 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -447,7 +384,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -466,8 +403,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -495,13 +430,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -512,28 +446,28 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -552,11 +486,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -564,12 +497,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -597,6 +528,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -604,10 +536,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -626,11 +561,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -642,11 +574,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -657,10 +584,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -673,21 +596,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { Component } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect } from 'react';
 import { pie, arc } from 'd3-shape';
 import { select, event } from 'd3-selection';
 import PropTypes from 'prop-types';
@@ -697,321 +613,275 @@ const HEIGHT = 210;
 const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
 const GAP_VALUE = 2.5;
 &nbsp;
-export default class ScoreChart extends Component {
-    constructor(props) {
-        super(props);
-        this.draw = this.draw.bind(this);
-        this.toggleLegend = this.toggleLegend.bind(this);
-        this.getAdvancingCareLabel = this.getAdvancingCareLabel.bind(this);
-        this.state = {
-            legend: false,
-            titleMapping: {
-                quality: 'Quality Measures',
-                aci: 'Advancing Care Info',
-                pi: 'Promoting Interoperability',
-                ia: 'Improvement Activities',
-                cost: 'Cost'
-            }
-        };
-    }
+const ScoreChart = ({ performanceYear, chartData, linkCallback }) =&gt; {
+  const [hasLegend, setHasLegend] = useState(false);
+  const [titleMapping, setTitleMapping] = useState({
+    quality: 'Quality Measures',
+    aci: 'Advancing Care Info',
+    pi: 'Promoting Interoperability',
+    ia: 'Improvement Activities',
+    cost: 'Cost',
+  });
 &nbsp;
-    componentDidMount() {
-        const { chartData } = this.props;
-        <span class="missing-if-branch" title="else path not taken" >E</span>if (chartData &amp;&amp; chartData.finalScore) {
-            this.draw(chartData);
-            this.getAdvancingCareLabel();
-        }
+  const { categories } = chartData;
+  let legendToggler;
+  let legend;
+&nbsp;
+  const getAdvancingCareLabel = () =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (performanceYear &gt; 2017) {
+<span class="cstat-no" title="statement not covered" >      setTitleMapping({ ...titleMapping, aci: 'Promoting Interoperability' });</span>
     }
+  };
 &nbsp;
-<span class="fstat-no" title="function not covered" >    UN</span>SAFE_componentWillReceiveProps({ chartData }) {
-<span class="cstat-no" title="statement not covered" >        if (chartData &amp;&amp; chartData.finalScore) {</span>
-<span class="cstat-no" title="statement not covered" >            this.draw(chartData);</span>
-<span class="cstat-no" title="statement not covered" >            this.getAdvancingCareLabel();</span>
-        }
+  const redirectToCategory = <span class="fstat-no" title="function not covered" >(l</span>ink, categoryId) =&gt; {
+<span class="cstat-no" title="statement not covered" >    if (!link) {</span>
+<span class="cstat-no" title="statement not covered" >      return;</span>
     }
 &nbsp;
-    getAdvancingCareLabel() {
-        <span class="missing-if-branch" title="if path not taken" >I</span>if (this.props.performanceYear &gt; 2017) {
-            const newState = <span class="cstat-no" title="statement not covered" >Object.assign({}, this.state.titleMapping);</span>
-<span class="cstat-no" title="statement not covered" >            newState.aci = 'Promoting Interoperability';</span>
+    // track explicitly chart legends
+<span class="cstat-no" title="statement not covered" >    if (window.utag) {</span>
+<span class="cstat-no" title="statement not covered" >      window.utag.track('link', {</span>
+        ga_event_category: 'SidebarNav',
+        ga_event_action: `GoTo${categoryId}`,
+        ga_event_label: categoryId,
+      });
+    }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >            this.setState({</span>
-                titleMapping: newState
-            });
-        }
+<span class="cstat-no" title="statement not covered" >    if (linkCallback) {</span>
+<span class="cstat-no" title="statement not covered" >      linkCallback(link);</span>
+    } else {
+<span class="cstat-no" title="statement not covered" >      window.location.href = link;</span>
     }
+  };
 &nbsp;
-<span class="fstat-no" title="function not covered" >    re</span>directToCategory(link, categoryId) {
-<span class="cstat-no" title="statement not covered" >        if (!link) {</span>
-<span class="cstat-no" title="statement not covered" >            return;</span>
-        }
+  const draw = (chartData) =&gt; {
+    const scorePie = pie().sort(null);
 &nbsp;
-        // track explicitly chart legends
-<span class="cstat-no" title="statement not covered" >        if (window.utag) {</span>
-<span class="cstat-no" title="statement not covered" >            window.utag.track('link', {</span>
-                ga_event_category: 'SidebarNav',
-                ga_event_action: `GoTo${categoryId}`,
-                ga_event_label: categoryId
-            });
-        }
+    // Removing invalid categories
+    const validCategories = chartData.categories.filter(
+      ({ maxContribution }) =&gt; !!maxContribution
+    );
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        if (this.props.linkCallback) {</span>
-<span class="cstat-no" title="statement not covered" >            this.props.linkCallback(link);</span>
-        } else {
-<span class="cstat-no" title="statement not covered" >            window.location.href = link;</span>
-        }
-    }
+    // Calculating the sum of valid categories in order to calculate ratios
+    const categorySum = validCategories
+      .map(({ maxContribution }) =&gt; maxContribution)
+      .reduce((sum, current) =&gt; sum + current);
 &nbsp;
-    draw(chartData) {
-        const scorePie = pie().sort(null);
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (!categorySum) {
+<span class="cstat-no" title="statement not covered" >      return;</span>
+    }
 &nbsp;
-        // Removing invalid categories
-        const categories = chartData.categories.filter(
-            ({ maxContribution }) =&gt; !!maxContribution
-        );
+    select('.score-chart').selectAll('*').remove();
 &nbsp;
-        // Calculating the sum of valid categories in order to calculate ratios
-        const categorySum = categories
-            .map(({ maxContribution }) =&gt; maxContribution)
-            .reduce((sum, current) =&gt; sum + current);
+    const svg = select('.score-chart')
+      .attr('width', WIDTH)
+      .attr('height', HEIGHT);
 &nbsp;
-        <span class="missing-if-branch" title="if path not taken" >I</span>if (!categorySum) {
-<span class="cstat-no" title="statement not covered" >            return;</span>
-        }
+    const chartArc = arc()
+      .innerRadius(RADIUS - 1.5)
+      .outerRadius(RADIUS - 25);
 &nbsp;
-        select('.score-chart')
-            .selectAll('*')
-            .remove();
+    // Preparing the data structure with ratios: [ FILLED, EMPTY, TRANSPARENT, FILLED, EMPTY, ... ]
+    let data;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (validCategories.length === 0) {
+<span class="cstat-no" title="statement not covered" >      data = [];</span>
+    } else <span class="missing-if-branch" title="if path not taken" >I</span>if (validCategories.length === 1) {
+      const { value, maxContribution } = <span class="cstat-no" title="statement not covered" >validCategories[0];</span>
+<span class="cstat-no" title="statement not covered" >      data = [value || 0, maxContribution - value];</span>
+    } else {
+      data = validCategories
+        .map(({ value, maxContribution }) =&gt; [
+          value || <span class="branch-1 cbranch-no" title="branch not covered" >0,</span>
+          maxContribution - value,
+          GAP_VALUE * (categorySum / 100),
+        ])
+        .reduce((a, b) =&gt; a.concat(b), []);
+    }
 &nbsp;
-        const svg = select('.score-chart')
-            .attr('width', WIDTH)
-            .attr('height', HEIGHT);
+    svg.append('title').attr('id', 'titleID').text('Your submission score');
 &nbsp;
-        const chartArc = arc()
-            .innerRadius(RADIUS - 1.5)
-            .outerRadius(RADIUS - 25);
+    svg
+      .append('desc')
+      .attr('id', 'descID')
+      .text(`${chartData.finalScore} out of 100`);
 &nbsp;
-        // Preparing the data structure with ratios: [ FILLED, EMPTY, TRANSPARENT, FILLED, EMPTY, ... ]
-        let data;
-        <span class="missing-if-branch" title="if path not taken" >I</span>if (categories.length === 0) {
-<span class="cstat-no" title="statement not covered" >            data = [];</span>
-        } else <span class="missing-if-branch" title="if path not taken" >I</span>if (categories.length === 1) {
-            const { value, maxContribution } = <span class="cstat-no" title="statement not covered" >categories[0];</span>
-<span class="cstat-no" title="statement not covered" >            data = [value || 0, maxContribution - value];</span>
+    // Setting up the arcs
+    let arcs = svg
+      .append('g')
+      .attr('class', 'arcs')
+      .attr('role', 'presentation')
+      .selectAll('g.arc')
+      .data(scorePie(data))
+      .enter()
+      .append('g')
+      .attr('class', (d, i) =&gt; {
+        let role;
+        if (i % 3 === 0) {
+          role = 'filled';
+        } else if (i % 3 === 1) {
+          role = 'empty';
         } else {
-            data = categories
-                .map(({ value, maxContribution }) =&gt; [
-                    value || <span class="branch-1 cbranch-no" title="branch not covered" >0,</span>
-                    maxContribution - value,
-                    GAP_VALUE * (categorySum / 100)
-                ])
-                .reduce((a, b) =&gt; a.concat(b), []);
+          role = 'transparent';
         }
+        return `arc ${validCategories[parseInt(i / 3)].name} ${role}`;
+      })
+      .attr('transform', `translate(${RADIUS}, ${RADIUS})`)
+      // For accessibility, we add keyboard access to the filled slices
+      .attr('tabindex', (d, i) =&gt; {
+        let tabindex = -1;
+        if (i % 3 === 0) {
+          tabindex = 0;
+        }
+        return tabindex;
+      })
+      // IE for for focusable svg elements
+      .attr('focusable', (d, i) =&gt; {
+        if (i % 3 === 0) {
+          return true;
+        }
+      })
+      // For accessibility, we add keyboard access to the filled slices
+      .on('keyup', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
+        const code = <span class="cstat-no" title="statement not covered" >event.keyCode || event.which;</span>
+<span class="cstat-no" title="statement not covered" >        if (code === 13) {</span>
+          const { name, link } = <span class="cstat-no" title="statement not covered" >validCategories[parseInt(i / 3)];</span>
+<span class="cstat-no" title="statement not covered" >          redirectToCategory(link, name);</span>
+        }
+      })
+      // On click - go to category page
+      .on('click', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
+        const { name, link } = <span class="cstat-no" title="statement not covered" >validCategories[parseInt(i / 3)];</span>
+<span class="cstat-no" title="statement not covered" >        redirectToCategory(link, name);</span>
+      });
 &nbsp;
-        svg.append('title')
-            .attr('id', 'titleID')
-            .text('Your submission score');
-&nbsp;
-        svg.append('desc')
-            .attr('id', 'descID')
-            .text(`${chartData.finalScore} out of 100`);
-&nbsp;
-        // Setting up the arcs
-        let arcs = svg
-            .append('g')
-            .attr('class', 'arcs')
-            .attr('role', 'presentation')
-            .selectAll('g.arc')
-            .data(scorePie(data))
-            .enter()
-            .append('g')
-            .attr('class', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-                let role;
-<span class="cstat-no" title="statement not covered" >                if (i % 3 === 0) {</span>
-<span class="cstat-no" title="statement not covered" >                    role = 'filled';</span>
-                } else <span class="cstat-no" title="statement not covered" >if (i % 3 === 1) {</span>
-<span class="cstat-no" title="statement not covered" >                    role = 'empty';</span>
-                } else {
-<span class="cstat-no" title="statement not covered" >                    role = 'transparent';</span>
-                }
-<span class="cstat-no" title="statement not covered" >                return `arc ${categories[parseInt(i / 3)].name} ${role}`;</span>
-            })
-            .attr('transform', `translate(${RADIUS}, ${RADIUS})`)
-            // For accessibility, we add keyboard access to the filled slices
-            .attr('tabindex', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-                let tabindex = <span class="cstat-no" title="statement not covered" >-1;</span>
-<span class="cstat-no" title="statement not covered" >                if (i % 3 === 0) {</span>
-<span class="cstat-no" title="statement not covered" >                    tabindex = 0;</span>
-                }
-<span class="cstat-no" title="statement not covered" >                return tabindex;</span>
-            })
-            // IE for for focusable svg elements
-            .attr('focusable', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-<span class="cstat-no" title="statement not covered" >                if (i % 3 === 0) {</span>
-<span class="cstat-no" title="statement not covered" >                    return true;</span>
-                }
-            })
-            // For accessibility, we add keyboard access to the filled slices
-            .on('keyup', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-                const code = <span class="cstat-no" title="statement not covered" >event.keyCode || event.which;</span>
-<span class="cstat-no" title="statement not covered" >                if (code === 13) {</span>
-                    const { name, link } = <span class="cstat-no" title="statement not covered" >categories[parseInt(i / 3)];</span>
-<span class="cstat-no" title="statement not covered" >                    this.redirectToCategory(link, name);</span>
-                }
-            })
-            // On click - go to category page
-            .on('click', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-                const { name, link } = <span class="cstat-no" title="statement not covered" >categories[parseInt(i / 3)];</span>
-<span class="cstat-no" title="statement not covered" >                this.redirectToCategory(link, name);</span>
-            });
+    // Add accessibility description
+    arcs.append('desc').text((d, i) =&gt; {
+      if (i % 3 === 0) {
+        const { name, value, maxContribution } =
+          validCategories[parseInt(i / 3)];
+        return `${titleMapping[name]} ${value} out of ${maxContribution}`;
+      }
+    });
 &nbsp;
-        // Add accessibility description
-        arcs.append('desc').text(<span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-<span class="cstat-no" title="statement not covered" >            if (i % 3 === 0) {</span>
-                const { name, value, maxContribution } = <span class="cstat-no" title="statement not covered" >categories[</span>
-                    parseInt(i / 3)
-                ];
-<span class="cstat-no" title="statement not covered" >                return `${this.state.titleMapping[name]} ${value} out of ${maxContribution}`;</span>
-            }
-        });
+    arcs
+      .append('path')
+      .attr('d', chartArc)
+      // On mouse over - show category tooltip
+      .on('mouseover', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
+        const { name, value, maxContribution } =
+<span class="cstat-no" title="statement not covered" >          validCategories[parseInt(i / 3)];</span>
+<span class="cstat-no" title="statement not covered" >        select('.chart-tooltip')</span>
+          .style('opacity', 1)
+          .text(`${titleMapping[name]} ${value}/${maxContribution}`);
+      })
+      // On mouse move - move category tooltip
+      .on('mousemove', <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        select('.chart-tooltip')</span>
+          .style('top', event.clientY - HEIGHT + 10 + 'px')
+          .style('left', event.clientX + 'px');
+      })
+      // On mouse out - hide category tooltip
+      .on('mouseout', <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        select('.chart-tooltip').style('opacity', 0);</span>
+      });
 &nbsp;
-        arcs.append('path')
-            .attr('d', chartArc)
-            // On mouse over - show category tooltip
-            .on('mouseover', <span class="fstat-no" title="function not covered" >(d</span>, i) =&gt; {
-                const { name, value, maxContribution } = <span class="cstat-no" title="statement not covered" >categories[</span>
-                    parseInt(i / 3)
-                ];
-<span class="cstat-no" title="statement not covered" >                select('.chart-tooltip')</span>
-                    .style('opacity', 1)
-                    .text(
-                        `${this.state.titleMapping[name]} ${value}/${maxContribution}`
-                    );
-            })
-            // On mouse move - move category tooltip
-            .on('mousemove', <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                select('.chart-tooltip')</span>
-                    .style('top', event.clientY - HEIGHT + 10 + 'px')
-                    .style('left', event.clientX + 'px');
-            })
-            // On mouse out - hide category tooltip
-            .on('mouseout', <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                select('.chart-tooltip').style('opacity', 0);</span>
-            });
+    // Adding title and subtitle
+    const text = svg
+      .append('g')
+      .attr('text-anchor', 'middle')
+      .attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
 &nbsp;
-        // Adding title and subtitle
-        const text = svg
-            .append('g')
-            .attr('text-anchor', 'middle')
-            .attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
+    // Adding title - X%
+    text
+      .append('text')
+      .attr('y', 4)
+      .attr('class', 'chart-title')
+      .text(chartData.finalScore);
 &nbsp;
-        // Adding title - X%
-        text.append('text')
-            .attr('y', 4)
-            .attr('class', 'chart-title')
-            .text(chartData.finalScore);
+    // Adding subtitle - OUT OF 100
+    text
+      .append('text')
+      .attr('y', 24)
+      .attr('class', 'chart-subtitle')
+      .text('OUT OF 100');
+  };
 &nbsp;
-        // Adding subtitle - OUT OF 100
-        text.append('text')
-            .attr('y', 24)
-            .attr('class', 'chart-subtitle')
-            .text('OUT OF 100');
-    }
+  const toggleLegend = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >    setHasLegend(!hasLegend);</span>
+  };
 &nbsp;
-<span class="fstat-no" title="function not covered" >    to</span>ggleLegend() {
-<span class="cstat-no" title="statement not covered" >        this.setState({ legend: !this.state.legend });</span>
+  useEffect(() =&gt; {
+    <span class="missing-if-branch" title="else path not taken" >E</span>if (chartData?.finalScore) {
+      draw(chartData);
+      getAdvancingCareLabel();
     }
+  }, [chartData?.finalScore]);
 &nbsp;
-    render() {
-        const { categories } = this.props.chartData;
-        let legendToggler;
-        let legend;
+  <span class="missing-if-branch" title="if path not taken" >I</span>if (hasLegend) {
+<span class="cstat-no" title="statement not covered" >    legendToggler = (</span>
+      &lt;button className="open" type="button" aria-pressed="true"&gt;
+        Hide Legend
+        &lt;svg
+          className="right-icon rotated"
+          aria-hidden="true"
+          focusable="false"
+        &gt;
+          &lt;use xlinkHref="#chevron-down" /&gt;
+        &lt;/svg&gt;
+      &lt;/button&gt;
+    );
+<span class="cstat-no" title="statement not covered" >    legend = categories.map(<span class="fstat-no" title="function not covered" >({</span> name, value, maxContribution, link }, index) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      return (</span>
+        &lt;li key={name} className="legend-axis"&gt;
+          &lt;button onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >redirectToCategory(link, name)}</span>&gt;
+            &lt;span className={`legend-axis-color ${name}`} /&gt;
+            &amp;nbsp;
+            &lt;span className="legend-axis-title"&gt;{titleMapping[name]}&lt;/span&gt;
+            &amp;nbsp;
+            &lt;span className="legend-axis-value"&gt;{`${value}/${maxContribution}`}&lt;/span&gt;
+          &lt;/button&gt;
+        &lt;/li&gt;
+      );
+    });
+  } else {
+    legendToggler = (
+      &lt;button type="button" aria-pressed="false"&gt;
+        Show Legend
+        &lt;svg className="right-icon" aria-hidden="true" focusable="false"&gt;
+          &lt;use xlinkHref="#chevron-down" /&gt;
+        &lt;/svg&gt;
+      &lt;/button&gt;
+    );
+  }
 &nbsp;
-        <span class="missing-if-branch" title="if path not taken" >I</span>if (this.state.legend) {
-<span class="cstat-no" title="statement not covered" >            legendToggler = (</span>
-                &lt;button className="open" type="button" aria-pressed="true"&gt;
-                    Hide Legend
-                    &lt;svg
-                        className="right-icon rotated"
-                        aria-hidden="true"
-                        focusable="false"
-                    &gt;
-                        &lt;use xlinkHref="#chevron-down" /&gt;
-                    &lt;/svg&gt;
-                &lt;/button&gt;
-            );
-<span class="cstat-no" title="statement not covered" >            legend = categories.map(</span>
-<span class="fstat-no" title="function not covered" >                ({</span> name, value, maxContribution, link }, index) =&gt; {
-<span class="cstat-no" title="statement not covered" >                    return (</span>
-                        &lt;li key={name} className="legend-axis"&gt;
-                            &lt;button
-                                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt;
-<span class="cstat-no" title="statement not covered" >                                    this.redirectToCategory(link, name)</span>
-                                }
-                            &gt;
-                                &lt;span className={`legend-axis-color ${name}`} /&gt;
-                                &amp;nbsp;
-                                &lt;span className="legend-axis-title"&gt;
-                                    {this.state.titleMapping[name]}
-                                &lt;/span&gt;
-                                &amp;nbsp;
-                                &lt;span className="legend-axis-value"&gt;{`${value}/${maxContribution}`}&lt;/span&gt;
-                            &lt;/button&gt;
-                        &lt;/li&gt;
-                    );
-                }
-            );
-        } else {
-            legendToggler = (
-                &lt;button type="button" aria-pressed="false"&gt;
-                    Show Legend
-                    &lt;svg
-                        className="right-icon"
-                        aria-hidden="true"
-                        focusable="false"
-                    &gt;
-                        &lt;use xlinkHref="#chevron-down" /&gt;
-                    &lt;/svg&gt;
-                &lt;/button&gt;
-            );
-        }
-&nbsp;
-        return (
-            &lt;div className="chart"&gt;
-                &lt;svg
-                    className="score-chart"
-                    role="img"
-                    aria-labelledby="titleID descID"
-                    focusable="false"
-                /&gt;
-                &lt;div className="chart-tooltip off" /&gt;
-                &lt;div
-                    className="chart-legend-toggler"
-                    onClick={this.toggleLegend}
-                &gt;
-                    {legendToggler}
-                &lt;/div&gt;
-                &lt;ul className="chart-legend"&gt;{legend}&lt;/ul&gt;
-            &lt;/div&gt;
-        );
-    }
-}
+  return (
+    &lt;div className="chart"&gt;
+      &lt;svg className="score-chart" focusable="false" /&gt;
+      &lt;div className="chart-tooltip off" /&gt;
+      &lt;div className="chart-legend-toggler" onClick={toggleLegend}&gt;
+        {legendToggler}
+      &lt;/div&gt;
+      &lt;ul className="chart-legend"&gt;{legend}&lt;/ul&gt;
+    &lt;/div&gt;
+  );
+};
 &nbsp;
 ScoreChart.propTypes = {
-    chartData: PropTypes.object,
-    linkCallback: PropTypes.func,
-    performanceYear: PropTypes.number
+  chartData: PropTypes.object,
+  linkCallback: PropTypes.func,
+  performanceYear: PropTypes.number,
 };
+&nbsp;
+export default ScoreChart;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Oct 05 2020 11:31:16 GMT-0700 (Pacific Daylight Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
             </div>
-        </div>
         <script src="../../../../prettify.js"></script>
         <script>
             window.onload = function () {