Skip to content
This repository has been archived by the owner on Oct 30, 2021. It is now read-only.

No bubbles displayed if only start date exist. #92

Merged
merged 13 commits into from
Jan 25, 2017
Merged

No bubbles displayed if only start date exist. #92

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7f87b07
Add point to timeline by manually manipulating DOM and style.
sergibondarenko Dec 19, 2016
aa514d6
Remove unneeded code. Define vars as const.
sergibondarenko Dec 28, 2016
9759d3b
Fix "Emphasize first label instance" feature.
sergibondarenko Dec 28, 2016
a431e2a
Fix test.
sergibondarenko Dec 28, 2016
47ed29e
Change emphasized item border color to the group color.
sergibondarenko Dec 28, 2016
a1ef2ee
Move styles to the css file.
sergibondarenko Jan 20, 2017
07fcb0e
I'm unsuccessfully trying to import and compile the content template …
sergibondarenko Jan 23, 2017
fdf9077
Move item template building to a separate timelineHelper method.
sergibondarenko Jan 24, 2017
7e8ee67
Delete console.log.
sergibondarenko Jan 24, 2017
81db318
Get rid off the i varibale in the item template building method.
sergibondarenko Jan 24, 2017
49dc771
Delete unused lint directive.
sergibondarenko Jan 24, 2017
3154b41
Refactor the item template creation method.
sergibondarenko Jan 24, 2017
54c811d
Init label with correct value inside the item template creating method.
sergibondarenko Jan 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions public/__tests__/kibi_timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,23 +381,23 @@ describe('KibiTimeline Directive', function () {
case 0:
expect(data.value).to.be('linux');
expect(data.start.valueOf()).to.be(date1Obj.valueOf());
// color is inverted
// emphasized, border style is solid
expect(data.style).to.match(/color: #ff0000/);
expect(data.style).to.match(/background-color: #fff/);
expect(data.style).to.match(/border-style: solid/);
break;
case 1:
expect(data.value).to.be('mac');
expect(data.start.valueOf()).to.be(date2Obj.valueOf());
// color is inverted
// emphasized, border style is solid
expect(data.style).to.match(/color: #ff0000/);
expect(data.style).to.match(/background-color: #fff/);
expect(data.style).to.match(/border-style: solid/);
break;
case 2:
expect(data.value).to.be('linux');
expect(data.start.valueOf()).to.be(date3Obj.valueOf());
// color is normal
expect(data.style).to.match(/color: #fff/);
expect(data.style).to.match(/background-color: #ff0000/);
// border style is none
expect(data.style).to.match(/color: #ff0000/);
expect(data.style).to.match(/border-style: none/);
break;
default:
expect().fail(`Should not have the case itemIndex=${itemIndex}`);
Expand Down
65 changes: 37 additions & 28 deletions public/kibi_timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* global angular */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this needed ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It isn't needed anymore, I'll delete it.

define(function (require) {
require('ui/highlight/highlight_tags');
const _ = require('lodash');
Expand Down Expand Up @@ -235,18 +236,35 @@ define(function (require) {
const startValue = value;
const startRawValue = startRawFieldValue[i];

const content =
'<div title="index: ' + indexId +
', startField: ' + params.startField +
(params.endField ? ', endField: ' + params.endField : '') +
'">' + labelValue +
(params.useHighlight ? '<p class="tiny-txt">' + timelineHelper.pluckHighlights(hit, highlightTags) +
'</p>' : '') + '</div>';
const itemDict = {
indexId: indexId,
startField: params.startField,
endField: params.endField,
labelValue: labelValue,
useHighlight: params.useHighlight,
highlight: timelineHelper.pluckHighlights(hit, highlightTags),
groupColor: groupColor,
startValue: startValue,
endFieldValue: endFieldValue
};

const content = timelineHelper.createItemTemplate(i, itemDict);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you using "i" if not please remove

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I do it in the template building method. But I'll look, maybe I can refactor.

Copy link
Contributor Author

@sergibondarenko sergibondarenko Jan 24, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got rid of the i variable in the template method.


let style = `background-color: ${groupColor}; color: #fff;`;
Copy link
Contributor Author

@sergibondarenko sergibondarenko Jan 24, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@szydan Seems I can't deprecate this style variable because I need to change the groupColor for every group.

if (!endFieldValue || startValue === endFieldValue[i]) {
// here the end field value missing but expected
// or start field value === end field value
// force vis box look like vis point
style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
}

let style = 'background-color: ' + groupColor + '; color: #fff;';
if (params.invertFirstLabelInstance &&
!_.includes(uniqueLabels, labelValue.toLowerCase().trim())) {
style = 'background-color: #fff; color: ' + groupColor + ';';
if (!endFieldValue || startValue === endFieldValue[i]) {
style = `border-style: solid; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
} else {
style = `background-color: #fff; color: ${groupColor};`;
}
uniqueLabels.push(labelValue.toLowerCase().trim());
}

Expand All @@ -265,25 +283,16 @@ define(function (require) {
groupId: groupId
};

if (params.endField) {
if (!endFieldValue) {
// here the end field value missing but expected
// force the event to be of type point
e.type = 'point';
} else {
const endValue = endFieldValue[i];
const endRawValue = endRawFieldValue[i];
if (startValue === endValue) {
// also force it to be a point
e.type = 'point';
} else {
e.type = 'range';
e.end = new Date(endRawValue);
e.endField = {
name: params.endField,
value: endValue
};
}
if (endFieldValue && startValue !== endFieldValue[i]) {
const endValue = endFieldValue[i];
const endRawValue = endRawFieldValue[i];
if (startValue !== endValue) {
e.type = 'range';
e.end = new Date(endRawValue);
e.endField = {
name: params.endField,
value: endValue
};
}
}

Expand Down
17 changes: 17 additions & 0 deletions public/kibi_timeline_vis.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,20 @@
.vis-panel .vis-shadow {
box-shadow: none!important; /* disable the shadow */
}

.kibi-tl-dot-item {
position: relative;
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
float: left;
margin-top: 6px;
margin-right: 4px;
border-color: red;
}

.kibi-tl-label-item {
margin-left: 15px;
}

1 change: 0 additions & 1 deletion public/kibi_timeline_vis_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,5 @@ define(function (require) {
removeVisStateChangedHandler();
});
}

});
});
10 changes: 10 additions & 0 deletions public/lib/helpers/timeline_helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@ define(function (require) {
function TimelineHelper() {
}

TimelineHelper.prototype.createItemTemplate = function (i, itemDict) {
return '<div title="index: ' + itemDict.indexId + ', startField: ' + itemDict.startField +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you try using lodash template ? https://lodash.com/docs/3.10.1#template
maybe it will improve readability

(itemDict.endField ? ', endField: ' + itemDict.endField : '') + '">' +
(!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
? '<div class="kibi-tl-dot-item" style="border-color:' + itemDict.groupColor + '"></div>' : '') +
(!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue[i]
? '<div class="kibi-tl-label-item">' + itemDict.labelValue + '</div>' : itemDict.labelValue) +
(itemDict.useHighlight ? '<p class="tiny-txt">' + itemDict.highlight + '</p>' : '') + '</div>';
};

TimelineHelper.prototype.changeTimezone = function (timezone) {
if (timezone !== 'Browser') {
return moment().tz(timezone).format('Z');
Expand Down