@evercam/ui 0.0.55-beta.6 → 0.0.55-beta.7

package/dist/attributes.json

@@ -362,5 +362,10 @@
     "type": "number",
     "description": "",
     "default": 18
+  },
+  "ETimeline/milestones-first": {
+    "type": "boolean",
+    "description": "",
+    "default": true
   }
 }

package/dist/index.mjs

@@ -22309,6 +22309,10 @@ const Ih = _h.exports, G = {
     milestoneBulletSize: {
       type: Number,
       default: 18
+    },
+    milestonesFirst: {
+      type: Boolean,
+      default: !0
     }
   },
   data() {
@@ -22363,6 +22367,30 @@ const Ih = _h.exports, G = {
     };
   },
   computed: {
+    combinedBarsHeight() {
+      return Object.values(this.barGroups).reduce(
+        (s, e) => s + (e.height || this.barChartHeight),
+        0
+      );
+    },
+    combinedMilestonesHeight() {
+      return Object.values(this.milestonesGroups).reduce(
+        (s, e) => s + (e.height || this.barChartHeight),
+        0
+      );
+    },
+    milestonesYOffset() {
+      return this.milestonesFirst ? 0 : this.combinedBarsHeight + (this.hasChart ? this.chartHeight : 0);
+    },
+    chartsYOffset() {
+      return this.hasMilestones && this.milestonesFirst ? this.combinedMilestonesHeight : 0;
+    },
+    barsYOffset() {
+      return (this.hasChart ? this.chartHeight : 0) + (this.hasMilestones && this.milestonesFirst ? this.combinedMilestonesHeight : 0);
+    },
+    hasMilestones() {
+      return Object.keys(this.milestonesGroups).length > 0;
+    },
     barChartHeight() {
       return this.barHeight + this.barYPadding;
     },
@@ -23077,7 +23105,7 @@ const Ih = _h.exports, G = {
       this.svg.selectAll(`g.${G.eventGroup}`).remove(), this.svg.selectAll(`.${G.barChartGroup}`).remove(), this.svg.selectAll(`.${G.lineGraphGroup}`).remove(), this.svg.selectAll(`.${G.lineGraphGroupLabel}`).remove(), this.svg.selectAll(`.${G.loadingIndicator}`).remove(), this.drawLineGraphEventsGroups(), this.drawBarEventsGroups(), this.drawBarChartEventsGroups(), this.drawMilestonesPlaceholder();
     },
     drawLineGraphEventsGroups() {
-      const s = this.combinedXAxesHeight, e = this.insertZerosAtInterval ? this.filledGapsLineGraphGroups : this.lineGraphGroups;
+      const s = this.combinedXAxesHeight + this.chartsYOffset, e = this.insertZerosAtInterval ? this.filledGapsLineGraphGroups : this.lineGraphGroups;
       Object.entries(e).forEach(([t, i]) => {
         const r = this.svg.append("g").classed(
           `${G.lineGraphGroup} ${G.lineGraphGroup}-${t}`,
@@ -23160,29 +23188,29 @@ const Ih = _h.exports, G = {
       dots: n,
       dotsSize: a
     }) {
-      const { color: o, bgColor: l, label: c, events: u, isLoading: h } = e, d = this.hasChart ? this.chartHeight : 0;
-      let f = t * this.barChartHeight + this.combinedXAxesHeight + d;
-      i && (f = this.getMilestoneGroupYPosition(s)), this.drawProgressIndicator({
-        yPosition: f,
+      const { color: o, bgColor: l, label: c, events: u, isLoading: h } = e;
+      let d = t * this.barChartHeight + this.combinedXAxesHeight + this.barsYOffset;
+      i && (d = this.getMilestoneGroupYPosition(s)), this.drawProgressIndicator({
+        yPosition: d,
         type: s,
         color: o,
         isLoading: h
       });
-      const m = this.svg.append("g").attr("data-color", o).classed(G.eventGroup, !0).classed(`${G.eventGroup}-${s}`, !0);
+      const f = this.svg.append("g").attr("data-color", o).classed(G.eventGroup, !0).classed(`${G.eventGroup}-${s}`, !0);
       if (this.drawBackground({
         color: l || o,
-        gElement: m,
-        yPosition: f,
+        gElement: f,
+        yPosition: d,
         height: r
       }), i || n) {
-        const g = n ? 0.5 : 2, y = f + this.barChartHeight / 2;
-        m.append("line").classed(je.milestoneLine, !0).attr("x1", 0).attr("x2", this.timeline.offsetWidth).attr("y1", y).attr("y2", y).style("stroke", o).style("stroke-width", g);
+        const m = n ? 0.5 : 2, g = d + this.barChartHeight / 2;
+        f.append("line").classed(je.milestoneLine, !0).attr("x1", 0).attr("x2", this.timeline.offsetWidth).attr("y1", g).attr("y2", g).style("stroke", o).style("stroke-width", m);
       }
       this.drawBars({
         events: u,
         color: o,
-        gElement: m,
-        yPosition: f,
+        gElement: f,
+        yPosition: d,
         type: s,
         dots: n,
         dotsSize: a
@@ -23190,8 +23218,8 @@ const Ih = _h.exports, G = {
         color: o,
         label: c,
         type: s,
-        gElement: m,
-        yPosition: f,
+        gElement: f,
+        yPosition: d,
         height: r
       });
     },
@@ -23236,13 +23264,12 @@ const Ih = _h.exports, G = {
     },
     getMilestoneGroupYPosition(s) {
       let e = 0;
-      for (const [i, r] of Object.entries(this.milestonesGroups)) {
-        if (i === s)
+      for (const [t, i] of Object.entries(this.milestonesGroups)) {
+        if (t === s)
           break;
-        e += r.height || this.barChartHeight;
+        e += i.height || this.barChartHeight;
       }
-      const t = this.hasChart ? this.chartHeight : 0;
-      return Object.keys(this.barGroups).length * this.barChartHeight + this.combinedXAxesHeight + t + e;
+      return this.combinedXAxesHeight + this.milestonesYOffset + e;
     },
     updateMilestonesPositions() {
       Object.entries(this.milestonesGroups).forEach(([s, e]) => {