adds pass-thru options to show tables at end of doc

Datawheel · Jul 23, 2020 · 300ff13 · 300ff13
1 parent 42eb19f
commit 300ff13
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 27 deletions.
diff --git a/packages/cms/src/components/ProfileRenderer.jsx b/packages/cms/src/components/ProfileRenderer.jsx
@@ -17,6 +17,7 @@ import Subnav from "./sections/components/Subnav";
 import Mirror from "./Viz/Mirror";
 import isIE from "../utils/isIE.js";
 import hashCode from "../utils/hashCode.js";
+import stripHTML from "../utils/formatters/stripHTML";
 
 import deepClone from "../utils/deepClone.js";
 
@@ -197,9 +198,9 @@ class ProfileRenderer extends Component {
     const innerGroupedSections = []; // array for sections to be accumulated into
     let groupedSections = [];
 
-    let printTables = [];
+    let printSections = [];
     if (print) {
-      printTables = sections.reduce((acc, d) => acc.concat(d.visualizations), []);
+      printSections = sections.filter(d => d.visualizations.length > 0);
     }
 
     // make sure there are sections to loop through (issue #700)
@@ -293,22 +294,20 @@ class ProfileRenderer extends Component {
               <Related profiles={relatedProfiles} />
             }
             {
-              printTables.length > 0 && <div>
-                <h1>LOOK</h1>
-                {printTables.map(d => 
-                  <Viz
-                    config={d}
-                    key={d.id}
-                    dataOnly={true}
-
-                    /*
-                    section={this}
-                    headingLevel={vizHeadingLevel}
-                    sectionTitle={title}
-                    slug={slug}
-                    hideOptions={hideOptions}
-                    */
-                  />
+              printSections.length > 0 && <div>
+                <h1>APPENDIX</h1>
+                {printSections.map(section => 
+                  <div key={section.id}>
+                    <h3>{stripHTML(section.title)}</h3>
+                    {section.visualizations.map((viz, i) => 
+                      <Viz
+                        config={viz}
+                        key={viz.id}
+                        slug={`Visualization ${i + 1} (${stripHTML(section.title)})`}
+                        dataOnly={true}
+                      />
+                    )}
+                  </div>
                 )}
               </div>
             }

diff --git a/packages/cms/src/components/Viz/Options.jsx b/packages/cms/src/components/Viz/Options.jsx
@@ -69,6 +69,29 @@ class Options extends Component {
     this.dialog = React.createRef();
   }
 
+  componentDidMount() {
+    // Options.jsx can be mounted in "dataOnly" mode, just prints all the data in a ReactTable. Used for printing PDFs.
+    // Therefore, fetch the data on mount (as opposed to behind a "view data" button click, as with regular Options)
+    const {dataOnly} = this.props;
+    if (dataOnly) {
+      const {data, dataFormat} = this.props;
+      const paths = typeof data === "string" ? [data] : data;
+      this.setState({loading: true});
+      Promise.all(paths.map(path => typeof path === "string" ? axios.get(path) : {data: path})).then(resps => {
+        const loaded = resps.map(d => d.data);
+        let results;
+        try {
+          results = dataFormat(loaded.length === 1 ? loaded[0] : loaded);
+        }
+        catch (e) {
+          console.log("Error in Options Panel: ", e);
+          results = [];
+        }
+        this.setState({loading: false, results});
+      });
+    }
+  }
+
   componentDidUpdate(prevProps) {
     const {data} = this.props;
     if (JSON.stringify(prevProps.data) !== JSON.stringify(data)) {
@@ -320,7 +343,7 @@ class Options extends Component {
 
   render() {
     const {backgroundColor, imageContext, imageFormat, imageProcessing, includeSlug, dialogOpen, results, focusOptions} = this.state;
-    const {data, iconOnly, slug, t, transitionDuration} = this.props;
+    const {data, dataOnly, iconOnly, slug, t, transitionDuration} = this.props;
 
     // construct URL from a combination of redux & context (#537)
     const domain = this.props.location.origin;
@@ -393,6 +416,22 @@ class Options extends Component {
         </label>
       </div>;
 
+    if (dataOnly) {
+      return results ? <div>
+        <ReactTable
+          data={results}
+          defaultPageSize={results.length}
+          columns={columns.map(col => this.renderColumn(col))}
+          minRows="0"
+          minWidth="300"
+          showPagination={false}
+          resizable={false}
+        />
+      </div> : <div className="bp3-dialog-body view-table">
+        <NonIdealState title={t("CMS.Options.Loading Data")} visual={<Spinner />} />
+      </div>;
+    }
+
     return <div
       className="Options"
       tabIndex={focusOptions ? 0 : null}

diff --git a/packages/cms/src/components/Viz/Viz.jsx b/packages/cms/src/components/Viz/Viz.jsx
@@ -109,14 +109,22 @@ class Viz extends Component {
     const showHeader = (title && showTitle || !hideOptions) && type !== "Graphic" && type !== "HTML";
 
     if (dataOnly) {
-      return <Options
-        key="option-key"
-        component={{section, viz: this}}
-        data={vizConfig.data}
-        dataFormat={vizProps.dataFormat}
-        slug={slug }
-        title={title || sectionTitle || slug}
-      />;
+      return <div>
+        <Parse 
+          El={headingLevel} 
+          className={`${namespace}-viz-title u-margin-top-off u-margin-bottom-off u-font-xs`}
+        >
+          {title || slug}
+        </Parse>
+        <Options
+          component={{section, viz: this}}
+          data={vizConfig.data}
+          dataFormat={vizProps.dataFormat}
+          dataOnly={true}
+          slug={slug }
+          title={title || sectionTitle || slug}
+        />
+      </div>;
     }
 
     return <SizeMe render={({size}) =>