feat: use the new visualizations type instead of report tables and ch…

…arts (#540)

The api now supports a visualizations endpoint, which includes both report tables and charts, and the data visualizer now also supports a table as a type of visualization. Now this concept of merging the two types is coming to Dashboards.

show "Visualizations" instead of Report Table and Chart in the dashboard item selector
show an icon specific to the type of chart/table for visualization

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-02-09T01:43:57.112Z\n"
-"PO-Revision-Date: 2020-02-09T01:43:57.112Z\n"
+"POT-Creation-Date: 2020-02-12T20:02:08.021Z\n"
+"PO-Revision-Date: 2020-02-12T20:02:08.021Z\n"
 
 msgid "Dashboard"
 msgstr ""
@@ -127,12 +127,15 @@ msgstr ""
 msgid "Share"
 msgstr ""
 
-msgid "Pivot tables"
+msgid "Visualizations"
 msgstr ""
 
 msgid "Visualizer"
 msgstr ""
 
+msgid "Pivot tables"
+msgstr ""
+
 msgid "Charts"
 msgstr ""
 

package.json

@@ -68,7 +68,7 @@
             "name": "DHIS2"
         },
         "dhis2": {
-            "apiVersion": "31"
+            "apiVersion": "34"
         },
         "activities": {
             "dhis": {

src/components/Item/Item.js

@@ -10,6 +10,7 @@ import AppItem from './AppItem/Item';
 import SpacerItem from './SpacerItem/Item';
 import {
     APP,
+    VISUALIZATION,
     REPORT_TABLE,
     CHART,
     MAP,
@@ -26,6 +27,7 @@ import { DEFAULT_STATE_ITEM_FILTERS } from '../../reducers/itemFilters';
 
 const getGridItem = type => {
     switch (type) {
+        case VISUALIZATION:
         case REPORT_TABLE:
         case CHART:
         case MAP:

src/components/Item/VisualizationItem/Item.js

@@ -20,6 +20,7 @@ import {
     acSetActiveVisualizationType,
 } from '../../../actions/visualizations';
 import {
+    VISUALIZATION,
     MAP,
     CHART,
     REPORT_TABLE,
@@ -145,6 +146,7 @@ export class Item extends Component {
         };
 
         switch (activeType) {
+            case VISUALIZATION:
             case CHART:
             case REPORT_TABLE: {
                 return (

src/components/Item/VisualizationItem/plugin.js

@@ -42,27 +42,17 @@ export const extractFavorite = item => {
         return null;
     }
 
-    switch (item.type) {
-        case REPORT_TABLE:
-            return item.reportTable;
-        case CHART:
-            return item.chart;
-        case MAP:
-            return item.map;
-        case EVENT_REPORT:
-            return item.eventReport;
-        case EVENT_CHART:
-            return item.eventChart;
-        default:
-            return (
-                item.reportTable ||
-                item.chart ||
-                item.map ||
-                item.eventReport ||
-                item.eventChart ||
-                {}
-            );
-    }
+    const propName = itemTypeMap[item.type].propName;
+
+    return (
+        item[propName] ||
+        (item.reportTable ||
+            item.chart ||
+            item.map ||
+            item.eventReport ||
+            item.eventChart ||
+            {})
+    );
 };
 
 export const extractMapView = map =>

src/components/ItemSelector/CategorizedMenuGroup.js

@@ -9,7 +9,7 @@ import ContentMenuItem from './ContentMenuItem';
 
 import { tAddListItemContent } from './actions';
 import { acAddDashboardItem } from '../../actions/editDashboard';
-import { getItemUrl, APP } from '../../modules/itemTypes';
+import { getItemUrl, APP, VISUALIZATION } from '../../modules/itemTypes';
 import { categorizedItems, listItemTypes } from './selectableItems';
 
 import classes from './styles/CategorizedMenuGroup.module.css';
@@ -59,6 +59,7 @@ class CategorizedMenuGroup extends Component {
                         <ContentMenuItem
                             key={item.id || item.key}
                             type={type}
+                            visType={type === VISUALIZATION ? item.type : type}
                             name={item.displayName || item.name}
                             onInsert={this.addItem(item)}
                             url={itemUrl}

src/components/ItemSelector/ContentMenuItem.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { MenuItem, colors } from '@dhis2/ui-core';
 import i18n from '@dhis2/d2-i18n';
 import PropTypes from 'prop-types';
+import { visTypeIcons } from '@dhis2/analytics';
 
-import { getItemIcon } from '../../modules/itemTypes';
+import { getItemIcon, VISUALIZATION } from '../../modules/itemTypes';
 import LaunchIcon from '../../icons/Launch';
 
 import classes from './styles/ContentMenuItem.module.css';
@@ -28,19 +29,26 @@ const InsertButton = () => (
     <button className={classes.buttonInsert}>{i18n.t('Insert')}</button>
 );
 
-const ContentMenuItem = ({ type, name, onInsert, url }) => {
+const ContentMenuItem = ({ type, name, onInsert, url, visType }) => {
     const ItemIcon = getItemIcon(type);
 
+    const renderedItemIcon =
+        type === VISUALIZATION ? (
+            visTypeIcons[visType]
+        ) : (
+            <ItemIcon style={{ fill: colors.grey600 }} />
+        );
+
     return (
         <MenuItem
             dense
             onClick={onInsert}
             label={
                 <div className={classes.menuItem}>
                     <div className={classes.label}>
-                        <ItemIcon
-                            style={{ margin: '6px', fill: colors.grey600 }}
-                        />
+                        <span style={{ margin: '6px' }}>
+                            {renderedItemIcon}
+                        </span>
                         <span>{name}</span>
                         {url ? <LaunchLink url={url} /> : null}
                     </div>
@@ -55,6 +63,7 @@ ContentMenuItem.propTypes = {
     name: PropTypes.string,
     type: PropTypes.string,
     url: PropTypes.string,
+    visType: PropTypes.string,
     onInsert: PropTypes.func,
 };
 

src/components/ItemSelector/ItemSelector.js

@@ -7,7 +7,7 @@ import { InputField, Menu } from '@dhis2/ui-core';
 import CategorizedMenuGroup from './CategorizedMenuGroup';
 import SinglesMenuGroup from './SinglesMenuGroup';
 import { singleItems, categorizedItems } from './selectableItems';
-import { itemTypeMap } from '../../modules/itemTypes';
+import { itemTypeMap, getDefaultItemCount } from '../../modules/itemTypes';
 
 import './styles/ItemSelector.css';
 
@@ -62,11 +62,12 @@ class ItemSelector extends React.Component {
             })
             .map(type => {
                 const itemType = itemTypeMap[type];
+                const itemCount = getDefaultItemCount(type);
                 const allItems = this.state.items[itemType.endPointName];
-                const hasMore = allItems.length > 5;
+                const hasMore = allItems.length > itemCount;
                 const items = this.state.maxOptions.has(itemType.id)
                     ? allItems
-                    : allItems.slice(0, 5);
+                    : allItems.slice(0, itemCount);
 
                 return (
                     <CategorizedMenuGroup
@@ -105,7 +106,7 @@ class ItemSelector extends React.Component {
             });
         }
 
-        let queryString = '?count=6';
+        let queryString = '?count=11';
         if ([...this.state.maxOptions.values()].length) {
             queryString +=
                 '&max=' + [...this.state.maxOptions.values()].join('&max=');

src/components/ItemSelector/__tests__/__snapshots__/ContentMenuItem.spec.js.snap

@@ -30,14 +30,21 @@ ShallowWrapper {
         <div
           className="label"
         >
-          <pure(NotInterestedIcon)
+          <span
             style={
               Object {
-                "fill": "#6e7a8a",
                 "margin": "6px",
               }
             }
-          />
+          >
+            <pure(NotInterestedIcon)
+              style={
+                Object {
+                  "fill": "#6e7a8a",
+                }
+              }
+            />
+          </span>
           <span>
             Pinkie Pie
           </span>
@@ -64,14 +71,21 @@ ShallowWrapper {
           <div
             className="label"
           >
-            <pure(NotInterestedIcon)
+            <span
               style={
                 Object {
-                  "fill": "#6e7a8a",
                   "margin": "6px",
                 }
               }
-            />
+            >
+              <pure(NotInterestedIcon)
+                style={
+                  Object {
+                    "fill": "#6e7a8a",
+                  }
+                }
+              />
+            </span>
             <span>
               Pinkie Pie
             </span>
@@ -143,14 +157,21 @@ ShallowWrapper {
         <div
           className="label"
         >
-          <pure(NotInterestedIcon)
+          <span
             style={
               Object {
-                "fill": "#6e7a8a",
                 "margin": "6px",
               }
             }
-          />
+          >
+            <pure(NotInterestedIcon)
+              style={
+                Object {
+                  "fill": "#6e7a8a",
+                }
+              }
+            />
+          </span>
           <span>
             Pinkie Pie
           </span>
@@ -180,14 +201,21 @@ ShallowWrapper {
           <div
             className="label"
           >
-            <pure(NotInterestedIcon)
+            <span
               style={
                 Object {
-                  "fill": "#6e7a8a",
                   "margin": "6px",
                 }
               }
-            />
+            >
+              <pure(NotInterestedIcon)
+                style={
+                  Object {
+                    "fill": "#6e7a8a",
+                  }
+                }
+              />
+            </span>
             <span>
               Pinkie Pie
             </span>

src/components/ItemSelector/selectableItems.js

@@ -1,8 +1,7 @@
 import i18n from '@dhis2/d2-i18n';
 import {
     spacerContent,
-    REPORT_TABLE,
-    CHART,
+    VISUALIZATION,
     MAP,
     EVENT_CHART,
     EVENT_REPORT,
@@ -41,8 +40,7 @@ export const singleItems = [
 
 // categorizedItems are grouped in the item selector menu
 export const categorizedItems = [
-    REPORT_TABLE,
-    CHART,
+    VISUALIZATION,
     MAP,
     EVENT_REPORT,
     EVENT_CHART,

src/modules/itemTypes.js

@@ -39,15 +39,24 @@ export const isTextType = item =>
     item.type === TEXT && item.text !== spacerContent;
 export const isVisualizationType = item =>
     !!itemTypeMap[item.type].isVisualizationType;
-
 export const hasMapView = itemType =>
     itemTypeMap[itemType].domainType === DOMAIN_TYPE_AGGREGATE;
-
 export const isTrackerDomainType = itemType =>
     itemTypeMap[itemType].domainType === DOMAIN_TYPE_TRACKER;
+export const getDefaultItemCount = itemType =>
+    itemTypeMap[itemType].defaultItemCount || 5;
 
 // Item type map
 export const itemTypeMap = {
+    [VISUALIZATION]: {
+        id: VISUALIZATION,
+        endPointName: 'visualizations',
+        propName: 'visualization',
+        pluralTitle: i18n.t('Visualizations'),
+        appUrl: id => `dhis-web-data-visualizer/#/${id}`,
+        appName: i18n.t('Visualizer'),
+        defaultItemCount: 10,
+    },
     [REPORT_TABLE]: {
         id: REPORT_TABLE,
         endPointName: 'reportTables',