predictionmachines · iliaeg · Apr 10, 2019 · Apr 11, 2019 · Apr 11, 2019 · Apr 11, 2019
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -196,6 +196,47 @@
                 }
             }
         },
+        webpack: {
+            config: {
+                mode: 'production',
+                entry: [
+                    './src/idd/idd.selfcontained.js'
+                ],
+                output: {
+                    filename: 'idd.selfcontained.js'
+                },
+                optimization: {
+                    minimize: true
+                },
+                stats: {
+                    warnings: false
+                },
+                module: {
+                    rules: [
+                        {
+                        test: /\.css$/,
+                        use: [
+                            'style-loader',
+                            'css-loader'
+                            ]
+                        },
+                        {
+                            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+                            use: {
+                                loader: 'base64-inline-loader',
+                                options: {
+                                    limit: 3000,
+                                    name: '[name].[ext]',
+
+                                    fallback: "file-loader",
+                                    name: '[name].[ext]',
+                                }
+                            } 
+                        },
+                    ]
+                }
+            }
+        },
     });
 
     grunt.loadNpmTasks('grunt-contrib-uglify');
@@ -205,8 +246,9 @@
     grunt.loadNpmTasks('grunt-base64');    
     grunt.loadNpmTasks("grunt-ts");
     grunt.loadNpmTasks('grunt-tsd');
+    grunt.loadNpmTasks('grunt-webpack');
 
     grunt.registerTask('update-tsd', ['tsd']);
-    grunt.registerTask('default', ['concat:heatmap_worker', 'base64', 'concat:heatmap_worker_embedded', 'concat:styles', 'concat:dist_ko', 'ts:dist', 'concat:dist', 'uglify', 'copy', 'concat:umd', 'concat:umdTs', 'ts:testGlobal', 'ts:test', 'jasmine']);
+    grunt.registerTask('default', ['concat:heatmap_worker', 'base64', 'concat:heatmap_worker_embedded', 'concat:styles', 'concat:dist_ko', 'ts:dist', 'concat:dist', 'uglify', 'copy', 'concat:umd', 'concat:umdTs', 'ts:testGlobal', 'ts:test', 'jasmine', 'webpack']);
     grunt.registerTask('test', ['jasmine']);
 };
diff --git a/README.md b/README.md
@@ -45,6 +45,12 @@ Interactive Data Display is available as Bower package. You can download IDD as
 
 `bower install idd`
 
+Using in offline projects
+-------------------------
+
+Interactive Data Display is available as self contained script.
+You may use idd.selfcontained.js in small or offline projects. This script contains all IDD dependencies inside and easy to import.
+
 Licensing
 ---------
 

diff --git a/package.json b/package.json
@@ -26,14 +26,22 @@
     "svg.js": "~2.3.6"
   },
   "devDependencies": {
+    "base64-inline-loader": "^1.1.1",
+    "css-loader": "^2.1.1",
     "grunt": "^0.4.5",
     "grunt-base64": "^0.1.0",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-jasmine": "^1.0.0",
     "grunt-contrib-uglify": "^0.9.1",
     "grunt-ts": "^5.2.0",
-    "grunt-tsd": "^0.1.0"
+    "grunt-tsd": "^0.1.0",
+    "grunt-webpack": "^3.1.3",
+    "jquery-ui-touch-punch": "^0.2.3",
+    "knockout": "^3.5.0",
+    "script-loader": "^0.7.2",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6"
   },
   "scripts": {
     "test": "grunt default test --verbose"

diff --git a/samples/Idd.SelfContained Dynamic Gradient Heatmap.html b/samples/Idd.SelfContained Dynamic Gradient Heatmap.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=Edge"/>
+    <title>Dynamic Gradient Heatmap</title>
+    <link rel="stylesheet" type="text/css" href="../src/css/IDDTheme.css"/>
+
+    <script src="../dist/idd.selfcontained.js"></script>
+
+    <script type="text/javascript">
+        var N = 200;
+        var M = 200;
+        var phase = 0.0;
+
+        // 1D arrays for grids x,y and 1D array for values f.
+        // Size of data array here is one less than size of the grid.
+        // HeatmapGraph will render in gradient mode, when grid of size N x M 
+        // defines N x M rectangular cells filled with gradient brush according to 
+        // corresponding 4 elements of the data array.
+        var x, y, f;
+        var heatmap;
+
+        $(document).ready(function () {
+            // Initializing chart
+            heatmap = InteractiveDataDisplay.asPlot('chart').get("heatmap");
+            // Allocating arrays
+            x = new Array(N);
+            y = new Array(M);
+            f = new Array(N);
+            for (var i = 0; i < N; i++) f[i] = new Array(M);
+            // Coordinate grid is constant and it is initialized once
+            for (var i = 0; i < N; i++) x[i] = -Math.PI + 2 * i * Math.PI / N;
+            for (var j = 0; j < M; j++) y[j] = -Math.PI / 2 + j * Math.PI / M;
+            // Running the model for the first time
+            modelRun();
+        });
+
+        function modelRun() {
+            // Compute next iteration and store it in data array
+            for (var i = 0; i < N; i++)
+                for (var j = 0; j < M; j++)
+                    f[i][j] = Math.sqrt(x[i] * x[i] + y[j] * y[j])
+                              * Math.abs(Math.cos(x[i] * x[i] + y[j] * y[j] + phase));
+            phase += 0.1;
+            heatmap.draw({ x: x, y: y, values: f });
+            setTimeout(modelRun, 1000 / 60.0);
+        }
+    </script>
+</head>
+<body>
+    <div id="chart" data-idd-plot="chart" style="width: 800px; height: 600px;">
+        <div data-idd-placement="top" style="text-align: center">Dynamic Heatmap</div>
+        <div id="heatmap" data-idd-plot="heatmap" data-idd-style="colorPalette:0=#00A8C6,#40C0CB,#F9F2E7,#AEE239,#8FBE00=3">
+        </div>
+    </div>
+</body>
+</html>
diff --git a/src/idd/idd.selfcontained.js b/src/idd/idd.selfcontained.js
@@ -0,0 +1,11 @@
+import  "script-loader!npm-modernizr"
+import  "script-loader!jquery"
+import  "script-loader!jqueryui"
+import  "script-loader!rx"
+import  "script-loader!svg.js"
+import  "script-loader!file-saver"
+import  "script-loader!jquery-ui-touch-punch"
+import  "script-loader!jquery-mousewheel"
+import  "script-loader!knockout"
+import  "script-loader!../../dist/idd.js"
+import  "../../dist/idd.css"