@madie/madie-design-system 1.0.2 → 1.0.3

package/coverage/lcov-report/react/components/SideNav/AnimationGroup/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

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

@@ -331,7 +331,16 @@
 <a name='L266'></a><a href='#L266'>266</a>
 <a name='L267'></a><a href='#L267'>267</a>
 <a name='L268'></a><a href='#L268'>268</a>
-<a name='L269'></a><a href='#L269'>269</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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></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>
@@ -361,6 +370,9 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -433,7 +445,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-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -485,6 +496,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-neutral">&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>
@@ -524,14 +536,12 @@
 <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>
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -557,6 +567,7 @@
 <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-no">&nbsp;</span>
@@ -570,6 +581,9 @@
 <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>
@@ -580,6 +594,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-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>
@@ -599,10 +617,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-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';
+<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";
 &nbsp;
 const WIDTH = 210;
 const HEIGHT = 210;
@@ -610,260 +628,269 @@ const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
 const GAP_VALUE = 2.5;
 &nbsp;
 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',
-  });
+    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;
-  const { categories } = chartData;
-  let legendToggler;
-  let legend;
+    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>
-    }
-  };
+    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({</span>
+                ...titleMapping,
+                aci: "Promoting Interoperability",
+            });
+        }
+    };
 &nbsp;
-  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>
-    }
+    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;
-    // 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,
-      });
-    }
+        // 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" >    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>
-    }
-  };
+<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;
-  const draw = (chartData) =&gt; {
-    const scorePie = pie().sort(null);
+    const draw = (chartData) =&gt; {
+        const scorePie = pie().sort(null);
 &nbsp;
-    // Removing invalid categories
-    const categories = chartData.categories.filter(
-      ({ maxContribution }) =&gt; !!maxContribution
-    );
+        // Removing invalid categories
+        const categories = chartData.categories.filter(
+            ({ maxContribution }) =&gt; !!maxContribution
+        );
 &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);
+        // Calculating the sum of valid categories in order to calculate ratios
+        const categorySum = categories
+            .map(({ maxContribution }) =&gt; maxContribution)
+            .reduce((sum, current) =&gt; sum + current);
 &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>
-    }
+        <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;
-    select('.score-chart').selectAll('*').remove();
+        select(".score-chart").selectAll("*").remove();
 &nbsp;
-    const svg = select('.score-chart')
-      .attr('width', WIDTH)
-      .attr('height', HEIGHT);
+        const svg = select(".score-chart")
+            .attr("width", WIDTH)
+            .attr("height", HEIGHT);
 &nbsp;
-    const chartArc = arc()
-      .innerRadius(RADIUS - 1.5)
-      .outerRadius(RADIUS - 25);
+        const chartArc = arc()
+            .innerRadius(RADIUS - 1.5)
+            .outerRadius(RADIUS - 25);
 &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>
-    } 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), []);
-    }
+        // 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>
+        } 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), []);
+        }
 &nbsp;
-    svg.append('title').attr('id', 'titleID').text('Your submission score');
+        svg.append("title").attr("id", "titleID").text("Your submission score");
 &nbsp;
-    svg
-      .append('desc')
-      .attr('id', 'descID')
-      .text(`${chartData.finalScore} out of 100`);
+        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', (d, i) =&gt; {
-        let role;
-        if (i % 3 === 0) {
-          role = 'filled';
-        } else if (i % 3 === 1) {
-          role = 'empty';
-        } else {
-          role = 'transparent';
-        }
-        return `arc ${categories[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" >categories[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" >categories[parseInt(i / 3)];</span>
-<span class="cstat-no" title="statement not covered" >        redirectToCategory(link, name);</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 {
+                    role = "transparent";
+                }
+                return `arc ${categories[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" >categories[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" >categories[parseInt(i / 3)];</span>
+<span class="cstat-no" title="statement not covered" >                redirectToCategory(link, name);</span>
+            });
 &nbsp;
-    // Add accessibility description
-    arcs.append('desc').text((d, i) =&gt; {
-      if (i % 3 === 0) {
-        const { name, value, maxContribution } = categories[parseInt(i / 3)];
-        return `${titleMapping[name]} ${value} out of ${maxContribution}`;
-      }
-    });
+        // Add accessibility description
+        arcs.append("desc").text((d, i) =&gt; {
+            if (i % 3 === 0) {
+                const { name, value, maxContribution } =
+                    categories[parseInt(i / 3)];
+                return `${titleMapping[name]} ${value} out of ${maxContribution}`;
+            }
+        });
 &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[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>
-      });
+        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[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;
-    // Adding title and subtitle
-    const text = svg
-      .append('g')
-      .attr('text-anchor', 'middle')
-      .attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
+        // Adding title and subtitle
+        const text = svg
+            .append("g")
+            .attr("text-anchor", "middle")
+            .attr("transform", `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
 &nbsp;
-    // Adding title - X%
-    text
-      .append('text')
-      .attr('y', 4)
-      .attr('class', 'chart-title')
-      .text(chartData.finalScore);
+        // Adding title - X%
+        text.append("text")
+            .attr("y", 4)
+            .attr("class", "chart-title")
+            .text(chartData.finalScore);
 &nbsp;
-    // Adding subtitle - OUT OF 100
-    text
-      .append('text')
-      .attr('y', 24)
-      .attr('class', 'chart-subtitle')
-      .text('OUT OF 100');
-  };
+        // Adding subtitle - OUT OF 100
+        text.append("text")
+            .attr("y", 24)
+            .attr("class", "chart-subtitle")
+            .text("OUT OF 100");
+    };
 &nbsp;
-  const toggleLegend = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    setHasLegend(!hasLegend);</span>
-  };
+    const toggleLegend = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setHasLegend(!hasLegend);</span>
+    };
 &nbsp;
-  useEffect(() =&gt; {
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (chartData?.finalScore) {
-      draw(chartData);
-      getAdvancingCareLabel();
+    useEffect(() =&gt; {
+        <span class="missing-if-branch" title="else path not taken" >E</span>if (chartData?.finalScore) {
+            draw(chartData);
+            getAdvancingCareLabel();
+        }
+    }, [chartData?.finalScore]);
+&nbsp;
+    <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>
+<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" >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;
+        );
     }
-  }, [chartData?.finalScore]);
 &nbsp;
-  <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;
+    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;
     );
-<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;
-  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;
@@ -874,7 +901,7 @@ export default ScoreChart;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

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

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>