@madie/madie-design-system 1.0.0

package/components/SideNav/Chart/ScoreChart.jsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import { pie, arc } from 'd3-shape';
+import { select, event } from 'd3-selection';
+import PropTypes from 'prop-types';
+
+const WIDTH = 210;
+const HEIGHT = 210;
+const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
+const GAP_VALUE = 2.5;
+
+const ScoreChart = ({ performanceYear, chartData, linkCallback }) => {
+  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 { categories } = chartData;
+  let legendToggler;
+  let legend;
+
+  const getAdvancingCareLabel = () => {
+    if (performanceYear > 2017) {
+      setTitleMapping({ ...titleMapping, aci: 'Promoting Interoperability' });
+    }
+  };
+
+  const redirectToCategory = (link, categoryId) => {
+    if (!link) {
+      return;
+    }
+
+    // track explicitly chart legends
+    if (window.utag) {
+      window.utag.track('link', {
+        ga_event_category: 'SidebarNav',
+        ga_event_action: `GoTo${categoryId}`,
+        ga_event_label: categoryId,
+      });
+    }
+
+    if (linkCallback) {
+      linkCallback(link);
+    } else {
+      window.location.href = link;
+    }
+  };
+
+  const draw = (chartData) => {
+    const scorePie = pie().sort(null);
+
+    // Removing invalid categories
+    const categories = chartData.categories.filter(
+      ({ maxContribution }) => !!maxContribution
+    );
+
+    // Calculating the sum of valid categories in order to calculate ratios
+    const categorySum = categories
+      .map(({ maxContribution }) => maxContribution)
+      .reduce((sum, current) => sum + current);
+
+    if (!categorySum) {
+      return;
+    }
+
+    select('.score-chart').selectAll('*').remove();
+
+    const svg = select('.score-chart')
+      .attr('width', WIDTH)
+      .attr('height', HEIGHT);
+
+    const chartArc = arc()
+      .innerRadius(RADIUS - 1.5)
+      .outerRadius(RADIUS - 25);
+
+    // Preparing the data structure with ratios: [ FILLED, EMPTY, TRANSPARENT, FILLED, EMPTY, ... ]
+    let data;
+    if (categories.length === 0) {
+      data = [];
+    } else if (categories.length === 1) {
+      const { value, maxContribution } = categories[0];
+      data = [value || 0, maxContribution - value];
+    } else {
+      data = categories
+        .map(({ value, maxContribution }) => [
+          value || 0,
+          maxContribution - value,
+          GAP_VALUE * (categorySum / 100),
+        ])
+        .reduce((a, b) => a.concat(b), []);
+    }
+
+    svg.append('title').attr('id', 'titleID').text('Your submission score');
+
+    svg
+      .append('desc')
+      .attr('id', 'descID')
+      .text(`${chartData.finalScore} out of 100`);
+
+    // 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) => {
+        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) => {
+        let tabindex = -1;
+        if (i % 3 === 0) {
+          tabindex = 0;
+        }
+        return tabindex;
+      })
+      // IE for for focusable svg elements
+      .attr('focusable', (d, i) => {
+        if (i % 3 === 0) {
+          return true;
+        }
+      })
+      // For accessibility, we add keyboard access to the filled slices
+      .on('keyup', (d, i) => {
+        const code = event.keyCode || event.which;
+        if (code === 13) {
+          const { name, link } = categories[parseInt(i / 3)];
+          redirectToCategory(link, name);
+        }
+      })
+      // On click - go to category page
+      .on('click', (d, i) => {
+        const { name, link } = categories[parseInt(i / 3)];
+        redirectToCategory(link, name);
+      });
+
+    // Add accessibility description
+    arcs.append('desc').text((d, i) => {
+      if (i % 3 === 0) {
+        const { name, value, maxContribution } = categories[parseInt(i / 3)];
+        return `${titleMapping[name]} ${value} out of ${maxContribution}`;
+      }
+    });
+
+    arcs
+      .append('path')
+      .attr('d', chartArc)
+      // On mouse over - show category tooltip
+      .on('mouseover', (d, i) => {
+        const { name, value, maxContribution } = categories[parseInt(i / 3)];
+        select('.chart-tooltip')
+          .style('opacity', 1)
+          .text(`${titleMapping[name]} ${value}/${maxContribution}`);
+      })
+      // On mouse move - move category tooltip
+      .on('mousemove', () => {
+        select('.chart-tooltip')
+          .style('top', event.clientY - HEIGHT + 10 + 'px')
+          .style('left', event.clientX + 'px');
+      })
+      // On mouse out - hide category tooltip
+      .on('mouseout', () => {
+        select('.chart-tooltip').style('opacity', 0);
+      });
+
+    // 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);
+
+    // Adding subtitle - OUT OF 100
+    text
+      .append('text')
+      .attr('y', 24)
+      .attr('class', 'chart-subtitle')
+      .text('OUT OF 100');
+  };
+
+  const toggleLegend = () => {
+    setHasLegend(!hasLegend);
+  };
+
+  useEffect(() => {
+    if (chartData?.finalScore) {
+      draw(chartData);
+      getAdvancingCareLabel();
+    }
+  }, [chartData?.finalScore]);
+
+  if (hasLegend) {
+    legendToggler = (
+      <button className="open" type="button" aria-pressed="true">
+        Hide Legend
+        <svg
+          className="right-icon rotated"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <use xlinkHref="#chevron-down" />
+        </svg>
+      </button>
+    );
+    legend = categories.map(({ name, value, maxContribution, link }, index) => {
+      return (
+        <li key={name} className="legend-axis">
+          <button onClick={() => redirectToCategory(link, name)}>
+            <span className={`legend-axis-color ${name}`} />
+            &nbsp;
+            <span className="legend-axis-title">{titleMapping[name]}</span>
+            &nbsp;
+            <span className="legend-axis-value">{`${value}/${maxContribution}`}</span>
+          </button>
+        </li>
+      );
+    });
+  } else {
+    legendToggler = (
+      <button type="button" aria-pressed="false">
+        Show Legend
+        <svg className="right-icon" aria-hidden="true" focusable="false">
+          <use xlinkHref="#chevron-down" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <div className="chart">
+      <svg className="score-chart" focusable="false" />
+      <div className="chart-tooltip off" />
+      <div className="chart-legend-toggler" onClick={toggleLegend}>
+        {legendToggler}
+      </div>
+      <ul className="chart-legend">{legend}</ul>
+    </div>
+  );
+};
+
+ScoreChart.propTypes = {
+  chartData: PropTypes.object,
+  linkCallback: PropTypes.func,
+  performanceYear: PropTypes.number,
+};
+
+export default ScoreChart;

