No bubbles displayed if only start date exist. #92

sergibondarenko · 2016-12-19T11:28:06Z

Issue #89
I added the dots by manually manipulating HTML and style. Now it looks exactly like it is in our docs:

I haven't found a way to do it purely with vis.js. The library doesn't display relations to the X axis when e.type: 'point' is used as an event property. In short words, I got the visualization similar to this http://visjs.org/examples/timeline/items/pointItems.html

Other examples:
http://visjs.org/examples/timeline/items/backgroundAreasWithGroups.html
http://visjs.org/examples/timeline/dataHandling/dataSerialization.html
http://visjs.org/examples/timeline/dataHandling/loadExternalData.html
http://visjs.org/examples/timeline/editing/editingItems.html

Seems like e.type: point is designed to not place relations to the X axis.
I can go and fix it in the library.

scampi · 2016-12-20T15:39:18Z

@SergeyBondarenko please rebase. This PR has changes about the multivalued PR that shouldn't be here.

scampi · 2016-12-20T15:41:46Z

@SergeyBondarenko you can propose a PR to the vis lib if you want ;o)

sergibondarenko · 2016-12-20T15:58:56Z

@scampi Yes, I can, I wrote it above.
Bubbles break your first label emphasize feature. We can draw a border around label box to emphasize.

scampi · 2016-12-20T16:06:42Z

Bubbles break your first label emphasize feature. We can draw a border around label box to emphasize.

good idea. BTW this was @nreese feature ;o)

sergibondarenko · 2016-12-28T09:39:17Z

I got "play with CSS" suggestion from one of the vis contributors. almende/vis#2508 (comment)
As I actually did. So maybe it is good to take this way now.

sergibondarenko · 2016-12-28T11:57:51Z

I've fixed the Emphasize feature. Plus now I use a custom styled div to represent point instead of vis-dot, to be able to change its color.

In order to be able to change color add custom styled dot instead of vis-dot. Refactor code.

szydan · 2017-01-05T17:12:44Z

rebased on master

scampi · 2017-01-20T12:23:04Z

public/kibi_timeline.js

+                    style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
+                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
+                    const contentDivParts = divregex.exec(content);
+                    const pointDot = '<div style="position:relative;padding:0;border-width:4px;border-style:solid;' +


create a class in the less file with this style.

scampi · 2017-01-20T12:23:18Z

public/kibi_timeline.js

+                    const contentDivParts = divregex.exec(content);
+                    const pointDot = '<div style="position:relative;padding:0;border-width:4px;border-style:solid;' +
+                    'border-radius:4px;float:left;margin-top:6px;margin-right:4px;border-color:' + groupColor + '"></div>';
+                    const labelDiv = '<div style="margin-left: 15px">' + contentDivParts[2]  + '</div>';


same as above

scampi · 2017-01-20T12:28:04Z

public/kibi_timeline.js

+                    // force vis box look like vis point
+                    style = `border-style: none; background-color: #fff; color: ${groupColor}; border-color: ${groupColor}`;
+                    const divregex = /(<div.*>)(.*)(<\/div>)/g;
+                    const contentDivParts = divregex.exec(content);


Instead of this, you can have an angular template where you would use ng-class to set the appropriate class. Then you would compile that template to get the final HTML. See tooltip of the tilemap vis in kibana for some example.

Are you talking about line 250? But this variable is assigned as property to the e object below to form the visualization items.

Ahh, ok, you are talking about stuff below

yes ;o) I put the comment here because this way you wouldn't have any HTML code in that file and so no need for the regexp

…for each item

sergibondarenko · 2017-01-24T14:58:42Z

public/kibi_timeline.js

-                  let content = $compile(itemTemplate)($itemscope)[0].innerHTML;
-                  console.log('INNER HTML:');
+
+                  const content = timelineHelper.createItemTemplate(i, itemDict);
                  console.log(content);

                  let style = `background-color: ${groupColor}; color: #fff;`;


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

szydan · 2017-01-24T15:02:33Z

public/kibi_timeline.js

+                    endFieldValue: endFieldValue
+                  };
+
+                  const content = timelineHelper.createItemTemplate(i, itemDict);


Are you using "i" if not please remove

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

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

scampi · 2017-01-24T15:55:04Z

public/kibi_timeline.js

@@ -1,3 +1,4 @@
+/* global angular */


why is this needed ?

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

scampi · 2017-01-24T15:56:21Z

public/lib/helpers/timeline_helper.js

