feat(Visualisations): Adds new template "What are the most popular le…

…arning experience activity types?". (#1500 - [LL-268](https://learningpool.atlassian.net/browse/LL-268)) #1500 https://learningpool.atlassian.net/browse/LL-268
LearningLocker · Jan 22, 2020 · 7d44f8a · 7d44f8a
1 parent d2c49ec
commit 7d44f8a
Show file tree

Hide file tree

Showing 19 changed files with 249 additions and 1 deletion.
diff --git a/cli/src/commands/migrateVizTypesOfTemplates.js b/cli/src/commands/migrateVizTypesOfTemplates.js
@@ -12,6 +12,7 @@ import {
   TEMPLATE_MOST_POPULAR_ACTIVITIES,
   TEMPLATE_MOST_POPULAR_VERBS,
   TEMPLATE_WEEKDAYS_ACTIVITY,
+  TEMPLATE_LEARNING_EXPERIENCE_TYPE,
 } from 'lib/constants/visualise';
 
 // Define visualisation model
@@ -58,6 +59,9 @@ export const removeTemplateIdAndTemplateStage = async () => {
             case '6':
               visualisation.type = TEMPLATE_WEEKDAYS_ACTIVITY;
               break;
+            case '7':
+              visualisation.type = TEMPLATE_LEARNING_EXPERIENCE_TYPE;
+              break;
             default:
               throw new Error(`templateId ${visualisation.templateId} is invalid`);
           }
