initial commit

.gitignore

@@ -0,0 +1,36 @@
+#compiled files
+#/build
+
+# dependencies
+/node_modules
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+grammar/**/.antlr/
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "line-heatmap",
+  "version": "1.0.0",
+  "description": "heatmap.js and noUi integration to create an iTracker heatmap",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js",
+    "watch": "webpack --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://200.144.254.107/git/LInE/ivprog_log_analysis.git"
+  },
+  "author": "Lucas de Souza",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "babel-loader": "^8.0.5",
+    "terser": "^3.14.1",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1"
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.3.1",
+    "heatmap.js": "^2.0.5",
+    "nouislider": "^12.1.0"
+  }
+}

src/heatContainer.js

@@ -0,0 +1,75 @@
+import LineHeatmap from "./lineHeatmap";
+import "nouislider";
+
+const template = `<div>
+  <div class='line-heatmap-controls'>
+    <p>Cade o tempo no log?</p>
+    <div id="line-heatmap-slider"></div>
+  </div>
+  <div id='line-heatmap-canvas>
+  </div>
+</div>
+`;
+
+const stateObject = {};
+
+function init (elementId, logString) {
+  const el = document.getElementById(elementId);
+  el.innerHTML = template;
+  const logData = logTransform(logString);
+  // create container
+  const heatmap = new LineHeatmap('line-heatmap-canvas');
+  heatmap.setTrackData(logData);
+
+  const html5Slider = document.getElementById('line-heatmap-slider');
+  noUiSlider.create(html5Slider, {
+      start: [1, logData.length],
+      connect: true,
+      margin: 1,
+      range: {
+          'min': 1,
+          'max': logData.length
+      }
+  });
+  
+  stateObject['container'] = el;
+  stateObject['heatmap'] = heatmap;
+  stateObject['data'] = logData;
+  stateObject['slider'] = html5Slider;
+
+  html5Slider.noUiSlider.on('update', function (values, handle) {
+    const logValues = html5Slider.get();
+    const newData = stateObject['data'].slice(+logValues[0], +logValues[1] + 1);
+    heatmap.setTrackData(newData);
+  });
+}
+
+function updateLogString (logString) {
+  const logData = logTransform(logString);
+  stateObject['data'] = logData;
+  stateObject['heatmap'].noUiSlider.updateOptions({
+    range: {
+        'min': 1,
+        'max': logData.length
+    }
+  });
+}
+
+function logTransform (logString) {
+  const data = logString.split("\n")
+  .filter(v => v.split(',').length > 3)
+  .map(v => {
+    const o = JSON.parse('[' + v + ']');
+    return {
+      x: o[0],
+      y: o[1],
+      value: 1
+    };
+  });
+  return data;
+}
+
+export default {
+  init,
+  updateLogString
+}

src/index.js

@@ -0,0 +1,7 @@
+import Container from "./heatContainer";
+import LineHeatmap from "./lineHeatmap";
+
+export default {
+  Container,
+  LineHeatmap
+}

src/lineHeatmap.js

@@ -0,0 +1,23 @@
+import Heatmap from "heatmap.js";
+
+export default class LineHeatmap {
+
+  constructor (elementID) {
+    this.ID = elementID;
+    this.heatmap = null;
+  }
+
+  create (config = {}) {
+    let myConfig = {
+      container: document.getElementById(this.ID)
+    }
+   // myConfig = Object.assign(myConfig, config);
+    //this.heatmap = Heatmap.create(myConfig);
+  }
+
+  setTrackData (data) {
+    data.forEach(point => {
+      this.heatmap.addData(point);
+    });
+  }
+}

webpack.config.js

@@ -0,0 +1,32 @@
+const path = require("path");
+const webpack = require('webpack');
+
+module.exports = {
+  entry: "./src/index.js",
+  mode: "production",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "line_heatmap.js",
+    library: 'line_heatmap',
+    libraryTarget: 'umd'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"]
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      noUiSlider: 'nouislider'
+    })
+  ]
+};