Build modified streamline images

The official image from streamline does not currently work for the arm64
platform. As a temporary measure, the source code and docker build scripts
have been lifted from the official images and are used to build locally.

Some additional modifications are made to reduce overall image size, these
are documented in docker/README.md

docker/streamline-src/public/elite/js/flot-data.js

@@ -0,0 +1,453 @@
+// Real Time chart
+        
+
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+
+            if (data.length > 0)
+                data = data.slice(1);
+
+            // Do a random walk
+
+            while (data.length < totalPoints) {
+
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+
+                data.push(y);
+            }
+
+            // Zip the generated y values with the x values
+
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]])
+            }
+
+            return res;
+        }
+
+        // Set up the control widget
+
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 3000) {
+                    updateInterval = 3000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+
+        var plot = $.plot("#placeholder", [ getRandomData() ], {
+            series: {
+                shadowSize: 0   // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            },
+            colors: ["#fb9678"],
+            grid: {
+                color: "#AFAFAF",
+                hoverable: true,
+                borderWidth: 0,
+                backgroundColor: '#FFF'
+            },
+            tooltip: true,
+            tooltipOpts: {
+                content: "Y: %y",
+                defaultTheme: false
+            }
+        
+
+        });
+
+        function update() {
+
+            plot.setData([getRandomData()]);
+
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+
+        update();
+
+  //Flot Line Chart
+$(document).ready(function() {
+    console.log("document ready");
+    var offset = 0;
+    plot();
+
+    function plot() {
+        var sin = [],
+            cos = [];
+        for (var i = 0; i < 12; i += 0.2) {
+            sin.push([i, Math.sin(i + offset)]);
+            cos.push([i, Math.cos(i + offset)]);
+        }
+
+        var options = {
+            series: {
+                lines: {
+                    show: true
+                },
+                points: {
+                    show: true
+                }
+            },
+
+            grid: {
+                hoverable: true //IMPORTANT! this is needed for tooltip to work
+            },
+            yaxis: {
+                min: -1.2,
+                max: 1.2
+            },
+              colors: ["#fb9678", "#01c0c8"],   
+            grid: {
+                color: "#AFAFAF",
+                hoverable: true,
+                borderWidth: 0,
+                backgroundColor: '#FFF'
+            },
+            tooltip: true,
+            tooltipOpts: {
+                content: "'%s' of %x.1 is %y.4",
+                shifts: {
+                    x: -60,
+                    y: 25
+                }
+            }
+        };
+
+        var plotObj = $.plot($("#flot-line-chart"), [{
+                data: sin,
+                label: "sin(x)",
+               
+            }, {
+                data: cos,
+                label: "cos(x)"
+            }],
+            options);
+    }
+});      
+//Flot Pie Chart
+$(function() {
+
+    var data = [{
+        label: "Series 0",
+        data: 10,
+        color: "#4f5467",
+        
+    }, {
+        label: "Series 1",
+        data: 1,
+        color: "#00c292",
+    }, {
+        label: "Series 2",
+        data: 3,
+        color:"#01c0c8",
+    }, {
+        label: "Series 3",
+        data: 1,
+        color:"#fb9678",
+    }];
+
+    var plotObj = $.plot($("#flot-pie-chart"), data, {
+        series: {
+            pie: {
+                innerRadius: 0.5,
+                show: true
+            }
+        },
+        grid: {
+            hoverable: true
+        },
+        color: null,
+        tooltip: true,
+        tooltipOpts: {
+            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
+            shifts: {
+                x: 20,
+                y: 0
+            },
+            defaultTheme: false
+        }
+    });
+
+});
+//Flot Moving Line Chart
+
+$(function() {
+
+    var container = $("#flot-line-chart-moving");
+
+    // Determine how many data points to keep based on the placeholder's initial size;
+    // this gives us a nice high-res plot while avoiding more than one point per pixel.
+
+    var maximum = container.outerWidth() / 2 || 300;
+
+    //
+
+    var data = [];
+
+    function getRandomData() {
+
+        if (data.length) {
+            data = data.slice(1);
+        }
+
+        while (data.length < maximum) {
+            var previous = data.length ? data[data.length - 1] : 50;
+            var y = previous + Math.random() * 10 - 5;
+            data.push(y < 0 ? 0 : y > 100 ? 100 : y);
+        }
+
+        // zip the generated y values with the x values
+
+        var res = [];
+        for (var i = 0; i < data.length; ++i) {
+            res.push([i, data[i]])
+        }
+
+        return res;
+    }
+
+    //
+
+    series = [{
+        data: getRandomData(),
+
+        lines: {
+            fill: true
+        }
+    }];
+
+    //
+
+    var plot = $.plot(container, series, {
+        colors: ["#01c0c8"],
+        grid: {
+            borderWidth: 0,
+            minBorderMargin: 20,
+            labelMargin: 10,
+            backgroundColor: {
+                colors: ["#fff", "#fff"]
+            },
+            margin: {
+                top: 8,
+                bottom: 20,
+                left: 20
+            },
+
+            markings: function(axes) {
+                var markings = [];
+                var xaxis = axes.xaxis;
+                for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 1) {
+                    markings.push({
+                        xaxis: {
+                            from: x,
+                            to: x + xaxis.tickSize
+                        },
+                        color: "#fff"
+                    });
+                }
+                return markings;
+            }
+        },
+        xaxis: {
+            tickFormatter: function() {
+                return "";
+            }
+        },
+        yaxis: {
+            min: 0,
+            max: 110
+        },
+        legend: {
+            show: true
+        }
+    });
+
+    // Update the random dataset at 25FPS for a smoothly-animating chart
+
+    setInterval(function updateRandom() {
+        series[0].data = getRandomData();
+        plot.setData(series);
+        plot.draw();
+    }, 40);
+
+});
+
+//Flot Bar Chart
+
+$(function() {
+
+    var barOptions = {
+        series: {
+            bars: {
+                show: true,
+                barWidth: 43200000
+            }
+        },
+        xaxis: {
+            mode: "time",
+            timeformat: "%m/%d",
+            minTickSize: [2, "day"]
+        },
+        grid: {
+            hoverable: true
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+                color: "#AFAFAF",
+                hoverable: true,
+                borderWidth: 0,
+                backgroundColor: '#FFF'
+            },
+        tooltip: true,
+        tooltipOpts: {
+            content: "x: %x, y: %y"
+        }
+    };
+    var barData = {
+        label: "bar",
+        color: "#fb9678",
+        data: [
+            [1354521600000, 1000],
+            [1355040000000, 2000],
+            [1355223600000, 3000],
+            [1355306400000, 4000],
+            [1355487300000, 5000],
+            [1355571900000, 6000]
+        ]
+    };
+    $.plot($("#flot-bar-chart"), [barData], barOptions);
+
+});
+// sales bar chart
+
+    $(function() {
+        //some data
+        var d1 = [];
+        for (var i = 0; i <= 10; i += 1)
+            d1.push([i, parseInt(Math.random() * 60)]);
+
+        var d2 = [];
+        for (var i = 0; i <= 10; i += 1)
+            d2.push([i, parseInt(Math.random() * 40)]);
+
+        var d3 = [];
+        for (var i = 0; i <= 10; i += 1)
+            d3.push([i, parseInt(Math.random() * 25)]);
+
+        var ds = new Array();
+
+        ds.push({
+            label : "Data One",
+            data : d1,
+            bars : {
+                order : 1
+            }
+        });
+        ds.push({
+            label : "Data Two",
+            data : d2,
+            bars : {
+                order : 2
+            }
+        });
+        ds.push({
+            label : "Data Three",
+            data : d3,
+            bars : {
+                order : 3
+            }
+        });
+
+        var stack = 0,
+            bars = true,
+            lines = true,
+            steps = true;
+
+        var options = {
+            bars : {
+                show : true,
+                barWidth : 0.2,
+                fill : 1
+            },
+            grid : {
+                show : true,
+                aboveData : false,
+                labelMargin : 5,
+                axisMargin : 0,
+                borderWidth : 1,
+                minBorderMargin : 5,
+                clickable : true,
+                hoverable : true,
+                autoHighlight : false,
+                mouseActiveRadius : 20,
+                borderColor : '#f5f5f5'
+            },
+            series : {
+                stack : stack
+            },
+            legend : {
+                position : "ne",
+                margin : [0, 0],
+                noColumns : 0,
+                labelBoxBorderColor : null,
+                labelFormatter : function(label, series) {
+                    // just add some space to labes
+                    return '' + label + '&nbsp;&nbsp;';
+                },
+                width : 30,
+                height : 5
+            },
+            yaxis : {
+                tickColor : '#f5f5f5',
+                font : {
+                    color : '#bdbdbd'
+                }
+            },
+            xaxis : {
+                tickColor : '#f5f5f5',
+                font : {
+                    color : '#bdbdbd'
+                }
+            },
+            colors : ["#4F5467", "#01c0c8", "#fb9678"],
+            tooltip : true, //activate tooltip
+            tooltipOpts : {
+                content : "%s : %y.0",
+                shifts : {
+                    x : -30,
+                    y : -50
+                }
+            }
+        };
+
+        $.plot($(".sales-bars-chart"), ds, options);
+    });
+
+