@osfarm/itineraire-technique 1.1.2 → 1.1.4

package/css/styles-rendering.css

@@ -1 +1 @@
-div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer .left-transcript{display:block}div.mainITKContainer .chart-div{width:50%}div.mainITKContainer .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer .left-transcript{display:block;width:40%}div.mainITKContainer .chart-div{width:60%}div.mainITKContainer .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.highlighted{box-shadow:0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));background-color:#f0f3f5}div.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}.rotation-tooltip{width:400px}/*# sourceMappingURL=styles-rendering.css.map */
+div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer .left-transcript{display:block}div.mainITKContainer .chart-div{width:50%}div.mainITKContainer .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer .left-transcript{display:block;width:40%}div.mainITKContainer .chart-div{width:60%}div.mainITKContainer .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.highlighted{box-shadow:0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));background-color:#f0f3f5}div.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}.rotation-tooltip{max-width:400px}/*# sourceMappingURL=styles-rendering.css.map */

package/editor.html

@@ -663,11 +663,11 @@
                     updateSelectedStep();
                 }
         
-                let startDate = new Date();
+                let startDate = getRotationEndDate();
                 if (data.average_sowing_date && selectedStep.step.useDefaultStartDate) {
                     // data.average_sowing_date is in MM-DD format, we need to convert it to YYYY-MM-DD
                     // for the current year
-                    let currentYear = new Date().getFullYear();
+                    let currentYear = startDate.getFullYear();
                     startDate = new Date(`${currentYear}-${data.average_sowing_date}`);
                     // If the start date is before today, it means the crop starts next year
                     if (startDate < new Date()) {
@@ -680,7 +680,7 @@
                 if (data.end_of_season && selectedStep.step.useDefaultEndDate) {
                     // data.end_of_season is in MM-DD format, we need to convert it to YYYY-MM-DD
                     // for the current year
-                    let currentYear = new Date().getFullYear();
+                    let currentYear = startDate.getFullYear();
                     let endDate = new Date(`${currentYear}-${data.end_of_season}`);
                     // If the end date is before the start date, it means the crop ends the next year
                     if (endDate < startDate) {

package/js/chart-render.js

@@ -13,13 +13,13 @@ class RotationRenderer {
         if (Array.isArray(rotationData)) {
             this.hasTimeline = true;
             rotationData = rotationData.map((item) => {
-                return this.fixRotationData(item);
+                this.fixRotationData(item);
             });
             this.chartOptions = rotationData[0].options;
         }
         else {
             this.hasTimeline = false;
-            rotationData = this.fixRotationData(rotationData);
+            this.fixRotationData(rotationData);
             this.chartOptions = rotationData.options;
         }
 
@@ -320,7 +320,8 @@ class RotationRenderer {
                         interventionDays: intervention.day,
                         itemStyle: {
                             color: item.color
-                        }
+                        },
+                        description: self.getHTMLFormatedDescription(intervention.description)
                     });
                 });
             }
@@ -664,24 +665,41 @@ class RotationRenderer {
             },
             data: []
         };
