fix: removes the 'view as' menu from gauge and pie (#615)

Puts Gauge and Pie on the list of visualization types that shouldn't display the 'View as' menu options, together with SV and YoY
Also updates the interpretations icon with a tiny css change to fix its' misalignment. This will be removed once the icon is replaced.

src/components/Item/VisualizationItem/ItemHeaderButtons.js

@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { isSingleValue, isYearOverYear } from '@dhis2/analytics';
+import {
+    isSingleValue,
+    isYearOverYear,
+    VIS_TYPE_GAUGE,
+    VIS_TYPE_PIE,
+} from '@dhis2/analytics';
 import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui-core';
 import i18n from '@dhis2/d2-i18n';
 import Popover from '@material-ui/core/Popover';
@@ -61,7 +66,11 @@ const ItemHeaderButtons = props => {
     const handleClose = () => setAnchorEl(null);
 
     const type = visualization.type || item.type;
-    const canViewAs = !isSingleValue(type) && !isYearOverYear(type);
+    const canViewAs =
+        !isSingleValue(type) &&
+        !isYearOverYear(type) &&
+        type !== VIS_TYPE_GAUGE &&
+        type !== VIS_TYPE_PIE;
 
     const interpretationMenuLabel = props.activeFooter
         ? i18n.t(`Hide interpretations and details`)

src/components/Item/VisualizationItem/assets/icons.js

@@ -20,6 +20,7 @@ export const SpeechBubble = () => (
         viewBox="0 0 20 20"
         width="20"
         xmlns="http://www.w3.org/2000/svg"
+        style={{ margin: '3px 2px 0 2px' }} // Temporary fix for the misaligned icon, should be removed once the icon is replaced
     >
         <path
             d="m20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 18 4-4h14c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm-2 12h-12v-2h12zm0-3h-12v-2h12zm0-3h-12v-2h12z"