@@ -112,6 +116,11 @@ export const addTemplateIdAndTemplateStage = async () => {
             visualisation.templateId = '6';
             visualisation.templateStage = 'completed';
             break;
+          case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
+            visualisation.type = LEADERBOARD;
+            visualisation.templateId = '7';
+            visualisation.templateStage = 'completed';
+            break;
           default:
             visualisation.templateId = undefined;
             visualisation.templateStage = undefined;

diff --git a/lib/constants/visualise.js b/lib/constants/visualise.js
@@ -22,3 +22,4 @@ export const TEMPLATE_CURATR_LEARNER_INTERACTIONS_BY_DATE_AND_VERB = 'TEMPLATE_C
 export const TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD = 'TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD';
 export const TEMPLATE_CURATR_PROPORTION_OF_SOCIAL_INTERACTIONS = 'TEMPLATE_CURATR_PROPORTION_OF_SOCIAL_INTERACTIONS';
 export const TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS = 'TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS';
+export const TEMPLATE_LEARNING_EXPERIENCE_TYPE = 'TEMPLATE_LEARNING_EXPERIENCE_TYPE';
diff --git a/ui/src/components/VisualiseIcon/index.js b/ui/src/components/VisualiseIcon/index.js
@@ -22,6 +22,7 @@ import {
   TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD,
   TEMPLATE_CURATR_PROPORTION_OF_SOCIAL_INTERACTIONS,
   TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS,
+  TEMPLATE_LEARNING_EXPERIENCE_TYPE,
 } from 'lib/constants/visualise';
 import {
   LEADERBOARD_GREY_IMAGE,
@@ -86,6 +87,8 @@ const getImageSrc = (type, sourceView) => {
     case TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD:
     case TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS:
       return LEADERBOARD_GREY_IMAGE;
+    case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
+      return LEADERBOARD_GREY_IMAGE;
     case XVSY:
       return XVSY_IMAGE;
     case TEMPLATE_CURATR_INTERACTIONS_VS_ENGAGEMENT:

diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/Card.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/Card.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Map } from 'immutable';
+import TemplateCard from '../components/TemplateCard';
+import buildModel from './buildModel';
+import { title, image } from './constants';
+
+/**
+ * @param {immutable.Map} props.model
+ * @param {() => void} props.saveModel
+ */
+const Card = ({
+  model,
+  saveModel,
+}) => (
+  <TemplateCard
+    title={title}
+    srcImage={image}
+    onClick={() => saveModel({ attrs: buildModel(model) })} />
+  );
+
+Card.propTypes = {
+  model: PropTypes.instanceOf(Map).isRequired,
+  saveModel: PropTypes.func.isRequired,
+};
+
+export default React.memo(Card);
diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/Editor.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/Editor.js
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Map } from 'immutable';
+import DescriptionForm from '../components/DescriptionForm';
+import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
+import Viewer from './Viewer';
+
+/**
+ * @param {immutable.Map} props.model - visualisation model
+ * @param {string} props.orgTimezone
+ * @param {(args: object) => void} props.updateModel
+ * @param {(args: object) => void} props.setInMetadata
+ */
+const Editor = ({
+  model,
+  updateModel,
+}) => {
+  const id = model.get('_id');
+
+  console.log(model.get('sourceView'));
+
+  const onChangeDescription = useCallback((description) => {
+    updateModel({
+      schema: 'visualisation',
+      id,
+      path: 'description',
+      value: description,
+    });
+  }, [id]);
+
+  const onChangePreviewPeriod = useCallback((previewPeriod) => {
+    updateModel({
+      schema: 'visualisation',
+      id,
+      path: 'previewPeriod',
+      value: previewPeriod,
+    });
+  }, [id]);
+
+  return (
+    <div className="row">
+      <div className="col-md-6 left-border">
+        <div>
+          <DescriptionForm
+            visualisationId={id}
+            description={model.get('description', '')}
+            onChange={onChangeDescription} />
+        </div>
+      </div>
+
+      <div className="col-md-6">
+        <div className="form-group form-inline" style={{ textAlign: 'right' }}>
+          <PreviewPeriodPicker
+            visualisationId={id}
+            previewPeriod={model.get('previewPeriod')}
+            onChange={onChangePreviewPeriod} />
+        </div>
+
+        <div style={{ height: '400px', paddingTop: 5 }}>
+          <Viewer
+            visualisationId={id}
+            showSourceView={model.get('sourceView')} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Editor.propTypes = {
+  model: PropTypes.instanceOf(Map).isRequired,
+  updateModel: PropTypes.func.isRequired,
+};
+
+export default Editor;
diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/Viewer.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/Viewer.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SourceResults from 'ui/containers/VisualiseResults/SourceResults';
+import BarChartResults from 'ui/containers/VisualiseResults/BarChartResults';
+
+/**
+ * @param {string} props.visualisationId
+ * @param {boolean} props.showSourceView
+ */
+const Viewer = ({
+  visualisationId,
+  showSourceView,
+}) => {
+  if (showSourceView) {
+    return <SourceResults id={visualisationId} />;
+  }
+  return <BarChartResults id={visualisationId} />;
+};
+
+Viewer.propTypes = {
+  visualisationId: PropTypes.string.isRequired,
+  showSourceView: PropTypes.bool.isRequired,
+};
+
+export default React.memo(Viewer);
diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/buildModel.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/buildModel.js
@@ -0,0 +1,21 @@
+import { Map } from 'immutable';
+import { TEMPLATE_LEARNING_EXPERIENCE_TYPE } from 'lib/constants/visualise';
+import { LAST_7_DAYS } from 'ui/utils/constants';
+import { description } from './constants';
+
+/**
+ * @param {immutable.Map} model
+ * @returns {immutable.Map}
+ */
+const buildModel = model =>
+  model
+    .set('type', TEMPLATE_LEARNING_EXPERIENCE_TYPE)
+    .set('description', description)
+    .set('axesgroup', new Map({ optionKey: 'statement.context.contextActivities.grouping', searchString: 'statement.context.contextActivities.grouping' }))
+    .set('axesoperator', 'uniqueCount')
+    .set('axesvalue', new Map({ optionKey: 'statements', searchString: 'Statements' }))
+    .set('axesxLabel', 'Statements')
+    .set('axesyLabel', 'Learning Experience Types')
+    .set('previewPeriod', LAST_7_DAYS);
+
+export default buildModel;
diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/constants.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/constants.js
@@ -0,0 +1,5 @@
+import { LEADERBOARD_GREY_IMAGE } from 'ui/components/VisualiseIcon/assets';
+
+export const title = 'What are the most popular learning experience activity types?';
+export const description = 'What are the most popular learning experience activity types?';
+export const image = LEADERBOARD_GREY_IMAGE;
diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/index.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/index.js
@@ -0,0 +1,25 @@
+import { compose } from 'recompose';
+import PropTypes from 'prop-types';
+import { Map } from 'immutable';
+import { connect } from 'react-redux';
+import { updateModel } from 'ui/redux/modules/models';
+import { setInMetadata } from 'ui/redux/modules/metadata';
+import Editor from './Editor';
+
+/**
+ * @param {immutable.Map} props.model - visualisation model
+ * @param {string} props.orgTimezone
+ */
+const TemplateLearningExperienceType = compose(
+  connect(
+    () => ({}),
+    { updateModel, setInMetadata },
+  ),
+)(Editor);
+
+TemplateLearningExperienceType.propTypes = {
+  model: PropTypes.instanceOf(Map).isRequired,
+  orgTimezone: PropTypes.string.isRequired,
+};
+
+export default TemplateLearningExperienceType;
diff --git a/ui/src/containers/Visualisations/VisualisationViewer.js b/ui/src/containers/Visualisations/VisualisationViewer.js
@@ -21,6 +21,7 @@ import {
   TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD,
   TEMPLATE_CURATR_PROPORTION_OF_SOCIAL_INTERACTIONS,
   TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS,
+  TEMPLATE_LEARNING_EXPERIENCE_TYPE,
 } from 'lib/constants/visualise';
 import { withModel } from 'ui/utils/hocs';
 import CustomBarChartViewer from './CustomBarChart/Viewer';
@@ -41,6 +42,7 @@ import TemplateCuratrLearnerInteractionsByDateAndVerb from './TemplateCuratrLear
 import TemplateCuratrUserEngagementLeaderboard from './TemplateCuratrUserEngagementLeaderboard/Viewer';
 import TemplateCuratrProportionOfSocialInteractions from './TemplateCuratrProportionOfSocialInteractions/Viewer';
 import TemplateCuratrActivitiesWithMostComments from './TemplateCuratrActivitiesWithMostComments/Viewer';
+import TemplateLearningExperienceType from './TemplateLearningExperienceType/Viewer';
 
 /**
  * @param {immutable.Map} model - visualisation model
@@ -93,6 +95,8 @@ const VisualisationViewer = ({
       return <TemplateCuratrProportionOfSocialInteractions visualisationId={visualisationId} showSourceView={showSourceView} />;
     case TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS:
       return <TemplateCuratrActivitiesWithMostComments visualisationId={visualisationId} showSourceView={showSourceView} />;
+    case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
+      return <TemplateLearningExperienceType visualisationId={visualisationId} showSourceView={showSourceView} />;
     default:
       console.error(`VisualisationViewer.js does not support type "${type}"`);
       return `Type "${type}" is not supported`;

diff --git a/ui/src/containers/VisualiseForm/NewVisualisation/TemplateCardList.js b/ui/src/containers/VisualiseForm/NewVisualisation/TemplateCardList.js
@@ -12,13 +12,18 @@ import TemplateCuratrLearnerInteractionsByDateAndVerbCard from 'ui/containers/Vi
 import TemplateCuratrUserEngagementLeaderboardCard from 'ui/containers/Visualisations/TemplateCuratrUserEngagementLeaderboard/Card';
 import TemplateCuratrProportionOfSocialInteractionsCard from 'ui/containers/Visualisations/TemplateCuratrProportionOfSocialInteractions/Card';
 import TemplateCuratrActivitiesWithMostCommentsCard from 'ui/containers/Visualisations/TemplateCuratrActivitiesWithMostComments/Card';
+import TemplateLearningExperienceType from 'ui/containers/Visualisations/TemplateLearningExperienceType/Card';
 import styles from './styles.css';
 
 const TemplateCardList = ({ model, saveModel }) => (
   <div
     id="new-visualisation-templates"
     className={styles.cardList}>
 
+    <TemplateLearningExperienceType
+      model={model}
+      saveModel={saveModel} />
+
     <TemplateLast7DaysStatementsCard
       model={model}
       saveModel={saveModel} />

diff --git a/ui/src/containers/VisualiseForm/index.js b/ui/src/containers/VisualiseForm/index.js
@@ -18,6 +18,7 @@ import {
   TEMPLATE_CURATR_USER_ENGAGEMENT_LEADERBOARD,
   TEMPLATE_CURATR_PROPORTION_OF_SOCIAL_INTERACTIONS,
   TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS,
+  TEMPLATE_LEARNING_EXPERIENCE_TYPE,
 } from 'lib/constants/visualise';
 import CustomBarChart from 'ui/containers/Visualisations/CustomBarChart';
 import CustomColumnChart from 'ui/containers/Visualisations/CustomColumnChart';
@@ -37,6 +38,7 @@ import TemplateCuratrLearnerInteractionsByDateAndVerb from 'ui/containers/Visual
 import TemplateCuratrUserEngagementLeaderboard from 'ui/containers/Visualisations/TemplateCuratrUserEngagementLeaderboard';
 import TemplateCuratrProportionOfSocialInteractions from 'ui/containers/Visualisations/TemplateCuratrProportionOfSocialInteractions';
 import TemplateCuratrActivitiesWithMostComments from 'ui/containers/Visualisations/TemplateCuratrActivitiesWithMostComments';
+import TemplateLearningExperienceType from 'ui/containers/Visualisations/TemplateLearningExperienceType';
 import NewVisualisation from './NewVisualisation';
 
 const VisualiseForm = ({ model, orgTimezone }) => {
@@ -78,6 +80,8 @@ const VisualiseForm = ({ model, orgTimezone }) => {
         return <TemplateCuratrProportionOfSocialInteractions model={model} orgTimezone={orgTimezone} />;
       case TEMPLATE_CURATR_ACTIVITIES_WITH_MOST_COMMENTS:
         return <TemplateCuratrActivitiesWithMostComments model={model} orgTimezone={orgTimezone} />;
+      case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
+        return <TemplateLearningExperienceType model={model} orgTimezone={orgTimezone} />;
       default:
         console.error(`VisualiseForm/index.js does not support type ${model.get('type')}`);
         return `type "${model.get('type')}" is not supported.`;

diff --git a/ui/src/containers/VisualiseResults/SourceResults.js b/ui/src/containers/VisualiseResults/SourceResults.js
@@ -11,6 +11,7 @@ import {
   TEMPLATE_MOST_POPULAR_ACTIVITIES,
   TEMPLATE_MOST_POPULAR_VERBS,
   TEMPLATE_CURATR_INTERACTIONS_VS_ENGAGEMENT,
+  TEMPLATE_LEARNING_EXPERIENCE_TYPE
 } from 'lib/constants/visualise';
 import NoData from 'ui/components/Graphs/NoData';
 import ScrollableTable from 'ui/components/ScrollableTable';
@@ -87,6 +88,7 @@ const getGroupAxisLabel = (visualisation) => {
     case TEMPLATE_MOST_ACTIVE_PEOPLE:
     case TEMPLATE_MOST_POPULAR_ACTIVITIES:
     case TEMPLATE_MOST_POPULAR_VERBS:
+    case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
       return visualisation.get('axesyLabel') || visualisation.getIn(['axesgroup', 'searchString']) || 'Y Axis';
     // Line Chart type
     case FREQUENCY:
@@ -111,7 +113,8 @@ const getValueAxisLabel = (index, visualisation) => {
     case TEMPLATE_MOST_ACTIVE_PEOPLE:
     case TEMPLATE_MOST_POPULAR_ACTIVITIES:
     case TEMPLATE_MOST_POPULAR_VERBS:
-      return visualisation.get('axesxLabel') || visualisation.getIn(['axesvalue', 'searchString']) || 'X Axis';
+    case TEMPLATE_LEARNING_EXPERIENCE_TYPE:
+      return visualisation.get('axesxLabel') || visualisation.getIn(['axesxValue', 'searchString']) || 'X Axis';
     default:
       return visualisation.get('axesyLabel') || visualisation.getIn(['axesvalue', 'searchString']) || 'Y Axis';
   }

diff --git a/ui/src/redux/modules/dashboard/curatrStarter.js b/ui/src/redux/modules/dashboard/curatrStarter.js
@@ -8,6 +8,7 @@ import buildTemplateCuratrCommentCount from 'ui/containers/Visualisations/Templa
 import buildTemplateCuratrLearnerInteractionsByDateAndVerb from 'ui/containers/Visualisations/TemplateCuratrLearnerInteractionsByDateAndVerb/buildModel';
 import buildTemplateCuratrUserEngagementLeaderboard from 'ui/containers/Visualisations/TemplateCuratrUserEngagementLeaderboard/buildModel';
 import buildTemplateLast7DaysStatements from 'ui/containers/Visualisations/TemplateLast7DaysStatements/buildModel';
+import buildTemplateLearningExperienceType from 'ui/containers/Visualisations/TemplateLearningExperienceType/buildModel';
 import { addModel } from '../models';
 
 export const CREATE_CURATR_STARTER = 'learninglocker/dashboard/CREATE_CURATR_STARTER';
@@ -53,6 +54,11 @@ const createVisualisations = async ({ dispatch, userId }) => {
       schema: 'visualisation',
       props: buildTemplateLast7DaysStatements(new Map({ owner: userId })),
       isExpanded: false,
+    })),
+    dispatch(addModel({
+      schema: 'visualisation',
+      props: buildTemplateLearningExperienceType(new Map({ owner: userId })),
+      isExpanded: false,
     }))
   ]);
 

diff --git a/ui/src/redux/modules/dashboard/gettingStarted.js b/ui/src/redux/modules/dashboard/gettingStarted.js
@@ -7,6 +7,7 @@ import buildTemplateMostActivePeople from 'ui/containers/Visualisations/Template
 import buildTemplateMostPopularActivities from 'ui/containers/Visualisations/TemplateMostPopularActivities/buildModel';
 import buildTemplateMostPopularVerbs from 'ui/containers/Visualisations/TemplateMostPopularVerbs/buildModel';
 import buildTemplateWeekdaysActivity from 'ui/containers/Visualisations/TemplateWeekdaysActivity/buildModel';
+import buildTemplateLearningExperienceType from 'ui/containers/Visualisations/TemplateLearningExperienceType/buildModel';
 import { addModel } from '../models';
 
 export const CREATE_GETTING_STARTED = 'learninglocker/dashboard/CREATE_GETTING_STARTED';
@@ -48,6 +49,11 @@ const createVisualisations = async ({ dispatch, userId }) => {
       props: buildTemplateWeekdaysActivity(new Map({ owner: userId })),
       isExpanded: false,
     })),
+    dispatch(addModel({
+      schema: 'visualisation',
+      props: buildTemplateLearningExperienceType(new Map({ owner: userId })),
+      isExpanded: false,
+    }))
   ]);
 
   return results.map(r => r.model.get('_id'));