-
-        let totalMonths = 0;
-        let minDate = null;
+        
         let lastDayOfPreviousStep = null;
 
         steps.forEach((item, index) => {
+            
+            if (lastDayOfPreviousStep) {
+                // If there's a gap between the end of the previous step and the start of the new step, we add an dummy pie item:
+                let days = Math.round((item.startDate - lastDayOfPreviousStep) / (1000 * 60 * 60 * 24));
+                if (days > 0) {
+                    
+                    let pieItem = {
+                        'name': '',
+                        'value': days,
+                        'divId': '',
+                        'type': 'rotation_item',
+                        'startDate': new Date(lastDayOfPreviousStep.valueOf()), // Date de début
+                        'endDate': new Date(item.startDate.valueOf()), // Date de fin
+                        'duration': Math.round(days / 30),
+                        'description': '',
+                        'emphasis': {'disabled': true},
+                        'select': {'disabled': true},
+                        'tooltip': {'show': false},
+                        'itemStyle': {
+                            'color': '#FFFFFF'
+                        }                        
+                    };
+
+                    crops.data.push(pieItem);
+                }
+            }
+                
 
-            totalMonths += item.duration;
-
-            if (!lastDayOfPreviousStep)
-                lastDayOfPreviousStep = new Date(item.startDate.valueOf());
-
-            let days = Math.round((item.endDate - lastDayOfPreviousStep) / (1000 * 60 * 60 * 24));
+            let days = Math.round((item.endDate - item.startDate) / (1000 * 60 * 60 * 24));
             lastDayOfPreviousStep = new Date(item.endDate.valueOf());
 
-            if (!minDate)
-                minDate = new Date(item.startDate.valueOf());
-
             let pieItem = {
                 'name': item.name,
                 'value': days,
@@ -718,9 +736,8 @@ class RotationRenderer {
             itemStyle: {
                 borderColor: '#555',
                 color: '#FFFFFF',
-                borderWidth: 0
+                borderWidth: 1
             },
-            emphasis: { disabled: true },
             data: []
         };
 
@@ -740,23 +757,26 @@ class RotationRenderer {
         ];
 
         let monthsPerYear = new Map();
-        for (let month = 1; month <= totalMonths; month++) {
-            let monthName = minDate.toLocaleDateString(undefined, { month: 'short' });
-
-            let item = { 'name': monthName, 'value': 1 };
-            const year = minDate.getFullYear();
-
-            item.itemStyle = { color: monthsColorScale[minDate.getMonth()] };
-
-            months.data.push(item);
+        let startMonth = new Date(steps.at(0).startDate.valueOf());
+        while (startMonth < steps.at(-1).endDate) {
+            const monthName = startMonth.toLocaleDateString(undefined, { month: 'short' });
+            const year = startMonth.getFullYear();
+
+            months.data.push({ 
+                'name': monthName, 
+                'value': 1,
+                'itemStyle': {
+                    'color': monthsColorScale[startMonth.getMonth()]
+                } 
+            });
 
             let currentMonthsPerYear = monthsPerYear.get(year);
             if (currentMonthsPerYear == undefined)
                 currentMonthsPerYear = 0;
-            monthsPerYear.set(year, ++currentMonthsPerYear);
+                monthsPerYear.set(year, ++currentMonthsPerYear);
 
             // increment the current month
-            minDate.setMonth(minDate.getMonth() + 1);
+            startMonth.setMonth(startMonth.getMonth() + 1);
         }
 
         series.push(months);
@@ -782,7 +802,10 @@ class RotationRenderer {
         };
 
         monthsPerYear.forEach((nbMonths, year) => {
-            years.data.push({ 'name': year, 'value': nbMonths });
+            years.data.push({ 
+                'name': year, 
+                'value': nbMonths 
+            });
         });
 
         series.push(years);
@@ -841,7 +864,7 @@ class RotationRenderer {
                         else
                             dateString += ' (J' + days + ')';
 
-                        return params.marker + params.name + ' - ' + dateString;
+                        return params.marker + params.name + ' - ' + dateString + '<br>' + params.data.description;
                     }
                 }
             };
@@ -893,4 +916,13 @@ class RotationRenderer {
 
         return description;
     }
+
+    monthDiff(date1, date2) {
+        let anneeDiff = date2.getFullYear() - date1.getFullYear();
+        let moisDiff = date2.getMonth() - date1.getMonth();
+
+        return anneeDiff * 12 + moisDiff;
+    }
 }
+
+window.RotationRenderer = RotationRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osfarm/itineraire-technique",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
   "main": "editor.html",
   "scripts": {

package/scss/styles-rendering.scss

@@ -158,5 +158,5 @@ div.mainITKContainer {
 }
 
 .rotation-tooltip {
-    width: 400px;
+    max-width: 400px;
 }