WIP - loading graph

InvenTree/InvenTree/static/script/chartjs-adapter-moment.js

@@ -0,0 +1,8 @@
+/*!
+  * chartjs-adapter-moment v1.0.0
+  * https://www.chartjs.org
+  * (c) 2021 chartjs-adapter-moment Contributors
+  * Released under the MIT license
+  */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("moment"),require("chart.js")):"function"==typeof define&&define.amd?define(["moment","chart.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).moment,e.Chart)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=n(e);const a={datetime:"MMM D, YYYY, h:mm:ss a",millisecond:"h:mm:ss.SSS a",second:"h:mm:ss a",minute:"h:mm a",hour:"hA",day:"MMM D",week:"ll",month:"MMM YYYY",quarter:"[Q]Q - YYYY",year:"YYYY"};t._adapters._date.override("function"==typeof f.default?{_id:"moment",formats:function(){return a},parse:function(e,t){return"string"==typeof e&&"string"==typeof t?e=f.default(e,t):e instanceof f.default||(e=f.default(e)),e.isValid()?e.valueOf():null},format:function(e,t){return f.default(e).format(t)},add:function(e,t,n){return f.default(e).add(t,n).valueOf()},diff:function(e,t,n){return f.default(e).diff(f.default(t),n)},startOf:function(e,t,n){return e=f.default(e),"isoWeek"===t?(n=Math.trunc(Math.min(Math.max(0,n),6)),e.isoWeekday(n).startOf("day").valueOf()):e.startOf(t).valueOf()},endOf:function(e,t){return f.default(e).endOf(t).valueOf()}}:{})}));
+//# sourceMappingURL=chartjs-adapter-moment.min.js.map

InvenTree/part/templates/part/detail.html

@@ -425,6 +425,11 @@
 {% block js_ready %}
     {{ block.super }}
 
+    // Load the "scheduling" tab
+    onPanelLoad('scheduling', function() {
+        loadPartSchedulingChart('part-schedule-chart', {{ part.pk }});
+    });
+
     // Load the "suppliers" tab
     onPanelLoad('suppliers', function() {
 

InvenTree/part/templates/part/part_scheduling.html

@@ -1,4 +1,6 @@
 {% load i18n %}
 {% load inventree_extras %}
 
-<canvas id='schedule-chart' width='100%' height='400'></canvas>
+<div id='part-schedule' style='max-height: 300px;'>
+    <canvas id='part-schedule-chart' width='100%' style='max-height: 300px;'></canvas>
+</div>

InvenTree/templates/base.html

@@ -153,8 +153,10 @@
 <script type="text/javascript" src="{% static 'fullcalendar/main.js' %}"></script>
 <script type="text/javascript" src="{% static 'fullcalendar/locales-all.js' %}"></script>
 <script type="text/javascript" src="{% static 'select2/js/select2.full.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/chart.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/moment.js' %}"></script>
-<script type='text/javascript' src="{% static 'script/chart.min.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/chartjs-adapter-moment.js' %}"></script>
+    
 <script type='text/javascript' src="{% static 'script/clipboard.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>
 

InvenTree/templates/js/translated/part.js

@@ -1958,6 +1958,111 @@ function initPriceBreakSet(table, options) {
 }
 
 
+function loadPartSchedulingChart(canvas_id, part_id) {
+
+    var part_info = null;
+
+    // First, grab updated data for the particular part
+    inventreeGet(`/api/part/${part_id}/`, {}, {
+        async: false,
+        success: function(response) {
+            part_info = response;
+        }
+    });
+
+    var today = moment();
+
+    // Create an initial entry, using the available quantity
+    var stock_schedule = [
+        {
+            x: today.format("YYYY-MM-DD"),
+            y: part_info.in_stock,
+        }
+    ];
+
+    for (var idx = 0; idx < 10; idx++) {
+        stock_schedule.push({
+            x: today.clone().add(idx, "days").format("YYYY-MM-DD"),
+            y: part_info.in_stock + idx * 2,
+            label: `data at ${idx}`,
+        });
+    }
+
+    // Extract purchase order information from the server
+    inventreeGet(
+        `/api/order/po-line/`,
+        {
+            pending: true,
+            base_part: part_id,
+            order_detail: true,
+        },
+        {
+            success: function(orders) {
+                console.log("orders:");
+                console.log(orders);
+
+                orders.forEach(function(order) {
+                    var target_date = order.order_detail.target_date;
+
+                    if (target_date) {
+                        var td = moment(target_date);
+
+                        console.log("target date:", target_date);
+
+                        if (td >= today) {
+                            console.log("this is in the future!");
+                        } else {
+                            console.log("this is in the past");
+                        }
+                    }
+                });
+            }
+        }
+    );
+
+    var context = document.getElementById(canvas_id);
+
+    const data = {
+        datasets: [{
+          label: 'Scatter Dataset',
+          data: stock_schedule,
+          backgroundColor: 'rgb(255, 99, 132)'
+        }],
+    };
+
+    return new Chart(context, {
+        type: 'scatter',
+        data: data,
+        options: {
+            showLine: true,
+            stepped: true,
+            scales: {
+                x: {
+                    type: 'time',
+                    min: today.format(),
+                    position: 'bottom',
+                    time: {
+                        unit: 'day',
+                    },
+                },
+                y: {
+                    beginAtZero: true,
+                }
+            },
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: function(item) {
+                            return item.raw.label;
+                        }
+                    }
+                }
+            },
+        }
+    });
+}
+
+
 function loadStockPricingChart(context, data) {
     return new Chart(context, {
         type: 'bar',