feat(Visualise): Adds context label to counter (LLC-16) (#1508)

LearningLocker · May 13, 2020 · c3283fe · c3283fe
1 parent 14380dd
commit c3283fe
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 16 deletions.
diff --git a/lib/models/visualisation.js b/lib/models/visualisation.js
@@ -106,6 +106,7 @@ const schema = new mongoose.Schema({
   timezone: { type: String },
   showStats: { type: Boolean, default: true },
   statsAtBottom: { type: Boolean, default: true },
+  contextLabel: { type: String },
 });
 
 schema.readScopes = _.keys(scopes.USER_SCOPES);

diff --git a/ui/src/components/Counter/index.js b/ui/src/components/Counter/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { isNumber, round } from 'lodash';
 import NoData from 'ui/components/Graphs/NoData';
 import numeral from 'numeral';
+import styled from 'styled-components';
 import tooltipFactory from 'react-toolbox/lib/tooltip';
 import { Link } from 'react-toolbox/lib/link';
 import { getPercentage } from 'ui/utils/defaultTitles';
@@ -40,16 +41,34 @@ const resultsIconStyles = {
   width: '40px',
 };
 
-const renderCount = ({ color, count, tooltip, hasBenchmark }) => (
+const ContextLabel = styled.div(() => ({
+  'font-size': '20p',
+  'margin-bottom': '5px',
+  'margin-top': '-10px',
+  'white-space': 'nowrap',
+  overflow: 'hidden',
+  'text-overflow': 'ellipsis'
+}));
+
+
+const renderCount = ({ color, count, tooltip, hasBenchmark, hasContextLabel }) => (
   <TooltipLink
-    style={{ color, height: hasBenchmark ? null : '100%' }}
+    style={{ color, height: hasBenchmark || hasContextLabel ? null : '100%' }}
     label={formatShortNumber(count)}
     tooltip={tooltip}
     tooltipPosition="top"
     tooltipDelay={600}
     active />
 );
 
+const renderСontextLabel = ({ contextLabel, fontSize, color }) => (
+  <ContextLabel
+    style={{ fontSize, color }}
+    key="contextLabel">
+    {contextLabel}
+  </ContextLabel>
+  );
+
 const renderBenchmark = ({ percentage, model }) => {
   if (percentage.result === 'N/A') {
     return percentage.result;
@@ -73,39 +92,42 @@ const renderBenchmark = ({ percentage, model }) => {
   );
 };
 
-const getCountFontsize = ({ height, width, hasBenchmark, maxSize }) => {
-  let fontSize = hasBenchmark ? `${maxSize / 40}` : `${maxSize / 20}`;
-  const tripHeight = hasBenchmark ? 220 : 150;
+const getCountFontsize = ({ height, width, hasBenchmark, hasContextLabel, maxSize }) => {
+  let fontSize = hasBenchmark || hasContextLabel ? `${maxSize / 40}` : `${maxSize / 20}`;
+  const tripHeight = hasBenchmark || hasContextLabel ? 550 : 200;
   if (height < tripHeight) {
-    if (!hasBenchmark) {
+    if (!hasBenchmark && !hasContextLabel) {
       fontSize = width > 200 ? 4.5 : 3.5;
     }
   } else if (width < 550) {
     fontSize = width / 60;
+    console.log(`fontSize: ${fontSize}`);
   }
   if (fontSize > 12) fontSize = 12;
   return `${fontSize}em`;
 };
 
 const renderCounter = ({ color, results, model, height, width }) => {
   const maxSize = Math.min(height, width);
-  const fontSize = (width < 332) || (maxSize < 245) ? '13px' : '0.2em';
+  const fontSize = (width < 332) || (maxSize < 245) ? '18px' : '0.25em';
   const hasBenchmark = results.size > 1;
+  const hasContextLabel = model.get('contextLabel', '') !== '';
   const benchmarkCount = hasBenchmark ? getBenchmarkResultCount(results) : null;
   const count = getResultCount(results);
   const percentage = getPercentage(count, benchmarkCount);
 
   const tooltip = hasBenchmark ? formatBenchmarkTooltip({ count, benchmarkCount }) : formatTooltip(count);
-  const countFontsize = getCountFontsize({ height, width, hasBenchmark, maxSize });
-  const renderedCount = renderCount({ color, count, tooltip, hasBenchmark });
+  const countFontsize = getCountFontsize({ height, width, hasBenchmark, hasContextLabel, maxSize });
+  const renderedCount = renderCount({ color, count, tooltip, hasBenchmark, hasContextLabel });
   const renderedBenchmark = hasBenchmark ? renderBenchmark({ percentage, model }) : null;
-
+  const renderedContextLabel = renderСontextLabel({ contextLabel: model.get('contextLabel', ''), fontSize, color });
 
   return (
     <div style={{ height: '100%' }}>
       <div
         style={{ width, fontSize: countFontsize, height: '100%', textAlign: 'center' }}>
-        {renderedCount}
+        { renderedCount }
+        { renderedContextLabel }
         <div
           key="benchmark"
           style={{

diff --git a/ui/src/containers/DashboardGrid/index.js b/ui/src/containers/DashboardGrid/index.js
@@ -113,7 +113,7 @@ const DashboardGrid = ({
       isResizable={editable}
       layout={layout.toJS()}
       cols={12}
-      rowHeight={30}
+      rowHeight={50}
       width={containerWidth}
       onLayoutChange={onLayoutChange}
       draggableHandle=".react-drag-handle">

diff --git a/ui/src/containers/Visualisations/CustomCounter/Editor.js b/ui/src/containers/Visualisations/CustomCounter/Editor.js
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
 import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
 import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
 import DescriptionForm from '../components/DescriptionForm';
+import ContextLabelForm from '../components/ContextLabelForm';
 import FiltersForm from '../components/FiltersForm';
 import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
 import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
     });
   }, [id]);
 
+  const onChangeContextLabel = useCallback((contextLabel) => {
+    updateModel({
+      schema: 'visualisation',
+      id,
+      path: 'contextLabel',
+      value: contextLabel,
+    });
+  }, [id]);
+
   const onChangeFilters = useCallback((filters) => {
     updateModel({
       schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
                 timezone={model.get('timezone', null)}
                 orgTimezone={orgTimezone}
                 onChange={onChangeTimezone} />
+
+              <ContextLabelForm
+                visualisationId={id}
+                contextLabel={model.get('contextLabel')}
+                onChange={onChangeContextLabel} />
             </Tab>
           </Tabs>
         </div>

diff --git a/ui/src/containers/Visualisations/TemplateLast7DaysStatements/Editor.js b/ui/src/containers/Visualisations/TemplateLast7DaysStatements/Editor.js
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
 import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
 import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
 import DescriptionForm from '../components/DescriptionForm';
+import ContextLabelForm from '../components/ContextLabelForm';
 import FiltersForm from '../components/FiltersForm';
 import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
 import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
     });
   }, [id]);
 
+  const onChangeContextLabel = useCallback((contextLabel) => {
+    updateModel({
+      schema: 'visualisation',
+      id,
+      path: 'contextLabel',
+      value: contextLabel,
+    });
+  }, [id]);
+
   const onChangeFilters = useCallback((filters) => {
     updateModel({
       schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
                 timezone={model.get('timezone', null)}
                 orgTimezone={orgTimezone}
                 onChange={onChangeTimezone} />
+
+              <ContextLabelForm
+                visualisationId={id}
+                contextLabel={model.get('contextLabel')}
+                onChange={onChangeContextLabel} />
             </Tab>
           </Tabs>
         </div>

diff --git a/ui/src/containers/Visualisations/TemplateLearningExperienceType/Editor.js b/ui/src/containers/Visualisations/TemplateLearningExperienceType/Editor.js
@@ -17,8 +17,6 @@ const Editor = ({
 }) => {
   const id = model.get('_id');
 
-  console.log(model.get('sourceView'));
-
   const onChangeDescription = useCallback((description) => {
     updateModel({
       schema: 'visualisation',

diff --git a/ui/src/containers/Visualisations/TemplateStreamCommentCount/Editor.js b/ui/src/containers/Visualisations/TemplateStreamCommentCount/Editor.js
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
 import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
 import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
 import DescriptionForm from '../components/DescriptionForm';
+import ContextLabelForm from '../components/ContextLabelForm';
 import FiltersForm from '../components/FiltersForm';
 import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
 import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
     });
   }, [id]);
 
+  const onChangeContextLabel = useCallback((contextLabel) => {
+    updateModel({
+      schema: 'visualisation',
+      id,
+      path: 'contextLabel',
+      value: contextLabel,
+    });
+  }, [id]);
+
   const onChangeFilters = useCallback((filters) => {
     updateModel({
       schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
                 timezone={model.get('timezone', null)}
                 orgTimezone={orgTimezone}
                 onChange={onChangeTimezone} />
+
+              <ContextLabelForm
+                visualisationId={id}
+                comment={model.get('contextLabel')}
+                onChange={onChangeContextLabel} />
             </Tab>
           </Tabs>
         </div>

diff --git a/ui/src/containers/Visualisations/components/ContextLabelForm.js b/ui/src/containers/Visualisations/components/ContextLabelForm.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * @param {string} props.visualisationId
+ * @param {string} propscontextLabel
+ * @param {(contextLabel: string) => void} props.onChange
+ */
+const ContextLabelForm = ({
+  visualisationId,
+  contextLabel,
+  onChange,
+}) => {
+  const formId = `visualisation-contextLabel-${visualisationId}`;
+
+  return (
+    <div className="form-group">
+      <label htmlFor={formId}>
+        Counter description
+      </label>
+
+      <input
+        id={formId}
+        className="form-control"
+        placeholder="Comment"
+        maxLength={30}
+        value={contextLabel}
+        onChange={e => onChange(e.target.value)} />
+    </div>
+  );
+};
+
+ContextLabelForm.propTypes = {
+  visualisationId: PropTypes.string.isRequired,
+  contextLabel: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default React.memo(ContextLabelForm);
diff --git a/ui/src/utils/hocs/withStatementsVisualisation.js b/ui/src/utils/hocs/withStatementsVisualisation.js
@@ -47,7 +47,8 @@ const withStatementsVisualisation = (WrappedComponent) => {
       this.props.model.get('filters').equals(model.get('filters')) &&
       this.props.model.get('showStats') === model.get('showStats') &&
       this.props.model.get('statsAtBottom') === model.get('statsAtBottom') &&
-      this.props.model.get('trendLines') === model.get('trendLines')
+      this.props.model.get('trendLines') === model.get('trendLines') &&
+      this.props.model.get('contextLabel') === model.get('contextLabel')
     );
 
     componentDidUpdate = () => {

diff --git a/yarn.lock b/yarn.lock
@@ -221,7 +221,6 @@
     "@babel/helper-function-name" "^7.7.4"
     "@babel/helper-split-export-declaration" "^7.7.4"
     "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.13"