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

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',