feat(map): metric download functionality [EP-1328] (#187)

* feat(map): metric download functionality [EP-1328] * feat(map): metric download functionality [EP-1328] * feat(map): metric download functionality [EP-1328]
natgeosociety · Oct 2, 2020 · 505cb30 · 505cb30
1 parent a708017
commit 505cb30
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "delay": "^4.1.0",
     "iframe-resizer": "^3.6.6",
     "jsona": "^1.4.0",
+    "flat": "^5.0.2",
+    "json2csv": "^5.0.3",
     "layer-manager": "^3.0.6",
     "localforage": "^1.7.3",
     "localforage-memoryStorageDriver": "^0.9.2",

diff --git a/packages/earth-admin/src/components/download-file/DownloadFile.tsx b/packages/earth-admin/src/components/download-file/DownloadFile.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React from 'react';
 
-import { downloadFile } from '@app/utils';
+import { downloadFile } from '@marapp/earth-shared';
 
 interface DownloadFileProps {
   data: any;

diff --git a/packages/earth-admin/src/utils/index.ts b/packages/earth-admin/src/utils/index.ts
@@ -105,12 +105,6 @@ export const formatArrayToParentheses = (
   }
 };
 
-export const downloadFile = (data): string => {
-  const encoded = JSON.stringify(data);
-  const jsonBlob = new Blob([encoded]);
-  return URL.createObjectURL(jsonBlob);
-};
-
 /**
  * Flattens object array returned from multiselect to work with api
  * @param data

diff --git a/packages/earth-map/src/components/widget/component.tsx b/packages/earth-map/src/components/widget/component.tsx
@@ -252,7 +252,7 @@ class Widget extends React.PureComponent<IWidgetTemplate, IWidgetState> {
         <div className="widget--container ng-padding-large-vertical ng-padding-medium-horizontal">
           {/* HEADER */}
           {header && (
-            <header className="ng-flex ng-flex-space-between ng-padding-medium-bottom">
+            <header className="ng-flex ng-flex-middle ng-flex-space-between ng-padding-medium-bottom">
               <div className="widget--header-title">
                 <h4 className="ng-text-display-s ng-body-color ng-margin-remove">
                   {showOrgLabel && `${organization} -`} {name}

diff --git a/packages/earth-map/src/components/widget/download/component.tsx b/packages/earth-map/src/components/widget/download/component.tsx
@@ -17,34 +17,72 @@
   specific language governing permissions and limitations under the License.
 */
 
-import React from 'react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
 import { Tooltip } from 'vizzuality-components';
 
+import { downloadCSVFile, downloadJSONFile, useDomWatcher } from '@marapp/earth-shared';
+
+import './styles.scss';
+
 interface IMetric {
   data: { metric: {}; slug: string };
 }
 
 const WidgetDownload = (props: IMetric) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+
   const {
     data: { metric, slug },
   } = props;
 
-  const stringifiedMetric = JSON.stringify(metric);
-  const jsonBlob = new Blob([stringifiedMetric]);
-  const blobUrl = URL.createObjectURL(jsonBlob);
+  const closeOnClickOutside = useDomWatcher(setShowDropdown, !showDropdown);
+
+  const blobUrl = downloadJSONFile(metric);
+  const csvBlobUrl = downloadCSVFile(metric);
 
   return (
-    <div>
+    <div className="ng-position-relative marapp-qa-downloaddropdown" ref={closeOnClickOutside}>
       <Tooltip
         placement="top"
-        overlay={<span>Download</span>}
+        overlay={<span>Download metric</span>}
         overlayClassName="c-rc-tooltip -default"
         mouseLeaveDelay={0}
       >
-        <a href={blobUrl} download={`${slug}.json`} className="ng-border-remove">
-          <i className="ng-icon-download-circle" />
-        </a>
+        <i
+          className={classNames('ng-c-cursor-pointer ng-dropdown-button marapp-qa-actiondownload', {
+            'ng-icon-angle-down ng-dropdown-button-open': showDropdown,
+            'ng-icon-angle-up': !showDropdown,
+          })}
+          onClick={(e) => setShowDropdown(!showDropdown)}
+        />
       </Tooltip>
+
+      <div className={classNames('ng-ep-download-dropdown', { 'ng-display-block': showDropdown })}>
+        <p className="ng-text-display-s ng-padding-medium-horizontal ng-padding-vertical ng-margin-remove">
+          Download metric as a:
+        </p>
+        <ul className="marapp-qa-dropdown">
+          <li>
+            <a
+              href={csvBlobUrl}
+              download={`${slug}.csv`}
+              className="ng-border-remove ng-display-block marapp-qa-actioncsv"
+            >
+              CSV
+            </a>
+          </li>
+          <li>
+            <a
+              href={blobUrl}
+              download={`${slug}.json`}
+              className="ng-border-remove ng-display-block marapp-qa-actionjson"
+            >
+              JSON
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 };

diff --git a/packages/earth-map/src/components/widget/download/styles.scss b/packages/earth-map/src/components/widget/download/styles.scss
@@ -0,0 +1,67 @@
+/*
+  Copyright 2018-2020 National Geographic Society
+
+  Use of this software does not constitute endorsement by National Geographic
+  Society (NGS). The NGS name and NGS logo may not be used for any purpose without
+  written permission from NGS.
+
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software distributed
+  under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+  CONDITIONS OF ANY KIND, either express or implied. See the License for the
+  specific language governing permissions and limitations under the License.
+*/
+
+@import '~styles/config';
+
+.ng-ep-download-dropdown {
+  background: $marapp-gray-7;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  transform: translateY(5px);
+  z-index: 100;
+  width: 320px;
+  ul {
+    padding: 0!important;
+  }
+  li {
+    position: relative;
+    border-bottom: 0;
+    color: $marapp-gray-0;
+    display: block;
+    font-family: $marapp-secondary-font;
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 2.6px;
+    padding: 10px 20px;
+    &:hover {
+      background: $marapp-gray-6;
+    }
+  }
+}
+
+.ng-dropdown-button {
+  align-items: center;
+  font-size: 12px;
+  justify-content: center;
+  display: flex;
+  height: 40px;
+  width: 40px;
+}
+
+.ng-dropdown-button-open {
+  background: $marapp-gray-1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
+  border-radius: 20px;
+  color: $marapp-gray-8;
+}
+
diff --git a/packages/earth-map/src/components/widget/toolbar/component.tsx b/packages/earth-map/src/components/widget/toolbar/component.tsx
@@ -53,7 +53,8 @@ class WidgetToolbarComponent extends PureComponent<any, any> {
 
     return (
       <div
-        className={`marapp-qa-widgettoolbar c-widget-toolbar ng-flex ng-margin-horizontal ${classNames}`}
+        className={`marapp-qa-widgettoolbar c-widget-toolbar ng-flex
+         ng-flex-middle ng-margin-left ${classNames}`}
       >
         <div className="ng-margin-right">
           <Tooltip

diff --git a/packages/earth-map/src/components/widgets/styles.scss b/packages/earth-map/src/components/widgets/styles.scss
@@ -22,3 +22,7 @@
 .ng-widget-header {
   background: $marapp-gray-100;
 }
+
+.widgets--list-item {
+  background: $marapp-gray-8;
+}
diff --git a/packages/earth-shared/src/utils.js b/packages/earth-shared/src/utils.js
@@ -17,6 +17,8 @@
   specific language governing permissions and limitations under the License.
 */
 import queryStringEncode from 'query-string-encode';
+import flatten from 'flat';
+import { Parser } from 'json2csv';
 
 /**
  * Serialize filters in the format
@@ -40,3 +42,25 @@ export const serializeFilters = (filters, filterSep = ',', valueSep = ';') => {
  */
 export const encodeQueryToURL = (baseUrl, query) =>
   [baseUrl, decodeURIComponent(queryStringEncode(query))].join('?');
+
+/**
+ * Download json file
+ * @param data
+ * @returns {string}
+ */
+export const downloadJSONFile = (data) => {
+  const encoded = JSON.stringify(data);
+  const jsonBlob = new Blob([encoded]);
+  return URL.createObjectURL(jsonBlob);
+};
+
+/**
+ * Downalod csv file
+ * @param data
+ */
+export const downloadCSVFile = (data) => {
+  const json2csvParser = new Parser();
+  const csv = json2csvParser.parse(flatten(data));
+  const csvBlob = new Blob([csv]);
+  return URL.createObjectURL(csvBlob);
+};
diff --git a/yarn.lock b/yarn.lock
@@ -6936,6 +6936,11 @@ commander@^4.0.1, commander@^4.1.1, commander@~4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
+  integrity sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==
+
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -10210,7 +10215,7 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
-flat@^5.0.0:
+flat@^5.0.0, flat@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
@@ -13961,6 +13966,15 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2csv@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/json2csv/-/json2csv-5.0.3.tgz#7a819a4c88a4e9f769745200dedc97eab93a4bbe"
+  integrity sha512-e3gEZU/4fp8CVQMHlwT77RayAR7nylCzCYN7jTIbPTEqk0oTaE8GTcBudLgXrHt4ltOs9SAsbveMJT0YK/QUSg==
+  dependencies:
+    commander "^6.1.0"
+    jsonparse "^1.3.1"
+    lodash.get "^4.4.2"
+
 json2mq@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
@@ -14018,7 +14032,7 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
-jsonparse@^1.2.0:
+jsonparse@^1.2.0, jsonparse@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=