Skip to content

Commit c3283fe

Browse files
vladislav-999vladislav-999
authored
feat(Visualise): Adds context label to counter (LLC-16) (#1508)
1 parent 14380dd commit c3283fe

File tree

10 files changed

+121
-16
lines changed

10 files changed

+121
-16
lines changed

‎lib/models/visualisation.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ const schema = new mongoose.Schema({
106106
timezone: { type: String },
107107
showStats: { type: Boolean, default: true },
108108
statsAtBottom: { type: Boolean, default: true },
109+
contextLabel: { type: String },
109110
});
110111

111112
schema.readScopes = _.keys(scopes.USER_SCOPES);

‎ui/src/components/Counter/index.js‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { isNumber, round } from 'lodash';
33
import NoData from 'ui/components/Graphs/NoData';
44
import numeral from 'numeral';
5+
import styled from 'styled-components';
56
import tooltipFactory from 'react-toolbox/lib/tooltip';
67
import { Link } from 'react-toolbox/lib/link';
78
import { getPercentage } from 'ui/utils/defaultTitles';
@@ -40,16 +41,34 @@ const resultsIconStyles = {
4041
width: '40px',
4142
};
4243

43-
const renderCount = ({ color, count, tooltip, hasBenchmark }) => (
44+
const ContextLabel = styled.div(() => ({
45+
'font-size': '20p',
46+
'margin-bottom': '5px',
47+
'margin-top': '-10px',
48+
'white-space': 'nowrap',
49+
overflow: 'hidden',
50+
'text-overflow': 'ellipsis'
51+
}));
52+
53+
54+
const renderCount = ({ color, count, tooltip, hasBenchmark, hasContextLabel }) => (
4455
<TooltipLink
45-
style={{ color, height: hasBenchmark ? null : '100%' }}
56+
style={{ color, height: hasBenchmark || hasContextLabel ? null : '100%' }}
4657
label={formatShortNumber(count)}
4758
tooltip={tooltip}
4859
tooltipPosition="top"
4960
tooltipDelay={600}
5061
active />
5162
);
5263

64+
const renderСontextLabel = ({ contextLabel, fontSize, color }) => (
65+
<ContextLabel
66+
style={{ fontSize, color }}
67+
key="contextLabel">
68+
{contextLabel}
69+
</ContextLabel>
70+
);
71+
5372
const renderBenchmark = ({ percentage, model }) => {
5473
if (percentage.result === 'N/A') {
5574
return percentage.result;
@@ -73,39 +92,42 @@ const renderBenchmark = ({ percentage, model }) => {
7392
);
7493
};
7594

76-
const getCountFontsize = ({ height, width, hasBenchmark, maxSize }) => {
77-
let fontSize = hasBenchmark ? `${maxSize / 40}` : `${maxSize / 20}`;
78-
const tripHeight = hasBenchmark ? 220 : 150;
95+
const getCountFontsize = ({ height, width, hasBenchmark, hasContextLabel, maxSize }) => {
96+
let fontSize = hasBenchmark || hasContextLabel ? `${maxSize / 40}` : `${maxSize / 20}`;
97+
const tripHeight = hasBenchmark || hasContextLabel ? 550 : 200;
7998
if (height < tripHeight) {
80-
if (!hasBenchmark) {
99+
if (!hasBenchmark && !hasContextLabel) {
81100
fontSize = width > 200 ? 4.5 : 3.5;
82101
}
83102
} else if (width < 550) {
84103
fontSize = width / 60;
104+
console.log(`fontSize: ${fontSize}`);
85105
}
86106
if (fontSize > 12) fontSize = 12;
87107
return `${fontSize}em`;
88108
};
89109

90110
const renderCounter = ({ color, results, model, height, width }) => {
91111
const maxSize = Math.min(height, width);
92-
const fontSize = (width < 332) || (maxSize < 245) ? '13px' : '0.2em';
112+
const fontSize = (width < 332) || (maxSize < 245) ? '18px' : '0.25em';
93113
const hasBenchmark = results.size > 1;
114+
const hasContextLabel = model.get('contextLabel', '') !== '';
94115
const benchmarkCount = hasBenchmark ? getBenchmarkResultCount(results) : null;
95116
const count = getResultCount(results);
96117
const percentage = getPercentage(count, benchmarkCount);
97118

98119
const tooltip = hasBenchmark ? formatBenchmarkTooltip({ count, benchmarkCount }) : formatTooltip(count);
99-
const countFontsize = getCountFontsize({ height, width, hasBenchmark, maxSize });
100-
const renderedCount = renderCount({ color, count, tooltip, hasBenchmark });
120+
const countFontsize = getCountFontsize({ height, width, hasBenchmark, hasContextLabel, maxSize });
121+
const renderedCount = renderCount({ color, count, tooltip, hasBenchmark, hasContextLabel });
101122
const renderedBenchmark = hasBenchmark ? renderBenchmark({ percentage, model }) : null;
102-
123+
const renderedContextLabel = renderСontextLabel({ contextLabel: model.get('contextLabel', ''), fontSize, color });
103124

104125
return (
105126
<div style={{ height: '100%' }}>
106127
<div
107128
style={{ width, fontSize: countFontsize, height: '100%', textAlign: 'center' }}>
108-
{renderedCount}
129+
{ renderedCount }
130+
{ renderedContextLabel }
109131
<div
110132
key="benchmark"
111133
style={{

‎ui/src/containers/DashboardGrid/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const DashboardGrid = ({
113113
isResizable={editable}
114114
layout={layout.toJS()}
115115
cols={12}
116-
rowHeight={30}
116+
rowHeight={50}
117117
width={containerWidth}
118118
onLayoutChange={onLayoutChange}
119119
draggableHandle=".react-drag-handle">

‎ui/src/containers/Visualisations/CustomCounter/Editor.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
66
import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
77
import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
88
import DescriptionForm from '../components/DescriptionForm';
9+
import ContextLabelForm from '../components/ContextLabelForm';
910
import FiltersForm from '../components/FiltersForm';
1011
import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
1112
import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
3334
});
3435
}, [id]);
3536

37+
const onChangeContextLabel = useCallback((contextLabel) => {
38+
updateModel({
39+
schema: 'visualisation',
40+
id,
41+
path: 'contextLabel',
42+
value: contextLabel,
43+
});
44+
}, [id]);
45+
3646
const onChangeFilters = useCallback((filters) => {
3747
updateModel({
3848
schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
104114
timezone={model.get('timezone', null)}
105115
orgTimezone={orgTimezone}
106116
onChange={onChangeTimezone} />
117+
118+
<ContextLabelForm
119+
visualisationId={id}
120+
contextLabel={model.get('contextLabel')}
121+
onChange={onChangeContextLabel} />
107122
</Tab>
108123
</Tabs>
109124
</div>

‎ui/src/containers/Visualisations/TemplateLast7DaysStatements/Editor.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
66
import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
77
import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
88
import DescriptionForm from '../components/DescriptionForm';
9+
import ContextLabelForm from '../components/ContextLabelForm';
910
import FiltersForm from '../components/FiltersForm';
1011
import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
1112
import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
3334
});
3435
}, [id]);
3536

37+
const onChangeContextLabel = useCallback((contextLabel) => {
38+
updateModel({
39+
schema: 'visualisation',
40+
id,
41+
path: 'contextLabel',
42+
value: contextLabel,
43+
});
44+
}, [id]);
45+
3646
const onChangeFilters = useCallback((filters) => {
3747
updateModel({
3848
schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
104114
timezone={model.get('timezone', null)}
105115
orgTimezone={orgTimezone}
106116
onChange={onChangeTimezone} />
117+
118+
<ContextLabelForm
119+
visualisationId={id}
120+
contextLabel={model.get('contextLabel')}
121+
onChange={onChangeContextLabel} />
107122
</Tab>
108123
</Tabs>
109124
</div>

‎ui/src/containers/Visualisations/TemplateLearningExperienceType/Editor.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ const Editor = ({
1717
}) => {
1818
const id = model.get('_id');
1919

20-
console.log(model.get('sourceView'));
21-
2220
const onChangeDescription = useCallback((description) => {
2321
updateModel({
2422
schema: 'visualisation',

‎ui/src/containers/Visualisations/TemplateStreamCommentCount/Editor.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Tabs from 'ui/components/Material/Tabs';
66
import CounterAxesEditor from 'ui/containers/VisualiseForm/StatementsForm/AxesEditor/CounterAxesEditor';
77
import BenchmarkingEnabledSwitch from '../components/BenchmarkingEnabledSwitch';
88
import DescriptionForm from '../components/DescriptionForm';
9+
import ContextLabelForm from '../components/ContextLabelForm';
910
import FiltersForm from '../components/FiltersForm';
1011
import PreviewPeriodPicker from '../components/PreviewPeriodPicker';
1112
import TimezoneForm from '../components/TimezoneForm';
@@ -33,6 +34,15 @@ const Editor = ({
3334
});
3435
}, [id]);
3536

37+
const onChangeContextLabel = useCallback((contextLabel) => {
38+
updateModel({
39+
schema: 'visualisation',
40+
id,
41+
path: 'contextLabel',
42+
value: contextLabel,
43+
});
44+
}, [id]);
45+
3646
const onChangeFilters = useCallback((filters) => {
3747
updateModel({
3848
schema: 'visualisation',
@@ -104,6 +114,11 @@ const Editor = ({
104114
timezone={model.get('timezone', null)}
105115
orgTimezone={orgTimezone}
106116
onChange={onChangeTimezone} />
117+
118+
<ContextLabelForm
119+
visualisationId={id}
120+
comment={model.get('contextLabel')}
121+
onChange={onChangeContextLabel} />
107122
</Tab>
108123
</Tabs>
109124
</div>

‎ui/src/containers/Visualisations/components/ContextLabelForm.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
/**
5+
* @param {string} props.visualisationId
6+
* @param {string} propscontextLabel
7+
* @param {(contextLabel: string) => void} props.onChange
8+
*/
9+
const ContextLabelForm = ({
10+
visualisationId,
11+
contextLabel,
12+
onChange,
13+
}) => {
14+
const formId = `visualisation-contextLabel-${visualisationId}`;
15+
16+
return (
17+
<div className="form-group">
18+
<label htmlFor={formId}>
19+
Counter description
20+
</label>
21+
22+
<input
23+
id={formId}
24+
className="form-control"
25+
placeholder="Comment"
26+
maxLength={30}
27+
value={contextLabel}
28+
onChange={e => onChange(e.target.value)} />
29+
</div>
30+
);
31+
};
32+
33+
ContextLabelForm.propTypes = {
34+
visualisationId: PropTypes.string.isRequired,
35+
contextLabel: PropTypes.string.isRequired,
36+
onChange: PropTypes.func.isRequired,
37+
};
38+
39+
export default React.memo(ContextLabelForm);

‎ui/src/utils/hocs/withStatementsVisualisation.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ const withStatementsVisualisation = (WrappedComponent) => {
4747
this.props.model.get('filters').equals(model.get('filters')) &&
4848
this.props.model.get('showStats') === model.get('showStats') &&
4949
this.props.model.get('statsAtBottom') === model.get('statsAtBottom') &&
50-
this.props.model.get('trendLines') === model.get('trendLines')
50+
this.props.model.get('trendLines') === model.get('trendLines') &&
51+
this.props.model.get('contextLabel') === model.get('contextLabel')
5152
);
5253

5354
componentDidUpdate = () => {

‎yarn.lock‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,6 @@
221221
"@babel/helper-function-name" "^7.7.4"
222222
"@babel/helper-split-export-declaration" "^7.7.4"
223223
"@babel/parser" "^7.7.4"
224-
"@babel/types" "^7.7.4"
225224
debug "^4.1.0"
226225
globals "^11.1.0"
227226
lodash "^4.17.13"

0 commit comments

Comments
 (0)