Merge pull request #34 from kids-first/demo-fixes

🐛Bug fixes for demo

src/actions/index.js

@@ -2,6 +2,7 @@ export const SET_RESOURCES = 'SET_RESOURCES';
 export const SET_API = 'SET_API';
 export const SET_ONTOLOGIES = 'SET_ONTOLOGIES';
 export const SET_HOMEPAGE_VIEW = 'SET_HOMEPAGE_VIEW';
+export const SET_LOADING_MESSAGE = 'SET_LOADING_MESSAGE';
 
 export const setResources = allResources => ({
   type: SET_RESOURCES,
@@ -22,3 +23,8 @@ export const setHomepageView = cardView => ({
   type: SET_HOMEPAGE_VIEW,
   cardView,
 });
+
+export const setLoadingMessage = loadingMessage => ({
+  type: SET_LOADING_MESSAGE,
+  loadingMessage,
+});

src/components/DataPieChart.js

@@ -1,79 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {PieChart, Pie, Sector, ResponsiveContainer} from 'recharts';
-
-const renderActiveShape = props => {
-  const RADIAN = Math.PI / 180;
-  const {
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    fill,
-    payload,
-    percent,
-    value,
-  } = props;
-  const sin = Math.sin(-RADIAN * midAngle);
-  const cos = Math.cos(-RADIAN * midAngle);
-  const sx = cx + (outerRadius + 10) * cos;
-  const sy = cy + (outerRadius + 10) * sin;
-  const mx = cx + (outerRadius + 30) * cos;
-  const my = cy + (outerRadius + 30) * sin;
-  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-  const ey = my;
-  const textAnchor = cos >= 0 ? 'start' : 'end';
-
-  return (
-    <g>
-      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
-        {payload.name}
-      </text>
-      <Sector
-        cx={cx}
-        cy={cy}
-        innerRadius={innerRadius}
-        outerRadius={outerRadius}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        fill={fill}
-      />
-      <Sector
-        cx={cx}
-        cy={cy}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
-        fill={fill}
-      />
-      <path
-        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
-        stroke={fill}
-        fill="none"
-      />
-      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        textAnchor={textAnchor}
-        fill="#333"
-      >{`PV ${value}`}</text>
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        dy={18}
-        textAnchor={textAnchor}
-        fill="#999"
-      >
-        {`(Rate ${(percent * 100).toFixed(2)}%)`}
-      </text>
-    </g>
-  );
-};
+import {PieChart, Pie, Sector, ResponsiveContainer, Text} from 'recharts';
+import {getHumanReadableNumber} from '../utils/common';
 
 export class DataPieChart extends React.Component {
   constructor(props) {
@@ -89,13 +17,86 @@ export class DataPieChart extends React.Component {
     });
   };
 
+  renderActiveShape = props => {
+    const RADIAN = Math.PI / 180;
+    const {
+      cx,
+      cy,
+      midAngle,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      fill,
+      payload,
+      percent,
+      value,
+    } = props;
+    const sin = Math.sin(-RADIAN * midAngle);
+    const cos = Math.cos(-RADIAN * midAngle);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 30) * cos;
+    const my = cy + (outerRadius + 30) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? 'start' : 'end';
+
+    return (
+      <g>
+        <Text x={cx} y={cy} width={100} dy={8} textAnchor="middle">
+          {payload.name}
+        </Text>
+        <Sector
+          cx={cx}
+          cy={cy}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          fill={fill}
+        />
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+        <path
+          d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
+          stroke={fill}
+          fill="none"
+        />
+        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+        <text
+          x={ex + (cos >= 0 ? 1 : -1) * 12}
+          y={ey}
+          textAnchor={textAnchor}
+          fill="#333"
+        >{`Total ${getHumanReadableNumber(value)}`}</text>
+        <text
+          x={ex + (cos >= 0 ? 1 : -1) * 12}
+          y={ey}
+          dy={18}
+          textAnchor={textAnchor}
+          fill="#999"
+        >
+          {`(${(percent * 100).toFixed(2)}%)`}
+        </text>
+      </g>
+    );
+  };
+
   render() {
     return (
       <ResponsiveContainer width="100%" height={300}>
         <PieChart>
           <Pie
             activeIndex={this.state.activeIndex}
-            activeShape={renderActiveShape}
+            activeShape={this.renderActiveShape}
             data={this.props.data.filter(x => x.value > 0)}
             innerRadius={60}
             outerRadius={80}

src/components/Homepage.js

@@ -198,7 +198,9 @@ class Homepage extends React.Component {
       <div className="homepage">
         <div
           className={`ui ${allResourcesFetched ? 'disabled' : 'active'} loader`}
-        />
+        >
+          <p>{this.props.loadingMessage}</p>
+        </div>
         <div className="homepage__header">
           <div className="homepage__header-title">
             <h2>{searchResourceTitle}:</h2>
@@ -367,12 +369,14 @@ Homepage.propTypes = {
   setBaseUrl: PropTypes.func.isRequired,
   cardView: PropTypes.bool,
   setHomepageView: PropTypes.func.isRequired,
+  loadingMessage: PropTypes.string,
 };
 
 Homepage.defaultProps = {
   allResources: {},
   allResourcesFetched: false,
   cardView: true,
+  loadingMessage: '',
 };
 
 export default Homepage;

src/components/OntologyHomepage.js

@@ -102,7 +102,9 @@ class OntologyHomepage extends React.Component {
         {ontologiesFetched ? (
           <SortableTable headerCells={tableHeaders} data={listOntologies} />
         ) : (
-          <div className="ui active loader" />
+          <div className="ui active loader">
+            <p>{this.props.loadingMessage}</p>
+          </div>
         )}
       </div>
     );
@@ -115,11 +117,13 @@ OntologyHomepage.propTypes = {
   setBaseUrl: PropTypes.func.isRequired,
   ontologiesFetched: PropTypes.bool,
   getOntologies: PropTypes.func.isRequired,
+  loadingMessage: PropTypes.string,
 };
 
 OntologyHomepage.defaultProps = {
   ontologies: {},
   ontologiesFetched: false,
+  loadingMessage: '',
 };
 
 export default OntologyHomepage;

src/components/ReduxHomepage.js

@@ -1,13 +1,19 @@
 import {connect} from 'react-redux';
-import {setResources, setApi, setHomepageView} from '../actions';
+import {
+  setResources,
+  setApi,
+  setHomepageView,
+  setLoadingMessage,
+} from '../actions';
 import {fetchAllResources, getResourceCount} from '../utils/api';
 import {getBaseResourceCount} from '../utils/common';
 import {acceptedResourceTypes} from '../config';
 import Homepage from './Homepage';
 
-const getAllResources = async (baseUrl, resourceType) => {
+const getAllResources = async (baseUrl, resourceType, dispatch) => {
   const url = `${baseUrl}${resourceType}`;
   let allResources = await fetchAllResources(url, []);
+  dispatch(setLoadingMessage('Getting resource totals...'));
   allResources = allResources
     ? await setResourceCounts(baseUrl, allResources)
     : [];
@@ -71,12 +77,18 @@ const mapStateToProps = (state, ownProps) => ({
     state && state.resources ? state.resources.allResourcesFetched : false,
   baseUrl: state.resources.baseUrl,
   cardView: state.resources.cardView,
+  loadingMessage: state.resources.loadingMessage,
 });
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     fetchAllResources: async (baseUrl, resourceType) => {
-      const allResources = await getAllResources(baseUrl, resourceType);
+      dispatch(setLoadingMessage('Fetching all resources...'));
+      const allResources = await getAllResources(
+        baseUrl,
+        resourceType,
+        dispatch,
+      );
       dispatch(setResources(allResources));
     },
     setBaseUrl: url => dispatch(setApi(url)),

src/components/ReduxOntologyHomepage.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import {setOntologies, setApi} from '../actions';
+import {setOntologies, setApi, setLoadingMessage} from '../actions';
 import {getOntologies} from '../utils/api';
 import OntologyHomepage from './OntologyHomepage';
 
@@ -24,12 +24,14 @@ const mapStateToProps = (state, ownProps) => ({
   ontologiesFetched:
     state && state.ontologies ? state.ontologies.ontologiesFetched : false,
   baseUrl: state.resources.baseUrl,
+  loadingMessage: state.resources.loadingMessage,
 });
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     setBaseUrl: url => dispatch(setApi(url)),
     getOntologies: async url => {
+      dispatch(setLoadingMessage('Fetching all ontologies...'));
       const ontologies = await getOntologies(url);
       const groupedOntologies = groupOntologies(ontologies);
       dispatch(setOntologies(groupedOntologies));

src/components/ReduxResourceDetails.js

@@ -5,6 +5,7 @@ import {
   fetchResource,
   getCapabilityStatementSearchParams,
 } from '../utils/api';
+import {setLoadingMessage} from '../actions';
 import queryString from 'query-string';
 import ResourceDetails from './ResourceDetails';
 
@@ -27,6 +28,7 @@ const mapStateToProps = (state, ownProps) => {
     baseUrl: state.resources.baseUrl,
     schemaUrl: `${state.resources.baseUrl}StructureDefinition`,
     capabilityStatementUrl: `${state.resources.baseUrl}metadata`,
+    loadingMessage: state.resources.loadingMessage,
   };
 };
 
@@ -37,6 +39,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     getCapabilityStatement: (url, resourceType) =>
       getCapabilityStatementSearchParams(url, resourceType),
     fetchResource: url => fetchResource(url),
+    setLoadingMessage: message => dispatch(setLoadingMessage(message)),
   };
 };