AppQuality · cannarocks · Sep 1, 2023 · Sep 1, 2023 · Sep 1, 2023 · Sep 1, 2023
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "3.1.46",
+    "@appquality/unguess-design-system": "3.1.47-sentiment-beta",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/Sentiment.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useGetCampaignsByCidUxQuery } from 'src/features/api';
 import FlipCard from 'src/pages/Campaign/widgetCards/FlipCard';
-import { SentimentChart } from './SentimentChart';
+import { Chart } from './SentimentChart';
 import { SentimentList } from './SentimentList';
 
 export const Sentiment = ({
@@ -12,7 +12,7 @@ export const Sentiment = ({
   isPreview?: boolean;
 }) => {
   const { t } = useTranslation();
-  const secondRowHeight = '465px';
+  const secondRowHeight = '550px';
 
   const { data, isLoading, isFetching, isError } = useGetCampaignsByCidUxQuery({
     cid: campaignId.toString(),
@@ -27,7 +27,7 @@ export const Sentiment = ({
         {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_HEADER')}
       </FlipCard.Header>
       <FlipCard.Body
-        front={<SentimentChart campaignId={campaignId} isPreview={isPreview} />}
+        front={<Chart campaignId={campaignId} isPreview={isPreview} />}
         back={<SentimentList campaignId={campaignId} isPreview={isPreview} />}
       />
     </FlipCard>

diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentChart.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentChart.tsx
@@ -1,12 +1,141 @@
+import {
+  Col,
+  Grid,
+  MD,
+  Row,
+  SentimentChart,
+  Span,
+} from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import styled from 'styled-components';
+import { useSentiments } from './useSentiments';
 
-export const SentimentChart = ({
+const Label = styled.p`
+  color: ${({ theme }) => theme.palette.blue[600]};
+  font-size: ${({ theme }) => theme.fontSizes.md};
+  padding: ${({ theme }) => theme.space.sm};
+`;
+
+const VerticalLabel = styled(Label)`
+  transform: rotate(-90deg);
+`;
+
+const HorizontalLabel = styled(Label)`
+  text-align: center;
+`;
+
+const Tooltip = styled.div`
+  background-color: white;
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.borderRadii.md};
+  padding: ${({ theme }) => theme.space.sm};
+  box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
+  max-width: 270px;
+  white-space: normal;
+`;
+
+export const Chart = ({
   campaignId,
   isPreview,
 }: {
   campaignId: number;
   isPreview?: boolean;
 }) => {
   const { t } = useTranslation();
-  return <>Lorem ipsum</>;
+
+  const { sentiments, isLoading, isError } = useSentiments({
+    cid: campaignId.toString(),
+    ...(!isPreview && { showAsCustomer: true }),
+  });
+
+  if (!sentiments.length) return null;
+
+  return (
+    <Grid>
+      <Row>
+        <Col
+          xs="1"
+          style={{ display: 'flex', alignItems: 'center', margin: 0 }}
+        >
+          <VerticalLabel>
+            {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL')}
+          </VerticalLabel>
+        </Col>
+        <Col xs="11" style={{ margin: 0 }}>
+          <SentimentChart
+            data={{
+              id: 'sentiment',
+              data: [
+                ...sentiments.map((s) => ({
+                  x: s.title,
+                  y: s.sentiment,
+                  custom_data: s.note,
+                })),
+              ],
+            }}
+            width={`${sentiments.length * 150}px`}
+            height="400px"
+            margin={{ top: 50, right: 0, bottom: 50, left: 0 }}
+            i18n={{
+              sentimentsValues: {
+                veryNegative: t(
+                  '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_1'
+                ),
+                negative: t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_2'),
+                neutral: t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_3'),
+                positive: t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_4'),
+                veryPositive: t(
+                  '__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_ITEM_VAL_5'
+                ),
+              },
+            }}
+            tooltip={(node) => {
+              const { data, label: cluster } = node;
+
+              return (
+                <Tooltip>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    {data?.icon}
+                    <Span
+                      isBold
+                      style={{
+                        marginLeft: appTheme.space.xs,
+                        color: appTheme.palette.grey[600],
+                      }}
+                    >
+                      {cluster}
+                    </Span>
+                  </div>
+                  {data?.customData && (
+                    <MD style={{ marginTop: appTheme.space.xs }}>
+                      {data?.customData}
+                    </MD>
+                  )}
+                </Tooltip>
+              );
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs="1" style={{ margin: 0 }} />
+        <Col xs="11" style={{ margin: 0 }}>
+          <div
+            style={{
+              width: sentiments.length * 150,
+              maxWidth: '100%',
+              marginTop: appTheme.space.md,
+            }}
+          >
+            <HorizontalLabel>
+              {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL', {
+                count: sentiments.length,
+              })}
+            </HorizontalLabel>
+          </div>
+        </Col>
+      </Row>
+    </Grid>
+  );
 };
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/index.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/SentimentList/index.tsx
@@ -5,13 +5,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { List } from 'src/pages/Campaign/List';
 import { Item, Sentiment } from './Item';
 
-// Repeat some items to make the list longer for testing purposes
-const fakize = (sentiment: Sentiment[]) => [
-  ...sentiment,
-  ...Array(5).fill(sentiment[0]),
-  ...sentiment,
-];
-
 export const SentimentList = ({
   campaignId,
   isPreview,
@@ -27,7 +20,7 @@ export const SentimentList = ({
     ...(!isPreview && { showAsCustomer: true }),
   });
 
-  const sentiments = data?.sentiment ? fakize(data?.sentiment) : [];
+  const sentiments = data?.sentiment ?? [];
 
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [paginatedItems, setPaginatedItems] = useState<Sentiment[]>([]);
@@ -47,8 +40,8 @@ export const SentimentList = ({
     );
   }, [currentPage, sentiments]);
 
-  if (isLoading || isFetching || isError || !data) return <div>loading...</div>;
-  if (!sentiments.length) return <div>no data</div>;
+  if (isLoading || isFetching || isError || !data) return null;
+  if (!sentiments.length) return null;
 
   // Sort sentiment by value
   const ordered = [...paginatedItems].sort((a, b) => {
@@ -64,31 +57,27 @@ export const SentimentList = ({
           {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_DESCRIPTION')}
         </Col>
       </Row>
-      <Row>
-        <Col xs={12}>
-          <List>
-            <List.Columns style={{ marginBottom: 0 }}>
-              <List.Columns.Label isBold>
-                {' '}
-                {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL', {
-                  count: sentiments.length,
-                })}
-              </List.Columns.Label>
-              <List.Columns.Label isBold>
-                {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL')}
-              </List.Columns.Label>
-            </List.Columns>
-            {ordered.map((item) => (
-              <Item item={item} />
-            ))}
-            <List.Pagination
-              setPage={setCurrentPage}
-              page={currentPage}
-              totalPages={maxPages}
-            />
-          </List>
-        </Col>
-      </Row>
+      <List>
+        <List.Columns style={{ marginBottom: 0 }}>
+          <List.Columns.Label isBold>
+            {' '}
+            {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_USECASE_LABEL', {
+              count: sentiments.length,
+            })}
+          </List.Columns.Label>
+          <List.Columns.Label isBold>
+            {t('__CAMPAIGN_EXP_WIDGET_SENTIMENT_LIST_SENTIMENT_LABEL')}
+          </List.Columns.Label>
+        </List.Columns>
+        {ordered.map((item) => (
+          <Item item={item} />
+        ))}
+        <List.Pagination
+          setPage={setCurrentPage}
+          page={currentPage}
+          totalPages={maxPages}
+        />
+      </List>
     </Grid>
   );
 };
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/useSentiments.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/useSentiments.tsx
@@ -0,0 +1,42 @@
+import { useGetCampaignsByCidUxQuery } from 'src/features/api';
+
+export const useSentiments = ({
+  cid,
+  isPreview,
+}: {
+  cid: string;
+  isPreview?: boolean;
+}) => {
+  const { data, isLoading, isFetching, isError } = useGetCampaignsByCidUxQuery({
+    cid,
+    ...(!isPreview && { showAsCustomer: true }),
+  });
+
+  if (isLoading || isFetching) {
+    return {
+      sentiments: [],
+      isLoading: true,
+      isError: false,
+    };
+  }
+
+  if (!data || !data?.sentiment || isError) {
+    return {
+      sentiments: [],
+      isLoading: false,
+      isError: true,
+    };
+  }
+
+  const sentiments = data.sentiment?.map((s) => ({
+    title: s.cluster.name,
+    sentiment: s.value,
+    note: s.comment,
+  }));
+
+  return {
+    sentiments,
+    isLoading: false,
+    isError: false,
+  };
+};
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Overview/utils.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Overview/utils.tsx
@@ -10,7 +10,7 @@ export const getSentiment = (value: number, t: TFunction) => {
   switch (value) {
     case 1:
       return {
-        color: appTheme.palette.red[600],
+        color: appTheme.palette.red[500],
         text: (
           <>
             <Sentiment1 />{' '}
@@ -20,7 +20,7 @@ export const getSentiment = (value: number, t: TFunction) => {
       };
     case 2:
       return {
-        color: appTheme.palette.red[600],
+        color: appTheme.palette.red[500],
         text: (
           <>
             <Sentiment2 />{' '}
@@ -30,7 +30,7 @@ export const getSentiment = (value: number, t: TFunction) => {
       };
     case 3:
       return {
-        color: appTheme.palette.yellow[600],
+        color: appTheme.palette.yellow[500],
         text: (
           <>
             <Sentiment3 />{' '}
@@ -40,7 +40,7 @@ export const getSentiment = (value: number, t: TFunction) => {
       };
     case 4:
       return {
-        color: appTheme.palette.green[600],
+        color: appTheme.palette.green[500],
         text: (
           <>
             <Sentiment4 />{' '}
@@ -50,7 +50,7 @@ export const getSentiment = (value: number, t: TFunction) => {
       };
     case 5:
       return {
-        color: appTheme.palette.green[600],
+        color: appTheme.palette.green[500],
         text: (
           <>
             <Sentiment5 />{' '}
@@ -61,8 +61,8 @@ export const getSentiment = (value: number, t: TFunction) => {
 
     default:
       return {
-        color: appTheme.palette.red[600],
-        text: '--',
+        color: appTheme.palette.yellow[500],
+        text: '',
       };
   }
 };

diff --git a/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx b/src/pages/Campaign/useWidgets/Functional/widgets/UniqueBugs/WaffleTooltip.tsx
@@ -14,7 +14,7 @@ const WaffleTooltip = ({
   label,
   percentage,
 }: {
-  value: number;
+  value: string | number;
   label: string | number;
   percentage: number;
 }) => {