Página Principal Explorar Ajuda
Iniciar Sessão
LInE
/
ivprog_log_analysis
4
0
Fork 1
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

Create README

Implement css styles for noUiSlider and heatmap
Lucas de Souza há 5 anos atrás
pai
1722100d00
commit
1d79fcd293
10 ficheiros alterados com 70 adições e 11 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 25 0
      README.md
  2. 2 1
      dist/line_heatmap.js
  3. 1 0
      dist/line_heatmap.js.map
  4. 2 0
      dist/style.css
  5. 23 0
      index.html
  6. 2 1
      package.json
  7. 9 5
      src/heatContainer.js
  8. 1 1
      src/index.js
  9. 3 2
      src/lineHeatmap.js
  10. 2 1
      webpack.config.js

+ 25 - 0
README.md
Ver Ficheiro 

@@ -0,0 +1,25 @@
 
+# Instalação
 
+Inclua os arquivos dist/style.css e line_heatmap.js no seu arquivo HTML
 
+
 
+# Uso
 
+Inclua o seguinte código na página ou em algum outros script. Note que div_id não possui '#' e que a função init recebe como parametro uma string onde cada linha é uma entrada do log.
 
+```javascript
 
+  <script>
 
+    line_heatmap.Container.init(div_id, log_string_itracker);
 
+  </script>
 
+```
 
+Você também deve incluir a seguinte regra css
 
+```css
 
+    #line-heatmap-canvas { width:60%; height:60%;}
 
+```
 
+
 
+# Modificações
 
+Para alterar o código é necessário ter a última versão no npm. Apenas execute *npm install* para instalar todas as dependências.
 
+
 
+# Previsualização
 
+```
 
+  npm install
 
+  npm run build
 
+  npm run start
 
+```
 
+Acesse o servidor de testes em 127.0.0.1:8080

Diff do ficheiro suprimidas por serem muito extensas
+ 2 - 1
dist/line_heatmap.js


Diff do ficheiro suprimidas por serem muito extensas
+ 1 - 0
dist/line_heatmap.js.map


Diff do ficheiro suprimidas por serem muito extensas
+ 2 - 0
dist/style.css


+ 23 - 0
index.html
Ver Ficheiro 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" href="dist/style.css">
 
+  <style>
 
+    #line-heatmap-canvas { width:60%; height:60%; position:absolute; }
 
+  </style>
 
+  <title>Test</title>
 
+</head>
 
+<body>
 
+  <div>
 
+    <div id="hea">
 
+    </div>
 
+  </div>
 
+  <script src="dist/line_heatmap.js"></script>
 
+  <script>
 
+    line_heatmap.Container.init('hea',"100,200,1,0\n100,200,1,0\n100,200,1,0\n100,200,1,0\n250,350,1,0\n250,350,1,0\n250,350,1,0\n250,350,1,0\n250,350,1,0");
 
+  </script>
 
+</body>
 
+</html>

+ 2 - 1
package.json
Ver Ficheiro 

@@ -6,7 +6,8 @@
 
   "scripts": {
 
     "test": "echo \"Error: no test specified\" && exit 1",
 
     "build": "webpack --config webpack.config.js",
 
-    "watch": "webpack --watch"
 
+    "watch": "webpack --watch",
 
+    "start": "http-server"
 
   },
 
   "repository": {
 
     "type": "git",

+ 9 - 5
src/heatContainer.js
Ver Ficheiro 

@@ -2,11 +2,11 @@ import LineHeatmap from "./lineHeatmap";
 
 import "nouislider";
 
 
 const template = `<div>
 
-  <div class='line-heatmap-controls'>
 
+  <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 id="line-heatmap-canvas">
 
   </div>
 
 </div>
 
 `;
 
@@ -19,6 +19,7 @@ function init (elementId, logString) {
 
   const logData = logTransform(logString);
 
   // create container
 
   const heatmap = new LineHeatmap('line-heatmap-canvas');
 
+  heatmap.create();
 
   heatmap.setTrackData(logData);
 
 
   const html5Slider = document.getElementById('line-heatmap-slider');
 
@@ -26,6 +27,7 @@ function init (elementId, logString) {
 
       start: [1, logData.length],
 
       connect: true,
 
       margin: 1,
 
+      step: 1,
 
       range: {
 
           'min': 1,
 
           'max': logData.length
 
@@ -38,9 +40,11 @@ function init (elementId, logString) {
 
   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);
 
+    const logValues = this.get();
 
+    console.log(logValues);
 
+    const newData = stateObject['data'].slice(+logValues[0]-1, +logValues[1] + 1);
 
+    console.log(newData);
 
+    stateObject['heatmap'].setTrackData(newData);
 
   });
 
 }

+ 1 - 1
src/index.js
Ver Ficheiro 

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

+ 3 - 2
src/lineHeatmap.js
Ver Ficheiro 

@@ -11,8 +11,9 @@ export default class LineHeatmap {
 
     let myConfig = {
 
       container: document.getElementById(this.ID)
 
     }
 
-   // myConfig = Object.assign(myConfig, config);
 
-    //this.heatmap = Heatmap.create(myConfig);
 
+    myConfig = Object.assign(myConfig, config);
 
+    this.heatmap = Heatmap.create(myConfig);
 
+    console.log(this.heatmap);
 
   }
 
 
   setTrackData (data) {

+ 2 - 1
webpack.config.js
Ver Ficheiro 

@@ -28,5 +28,6 @@ module.exports = {
 
     new webpack.ProvidePlugin({
 
       noUiSlider: 'nouislider'
 
     })
 
-  ]
 
+  ],
 
+  devtool: 'source-map'
 
 };