package/components/SideNav/Chart/__tests__/ScoreChart.test.js

@@ -0,0 +1,22 @@
+/* global expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import ScoreChart from '../ScoreChart';
+
+const CHART_DATA = {
+  finalScore: 50,
+  submissionId: 'x',
+  categories: [
+    { name: 'quality', value: 30, maxContribution: 60 },
+    { name: 'aci', value: 15, maxContribution: 30 },
+    { name: 'ia', value: 5, maxContribution: 10 },
+  ],
+};
+
+describe('ScoreChart component', () => {
+  it('should match snapshot', () => {
+    const { container } = render(<ScoreChart chartData={CHART_DATA} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScoreChart component should match snapshot 1`] = `
+<div>
+  <div
+    class="chart"
+  >
+    <svg
+      class="score-chart"
+      focusable="false"
+      height="210"
+      width="210"
+    >
+      <title
+        id="titleID"
+      >
+        Your submission score
+      </title>
+      <desc
+        id="descID"
+      >
+        50 out of 100
+      </desc>
+      <g
+        class="arcs"
+        role="presentation"
+      >
+        <g
+          class="arc quality filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Quality Measures 30 out of 60
+          </desc>
+          <path
+            d="M6.3375471855875526e-15,-103.5A103.5,103.5,0,0,1,101.77834755184973,18.799414076371672L78.66925414635729,14.530948078354914A80,80,0,0,0,4.898587196589413e-15,-80Z"
+          />
+        </g>
+        <g
+          class="arc quality empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M101.77834755184973,18.799414076371672A103.5,103.5,0,0,1,-36.97339709441724,96.67066725381872L-28.578471184090617,74.72128869860384A80,80,0,0,0,78.66925414635729,14.530948078354914Z"
+          />
+        </g>
+        <g
+          class="arc quality transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-36.97339709441724,96.67066725381872A103.5,103.5,0,0,1,-50.65474724844733,90.2571137428841L-39.15342782488682,69.76395265150461A80,80,0,0,0,-28.578471184090617,74.72128869860384Z"
+          />
+        </g>
+        <g
+          class="arc aci filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Advancing Care Info 15 out of 30
+          </desc>
+          <path
+            d="M-50.65474724844733,90.2571137428841A103.5,103.5,0,0,1,-101.77834755184973,18.79941407637173L-78.66925414635729,14.53094807835496A80,80,0,0,0,-39.15342782488682,69.76395265150461Z"
+          />
+        </g>
+        <g
+          class="arc aci empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-101.77834755184973,18.79941407637173A103.5,103.5,0,0,1,-79.55497896707813,-66.20615773134517L-61.491771182282605,-51.17384172471125A80,80,0,0,0,-78.66925414635729,14.53094807835496Z"
+          />
+        </g>
+        <g
+          class="arc aci transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-79.55497896707813,-66.20615773134517A103.5,103.5,0,0,1,-69.06749696150186,-77.08392091398136L-53.385504897779214,-59.5817746195025A80,80,0,0,0,-61.491771182282605,-51.17384172471125Z"
+          />
+        </g>
+        <g
+          class="arc ia filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Improvement Activities 5 out of 10
+          </desc>
+          <path
+            d="M-69.06749696150186,-77.08392091398136A103.5,103.5,0,0,1,-43.93126833364699,-93.71389258054062L-33.956535910065305,-72.43585899945168A80,80,0,0,0,-53.385504897779214,-59.5817746195025Z"
+          />
+        </g>
+        <g
+          class="arc ia empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-43.93126833364699,-93.71389258054062A103.5,103.5,0,0,1,-15.069720860573184,-102.39703859577388L-11.64809341880053,-79.1474694460088A80,80,0,0,0,-33.956535910065305,-72.43585899945168Z"
+          />
+        </g>
+        <g
+          class="arc ia transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-15.069720860573184,-102.39703859577388A103.5,103.5,0,0,1,-2.0286557443468859e-13,-103.5L-1.5680430874178828e-13,-80A80,80,0,0,0,-11.64809341880053,-79.1474694460088Z"
+          />
+        </g>
+      </g>
+      <g
+        text-anchor="middle"
+        transform="translate(105, 105)"
+      >
+        <text
+          class="chart-title"
+          y="4"
+        >
+          50
+        </text>
+        <text
+          class="chart-subtitle"
+          y="24"
+        >
+          OUT OF 100
+        </text>
+      </g>
+    </svg>
+    <div
+      class="chart-tooltip off"
+    />
+    <div
+      class="chart-legend-toggler"
+    >
+      <button
+        aria-pressed="false"
+        type="button"
+      >
+        Show Legend
+        <svg
+          aria-hidden="true"
+          class="right-icon"
+          focusable="false"
+        >
+          <use
+            xlink:href="#chevron-down"
+          />
+        </svg>
+      </button>
+    </div>
+    <ul
+      class="chart-legend"
+    />
+  </div>
+</div>
+`;

package/components/SideNav/Chart/index.js

@@ -0,0 +1,3 @@
+import ScoreChart from './ScoreChart';
+
+export { ScoreChart };

package/components/SideNav/Content/LevelOneContent.jsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cookie from 'cookie';
+import jwtDecode from 'jwt-decode';
+
+import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from '../Links';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import defaultContent from '../UI/default-content';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  FacilityBasedPreviewIcon,
+  HardshipIcon,
+  HelpSupportIcon,
+  ManageUsersIcon,
+  MyApplicationsIcon,
+  MyTestDataIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  StarIcon,
+  TargetIcon,
+  IndividualReporting,
+} from '../../../lib/SvgComponents';
+import {
+  dashboardUrl,
+  facilityBasedPreviewBaseUrl,
+  feedbackUrl,
+  manageUrl,
+  physicianCompareUrl,
+  reportsPortalUrl,
+  submissionsUrl,
+} from '../helpers';
+
+const getIcon = (url) =>
+  ({
+    [dashboardUrl]: DashboardIcon,
+    [feedbackUrl]: StarIcon,
+    [manageUrl]: ManageUsersIcon,
+    [physicianCompareUrl]: PhysicianCompareIcon,
+    [reportsPortalUrl]: HardshipIcon,
+    [submissionsUrl]: AccountHomeIcon,
+    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
+    '/developers': HelpSupportIcon,
+    '/resources/help-and-support': HelpSupportIcon,
+    '/user/apm-incentive-payments': PaymentIcon,
+    '/user/applications': MyApplicationsIcon,
+    '/user/exception/#/landing': HardshipIcon,
+    '/user/targeted-review/#/landing': TargetIcon,
+    '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': DashboardIcon,
+    '/reviewer/exception': HardshipIcon,
+    '/reviewer/targeted-review': TargetIcon,
+    '/self-nomination': IndividualReporting,
+  }[url] || null);
+
+const LevelOneContent = ({
+  isExpanded,
+  config: { linkCallback, useTooltips } = {},
+  levelOneContent,
+}) => {
+  let {
+    qpp_has_authorizations,
+    user_has_apm_payments,
+    qpp_is_dev_pre,
+    qpp_ehr_authorized,
+    qpp_has_non_registry_authorizations,
+    qpp_auth_token,
+    qpp_cms_internal_authorized,
+    qpp_can_impersonate,
+  } = cookie.parse(document.cookie);
+
+  let name = '';
+  if (qpp_auth_token) {
+    const { firstName, lastName } = jwtDecode(qpp_auth_token);
+    name = `${firstName} ${lastName}`;
+  }
+
+  const canImpersonate = qpp_can_impersonate === 'true';
+  const hasAuthorizations = qpp_has_authorizations === 'true';
+  const hasApmPayments = user_has_apm_payments === 'true';
+  const isDevPre = qpp_is_dev_pre === 'true';
+  const internalReviewerNames = JSON.parse(
+    qpp_cms_internal_authorized || 'null'
+  );
+  const ehrAuthorized = qpp_ehr_authorized === 'true';
+  const hasNonRegistryAuthorizations =
+    qpp_has_non_registry_authorizations === 'true';
+
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+  let content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+  if (
+    (internalReviewerNames || []).some(
+      (name) =>
+        name === 'QPP Self-Nomination' ||
+        name === 'QPP Targeted Review & Exceptions'
+    )
+  ) {
+    content =
+      levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+  }
+
+  // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
+  const urlConditionMap = {
+    [dashboardUrl]: hasAuthorizations,
+    [feedbackUrl]: hasAuthorizations,
+    '/user/apm-incentive-payments': hasApmPayments,
+    [physicianCompareUrl]: hasNonRegistryAuthorizations,
+    [reportsPortalUrl]: hasAuthorizations,
+    [facilityBasedPreviewBaseUrl]: hasAuthorizations,
+    '/user/impersonate': canImpersonate,
+
+    '/reviewer/exception': (internalReviewerNames || []).includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/targeted-review': (internalReviewerNames || []).includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/self-nomination': (internalReviewerNames || []).includes(
+      'QPP Self-Nomination'
+    ),
+
+    // dev pre
+    '/user/applications': ehrAuthorized,
+    '/user/test-data': ehrAuthorized,
+  };
+
+  const navLinks = content.reduce((acc, link) => {
+    const { url, label, className, listOfLinks, ...rest } = link;
+
+    // Any links failing the corresponding condition in the urlConditionMap are skipped
+    if (url in urlConditionMap && !urlConditionMap[url]) {
+      return acc;
+    }
+
+    const IconComponent = getIcon(url);
+    const Icon = IconComponent ? <IconComponent /> : null;
+    const sharedProps = {
+      url,
+      label,
+      linkCallback,
+      className: className ? `${linkClass} ${className}` : linkClass,
+    };
+
+    const { pathname, hash } = window.location;
+    const filteredListOfLinks = (listOfLinks || []).filter((sublink) => {
+      return !(sublink.url in urlConditionMap && !urlConditionMap[sublink.url]);
+    });
+    if (
+      filteredListOfLinks?.length > 0 &&
+      (pathname === url ||
+        filteredListOfLinks.some(
+          (sublink) =>
+            pathname === sublink.url || `${pathname}${hash}` === sublink.url
+        ))
+    ) {
+      acc.push(
+        <NavLinkDrawer
+          key={`nav-drawer-${url}-${label}`}
+          leftIcon={Icon}
+          listOfLinks={filteredListOfLinks}
+          isExpanded={isExpanded}
+          staticDrawer={false}
+          openByDefault
+          isAlwaysOpen
+          {...sharedProps}
+          {...rest}
+        />
+      );
+    } else {
+      acc.push(
+        <NavLinkInline
+          key={`nav-link-${url}-${label}`}
+          icon={Icon}
+          useTooltips={useTooltips}
+          showLabel={isExpanded}
+          {...sharedProps}
+          {...rest}
+        />
+      );
+    }
+    return acc;
+  }, []);
+
+  return (
+    <div className="sidebar-content">
+      <AnimationGroup display={isExpanded}>
+        <h1 className="label">{name}</h1>
+      </AnimationGroup>
+      <div className="level-one-nav animation-flat">
+        <NavLinkContainer listOfLinks={navLinks} />
+      </div>
+    </div>
+  );
+};
+
+LevelOneContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  config: PropTypes.object,
+  levelOneContent: PropTypes.shape({
+    default: PropTypes.arrayOf(PropTypes.object),
+    devPre: PropTypes.arrayOf(PropTypes.object),
+    viewer: PropTypes.arrayOf(PropTypes.object),
+    internalReviewers: PropTypes.arrayOf(PropTypes.object),
+  }),
+};
+
+export default LevelOneContent;