Added color option. New example.

javdome · Aug 1, 2022 · 7df6fa7 · 7df6fa7
1 parent 7d6f5d2
commit 7df6fa7
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -62,6 +62,7 @@ Options can be used to customize the arrows. Options are defined as a JSON objec
 ```
 const options = {
     followRelationships: true,
+    color: "#039E00"
 };
 
 const my_Arrow = new Arrow(my_timeline, arrows_array, options);
@@ -70,6 +71,9 @@ const my_Arrow = new Arrow(my_timeline, arrows_array, options);
 **followRelationships** - defaults to false.
 If true, arrows can point backwards and will follow the relationships set in the data. If false, arrows will only follow the timeline direction (left to right).
 
+**color** - defaults to "#9c0000".
+Sets the arrows color.
+
 
 ## Methods
 

diff --git a/arrow.js b/arrow.js
@@ -4,8 +4,8 @@
  *
  * Class to easily draw lines to connect items in the vis Timeline module.
  *
- * @version 3.1.0
- * @date    2021-04-06
+ * @version 4.1.0
+ * @date    2022-08-01
  *
  * @copyright (c) Javi Domenech ([email protected]) 
  *
@@ -32,6 +32,8 @@ export default class Arrow {
 
         this._followRelationships = options?.followRelationships;
 
+        this._arrowsColor = options?.color ? options.color : "#9c0000"
+
         this._arrowHead = document.createElementNS(
             "http://www.w3.org/2000/svg",
             "marker"
@@ -70,7 +72,7 @@ export default class Arrow {
         this._arrowHead.setAttribute("orient", "auto-start-reverse");
         //Configure the path of the arrowHead (arrowHeadPath)
         this._arrowHeadPath.setAttribute("d", "M 0 0 L -10 -5 L -7.5 0 L -10 5 z");
-        this._arrowHeadPath.style.fill = "#9c0000";
+        this._arrowHeadPath.style.fill = this._arrowsColor;
         this._arrowHead.appendChild(this._arrowHeadPath);
         this._svg.appendChild(this._arrowHead);
         //Create paths for the started dependency array
@@ -92,7 +94,7 @@ export default class Arrow {
             "path"
           );
           somePath.setAttribute("d", "M 0 0");
-          somePath.style.stroke = "#9c0000";
+          somePath.style.stroke = this._arrowsColor;
           somePath.style.strokeWidth = "3px";
           somePath.style.fill = "none";
           somePath.style.pointerEvents = "auto";

diff --git a/examples/basic_example.html b/examples/basic_example.html
@@ -29,6 +29,7 @@
     />
   </head>
   <body>
+    <h1>Basic example</h1>
     <button onclick="Window.showVisibleItems()">Show current visible items</button>
     <button onclick="Window.showGroups()">Show groups</button>
     <button onclick="Window.remove()">Delete arrow between 3 and 8</button>

diff --git a/examples/colorOption.html b/examples/colorOption.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Timeline | With colorOption set to "#039E00"</title>
+    <!-- Fuentes de iconos -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
+    <style>
+      body,
+      html {
+        font-family: arial, sans-serif;
+        font-size: 11pt;
+      }
+      #visualization {
+        box-sizing: border-box;
+        width: 100%;
+        height: 300px;
+      }
+    </style>
+
+
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+
+
+    <script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link
+      href="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <h1>With color option</h1>
+    <button onclick="Window.showVisibleItems()">Show current visible items</button>
+    <button onclick="Window.showGroups()">Show groups</button>
+    <button onclick="Window.remove()">Delete arrow between 3 and 8</button>
+    <div>
+      <h2>visible items:</h2>
+      <h3 id="visibleItemsContainer"></h3>
+    </div>
+    <div id="visualization"></div>
+
+
+    <!-- <script src="../arrow.js"></script> -->
+    <script type="module" src="./colorOption.js"></script>
+
+  </body>
+</html>
diff --git a/examples/colorOption.js b/examples/colorOption.js
@@ -0,0 +1,138 @@
+      /**
+      *CREATING THE TIMELINE 
+      */
+      import Arrow from '../arrow.js';
+
+      const options = {
+        groupOrder: "content", // groupOrder can be a property name or a sorting function
+        selectable: true,
+        editable: true,
+        groupTemplate: function(group) { //function to hide groups
+          var container = document.createElement('div');
+          var label = document.createElement('span');
+          label.innerHTML = group.content + ' ';
+          container.insertAdjacentElement('afterBegin',label);
+
+          var hide = document.createElement('span');
+          hide.setAttribute("class", "oi oi-eye");
+          hide.addEventListener('click',function(){
+            groups.update({id: group.id, visible: false});
+          });
+          container.insertAdjacentElement('beforeEnd',hide);     
+          return container;
+        }
+      };
+
+      // Generate some
+      var now = vis.moment()
+        .minutes(0)
+        .seconds(0)
+        .milliseconds(0);
+      var names = ["John", "Alston", "Lee", "Grant"];
+      var itemCount = 20;
+      // create a data set with groups
+      var groups = new vis.DataSet();
+      for (var g = 0; g < names.length; g++) {
+        groups.add({ id: g, content: names[g] });
+      }
+      // create a dataset with items
+      var items = new vis.DataSet();
+      for (var i = 0; i < itemCount; i++) {
+        var start = now.clone().add(Math.random() * 200, "hours");
+        var end = start + 100000000;
+        var group = Math.floor(Math.random() * names.length);
+        items.add({
+          id: i,
+          group: group,
+          content:
+            "item " +
+            i +
+            ' <span style="color:#97B0F8;">(' +
+            names[group] +
+            ")</span>",
+          start: start,
+          end: end,
+          //type: "box"
+        });
+      }
+      // Create visualization.
+      const container = document.getElementById("visualization");
+      const timelinevis = new vis.Timeline(container, items, groups, options);
+
+
+
+
+
+
+      /**
+      *CREATING THE ARROWS 
+      */    
+      var dependency = [
+        {
+          id: 2,
+          id_item_1: 1,
+          id_item_2: 2,
+          title: 'Hello'   
+        },
+        {
+          id: 5,
+          id_item_1: 3,
+          id_item_2: 5 
+        },
+        {
+          id: 7,
+          id_item_1: 6,
+          id_item_2: 7,
+          title: 'Hola'   
+        },
+        {
+          id: 10,
+          id_item_1: 3,
+          id_item_2: 8
+        }
+      ];
+
+
+      // Adding an arrows option Color
+      const arrowsOptions = {
+        color: "#039E00"
+      };
+
+
+      // Create instance of Arrow for a timeline objetc and its denpedencies
+      const myArrow = new Arrow(timelinevis, dependency, arrowsOptions);
+
+
+
+      //Example of adding a new arrow (between items 15 and 16)
+      myArrow.addArrow(
+        {
+          id: 13,
+          id_item_1: 15,
+          id_item_2: 16,
+          title: 'I have been added'   
+        }
+      );
+
+
+
+
+      /*ANOTHER FUNCTIONS (NO IMPORTANT)*/
+      const showVisibleItems = function () {
+        var a = timelinevis.getVisibleItems();
+        document.getElementById("visibleItemsContainer").innerHTML = ""
+        document.getElementById("visibleItemsContainer").innerHTML += a;
+      };
+      Window.showVisibleItems = showVisibleItems;
+
+      const showGroups = function (){
+        groups.forEach(function(group){
+          groups.update({id: group.id, visible: true});
+        })
+      };
+      Window.showGroups = showGroups;
+
+      const remove = function () {
+        myArrow.removeArrow(10);
+      }
+      Window.remove = remove;
diff --git a/examples/followRelationships_True.html b/examples/followRelationships_True.html
@@ -29,6 +29,7 @@
     />
   </head>
   <body>
+    <h1>With followRelationships True</h1>
     <button onclick="Window.showVisibleItems()">Show current visible items</button>
     <button onclick="Window.showGroups()">Show groups</button>
     <button onclick="Window.remove()">Delete arrow between 3 and 8</button>

diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@ <h1>Timeline-arrows Examples</h1>
     <ul>
       <li><a href="./examples/basic_example.html">Basic example</a></li>
       <li><a href="./examples/followRelationships_True.html">With followRelationships True</a></li>
+      <li><a href="./examples/colorOption.html">With color option</a></li>
       <!-- <li><a href="./examples/2timelines.html">With 2 timelines</a></li> -->
     </ul>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "timeline-arrows",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Package to easily draw lines to connect items in the vis Timeline module.",
   "main": "arrow.js",
   "scripts": {