@@ -7,6 +7,16 @@ define(function (require) {
    function TimelineHelper() {
    }

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


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

sergibondarenko · 2017-01-24T17:19:45Z

jenkins test it

sergibondarenko · 2017-01-24T17:29:48Z

public/lib/helpers/timeline_helper.js

-        (!itemDict.endFieldValue || itemDict.startValue === itemDict.endFieldValue
-          ? '<div class="kibi-tl-label-item">' + itemDict.labelValue + '</div>' : itemDict.labelValue) +
-        (itemDict.useHighlight ? '<p class="tiny-txt">' + itemDict.highlight + '</p>' : '') + '</div>';
+      let endfield = '';


@scampi how do you find my readability code refactoring?

sergibondarenko force-pushed the issue-89 branch from cdf5613 to 212b800 Compare December 20, 2016 15:55

sergibondarenko changed the title ~~WIP. No bubbles displayed if only start date exist.~~ No bubbles displayed if only start date exist. Dec 28, 2016

sergibondarenko changed the title ~~No bubbles displayed if only start date exist.~~ WIP. No bubbles displayed if only start date exist. Dec 28, 2016

sergibondarenko changed the title ~~WIP. No bubbles displayed if only start date exist.~~ No bubbles displayed if only start date exist. Dec 28, 2016

sergibondarenko added 5 commits January 5, 2017 18:12

Add point to timeline by manually manipulating DOM and style.

7f87b07

Remove unneeded code. Define vars as const.

aa514d6

Fix "Emphasize first label instance" feature.

9759d3b

In order to be able to change color add custom styled dot instead of vis-dot. Refactor code.

Fix test.

a431e2a

Change emphasized item border color to the group color.

47ed29e

szydan force-pushed the issue-89 branch from 2f1f70b to 47ed29e Compare January 5, 2017 17:12

scampi suggested changes Jan 20, 2017

View reviewed changes

sergibondarenko added 4 commits January 20, 2017 15:43

Move styles to the css file.

a1ef2ee

I'm unsuccessfully trying to import and compile the content template …

07fcb0e

…for each item

Move item template building to a separate timelineHelper method.

fdf9077

Delete console.log.

7e8ee67

sergibondarenko commented Jan 24, 2017

View reviewed changes

szydan approved these changes Jan 24, 2017

View reviewed changes

Get rid off the i varibale in the item template building method.

81db318

scampi suggested changes Jan 24, 2017

View reviewed changes

sergibondarenko added 2 commits January 24, 2017 17:00

Delete unused lint directive.

49dc771

Refactor the item template creation method.

3154b41

sergibondarenko commented Jan 24, 2017

View reviewed changes

Init label with correct value inside the item template creating method.

54c811d

scampi approved these changes Jan 25, 2017

View reviewed changes

szydan merged commit 9f76a30 into master Jan 25, 2017

szydan deleted the issue-89 branch January 25, 2017 09:48

sergibondarenko mentioned this pull request Jan 25, 2017

There are no bubbles anymore #89

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No bubbles displayed if only start date exist. #92

No bubbles displayed if only start date exist. #92

sergibondarenko commented Dec 19, 2016 •

edited

Loading

scampi commented Dec 20, 2016

scampi commented Dec 20, 2016

sergibondarenko commented Dec 20, 2016 •

edited

Loading

scampi commented Dec 20, 2016 •

edited

Loading

sergibondarenko commented Dec 28, 2016 •

edited

Loading

sergibondarenko commented Dec 28, 2016 •

edited

Loading

szydan commented Jan 5, 2017

scampi Jan 20, 2017

scampi Jan 20, 2017

scampi Jan 20, 2017

sergibondarenko Jan 20, 2017

sergibondarenko Jan 20, 2017

scampi Jan 20, 2017 •

edited

Loading

sergibondarenko Jan 24, 2017 •

edited

Loading

szydan Jan 24, 2017

sergibondarenko Jan 24, 2017

sergibondarenko Jan 24, 2017 •

edited

Loading

scampi Jan 24, 2017

sergibondarenko Jan 24, 2017

scampi Jan 24, 2017

sergibondarenko commented Jan 24, 2017

sergibondarenko Jan 24, 2017

No bubbles displayed if only start date exist. #92

No bubbles displayed if only start date exist. #92

Conversation

sergibondarenko commented Dec 19, 2016 • edited Loading

scampi commented Dec 20, 2016

scampi commented Dec 20, 2016

sergibondarenko commented Dec 20, 2016 • edited Loading

scampi commented Dec 20, 2016 • edited Loading

sergibondarenko commented Dec 28, 2016 • edited Loading

sergibondarenko commented Dec 28, 2016 • edited Loading

szydan commented Jan 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scampi Jan 20, 2017 • edited Loading

Choose a reason for hiding this comment

sergibondarenko Jan 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sergibondarenko Jan 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sergibondarenko commented Jan 24, 2017

Choose a reason for hiding this comment

sergibondarenko commented Dec 19, 2016 •

edited

Loading

sergibondarenko commented Dec 20, 2016 •

edited

Loading

scampi commented Dec 20, 2016 •

edited

Loading

sergibondarenko commented Dec 28, 2016 •

edited

Loading

sergibondarenko commented Dec 28, 2016 •

edited

Loading

scampi Jan 20, 2017 •

edited

Loading

sergibondarenko Jan 24, 2017 •

edited

Loading

sergibondarenko Jan 24, 2017 •

edited

Loading