node-jsgraph - npm Package Compare versions

Comparing version 2.4.12 to 2.4.13

docs/source/_static/example_boilerplate.js

@@ -0,0 +0,0 @@

docs/source/_static/example_introduction.js

@@ -0,0 +0,0 @@ // Let's take the j-V curve of a solar cell as an example:

docs/source/_static/example_mutation.js

@@ -0,0 +0,0 @@ const graph = new Graph("graph-example-gettingstarted-2");

docs/source/_static/examples/axes/scientific/example1.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example2.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example3.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example4.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example5.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example6.js

@@ -0,0 +0,0 @@ const years = [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012];

docs/source/_static/examples/axes/scientific/example7.js

@@ -0,0 +0,0 @@ const g = new Graph('example-7');

docs/source/_static/examples/axes/spanning/example1.js

@@ -0,0 +0,0 @@ var dataColorado = [[2015, 17559.393], [2014, 17944.255], [2013, 18881.823], [2012, 19263.158], [2011, 18744.067], [2010, 18978.981], [2009, 17351.28], [2008, 18961.826], [2007, 19532.855], [2006, 19707.00899], [2005, 19013.11703], [2004, 19251.20903], [2003, 19595.836], [2002, 19446.04], [2001, 19764.973]];

docs/source/_static/examples/axes/spanning/example2.js

@@ -0,0 +0,0 @@ var dataColorado = [[2015, 17559.393], [2014, 17944.255], [2013, 18881.823], [2012, 19263.158], [2011, 18744.067], [2010, 18978.981], [2009, 17351.28], [2008, 18961.826], [2007, 19532.855], [2006, 19707.00899], [2005, 19013.11703], [2004, 19251.20903], [2003, 19595.836], [2002, 19446.04], [2001, 19764.973]];

docs/source/_static/examples/axes/spanning/example3.js

@@ -0,0 +0,0 @@ var dataColorado = [[2015, 17559.393], [2014, 17944.255], [2013, 18881.823], [2012, 19263.158], [2011, 18744.067], [2010, 18978.981], [2009, 17351.28], [2008, 18961.826], [2007, 19532.855], [2006, 19707.00899], [2005, 19013.11703], [2004, 19251.20903], [2003, 19595.836], [2002, 19446.04], [2001, 19764.973]];

docs/source/_static/examples/series/style/example1.js

@@ -0,0 +0,0 @@ const graph = new Graph("example-1");

docs/source/_static/examples/series/style/example2.js

@@ -0,0 +0,0 @@ const graph = new Graph("example-2");

docs/source/_static/examples/series/style/example3.js

@@ -0,0 +0,0 @@ const graph = new Graph("example-3");

docs/source/_static/examples/series/style/example4.js

@@ -0,0 +0,0 @@ const graph = new Graph("example-4");

examples/list.json

@@ -0,0 +0,0 @@ [

examples/package-lock.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/advanced.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/ellipse_rotation.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/polygon.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/serie.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/simple.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAnnotation/types.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAxes/minmax.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonAxes/style.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonBar/errorBars.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonBar/simple.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonBar/style.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/axis.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/color.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/errorBars.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/simple.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/style.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/style2.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonLine/styleAdvanced.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonPlugins/scatterSelect.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonPlugins/zoom.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/axis.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/defaultStyle.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/manyOptions.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/simple.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/style.json

@@ -0,0 +0,0 @@ {

examples/v2/jsonScatter/styleUnselected.json

@@ -0,0 +0,0 @@ {

examples/v2/legend/basic.json

@@ -18,3 +18,3 @@ {
       "unitDecade": true,
-      "logScale": true
+      "logScale": false
     }
@@ -21,0 +21,0 @@ },

examples/v2/other/manyannotations.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/other/mousemovedata.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/other/setJSON.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/other/timeaxis.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/other/timemodification.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/other/tracking_legend_common.js

@@ -1,93 +0,41 @@
-import Graph from '../../../src/graph.js';
+import Graph from '../../../dist/jsGraph.js';
 
 const domGraph = 'graph';
 
-var graph = new Graph( domGraph, {} );
+var graph = new Graph(domGraph, {});
 
-graph.resize( 400, 300 );
+graph.resize(400, 300);
 
 const data2 = [
-  1986,
-  9.48093,
-  1987,
-  9.50349,
-  1988,
-  9.57039,
-  1989,
-  9.67934,
-  1990,
-  9.82672,
-  1991,
-  10.0078,
-  1992,
-  10.2173,
-  1993,
-  10.4492,
-  1994,
-  10.6978,
-  1995,
-  10.9574,
-  1996,
-  11.223,
-  1997,
-  11.4901,
-  1998,
-  11.7548,
-  1999,
-  12.0142,
-  2000,
-  12.2657,
-  2001,
-  12.5076,
-  2002,
-  12.7383,
-  2003,
-  12.9565,
-  2004,
-  13.1612,
-  2005,
-  13.3514,
-  2006,
-  13.5259,
-  2007,
-  13.6838,
-  2008,
-  13.8238,
-  2009,
-  13.9449,
-  2010,
-  14.0458,
-  2011,
-  14.1255,
-  2012,
-  14.1832,
-  2013,
-  14.2181,
-  2014,
-  14.2298
+  1986, 9.48093, 1987, 9.50349, 1988, 9.57039, 1989, 9.67934, 1990, 9.82672,
+  1991, 10.0078, 1992, 10.2173, 1993, 10.4492, 1994, 10.6978, 1995, 10.9574,
+  1996, 11.223, 1997, 11.4901, 1998, 11.7548, 1999, 12.0142, 2000, 12.2657,
+  2001, 12.5076, 2002, 12.7383, 2003, 12.9565, 2004, 13.1612, 2005, 13.3514,
+  2006, 13.5259, 2007, 13.6838, 2008, 13.8238, 2009, 13.9449, 2010, 14.0458,
+  2011, 14.1255, 2012, 14.1832, 2013, 14.2181, 2014, 14.2298,
 ];
 
 const wave2 = Graph.newWaveform().setData(
-  data2.filter( ( el, index ) => index % 2 == 1 ),
-  data2.filter( ( el, index ) => index % 2 == 0 ).map( ( v ) => v + 0.5 )
+  data2.filter((el, index) => index % 2 == 1),
+  data2.filter((el, index) => index % 2 == 0).map((v) => v + 0.5),
 );
 
-const wave3 = wave2.duplicate().math( ( y, x ) => {
+const wave3 = wave2.duplicate().math((y, x) => {
   return 20 - y;
-} );
+});
 
 graph
-  .newSerie( 'Serie 1' )
+  .newSerie('Serie 1')
   .setLabel()
-  .setLineStyle( 3 )
-  .setLineColor( 'blue' )
-  .setWaveform( wave2 )
+  .setLineStyle(3)
+  .setLineColor('blue')
+  .setWaveform(wave2)
   .autoAxis();
 
 graph
-  .newSerie( 'Serie 2' )
+  .newSerie('Serie 2')
   .setLabel()
-  .setLineStyle( 2 )
-  .setLineColor( 'red' )
-  .setWaveform( wave3 )
+  .setLineStyle(2)
+  .setLineColor('red')
+  .setWaveform(wave3)
   .autoAxis();
@@ -97,17 +45,17 @@
 
-graph.tracking( {
+graph.tracking({
   mode: 'individual',
-  series: [ 'Serie 1', 'Serie 2' ],
+  series: ['Serie 1', 'Serie 2'],
   legend: true,
   legendType: 'common',
   serieOptions: {
-    withinPx: 20
-  }
-} );
+    withinPx: 20,
+  },
+});
 
-graph.getSerie( 'Serie 1' ).on( 'track', ( trackData ) => {
-  console.log( trackData );
-} );
+graph.getSerie('Serie 1').on('track', (trackData) => {
+  console.log(trackData);
+});
 /*graph.makeLegend().notHideable().setAutoPosition('bottom');
 graph.getLegend().update();*/
 graph.draw();

examples/v2/other/tracking_legend_useaxis.js

@@ -1,131 +0,82 @@
-import Graph from '../../../src/graph.js';
+import Graph from '../../../dist/jsGraph.js';
 
 const domGraph = 'graph';
 
-var graph = new Graph( domGraph, {} );
+var graph = new Graph(domGraph, {});
 
-graph.resize( 400, 300 );
+graph.resize(400, 300);
 
 const data2 = [
-  1986,
-  9.48093,
-  1987,
-  9.50349,
-  1988,
-  9.57039,
-  1989,
-  9.67934,
-  1990,
-  9.82672,
-  1991,
-  10.0078,
-  1992,
-  10.2173,
-  1993,
-  10.4492,
-  1994,
-  10.6978,
-  1995,
-  10.9574,
-  1996,
-  11.223,
-  1997,
-  11.4901,
-  1998,
-  11.7548,
-  1999,
-  12.0142,
-  2000,
-  12.2657,
-  2001,
-  12.5076,
-  2002,
-  12.7383,
-  2003,
-  12.9565,
-  2004,
-  13.1612,
-  2005,
-  13.3514,
-  2006,
-  13.5259,
-  2007,
-  13.6838,
-  2008,
-  13.8238,
-  2009,
-  13.9449,
-  2010,
-  14.0458,
-  2011,
-  14.1255,
-  2012,
-  14.1832,
-  2013,
-  14.2181,
-  2014,
-  14.2298
+  1986, 9.48093, 1987, 9.50349, 1988, 9.57039, 1989, 9.67934, 1990, 9.82672,
+  1991, 10.0078, 1992, 10.2173, 1993, 10.4492, 1994, 10.6978, 1995, 10.9574,
+  1996, 11.223, 1997, 11.4901, 1998, 11.7548, 1999, 12.0142, 2000, 12.2657,
+  2001, 12.5076, 2002, 12.7383, 2003, 12.9565, 2004, 13.1612, 2005, 13.3514,
+  2006, 13.5259, 2007, 13.6838, 2008, 13.8238, 2009, 13.9449, 2010, 14.0458,
+  2011, 14.1255, 2012, 14.1832, 2013, 14.2181, 2014, 14.2298,
 ];
 
 const wave2 = Graph.newWaveform().setData(
-  data2.filter( ( el, index ) => index % 2 == 1 ),
-  data2.filter( ( el, index ) => index % 2 == 0 ).map( ( v ) => v + 0.5 )
+  data2.filter((el, index) => index % 2 == 1),
+  data2.filter((el, index) => index % 2 == 0).map((v) => v + 0.5),
 );
 
-const wave3 = wave2.duplicate().math( ( y, x ) => {
-    return y + 0.2;
-  } );
-  const wave4 = wave3.duplicate().math( ( y, x ) => {
-    return y + 0.2;
-  } );
-    
-  wave4.concat( wave3.duplicate().invert().math( ( y, x ) => {
-    return y *1.1;
-  } ) );
+const wave3 = wave2.duplicate().math((y, x) => {
+  return y + 0.2;
+});
+const wave4 = wave3.duplicate().math((y, x) => {
+  return y + 0.2;
+});
 
+wave4.concat(
+  wave3
+    .duplicate()
+    .invert()
+    .math((y, x) => {
+      return y * 1.1;
+    }),
+);
+
 graph
-  .newSerie( 'Serie 1' )
+  .newSerie('Serie 1')
   .setLabel()
-  .setLineStyle( 3 )
-  .setLineColor( 'blue' )
-  .setWaveform( wave2 )
+  .setLineStyle(3)
+  .setLineColor('blue')
+  .setWaveform(wave2)
   .autoAxis();
 
-  
-  graph
-  .newSerie( 'Serie 2' )
+graph
+  .newSerie('Serie 2')
   .setLabel()
-  .setLineStyle( 2 )
-  .setLineColor( 'red' )
-  .setWaveform( wave3 )
+  .setLineStyle(2)
+  .setLineColor('red')
+  .setWaveform(wave3)
   .autoAxis();
 
-  
 graph
-.newSerie( 'Serie 3' )
-.setLabel()
-.setLineStyle( 3 )
-.setLineColor( 'green' )
-.setWaveform( wave4 )
-.autoAxis();
+  .newSerie('Serie 3')
+  .setLabel()
+  .setLineStyle(3)
+  .setLineColor('green')
+  .setWaveform(wave4)
+  .autoAxis();
 
-
 graph.gridsOff();
 
-graph.tracking( {
+graph.tracking({
   mode: 'individual',
-  series: [ 'Serie 1', 'Serie 2', 'Serie 3' ],
+  series: ['Serie 1', 'Serie 2', 'Serie 3'],
   legend: true,
-  legendType: 'independent',
+  legendType: 'common',
   serieOptions: {
-    withinPx: 20
-  }
-} );
+    withinPx: 20,
+  },
+  noLine: false,
+});
 
-graph.getSerie('Serie 1').options.tracking.useAxis = 'x';
-graph.getSerie('Serie 3').options.tracking.useAxis = 'y';
+//graph.getSerie('Serie 1').options.tracking.useAxis = 'x';
+//graph.getSerie('Serie 3').options.tracking.useAxis = 'y';
 
-graph.getSerie( 'Serie 1' ).on( 'track', ( trackData ) => {
-  console.log( trackData );
-} );
+graph.getSerie('Serie 1').on('track', (trackData) => {
+  console.log(trackData);
+});
 /*graph.makeLegend().notHideable().setAutoPosition('bottom');
@@ -132,0 +83,0 @@ graph.getLegend().update();*/

examples/v2/other/tracking_legend.js

@@ -1,93 +0,41 @@
-import Graph from '../../../src/graph.js';
+import Graph from '../../../dist/jsGraph.js';
 
 const domGraph = 'graph';
 
-var graph = new Graph( domGraph, {} );
+var graph = new Graph(domGraph, {});
 
-graph.resize( 400, 300 );
+graph.resize(400, 300);
 
 const data2 = [
-  1986,
-  9.48093,
-  1987,
-  9.50349,
-  1988,
-  9.57039,
-  1989,
-  9.67934,
-  1990,
-  9.82672,
-  1991,
-  10.0078,
-  1992,
-  10.2173,
-  1993,
-  10.4492,
-  1994,
-  10.6978,
-  1995,
-  10.9574,
-  1996,
-  11.223,
-  1997,
-  11.4901,
-  1998,
-  11.7548,
-  1999,
-  12.0142,
-  2000,
-  12.2657,
-  2001,
-  12.5076,
-  2002,
-  12.7383,
-  2003,
-  12.9565,
-  2004,
-  13.1612,
-  2005,
-  13.3514,
-  2006,
-  13.5259,
-  2007,
-  13.6838,
-  2008,
-  13.8238,
-  2009,
-  13.9449,
-  2010,
-  14.0458,
-  2011,
-  14.1255,
-  2012,
-  14.1832,
-  2013,
-  14.2181,
-  2014,
-  14.2298
+  1986, 9.48093, 1987, 9.50349, 1988, 9.57039, 1989, 9.67934, 1990, 9.82672,
+  1991, 10.0078, 1992, 10.2173, 1993, 10.4492, 1994, 10.6978, 1995, 10.9574,
+  1996, 11.223, 1997, 11.4901, 1998, 11.7548, 1999, 12.0142, 2000, 12.2657,
+  2001, 12.5076, 2002, 12.7383, 2003, 12.9565, 2004, 13.1612, 2005, 13.3514,
+  2006, 13.5259, 2007, 13.6838, 2008, 13.8238, 2009, 13.9449, 2010, 14.0458,
+  2011, 14.1255, 2012, 14.1832, 2013, 14.2181, 2014, 14.2298,
 ];
 
 const wave2 = Graph.newWaveform().setData(
-  data2.filter( ( el, index ) => index % 2 == 1 ),
-  data2.filter( ( el, index ) => index % 2 == 0 ).map( ( v ) => v + 0.5 )
+  data2.filter((el, index) => index % 2 == 1),
+  data2.filter((el, index) => index % 2 == 0).map((v) => v + 0.5),
 );
 
-const wave3 = wave2.duplicate().math( ( y, x ) => {
+const wave3 = wave2.duplicate().math((y, x) => {
   return 20 - y;
-} );
+});
 
 graph
-  .newSerie( 'Serie 1' )
+  .newSerie('Serie 1')
   .setLabel()
-  .setLineStyle( 3 )
-  .setLineColor( 'blue' )
-  .setWaveform( wave2 )
+  .setLineStyle(3)
+  .setLineColor('blue')
+  .setWaveform(wave2)
   .autoAxis();
 
 graph
-  .newSerie( 'Serie 2' )
+  .newSerie('Serie 2')
   .setLabel()
-  .setLineStyle( 2 )
-  .setLineColor( 'red' )
-  .setWaveform( wave3 )
+  .setLineStyle(2)
+  .setLineColor('red')
+  .setWaveform(wave3)
   .autoAxis();
@@ -97,17 +45,17 @@
 
-graph.tracking( {
+graph.tracking({
   mode: 'individual',
-  series: [ 'Serie 1', 'Serie 2' ],
+  series: ['Serie 1', 'Serie 2'],
   legend: true,
   legendType: 'independent',
   serieOptions: {
-    withinPx: 20
-  }
-} );
+    withinPx: 20,
+  },
+});
 
-graph.getSerie( 'Serie 1' ).on( 'track', ( trackData ) => {
-  console.log( trackData );
-} );
+graph.getSerie('Serie 1').on('track', (trackData) => {
+  console.log(trackData);
+});
 /*graph.makeLegend().notHideable().setAutoPosition('bottom');
 graph.getLegend().update();*/
 graph.draw();

examples/v2/other/tracking.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/reallife/20-errors.js

@@ -1,46 +0,41 @@
-import Graph from '../../../src/graph.js';
+import Graph, { SERIE_TYPE } from '../../../dist/jsGraph.js';
 
 const domGraph = 'graph';
 
-var graph = new Graph( domGraph, {}, {} );
+var graph = new Graph(domGraph, { close: true }, {});
 
-graph.resize( 400, 200 );
+graph.resize(400, 200);
 
-var axis = new ( Graph.getConstructor( 'graph.axis.x.bar' ) )();
+var axis = new (Graph.getConstructor('graph.axis.x.bar'))();
 var options = {};
-axis.init( graph, options );
-graph.setBottomAxis( axis, 0 );
+axis.init(graph, options);
+graph.setBottomAxis(axis, 0);
 
 axis.categories = [
   { title: 'Category 1', name: 'cat1' },
-  { title: 'Category 2', name: 'cat2' }
+  { title: 'Category 2', name: 'cat2' },
 ];
 
-var wave1 = Graph.newWaveformHash( { cat1: 5, cat2: 12 } );
-var wave2 = Graph.newWaveformHash( { cat1: 8, cat2: 10 } );
-var errorWave2 = Graph.newWaveformHash( { cat1: 0.5, cat2: 3 } );
-var errorWave1 = Graph.newWaveformHash( { cat1: 2, cat2: 4 } );
-wave1.setErrorBar( errorWave1, true );
-wave2.setErrorBar( errorWave2, true );
-
-var s1 = graph.newSerie( 'serie1', {}, Graph.SERIE_BAR );
+console.log(graph);
+var wave1 = Graph.newWaveformHash({ cat1: 5, cat2: 12 });
+var wave2 = Graph.newWaveformHash({ cat1: 8, cat2: 10 });
+var errorWave2 = Graph.newWaveformHash({ cat1: 0.5, cat2: 3 });
+var errorWave1 = Graph.newWaveformHash({ cat1: 2, cat2: 4 });
+wave1.setErrorBar(errorWave1, true);
+wave2.setErrorBar(errorWave2, true);
+var s1 = graph.newSerie('serie1', {}, SERIE_TYPE.BAR);
 s1.autoAxis();
+s1.setWaveform(wave1);
+s1.setLineColor('crimson').setFillColor('crimson').setFillOpacity(0.5);
+s1.setErrorBarStyle({ all: { strokeColor: 'crimson' } });
 
-s1.setWaveform( wave1 );
-s1.setLineColor( 'crimson' )
-  .setFillColor( 'crimson' )
-  .setFillOpacity( 0.5 );
-s1.setErrorBarStyle( { all: { strokeColor: 'crimson' } } );
-
-var s2 = graph.newSerie( 'serie2', {}, Graph.SERIE_BAR );
+var s2 = graph.newSerie('serie2', {}, SERIE_TYPE.BAR);
 s2.autoAxis();
 
-s2.setWaveform( wave2 );
-s2.setLineColor( 'DarkGreen' )
-  .setFillColor( 'DarkGreen' )
-  .setFillOpacity( 0.5 );
-s2.setErrorBarStyle( {
+s2.setWaveform(wave2);
+s2.setLineColor('DarkGreen').setFillColor('DarkGreen').setFillOpacity(0.5);
+s2.setErrorBarStyle({
   top: { strokeColor: 'DarkGreen' },
-  bottom: { strokeWidth: 3, strokeColor: 'DarkGreen' }
-} );
+  bottom: { strokeWidth: 3, strokeColor: 'DarkGreen' },
+});
 
@@ -57,4 +52,4 @@ /*
 
-graph.getYAxis().forceMin( 0 );
-axis.setSeries( s1, s2 );
+graph.getYAxis().forceMin(0);
+axis.setSeries(s1, s2);
 graph.draw();
@@ -61,0 +56,0 @@ /*

examples/v2/reallife/21-boxplot.js

@@ -1,7 +0,7 @@
-import Graph from '../../../src/graph.js';
+import Graph, { SERIE_TYPE } from '../../../dist/jsGraph.js';
 
 const domGraph = 'graph';
 
-var graph = new Graph( domGraph );
-graph.resize( 400, 300 );
+var graph = new Graph(domGraph);
+graph.resize(400, 300);
 
@@ -12,14 +12,15 @@ graph
     {
-      maxBoxWidth: 10
+      maxBoxWidth: 10,
+      orientation: 'y',
     },
-    Graph.SERIE_BOX
+    SERIE_TYPE.BOX,
   )
   .autoAxis()
-  .setData( [
-    { x: 0, Q1: -1, Q2: 2, Q3: 5, whiskers: [ -5, 10 ], outliers: [ -7 ] },
-    { x: 1, Q1: 5, Q2: 7, Q3: 15, whiskers: [ -3, 16 ], outliers: [ -5, 15 ] },
-    { x: 2, Q1: 3, Q2: 8, Q3: 9, whiskers: [ 1, 11 ], outliers: [ 0, -2, 12 ] },
-    { x: 3, Q1: -2, Q2: 1, Q3: 3, whiskers: [ -4, 6 ], outliers: [ -6, 8 ] }
-  ] );
+  .setData([
+    { x: 0, Q1: -1, Q2: 2, Q3: 5, whiskers: [-5, 10], outliers: [-7] },
+    { x: 1, Q1: 5, Q2: 7, Q3: 15, whiskers: [-3, 16], outliers: [-5, 15] },
+    { x: 2, Q1: 3, Q2: 8, Q3: 9, whiskers: [1, 11], outliers: [0, -2, 12] },
+    { x: 3, Q1: -2, Q2: 1, Q3: 3, whiskers: [-4, 6], outliers: [-6, 8] },
+  ]);
 
 graph.draw();

examples/v2/reallife/30-axisspan.js

@@ -0,0 +0,0 @@ define(function (require, exports, module) {

examples/v2/reallife/30-scatter.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/reallife/41-ei.js

@@ -0,0 +0,0 @@ define( function( require, exports, module ) {

examples/v2/reallife/50-gradient.js

@@ -0,0 +0,0 @@ define( function( require, exports, module ) {

examples/v2/reallife/52-gradient2.js

@@ -0,0 +0,0 @@ define( function( require, exports, module ) {

examples/v2/reallife/60-linedifference.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

examples/v2/reallife/61-scatterselection.js

@@ -0,0 +0,0 @@ import Graph from '../../../src/graph.js';

gruntfile.js

@@ -15,3 +15,3 @@ /* eslint-disable */
       options: {
-        files: ['package.json', 'bower.json'],
+        files: ['package.json'],
         updateConfigs: ['pkg'],
@@ -22,25 +22,7 @@ createTag: true,
         commitFiles: ['-a'],
-        runTasks: ['default']
-      }
+        runTasks: ['default'],
+      },
     },
 
-    sloc: {
-      graphs: {
-        files: {
-          './src/': ['**.js']
-        }
-      }
-    },
-
     copy: {
-
-      examples: {
-        files: {
-          './examples/node_modules/node-jsgraph/dist/jsgraph.js':
-            'dist/jsgraph.js',
-          './examples/node_modules/node-jsgraph/dist/jsgraph-es6.js':
-            'dist/jsgraph-es6.js'
-        }
-      },
-
       web: {
@@ -50,188 +32,17 @@ files: {
           './web/site/js/node-jsgraph/dist/jsgraph.min.js':
-            'dist/jsgraph.min.js'
-        }
+            'dist/jsgraph.min.js',
+        },
       },
 
-      visualizer: {
-        files: {
-          '../visualizer/src/components/jsgraph/dist/jsgraph-es6.js':
-            'dist/jsgraph-es6.js'
-        }
-      },
-
       doc: {
         files: {
-          'docs/source/_static/jsgraph.min.js':
-            'dist/jsgraph.min.js'
-        }
-      },
-
-
-    },
-
-    watch: {
-      scripts: {
-        files: ['src/**/*.js'],
-        tasks: ['default']
-      }
-    },
-
-    exec: {
-      npm_publish: 'npm publish'
-    },
-
-    rollup: {
-      distModule: {
-        options: {
-          format: 'es',
-          sourceMap: true,
-          plugins: [
-            babel({
-              babelrc: false,
-
-
-              presets: [
-                [
-                  '@babel/preset-env', { targets: { chrome: 80 } }
-                ]
-              ],
-
-
-              plugins: [
-                '@babel/plugin-proposal-optional-chaining',
-                '@babel/transform-exponentiation-operator',
-                [
-                  'inline-replace-variables',
-                  {
-                    __VERSION__: 'v<%= pkg.version %>'
-                  }
-                ]
-              ]
-            })
-          ]
+          'docs/source/_static/jsgraph.min.js': 'dist/jsgraph.min.js',
         },
-        files: {
-          'dist/jsgraph-module.js': 'src/graph.js'
-        }
-      }
-    },
-
-    webpack: {
-      dist: {
-        entry: ['@babel/polyfill', './src/graph.js'],
-        output: {
-          path: distPath,
-          filename: 'jsgraph.js',
-          library: 'Graph',
-          libraryTarget: 'umd'
-        },
-
-        optimization: {
-          minimize: false,
-        },
-
-        module: {
-          rules: [
-            {
-              test: /\.js$/,
-              exclude: /node_modules/,
-              loader: 'babel-loader',
-              options: {
-                presets: ['@babel/preset-env'].map(require.resolve),
-
-                plugins: [
-                  'add-module-exports',
-                  '@babel/plugin-proposal-optional-chaining',
-                  '@babel/transform-modules-umd',
-                  '@babel/transform-exponentiation-operator',
-                  [
-                    'inline-replace-variables',
-                    {
-                      __VERSION__: 'v<%= pkg.version %>'
-                    }
-                  ]
-                ],
-                babelrc: false
-              }
-            }
-          ]
-        }
       },
-
-      dist_es6: {
-        entry: './src/graph.js',
-        output: {
-          path: distPath,
-          filename: 'jsgraph-es6.js',
-          library: 'Graph',
-          libraryTarget: 'umd'
-        },
-
-        //  plugins: [new WebpackBeautifier({ jsdoc: true })],
-
-        module: {
-          rules: [
-            {
-              test: /\.js$/,
-              exclude: /node_modules/,
-              loader: 'babel-loader',
-              options: {
-
-                presets: [
-                  [
-                    '@babel/preset-env', { targets: { chrome: 80 } }
-                  ]
-                ],
-
-                plugins: [
-                  'add-module-exports',
-                  '@babel/plugin-proposal-optional-chaining',
-                  '@babel/transform-modules-umd',
-                  '@babel/transform-exponentiation-operator',
-                  [
-                    'inline-replace-variables',
-                    {
-                      __VERSION__: 'v<%= pkg.version %>'
-                    }
-                  ]
-                ],
-                babelrc: false
-              }
-            }
-          ]
-        }
-      }
     },
-
-    babel: {
-      minify: {
-        options: {
-          sourceMap: true,
-          comments: false,
-          presets: [
-            [
-              'minify',
-              {
-                builtIns: false,
-                evaluate: false,
-                mangle: false
-              }
-            ]
-          ],
-          babelrc: false
-        },
-        files: {
-          'dist/jsgraph.min.js': 'dist/jsgraph.js',
-          'dist/jsgraph-es6.min.js': 'dist/jsgraph-es6.js',
-          'dist/jsgraph-module.min.js': 'dist/jsgraph-module.js'
-        }
-      }
-    }
   });
 
   var fs = require('fs');
-  var beautify = require('js-beautify').js_beautify;
   var exec = require('child_process').exec;
 
-  grunt.loadNpmTasks('grunt-sloc');
   grunt.loadNpmTasks('grunt-bump');
@@ -242,12 +53,3 @@ grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-exec');
-  grunt.loadNpmTasks('grunt-webpack');
-  grunt.loadNpmTasks('grunt-babel');
-  grunt.loadNpmTasks('grunt-rollup');
 
-  grunt.registerTask('default', ['build', 'minify', 'copy:doc', 'copy:examples']);
-
-  grunt.registerTask('minify', 'Minifying distribution file', [
-    'babel:minify'
-  ]);
-
   grunt.registerTask('release', 'Make a new release', function () {
@@ -281,8 +83,5 @@ grunt.task.run('bump:prerelease:bump-only');
 
-  grunt.registerTask(
-    'examples',
-    'Builds new examples',
-    function () {
-      const ensureDirectoryExistence = filePath => {
-        /*
+  grunt.registerTask('examples', 'Builds new examples', function () {
+    const ensureDirectoryExistence = (filePath) => {
+      /*
         if (fs.existsSync(dirname)) {
@@ -292,8 +91,8 @@ return true;
         ensureDirectoryExistence(dirname);*/
-        const dirname = path.dirname(filePath);
-        fs.mkdirSync(dirname, { recursive: true });
-      };
+      const dirname = path.dirname(filePath);
+      fs.mkdirSync(dirname, { recursive: true });
+    };
 
-      const makeExample = el => {
-        return `
+    const makeExample = (el) => {
+      return `
 <!doctype html>
@@ -306,4 +105,6 @@ <html>
    
-        import Graph from '/src/graph.js'
-        const graph = Graph.fromJSON( ${fs.readFileSync(el.path)}, "graph", ( eventName, ...params ) => { console.log( eventName, params ); } );
+        import Graph from '/dist/jsGraph.js'
+        const graph = Graph.fromJSON( ${fs.readFileSync(
+          el.path,
+        )}, "graph", ( eventName, ...params ) => { console.log( eventName, params ); } );
         graph.draw();
@@ -314,7 +115,7 @@ graph.updateLegend();
 </html>`;
-      };
+    };
 
-      const makeExampleJS = el => {
-        // console.log(el.path.replace(/\\/g, "/",));
-        return `
+    const makeExampleJS = (el) => {
+      // console.log(el.path.replace(/\\/g, "/",));
+      return `
 <!doctype html>
@@ -326,36 +127,34 @@ <html>
     <script type="module">
-        import "${(`../../../${el.path.replace(/\\/g, "/")}`)}";
+        import "${`../../../${el.path.replace(/\\/g, '/')}`}";
         </script>
 </html>`;
-      };
+    };
 
-      const processTree = tree => {
-        tree.children.forEach(child => {
-          if (child.type == 'directory') {
-            processTree(child);
-          } else {
+    const processTree = (tree) => {
+      tree.children.forEach((child) => {
+        if (child.type == 'directory') {
+          processTree(child);
+        } else {
+          const path = child.path
+            .replace('v2', 'output')
+            .replace('.json', '.html')
+            .replace('.js', '.html');
 
-            const path = child.path
-              .replace('v2', 'output')
-              .replace('.json', '.html')
-              .replace('.js', '.html');
+          ensureDirectoryExistence(path);
+          let htmlFile;
 
-            ensureDirectoryExistence(path);
-            let htmlFile;
-
-            if (child.extension == '.js') {
-              htmlFile = makeExampleJS(child);
-            } else {
-              htmlFile = makeExample(child);
-            }
-            fs.writeFileSync(path, htmlFile);
+          if (child.extension == '.js') {
+            htmlFile = makeExampleJS(child);
+          } else {
+            htmlFile = makeExample(child);
           }
-        });
-      };
+          fs.writeFileSync(path, htmlFile);
+        }
+      });
+    };
 
-      const tree = dirTree('./examples/v2/', { extensions: /\.js(on)?/ });
-      processTree(tree);
-      console.log(tree);
-    }
-  );
+    const tree = dirTree('./examples/v2/', { extensions: /\.js(on)?/ });
+    processTree(tree);
+    console.log(tree);
+  });
 
@@ -380,3 +179,3 @@ grunt.registerTask('buildExamples', 'Builds new examples', function () {
           return '';
-        }
+        },
       );
@@ -387,3 +186,3 @@ example.codeShown = beautify(example.codeShown, {
         space_in_paren: true,
-        max_preserve_newlines: 2
+        max_preserve_newlines: 2,
       });
@@ -396,3 +195,3 @@
       'web/sources/_data/examples.json',
-      JSON.stringify(examples, undefined, '\t')
+      JSON.stringify(examples, undefined, '\t'),
     );
@@ -402,3 +201,3 @@ });
   grunt.registerTask('tutorials', 'Builds tutorials', function () {
-    exec('./node_modules/.bin/jsdoc -c jsdoc.json', err => {
+    exec('./node_modules/.bin/jsdoc -c jsdoc.json', (err) => {
       if (err) {
@@ -411,82 +210,2 @@ console.error(err);
   });
-
-  grunt.registerTask('build', [
-    'webpack:dist',
-    'webpack:dist_es6',
-    'rollup:distModule',
-    'copy:doc'
-  ]);
-  grunt.registerTask('visualizer', ['webpack:dist_es6', 'copy:visualizer']);
-  grunt.registerTask('candlelight', ['webpack:dist_es6', 'copy:candlelight']);
-  grunt.registerTask('web', ['webpack:dist_es6', 'copy:web']);
-
-  function WebpackBeautifier(options) {
-    this._options = options;
-  }
-
-  WebpackBeautifier.prototype.apply = function (compiler) {
-    var self = this;
-    compiler.plugin('done', function (stats) {
-      var json = stats.toJson({ assets: false, chunks: false, modules: true })
-        .modules;
-      json.map(function (el) {
-        //console.log( el );
-
-        if (el.name == 'multi main' || el.name.indexOf('~') > -1) {
-          return;
-        }
-
-        // Messing with ES6 features
-        /*
-                grunt.file.write(
-                  el.name,
-                  beautify(grunt.file.read(el.name), {
-                    indent_size: 2,
-                    preserve_newlines: true,
-                    space_in_paren: true,
-                    max_preserve_newlines: 2
-                  })
-                );*/
-
-      });
-
-      if (!self._options.jsdoc) {
-        return;
-      }
-      console.log('Parsing documentation...');
-      grunt.file.write(
-        'jsdoc.json',
-        JSON.stringify(
-          {
-            opts: {
-              destination: './web/doc/',
-              tutorials: 'tutorials',
-              template: 'util/doctemplate'
-            },
-
-            source: {
-              include: json.map(el => {
-                if (el.name == 'multi main' || el.name.indexOf('~') > -1) {
-                  return;
-                }
-
-                return el.name;
-              })
-            }
-          },
-          false,
-          '\t'
-        )
-      );
-
-      exec('./node_modules/.bin/jsdoc -c jsdoc.json', err => {
-        if (err) {
-          console.error(err);
-          return;
-        }
-
-        console.log('DONE');
-      });
-    });
-  };
 };

jsdoc.json

@@ -0,0 +0,0 @@ {

package.json

 {
   "name": "node-jsgraph",
   "description": "library that can be used to render scientific data in the form of graphs and charts",
-  "version": "2.4.12",
+  "version": "2.4.13",
   "scripts": {
     "build": "npx webpack",
+    "dev": "npx webpack --watch",
     "buildExamples": "grunt examples",
@@ -16,3 +17,3 @@ "doc": "git subtree push --prefix doc origin gh-pages",
   },
-  "main": "dist/jsgraph.js",
+  "main": "dist/jsGraph.js",
   "devDependencies": {
@@ -27,2 +28,4 @@ "@babel/core": "^7.2.2",
     "@babel/preset-typescript": "^7.13.0",
+    "@types/lodash": "^4.14.178",
+    "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
@@ -32,3 +35,6 @@ "dir-to-json": "0.0.3",
     "directory-tree": "^2.2.1",
-    "webpack": "^4.0.0",
+    "grunt": "^1.4.1",
+    "lodash": "^4.17.21",
+    "rollup-plugin-babel": "^4.4.0",
+    "webpack": "^5.65.0",
     "webpack-cli": "^4.6.0"
@@ -35,0 +41,0 @@ },

README.md

@@ -0,0 +0,0 @@ # jsGraph - Scientific data displayed in your browser

renderer/bar/simple.js

@@ -0,0 +0,0 @@ export default {

renderer/bar/style.js

@@ -0,0 +0,0 @@ export default {

renderer/line/axis.json

@@ -0,0 +0,0 @@ {

renderer/line/simple.json

@@ -0,0 +0,0 @@ {

renderer/line/style.js

@@ -0,0 +0,0 @@ module.exports = {

renderer/line/styleAdvanced.js

@@ -0,0 +0,0 @@ module.exports = {

renderer/scatter/axis.js

@@ -0,0 +0,0 @@ module.exports = {

renderer/scatter/simple.1.json

@@ -0,0 +0,0 @@ {

renderer/scatter/simple.json

@@ -0,0 +0,0 @@ {

renderer/scatter/style.js

@@ -0,0 +0,0 @@ module.exports = {

src/__tests__/graph.js

@@ -0,0 +0,0 @@ import assert from 'assert';

src/__tests__/graph.util.js

@@ -0,0 +0,0 @@ import {

src/build_utils/endfile.js

@@ -0,0 +0,0 @@

src/build_utils/exports.js

src/build_utils/startfile_minified.js

 /*! jsGraphs (c) 2014 Norman Pellet, MIT license, v@VERSION, Date: @DATE */

src/build_utils/startfile.js

@@ -0,0 +0,0 @@ /*!

src/dependencies/eventEmitter/.bower.json

@@ -0,0 +0,0 @@ {

src/dependencies/eventEmitter/bower.json

@@ -0,0 +0,0 @@ {

src/dependencies/eventEmitter/component.json

@@ -0,0 +0,0 @@ {

src/dependencies/eventEmitter/EventEmitter.js

@@ -0,0 +0,0 @@ /*!

src/dependencies/eventEmitter/README.md

@@ -0,0 +0,0 @@ # EventEmitter [![Gitter](https://badges.gitter.im/Join Chat.svg)][gitter]

src/graph.axis.x.bar.js

@@ -1,2 +0,2 @@
-import AxisX from './graph.axis.x.js';
+import AxisX from './graph.axis.x';
 
@@ -9,4 +9,4 @@ /**
 class AxisXBar extends AxisX {
-  constructor( graph, topbottom, options = {} ) {
-    super( graph, topbottom, options );
+  constructor(graph, topbottom, options = {}) {
+    super(graph, topbottom, options);
   }
@@ -20,3 +20,3 @@
    */
-  set categories( categories ) {
+  set categories(categories) {
     this._barCategories = categories;
@@ -30,9 +30,8 @@ return this;
       elements = this._barCategories;
-
-    if ( !this.series || this.series.length == 0 ) {
+    if (!this.series || this.series.length == 0) {
       this.autoSeries();
     }
 
-    this.forceMin( 0 );
-    this.forceMax( 1 );
+    this.forceMin(0);
+    this.forceMax(1);
 
@@ -43,32 +42,31 @@ this.cacheCurrentMin();
 
-    if ( !elements ) {
+    if (!elements) {
       return;
     }
 
-    if ( !Array.isArray( elements ) ) {
-      elements = [ elements ];
+    if (!Array.isArray(elements)) {
+      elements = [elements];
     }
 
     // this.drawInit();
-
     //var widthPerElement = width / elements.length;
-    for ( var i = 0; i <= elements.length; i++ ) {
-      this.drawTick( i / elements.length, 2 );
+    for (var i = 0; i <= elements.length; i++) {
+      this.drawTick(i / elements.length, 2);
 
-      if ( i < elements.length ) {
-        tickLabel = this.nextTickLabel( function( tickLabel ) {
+      if (i < elements.length) {
+        tickLabel = this.nextTickLabel(function (tickLabel) {
           tickLabel.setAttribute(
             'y',
-            ( self.top ? -1 : 1 ) *
-            ( ( self.options.tickPosition == 1 ? 8 : 20 ) + ( self.top ? 10 : 0 ) )
+            (self.top ? -1 : 1) *
+              ((self.options.tickPosition == 1 ? 8 : 20) + (self.top ? 10 : 0)),
           );
-          tickLabel.setAttribute( 'text-anchor', 'middle' );
-          if ( self.getTicksLabelColor() !== 'black' ) {
-            tickLabel.setAttribute( 'fill', self.getTicksLabelColor() );
+          tickLabel.setAttribute('text-anchor', 'middle');
+          if (self.getTicksLabelColor() !== 'black') {
+            tickLabel.setAttribute('fill', self.getTicksLabelColor());
           }
           tickLabel.style.dominantBaseline = 'hanging';
-        } );
+        });
 
-        tickLabel.setAttribute( 'x', this.getPos( ( i + 0.5 ) / elements.length ) );
-        tickLabel.textContent = elements[ i ].title;
+        tickLabel.setAttribute('x', this.getPos((i + 0.5) / elements.length));
+        tickLabel.textContent = elements[i].title;
       }
@@ -87,8 +85,8 @@ }
     let series = [];
-    for ( let serie of this.graph.series ) {
-      if ( serie.getXAxis() == this ) {
-        series.push( serie );
+    for (let serie of this.graph.series) {
+      if (serie.getXAxis() == this) {
+        series.push(serie);
       }
     }
-    this.setSeries( ...series );
+    this.setSeries(...series);
     return this;
@@ -106,11 +104,11 @@ }
 
-    Array.prototype.map.call( this.series, function( serie, index ) {
-      if ( !( typeof serie == 'object' ) ) {
-        serie = self.graph.getSerie( serie );
+    Array.prototype.map.call(this.series, function (serie, index) {
+      if (!(typeof serie == 'object')) {
+        serie = self.graph.getSerie(serie);
       }
 
-      if ( serie.setCategoryConfig ) {
-        serie.setCategoryConfig( index, self._barCategories, self.series.length );
+      if (serie.setCategoryConfig) {
+        serie.setCategoryConfig(index, self._barCategories, self.series.length);
       }
-    } );
+    });
 
@@ -126,18 +124,18 @@ this._getUsedCategories();
 
-    Array.prototype.map.call( this.series, ( serie ) => {
+    Array.prototype.map.call(this.series, (serie) => {
       let usedCategories = serie.getUsedCategories();
-      for ( let cat of usedCategories ) {
-        if ( !categories.hasOwnProperty( cat ) ) {
-          categories[ cat ] = 1;
+      for (let cat of usedCategories) {
+        if (!categories.hasOwnProperty(cat)) {
+          categories[cat] = 1;
           total += 1;
         }
 
-        categories[ cat ]++;
+        categories[cat]++;
         total++;
       }
-    } );
+    });
     let accumulator = 0;
-    for ( let i in categories ) {
-      let temp = categories[ i ];
-      categories[ i ] = accumulator;
+    for (let i in categories) {
+      let temp = categories[i];
+      categories[i] = accumulator;
       accumulator += temp;
@@ -148,14 +146,14 @@ }
 
-    Array.prototype.map.call( this.series, ( serie ) => {
+    Array.prototype.map.call(this.series, (serie) => {
       let scategories = serie.getUsedCategories(),
         indices = {};
 
-      scategories.forEach( ( cat ) => {
-        dispatchedCategories[ cat ] = dispatchedCategories[ cat ] || 0.5;
-        indices[ cat ] = ( categories[ cat ] + dispatchedCategories[ cat ] ) / total;
-        dispatchedCategories[ cat ]++;
-      } );
+      scategories.forEach((cat) => {
+        dispatchedCategories[cat] = dispatchedCategories[cat] || 0.5;
+        indices[cat] = (categories[cat] + dispatchedCategories[cat]) / total;
+        dispatchedCategories[cat]++;
+      });
 
-      serie.setDataIndices( indices, total );
-    } );
+      serie.setDataIndices(indices, total);
+    });
   }
@@ -168,2 +166,2 @@
 
-export default AxisXBar;
+export default AxisXBar;

src/graph.axis.x.js

@@ -1,3 +0,2 @@
-import Axis from './graph.axis.js';
-
+import Axis, { tickScaling } from './graph.axis';
 /**
@@ -8,299 +7,236 @@ * Generic constructor of a y axis
 class AxisX extends Axis {
-  constructor(graph, topbottom, options = {}) {
-    super(graph, topbottom, options);
-    this.top = topbottom == 'top';
-  }
-
-  /**
-   *  @private
-   *  Returns the position of the axis, used by refreshDrawingZone in core module
-   */
-  getAxisPosition() {
-    if (!this.options.display) {
-      return 0;
+    constructor(graph, topbottom, options) {
+        super();
+        this.top = topbottom == 'top';
     }
-
-    let size;
-
-    if (this.options.tickLabelOffset == 0) {
-      // Normal mode, no offset
-      size = this.options.tickPosition == 1 ? 8 : 20;
-      size += this.graph.options.fontSize;
-    } else {
-      // With an offset, and ticks inside, axis position is actually 0. Otherwise, it's the heights of the ticks
-      size = this.options.tickPosition == 1 ? 0 : 12;
+    /**
+     *  @private
+     *  Returns the position of the axis, used by refreshDrawingZone in core module
+     */
+    getAxisPosition() {
+        if (!this.options.display) {
+            return 0;
+        }
+        let size;
+        if (this.options.tickLabelOffset == 0) {
+            // Normal mode, no offset
+            size = this.options.tickPosition == 1 ? 8 : 20;
+            size += this.graph.options.fontSize;
+        }
+        else {
+            // With an offset, and ticks inside, axis position is actually 0. Otherwise, it's the heights of the ticks
+            size = this.options.tickPosition == 1 ? 0 : 12;
+        }
+        if (this.getLabel()) {
+            size += this.graph.options.fontSize;
+        }
+        return size;
     }
-
-    if (this.getLabel()) {
-      size += this.graph.options.fontSize;
+    /**
+     *  @returns {Boolean} always ```true```
+     */
+    isX() {
+        return true;
     }
-
-    return size;
-  }
-
-  /**
-   *  @returns {Boolean} always ```true```
-   */
-  isX() {
-    return true;
-  }
-
-  /**
-   *  @returns {Boolean} always ```false```
-   */
-  isY() {
-    return false;
-  }
-
-  forceHeight(height) {
-    this.options.forcedHeight = height;
-    return this;
-  }
-
-  /**
-   *  @private
-   *  Used to set the x position of the axis
-   */
-  setShift(shift) {
-    this.shift = shift;
-    if (shift === undefined || isNaN(shift) || !this.graph.getDrawingHeight() || isNaN(this.graph.getDrawingHeight())) {
-      return;
+    /**
+     *  @returns {Boolean} always ```false```
+     */
+    isY() {
+        return false;
     }
-
-    this.group.setAttribute(
-      'transform',
-      `translate(0 ${this.floating
-        ? this.getShift()
-        : this.top
-          ? this.shift
-          : this.graph.getDrawingHeight() - this.shift
-      })`
-    );
-  }
-
-  /**
-   *  Caclulates the maximum tick height
-   *  @return {Number} The maximum tick height
-   */
-  getMaxSizeTick() {
-    return (this.top ? -1 : 1) * (this.options.tickPosition == 1 ? 10 : 10);
-  }
-
-  /**
-   *  Draws a tick. Mostly used internally but it can be useful if you want to make your own axes
-   *  @param {Number} value - The value in axis unit to place the tick
-   *  @param {Number} level - The importance of the tick
-   *  @param {Object} options - Further options to be passed to ```setTickContent```
-   *  @param {Number} forcedPos - Forces the position of the tick (for axis dependency)
-   */
-  drawTick(value, level, options, forcedPos) {
-
-    var self = this, val;
-
-    val = forcedPos || this.getPos(value);
-
-    if (val == undefined || isNaN(val)) {
-      return;
+    forceHeight(height) {
+        this.forcedHeight = height;
+        return this;
     }
-
-    var tick = this.nextTick(level, (tick) => {
-      tick.setAttribute(
-        'y1',
-        (self.top ? 1 : -1) * self.tickPx1 * self.tickScaling[level]
-      );
-      tick.setAttribute(
-        'y2',
-        (self.top ? 1 : -1) * self.tickPx2 * self.tickScaling[level]
-      );
-
-      if (level == 1) {
-        tick.setAttribute('stroke', self.getPrimaryTicksColor());
-      } else {
-        tick.setAttribute('stroke', self.getSecondaryTicksColor());
-      }
-    });
-
-    //      tick.setAttribute( 'shape-rendering', 'crispEdges' );
-    tick.setAttribute('x1', val);
-    tick.setAttribute('x2', val);
-    this.nextGridLine(level == 1, val, val, 0, this.graph.getDrawingHeight());
-
-    const yCoord =  (self.top ? -1 : 1) * ((self.options.tickPosition == 1 ? 8 : 20) + (self.top ? 10 : 0)) + this.options.tickLabelOffset;
-
-    //  this.groupTicks.appendChild( tick );
-    if (level == 1 && this.options.tickLabels) {
-      var tickLabel = this.nextTickLabel((tickLabel) => {
-        tickLabel.setAttribute(
-          'y',
-          yCoord
-        );
-        tickLabel.setAttribute('text-anchor', 'middle');
-        if (self.getTicksLabelColor() !== 'black') {
-          tickLabel.setAttribute('fill', self.getTicksLabelColor());
+    /**
+     *  @private
+     *  Used to set the x position of the axis
+     */
+    setShift(shift) {
+        this.shift = shift;
+        if (shift === undefined ||
+            isNaN(shift) ||
+            !this.graph.getDrawingHeight() ||
+            isNaN(this.graph.getDrawingHeight())) {
+            return;
         }
-
-     
-      });
-
-      tickLabel.setAttribute('x', val);
-
-      if( this.options.tickLabelRotation ) {
-
-        if( this.options.tickLabelRotation < 0 ) {
-          tickLabel.setAttribute('text-anchor', 'end');
-        } else {
-          tickLabel.setAttribute('text-anchor', 'start');
+        this.group.setAttribute('transform', `translate(0 ${this.floating
+            ? this.getShift()
+            : this.top
+                ? this.shift
+                : this.graph.getDrawingHeight() - this.shift})`);
+    }
+    /**
+     *  Caclulates the maximum tick height
+     *  @return {Number} The maximum tick height
+     */
+    getMaxSizeTick() {
+        return (this.top ? -1 : 1) * (this.options.tickPosition == 1 ? 10 : 10);
+    }
+    /**
+     *  Draws a tick. Mostly used internally but it can be useful if you want to make your own axes
+     *  @param {Number} value - The value in axis unit to place the tick
+     *  @param {Number} level - The importance of the tick
+     *  @param {Object} options - Further options to be passed to ```setTickContent```
+     *  @param {Number} forcedPos - Forces the position of the tick (for axis dependency)
+     */
+    drawTick(value, level, options, forcedPos) {
+        var self = this, val;
+        val = forcedPos || this.getPos(value);
+        if (val == undefined || isNaN(val)) {
+            return;
         }
-        
-        tickLabel.setAttribute('dominant-baseline', 'middle');
-        tickLabel.setAttribute('transform', `translate( ${val}, ${yCoord} ) rotate(${this.options.tickLabelRotation}) translate( ${-val}, ${-yCoord} )`);
-      } else {
-        tickLabel.setAttribute('dominant-baseline', 'hanging');
-
-      }
-      this.setTickContent(tickLabel, value, options);
+        var tick = this.nextTick(level, (tick) => {
+            tick.setAttribute('y1', (self.top ? 1 : -1) * self.tickPx1 * tickScaling[level]);
+            tick.setAttribute('y2', (self.top ? 1 : -1) * self.tickPx2 * tickScaling[level]);
+            if (level == 1) {
+                tick.setAttribute('stroke', self.getPrimaryTicksColor());
+            }
+            else {
+                tick.setAttribute('stroke', self.getSecondaryTicksColor());
+            }
+        });
+        //      tick.setAttribute( 'shape-rendering', 'crispEdges' );
+        tick.setAttribute('x1', val);
+        tick.setAttribute('x2', val);
+        this.nextGridLine(level == 1, val, val, 0, this.graph.getDrawingHeight());
+        const yCoord = (self.top ? -1 : 1) *
+            ((self.options.tickPosition == 1 ? 8 : 20) + (self.top ? 10 : 0)) +
+            this.options.tickLabelOffset;
+        //  this.groupTicks.appendChild( tick );
+        if (level == 1 && this.options.tickLabels) {
+            var tickLabel = this.nextTickLabel((tickLabel) => {
+                tickLabel.setAttribute('y', yCoord);
+                tickLabel.setAttribute('text-anchor', 'middle');
+                if (self.getTicksLabelColor() !== 'black') {
+                    tickLabel.setAttribute('fill', self.getTicksLabelColor());
+                }
+            });
+            tickLabel.setAttribute('x', val);
+            if (this.options.tickLabelRotation) {
+                if (this.options.tickLabelRotation < 0) {
+                    tickLabel.setAttribute('text-anchor', 'end');
+                }
+                else {
+                    tickLabel.setAttribute('text-anchor', 'start');
+                }
+                tickLabel.setAttribute('dominant-baseline', 'middle');
+                tickLabel.setAttribute('transform', `translate( ${val}, ${yCoord} ) rotate(${this.options.tickLabelRotation}) translate( ${-val}, ${-yCoord} )`);
+            }
+            else {
+                tickLabel.setAttribute('dominant-baseline', 'hanging');
+            }
+            this.setTickContent(tickLabel, value, options);
+        }
+        //    this.ticks.push( tick );
+        return [tick, tickLabel];
     }
-    //    this.ticks.push( tick );
-
-    return [tick, tickLabel];
-  }
-
-  drawLabel() {
-    // Place label correctly
-
-    if (this.getLabelColor() !== 'black') {
-      this.label.setAttribute('fill', this.getLabelColor());
+    drawLabel() {
+        // Place label correctly
+        if (this.getLabelColor() !== 'black') {
+            this.label.setAttribute('fill', this.getLabelColor());
+        }
+        if (this.options.labelFont) {
+            this.label.setAttribute('font-family', this.options.labelFont);
+        }
+        this.label.setAttribute('text-anchor', 'middle');
+        this.label.setAttribute('style', 'display: initial;');
+        this.label.setAttribute('x', String(Math.abs(this.getMaxPx() + this.getMinPx()) / 2));
+        this.label.setAttribute('y', String((this.top ? -1 : 1) *
+            ((this.options.tickPosition == 1 ? 10 : 25) +
+                this.graph.options.fontSize)));
+        this.labelTspan.textContent = this.getLabel();
     }
-
-    if (this.options.labelFont) {
-      this.label.setAttribute('font-family', this.options.labelFont);
+    draw() {
+        var tickWidth = super.draw();
+        this.drawSpecifics();
+        return tickWidth;
     }
-
-    this.label.setAttribute('text-anchor', 'middle');
-    this.label.setAttribute('style', 'display: initial;');
-    this.label.setAttribute(
-      'x',
-      Math.abs(this.getMaxPx() + this.getMinPx()) / 2
-    );
-    this.label.setAttribute(
-      'y',
-      (this.top ? -1 : 1) *
-      ((this.options.tickPosition == 1 ? 10 : 25) +
-        this.graph.options.fontSize)
-    );
-    this.labelTspan.textContent = this.getLabel();
-  }
-
-  draw() {
-    var tickWidth = super.draw(...arguments);
-    this.drawSpecifics();
-
-    return tickWidth;
-  }
-  /**
-   *  Paints the label, the axis line and anything else specific to x axes
-   */
-  drawSpecifics() {
-    // Adjusts group shift
-    //this.group.setAttribute('transform', 'translate(0 ' + this.getShift() + ')');
-
-    this.drawLabel();
-
-    this.line.setAttribute('x1', this.getMinPx());
-    this.line.setAttribute('x2', this.getMaxPx());
-    this.line.setAttribute('y1', 0);
-    this.line.setAttribute('y2', 0);
-
-    this.line.setAttribute('stroke', this.getAxisColor());
-
-    if (!this.top) {
-      this.labelTspan.style = this.labelTspan.style || {};
-      this.expTspan.style = this.expTspan.style || {};
-      this.expTspanExp.style = this.expTspanExp.style || {};
-      this.unitTspan.style = this.unitTspan.style || {};
-      this.labelTspan.style.dominantBaseline = 'hanging';
-      this.expTspan.style.dominantBaseline = 'hanging';
-      this.expTspanExp.style.dominantBaseline = 'hanging';
-
-      this.unitTspan.style.dominantBaseline = 'hanging';
-      //  this.preunitTspan.style.dominantBaseline = 'hanging';
+    /**
+     *  Paints the label, the axis line and anything else specific to x axes
+     */
+    drawSpecifics() {
+        // Adjusts group shift
+        //this.group.setAttribute('transform', 'translate(0 ' + this.getShift() + ')');
+        this.drawLabel();
+        this.line.setAttribute('x1', String(this.getMinPx()));
+        this.line.setAttribute('x2', String(this.getMaxPx()));
+        this.line.setAttribute('y1', "0");
+        this.line.setAttribute('y2', "0");
+        this.line.setAttribute('stroke', this.getAxisColor());
+        if (!this.top) {
+            // this.labelTspan.style = this.labelTspan.style || {};
+            // this.expTspan.style = this.expTspan.style || {};
+            // this.expTspanExp.style = this.expTspanExp.style || {};
+            //this.unitTspan.style = this.unitTspan.style || {};
+            this.labelTspan.style.dominantBaseline = 'hanging';
+            this.expTspan.style.dominantBaseline = 'hanging';
+            this.expTspanExp.style.dominantBaseline = 'hanging';
+            this.unitTspan.style.dominantBaseline = 'hanging';
+            //  this.preunitTspan.style.dominantBaseline = 'hanging';
+        }
+        var span = this.getSpan();
+        /*this.line.setAttribute(
+          'marker-start',
+          !this.options.splitMarks || span[0] == 0
+            ? ''
+            : `url(#horionzalsplit_${this.graph.getId()})`,
+        );
+        this.line.setAttribute(
+          'marker-end',
+          !this.options.splitMarks || span[1] == 1
+            ? ''
+            : `url(#horionzalsplit_${this.graph.getId()})`,
+        );*/
     }
-
-    var span = this.getSpan();
-    this.line.setAttribute(
-      'marker-start', !this.options.splitMarks || span[0] == 0 ?
-      '' :
-      `url(#horionzalsplit_${this.graph.getId()})`
-    );
-    this.line.setAttribute(
-      'marker-end', !this.options.splitMarks || span[1] == 1 ?
-      '' :
-      `url(#horionzalsplit_${this.graph.getId()})`
-    );
-  }
-
-  /**
-   *  @private
-   */
-  _drawLine(pos, line) {
-    let px = this.getPx(pos);
-
-    if (!line) {
-      line = document.createElementNS(this.graph.ns, 'line');
-    } else {
-      line.setAttribute('display', 'initial');
+    /**
+     *  @private
+     */
+    _drawLine(pos, line) {
+        let px = this.getPx(pos);
+        if (!line) {
+            line = document.createElementNS(this.graph.ns, 'line');
+        }
+        else {
+            line.setAttribute('display', 'initial');
+        }
+        line.setAttribute('x1', px);
+        line.setAttribute('x2', px);
+        line.setAttribute('y1', 0);
+        line.setAttribute('y2', this.graph.drawingSpaceHeight);
+        line.setAttribute('stroke', 'black');
+        this.group.appendChild(line);
+        return line;
     }
-
-    line.setAttribute('x1', px);
-    line.setAttribute('x2', px);
-
-    line.setAttribute('y1', 0);
-    line.setAttribute('y2', this.graph.drawingSpaceHeight);
-
-    line.setAttribute('stroke', 'black');
-    this.group.appendChild(line);
-
-    return line;
-  }
-
-  _hideLine(line) {
-    if (!line) {
-      return;
+    _hideLine(line) {
+        if (!line) {
+            return;
+        }
+        line.setAttribute('display', 'none');
     }
-    line.setAttribute('display', 'none');
-  }
-
-  /**
-   *  @private
-   */
-  handleMouseMoveLocal(x) {
-    // handleMouseMoveLocal( x, y, e )
-    x -= this.graph.getPaddingLeft();
-    this.mouseVal = this.getVal(x);
-  }
-
-  /**
-   *  Caches the minimum px and maximum px position of the axis. Includes axis spans and flipping. Mostly used internally
-   */
-  setMinMaxFlipped() {
-    var interval = this.maxPx - this.minPx;
-
-    if (isNaN(interval)) {
-      return;
+    /**
+     *  @private
+     */
+    handleMouseMoveLocal(x) {
+        // handleMouseMoveLocal( x, y, e )
+        x -= this.graph.getPaddingLeft();
+        this.mouseVal = this.getVal(x);
     }
-
-    var maxPx =
-      interval * this.options.span[1] + this.minPx - this.options.marginMax;
-    var minPx =
-      interval * this.options.span[0] + this.minPx + this.options.marginMin;
-
-    this.minPxFlipped = this.isFlipped() ? maxPx : minPx;
-    this.maxPxFlipped = this.isFlipped() ? minPx : maxPx;
-  }
-
-  getZProj(zValue) {
-    return zValue * this.graph.options.zAxis.shiftX;
-  }
+    /**
+     *  Caches the minimum px and maximum px position of the axis. Includes axis spans and flipping. Mostly used internally
+     */
+    setMinMaxFlipped() {
+        var interval = this.maxPx - this.minPx;
+        if (isNaN(interval)) {
+            return;
+        }
+        var maxPx = interval * this.options.span[1] + this.minPx - this.options.marginMax;
+        var minPx = interval * this.options.span[0] + this.minPx + this.options.marginMin;
+        this.minPxFlipped = this.isFlipped() ? maxPx : minPx;
+        this.maxPxFlipped = this.isFlipped() ? minPx : maxPx;
+    }
+    getZProj(zValue) {
+        return zValue * this.graph.options.zAxis.shiftX;
+    }
 }
-
-export default AxisX;
+export default AxisX;

src/graph.axis.x.time.js

@@ -1,110 +0,107 @@
-import Axis from './graph.axis.js';
+import Axis from './graph.axis';
 import * as util from './graph.util.js';
 
 var axisFormat = [
-
   {
-
     threshold: 20,
     increments: {
-
       1: {
         increment: 1, // 1 minute
         unit: 'i',
-        format: 'HH"h"MM (dd/mm/yy)'
+        format: 'HH"h"MM (dd/mm/yy)',
       },
 
-      2: { // 10 seconds
+      2: {
+        // 10 seconds
         increment: 1,
         unit: 's',
-        format: 'MM:ss"s"'
-      }
-    }
+        format: 'MM:ss"s"',
+      },
+    },
   },
 
   {
-
     threshold: 50,
     increments: {
-
       1: {
         increment: 1, // 1 minute
         unit: 'i',
-        format: 'HH"h"MM (dd/mm/yy)'
+        format: 'HH"h"MM (dd/mm/yy)',
       },
 
-      2: { // 2 seconds
+      2: {
+        // 2 seconds
         increment: 2,
         unit: 's',
-        format: 'MM:ss"s"'
-      }
-    }
+        format: 'MM:ss"s"',
+      },
+    },
   },
 
   {
-
     threshold: 100,
     increments: {
-
       1: {
         increment: 1, // 1 minute
         unit: 'i',
-        format: 'HH"h"MM (dd/mm/yy)'
+        format: 'HH"h"MM (dd/mm/yy)',
       },
 
-      2: { // 5 seconds
+      2: {
+        // 5 seconds
         increment: 5,
         unit: 's',
-        format: 'MM:ss"s"'
-      }
-    }
+        format: 'MM:ss"s"',
+      },
+    },
   },
 
   {
-
     threshold: 600,
     increments: {
-
       1: {
         increment: 10, // 1 minute
         unit: 'i',
-        format: 'HH"h"MM (dd/mm/yy)'
+        format: 'HH"h"MM (dd/mm/yy)',
       },
 
-      2: { // 10 seconds
+      2: {
+        // 10 seconds
         increment: 30,
         unit: 's',
-        format: 'MM:ss"s"'
-      }
-    }
+        format: 'MM:ss"s"',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 1000,
     increments: {
-
-      1: { // 1h
+      1: {
+        // 1h
         increment: 1,
         unit: 'h',
-        format: 'HH"h"MM (dd/mm/yy)'
+        format: 'HH"h"MM (dd/mm/yy)',
       },
 
-      2: { // 10 minutes
+      2: {
+        // 10 minutes
         increment: 10,
         unit: 'i',
-        format: 'MM"min"'
-      }
-    }
+        format: 'MM"min"',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 1500,
     increments: {
-
       1: {
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
@@ -115,16 +112,16 @@
         unit: 'i',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 3000,
     increments: {
-
       1: {
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
@@ -135,16 +132,16 @@
         unit: 'i',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 8000,
     increments: {
-
       1: {
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
@@ -155,16 +152,16 @@
         unit: 'i',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 26400,
     increments: {
-
       1: {
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
@@ -175,16 +172,16 @@
         unit: 'i',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 86400,
     increments: {
-
       1: {
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
@@ -195,237 +192,215 @@
         unit: 'h',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 200000,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
 
       2: {
-
         increment: 2, // One day on the first axis
         unit: 'h',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 400000,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
 
       2: {
-
         increment: 6, // One day on the first axis
         unit: 'h',
-        format: 'H"h"MM'
-      }
-    }
+        format: 'H"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 1400000,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'd',
-        format: 'dd/mm/yyyy'
+        format: 'dd/mm/yyyy',
       },
 
       2: {
-
         increment: 12, // One day on the first axis
         unit: 'h',
-        format: 'HH"h"MM'
-      }
-    }
+        format: 'HH"h"MM',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 6400000,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'm',
-        format: 'mmmm yyyy'
+        format: 'mmmm yyyy',
       },
 
       2: {
-
         increment: 1, // One day on the first axis
         unit: 'd',
-        format: 'dd'
-      }
-    }
+        format: 'dd',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 12400000,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'm',
-        format: 'mmmm yyyy'
+        format: 'mmmm yyyy',
       },
 
       2: {
-
         increment: 2, // One day on the first axis
         unit: 'd',
-        format: 'dd'
-      }
-    }
+        format: 'dd',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 86400000 * 0.5,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'm',
-        format: 'mmmm yyyy'
+        format: 'mmmm yyyy',
       },
 
       2: {
-
         increment: 7, // One day on the first axis
         unit: 'd',
-        format: 'dd'
-      }
-    }
+        format: 'dd',
+      },
+    },
   },
 
-  { // One day
+  {
+    // One day
 
     threshold: 86400000 * 0.8,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'm',
-        format: 'mmmm yyyy'
+        format: 'mmmm yyyy',
       },
 
       2: {
-
         increment: 15, // One day on the first axis
         unit: 'd',
-        format: 'dd'
-      }
-    }
+        format: 'dd',
+      },
+    },
   },
 
-  { // One month
+  {
+    // One month
 
     threshold: 86400000 * 1,
     increments: {
-
       1: {
         increment: 1,
         unit: 'y',
-        format: 'yyyy'
+        format: 'yyyy',
       },
 
       2: {
-
         increment: 3, // One day on the first axis
         unit: 'm',
-        format: 'mm/yyyy'
-      }
-    }
+        format: 'mm/yyyy',
+      },
+    },
   },
 
-  { // One month
+  {
+    // One month
 
     threshold: 86400000 * 2,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'y',
-        format: 'yyyy'
+        format: 'yyyy',
       },
 
       2: {
-
         increment: 4, // One day on the first axis
         unit: 'm',
-        format: 'mm/yyyy'
-      }
-    }
+        format: 'mm/yyyy',
+      },
+    },
   },
 
-  { // One month
+  {
+    // One month
 
     threshold: 86400000 * 10,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'y',
-        format: 'yyyy'
+        format: 'yyyy',
       },
 
       2: {
-
         increment: 6, // One day on the first axis
         unit: 'm',
-        format: 'mm/yyyy'
-      }
-    }
+        format: 'mm/yyyy',
+      },
+    },
   },
 
-  { // One month
+  {
+    // One month
 
     threshold: 86400000 * 12,
     increments: {
-
       1: {
-
         increment: 1,
         unit: 'y',
-        format: 'yyyy'
+        format: 'yyyy',
       },
 
       2: {
-
         increment: 1, // One day on the first axis
         unit: 'y',
-        format: 'yyyy'
-      }
-    }
+        format: 'yyyy',
+      },
+    },
   },
-
 ];
@@ -447,23 +422,28 @@
 
-var dateFormat = ( function() {
+var dateFormat = (function () {
   var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[WLloSZ]|"[^"]*"|'[^']*'/g,
-    timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
+    timezone =
+      /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
     timezoneClip = /[^-+\dA-Z]/g,
-    pad = function( val, len ) {
-      val = String( val );
+    pad = function (val, len) {
+      val = String(val);
       len = len || 2;
-      while ( val.length < len ) val = `0${ val}`;
+      while (val.length < len) val = `0${val}`;
       return val;
     },
-    getWeek = function( d, f ) {
-      var onejan = new Date( d[ `${f }FullYear` ](), 0, 1 );
-      return Math.ceil( ( ( ( d - onejan ) / 86400000 ) + onejan[ `${f }Day` ]() + 1 ) / 7 );
+    getWeek = function (d, f) {
+      var onejan = new Date(d[`${f}FullYear`](), 0, 1);
+      return Math.ceil(((d - onejan) / 86400000 + onejan[`${f}Day`]() + 1) / 7);
     };
 
   // Regexes and supporting functions are cached through closure
-  return function( date, mask, utc ) {
+  return function (date, mask, utc) {
     var dF = dateFormat;
 
     // You can't provide utc if you skip other args (use the "UTC:" mask prefix)
-    if ( arguments.length == 1 && Object.prototype.toString.call( date ) == '[object String]' && !/\d/.test( date ) ) {
+    if (
+      arguments.length == 1 &&
+      Object.prototype.toString.call(date) == '[object String]' &&
+      !/\d/.test(date)
+    ) {
       mask = date;
@@ -474,10 +454,10 @@ date = undefined;
     // Passing date through Date applies Date.parse, if necessary
-    date = date ? new Date( date ) : new Date();
-    if ( isNaN( date ) ) throw SyntaxError( `invalid date:${ date}` );
+    date = date ? new Date(date) : new Date();
+    if (isNaN(date)) throw SyntaxError(`invalid date:${date}`);
 
-    mask = String( dF.masks[ mask ] || mask || dF.masks.default );
+    mask = String(dF.masks[mask] || mask || dF.masks.default);
 
     // Allow setting the utc argument via the mask
-    if ( mask.slice( 0, 4 ) == 'UTC:' ) {
-      mask = mask.slice( 4 );
+    if (mask.slice(0, 4) == 'UTC:') {
+      mask = mask.slice(4);
       utc = true;
@@ -487,32 +467,32 @@ }
     var _ = utc ? 'getUTC' : 'get',
-      d = date[ `${_ }Date` ](),
-      D = date[ `${_ }Day` ](),
-      m = date[ `${_ }Month` ](),
-      y = date[ `${_ }FullYear` ](),
-      H = date[ `${_ }Hours` ](),
-      M = date[ `${_ }Minutes` ](),
-      s = date[ `${_ }Seconds` ](),
-      L = date[ `${_ }Milliseconds` ](),
+      d = date[`${_}Date`](),
+      D = date[`${_}Day`](),
+      m = date[`${_}Month`](),
+      y = date[`${_}FullYear`](),
+      H = date[`${_}Hours`](),
+      M = date[`${_}Minutes`](),
+      s = date[`${_}Seconds`](),
+      L = date[`${_}Milliseconds`](),
       o = utc ? 0 : date.getTimezoneOffset(),
       flags = {
         d: d,
-        dd: pad( d ),
-        ddd: dF.i18n.dayNames[ D ],
-        dddd: dF.i18n.dayNames[ D + 7 ],
+        dd: pad(d),
+        ddd: dF.i18n.dayNames[D],
+        dddd: dF.i18n.dayNames[D + 7],
         m: m + 1,
-        mm: pad( m + 1 ),
-        mmm: dF.i18n.monthNames[ m ],
-        mmmm: dF.i18n.monthNames[ m + 12 ],
-        yy: String( y ).slice( 2 ),
+        mm: pad(m + 1),
+        mmm: dF.i18n.monthNames[m],
+        mmmm: dF.i18n.monthNames[m + 12],
+        yy: String(y).slice(2),
         yyyy: y,
         h: H % 12 || 12,
-        hh: pad( H % 12 || 12 ),
+        hh: pad(H % 12 || 12),
         H: H,
-        HH: pad( H ),
+        HH: pad(H),
         M: M,
-        MM: pad( M ),
+        MM: pad(M),
         s: s,
-        ss: pad( s ),
-        l: pad( L, 3 ),
-        L: pad( L > 99 ? Math.round( L / 10 ) : L ),
+        ss: pad(s),
+        l: pad(L, 3),
+        L: pad(L > 99 ? Math.round(L / 10) : L),
         t: H < 12 ? 'a' : 'p',
@@ -522,17 +502,25 @@ tt: H < 12 ? 'am' : 'pm',
         TT: H < 12 ? 'AM' : 'PM',
-        Z: utc ? 'UTC' : ( String( date ).match( timezone ) || [ '' ] ).pop().replace( timezoneClip, '' ),
-        o: ( o > 0 ? '-' : '+' ) + pad( Math.floor( Math.abs( o ) / 60 ) * 100 + Math.abs( o ) % 60, 4 ),
-        S: [ 'th', 'st', 'nd', 'rd' ][ d % 10 > 3 ? 0 : ( d % 100 - d % 10 != 10 ) * d % 10 ],
-        W: getWeek( date, _ ),
+        Z: utc
+          ? 'UTC'
+          : (String(date).match(timezone) || [''])
+              .pop()
+              .replace(timezoneClip, ''),
+        o:
+          (o > 0 ? '-' : '+') +
+          pad(Math.floor(Math.abs(o) / 60) * 100 + (Math.abs(o) % 60), 4),
+        S: ['th', 'st', 'nd', 'rd'][
+          d % 10 > 3 ? 0 : (((d % 100) - (d % 10) != 10) * d) % 10
+        ],
+        W: getWeek(date, _),
       };
 
-    return mask.replace( token, function( $0 ) {
-      return $0 in flags ? flags[ $0 ] : $0.slice( 1, $0.length - 1 );
-    } );
+    return mask.replace(token, function ($0) {
+      return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
+    });
   };
-} )();
+})();
 
 // Some common format strings
 dateFormat.masks = {
-  'default': 'ddd mmm dd yyyy HH:MM:ss',
+  default: 'ddd mmm dd yyyy HH:MM:ss',
   shortDate: 'm/d/yy',
@@ -548,3 +536,3 @@ mediumDate: 'mmm d, yyyy',
   isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
-  isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
+  isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",
 };
@@ -555,9 +543,43 @@
   dayNames: [
-    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
-    'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
+    'Sun',
+    'Mon',
+    'Tue',
+    'Wed',
+    'Thu',
+    'Fri',
+    'Sat',
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
   ],
   monthNames: [
-    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
-  ]
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
 };
@@ -567,67 +589,59 @@
 
-function getClosestIncrement( value, basis ) {
-  return Math.round( value / basis ) * basis;
+function getClosestIncrement(value, basis) {
+  return Math.round(value / basis) * basis;
 }
 
-function roundDate( date, format ) {
-
-  switch ( format.unit ) {
-
+function roundDate(date, format) {
+  switch (format.unit) {
     case 's': // Round at n hour
+      date.setSeconds(getClosestIncrement(date.getSeconds(), format.increment));
+      date.setMilliseconds(0);
 
-      date.setSeconds( getClosestIncrement( date.getSeconds(), format.increment ) );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'i': // Round at n hour
+      date.setMinutes(getClosestIncrement(date.getMinutes(), format.increment));
+      date.setSeconds(0);
+      date.setMilliseconds(0);
 
-      date.setMinutes( getClosestIncrement( date.getMinutes(), format.increment ) );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'h': // Round at n hour
+      date.setHours(getClosestIncrement(date.getHours(), format.increment));
 
-      date.setHours( getClosestIncrement( date.getHours(), format.increment ) );
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
 
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'd':
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
 
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
+      date.setDate(getClosestIncrement(date.getDate(), format.increment));
 
-      date.setDate( getClosestIncrement( date.getDate(), format.increment ) );
-
       break;
 
     case 'm':
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
+      date.setDate(1);
 
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
-      date.setDate( 1 );
+      date.setMonth(getClosestIncrement(date.getMonth(), format.increment));
 
-      date.setMonth( getClosestIncrement( date.getMonth(), format.increment ) );
-
       break;
 
     case 'y':
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
+      date.setDate(1);
+      date.setMonth(0);
 
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
-      date.setDate( 1 );
-      date.setMonth( 0 );
-
       //date.setYear( getClosest( date.getDate(), format.increment ) );
@@ -637,6 +651,5 @@
 
-    default:
-      {
-        throw new Error( 'Date format not recognized' );
-      }
+    default: {
+      throw new Error('Date format not recognized');
+    }
   }
@@ -647,68 +660,59 @@
 
-function incrementDate( date, format ) {
-
-  switch ( format.unit ) {
-
+function incrementDate(date, format) {
+  switch (format.unit) {
     case 's':
+      date.setSeconds(date.getSeconds() + format.increment);
+      date.setMilliseconds(0);
 
-      date.setSeconds( date.getSeconds() + format.increment );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'i':
+      date.setMinutes(date.getMinutes() + format.increment);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
 
-      date.setMinutes( date.getMinutes() + format.increment );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'h': // Round at n hour
+      date.setHours(date.getHours() + format.increment);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
 
-      date.setHours( date.getHours() + format.increment );
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-
       break;
 
     case 'd':
+      date.setDate(date.getDate() + format.increment);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
 
-      date.setDate( date.getDate() + format.increment );
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
-
       break;
 
     case 'm':
+      date.setMonth(date.getMonth() + format.increment);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
+      date.setDate(1);
 
-      date.setMonth( date.getMonth() + format.increment );
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
-      date.setDate( 1 );
-
       break;
 
     case 'y':
+      date.setFullYear(date.getFullYear() + format.increment);
 
-      date.setFullYear( date.getFullYear() + format.increment );
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setHours(0);
+      date.setDate(1);
+      date.setMonth(0);
 
-      date.setMinutes( 0 );
-      date.setSeconds( 0 );
-      date.setMilliseconds( 0 );
-      date.setHours( 0 );
-      date.setDate( 1 );
-      date.setMonth( 0 );
-
       break;
 
-    default:
-      {
-        throw new Error( 'Date format not recognized' );
-      }
+    default: {
+      throw new Error('Date format not recognized');
+    }
   }
@@ -719,29 +723,25 @@
 
-function getGroup( axis, level, number ) {
-
-  if ( axis.groups[ level ][ number ] ) {
-    axis.groups[ level ][ number ].group.setAttribute( 'display', 'block' );
-    return axis.groups[ level ][ number ];
+function getGroup(axis, level, number) {
+  if (axis.groups[level][number]) {
+    axis.groups[level][number].group.setAttribute('display', 'block');
+    return axis.groups[level][number];
   }
 
   var g = {
-
-    group: document.createElementNS( axis.graph.ns, 'g' ),
-    text: document.createElementNS( axis.graph.ns, 'text' )
+    group: document.createElementNS(axis.graph.ns, 'g'),
+    text: document.createElementNS(axis.graph.ns, 'text'),
   };
 
-  var line = document.createElementNS( axis.graph.ns, 'line' );
+  var line = document.createElementNS(axis.graph.ns, 'line');
 
-  line.setAttribute( 'stroke', 'black' );
-  line.setAttribute( 'y1', 0 );
-  switch ( level ) {
-
+  line.setAttribute('stroke', 'black');
+  line.setAttribute('y1', 0);
+  switch (level) {
     case 2:
+      line.setAttribute('y2', 6);
+      g.text.setAttribute('y', 15);
 
-      line.setAttribute( 'y2', 6 );
-      g.text.setAttribute( 'y', 15 );
-
       g.line = line;
 
-      g.group.appendChild( g.line );
+      g.group.appendChild(g.line);
       break;
@@ -751,11 +751,10 @@
     case 1:
+      line.setAttribute('y2', 20);
+      g.text.setAttribute('y', 10);
 
-      line.setAttribute( 'y2', 20 );
-      g.text.setAttribute( 'y', 10 );
-
       g.line1 = line;
       g.line2 = line.cloneNode();
 
-      g.group.appendChild( g.line1 );
-      g.group.appendChild( g.line2 );
+      g.group.appendChild(g.line1);
+      g.group.appendChild(g.line2);
 
@@ -765,44 +764,37 @@ break;
 
-  g.text.setAttribute( 'text-anchor', 'middle' );
-  g.text.setAttribute( 'dominant-baseline', 'middle' );
+  g.text.setAttribute('text-anchor', 'middle');
+  g.text.setAttribute('dominant-baseline', 'middle');
 
-  g.group.appendChild( g.text );
+  g.group.appendChild(g.text);
 
-  axis.getWrapper( level ).appendChild( g.group );
+  axis.getWrapper(level).appendChild(g.group);
 
-  return axis.groups[ level ][ number ] = g;
+  return (axis.groups[level][number] = g);
 }
 
-function hideGroups( axis, level, from ) {
-
-  for ( ; from < axis.groups[ level ].length; from++ ) {
-
-    hideGroup( axis.groups[ level ][ from ] );
+function hideGroups(axis, level, from) {
+  for (; from < axis.groups[level].length; from++) {
+    hideGroup(axis.groups[level][from]);
   }
 }
 
-function hideGroup( group ) {
-  group.group.setAttribute( 'display', 'none' );
+function hideGroup(group) {
+  group.group.setAttribute('display', 'none');
 }
 
-function getDateText( date, format ) {
-
-  return dateFormat( date, format );
+function getDateText(date, format) {
+  return dateFormat(date, format);
 }
 
-function renderGroup( level, group, text, minPx, maxPx, x1, x2 ) {
-
-  switch ( level ) {
-
+function renderGroup(level, group, text, minPx, maxPx, x1, x2) {
+  switch (level) {
     case 2:
-
-      if ( x1 < minPx || x1 > maxPx ) {
-
-        hideGroup( group );
+      if (x1 < minPx || x1 > maxPx) {
+        hideGroup(group);
         return;
       }
 
-      group.line.setAttribute( 'x1', x1 );
-      group.line.setAttribute( 'x2', x1 );
-      group.text.setAttribute( 'x', x1 );
+      group.line.setAttribute('x1', x1);
+      group.line.setAttribute('x2', x1);
+      group.text.setAttribute('x', x1);
       group.text.textContent = text;
@@ -814,23 +806,21 @@
     case 1:
+      var x1B = Math.max(minPx, Math.min(maxPx, x1)),
+        x2B = Math.max(minPx, Math.min(maxPx, x2));
 
-      var x1B = Math.max( minPx, Math.min( maxPx, x1 ) ),
-        x2B = Math.max( minPx, Math.min( maxPx, x2 ) );
-
-      if ( isNaN( x2B ) || isNaN( x1B ) ) {
+      if (isNaN(x2B) || isNaN(x1B)) {
         return;
       }
 
-      group.line1.setAttribute( 'x1', x1B );
-      group.line2.setAttribute( 'x1', x2B );
+      group.line1.setAttribute('x1', x1B);
+      group.line2.setAttribute('x1', x2B);
 
-      group.line1.setAttribute( 'x2', x1B );
-      group.line2.setAttribute( 'x2', x2B );
+      group.line1.setAttribute('x2', x1B);
+      group.line2.setAttribute('x2', x2B);
 
-      group.text.setAttribute( 'x', ( x1B + x2B ) / 2 );
+      group.text.setAttribute('x', (x1B + x2B) / 2);
 
-      while ( text.length * 8 > x2B - x1B ) {
+      while (text.length * 8 > x2B - x1B) {
+        text = `${text.substr(0, text.length - 2)}.`;
 
-        text = `${text.substr( 0, text.length - 2 ) }.`;
-
-        if ( text.length == 1 ) {
+        if (text.length == 1) {
           text = '';
@@ -847,42 +837,40 @@ break;
 class GraphTimeAxis extends Axis {
-
   constructor() {
-
-    super( ...arguments );
+    super(...arguments);
   }
 
-  init( graph, options ) {
+  init(graph, options) {
+    super.init(graph, options);
 
-    super.init( graph, options );
-
     this.wrapper = {
-      1: document.createElementNS( graph.ns, 'g' ),
-      2: document.createElementNS( graph.ns, 'g' )
+      1: document.createElementNS(graph.ns, 'g'),
+      2: document.createElementNS(graph.ns, 'g'),
     };
     this.groups = {
       1: [],
-      2: []
+      2: [],
     };
 
-    var rect = document.createElementNS( graph.ns, 'rect' );
-    rect.setAttribute( 'fill', '#c0c0c0' );
-    rect.setAttribute( 'stroke', '#808080' );
-    rect.setAttribute( 'height', '20' );
-    rect.setAttribute( 'x', '0' );
-    rect.setAttribute( 'y', '0' );
+    var rect = document.createElementNS(graph.ns, 'rect');
+    rect.setAttribute('fill', '#c0c0c0');
+    rect.setAttribute('stroke', '#808080');
+    rect.setAttribute('height', '20');
+    rect.setAttribute('x', '0');
+    rect.setAttribute('y', '0');
 
     this.rect = rect;
 
-    this.wrapper[ 1 ].appendChild( this.rect );
+    this.wrapper[1].appendChild(this.rect);
 
     //    this.init( graph, options );
 
-    this.group.appendChild( this.wrapper[ 1 ] );
-    this.group.appendChild( this.wrapper[ 2 ] );
+    this.group.appendChild(this.wrapper[1]);
+    this.group.appendChild(this.wrapper[2]);
 
-    this.wrapper[ 1 ].setAttribute( 'transform', 'translate( 0, 25 )' );
-    this.wrapper[ 2 ].setAttribute( 'transform', 'translate( 0, 00 )' );
+    this.wrapper[1].setAttribute('transform', 'translate( 0, 25 )');
+    this.wrapper[2].setAttribute('transform', 'translate( 0, 00 )');
   }
 
-  draw() { // Redrawing of the axis
+  draw() {
+    // Redrawing of the axis
 
@@ -894,11 +882,10 @@ //this.drawInit();
 
-    if ( this.currentAxisMin == undefined || this.currentAxisMax == undefined ) {
-      this.setMinMaxToFitSeries( true ); // We reset the min max as a function of the series
-
+    if (this.currentAxisMin == undefined || this.currentAxisMax == undefined) {
+      this.setMinMaxToFitSeries(true); // We reset the min max as a function of the series
     }
 
-    this.line.setAttribute( 'x1', this.getMinPx() );
-    this.line.setAttribute( 'x2', this.getMaxPx() );
-    this.line.setAttribute( 'y1', 0 );
-    this.line.setAttribute( 'y2', 0 );
+    this.line.setAttribute('x1', this.getMinPx());
+    this.line.setAttribute('x2', this.getMaxPx());
+    this.line.setAttribute('y1', 0);
+    this.line.setAttribute('y2', 0);
 
@@ -913,6 +900,6 @@ var widthPx = this.maxPx - this.minPx;
 
-    this.rect.setAttribute( 'width', widthPx );
-    this.rect.setAttribute( 'x', this.minPx );
+    this.rect.setAttribute('width', widthPx);
+    this.rect.setAttribute('x', this.minPx);
 
-    if ( !maxVal || !minVal ) {
+    if (!maxVal || !minVal) {
       return 0;
@@ -923,14 +910,12 @@ }
 
-    for ( i = 0; i < axisFormat.length; i++ ) {
+    for (i = 0; i < axisFormat.length; i++) {
+      if (axisFormat[i].threshold > timePerPx) {
+        currentFormat = axisFormat[i];
 
-      if ( axisFormat[ i ].threshold > timePerPx ) {
-        currentFormat = axisFormat[ i ];
-
         break;
       }
-
     }
 
-    if ( !currentFormat ) {
-      currentFormat = axisFormat[ axisFormat.length - 1 ];
+    if (!currentFormat) {
+      currentFormat = axisFormat[axisFormat.length - 1];
     }
@@ -947,12 +932,11 @@
 
-    for ( level = 1; level <= 2; level++ ) {
-
-      if ( !util.isNumeric( minVal ) ) {
-        hideGroups( this, level, 0 );
+    for (level = 1; level <= 2; level++) {
+      if (!util.isNumeric(minVal)) {
+        hideGroups(this, level, 0);
         break;
       }
 
-      dateFirst = new Date( minVal );
+      dateFirst = new Date(minVal);
 
-      currentDate = roundDate( dateFirst, currentFormat.increments[ level ] );
+      currentDate = roundDate(dateFirst, currentFormat.increments[level]);
 
@@ -963,20 +947,30 @@ i = 0;
         /** @ignore */
-        text = getDateText( currentDate, currentFormat.increments[ level ].format );
-        group = getGroup( this, level, i );
+        text = getDateText(currentDate, currentFormat.increments[level].format);
+        group = getGroup(this, level, i);
 
-        xVal1 = this.getPx( currentDate.getTime() );
-        currentDate = incrementDate( currentDate, currentFormat.increments[ level ] );
-        xVal2 = this.getPx( currentDate.getTime() );
+        xVal1 = this.getPx(currentDate.getTime());
+        currentDate = incrementDate(
+          currentDate,
+          currentFormat.increments[level],
+        );
+        xVal2 = this.getPx(currentDate.getTime());
 
-        renderGroup( level, group, text, this.getMinPx(), this.getMaxPx(), xVal1, xVal2 );
+        renderGroup(
+          level,
+          group,
+          text,
+          this.getMinPx(),
+          this.getMaxPx(),
+          xVal1,
+          xVal2,
+        );
 
         i++;
-        if ( i > 100 ) {
+        if (i > 100) {
           break;
         }
-      } while ( currentDate.getTime() < maxVal );
+      } while (currentDate.getTime() < maxVal);
 
-      hideGroups( this, level, i );
+      hideGroups(this, level, i);
     }
-
   }
@@ -988,9 +982,14 @@
 
-  getWrapper( level ) {
-    return this.wrapper[ level ];
+  getWrapper(level) {
+    return this.wrapper[level];
   }
 
-  setShift( shift ) {
+  setShift(shift) {
     this.shift = shift;
-    this.group.setAttribute( 'transform', `translate(0 ${ this.top ? this.shift : ( this.graph.getDrawingHeight() - this.shift ) })` );
+    this.group.setAttribute(
+      'transform',
+      `translate(0 ${
+        this.top ? this.shift : this.graph.getDrawingHeight() - this.shift
+      })`,
+    );
   }
@@ -1003,6 +1002,5 @@
   setMinMaxFlipped() {
-
     var interval = this.maxPx - this.minPx;
-    var maxPx = interval * this.options.span[ 1 ] + this.minPx;
-    var minPx = interval * this.options.span[ 0 ] + this.minPx;
+    var maxPx = interval * this.options.span[1] + this.minPx;
+    var minPx = interval * this.options.span[0] + this.minPx;
 
@@ -1012,5 +1010,4 @@ this.minPxFlipped = this.isFlipped() ? maxPx : minPx;
   }
-
 }
 
-export default GraphTimeAxis;
+export default GraphTimeAxis;

src/graph.axis.y.js

@@ -1,3 +0,2 @@
-import Axis from './graph.axis.js';
-
+import Axis, { tickScaling } from './graph.axis';
 /**
@@ -8,397 +7,316 @@ * Generic constructor of a y axis
 class AxisY extends Axis {
-  constructor(graph, leftright, options) {
-    super(graph, leftright, options);
-    this.leftright = leftright;
-    this.left = leftright == 'left';
-  }
-
-  forceWidth(width) {
-    this.options.forcedWidth = width;
-    return this;
-  }
-
-  /**
-   *  @private
-   */
-  setAxisPosition(shift) {
-    this.shiftPosition = shift;
-  }
-
-  getAxisPosition() {
-    return this.shiftPosition || 0;
-  }
-
-  getAdditionalWidth() {
-    let pos = 0;
-    if (this.getLabel()) {
-      pos += this.graph.options.fontSize;
+    constructor(graph, leftright, options) {
+        super();
+        this.leftright = leftright;
+        this.left = leftright == 'left';
     }
-
-    if (this.isShown()) {
-      pos += Math.abs(this.tickMargin);
+    forceWidth(width) {
+        this.forcedWidth = width;
+        return this;
     }
-    return pos;
-  }
-
-  /**
-   *  @returns {Boolean} always ```false```
-   */
-  isX() {
-    return false;
-  }
-
-  /**
-   *  @returns {Boolean} always ```true```
-   */
-  isY() {
-    return true;
-  }
-
-  /**
-   *  @private
-   */
-  resetTicksLength() {
-    this.longestTick = [false, 0];
-  }
-
-  /**
-   *  @private
-   */
-  getMaxSizeTick() {
-    // Gives an extra margin of 5px
-    return this.longestTick && this.longestTick[0] ?
-      this.longestTick[0].getComputedTextLength() + 5 :
-      0; //(this.left ? 10 : 0);
-  }
-
-  draw() {
-    this.tickMargin = this.left ?
-      -5 - this.tickPx1 * this.tickScaling[1] :
-      2 - this.tickPx1 * this.tickScaling[1];
-    var tickWidth = super.draw(...arguments);
-    tickWidth += this.getAdditionalWidth();
-    this.drawSpecifics(tickWidth);
-
-    this.fullwidthlabel = tickWidth;
-
-    return tickWidth;
-  }
-
-  equalizePosition(width) {
-    this.placeLabel(this.left ? -width : width);
-
-    if (this.getLabel()) {
-      return width + this.graph.options.fontSize;
+    /**
+     *  @private
+     */
+    setAxisPosition(shift) {
+        this.shiftPosition = shift;
     }
-
-    return 0;
-  }
-
-  /**
-   *  @private
-   */
-  drawTick(value, level, options, forcedPos) {
-    let pos, tick, tickLabel;
-
-    pos = forcedPos || this.getPos(value);
-
-    if (pos == undefined || isNaN(pos)) {
-      return;
+    getAxisPosition() {
+        return this.shiftPosition || 0;
     }
-
-    tick = this.nextTick(level, (tick) => {
-      tick.setAttribute(
-        'x1',
-        (this.left ? 1 : -1) * this.tickPx1 * this.tickScaling[level]
-      );
-      tick.setAttribute(
-        'x2',
-        (this.left ? 1 : -1) * this.tickPx2 * this.tickScaling[level]
-      );
-
-      if (level == 1) {
-        tick.setAttribute('stroke', this.getPrimaryTicksColor());
-      } else {
-        tick.setAttribute('stroke', this.getSecondaryTicksColor());
-      }
-    });
-
-    tick.setAttribute('y1', pos);
-    tick.setAttribute('y2', pos);
-
-    this.nextGridLine(level == 1, 0, this.graph.getDrawingWidth(), pos, pos);
-
-    //  this.groupTicks.appendChild( tick );
-    if (level == 1 && this.options.tickLabel) {
-      tickLabel = this.nextTickLabel((tickLabel) => {
-        tickLabel.setAttribute(
-          'x',
-          this.tickMargin + this.options.tickLabelOffset
-        );
-        if (this.getTicksLabelColor() !== 'black') {
-          tickLabel.setAttribute('fill', this.getTicksLabelColor());
+    getAdditionalWidth() {
+        let pos = 0;
+        if (this.getLabel()) {
+            pos += this.graph.options.fontSize;
         }
-
-        if (this.left) {
-          tickLabel.setAttribute('text-anchor', 'end');
-        } else {
-          tickLabel.setAttribute('text-anchor', 'start');
+        if (this.isShown()) {
+            pos += Math.abs(this.tickMargin);
         }
-        tickLabel.style.dominantBaseline = 'central';
-      });
-
-      tickLabel.setAttribute('y', pos);
-      this.setTickContent(tickLabel, value, options);
-
-      if (String(tickLabel.textContent).length >= this.longestTick[1]) {
-        this.longestTick[0] = tickLabel;
-        this.longestTick[1] = String(tickLabel.textContent).length;
-      }
+        return pos;
     }
-  }
-
-  drawLabel() {
-    if (this.getLabelColor() !== 'black') {
-      this.label.setAttribute('fill', this.getLabelColor());
+    /**
+     *  @returns {Boolean} always ```false```
+     */
+    isX() {
+        return false;
     }
-
-    this.label.setAttribute('dominant-baseline', !this.left ? 'auto' : 'auto');
-    this.labelTspan.textContent = this.getLabel();
-  }
-
-  placeLabel(y) {
-    this.label.setAttribute(
-      'transform',
-      `translate(${y}, ${Math.abs(this.getMaxPx() + this.getMinPx()) /
-      2}) rotate(-90)`
-    );
-  }
-
-  /**
-   *  @private
-   */
-  drawSpecifics() {
-    // Place label correctly
-    //this.label.setAttribute('x', (this.getMaxPx() - this.getMinPx()) / 2);
-    /*
-    if ( !this.left ) {
-
-      this.labelTspan.style.dominantBaseline = 'hanging';
-      this.expTspan.style.dominantBaseline = 'hanging';
-      this.expTspanExp.style.dominantBaseline = 'hanging';
-
-      this.unitTspan.style.dominantBaseline = 'hanging';
-      this.preunitTspan.style.dominantBaseline = 'hanging';
+    /**
+     *  @returns {Boolean} always ```true```
+     */
+    isY() {
+        return true;
     }
-*/
-    this.line.setAttribute('y1', this.getMinPx());
-    this.line.setAttribute('y2', this.getMaxPx());
-    this.line.setAttribute('x1', 0);
-    this.line.setAttribute('x2', 0);
-
-    this.line.setAttribute('stroke', this.getAxisColor());
-
-    var span = this.getSpan();
-    this.line.setAttribute(
-      'marker-start', !this.options.splitMarks || span[0] == 0 ?
-      '' :
-      `url(#verticalsplit_${this.graph.getId()})`
-    );
-    this.line.setAttribute(
-      'marker-end', !this.options.splitMarks || span[1] == 1 ?
-      '' :
-      `url(#verticalsplit_${this.graph.getId()})`
-    );
-  }
-
-  /**
-   *  @private
-   */
-  setShift(shift) {
-    this.shift = shift;
-
-    if (!this.shift || !this.graph.getWidth()) {
-      return;
+    /**
+     *  @private
+     */
+    resetTicksLength() {
+        this.longestTick = [false, 0];
     }
-
-    let xshift = this.shift;
-    xshift = this.floating ?
-      xshift :
-      this.isLeft() ?
-        xshift :
-        this.graph.getWidth() -
-        this.graph.getPaddingRight() -
-        this.graph.getPaddingLeft() -
-        xshift;
-    this.group.setAttribute('transform', `translate( ${xshift} 0 )`);
-    this.drawLabel();
-  }
-
-  /**
-   *  @private
-   */
-  isLeft() {
-    return this.left;
-  }
-
-  /**
-   *  @private
-   */
-  isRight() {
-    return !this.left;
-  }
-
-  /**
-   *  @private
-   */
-  isFlipped() {
-    return !this.options.flipped;
-  }
-
-  /**
-   *  @private
-   */
-  _drawLine(pos, line) {
-    let px = this.getPx(pos);
-
-    if (!line) {
-      line = document.createElementNS(this.graph.ns, 'line');
-    } else {
-      line.setAttribute('display', 'initial');
+    /**
+     *  @private
+     */
+    getMaxSizeTick() {
+        // Gives an extra margin of 5px
+        return this.longestTick && this.longestTick[0]
+            ? this.longestTick[0].getComputedTextLength() + 5
+            : 0; //(this.left ? 10 : 0);
     }
-
-    line.setAttribute('y1', px);
-    line.setAttribute('y2', px);
-
-    line.setAttribute('x1', 0);
-    line.setAttribute('x2', this.graph.drawingSpaceWidth);
-
-    line.setAttribute('stroke', 'black');
-    this.group.appendChild(line);
-
-    return line;
-  }
-
-  _hideLine(line) {
-    if (!line) {
-      return;
+    draw() {
+        this.tickMargin = this.left
+            ? -5 - this.tickPx1 * tickScaling[1]
+            : 2 - this.tickPx1 * tickScaling[1];
+        var tickWidth = super.draw();
+        tickWidth += this.getAdditionalWidth();
+        this.drawSpecifics();
+        this.fullwidthlabel = tickWidth;
+        return tickWidth;
     }
-
-    line.setAttribute('display', 'none');
-  }
-
-  /**
-   *  @private
-   */
-  handleMouseMoveLocal(x, y) {
-    y -= this.graph.getPaddingTop();
-    this.mouseVal = this.getVal(y);
-  }
-
-  /**
-   * Scales the axis with respect to the series contained in an x axis
-   * @param {Axis} [ axis = graph.getXAxis() ] - The X axis to use as a reference
-   * @param {Serie} [ excludeSerie ] - A serie to exclude
-   * @param {Number} [ start = xaxis.getCurrentMin() ] - The start of the boundary
-   * @param {Number} [ end = xaxis.getCurrentMax() ] - The end of the boundary
-   * @param {Boolean} [ min = true ] - Adapt the min
-   * @param {Boolean} [ max = true ] - Adapt the max
-   * @returns {Axis} The current axis
-   */
-  scaleToFitAxis(axis, excludeSerie, start, end, min, max) {
-    //console.log( axis instanceof GraphAxis );
-    if (!axis || !axis.isX()) {
-      axis = this.graph.getXAxis();
+    equalizePosition(width) {
+        this.placeLabel(this.left ? -width : width);
+        if (this.getLabel()) {
+            return width + this.graph.options.fontSize;
+        }
+        return 0;
     }
-
-    if (isNaN(start)) {
-      start = axis.getCurrentMin();
+    /**
+     *  @private
+     */
+    drawTick(value, level, options, forcedPos) {
+        let pos, tick, tickLabel;
+        pos = forcedPos || this.getPos(value);
+        if (pos == undefined || isNaN(pos)) {
+            return;
+        }
+        tick = this.nextTick(level, (tick) => {
+            tick.setAttribute('x1', (this.left ? 1 : -1) * this.tickPx1 * this.tickScaling[level]);
+            tick.setAttribute('x2', (this.left ? 1 : -1) * this.tickPx2 * this.tickScaling[level]);
+            if (level == 1) {
+                tick.setAttribute('stroke', this.getPrimaryTicksColor());
+            }
+            else {
+                tick.setAttribute('stroke', this.getSecondaryTicksColor());
+            }
+        });
+        tick.setAttribute('y1', pos);
+        tick.setAttribute('y2', pos);
+        this.nextGridLine(level == 1, 0, this.graph.getDrawingWidth(), pos, pos);
+        //  this.groupTicks.appendChild( tick );
+        if (level == 1 && this.options.tickLabels) {
+            tickLabel = this.nextTickLabel((tickLabel) => {
+                tickLabel.setAttribute('x', this.tickMargin + this.options.tickLabelOffset);
+                if (this.getTicksLabelColor() !== 'black') {
+                    tickLabel.setAttribute('fill', this.getTicksLabelColor());
+                }
+                if (this.left) {
+                    tickLabel.setAttribute('text-anchor', 'end');
+                }
+                else {
+                    tickLabel.setAttribute('text-anchor', 'start');
+                }
+                tickLabel.style.dominantBaseline = 'central';
+            });
+            tickLabel.setAttribute('y', pos);
+            this.setTickContent(tickLabel, value, options);
+            if (String(tickLabel.textContent).length >= this.longestTick[1]) {
+                this.longestTick[0] = tickLabel;
+                this.longestTick[1] = String(tickLabel.textContent).length;
+            }
+        }
     }
-
-    if (isNaN(end)) {
-      end = axis.getCurrentMax();
+    drawLabel() {
+        if (this.getLabelColor() !== 'black') {
+            this.label.setAttribute('fill', this.getLabelColor());
+        }
+        this.label.setAttribute('dominant-baseline', !this.left ? 'auto' : 'auto');
+        this.labelTspan.textContent = this.getLabel();
     }
-
-    if (min === undefined) {
-      min = true;
+    placeLabel(y) {
+        this.label.setAttribute('transform', `translate(${y}, ${Math.abs(this.getMaxPx() + this.getMinPx()) / 2}) rotate(-90)`);
     }
-
-    if (max === undefined) {
-      max = true;
+    /**
+     *  @private
+     */
+    drawSpecifics() {
+        // Place label correctly
+        //this.label.setAttribute('x', (this.getMaxPx() - this.getMinPx()) / 2);
+        /*
+        if ( !this.left ) {
+    
+          this.labelTspan.style.dominantBaseline = 'hanging';
+          this.expTspan.style.dominantBaseline = 'hanging';
+          this.expTspanExp.style.dominantBaseline = 'hanging';
+    
+          this.unitTspan.style.dominantBaseline = 'hanging';
+          this.preunitTspan.style.dominantBaseline = 'hanging';
+        }
+    */
+        this.line.setAttribute('y1', String(this.getMinPx()));
+        this.line.setAttribute('y2', String(this.getMaxPx()));
+        this.line.setAttribute('x1', "0");
+        this.line.setAttribute('x2', "0");
+        this.line.setAttribute('stroke', this.getAxisColor());
+        var span = this.getSpan();
+        /*
+        this.line.setAttribute(
+          'marker-start',
+          !this.options.splitMarks || span[0] == 0
+            ? ''
+            : `url(#verticalsplit_${this.graph.getId()})`,
+        );
+        this.line.setAttribute(
+          'marker-end',
+          !this.options.splitMarks || span[1] == 1
+            ? ''
+            : `url(#verticalsplit_${this.graph.getId()})`,
+        );*/
     }
-
-    if (typeof excludeSerie == 'number') {
-      end = start;
-      start = excludeSerie;
-      excludeSerie = false;
+    /**
+     *  @private
+     */
+    setShift(shift) {
+        this.shift = shift;
+        if (!this.shift || !this.graph.getWidth()) {
+            return;
+        }
+        let xshift = this.shift;
+        xshift = this.floating
+            ? xshift
+            : this.isLeft()
+                ? xshift
+                : this.graph.getWidth() -
+                    this.graph.getPaddingRight() -
+                    this.graph.getPaddingLeft() -
+                    xshift;
+        this.group.setAttribute('transform', `translate( ${xshift} 0 )`);
+        this.drawLabel();
     }
-
-    var maxV = -Infinity,
-      minV = Infinity,
-      j = 0;
-
-    for (var i = 0, l = this.graph.series.length; i < l; i++) {
-      if (!this.graph.series[i].isShown()) {
-        continue;
-      }
-
-      if (this.graph.series[i] == excludeSerie) {
-        continue;
-      }
-
-      if (!(this.graph.series[i].getXAxis() == axis) ||
-        this.graph.series[i].getYAxis() !== this
-      ) {
-        continue;
-      }
-
-      j++;
-
-      maxV = max ? Math.max(maxV, this.graph.series[i].getMax(start, end)) : 0;
-      minV = min ? Math.min(minV, this.graph.series[i].getMin(start, end)) : 0;
+    /**
+     *  @private
+     */
+    isLeft() {
+        return this.left;
     }
-
-    if (j == 0) {
-      this.setMinMaxToFitSeries(); // No point was found
-    } else {
-      // If we wanted originally to resize min and max. Otherwise we use the current value
-      minV = min ? minV : this.getCurrentMin();
-      maxV = max ? maxV : this.getCurrentMax();
-
-      var interval = maxV - minV;
-
-      minV -= this.options.axisDataSpacing.min * interval;
-      maxV += this.options.axisDataSpacing.max * interval;
-
-      this._doZoomVal(minV, maxV);
+    /**
+     *  @private
+     */
+    isRight() {
+        return !this.left;
     }
-
-    return this;
-  }
-
-  /**
-   *  Caches the minimum px and maximum px position of the axis. Includes axis spans and flipping. Mostly used internally
-   *  @return {Axis} The current axis instance
-   */
-  setMinMaxFlipped() {
-    var interval = this.maxPx - this.minPx;
-
-    if (isNaN(interval)) {
-      return;
+    /**
+     *  @private
+     */
+    isFlipped() {
+        return !this.options.flipped;
     }
-
-    var maxPx =
-      this.maxPx - interval * this.options.span[0] - this.options.marginMin;
-    var minPx =
-      this.maxPx - interval * this.options.span[1] + this.options.marginMax;
-
-    this.minPxFlipped = this.isFlipped() ? maxPx : minPx;
-    this.maxPxFlipped = this.isFlipped() ? minPx : maxPx;
-  }
-
-  getZProj(zValue) {
-    return zValue * this.graph.options.zAxis.shiftY;
-  }
+    /**
+     *  @private
+     */
+    _drawLine(pos, line) {
+        let px = this.getPx(pos);
+        if (!line) {
+            line = document.createElementNS(this.graph.ns, 'line');
+        }
+        else {
+            line.setAttribute('display', 'initial');
+        }
+        line.setAttribute('y1', px);
+        line.setAttribute('y2', px);
+        line.setAttribute('x1', 0);
+        line.setAttribute('x2', this.graph.drawingSpaceWidth);
+        line.setAttribute('stroke', 'black');
+        this.group.appendChild(line);
+        return line;
+    }
+    _hideLine(line) {
+        if (!line) {
+            return;
+        }
+        line.setAttribute('display', 'none');
+    }
+    /**
+     *  @private
+     */
+    handleMouseMoveLocal(x, y) {
+        y -= this.graph.getPaddingTop();
+        this.mouseVal = this.getVal(y);
+    }
+    /**
+     * Scales the axis with respect to the series contained in an x axis
+     * @param {Axis} [ axis = graph.getXAxis() ] - The X axis to use as a reference
+     * @param {Serie} [ excludeSerie ] - A serie to exclude
+     * @param {Number} [ start = xaxis.getCurrentMin() ] - The start of the boundary
+     * @param {Number} [ end = xaxis.getCurrentMax() ] - The end of the boundary
+     * @param {Boolean} [ min = true ] - Adapt the min
+     * @param {Boolean} [ max = true ] - Adapt the max
+     * @returns {Axis} The current axis
+     */
+    scaleToFitAxis(axis, excludeSerie, start, end, min, max) {
+        //console.log( axis instanceof GraphAxis );
+        if (!axis || !axis.isX()) {
+            axis = this.graph.getXAxis();
+        }
+        if (isNaN(start)) {
+            start = axis.getCurrentMin();
+        }
+        if (isNaN(end)) {
+            end = axis.getCurrentMax();
+        }
+        if (min === undefined) {
+            min = true;
+        }
+        if (max === undefined) {
+            max = true;
+        }
+        if (typeof excludeSerie == 'number') {
+            end = start;
+            start = excludeSerie;
+            excludeSerie = false;
+        }
+        var maxV = -Infinity, minV = Infinity, j = 0;
+        for (var i = 0, l = this.graph.series.length; i < l; i++) {
+            if (!this.graph.series[i].isShown()) {
+                continue;
+            }
+            if (this.graph.series[i] == excludeSerie) {
+                continue;
+            }
+            if (!(this.graph.series[i].getXAxis() == axis) ||
+                this.graph.series[i].getYAxis() !== this) {
+                continue;
+            }
+            j++;
+            maxV = max ? Math.max(maxV, this.graph.series[i].getMax(start, end)) : 0;
+            minV = min ? Math.min(minV, this.graph.series[i].getMin(start, end)) : 0;
+        }
+        if (j == 0) {
+            this.setMinMaxToFitSeries(); // No point was found
+        }
+        else {
+            // If we wanted originally to resize min and max. Otherwise we use the current value
+            minV = min ? minV : this.getCurrentMin();
+            maxV = max ? maxV : this.getCurrentMax();
+            var interval = maxV - minV;
+            minV -= this.options.axisDataSpacing.min * interval;
+            maxV += this.options.axisDataSpacing.max * interval;
+            this._doZoomVal(minV, maxV, false);
+        }
+        return this;
+    }
+    /**
+     *  Caches the minimum px and maximum px position of the axis. Includes axis spans and flipping. Mostly used internally
+     *  @return {Axis} The current axis instance
+     */
+    setMinMaxFlipped() {
+        var interval = this.maxPx - this.minPx;
+        if (isNaN(interval)) {
+            return;
+        }
+        var maxPx = this.maxPx - interval * this.options.span[0] - this.options.marginMin;
+        var minPx = this.maxPx - interval * this.options.span[1] + this.options.marginMax;
+        this.minPxFlipped = this.isFlipped() ? maxPx : minPx;
+        this.maxPxFlipped = this.isFlipped() ? minPx : maxPx;
+    }
+    getZProj(zValue) {
+        return zValue * this.graph.options.zAxis.shiftY;
+    }
 }
-
-export default AxisY;
+export default AxisY;

src/graph.core.d.ts

@@ -0,1 +1,2 @@
+import { EventEmitter } from './mixins/graph.mixin.event.js';
 import { Waveform, WaveformHash } from './util/waveform';
@@ -17,3 +18,3 @@ import { SerieStyle, SERIE_TYPE } from '../types/series';
  */
-declare class Graph {
+declare class Graph extends EventEmitter {
     ns: string;
@@ -435,3 +436,3 @@ nsxlink: string;
     setBackgroundColor(color: string): this;
-    getAxisState(): Record<AxisPosition, [number, number][]>;
+    getAxisState(): Axes<[number, number]>;
     setAxisState(state: Axes<[Number, Number]>): void;
@@ -490,3 +491,3 @@ saveAxisState(savedName: string): this;
     findAxesLinkedTo(axis: any): any[];
-    _axisHasChanged(): void;
+    _axisHasChanged(axis: any): void;
     /**
@@ -503,3 +504,2 @@ * Creates a new serie.
     newSerie(name: string, options: any, type: SERIE_TYPE): any;
-    emit(arg0: string, ...args: any[]): void;
     /**
@@ -506,0 +506,0 @@ * Looks for an existing serie by name or by index and returns it.

src/graph.js

@@ -6,7 +6,5 @@ import Graph from './graph.core';
 import GraphLegend from './graph.legend.js';
+import AxisX from './graph.axis.x';
+import AxisY from './graph.axis.y';
 // @ts-ignore
-import AxisX from './graph.axis.x.js';
-// @ts-ignore
-import AxisY from './graph.axis.y.js';
-// @ts-ignore
 import AxisXBar from './graph.axis.x.bar.js';
@@ -13,0 +11,0 @@ // @ts-ignore

src/graph.legend.js

@@ -37,3 +37,3 @@ import GraphPosition from './graph.position.js';
   isSerieHideable: true,
-  isSerieSelectable: true
+  isSerieSelectable: true,
 };
@@ -87,3 +87,3 @@
       transformX: 0,
-      transformY: 0
+      transformY: 0,
     };
@@ -97,4 +97,3 @@
     var eyeClosed = util.SVGParser(
-      `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="${this.eyeCrossedId
-      }" viewBox="0 -256 1850 1850"><rect pointer-events="fill" fill="transparent" x="-256" y="0" width="2106" height="1850" /><g transform="matrix(1,0,0,-1,30.372881,1214.339)"><path d="m 555,201 78,141 q -87,63 -136,159 -49,96 -49,203 0,121 61,225 Q 280,812 128,576 295,318 555,201 z m 389,759 q 0,20 -14,34 -14,14 -34,14 -125,0 -214.5,-89.5 Q 592,829 592,704 q 0,-20 14,-34 14,-14 34,-14 20,0 34,14 14,14 14,34 0,86 61,147 61,61 147,61 20,0 34,14 14,14 14,34 z m 363,191 q 0,-7 -1,-9 Q 1201,954 991,576 781,198 675,9 l -49,-89 q -10,-16 -28,-16 -12,0 -134,70 -16,10 -16,28 0,12 44,87 Q 349,154 228.5,262 108,370 20,507 0,538 0,576 q 0,38 20,69 153,235 380,371 227,136 496,136 89,0 180,-17 l 54,97 q 10,16 28,16 5,0 18,-6 13,-6 31,-15.5 18,-9.5 33,-18.5 15,-9 31.5,-18.5 16.5,-9.5 19.5,-11.5 16,-10 16,-27 z m 37,-447 Q 1344,565 1265,450.5 1186,336 1056,286 l 280,502 q 8,-45 8,-84 z m 448,-128 q 0,-35 -20,-69 Q 1733,443 1663,362 1513,190 1315.5,95 1118,0 896,0 l 74,132 q 212,18 392.5,137 180.5,119 301.5,307 -115,179 -282,294 l 63,112 q 95,-64 182.5,-153 87.5,-89 144.5,-184 20,-34 20,-69 z" fill="#c0c0c0"></path></g></symbol></svg>`
+      `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="${this.eyeCrossedId}" viewBox="0 -256 1850 1850"><rect pointer-events="fill" fill="transparent" x="-256" y="0" width="2106" height="1850" /><g transform="matrix(1,0,0,-1,30.372881,1214.339)"><path d="m 555,201 78,141 q -87,63 -136,159 -49,96 -49,203 0,121 61,225 Q 280,812 128,576 295,318 555,201 z m 389,759 q 0,20 -14,34 -14,14 -34,14 -125,0 -214.5,-89.5 Q 592,829 592,704 q 0,-20 14,-34 14,-14 34,-14 20,0 34,14 14,14 14,34 0,86 61,147 61,61 147,61 20,0 34,14 14,14 14,34 z m 363,191 q 0,-7 -1,-9 Q 1201,954 991,576 781,198 675,9 l -49,-89 q -10,-16 -28,-16 -12,0 -134,70 -16,10 -16,28 0,12 44,87 Q 349,154 228.5,262 108,370 20,507 0,538 0,576 q 0,38 20,69 153,235 380,371 227,136 496,136 89,0 180,-17 l 54,97 q 10,16 28,16 5,0 18,-6 13,-6 31,-15.5 18,-9.5 33,-18.5 15,-9 31.5,-18.5 16.5,-9.5 19.5,-11.5 16,-10 16,-27 z m 37,-447 Q 1344,565 1265,450.5 1186,336 1056,286 l 280,502 q 8,-45 8,-84 z m 448,-128 q 0,-35 -20,-69 Q 1733,443 1663,362 1513,190 1315.5,95 1118,0 896,0 l 74,132 q 212,18 392.5,137 180.5,119 301.5,307 -115,179 -282,294 l 63,112 q 95,-64 182.5,-153 87.5,-89 144.5,-184 20,-34 20,-69 z" fill="#c0c0c0"></path></g></symbol></svg>`,
     );
@@ -116,4 +115,3 @@ //  var eyeClosed = util.SVGParser('<svg xmlns="http://www.w3.org/2000/svg"><symbol id="' + this.eyeId + '" viewBox="0 0 100 100"><rect fill="black" x="0" y="0" width="100" height="100" /></symbol></svg>');
     var eye = util.SVGParser(
-      `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="${this.eyeId
-      }" viewBox="0 -256 1850 1850"><rect pointer-events="fill" x="-256" y="0" fill="transparent" width="2106" height="1850" /><g transform="matrix(1,0,0,-1,30.372881,1259.8983)"><path d="m 1664,576 q -152,236 -381,353 61,-104 61,-225 0,-185 -131.5,-316.5 Q 1081,256 896,256 711,256 579.5,387.5 448,519 448,704 448,825 509,929 280,812 128,576 261,371 461.5,249.5 662,128 896,128 1130,128 1330.5,249.5 1531,371 1664,576 z M 944,960 q 0,20 -14,34 -14,14 -34,14 -125,0 -214.5,-89.5 Q 592,829 592,704 q 0,-20 14,-34 14,-14 34,-14 20,0 34,14 14,14 14,34 0,86 61,147 61,61 147,61 20,0 34,14 14,14 14,34 z m 848,-384 q 0,-34 -20,-69 Q 1632,277 1395.5,138.5 1159,0 896,0 633,0 396.5,139 160,278 20,507 0,542 0,576 q 0,34 20,69 140,229 376.5,368 236.5,139 499.5,139 263,0 499.5,-139 236.5,-139 376.5,-368 20,-35 20,-69 z" fill="#444444" /></g></symbol></svg>`
+      `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="${this.eyeId}" viewBox="0 -256 1850 1850"><rect pointer-events="fill" x="-256" y="0" fill="transparent" width="2106" height="1850" /><g transform="matrix(1,0,0,-1,30.372881,1259.8983)"><path d="m 1664,576 q -152,236 -381,353 61,-104 61,-225 0,-185 -131.5,-316.5 Q 1081,256 896,256 711,256 579.5,387.5 448,519 448,704 448,825 509,929 280,812 128,576 261,371 461.5,249.5 662,128 896,128 1130,128 1330.5,249.5 1531,371 1664,576 z M 944,960 q 0,20 -14,34 -14,14 -34,14 -125,0 -214.5,-89.5 Q 592,829 592,704 q 0,-20 14,-34 14,-14 34,-14 20,0 34,14 14,14 14,34 0,86 61,147 61,61 147,61 20,0 34,14 14,14 14,34 z m 848,-384 q 0,-34 -20,-69 Q 1632,277 1395.5,138.5 1159,0 896,0 633,0 396.5,139 160,278 20,507 0,542 0,576 q 0,34 20,69 140,229 376.5,368 236.5,139 499.5,139 263,0 499.5,-139 236.5,-139 376.5,-368 20,-35 20,-69 z" fill="#444444" /></g></symbol></svg>`,
     );
@@ -123,3 +121,3 @@
     this.svg.appendChild(
-      document.adoptNode(eyeClosed.documentElement.firstChild)
+      document.adoptNode(eyeClosed.documentElement.firstChild),
     );
@@ -156,3 +154,3 @@
       ['bottom', 'left', 'top', 'right'].indexOf(
-        (position = position.toLowerCase())
+        (position = position.toLowerCase()),
       ) > -1
@@ -173,3 +171,2 @@ ) {
   kill() {
-
     if (!this.autoPosition) {
@@ -253,4 +250,6 @@ this.graph.graphingZone.removeChild(this.getDom());
         // Try to center with respect to the drawing space, not the full graph. It's useful when the graph is fairly asymmetric (i.e. multiple axes on 1 side)
-        this.position.x = `${(this.graph.drawingSpaceWidth - this.width) / 2 +
-          this.graph.drawingSpaceMinX}px`;
+        this.position.x = `${
+          (this.graph.drawingSpaceWidth - this.width) / 2 +
+          this.graph.drawingSpaceMinX
+        }px`;
         this.alignToY = 'bottom';
@@ -275,4 +274,6 @@ this.alignToX = false;
       case 'top':
-        this.position.x = `${(this.graph.drawingSpaceWidth - this.width) / 2 +
-          this.graph.drawingSpaceMinX}px`;
+        this.position.x = `${
+          (this.graph.drawingSpaceWidth - this.width) / 2 +
+          this.graph.drawingSpaceMinX
+        }px`;
         this.position.y = '10px';
@@ -289,3 +290,2 @@ this.alignToY = 'top';
         return;
-
     }
@@ -297,3 +297,2 @@ if (this.autoPosition) {
           this.graph.options.paddingBottom = this.height + 10;
-
           redrawGraph = this.height !== this.previousHeight;
@@ -320,3 +319,2 @@ break;
       }
-
       if (redrawGraph) {
@@ -337,3 +335,3 @@ this.graph.draw(true);
       this.graph.getXAxis(),
-      this.graph.getYAxis()
+      this.graph.getYAxis(),
     );
@@ -455,3 +453,3 @@
           'xlink:href',
-          `#${series[i].isShown() ? this.eyeId : this.eyeCrossedId}`
+          `#${series[i].isShown() ? this.eyeId : this.eyeCrossedId}`,
         );
@@ -478,3 +476,3 @@ eyeUse.setAttribute('width', 15);
             'xlink:href',
-            `#${id}`
+            `#${id}`,
           );
@@ -659,3 +657,3 @@ });
         'transform',
-        `translate(${pos.transformX}, ${pos.transformY})`
+        `translate(${pos.transformX}, ${pos.transformY})`,
       );
@@ -673,3 +671,3 @@ }
         'stroke-width',
-        `${this.options.frameWidth}px`
+        `${this.options.frameWidth}px`,
       );
@@ -728,3 +726,3 @@ this.rectBottom.setAttribute('rx', this.options.frameRounding);
       x: 0,
-      y: 0
+      y: 0,
     };
@@ -734,2 +732,2 @@ }
 
-export default Legend;
+export default Legend;

src/graph.lru.js

@@ -0,0 +0,0 @@ var memory = {},

src/graph.position.js

@@ -0,0 +0,0 @@ function _parsePx( px ) {

src/graph.ts

@@ -6,7 +6,5 @@ import Graph from './graph.core';
 import GraphLegend from './graph.legend.js';
+import AxisX from './graph.axis.x';
+import AxisY from './graph.axis.y';
 // @ts-ignore
-import AxisX from './graph.axis.x.js';
-// @ts-ignore
-import AxisY from './graph.axis.y.js';
-// @ts-ignore
 import AxisXBar from './graph.axis.x.bar.js';
@@ -22,5 +20,4 @@ // @ts-ignore
 import SerieLine3D from './series/graph.serie.line.3d.js';
+import SerieBar from './series/graph.serie.bar';
 // @ts-ignore
-import SerieBar from './series/graph.serie.bar.js';
-// @ts-ignore
 import SerieBox from './series/graph.serie.box.js';
@@ -94,70 +91,70 @@ // @ts-ignore
 
-Graph.registerConstructor( 'graph.position', GraphPosition );
+Graph.registerConstructor('graph.position', GraphPosition);
 
-Graph.registerConstructor( 'graph.axis.x', AxisX );
-Graph.registerConstructor( 'graph.axis.y', AxisY );
-Graph.registerConstructor( 'graph.axis.x.bar', AxisXBar );
-Graph.registerConstructor( 'graph.axis.x.time', AxisXTime );
+Graph.registerConstructor('graph.axis.x', AxisX);
+Graph.registerConstructor('graph.axis.y', AxisY);
+Graph.registerConstructor('graph.axis.x.bar', AxisXBar);
+Graph.registerConstructor('graph.axis.x.time', AxisXTime);
 
-Graph.registerConstructor( 'graph.serie.line', SerieLine );
-Graph.registerConstructor( 'graph.serie.line.3d', SerieLine3D );
-Graph.registerConstructor( 'graph.serie.line.color', SerieLineColor );
-Graph.registerConstructor( 'graph.serie.contour', SerieContour );
-Graph.registerConstructor( 'graph.serie.histogram', SerieHistogram );
-Graph.registerConstructor( 'graph.serie.bar', SerieBar );
-Graph.registerConstructor( 'graph.serie.box', SerieBox );
-Graph.registerConstructor( 'graph.serie.scatter', SerieScatter );
-Graph.registerConstructor( 'graph.serie.zone', SerieZone );
-Graph.registerConstructor( 'graph.serie.zone.3d', SerieZone3D );
-Graph.registerConstructor( 'graph.serie.densitymap', SerieDensityMap );
+Graph.registerConstructor('graph.serie.line', SerieLine);
+Graph.registerConstructor('graph.serie.line.3d', SerieLine3D);
+Graph.registerConstructor('graph.serie.line.color', SerieLineColor);
+Graph.registerConstructor('graph.serie.contour', SerieContour);
+Graph.registerConstructor('graph.serie.histogram', SerieHistogram);
+Graph.registerConstructor('graph.serie.bar', SerieBar);
+Graph.registerConstructor('graph.serie.box', SerieBox);
+Graph.registerConstructor('graph.serie.scatter', SerieScatter);
+Graph.registerConstructor('graph.serie.zone', SerieZone);
+Graph.registerConstructor('graph.serie.zone.3d', SerieZone3D);
+Graph.registerConstructor('graph.serie.densitymap', SerieDensityMap);
 
 
-Graph.registerConstructor( SERIE_TYPE.LINE, SerieLine );
-Graph.registerConstructor( SERIE_TYPE.HISTOGRAM, SerieHistogram );
-Graph.registerConstructor( SERIE_TYPE.LINE_3D, SerieLine3D );
-Graph.registerConstructor( SERIE_TYPE.LINE_COLORED, SerieLineColor );
-Graph.registerConstructor( SERIE_TYPE.CONTOUR, SerieContour );
-Graph.registerConstructor( SERIE_TYPE.BAR, SerieBar );
-Graph.registerConstructor( SERIE_TYPE.BOX, SerieBox );
-Graph.registerConstructor( SERIE_TYPE.SCATTER, SerieScatter );
-Graph.registerConstructor( SERIE_TYPE.ZONE, SerieZone );
-Graph.registerConstructor( SERIE_TYPE.ZONE_3D, SerieZone3D );
-Graph.registerConstructor( SERIE_TYPE.DENSITY_MAP, SerieDensityMap );
+Graph.registerConstructor(SERIE_TYPE.LINE, SerieLine);
+Graph.registerConstructor(SERIE_TYPE.HISTOGRAM, SerieHistogram);
+Graph.registerConstructor(SERIE_TYPE.LINE_3D, SerieLine3D);
+Graph.registerConstructor(SERIE_TYPE.LINE_COLORED, SerieLineColor);
+Graph.registerConstructor(SERIE_TYPE.CONTOUR, SerieContour);
+Graph.registerConstructor(SERIE_TYPE.BAR, SerieBar);
+Graph.registerConstructor(SERIE_TYPE.BOX, SerieBox);
+Graph.registerConstructor(SERIE_TYPE.SCATTER, SerieScatter);
+Graph.registerConstructor(SERIE_TYPE.ZONE, SerieZone);
+Graph.registerConstructor(SERIE_TYPE.ZONE_3D, SerieZone3D);
+Graph.registerConstructor(SERIE_TYPE.DENSITY_MAP, SerieDensityMap);
 
 //Graph.registerConstructor( "graph.serie.line.broken", GraphSerieLineBroken );
 
-Graph.registerConstructor( 'graph.plugin.shape', GraphPluginShape );
-Graph.registerConstructor( 'graph.plugin.drag', GraphPluginDrag );
-Graph.registerConstructor( 'graph.plugin.zoom', GraphPluginZoom );
-Graph.registerConstructor( 'graph.plugin.selectScatter', GraphPluginSelectScatter );
-Graph.registerConstructor( 'graph.plugin.timeSerieManager', GraphPluginTimeSerieManager );
-Graph.registerConstructor( 'graph.plugin.serielinedifference', GraphPluginSerieLineDifference );
-Graph.registerConstructor( 'graph.plugin.serieLineDifference', GraphPluginSerieLineDifference );
-Graph.registerConstructor( 'graph.plugin.axissplitting', GraphPluginAxisSplitting );
-Graph.registerConstructor( 'graph.plugin.makeTracesDifferent', GraphPluginMakeTracesDifferent );
-Graph.registerConstructor( 'graph.plugin.peakPicking', GraphPluginPeakPicking );
+Graph.registerConstructor('graph.plugin.shape', GraphPluginShape);
+Graph.registerConstructor('graph.plugin.drag', GraphPluginDrag);
+Graph.registerConstructor('graph.plugin.zoom', GraphPluginZoom);
+Graph.registerConstructor('graph.plugin.selectScatter', GraphPluginSelectScatter);
+Graph.registerConstructor('graph.plugin.timeSerieManager', GraphPluginTimeSerieManager);
+Graph.registerConstructor('graph.plugin.serielinedifference', GraphPluginSerieLineDifference);
+Graph.registerConstructor('graph.plugin.serieLineDifference', GraphPluginSerieLineDifference);
+Graph.registerConstructor('graph.plugin.axissplitting', GraphPluginAxisSplitting);
+Graph.registerConstructor('graph.plugin.makeTracesDifferent', GraphPluginMakeTracesDifferent);
+Graph.registerConstructor('graph.plugin.peakPicking', GraphPluginPeakPicking);
 
-Graph.registerConstructor( 'graph.shape', Shape );
-Graph.registerConstructor( 'graph.shape.areaundercurve', ShapeAreaUnderCurve );
-Graph.registerConstructor( 'graph.shape.arrow', ShapeArrow );
-Graph.registerConstructor( 'graph.shape.ellipse', ShapeEllipse );
-Graph.registerConstructor( 'graph.shape.polygon', ShapePolygon );
-Graph.registerConstructor( 'graph.shape.label', ShapeLabel );
-Graph.registerConstructor( 'graph.shape.polyline', ShapePolyline );
-Graph.registerConstructor( 'graph.shape.line', ShapeLine );
-Graph.registerConstructor( 'graph.shape.nmrintegral', ShapeNMRIntegral );
-Graph.registerConstructor( 'graph.shape.html', ShapeHTML );
-Graph.registerConstructor( 'graph.shape.peakintegration2d', ShapePeakIntegration2D );
+Graph.registerConstructor('graph.shape', Shape);
+Graph.registerConstructor('graph.shape.areaundercurve', ShapeAreaUnderCurve);
+Graph.registerConstructor('graph.shape.arrow', ShapeArrow);
+Graph.registerConstructor('graph.shape.ellipse', ShapeEllipse);
+Graph.registerConstructor('graph.shape.polygon', ShapePolygon);
+Graph.registerConstructor('graph.shape.label', ShapeLabel);
+Graph.registerConstructor('graph.shape.polyline', ShapePolyline);
+Graph.registerConstructor('graph.shape.line', ShapeLine);
+Graph.registerConstructor('graph.shape.nmrintegral', ShapeNMRIntegral);
+Graph.registerConstructor('graph.shape.html', ShapeHTML);
+Graph.registerConstructor('graph.shape.peakintegration2d', ShapePeakIntegration2D);
 //  Graph.registerConstructor( "graph.shape.peakinterval", GraphShapePeakInterval );
 //  Graph.registerConstructor( "graph.shape.peakinterval2", GraphShapePeakInterval2 );
 //  Graph.registerConstructor( "graph.shape.rangex", GraphShapeRangeX );
-Graph.registerConstructor( 'graph.shape.rect', ShapeRect );
-Graph.registerConstructor( 'graph.shape.rectangle', ShapeRect );
-Graph.registerConstructor( 'graph.shape.cross', ShapeCross );
+Graph.registerConstructor('graph.shape.rect', ShapeRect);
+Graph.registerConstructor('graph.shape.rectangle', ShapeRect);
+Graph.registerConstructor('graph.shape.cross', ShapeCross);
 //Graph.registerConstructor( "graph.shape.zoom2d", GraphShapeZoom2D );
-Graph.registerConstructor( 'graph.shape.peakboundariescenter', ShapePeakBoundariesCenter );
+Graph.registerConstructor('graph.shape.peakboundariescenter', ShapePeakBoundariesCenter);
 
 //   Graph.registerConstructor( "graph.toolbar", GraphToolbar );
-Graph.registerConstructor( 'graph.legend', GraphLegend );
-Graph.registerConstructor( 'graph.waveform', Waveform );
+Graph.registerConstructor('graph.legend', GraphLegend);
+Graph.registerConstructor('graph.waveform', Waveform);
 
@@ -167,1 +164,3 @@
 export default Graph;
+
+

src/graph.util.js

@@ -7,12 +7,12 @@ /**
  */
-export function setAttributeTo( to, params, ns ) {
+export function setAttributeTo(to, params, ns) {
   var i;
 
-  if ( ns ) {
-    for ( i in params ) {
-      to.setAttributeNS( ns, i, params[ i ] );
+  if (ns) {
+    for (i in params) {
+      to.setAttributeNS(ns, i, params[i]);
     }
   } else {
-    for ( i in params ) {
-      to.setAttribute( i, params[ i ] );
+    for (i in params) {
+      to.setAttribute(i, params[i]);
     }
@@ -29,5 +29,4 @@ }
  */
-export function mapEventEmission( options, source ) {
-
-  if ( !source ) {
+export function mapEventEmission(options, source) {
+  if (!source) {
     source = this;
@@ -38,19 +37,15 @@ }
 
-  for ( var i in options ) {
-
+  for (var i in options) {
     // Starts with onXXX
-    if ( i.indexOf( 'on' ) == 0 && typeof options[ i ] == 'function' ) {
-      eventName = i.substring( 2 );
-      eventName = eventName.substring( 0, 1 ).toLowerCase() + eventName.substring( 1 );
+    if (i.indexOf('on') == 0 && typeof options[i] == 'function') {
+      eventName = i.substring(2);
+      eventName =
+        eventName.substring(0, 1).toLowerCase() + eventName.substring(1);
 
-      if ( source.on ) {
-
-        ( function( j ) {
-
-          source.on( eventName, function() {
-            options[ j ].apply( source, arguments );
-          } );
-
-        } )( i );
-
+      if (source.on) {
+        (function (j) {
+          source.on(eventName, function () {
+            options[j].apply(source, arguments);
+          });
+        })(i);
       }
@@ -67,16 +62,15 @@ }
   //
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( /[xy]/g, function( c ) {
-    var r = Math.random() * 16 | 0,
-      v = c == 'x' ? r : ( r & 0x3 | 0x8 );
-    return v.toString( 16 );
-  } );
-
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
 }
 
-export function throwError( message ) {
-  console.error( message );
+export function throwError(message) {
+  console.error(message);
 }
 
-export function warn( message ) {
-  console.warn( message );
+export function warn(message) {
+  console.warn(message);
 }
@@ -88,4 +82,4 @@
  */
-export function isNumeric( obj ) {
-  return !Array.isArray( obj ) && ( obj - parseFloat( obj ) + 1 ) >= 0;
+export function isNumeric(obj) {
+  return !Array.isArray(obj) && obj - parseFloat(obj) + 1 >= 0;
 }
@@ -105,36 +99,34 @@
  */
-export function hue2rgb( p, q, t ) {
-  if ( t < 0 ) t += 1;
-  if ( t > 1 ) t -= 1;
-  if ( t < 1 / 6 ) return p + ( q - p ) * 6 * t;
-  if ( t < 1 / 2 ) return q;
-  if ( t < 2 / 3 ) return p + ( q - p ) * ( 2 / 3 - t ) * 6;
+export function hue2rgb(p, q, t) {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
   return p;
 }
 
-export function hslToRgb( h, s, l ) {
+export function hslToRgb(h, s, l) {
   var r, g, b;
 
-  if ( s == 0 ) {
+  if (s == 0) {
     r = g = b = l; // achromatic
   } else {
-
-    var q = l < 0.5 ? l * ( 1 + s ) : l + s - l * s;
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
     var p = 2 * l - q;
-    r = hue2rgb( p, q, h + 1 / 3 );
-    g = hue2rgb( p, q, h );
-    b = hue2rgb( p, q, h - 1 / 3 );
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
   }
 
-  return [ Math.round( r * 255 ), Math.round( g * 255 ), Math.round( b * 255 ) ];
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
 }
 
-export function saveDomAttributes( to, attributes, identification ) {
+export function saveDomAttributes(to, attributes, identification) {
+  if (!to) return;
 
-  if ( !to ) return;
-
   to._savedAttributesIds = to._savedAttributesIds || [];
 
-  if ( to._savedAttributesIds.indexOf( identification ) > -1 ) {
-    restoreDomAttributes( to, identification );
+  if (to._savedAttributesIds.indexOf(identification) > -1) {
+    restoreDomAttributes(to, identification);
   }
@@ -144,91 +136,87 @@
   to._attributes = to._attributes || {};
-  to._attributes[ identification ] = attributes;
+  to._attributes[identification] = attributes;
 
-  to._savedAttributesIds.push( identification );
+  to._savedAttributesIds.push(identification);
 
-  for ( var i in attributes ) {
-
-    if ( !to._savedAttributes[ i ] ) {
-      to._savedAttributes[ i ] = to.getAttribute( i );
+  for (var i in attributes) {
+    if (!to._savedAttributes[i]) {
+      to._savedAttributes[i] = to.getAttribute(i);
     }
 
-    to.setAttribute( i, attributes[ i ] );
+    to.setAttribute(i, attributes[i]);
   }
-
 }
 
-export function hasSavedAttribute( dom, attr ) {
-  return dom._savedAttributes && dom._savedAttributes[ attr ] !== undefined;
+export function hasSavedAttribute(dom, attr) {
+  return dom._savedAttributes && dom._savedAttributes[attr] !== undefined;
 }
 
-export function overwriteDomAttribute( dom, attribute, newValue ) {
-  if ( hasSavedAttribute( dom, attribute ) ) {
-    dom._savedAttributes[ attribute ] = newValue;
+export function overwriteDomAttribute(dom, attribute, newValue) {
+  if (hasSavedAttribute(dom, attribute)) {
+    dom._savedAttributes[attribute] = newValue;
   }
 }
 
-export function restoreDomAttributes( to, identification ) {
-
-  if ( !to || !to._savedAttributesIds ) {
+export function restoreDomAttributes(to, identification) {
+  if (!to || !to._savedAttributesIds) {
     return;
   }
 
-  to._savedAttributesIds.splice( to._savedAttributesIds.indexOf( identification ), 1 );
-  delete to._attributes[ identification ];
+  to._savedAttributesIds.splice(
+    to._savedAttributesIds.indexOf(identification),
+    1,
+  );
+  delete to._attributes[identification];
 
   var attrs = {};
 
-  for ( var i in to._savedAttributes ) {
-    attrs[ i ] = to._savedAttributes[ i ];
+  for (var i in to._savedAttributes) {
+    attrs[i] = to._savedAttributes[i];
   }
 
-  for ( var i = 0, l = to._savedAttributesIds.length; i < l; i++ ) {
-
-    for ( var j in to._attributes[ to._savedAttributesIds[ i ] ] ) {
-      attrs[ j ] = to._attributes[ to._savedAttributesIds[ i ] ][ j ];
+  for (var i = 0, l = to._savedAttributesIds.length; i < l; i++) {
+    for (var j in to._attributes[to._savedAttributesIds[i]]) {
+      attrs[j] = to._attributes[to._savedAttributesIds[i]][j];
     }
   }
 
-  for ( var j in attrs ) {
-    to.setAttribute( j, attrs[ j ] );
+  for (var j in attrs) {
+    to.setAttribute(j, attrs[j]);
   }
-
 }
 
 // https://davidwalsh.name/function-debounce
-export function debounce( func, wait, immediate ) {
+export function debounce(func, wait, immediate) {
   var timeout;
-  return function() {
+  return function () {
     var context = this,
       args = arguments;
-    var later = function() {
+    var later = function () {
       timeout = null;
-      if ( !immediate ) func.apply( context, args );
+      if (!immediate) func.apply(context, args);
     };
     var callNow = immediate && !timeout;
-    clearTimeout( timeout );
-    timeout = setTimeout( later, wait );
-    if ( callNow ) func.apply( context, args );
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
   };
 }
 
-export function SVGParser( svgString ) {
-
+export function SVGParser(svgString) {
   var parser = new DOMParser();
-  var doc = parser.parseFromString( svgString, 'image/svg+xml' );
+  var doc = parser.parseFromString(svgString, 'image/svg+xml');
   // returns a SVGDocument, which also is a Document.
 
   return doc;
-
 }
 
 // http://stackoverflow.com/questions/5276953/what-is-the-most-efficient-way-to-reverse-an-array-in-javascript
-export function reverseArray( array ) {
+export function reverseArray(array) {
   var left = null;
   var right = null;
   var length = array.length;
-  for ( left = 0, right = length - 1; left < right; left += 1, right -= 1 ) {
-    var temporary = array[ left ];
-    array[ left ] = array[ right ];
-    array[ right ] = temporary;
+  for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
+    var temporary = array[left];
+    array[left] = array[right];
+    array[right] = temporary;
   }
@@ -239,7 +227,7 @@ return array;
 // jQuery.fn.offset
-export function getOffset( el ) {
+export function getOffset(el) {
   var rect = el.getBoundingClientRect();
   return {
     top: rect.top,
-    left: rect.left
+    left: rect.left,
   };
@@ -249,28 +237,28 @@ }
 // jQuery.fn.css
-export function setCSS( element, values ) {
+export function setCSS(element, values) {
   var style = element.style;
-  for ( var i in values ) {
-    style[ i ] = values[ i ];
+  for (var i in values) {
+    style[i] = values[i];
   }
 }
 
-export function ajaxGet( options ) {
-  return new Promise( function( resolve, reject ) {
+export function ajaxGet(options) {
+  return new Promise(function (resolve, reject) {
     var request = new XMLHttpRequest();
-    request.open( options.type || 'GET', options.url, true );
-    if ( options.json ) request.setRequestHeader( 'Accept', 'application/json' );
-    request.onload = function() {
-      if ( request.status === 200 ) {
+    request.open(options.type || 'GET', options.url, true);
+    if (options.json) request.setRequestHeader('Accept', 'application/json');
+    request.onload = function () {
+      if (request.status === 200) {
         var response = request.responseText;
-        if ( options.json ) response = JSON.parse( response );
-        resolve( response );
+        if (options.json) response = JSON.parse(response);
+        resolve(response);
       } else {
-        reject( new Error( `Request error: ${ request.status}` ) );
+        reject(new Error(`Request error: ${request.status}`));
       }
     };
-    request.onerror = function() {
-      reject( new Error( `Network error: ${ request.status}` ) );
+    request.onerror = function () {
+      reject(new Error(`Network error: ${request.status}`));
     };
     request.send();
-  } );
+  });
 }
@@ -283,19 +271,22 @@
 
-var isArray = function isArray( arr ) {
-  if ( typeof Array.isArray === 'function' ) {
-    return Array.isArray( arr );
+var isArray = function isArray(arr) {
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(arr);
   }
 
-  return toStr.call( arr ) === '[object Array]';
+  return toStr.call(arr) === '[object Array]';
 };
 
-var isPlainObject = function isPlainObject( obj ) {
-  if ( !obj || toStr.call( obj ) !== '[object Object]' ) {
+var isPlainObject = function isPlainObject(obj) {
+  if (!obj || toStr.call(obj) !== '[object Object]') {
     return false;
   }
 
-  var hasOwnConstructor = hasOwn.call( obj, 'constructor' );
-  var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call( obj.constructor.prototype, 'isPrototypeOf' );
+  var hasOwnConstructor = hasOwn.call(obj, 'constructor');
+  var hasIsPrototypeOf =
+    obj.constructor &&
+    obj.constructor.prototype &&
+    hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
   // Not own constructor property must be Object
-  if ( obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf ) {
+  if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
     return false;
@@ -307,7 +298,7 @@ }
   var key;
-  for ( key in obj ) {
+  for (key in obj) {
     /**/
   }
 
-  return typeof key === 'undefined' || hasOwn.call( obj, key );
+  return typeof key === 'undefined' || hasOwn.call(obj, key);
 };
@@ -317,3 +308,3 @@
   var options, name, src, copy, copyIsArray, clone;
-  var target = arguments[ 0 ];
+  var target = arguments[0];
   var i = 1;
@@ -324,37 +315,44 @@ var length = arguments.length;
   // Handle a deep copy situation
-  if ( typeof target === 'boolean' ) {
+  if (typeof target === 'boolean') {
     deep = target;
-    target = arguments[ 1 ] || {};
+    target = arguments[1] || {};
     // skip the boolean and the target
     i = 2;
-  } else if ( ( typeof target !== 'object' && typeof target !== 'function' ) || target == null ) {
+  } else if (
+    (typeof target !== 'object' && typeof target !== 'function') ||
+    target == null
+  ) {
     target = {};
   }
 
-  for ( ; i < length; ++i ) {
-    options = arguments[ i ];
+  for (; i < length; ++i) {
+    options = arguments[i];
     // Only deal with non-null/undefined values
-    if ( options != null ) {
+    if (options != null) {
       // Extend the base object
-      for ( name in options ) {
-        src = target[ name ];
-        copy = options[ name ];
+      for (name in options) {
+        src = target[name];
+        copy = options[name];
 
         // Prevent never-ending loop
-        if ( target !== copy ) {
+        if (target !== copy) {
           // Recurse if we're merging plain objects or arrays
-          if ( deep && copy && ( isPlainObject( copy ) || ( copyIsArray = isArray( copy ) ) ) ) {
-            if ( copyIsArray ) {
+          if (
+            deep &&
+            copy &&
+            (isPlainObject(copy) || (copyIsArray = isArray(copy)))
+          ) {
+            if (copyIsArray) {
               copyIsArray = false;
-              clone = src && isArray( src ) ? src : [];
+              clone = src && isArray(src) ? src : [];
             } else {
-              clone = src && isPlainObject( src ) ? src : {};
+              clone = src && isPlainObject(src) ? src : {};
             }
 
             // Never move original objects, clone them
-            target[ name ] = extend( deep, clone, copy );
+            target[name] = extend(deep, clone, copy);
 
             // Don't bring in undefined values
-          } else if ( typeof copy !== 'undefined' ) {
-            target[ name ] = copy;
+          } else if (typeof copy !== 'undefined') {
+            target[name] = copy;
           }
@@ -372,15 +370,9 @@ }
 
-export {
-  isArray
-};
-export {
-  isPlainObject
-};
+export { isArray };
+export { isPlainObject };
 
-export function mix( baseClass, mixin ) {
-
-  for ( let prop in mixin ) {
-
-    if ( mixin.hasOwnProperty( prop ) ) {
-      baseClass.prototype[ prop ] = mixin[ prop ];
+export function mix(baseClass, mixin) {
+  for (let prop in mixin) {
+    if (mixin.hasOwnProperty(prop)) {
+      baseClass.prototype[prop] = mixin[prop];
     }
@@ -390,6 +382,6 @@ }
 
-export function emptyDom( dom ) {
-  while ( dom.firstChild ) {
-    dom.removeChild( dom.firstChild );
+export function emptyDom(dom) {
+  while (dom.firstChild) {
+    dom.removeChild(dom.firstChild);
   }
-}
+}

src/mixins/graph.mixin.errorbars.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/mixins/graph.mixin.event_graph.js

 import {
   EventMixin,
   trigger
-} from './graph.mixin.event.js';
+} from './graph.mixin.event';
+
 let ExtendedEventMixin = (manglingName) => {
@@ -6,0 +7,0 @@

src/mixins/graph.mixin.event.js

@@ -1,73 +0,57 @@
-const trigger = function (eventName, ...params) {
-
-  if (this.__eventHandlers?.[eventName]) {
-    this.__eventHandlers[eventName].forEach(handler => handler.apply(this, params));
-  }
-
-  const allHandlers = this.__eventHandlers?.__all;
-  if (allHandlers) {
-    allHandlers.forEach(handler => handler.apply(this, [eventName, ...params]));
-  }
-};
-
-const EventMixin = {
-
-  on(eventName, handler) {
-
-    if (!this.__eventHandlers) {
-      this.__eventHandlers = {};
-    }
-
-    if (!this.__eventHandlers[eventName]) {
-      this.__eventHandlers[eventName] = [];
-    }
-
-    this.__eventHandlers[eventName].push(handler);
-    return this;
-  },
-
-  off(eventName, handler) {
-    let handlers = this.__eventHandlers?.[eventName];
-    if (!handlers) {
-      return;
-    }
-
-    if (!handler) {
-      handlers = []; // Reset the array and let the GC recycle all the handlers
-    } else {
-
-      for (let i = 0, l = handlers.length; i < l; i++) {
-        if (handlers[i] == handler) {
-          handlers.splice(i--, 1);
+function EventMixin(Base) {
+    return class EventMixing extends Base {
+        on(eventName, handler) {
+            if (!this.__eventHandlers) {
+                this.__eventHandlers = {};
+            }
+            if (!this.__eventHandlers[eventName]) {
+                this.__eventHandlers[eventName] = [];
+            }
+            this.__eventHandlers[eventName].push(handler);
+            return this;
         }
-      }
-    }
-    return this;
-  },
-
-  onAll(handler) {
-    return this.on('__all', handler);
-  },
-
-  ofAll(handler) {
-    return this.off('__all', handler);
-  },
-
-  trigger(...args) {
-    trigger.apply(this, args);
-    return this;
-  },
-
-  emit(eventName, ...params) {
-    return this.trigger(eventName, ...params);
-  }
+        off(eventName, handler) {
+            var _a;
+            let handlers = (_a = this.__eventHandlers) === null || _a === void 0 ? void 0 : _a[eventName];
+            if (!handlers) {
+                return;
+            }
+            if (!handler) {
+                handlers = []; // Reset the array and let the GC recycle all the handlers
+            }
+            else {
+                for (let i = 0, l = handlers.length; i < l; i++) {
+                    if (handlers[i] == handler) {
+                        handlers.splice(i--, 1);
+                    }
+                }
+            }
+            return this;
+        }
+        onAll(handler) {
+            return this.on('__all', handler);
+        }
+        ofAll(handler) {
+            return this.off('__all', handler);
+        }
+        trigger(eventName, ...params) {
+            var _a, _b;
+            if ((_a = this.__eventHandlers) === null || _a === void 0 ? void 0 : _a[eventName]) {
+                this.__eventHandlers[eventName].forEach(handler => handler.apply(this, params));
+            }
+            const allHandlers = (_b = this.__eventHandlers) === null || _b === void 0 ? void 0 : _b.__all;
+            if (allHandlers) {
+                allHandlers.forEach(handler => handler.apply(this, [eventName, ...params]));
+            }
+            return this;
+        }
+        emit(eventName, ...params) {
+            return this.trigger(eventName, ...Array.from(params));
+        }
+    };
 }
-
-export {
-  trigger,
-  EventMixin
-};
-
-export default (Obj) => {
-  Object.assign(Obj.prototype, EventMixin);
-};
+class B {
+}
+const EventEmitter = EventMixin(B);
+export default EventMixin;
+export { EventEmitter };

src/mixins/graph.mixin.serie3d.js

@@ -0,0 +0,0 @@ var Serie3DMixin = {

src/plugin.peakpicking.js

@@ -0,0 +0,0 @@ window.onload = function(){

src/plugins/graph.plugin.axissplitting.js

 import Graph from '../graph.core';
-import AxisX from '../graph.axis.x.js';
-import AxisY from '../graph.axis.y.js';
+import AxisX from '../graph.axis.x';
+import AxisY from '../graph.axis.y';
 import * as util from '../graph.util.js';
 import SerieLine from '../series/graph.serie.line';
 import SerieScatter from '../series/graph.serie.scatter';
-import Axis from '../graph.axis.js';
+import Axis from '../graph.axis';
 
@@ -12,5 +12,4 @@ import Plugin from './graph.plugin.js';
 class SerieLineExtended extends SerieLine {
-
   constructor() {
-    super( ...arguments );
+    super(...arguments);
 
@@ -23,10 +22,7 @@ this.subSeries = [];
   }
-
 }
 
 class SerieScatterExtended extends SerieScatter {
-
   constructor() {
-
-    super( ...arguments );
+    super(...arguments);
     this.subSeries = [];
@@ -40,7 +36,7 @@ }
   getMarkerForLegend() {
-    if ( !this.subSeries[ 0 ] ) {
+    if (!this.subSeries[0]) {
       return false;
     }
 
-    return this.subSeries[ 0 ].getMarkerForLegend();
+    return this.subSeries[0].getMarkerForLegend();
   }
@@ -65,80 +61,63 @@ }
   'getSymbolForLegend',
-  '_getSymbolForLegendContainer'
+  '_getSymbolForLegendContainer',
 ];
 var addMethods = [];
 
-Object.getOwnPropertyNames( SerieLine.prototype ).concat( addMethods ).map( function( i ) {
+Object.getOwnPropertyNames(SerieLine.prototype)
+  .concat(addMethods)
+  .map(function (i) {
+    if (excludingMethods.indexOf(i) > -1) {
+      return;
+    }
 
-  if ( excludingMethods.indexOf( i ) > -1 ) {
-    return;
-  }
+    SerieLineExtended.prototype[i] = (function (j) {
+      return function () {
+        var args = arguments;
+        this.subSeries.map((subSerie) => {
+          subSerie[j](...args);
+        });
+      };
+    })(i);
+  });
 
-  SerieLineExtended.prototype[ i ] = ( function( j ) {
+var returnMethods = ['getSymbolForLegend'];
 
-    return function() {
+var addMethods = ['_getSymbolForLegendContainer'];
 
-      var args = arguments;
-      this.subSeries.map( ( subSerie ) => {
-        subSerie[ j ]( ...args );
-      } );
-    };
-
-  } )( i );
-} );
-
-var returnMethods = [
-  'getSymbolForLegend'
-];
-
-var addMethods = [
-  '_getSymbolForLegendContainer'
-];
-
-Object.getOwnPropertyNames( SerieLine.prototype ).map( function( i ) {
-
-  if ( returnMethods.indexOf( i ) == -1 ) {
+Object.getOwnPropertyNames(SerieLine.prototype).map(function (i) {
+  if (returnMethods.indexOf(i) == -1) {
     return;
   }
 
-  SerieLineExtended.prototype[ i ] = ( function( j ) {
-
-    return function() {
+  SerieLineExtended.prototype[i] = (function (j) {
+    return function () {
       var args = arguments;
-      return this.subSeries[ 0 ][ j ]( ...args );
+      return this.subSeries[0][j](...args);
     };
+  })(i);
 
-  } )( i );
-
-  SerieScatterExtended.prototype[ i ] = ( function( j ) {
-
-    return function() {
+  SerieScatterExtended.prototype[i] = (function (j) {
+    return function () {
       var args = arguments;
-      return this.subSeries[ 0 ][ j ]( ...args );
+      return this.subSeries[0][j](...args);
     };
+  })(i);
+});
 
-  } )( i );
-} );
-
-addMethods.map( ( method ) => {
-
-  SerieLineExtended.prototype[ method ] = ( function( j ) {
-
-    return function() {
+addMethods.map((method) => {
+  SerieLineExtended.prototype[method] = (function (j) {
+    return function () {
       var args = arguments;
-      return this.subSeries[ 0 ][ j ]( ...args );
+      return this.subSeries[0][j](...args);
     };
+  })(method);
 
-  } )( method );
-
-  SerieScatterExtended.prototype[ method ] = ( function( j ) {
-
-    return function() {
+  SerieScatterExtended.prototype[method] = (function (j) {
+    return function () {
       var args = arguments;
-      return this.subSeries[ 0 ][ j ]( ...args );
+      return this.subSeries[0][j](...args);
     };
+  })(method);
+});
 
-  } )( method );
-
-} );
-
 /**
@@ -149,11 +128,8 @@ * Axis splitting plugin
 class PluginAxisSplitting extends Plugin {
-
-  constructor( options ) {
-    super( ...arguments );
+  constructor(options) {
+    super(...arguments);
     this.series = new Map();
   }
 
-  static
-  default () {
-
+  static default() {
     return {
@@ -163,9 +139,9 @@ axes: {
           high: 5,
-          low: 5
-        }
-      }
+          low: 5,
+        },
+      },
     };
   }
 
-  init( graph ) {
+  init(graph) {
     this.graph = graph;
@@ -179,4 +155,4 @@ }
    */
-  newXAxis( options ) {
-    return this.newBottomAxis( options );
+  newXAxis(options) {
+    return this.newBottomAxis(options);
   }
@@ -189,4 +165,4 @@
    */
-  newYAxis( options ) {
-    return this.newLeftAxis( options );
+  newYAxis(options) {
+    return this.newLeftAxis(options);
   }
@@ -199,5 +175,5 @@
    */
-  newTopAxis( options ) {
-    options = this.getOptions( options );
-    return new SplitXAxis( this.graph, 'top', options );
+  newTopAxis(options) {
+    options = this.getOptions(options);
+    return new SplitXAxis(this.graph, 'top', options);
   }
@@ -210,5 +186,5 @@
    */
-  newBottomAxis( options ) {
-    options = this.getOptions( options );
-    return new SplitXAxis( this.graph, 'bottom', options );
+  newBottomAxis(options) {
+    options = this.getOptions(options);
+    return new SplitXAxis(this.graph, 'bottom', options);
   }
@@ -221,5 +197,5 @@
    */
-  newLeftAxis( options ) {
-    options = this.getOptions( options );
-    return new SplitYAxis( this.graph, 'left', options );
+  newLeftAxis(options) {
+    options = this.getOptions(options);
+    return new SplitYAxis(this.graph, 'left', options);
   }
@@ -232,8 +208,8 @@
    */
-  newRightAxis( options ) {
-    options = this.getOptions( options );
-    return new SplitYAxis( this.graph, 'right', options );
+  newRightAxis(options) {
+    options = this.getOptions(options);
+    return new SplitYAxis(this.graph, 'right', options);
   }
 
-  getOptions( options ) {
+  getOptions(options) {
     var defaults = {
@@ -243,14 +219,10 @@ marginMin: this.options.axes.margins.low,
     };
-    return util.extend( true, defaults, options );
+    return util.extend(true, defaults, options);
   }
 
   preDraw() {
-
     var xAxis, yAxis;
 
     //    for ( let { serie } of this.series.values() ) {
-    this.series.forEach( ( {
-      serie
-    } ) => {
-
+    this.series.forEach(({ serie }) => {
       xAxis = serie.getXAxis();
@@ -261,16 +233,19 @@ yAxis = serie.getYAxis();
 
-      if ( xAxis.splitNumber ) {
+      if (xAxis.splitNumber) {
         splits *= xAxis.splitNumber;
       }
 
-      if ( yAxis.splitNumber ) {
+      if (yAxis.splitNumber) {
         splits *= yAxis.splitNumber;
       }
 
-      while ( serie.subSeries.length < splits ) {
+      while (serie.subSeries.length < splits) {
+        const name = `${serie.getName()}_${serie.subSeries.length}`;
 
-        const name = `${serie.getName() }_${ serie.subSeries.length}`;
+        const s = this.graph.newSerie(
+          name,
+          {},
+          serie.getType() || Graph.SERIE_LINE,
+        );
 
-        const s = this.graph.newSerie( name, {}, serie.getType() || Graph.SERIE_LINE );
-
         s.excludedFromLegend = true;
@@ -280,3 +255,3 @@ s.styles = serie.styles;
 
-        if ( serie.getType() == Graph.SERIE_LINE ) {
+        if (serie.getType() == Graph.SERIE_LINE) {
           s.markerPoints = serie.markerPoints;
@@ -286,22 +261,22 @@ s.markerFamilies = serie.markerFamilies;
 
-        serie.subSeries.push( s );
+        serie.subSeries.push(s);
         serie.postInit();
       }
 
-      while ( serie.subSeries.length > splits ) {
+      while (serie.subSeries.length > splits) {
+        let subserie = this.graph.getSerie(
+          `${serie.getName()}_${serie.subSeries.length - 1}`,
+        );
 
-        let subserie = this.graph.getSerie( `${serie.getName() }_${ serie.subSeries.length - 1}` );
-
-        if ( subserie && subserie.kill ) {
+        if (subserie && subserie.kill) {
           subserie.kill();
         }
         serie.subSeries.pop();
-
       }
 
-      if ( !serie.getXAxis().splitNumber && serie.getXAxis().splitAxis ) {
+      if (!serie.getXAxis().splitNumber && serie.getXAxis().splitAxis) {
         serie.getXAxis().splitAxis();
       }
 
-      if ( !serie.getYAxis().splitNumber && serie.getYAxis().splitAxis ) {
+      if (!serie.getYAxis().splitNumber && serie.getYAxis().splitAxis) {
         serie.getYAxis().splitAxis();
@@ -311,4 +286,3 @@ }
       // Re-assign axes to the sub series
-      serie.subSeries.map( ( sserie, index ) => {
-
+      serie.subSeries.map((sserie, index) => {
         var xSubAxis, ySubAxis;
@@ -318,5 +292,5 @@
 
-        if ( serie.getXAxis().getSubAxis ) {
-          let subAxisIndex = index % ( ( xAxis.splitNumber || 1 ) );
-          xSubAxis = serie.getXAxis().getSubAxis( subAxisIndex );
+        if (serie.getXAxis().getSubAxis) {
+          let subAxisIndex = index % (xAxis.splitNumber || 1);
+          xSubAxis = serie.getXAxis().getSubAxis(subAxisIndex);
         } else {
@@ -326,8 +300,7 @@ xSubAxis = serie.getXAxis();
 
-        sserie.setXAxis( xSubAxis );
+        sserie.setXAxis(xSubAxis);
 
-        if ( serie.getYAxis().getSubAxis ) {
-
-          let subAxisIndex = Math.floor( index / ( ( xAxis.splitNumber || 1 ) ) );
-          ySubAxis = serie.getYAxis().getSubAxis( subAxisIndex );
+        if (serie.getYAxis().getSubAxis) {
+          let subAxisIndex = Math.floor(index / (xAxis.splitNumber || 1));
+          ySubAxis = serie.getYAxis().getSubAxis(subAxisIndex);
         } else {
@@ -337,10 +310,8 @@ ySubAxis = serie.getYAxis();
 
-        sserie.setYAxis( ySubAxis );
+        sserie.setYAxis(ySubAxis);
 
-        sserie.draw( true );
-      } );
+        sserie.draw(true);
+      });
       //}
-
-    } );
-
+    });
   }
@@ -355,16 +326,14 @@
    */
-  newSerie( name, options = {}, type ) {
-
-    switch ( type ) {
-
+  newSerie(name, options = {}, type) {
+    switch (type) {
       case 'line':
-        return this.newLineSerie( name, options );
+        return this.newLineSerie(name, options);
         break;
 
       case 'scatter':
-        return this.newScatterSerie( name, options );
+        return this.newScatterSerie(name, options);
         break;
     }
 
-    throw `Cannot create a split serie of type ${ type}`;
+    throw `Cannot create a split serie of type ${type}`;
   }
@@ -378,9 +347,9 @@
    */
-  newLineSerie( name, options ) {
+  newLineSerie(name, options) {
     var serieObj = {
       type: 'lineSerie',
-      serie: new SerieLineExtended( this.graph, name, options, 'line' )
+      serie: new SerieLineExtended(this.graph, name, options, 'line'),
     };
-    this.series.set( name, serieObj );
-    this.graph.series.push( serieObj.serie );
+    this.series.set(name, serieObj);
+    this.graph.series.push(serieObj.serie);
     return serieObj.serie;
@@ -395,22 +364,19 @@ }
    */
-  newScatterSerie( name, options ) {
+  newScatterSerie(name, options) {
     var serieObj = {
       type: 'scatterSerie',
-      serie: new SerieScatterExtended( this.graph, name, options, 'scatter' )
+      serie: new SerieScatterExtended(this.graph, name, options, 'scatter'),
     };
-    this.series.set( name, serieObj );
-    this.graph.series.push( serieObj.serie );
+    this.series.set(name, serieObj);
+    this.graph.series.push(serieObj.serie);
     return serieObj.serie;
   }
-
 }
 
 var defaultAxisConstructorOptions = {
-  splitMarks: true
+  splitMarks: true,
 };
 
-var SplitAxis = function( mixin ) {
-
+var SplitAxis = function (mixin) {
   var delegateMethods = [
-
     'turnGridsOff',
@@ -453,3 +419,3 @@ 'turnGridsOn',
     'hide',
-    'setDisplay'
+    'setDisplay',
   ];
@@ -465,9 +431,12 @@
   var cl = class SplitAxis extends mixin {
-
-    constructor( graph, position, options = {} ) {
-
-      super( graph, position, options );
+    constructor(graph, position, options = {}) {
+      super(graph, position, options);
       this.axes = [];
       this.position = position;
-      this.constructorOptions = util.extend( true, {}, defaultAxisConstructorOptions, options );
+      this.constructorOptions = util.extend(
+        true,
+        {},
+        defaultAxisConstructorOptions,
+        options,
+      );
 
@@ -482,9 +451,8 @@ this._splitVal = [];
      */
-    all( callback ) {
-
-      if ( !( typeof callback == 'function' ) ) {
+    all(callback) {
+      if (!(typeof callback == 'function')) {
         return;
       }
 
-      this.axes.map( callback );
+      this.axes.map(callback);
       return this;
@@ -499,16 +467,19 @@ }
      */
-    splitAxis( ...splits ) {
-
-      splits.push( 1 );
+    splitAxis(...splits) {
+      splits.push(1);
       let splitNumber = splits.length;
 
-      while ( this.axes.length > splitNumber ) {
-        this.axes.pop().kill( true, true );
+      while (this.axes.length > splitNumber) {
+        this.axes.pop().kill(true, true);
       }
 
-      while ( this.axes.length < splitNumber ) {
-        let axis = new( this.getConstructor() )( this.graph, this.position, this.constructorOptions );
-        this.axes.push( axis );
+      while (this.axes.length < splitNumber) {
+        let axis = new (this.getConstructor())(
+          this.graph,
+          this.position,
+          this.constructorOptions,
+        );
+        this.axes.push(axis);
         axis.zoomLock = true;
-        axis.init( this.graph, this.constructorOptions );
+        axis.init(this.graph, this.constructorOptions);
       }
@@ -518,16 +489,15 @@
       let i = 0;
-      for ( let axis of this.axes ) {
-
+      for (let axis of this.axes) {
         axis.options.marginMin = 10;
         axis.options.marginMax = 10;
 
-        if ( i == 0 ) {
+        if (i == 0) {
           axis.options.marginMin = 0;
         }
 
-        if ( i == this.axes.length - 1 ) {
+        if (i == this.axes.length - 1) {
           axis.options.marginMax = 0;
         }
 
-        axis.setSpan( from, ( from = splits[ i ] ) );
+        axis.setSpan(from, (from = splits[i]));
         axis.setMinMaxFlipped();
@@ -546,4 +516,3 @@ i++;
      */
-    fixGridIntervalBasedOnAxis( axisIndex ) {
-
+    fixGridIntervalBasedOnAxis(axisIndex) {
       this.fixGridFor = axisIndex;
@@ -559,3 +528,3 @@ this.graph._axisHasChanged();
      */
-    splitSpread( bln ) {
+    splitSpread(bln) {
       this.autoSpread = !!bln;
@@ -565,22 +534,20 @@ return this;
 
-    hasAxis( axis ) {
-      return this.axes.indexOf( axis ) > -1;
+    hasAxis(axis) {
+      return this.axes.indexOf(axis) > -1;
     }
 
     _splitSpread() {
-
       let splits = [],
         total = 0,
         currentSplit = 0;
-      for ( let split of this._splitVal ) {
-        total += split[ 1 ] - split[ 0 ];
+      for (let split of this._splitVal) {
+        total += split[1] - split[0];
       }
 
-      for ( let split of this._splitVal ) {
-
-        splits.push( currentSplit += ( split[ 1 ] - split[ 0 ] ) / total );
+      for (let split of this._splitVal) {
+        splits.push((currentSplit += (split[1] - split[0]) / total));
       }
 
       splits.pop();
-      this.splitAxis( ...splits );
+      this.splitAxis(...splits);
     }
@@ -595,4 +562,3 @@
      */
-    setChunkBoundaries( values ) {
-
+    setChunkBoundaries(values) {
       let index = 0,
@@ -602,22 +568,23 @@ baseWidth,
 
-      for ( let axis of this.axes ) { // List all axes
+      for (let axis of this.axes) {
+        // List all axes
 
         // Two elements in the array => becomes the new reference
-        if ( Array.isArray( values[ index ] ) && values[ index ].length > 1 && !baseWidth ) {
-          baseWidth = values[ index ][ 1 ] - values[ index ][ 0 ];
+        if (
+          Array.isArray(values[index]) &&
+          values[index].length > 1 &&
+          !baseWidth
+        ) {
+          baseWidth = values[index][1] - values[index][0];
           baseWidthIndex = index;
         }
 
-        if ( values[ index ].length == 1 || !Array.isArray( values[ index ] ) ) {
-          axis._mean = values[ index ];
+        if (values[index].length == 1 || !Array.isArray(values[index])) {
+          axis._mean = values[index];
 
-          if ( Array.isArray( axis._mean ) ) {
-            axis._mean = axis._mean[ 0 ];
+          if (Array.isArray(axis._mean)) {
+            axis._mean = axis._mean[0];
           }
-
         } else {
-
-          axis
-            .forceMin( values[ index ][ 0 ] )
-            .forceMax( values[ index ][ 1 ] );
+          axis.forceMin(values[index][0]).forceMax(values[index][1]);
         }
@@ -639,11 +606,11 @@
     setMinMaxToFitSeries() {
+      if (!this._splitVal || this._splitVal.length < 1) {
+        super.setMinMaxToFitSeries(...arguments);
+        this._splitVal[0] = this._splitVal[0] || [];
+        this._splitVal[this._splitVal.length - 1] =
+          this._splitVal[this._splitVal.length - 1] || [];
 
-      if ( !this._splitVal || this._splitVal.length < 1 ) {
-        super.setMinMaxToFitSeries( ...arguments );
-        this._splitVal[ 0 ] = this._splitVal[ 0 ] || [];
-        this._splitVal[ this._splitVal.length - 1 ] = this._splitVal[ this._splitVal.length - 1 ] || [];
-
-        this._splitVal[ 0 ][ 0 ] = this.getCurrentMin();
-        this._splitVal[ this._splitVal.length - 1 ][ 1 ] = this.getCurrentMax();
-        this.setChunkBoundaries( this._splitVal );
+        this._splitVal[0][0] = this.getCurrentMin();
+        this._splitVal[this._splitVal.length - 1][1] = this.getCurrentMax();
+        this.setChunkBoundaries(this._splitVal);
       }
@@ -653,4 +620,3 @@ }
     draw() {
-
-      if ( this.autoSpread ) {
+      if (this.autoSpread) {
         this._splitSpread();
@@ -664,3 +630,6 @@ }
 
-      if ( this._baseWidthIndex >= 0 && ( subAxis = this.getSubAxis( this._baseWidthIndex ) ) ) {
+      if (
+        this._baseWidthIndex >= 0 &&
+        (subAxis = this.getSubAxis(this._baseWidthIndex))
+      ) {
         spanReference = subAxis.getSpan();
@@ -671,8 +640,13 @@ }
 
-      if ( this.fixGridFor >= 0 && ( subAxis = this.getSubAxis( this.fixGridFor ) ) ) {
-
-        if ( subAxis._mean !== undefined ) {
-          let width = ( subAxis.getSpan()[ 1 ] - subAxis.getSpan()[ 0 ] ) / ( spanReference[ 1 ] - spanReference[ 0 ] ) * this._baseWidthVal;
-          subAxis.forceMin( subAxis._mean - width / 2 );
-          subAxis.forceMax( subAxis._mean + width / 2 );
+      if (
+        this.fixGridFor >= 0 &&
+        (subAxis = this.getSubAxis(this.fixGridFor))
+      ) {
+        if (subAxis._mean !== undefined) {
+          let width =
+            ((subAxis.getSpan()[1] - subAxis.getSpan()[0]) /
+              (spanReference[1] - spanReference[0])) *
+            this._baseWidthVal;
+          subAxis.forceMin(subAxis._mean - width / 2);
+          subAxis.forceMax(subAxis._mean + width / 2);
         }
@@ -684,22 +658,23 @@
 
-      this.axes.map( ( axis ) => {
-
-        if ( subAxis === axis ) {
+      this.axes.map((axis) => {
+        if (subAxis === axis) {
           return;
         }
 
-        if ( axis._mean !== undefined ) {
-          let width = ( axis.getSpan()[ 1 ] - axis.getSpan()[ 0 ] ) / ( spanReference[ 1 ] - spanReference[ 0 ] ) * this._baseWidthVal;
-          axis.forceMin( axis._mean - width / 2 );
-          axis.forceMax( axis._mean + width / 2 );
+        if (axis._mean !== undefined) {
+          let width =
+            ((axis.getSpan()[1] - axis.getSpan()[0]) /
+              (spanReference[1] - spanReference[0])) *
+            this._baseWidthVal;
+          axis.forceMin(axis._mean - width / 2);
+          axis.forceMax(axis._mean + width / 2);
         }
 
-        if ( unit ) {
-          axis.forcePrimaryTickUnit( unit );
+        if (unit) {
+          axis.forcePrimaryTickUnit(unit);
         }
 
-        max = Math.max( max, axis.draw() );
+        max = Math.max(max, axis.draw());
+      });
 
-      } );
-
       //    this.drawLabel();
@@ -711,16 +686,14 @@ this.writeUnit();
 
-    setMinPx( min ) {
-
-      super.setMinPx( min );
-      for ( let axis of this.axes ) {
-        axis.setMinPx( min );
+    setMinPx(min) {
+      super.setMinPx(min);
+      for (let axis of this.axes) {
+        axis.setMinPx(min);
       }
     }
 
-    setMaxPx( max ) {
+    setMaxPx(max) {
+      super.setMaxPx(max);
 
-      super.setMaxPx( max );
-
-      for ( let axis of this.axes ) {
-        axis.setMaxPx( max );
+      for (let axis of this.axes) {
+        axis.setMaxPx(max);
       }
@@ -730,7 +703,6 @@ }
     setShift() {
+      super.setShift(...arguments);
 
-      super.setShift( ...arguments );
-
-      for ( let axis of this.axes ) {
-        axis.setShift( ...arguments );
+      for (let axis of this.axes) {
+        axis.setShift(...arguments);
       }
@@ -740,3 +712,3 @@ }
     init() {
-      super.init( ...arguments );
+      super.init(...arguments);
       this.splitAxis();
@@ -748,5 +720,5 @@ }
 
-      this.axes.map( ( axis ) => {
-        max = Math.max( max, axis.getAxisPosition() );
-      } );
+      this.axes.map((axis) => {
+        max = Math.max(max, axis.getAxisPosition());
+      });
 
@@ -756,9 +728,8 @@ return max;
 
-    getSubAxis( index ) {
-
-      if ( this.axes.length <= index ) {
-        throw `Impossible to reach axis. Index ${ index } is out of range`;
+    getSubAxis(index) {
+      if (this.axes.length <= index) {
+        throw `Impossible to reach axis. Index ${index} is out of range`;
       }
 
-      return this.axes[ index ];
+      return this.axes[index];
     }
@@ -771,25 +742,21 @@
 
-  delegateMethods.map( ( methodName ) => {
-
-    cl.prototype[ methodName ] = ( function( method ) {
-
-      return function() {
+  delegateMethods.map((methodName) => {
+    cl.prototype[methodName] = (function (method) {
+      return function () {
         //super[ method ]( ...arguments )
 
-        this.axes.map( ( axis ) => {
-          axis[ method ]( ...arguments );
-        } );
+        this.axes.map((axis) => {
+          axis[method](...arguments);
+        });
         return this;
       };
+    })(methodName);
+  });
 
-    } )( methodName );
-  } );
-
   return cl;
 };
 
-class SplitXAxis extends SplitAxis( AxisX ) {
-
-  constructor( graph, topbottom, options ) {
-    super( ...arguments );
+class SplitXAxis extends SplitAxis(AxisX) {
+  constructor(graph, topbottom, options) {
+    super(...arguments);
     this.topbottom = topbottom;
@@ -803,7 +770,7 @@ }
   getAxisPosition() {
-    var max = super.getAxisPosition( ...arguments );
+    var max = super.getAxisPosition(...arguments);
 
     this.labelPosY = max;
 
-    if ( this.getLabel() ) {
+    if (this.getLabel()) {
       max += this.graph.options.fontSize;
@@ -817,17 +784,18 @@ }
     super.drawLabel();
-    this.label.setAttribute( 'y', ( this.top ? -1 : 1 ) * ( this.graph.options.fontSize + this.labelPosY ) );
+    this.label.setAttribute(
+      'y',
+      (this.top ? -1 : 1) * (this.graph.options.fontSize + this.labelPosY),
+    );
   }
 
   draw() {
-    var height = super.draw( ...arguments );
+    var height = super.draw(...arguments);
     this.drawLabel();
     return height;
   }
-
 }
 
-class SplitYAxis extends SplitAxis( AxisY ) {
-
-  constructor( graph, leftright, options ) {
-    super( ...arguments );
+class SplitYAxis extends SplitAxis(AxisY) {
+  constructor(graph, leftright, options) {
+    super(...arguments);
     ///this.leftright = leftright;
@@ -855,24 +823,22 @@ }
 
-  equalizePosition( width ) {
-
+  equalizePosition(width) {
     var widthAfter = width;
 
-    if ( this.getLabel() ) {
-      this.axes.map( ( axis ) => {
-        widthAfter = Math.max( axis.equalizePosition( width ), widthAfter );
-      } ); // Extra shift allowed for the label
+    if (this.getLabel()) {
+      this.axes.map((axis) => {
+        widthAfter = Math.max(axis.equalizePosition(width), widthAfter);
+      }); // Extra shift allowed for the label
       //this.setShift( this.graph.options.fontSize );
     }
 
-    if ( this.getLabel() ) {
-      this.placeLabel( this.left ? -widthAfter : widthAfter );
+    if (this.getLabel()) {
+      this.placeLabel(this.left ? -widthAfter : widthAfter);
       return widthAfter + this.graph.options.fontSize;
     }
   }
-
 }
 
-util.mix( SplitXAxis, new AxisX() );
-util.mix( SplitYAxis, new AxisY() );
+util.mix(SplitXAxis, new AxisX());
+util.mix(SplitYAxis, new AxisY());
 
-export default PluginAxisSplitting;
+export default PluginAxisSplitting;

src/plugins/graph.plugin.drag.js

@@ -0,0 +0,0 @@ import Plugin from './graph.plugin.js';

src/plugins/graph.plugin.js

@@ -0,0 +0,0 @@ import EventMixin from '../mixins/graph.mixin.event_graph.js'

src/plugins/graph.plugin.makeTracesDifferent.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/plugins/graph.plugin.peakpicking.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/plugins/graph.plugin.selectScatter.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/plugins/graph.plugin.serielinedifference.js

@@ -0,0 +0,0 @@ import {

src/plugins/graph.plugin.shape.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/plugins/graph.plugin.timeseriemanager.js

@@ -0,0 +0,0 @@ import Graph from '../graph.core';

src/plugins/graph.plugin.zoom.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/renderer/annotations.js

@@ -0,0 +0,0 @@ const makeAnnotation = (graph, json, serie, axes) => {

src/renderer/axes.js

 const processAxes = (Graph, graph, type, axisOptions, allAxes) => {
-
   if (!Array.isArray(axisOptions)) {
@@ -78,2 +77,2 @@ axisOptions = [axisOptions];
 
-export default makeAxes;
+export default makeAxes;

src/renderer/main.js

@@ -0,0 +0,0 @@ import serieStyle from './style.js';

src/renderer/mixin.js

@@ -0,0 +0,0 @@ import graphFromJson from './main.js';

src/renderer/style.js

@@ -0,0 +0,0 @@ const setMarkerStyle = ( serie, style, styleName ) => {

src/series/graph.serie.contour.js

@@ -13,6 +13,5 @@ import * as util from '../graph.util.js';
 class SerieContour extends SerieLine {
+  constructor(graph, name, options) {
+    super(...arguments);
 
-  constructor( graph, name, options ) {
-    super( ...arguments );
-
     this.negativeDelta = 0;
@@ -24,3 +23,3 @@ this.positiveDelta = 0;
 
-    this.groupMain.setAttribute( 'clip-path', `url(#_clipplot${ graph._creation })` );
+    this.groupMain.setAttribute('clip-path', `url(#_clipplot${graph.uid})`);
   }
@@ -41,14 +40,17 @@
    */
-  setData( data, arg, type ) {
-
+  setData(data, arg, type) {
     var z = 0;
-    var x, dx, arg = arg || '2D',
+    var x,
+      dx,
+      arg = arg || '2D',
       type = type || 'float',
-      i, l = data.length,
-      j, k,
-      arr, datas = [];
+      i,
+      l = data.length,
+      j,
+      k,
+      arr,
+      datas = [];
 
-    if ( !( data instanceof Array ) ) {
-
-      if ( typeof data == 'object' ) {
+    if (!(data instanceof Array)) {
+      if (typeof data == 'object') {
         // Def v2
@@ -65,18 +67,17 @@ this.minX = data.minX;
 
-    for ( i = 0; i < l; i++ ) {
-      k = data[ i ].lines.length;
-      arr = this._addData( type, k );
+    for (i = 0; i < l; i++) {
+      k = data[i].lines.length;
+      arr = this._addData(type, k);
 
-      for ( j = 0; j < k; j += 2 ) {
-
-        arr[ j ] = data[ i ].lines[ j ];
-        this._checkX( arr[ j ] );
-        arr[ j + 1 ] = data[ i ].lines[ j + 1 ];
-        this._checkY( arr[ j + 1 ] );
+      for (j = 0; j < k; j += 2) {
+        arr[j] = data[i].lines[j];
+        this._checkX(arr[j]);
+        arr[j + 1] = data[i].lines[j + 1];
+        this._checkY(arr[j + 1]);
       }
 
-      datas.push( {
+      datas.push({
         lines: arr,
-        zValue: data[ i ].zValue
-      } );
+        zValue: data[i].zValue,
+      });
     }
@@ -86,3 +87,3 @@ this.data = datas;
 
-    this.dataHasChanged( true );
+    this.dataHasChanged(true);
 
@@ -98,11 +99,19 @@ return this;
    */
-  draw( force ) {
-
-    if ( force || this.hasDataChanged() ) {
-
+  draw(force) {
+    if (force || this.hasDataChanged()) {
       this.currentLine = 0;
-      var x, y, xpx, ypx, xpx2, ypx2, i = 0,
+      var x,
+        y,
+        xpx,
+        ypx,
+        xpx2,
+        ypx2,
+        i = 0,
         l = this.data.length,
         j = 0,
-        k, m, currentLine, domLine, arr;
+        k,
+        m,
+        currentLine,
+        domLine,
+        arr;
       this.minZ = Infinity;
@@ -112,3 +121,3 @@ this.maxZ = -Infinity;
       var next = this.groupLines.nextSibling;
-      this.groupMain.removeChild( this.groupLines );
+      this.groupMain.removeChild(this.groupLines);
       this.zValues = {};
@@ -118,3 +127,3 @@
       var incrYFlip = 1;
-      if ( this.getFlip() ) {
+      if (this.getFlip()) {
         incrXFlip = 0;
@@ -133,3 +142,3 @@ incrYFlip = 1;
 
-      for ( ; i < l; i++ ) {
+      for (; i < l; i++) {
         this.currentLine = '';
@@ -139,17 +148,21 @@ j = 0;
 
-        for ( arr = this.data[ i ].lines, m = arr.length; j < m; j += 4 ) {
-
+        for (arr = this.data[i].lines, m = arr.length; j < m; j += 4) {
           var lastxpx, lastypx;
 
-          if ( ( arr[ j + incrXFlip ] < minX && arr[ j + 2 + incrXFlip ] < minX ) || ( arr[ j + incrYFlip ] < minY && arr[ j + 2 + incrYFlip ] < minY ) || ( arr[ j + incrYFlip ] > maxY && arr[ j + 2 + incrYFlip ] > maxY || ( arr[ j + incrXFlip ] > maxX && arr[ j + 2 + incrXFlip ] > maxX ) ) ) {
+          if (
+            (arr[j + incrXFlip] < minX && arr[j + 2 + incrXFlip] < minX) ||
+            (arr[j + incrYFlip] < minY && arr[j + 2 + incrYFlip] < minY) ||
+            (arr[j + incrYFlip] > maxY && arr[j + 2 + incrYFlip] > maxY) ||
+            (arr[j + incrXFlip] > maxX && arr[j + 2 + incrXFlip] > maxX)
+          ) {
             continue;
           }
 
-          xpx2 = this.getX( arr[ j + incrXFlip ] );
-          ypx2 = this.getY( arr[ j + incrYFlip ] );
+          xpx2 = this.getX(arr[j + incrXFlip]);
+          ypx2 = this.getY(arr[j + incrYFlip]);
 
-          xpx = this.getX( arr[ j + 2 + incrXFlip ] );
-          ypx = this.getY( arr[ j + 2 + incrYFlip ] );
+          xpx = this.getX(arr[j + 2 + incrXFlip]);
+          ypx = this.getY(arr[j + 2 + incrYFlip]);
 
-          if ( xpx == xpx2 && ypx == ypx2 ) {
+          if (xpx == xpx2 && ypx == ypx2) {
             continue;
@@ -186,10 +199,10 @@ }
         domLine = this._createLine();
-        domLine.setAttribute( 'data-zvalue', this.data[ i ].zValue );
+        domLine.setAttribute('data-zvalue', this.data[i].zValue);
 
-        this.zValues[ this.data[ i ].zValue ] = {
-          dom: domLine
+        this.zValues[this.data[i].zValue] = {
+          dom: domLine,
         };
 
-        this.minZ = Math.min( this.minZ, this.data[ i ].zValue );
-        this.maxZ = Math.max( this.maxZ, this.data[ i ].zValue );
+        this.minZ = Math.min(this.minZ, this.data[i].zValue);
+        this.maxZ = Math.max(this.maxZ, this.data[i].zValue);
       }
@@ -199,5 +212,5 @@
 
-      for ( i = this.currentLine + 1; i < this.lines.length; i++ ) {
-        this.groupLines.removeChild( this.lines[ i ] );
-        this.lines.splice( i, 1 );
+      for (i = this.currentLine + 1; i < this.lines.length; i++) {
+        this.groupLines.removeChild(this.lines[i]);
+        this.lines.splice(i, 1);
       }
@@ -207,83 +220,102 @@
 
-      for ( ; i < l; i++ ) {
-        this.setColorTo( this.lines[ i ], this.data[ i ].zValue, this.minZ, this.maxZ );
+      for (; i < l; i++) {
+        this.setColorTo(
+          this.lines[i],
+          this.data[i].zValue,
+          this.minZ,
+          this.maxZ,
+        );
       }
 
-      this.onMouseWheel( 0, {
-        shiftKey: false
-      } );
-      this.groupMain.insertBefore( this.groupLines, next );
-
-    } else if ( this.hasStyleChanged( this.selectionType ) ) {
-
-      for ( ; i < l; i++ ) {
-        this.setColorTo( this.lines[ i ], this.data[ i ].zValue, this.minZ, this.maxZ );
+      this.onMouseWheel(0, {
+        shiftKey: false,
+      });
+      this.groupMain.insertBefore(this.groupLines, next);
+    } else if (this.hasStyleChanged(this.selectionType)) {
+      for (; i < l; i++) {
+        this.setColorTo(
+          this.lines[i],
+          this.data[i].zValue,
+          this.minZ,
+          this.maxZ,
+        );
       }
-
     }
-
   }
 
-  onMouseWheel( delta, e, fixed, positive ) {
-
+  onMouseWheel(delta, e, fixed, positive) {
     delta /= 250;
 
-    if ( fixed !== undefined ) {
-
-      if ( !positive ) {
+    if (fixed !== undefined) {
+      if (!positive) {
         this.negativeThreshold = -fixed * this.minZ;
-        this.negativeDelta = -Math.pow( Math.abs( ( this.negativeThreshold / ( -this.minZ ) ) ), 1 / 3 );
+        this.negativeDelta = -Math.pow(
+          Math.abs(this.negativeThreshold / -this.minZ),
+          1 / 3,
+        );
       }
 
-      if ( positive ) {
+      if (positive) {
         this.positiveThreshold = fixed * this.maxZ;
-        this.positiveDelta = Math.pow( this.positiveThreshold / ( this.maxZ ), 1 / 3 );
+        this.positiveDelta = Math.pow(
+          this.positiveThreshold / this.maxZ,
+          1 / 3,
+        );
       }
-
     } else {
-
-      if ( ( !e.shiftKey ) || !this.options.hasNegative ) {
-
-        this.positiveDelta = Math.min( 1, Math.max( 0, this.positiveDelta + Math.min( 0.1, Math.max( -0.1, delta ) ) ) );
-        this.positiveThreshold = this.maxZ * ( Math.pow( this.positiveDelta, 3 ) );
-
+      if (!e.shiftKey || !this.options.hasNegative) {
+        this.positiveDelta = Math.min(
+          1,
+          Math.max(
+            0,
+            this.positiveDelta + Math.min(0.1, Math.max(-0.1, delta)),
+          ),
+        );
+        this.positiveThreshold = this.maxZ * Math.pow(this.positiveDelta, 3);
       } else {
-
-        this.negativeDelta = Math.min( 0, Math.max( -1, this.negativeDelta + Math.min( 0.1, Math.max( -0.1, delta ) ) ) );
-        this.negativeThreshold = -this.minZ * ( Math.pow( this.negativeDelta, 3 ) );
-
+        this.negativeDelta = Math.min(
+          0,
+          Math.max(
+            -1,
+            this.negativeDelta + Math.min(0.1, Math.max(-0.1, delta)),
+          ),
+        );
+        this.negativeThreshold = -this.minZ * Math.pow(this.negativeDelta, 3);
       }
-
     }
 
-    if ( isNaN( this.positiveDelta ) ) {
+    if (isNaN(this.positiveDelta)) {
       this.positiveDelta = 0;
     }
 
-    if ( isNaN( this.negativeDelta ) ) {
+    if (isNaN(this.negativeDelta)) {
       this.negativeDelta = 0;
     }
 
-    for ( var i in this.zValues ) {
-
-      this.zValues[ i ].dom.setAttribute( 'display', ( ( i >= 0 && i >= this.positiveThreshold ) || ( i <= 0 && i <= this.negativeThreshold ) ) ? 'block' : 'none' );
-
+    for (var i in this.zValues) {
+      this.zValues[i].dom.setAttribute(
+        'display',
+        (i >= 0 && i >= this.positiveThreshold) ||
+          (i <= 0 && i <= this.negativeThreshold)
+          ? 'block'
+          : 'none',
+      );
     }
 
-    if ( this._shapeZoom ) {
-
-      if ( !this.options.hasNegative ) {
+    if (this._shapeZoom) {
+      if (!this.options.hasNegative) {
         this._shapeZoom.hideHandleNeg();
       } else {
-
-        this._shapeZoom.setHandleNeg( -( Math.pow( this.negativeDelta, 3 ) ), this.minZ );
+        this._shapeZoom.setHandleNeg(
+          -Math.pow(this.negativeDelta, 3),
+          this.minZ,
+        );
         this._shapeZoom.showHandleNeg();
       }
 
-      this._shapeZoom.setHandlePos( ( Math.pow( this.positiveDelta, 3 ) ), this.maxZ );
+      this._shapeZoom.setHandlePos(Math.pow(this.positiveDelta, 3), this.maxZ);
     }
   }
 
-  handleMouseMove( xValue, doMarker, yValue ) {
-
+  handleMouseMove(xValue, doMarker, yValue) {
     var valX = xValue || this.getXAxis().getMouseVal(),
@@ -296,3 +328,3 @@ valY = yValue || this.getYAxis().getMouseVal();
       xClosest: valX,
-      yClosest: valY
+      yClosest: valY,
     };
@@ -328,3 +360,3 @@ }
    */
-  setDynamicColor( colors ) {
+  setDynamicColor(colors) {
     this.lineColors = colors;
@@ -335,6 +367,6 @@
 
-  setNegative( bln ) {
+  setNegative(bln) {
     this.options.hasNegative = bln;
 
-    if ( bln ) {
+    if (bln) {
       this.negativeThreshold = 0;
@@ -344,5 +376,4 @@ }
 
-  setColorTo( line, zValue, min, max ) {
-
-    if ( !this.lineColors ) {
+  setColorTo(line, zValue, min, max) {
+    if (!this.lineColors) {
       return;
@@ -354,11 +385,16 @@ }
       s: 0,
-      l: 0
+      l: 0,
     };
 
-    for ( var i in hsl ) {
-
-      if ( zValue > 0 ) {
-        hsl[ i ] = this.lineColors.fromPositive[ i ] + ( ( this.lineColors.toPositive[ i ] - this.lineColors.fromPositive[ i ] ) * ( zValue / max ) );
+    for (var i in hsl) {
+      if (zValue > 0) {
+        hsl[i] =
+          this.lineColors.fromPositive[i] +
+          (this.lineColors.toPositive[i] - this.lineColors.fromPositive[i]) *
+            (zValue / max);
       } else {
-        hsl[ i ] = this.lineColors.fromNegative[ i ] + ( ( this.lineColors.toNegative[ i ] - this.lineColors.fromNegative[ i ] ) * ( zValue / min ) );
+        hsl[i] =
+          this.lineColors.fromNegative[i] +
+          (this.lineColors.toNegative[i] - this.lineColors.fromNegative[i]) *
+            (zValue / min);
       }
@@ -369,24 +405,21 @@ }
 
-    var rgb = util.hslToRgb( hsl.h, hsl.s, hsl.l );
+    var rgb = util.hslToRgb(hsl.h, hsl.s, hsl.l);
 
-    line.setAttribute( 'stroke', `rgb(${ rgb.join() })` );
+    line.setAttribute('stroke', `rgb(${rgb.join()})`);
   }
 
   getSymbolForLegend() {
+    if (!this.lineForLegend) {
+      var line = document.createElementNS(this.graph.ns, 'ellipse');
 
-    if ( !this.lineForLegend ) {
+      line.setAttribute('cx', 7);
+      line.setAttribute('cy', 0);
+      line.setAttribute('rx', 8);
+      line.setAttribute('ry', 3);
 
-      var line = document.createElementNS( this.graph.ns, 'ellipse' );
-
-      line.setAttribute( 'cx', 7 );
-      line.setAttribute( 'cy', 0 );
-      line.setAttribute( 'rx', 8 );
-      line.setAttribute( 'ry', 3 );
-
-      line.setAttribute( 'cursor', 'pointer' );
+      line.setAttribute('cursor', 'pointer');
       this.lineForLegend = line;
-
     }
 
-    this.applyLineStyle( this.lineForLegend, this.maxZ );
+    this.applyLineStyle(this.lineForLegend, this.maxZ);
 
@@ -396,22 +429,31 @@ return this.lineForLegend;
 
-  applyLineStyle( line, overwriteValue ) {
-    line.setAttribute( 'stroke', this.getLineColor() );
-    line.setAttribute( 'stroke-width', this.getLineWidth() + ( this.isSelected() ? 2 : 0 ) );
-    if ( this.getLineDashArray() ) {
-      line.setAttribute( 'stroke-dasharray', this.getLineDashArray() );
+  applyLineStyle(line, overwriteValue) {
+    line.setAttribute('stroke', this.getLineColor());
+    line.setAttribute(
+      'stroke-width',
+      this.getLineWidth() + (this.isSelected() ? 2 : 0),
+    );
+    if (this.getLineDashArray()) {
+      line.setAttribute('stroke-dasharray', this.getLineDashArray());
     }
-    line.setAttribute( 'fill', 'none' );
+    line.setAttribute('fill', 'none');
 
-    this.setColorTo( line, ( ( overwriteValue !== undefined ) ? overwriteValue : line.getAttribute( 'data-zvalue' ) ), this.minZ, this.maxZ );
+    this.setColorTo(
+      line,
+      overwriteValue !== undefined
+        ? overwriteValue
+        : line.getAttribute('data-zvalue'),
+      this.minZ,
+      this.maxZ,
+    );
     //  line.setAttribute('shape-rendering', 'optimizeSpeed');
 
-    this.hasStyleChanged( false );
+    this.hasStyleChanged(false);
   }
 
-  setShapeZoom( shape ) {
+  setShapeZoom(shape) {
     this._shapeZoom = shape;
   }
-
 }
 
-export default SerieContour;
+export default SerieContour;

src/series/graph.serie.d.ts

@@ -0,8 +1,5 @@
+import { EventEmitter } from '../mixins/graph.mixin.event';
 import { SerieOptions, SerieStyle } from '../../types/series';
 import { Waveform } from '../util/waveform';
-/**
- * Serie class to be extended
- * @static
- */
-declare class Serie {
+declare class Serie extends EventEmitter {
     options: SerieOptions;
@@ -15,2 +12,3 @@ private graph;
     private _unselectedStyleName;
+    private _changedStyles;
     protected minX: number;
@@ -28,3 +26,3 @@ protected maxX: number;
     postInit(): void;
-    draw(): void;
+    draw(force: boolean): void;
     beforeDraw(): void;
@@ -38,8 +36,4 @@ afterDraw(): void;
      * @param{String} [ type=float ] - Specify the type of the data. Use <code>int</code> to save memory (half the amount of bytes allocated to the data).
-     * @example serie.setData( [ [ x1, y1 ], [ x2, y2 ], ... ] );
-     * @example serie.setData( [ x1, y1, x2, y2, ... ] ); // Faster
-     * @example serie.setData( [ [ x1, y1, x2, y2, ..., xn, yn ] , [ xm, ym, x(m + 1), y(m + 1), ...] ], true ) // 1D array with a gap in the middle
-     * @example serie.setData( { x: x0, dx: spacing, y: [ y1, y2, y3, y4 ] } ); // Data with equal x separation. Fastest way
-     */
-    setData(data: any, oneDimensional: any, type: any): this;
+    */
+    setData(data: Waveform): this;
     _addData(type: any, howmany: any): any[];
@@ -70,3 +64,3 @@ /**
      */
-    setOption(name: any, value: any): void;
+    setOption<T extends keyof SerieOptions>(name: T, value: SerieOptions[T]): void;
     /**
@@ -77,3 +71,3 @@ * Removes the serie from the graph. The method doesn't perform any axis autoscaling or repaint of the graph. This should be done manually.
      */
-    kill(noLegendUpdate: any): this;
+    kill(noLegendUpdate: boolean): this;
     /**
@@ -85,3 +79,3 @@ * Hides the serie
      */
-    hide(hideShapes?: any, mute?: boolean): this;
+    hide(hideShapes?: boolean, mute?: boolean): this;
     /**
@@ -93,3 +87,3 @@ * Shows the serie
      */
-    show(showShapes?: any, mute?: boolean): this;
+    show(showShapes?: boolean, mute?: boolean): this;
     hideImpl(): void;
@@ -149,2 +143,5 @@ showImpl(): void;
     autoAxis(): this;
+    /**
+     * @alias autoAxis
+     */
     autoAxes(): this;
@@ -220,3 +217,3 @@ /**
         [x: string]: {
-            base: string;
+            base?: string;
             data: SerieStyle;
@@ -264,3 +261,3 @@ };
      */
-    getLabel(): any;
+    getLabel(): string;
     /**
@@ -284,3 +281,3 @@ * Sets the label of the serie. Note that this does not automatically updates the legend
      */
-    getFlip(): any;
+    getFlip(): boolean;
     /**
@@ -290,3 +287,3 @@ * @alias Serie#getFlip
      */
-    isFlipped(): any;
+    isFlipped(): boolean;
     /**
@@ -304,3 +301,3 @@ * Sets the layer onto which the serie should be displayed. This method does not trigger a graph redraw.
      */
-    getLayer(): any;
+    getLayer(): number;
     /**
@@ -312,3 +309,3 @@ * Notifies jsGraph that the style of the serie has changed and needs to be redrawn on the next repaint
      */
-    styleHasChanged(selectionType?: string | boolean): this;
+    styleHasChanged(selectionType?: string | false): this;
     /**
@@ -327,3 +324,3 @@ * Checks if the style has changed for a selection type
      */
-    dataHasChanged(arg: any): this;
+    dataHasChanged(arg?: any): this;
     /**
@@ -330,0 +327,0 @@ * Checks if the data has changed

src/series/graph.serie.densitymap.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/series/graph.serie.histogram.js

 import { SERIE_TYPE } from '../../types/series';
 import { ns } from '../graph.core';
+import * as util from '../graph.util.js';
 import SerieLine from './graph.serie.line';
-import * as util from '../graph.util.js';
 const defaultOptions = {
@@ -79,3 +79,2 @@ markers: false,
     drawInit(force) {
-        var data, xData;
         try {
@@ -130,3 +129,8 @@ this.axisCheck();
             if (this.getXAxis()) {
-                this._calculateHistogram(this.waveform.getMinY(), this.waveform.getMaxY(), (this.waveform.getMaxY() - this.waveform.getMinY()) / 20);
+                let maxY = this.waveform.getMaxY(), minY = this.waveform.getMinY();
+                console.log(maxY, minY);
+                if (maxY == minY) {
+                    return;
+                }
+                this._calculateHistogram(minY, maxY, (maxY - minY));
             }
@@ -138,2 +142,3 @@ }
         try {
+            console.log(xMin, xMax, dX);
             this._histogramWaveform = this.waveform.calculateHistogram(xMin, xMax, dX);
@@ -144,5 +149,6 @@ this.minX = this.waveform.getMinY();
             this.maxY = this._histogramWaveform.getMax();
+            //console.log( this.minX, this.maxX, this.minY, this.maxY );
         }
         catch (e) {
-            console.warn("Could not calculate histogram");
+            //console.warn("Could not calculate histogram");
             // TODO: Signal that the serie is invalid and but soft fails the drawing
@@ -149,0 +155,0 @@ }

src/series/graph.serie.histogram.ts

@@ -18,3 +18,3 @@ import { SerieInterface, SERIE_TYPE } from '../../types/series';
 
-const defaultOptions: SerieHistogramOptions = {
+const defaultOptions: Partial<SerieHistogramOptions> = {
   markers: false,
@@ -21,0 +21,0 @@

src/series/graph.serie.js

@@ -1,2 +0,1 @@
-// @ts-nocheck
 import Graph, { ns } from '../graph.core';
@@ -6,3 +5,3 @@ // @ts-ignore
 // @ts-ignore
-import EventMixing from '../mixins/graph.mixin.event_graph.js';
+import { EventEmitter } from '../mixins/graph.mixin.event';
 // @ts-ignore
@@ -13,8 +12,5 @@ import { Waveform } from '../util/waveform';
 };
-/**
- * Serie class to be extended
- * @static
- */
-class Serie {
+class Serie extends EventEmitter {
     constructor(graph, name, options = {}) {
+        super();
         this.shown = true;
@@ -38,3 +34,5 @@ this.selected = false;
     postInit() { }
-    draw() { }
+    draw(force) {
+        throw new Error("Method draw must be implemented");
+    }
     beforeDraw() { }
@@ -55,8 +53,4 @@ afterDraw() {
      * @param{String} [ type=float ] - Specify the type of the data. Use <code>int</code> to save memory (half the amount of bytes allocated to the data).
-     * @example serie.setData( [ [ x1, y1 ], [ x2, y2 ], ... ] );
-     * @example serie.setData( [ x1, y1, x2, y2, ... ] ); // Faster
-     * @example serie.setData( [ [ x1, y1, x2, y2, ..., xn, yn ] , [ xm, ym, x(m + 1), y(m + 1), ...] ], true ) // 1D array with a gap in the middle
-     * @example serie.setData( { x: x0, dx: spacing, y: [ y1, y2, y3, y4 ] } ); // Data with equal x separation. Fastest way
-     */
-    setData(data, oneDimensional, type) {
+    */
+    setData(data) {
         if (data instanceof Waveform) {
@@ -279,7 +273,10 @@ return this.setWaveform(data);
         // After axes have been assigned, the graph axes should update their min/max
-        this.graph.updateDataMinMaxAxes();
+        this.graph.updateDataMinMaxAxes(false);
         return this;
     }
+    /**
+     * @alias autoAxis
+     */
     autoAxes() {
-        return this.autoAxis(...arguments);
+        return this.autoAxis();
     }
@@ -302,3 +299,3 @@ /**
         }
-        this.graph.updateDataMinMaxAxes();
+        this.graph.updateDataMinMaxAxes(false);
         return this;
@@ -322,3 +319,3 @@ }
         }
-        this.graph.updateDataMinMaxAxes();
+        this.graph.updateDataMinMaxAxes(false);
         return this;
@@ -339,3 +336,3 @@ }
         }
-        this.graph.updateDataMinMaxAxes();
+        this.graph.updateDataMinMaxAxes(false);
         return this;
@@ -404,3 +401,3 @@ }
         this.dataHasChanged();
-        this.graph.updateDataMinMaxAxes();
+        this.graph.updateDataMinMaxAxes(false);
         return this;
@@ -417,6 +414,6 @@ }
             this.applyLineStyle(line);
-            line.setAttribute('x1', 5);
-            line.setAttribute('x2', 25);
-            line.setAttribute('y1', 0);
-            line.setAttribute('y2', 0);
+            line.setAttribute('x1', "5");
+            line.setAttribute('x2', "25");
+            line.setAttribute('y1', "0");
+            line.setAttribute('y2', "0");
             line.setAttribute('cursor', 'pointer');
@@ -445,3 +442,3 @@ this.lineForLegend = line;
         if (!this.styles[styleName]) {
-            return this.graph.constructor.getStyle(styleName);
+            return Graph.getStyle(styleName);
         }
@@ -624,3 +621,3 @@ return this._buildStyle(styleName);
         else {
-            this._changedStyles[selectionType || 'unselected'] = true;
+            this._changedStyles[selectionType ? selectionType : 'unselected'] = true;
         }
@@ -805,3 +802,2 @@ this.graph.requireLegendUpdate();
 }
-EventMixing(Serie, 'serie');
 export default Serie;

src/series/graph.serie.line.3d.js

@@ -0,0 +0,0 @@ import Serie3DMixin from '../mixins/graph.mixin.serie3d.js';

src/series/graph.serie.line.colored.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/series/graph.serie.line.js

@@ -9,27 +9,27 @@ // @ts-nocheck
 (function (Dasharray) {
-    Dasharray[Dasharray["PLAIN"] = 0] = "PLAIN";
-    Dasharray[Dasharray["DOTTED"] = 1] = "DOTTED";
-    Dasharray[Dasharray["DASHED_SM"] = 2] = "DASHED_SM";
-    Dasharray[Dasharray["DASHED"] = 3] = "DASHED";
-    Dasharray[Dasharray["DASHED_LG"] = 4] = "DASHED_LG";
-    Dasharray[Dasharray["DASHED_XL"] = 5] = "DASHED_XL";
-    Dasharray[Dasharray["DASHED_SM_INTV_LG"] = 6] = "DASHED_SM_INTV_LG";
-    Dasharray[Dasharray["DASHED_LG_INTV_SM"] = 7] = "DASHED_LG_INTV_SM";
-    Dasharray[Dasharray["DASHED_SM_INTV_XL"] = 8] = "DASHED_SM_INTV_XL";
-    Dasharray[Dasharray["DASHED_XL_INTV_SM"] = 9] = "DASHED_XL_INTV_SM";
-    Dasharray[Dasharray["DASHED_INTV_ALT"] = 10] = "DASHED_INTV_ALT";
-    Dasharray[Dasharray["DASHED_DOTTED"] = 11] = "DASHED_DOTTED";
+  Dasharray[(Dasharray['PLAIN'] = 0)] = 'PLAIN';
+  Dasharray[(Dasharray['DOTTED'] = 1)] = 'DOTTED';
+  Dasharray[(Dasharray['DASHED_SM'] = 2)] = 'DASHED_SM';
+  Dasharray[(Dasharray['DASHED'] = 3)] = 'DASHED';
+  Dasharray[(Dasharray['DASHED_LG'] = 4)] = 'DASHED_LG';
+  Dasharray[(Dasharray['DASHED_XL'] = 5)] = 'DASHED_XL';
+  Dasharray[(Dasharray['DASHED_SM_INTV_LG'] = 6)] = 'DASHED_SM_INTV_LG';
+  Dasharray[(Dasharray['DASHED_LG_INTV_SM'] = 7)] = 'DASHED_LG_INTV_SM';
+  Dasharray[(Dasharray['DASHED_SM_INTV_XL'] = 8)] = 'DASHED_SM_INTV_XL';
+  Dasharray[(Dasharray['DASHED_XL_INTV_SM'] = 9)] = 'DASHED_XL_INTV_SM';
+  Dasharray[(Dasharray['DASHED_INTV_ALT'] = 10)] = 'DASHED_INTV_ALT';
+  Dasharray[(Dasharray['DASHED_DOTTED'] = 11)] = 'DASHED_DOTTED';
 })(Dasharray || (Dasharray = {}));
 const defaultOptions = {
-    markers: false,
-    lineStyle: {
-        color: 'black',
-        style: Dasharray.PLAIN,
-        width: 1
-    },
-    trackMouse: false,
-    lineToZero: false,
-    selectableOnClick: false,
-    overflowX: false,
-    overflowY: false
+  markers: false,
+  lineStyle: {
+    color: 'black',
+    style: Dasharray.PLAIN,
+    width: 1,
+  },
+  trackMouse: false,
+  lineToZero: false,
+  selectableOnClick: false,
+  overflowX: false,
+  overflowY: false,
 };
@@ -43,111 +43,119 @@ /**
 class SerieLine extends SerieScatter {
-    constructor(graph, name, options) {
-        super(graph, name, options);
-        this.currentLine = "";
-        this.counter = 0;
-        this.init();
-        // Unselected style
-        this.extendStyle({
-            line: {
-                color: this.options.lineStyle.color,
-                style: this.options.lineStyle.style,
-                width: this.options.lineStyle.width
-            },
-        }, "unselected", null);
-        this.extendStyle({
-            line: {
-                width: 3
-            }
-        }, "selected", "unselected");
-        this.activateStyle('unselected');
-        this.computeActiveStyle();
-        this.data = [];
-        this._isMinOrMax = {
-            x: {
-                min: false,
-                max: false
-            },
-            y: {
-                min: false,
-                max: false
-            }
-        };
-        // Optimize is no markerPoints => save loops
-        //      this.markerPoints = {};
-        this.groupLines = document.createElementNS(ns, 'g');
-        this.domMarker = document.createElementNS(ns, 'path');
-        if (!this.domMarker.style) {
-            this.domMarker.style = {
-                cursor: 'pointer'
-            };
-        }
-        else {
-            this.domMarker.style.cursor = 'pointer';
-        }
-        this.additionalData = {};
-        this.marker = document.createElementNS(ns, 'circle');
-        this.marker.setAttribute('fill', 'black');
-        this.marker.setAttribute('r', 3);
-        this.marker.setAttribute('display', 'none');
-        this.markerLabel = document.createElementNS(ns, 'text');
-        this.markerLabelSquare = document.createElementNS(ns, 'rect');
-        this.markerLabelSquare.setAttribute('fill', 'white');
-        this.domMarkerHover = {};
-        this.domMarkerSelect = {};
-        this.markerHovered = 0;
-        this.groupMarkerSelected = document.createElementNS(ns, 'g');
-        this.markerPoints = {};
-        //this.scale = 1;
-        //this.shift = 0;
-        this.lines = [];
-        this.groupMain.appendChild(this.groupLines);
-        this.groupMain.appendChild(this.marker);
-        this.groupMain.appendChild(this.groupMarkerSelected);
-        this.groupMain.appendChild(this.markerLabelSquare);
-        this.groupMain.appendChild(this.markerLabel);
-        this.independantMarkers = [];
-        if (this.initExtended1) {
-            this.initExtended1();
-        }
-        this.groupLines.addEventListener('click', (e) => {
-            if (this.options.selectableOnClick) {
-                if (this.isSelected()) {
-                    this.graph.unselectSerie(this);
-                }
-                else {
-                    this.graph.selectSerie(this);
-                }
-            }
-        });
+  constructor(graph, name, options) {
+    super(graph, name, options);
+    this.currentLine = '';
+    this.counter = 0;
+    this.init();
+    // Unselected style
+    this.extendStyle(
+      {
+        line: {
+          color: this.options.lineStyle.color,
+          style: this.options.lineStyle.style,
+          width: this.options.lineStyle.width,
+        },
+      },
+      'unselected',
+      null,
+    );
+    this.extendStyle(
+      {
+        line: {
+          width: 3,
+        },
+      },
+      'selected',
+      'unselected',
+    );
+    this.activateStyle('unselected');
+    this.computeActiveStyle();
+    this.data = [];
+    this._isMinOrMax = {
+      x: {
+        min: false,
+        max: false,
+      },
+      y: {
+        min: false,
+        max: false,
+      },
+    };
+    // Optimize is no markerPoints => save loops
+    //      this.markerPoints = {};
+    this.groupLines = document.createElementNS(ns, 'g');
+    this.domMarker = document.createElementNS(ns, 'path');
+    if (!this.domMarker.style) {
+      this.domMarker.style = {
+        cursor: 'pointer',
+      };
+    } else {
+      this.domMarker.style.cursor = 'pointer';
     }
-    init() {
-        this.options = this.extendLineOptions(this.options);
-        util.mapEventEmission(this.options, this); // Register events
+    this.additionalData = {};
+    this.marker = document.createElementNS(ns, 'circle');
+    this.marker.setAttribute('fill', 'black');
+    this.marker.setAttribute('r', 3);
+    this.marker.setAttribute('display', 'none');
+    this.markerLabel = document.createElementNS(ns, 'text');
+    this.markerLabelSquare = document.createElementNS(ns, 'rect');
+    this.markerLabelSquare.setAttribute('fill', 'white');
+    this.domMarkerHover = {};
+    this.domMarkerSelect = {};
+    this.markerHovered = 0;
+    this.groupMarkerSelected = document.createElementNS(ns, 'g');
+    this.markerPoints = {};
+    //this.scale = 1;
+    //this.shift = 0;
+    this.lines = [];
+    this.groupMain.appendChild(this.groupLines);
+    this.groupMain.appendChild(this.marker);
+    this.groupMain.appendChild(this.groupMarkerSelected);
+    this.groupMain.appendChild(this.markerLabelSquare);
+    this.groupMain.appendChild(this.markerLabel);
+    this.independantMarkers = [];
+    if (this.initExtended1) {
+      this.initExtended1();
     }
-    extendLineOptions(options) {
-        options = super.extendScatterOptions(util.extend(true, {}, defaultOptions, options));
-        return options;
-    }
-    getType() {
-        return SERIE_TYPE.LINE;
-    }
-    applyStyle() {
-        this.applyLineStyles();
-        this.applyLineStyle(this.getSymbolForLegend());
-        super.applyStyle();
-    }
-    onMouseWheel() { }
-    /**
-     * Cleans the DOM from the serie internal object (serie and markers). Mostly used internally when a new {@link Serie#setData} is called
-     * @returns {SerieLine} The current serie
-     * @memberof SerieLine
-     */
-    empty() {
-        for (var i = 0, l = this.lines.length; i < l; i++) {
-            this.groupLines.removeChild(this.lines[i]);
+    this.groupLines.addEventListener('click', (e) => {
+      if (this.options.selectableOnClick) {
+        if (this.isSelected()) {
+          this.graph.unselectSerie(this);
+        } else {
+          this.graph.selectSerie(this);
         }
-        this.lines = [];
-        return this;
+      }
+    });
+  }
+  init() {
+    this.options = this.extendLineOptions(this.options);
+    util.mapEventEmission(this.options, this); // Register events
+  }
+  extendLineOptions(options) {
+    options = super.extendScatterOptions(
+      util.extend(true, {}, defaultOptions, options),
+    );
+    return options;
+  }
+  getType() {
+    return SERIE_TYPE.LINE;
+  }
+  applyStyle() {
+    this.applyLineStyles();
+    this.applyLineStyle(this.getSymbolForLegend());
+    super.applyStyle();
+  }
+  onMouseWheel() {}
+  /**
+   * Cleans the DOM from the serie internal object (serie and markers). Mostly used internally when a new {@link Serie#setData} is called
+   * @returns {SerieLine} The current serie
+   * @memberof SerieLine
+   */
+  empty() {
+    for (var i = 0, l = this.lines.length; i < l; i++) {
+      this.groupLines.removeChild(this.lines[i]);
     }
-    /*
+    this.lines = [];
+    return this;
+  }
+  /*
       /**
@@ -174,273 +182,251 @@ * Applies a selection to the serie
       }*/
-    /**
-     * Removes the selection to the serie. Effectively, calls {@link SerieLine#select}("unselected").
-     * @returns {SerieLine} The current serie
-     * @see SerieLine#select
-     * @memberof SerieLine
-     */
-    unselect() {
-        super.unselect();
-        return this.select('unselected');
+  /**
+   * Removes the selection to the serie. Effectively, calls {@link SerieLine#select}("unselected").
+   * @returns {SerieLine} The current serie
+   * @see SerieLine#select
+   * @memberof SerieLine
+   */
+  unselect() {
+    super.unselect();
+    return this.select('unselected');
+  }
+  /**
+   * Computes and returns a line SVG element with the same line style as the serie, or width 20px
+   * @returns {SVGElement}
+   * @memberof SerieLine
+   */
+  getSymbolForLegend() {
+    const container = this.symbolLegendContainer;
+    if (!this._lineForLegend) {
+      var line = document.createElementNS(ns, 'line');
+      this.applyLineStyle(line);
+      line.setAttribute('x1', '5');
+      line.setAttribute('x2', '25');
+      line.setAttribute('y1', '0');
+      line.setAttribute('y2', '0');
+      line.setAttribute('cursor', 'pointer');
+      this._lineForLegend = line;
+      container.appendChild(this._lineForLegend);
+    } else {
+      this.applyLineStyle(this._lineForLegend);
     }
-    /**
-     * Computes and returns a line SVG element with the same line style as the serie, or width 20px
-     * @returns {SVGElement}
-     * @memberof SerieLine
-     */
-    getSymbolForLegend() {
-        const container = this.symbolLegendContainer;
-        if (!this._lineForLegend) {
-            var line = document.createElementNS(ns, 'line');
-            this.applyLineStyle(line);
-            line.setAttribute('x1', "5");
-            line.setAttribute('x2', "25");
-            line.setAttribute('y1', "0");
-            line.setAttribute('y2', "0");
-            line.setAttribute('cursor', 'pointer');
-            this._lineForLegend = line;
-            container.appendChild(this._lineForLegend);
+    super.getSymbolForLegend();
+    return this._lineForLegend;
+  }
+  /**
+   * Degrades the data of the serie. This option is used for big data sets that have monotoneously increasing (or decreasing) x values.
+   * For example, a serie containing 1'000'000 points, displayed over 1'000px, will have 1'000 points per pixel. Often it does not make sense to display more than 2-3 points per pixel.
+   * <code>degrade( pxPerPoint )</code> allows a degradation of the serie, based on a a number of pixel per point. It computes the average of the data that would be displayed over each pixel range
+   * Starting from jsGraph 2.0, it does not calculate the minimum and maximum and creates the zone serie anymore
+   * @return {SerieLine} The current serie instance
+   * @example serie.degrade( 0.5 ); // Will display 2 points per pixels
+   * @memberof SerieLine
+   */
+  degrade(pxPerP) {
+    this._degradationPx = pxPerP;
+    return this;
+  }
+  noDegrade() {
+    this._degradationPx = 0;
+  }
+  drawInit(force) {
+    var data, xData;
+    try {
+      this.axisCheck();
+    } catch (e) {
+      console.warn(e);
+      return false;
+    }
+    this.currentLineId = 0;
+    this.counter = 0;
+    this._drawn = true;
+    this.currentLine = '';
+    // Degradation
+    if (this.waveform) {
+      if (this._degradationPx) {
+        this.waveform.resampleForDisplay({
+          resampleToPx: this.degradationPx,
+          xPosition: this.getXAxis().getPx.bind(this.getXAxis()),
+          minX: this.getXAxis().getCurrentMin(),
+          maxX: this.getXAxis().getCurrentMax(),
+        });
+        this._dataToUse = [this.waveform.getDataToUseFlat()];
+      } else if (this.waveform.hasAggregation()) {
+        let xaxis = this.getXAxis(),
+          numberOfPointsInTotal =
+            (this.graph.getDrawingWidth() *
+              (xaxis.getDataMax() - xaxis.getDataMin())) /
+            (xaxis.getCurrentMax() - xaxis.getCurrentMin()),
+          promise = this.waveform.selectAggregatedData(numberOfPointsInTotal);
+        if (promise instanceof Promise) {
+          promise.then(() => {
+            this.draw(force);
+          });
+          return false;
+        } else if (promise === false) {
+          return false;
+        } else {
+          this._dataToUse = this.waveform.getDataToUseFlat();
         }
-        else {
-            this.applyLineStyle(this._lineForLegend);
-        }
-        super.getSymbolForLegend();
-        return this._lineForLegend;
+      }
+      //    this._dataToUse = this.waveform.getDataToUseFlat();
+    } else {
+      this._dataToUse = this.data;
+      this._xDataToUse = this.xData;
     }
-    /**
-     * Degrades the data of the serie. This option is used for big data sets that have monotoneously increasing (or decreasing) x values.
-     * For example, a serie containing 1'000'000 points, displayed over 1'000px, will have 1'000 points per pixel. Often it does not make sense to display more than 2-3 points per pixel.
-     * <code>degrade( pxPerPoint )</code> allows a degradation of the serie, based on a a number of pixel per point. It computes the average of the data that would be displayed over each pixel range
-     * Starting from jsGraph 2.0, it does not calculate the minimum and maximum and creates the zone serie anymore
-     * @return {SerieLine} The current serie instance
-     * @example serie.degrade( 0.5 ); // Will display 2 points per pixels
-     * @memberof SerieLine
-     */
-    degrade(pxPerP) {
-        this._degradationPx = pxPerP;
-        return this;
+    return true;
+  }
+  removeLinesGroup() {
+    this._afterLinesGroup = this.groupLines.nextSibling;
+    this.groupMain.removeChild(this.groupLines);
+  }
+  insertLinesGroup() {
+    if (!this._afterLinesGroup) {
+      throw 'Could not find group after lines to insertion.';
     }
-    noDegrade() {
-        this._degradationPx = 0;
+    this.groupMain.insertBefore(this.groupLines, this._afterLinesGroup);
+    this._afterLinesGroup = false;
+  }
+  removeExtraLines() {
+    var i = this.currentLineId,
+      l = this.lines.length;
+    for (; i < l; i++) {
+      this.groupLines.removeChild(this.lines[i]);
     }
-    drawInit(force) {
-        var data, xData;
-        try {
-            this.axisCheck();
-        }
-        catch (e) {
-            console.warn(e);
-            return false;
-        }
-        this.currentLineId = 0;
-        this.counter = 0;
-        this._drawn = true;
-        this.currentLine = '';
-        // Degradation
-        if (this.waveform) {
-            if (this._degradationPx) {
-                this.waveform.resampleForDisplay({
-                    resampleToPx: this.degradationPx,
-                    xPosition: this.getXAxis().getPx.bind(this.getXAxis()),
-                    minX: this.getXAxis().getCurrentMin(),
-                    maxX: this.getXAxis().getCurrentMax()
-                });
-                this._dataToUse = [this.waveform.getDataToUseFlat()];
-            }
-            else if (this.waveform.hasAggregation()) {
-                let xaxis = this.getXAxis(), numberOfPointsInTotal = (this.graph.getDrawingWidth() *
-                    (xaxis.getDataMax() - xaxis.getDataMin())) /
-                    (xaxis.getCurrentMax() - xaxis.getCurrentMin()), promise = this.waveform.selectAggregatedData(numberOfPointsInTotal);
-                if (promise instanceof Promise) {
-                    promise.then(() => {
-                        this.draw(force);
-                    });
-                    return false;
-                }
-                else if (promise === false) {
-                    return false;
-                }
-                else {
-                    this._dataToUse = this.waveform.getDataToUseFlat();
-                }
-            }
-            //    this._dataToUse = this.waveform.getDataToUseFlat();
-        }
-        else {
-            this._dataToUse = this.data;
-            this._xDataToUse = this.xData;
-        }
-        return true;
+    this.lines.splice(this.currentLineId, l - this.currentLineId);
+    this.currentLineId = 0;
+  }
+  /**
+   * Draws the serie
+   * @memberof SerieLine
+   */
+  draw(force) {
+    // Serie redrawing
+    if (!this.getXAxis() || !this.getYAxis()) {
+      throw 'No axes were defined for this serie';
     }
-    removeLinesGroup() {
-        this._afterLinesGroup = this.groupLines.nextSibling;
-        this.groupMain.removeChild(this.groupLines);
+    if (force || this.hasDataChanged()) {
+      super.draw(force);
+      if (!this.drawInit(force)) {
+        return;
+      }
+      var data = this._dataToUse,
+        xData = this._xDataToUse,
+        slotToUse = this._slotToUse;
+      this.removeLinesGroup();
+      this.lookForMaxima = true;
+      this.lookForMinima = false;
+      this.pos0 = this.getYAxis().getPos(
+        Math.max(0, this.getYAxis().getCurrentMin()),
+      );
+      if (this.hasErrors()) {
+        this.errorDrawInit();
+      }
+      this._draw();
+      if (this.hasErrors()) {
+        this.errorDraw();
+      }
+      this.removeExtraLines();
+      this.insertLinesGroup();
     }
-    insertLinesGroup() {
-        if (!this._afterLinesGroup) {
-            throw 'Could not find group after lines to insertion.';
-        }
-        this.groupMain.insertBefore(this.groupLines, this._afterLinesGroup);
-        this._afterLinesGroup = false;
+    // Unhovers everything
+    for (var i in this.domMarkerHover) {
+      this.toggleMarker(i.split(','), false, true);
     }
-    removeExtraLines() {
-        var i = this.currentLineId, l = this.lines.length;
-        for (; i < l; i++) {
-            this.groupLines.removeChild(this.lines[i]);
-        }
-        this.lines.splice(this.currentLineId, l - this.currentLineId);
-        this.currentLineId = 0;
+    // Deselects everything
+    for (var i in this.domMarkerSelect) {
+      this.toggleMarker(i.split(','), false, false);
     }
-    /**
-     * Draws the serie
-     * @memberof SerieLine
-     */
-    draw(force) {
-        // Serie redrawing
-        if (!this.getXAxis() || !this.getYAxis()) {
-            throw 'No axes were defined for this serie';
+    //this.applyLineStyle(this.getSymbolForLegend());
+    if (this.hasStyleChanged(this.getActiveStyle())) {
+      this.computeActiveStyle();
+      this.updateStyle();
+    }
+    this.dataHasChanged(false);
+    super.afterDraw();
+  }
+  _draw() {
+    let waveform = this.waveform,
+      data,
+      x,
+      y,
+      lastX = false,
+      lastY = false,
+      xpx,
+      ypx,
+      xpx2,
+      ypx2,
+      xAxis = this.getXAxis(),
+      yAxis = this.getYAxis(),
+      xMin = xAxis.getCurrentMin(),
+      yMin = yAxis.getCurrentMin(),
+      xMax = xAxis.getCurrentMax(),
+      yMax = yAxis.getCurrentMax();
+    if (!waveform) {
+      return;
+    }
+    data = waveform.getData(true);
+    // Y crossing
+    /*xshift = waveform.getXShift(),
+        xscale = wave.getXScale(),*/
+    let yshift = waveform.getShift(),
+      yscale = waveform.getScale();
+    let pointOutside = false;
+    let lastPointOutside = false;
+    let pointOnAxis;
+    let _monotoneous = this.isMonotoneous();
+    this.currentLine = '';
+    let { i, l } = this._getIterativeBounds(waveform, xMin, xMax);
+    for (; i < l; i += 1) {
+      x = waveform.getX(i, true);
+      y = data[i] * yscale + yshift;
+      if (x != x || y != y) {
+        // NaN checks
+        this._createLine();
+        continue;
+      }
+      if (
+        (!this.options.overflowX && x < xMin && lastX < xMin) ||
+        (!this.options.overflowX && x > xMax && lastX > xMax) ||
+        (((!this.options.overflowY && y < yMin && lastY < yMin) ||
+          (!this.options.overflowY && y > yMax && lastY > yMax)) &&
+          !this.options.lineToZero)
+      ) {
+        lastX = x;
+        lastY = y;
+        lastPointOutside = true;
+        continue;
+      }
+      this.counter2 = i;
+      if (this.options.lineToZero) {
+        if (y > yMax) {
+          y = yMax;
         }
-        if (force || this.hasDataChanged()) {
-            super.draw(force);
-            if (!this.drawInit(force)) {
-                return;
-            }
-            var data = this._dataToUse, xData = this._xDataToUse, slotToUse = this._slotToUse;
-            this.removeLinesGroup();
-            this.lookForMaxima = true;
-            this.lookForMinima = false;
-            this.pos0 = this.getYAxis().getPos(Math.max(0, this.getYAxis().getCurrentMin()));
-            if (this.hasErrors()) {
-                this.errorDrawInit();
-            }
-            this._draw();
-            if (this.hasErrors()) {
-                this.errorDraw();
-            }
-            this.removeExtraLines();
-            this.insertLinesGroup();
+        if (y < yMin) {
+          y = yMin;
         }
-        // Unhovers everything
-        for (var i in this.domMarkerHover) {
-            this.toggleMarker(i.split(','), false, true);
+      }
+      xpx2 = this.getX(x);
+      ypx2 = this.getY(y);
+      //xpx2 = 0;
+      //ypx2 = 0;
+      if (xpx2 == xpx && ypx2 == ypx) {
+        continue;
+      }
+      if (xpx2 != xpx2 || ypx2 != ypx2) {
+        // NaN checks
+        if (this.counter > 0) {
+          this._createLine();
         }
-        // Deselects everything
-        for (var i in this.domMarkerSelect) {
-            this.toggleMarker(i.split(','), false, false);
+        continue;
+      }
+      let pointOutside = this.isPointOutside(x, y, xMin, xMax, yMin, yMax);
+      if (this.options.lineToZero) {
+        pointOutside = x < xMin || x > xMax;
+        if (pointOutside) {
+          continue;
         }
-        //this.applyLineStyle(this.getSymbolForLegend());
-        if (this.hasStyleChanged(this.getActiveStyle())) {
-            this.computeActiveStyle();
-            this.updateStyle();
-        }
-        this.dataHasChanged(false);
-        super.afterDraw();
-    }
-    _draw() {
-        let waveform = this.waveform, data, x, y, lastX = false, lastY = false, xpx, ypx, xpx2, ypx2, xAxis = this.getXAxis(), yAxis = this.getYAxis(), xMin = xAxis.getCurrentMin(), yMin = yAxis.getCurrentMin(), xMax = xAxis.getCurrentMax(), yMax = yAxis.getCurrentMax();
-        if (!waveform) {
-            return;
-        }
-        data = waveform.getData(true);
-        // Y crossing
-        /*xshift = waveform.getXShift(),
-        xscale = wave.getXScale(),*/
-        let yshift = waveform.getShift(), yscale = waveform.getScale();
-        let pointOutside = false;
-        let lastPointOutside = false;
-        let pointOnAxis;
-        let _monotoneous = this.isMonotoneous();
-        this.currentLine = '';
-        let { i, l } = this._getIterativeBounds(waveform, xMin, xMax);
-        for (; i < l; i += 1) {
-            x = waveform.getX(i, true);
-            y = data[i] * yscale + yshift;
-            if (x != x || y != y) {
-                // NaN checks
-                this._createLine();
-                continue;
-            }
-            if ((!this.options.overflowX && x < xMin && lastX < xMin) ||
-                (!this.options.overflowX && x > xMax && lastX > xMax) ||
-                (((!this.options.overflowY && y < yMin && lastY < yMin) ||
-                    (!this.options.overflowY && y > yMax && lastY > yMax)) &&
-                    !this.options.lineToZero)) {
-                lastX = x;
-                lastY = y;
-                lastPointOutside = true;
-                continue;
-            }
-            this.counter2 = i;
-            if (this.options.lineToZero) {
-                if (y > yMax) {
-                    y = yMax;
-                }
-                if (y < yMin) {
-                    y = yMin;
-                }
-            }
-            xpx2 = this.getX(x);
-            ypx2 = this.getY(y);
-            //xpx2 = 0;
-            //ypx2 = 0;
-            if (xpx2 == xpx && ypx2 == ypx) {
-                continue;
-            }
-            if (xpx2 != xpx2 || ypx2 != ypx2) {
-                // NaN checks
-                if (this.counter > 0) {
-                    this._createLine();
-                }
-                continue;
-            }
-            let pointOutside = this.isPointOutside(x, y, xMin, xMax, yMin, yMax);
-            if (this.options.lineToZero) {
-                pointOutside = x < xMin || x > xMax;
-                if (pointOutside) {
-                    continue;
-                }
-            }
-            else {
-                if (pointOutside || lastPointOutside) {
-                    if ((lastX === false || lastY === false) && !lastPointOutside) {
-                        xpx = xpx2;
-                        ypx = ypx2;
-                        lastX = x;
-                        lastY = y;
-                    }
-                    else {
-                        let pointOnAxis = this.calculateAxisCrossing(x, y, lastX, lastY, xMin, xMax, yMin, yMax);
-                        if (pointOnAxis.length > 0) {
-                            if (!pointOutside) {
-                                // We were outside and now go inside
-                                this._createLine();
-                                this._addPoint(this.getX(pointOnAxis[0][0]), this.getY(pointOnAxis[0][1]), pointOnAxis[0][0], pointOnAxis[0][1], false, false, false);
-                                this._addPoint(xpx2, ypx2, lastX, lastY, false, false, true);
-                            }
-                            else if (!lastPointOutside) {
-                                // We were inside and now go outside
-                                this._addPoint(this.getX(pointOnAxis[0][0]), this.getY(pointOnAxis[0][1]), pointOnAxis[0][0], pointOnAxis[0][1], false, false, false);
-                            }
-                            else {
-                                // No crossing: do nothing
-                                if (pointOnAxis.length == 2) {
-                                    this._createLine();
-                                    this._addPoint(this.getX(pointOnAxis[0][0]), this.getY(pointOnAxis[0][1]), pointOnAxis[0][0], pointOnAxis[0][1], false, false, false);
-                                    this._addPoint(this.getX(pointOnAxis[1][0]), this.getY(pointOnAxis[1][1]), pointOnAxis[0][0], pointOnAxis[0][1], false, false, false);
-                                }
-                            }
-                        }
-                        else if (!pointOutside) {
-                            this._addPoint(xpx2, ypx2, lastX, lastY, i, false, false);
-                        }
-                    }
-                    xpx = xpx2;
-                    ypx = ypx2;
-                    lastX = x;
-                    lastY = y;
-                    lastPointOutside = pointOutside;
-                    continue;
-                }
-            }
-            this._addPoint(xpx2, ypx2, x, y, i, false, true);
-            //this.detectPeaks( x, y );
+      } else {
+        if (pointOutside || lastPointOutside) {
+          if ((lastX === false || lastY === false) && !lastPointOutside) {
             xpx = xpx2;
@@ -450,247 +436,332 @@ ypx = ypx2;
             lastY = y;
-        }
-        this._createLine();
-        if (this._tracker) {
-            if (this._trackerDom) {
-                this._trackerDom.remove();
+          } else {
+            let pointOnAxis = this.calculateAxisCrossing(
+              x,
+              y,
+              lastX,
+              lastY,
+              xMin,
+              xMax,
+              yMin,
+              yMax,
+            );
+            if (pointOnAxis.length > 0) {
+              if (!pointOutside) {
+                // We were outside and now go inside
+                this._createLine();
+                this._addPoint(
+                  this.getX(pointOnAxis[0][0]),
+                  this.getY(pointOnAxis[0][1]),
+                  pointOnAxis[0][0],
+                  pointOnAxis[0][1],
+                  false,
+                  false,
+                  false,
+                );
+                this._addPoint(xpx2, ypx2, lastX, lastY, false, false, true);
+              } else if (!lastPointOutside) {
+                // We were inside and now go outside
+                this._addPoint(
+                  this.getX(pointOnAxis[0][0]),
+                  this.getY(pointOnAxis[0][1]),
+                  pointOnAxis[0][0],
+                  pointOnAxis[0][1],
+                  false,
+                  false,
+                  false,
+                );
+              } else {
+                // No crossing: do nothing
+                if (pointOnAxis.length == 2) {
+                  this._createLine();
+                  this._addPoint(
+                    this.getX(pointOnAxis[0][0]),
+                    this.getY(pointOnAxis[0][1]),
+                    pointOnAxis[0][0],
+                    pointOnAxis[0][1],
+                    false,
+                    false,
+                    false,
+                  );
+                  this._addPoint(
+                    this.getX(pointOnAxis[1][0]),
+                    this.getY(pointOnAxis[1][1]),
+                    pointOnAxis[0][0],
+                    pointOnAxis[0][1],
+                    false,
+                    false,
+                    false,
+                  );
+                }
+              }
+            } else if (!pointOutside) {
+              this._addPoint(xpx2, ypx2, lastX, lastY, i, false, false);
             }
-            var cloned = this.groupLines.cloneNode(true);
-            this.groupMain.appendChild(cloned);
-            for (i = 0, l = cloned.children.length; i < l; i++) {
-                cloned.children[i].setAttribute('stroke', 'transparent');
-                cloned.children[i].setAttribute('stroke-width', '25px');
-                cloned.children[i].setAttribute('pointer-events', 'stroke');
-            }
-            this._trackerDom = cloned;
-            this.groupMain.addEventListener('mousemove', (e) => {
-                var coords = this.graph._getXY(e), ret = this.handleMouseMove(false, false);
-                this._trackingCallback(this, ret, coords.x, coords.y);
-            });
-            this.groupMain.addEventListener('mouseleave', (e) => {
-                this._trackingOutCallback(this);
-            });
+          }
+          xpx = xpx2;
+          ypx = ypx2;
+          lastX = x;
+          lastY = y;
+          lastPointOutside = pointOutside;
+          continue;
         }
-        return this;
+      }
+      this._addPoint(xpx2, ypx2, x, y, i, false, true);
+      //this.detectPeaks( x, y );
+      xpx = xpx2;
+      ypx = ypx2;
+      lastX = x;
+      lastY = y;
     }
-    _getIterativeBounds(waveform, xMin, xMax) {
-        let i = 0, l = waveform.getLength(), wL = l;
-        if (waveform.isXMonotoneous()) {
-            if (waveform.isXMonotoneousAscending()) {
-                i = waveform.getIndexFromX(xMin, true);
-                l = waveform.getIndexFromX(xMax, true);
-            }
-            else {
-                i = waveform.getIndexFromX(xMax, true);
-                l = waveform.getIndexFromX(xMin, true);
-            }
-            if (i == false) {
-                i = 0;
-            }
-            else if (i > 0) {
-                i--;
-            }
-            if (l == false) {
-                l = wL;
-            }
-            else if (l < wL) {
-                l++;
-            }
-        }
-        return { i, l };
+    this._createLine();
+    if (this._tracker) {
+      if (this._trackerDom) {
+        this._trackerDom.remove();
+      }
+      var cloned = this.groupLines.cloneNode(true);
+      this.groupMain.appendChild(cloned);
+      for (i = 0, l = cloned.children.length; i < l; i++) {
+        cloned.children[i].setAttribute('stroke', 'transparent');
+        cloned.children[i].setAttribute('stroke-width', '25px');
+        cloned.children[i].setAttribute('pointer-events', 'stroke');
+      }
+      this._trackerDom = cloned;
+      this.groupMain.addEventListener('mousemove', (e) => {
+        var coords = this.graph._getXY(e),
+          ret = this.handleMouseMove(false, false);
+        this._trackingCallback(this, ret, coords.x, coords.y);
+      });
+      this.groupMain.addEventListener('mouseleave', (e) => {
+        this._trackingOutCallback(this);
+      });
     }
-    kill() {
-        super.kill();
+    return this;
+  }
+  _getIterativeBounds(waveform, xMin, xMax) {
+    let i = 0,
+      l = waveform.getLength(),
+      wL = l;
+    if (waveform.isXMonotoneous()) {
+      if (waveform.isXMonotoneousAscending()) {
+        i = waveform.getIndexFromX(xMin, true);
+        l = waveform.getIndexFromX(xMax, true);
+      } else {
+        i = waveform.getIndexFromX(xMax, true);
+        l = waveform.getIndexFromX(xMin, true);
+      }
+      if (i == false) {
+        i = 0;
+      } else if (i > 0) {
+        i--;
+      }
+      if (l == false) {
+        l = wL;
+      } else if (l < wL) {
+        l++;
+      }
     }
-    isPointOutside(x, y, xMin, xMax, yMin, yMax) {
-        if (!this.isMonotoneous()) {
-            return (!this.options.overflowX && (x < xMin || x > xMax)) || (!this.options.overflowY && (y < yMin || y > yMax));
-        }
-        else {
-            return !this.options.overflowY && (y < yMin || y > yMax);
-        }
+    return { i, l };
+  }
+  kill() {
+    super.kill();
+  }
+  isPointOutside(x, y, xMin, xMax, yMin, yMax) {
+    if (!this.isMonotoneous()) {
+      return (
+        (!this.options.overflowX && (x < xMin || x > xMax)) ||
+        (!this.options.overflowY && (y < yMin || y > yMax))
+      );
+    } else {
+      return !this.options.overflowY && (y < yMin || y > yMax);
     }
-    calculateAxisCrossing(x, y, lastX, lastY, xMin, xMax, yMin, yMax) {
-        let pointOnAxis = [];
-        // Y crossing
-        let yLeftCrossingRatio = (x - xMin) / (x - lastX);
-        let yLeftCrossing = y - yLeftCrossingRatio * (y - lastY);
-        let yRightCrossingRatio = (x - xMax) / (x - lastX);
-        let yRightCrossing = y - yRightCrossingRatio * (y - lastY);
-        // X crossing
-        let xTopCrossingRatio = (y - yMin) / (y - lastY);
-        let xTopCrossing = x - xTopCrossingRatio * (x - lastX);
-        let xBottomCrossingRatio = (y - yMax) / (y - lastY);
-        let xBottomCrossing = x - xBottomCrossingRatio * (x - lastX);
-        if (yLeftCrossingRatio < 1 &&
-            yLeftCrossingRatio > 0 &&
-            yLeftCrossing !== false &&
-            yLeftCrossing <= yMax &&
-            yLeftCrossing >= yMin) {
-            pointOnAxis.push([xMin, yLeftCrossing]);
-        }
-        if (yRightCrossingRatio < 1 &&
-            yRightCrossingRatio > 0 &&
-            yRightCrossing !== false &&
-            yRightCrossing <= yMax &&
-            yRightCrossing >= yMin) {
-            pointOnAxis.push([xMax, yRightCrossing]);
-        }
-        if (xTopCrossingRatio < 1 &&
-            xTopCrossingRatio > 0 &&
-            xTopCrossing !== false &&
-            xTopCrossing <= xMax &&
-            xTopCrossing >= xMin) {
-            pointOnAxis.push([xTopCrossing, yMin]);
-        }
-        if (xBottomCrossingRatio < 1 &&
-            xBottomCrossingRatio > 0 &&
-            xBottomCrossing !== false &&
-            xBottomCrossing <= xMax &&
-            xBottomCrossing >= xMin) {
-            pointOnAxis.push([xBottomCrossing, yMax]);
-        }
-        return pointOnAxis;
+  }
+  calculateAxisCrossing(x, y, lastX, lastY, xMin, xMax, yMin, yMax) {
+    let pointOnAxis = [];
+    // Y crossing
+    let yLeftCrossingRatio = (x - xMin) / (x - lastX);
+    let yLeftCrossing = y - yLeftCrossingRatio * (y - lastY);
+    let yRightCrossingRatio = (x - xMax) / (x - lastX);
+    let yRightCrossing = y - yRightCrossingRatio * (y - lastY);
+    // X crossing
+    let xTopCrossingRatio = (y - yMin) / (y - lastY);
+    let xTopCrossing = x - xTopCrossingRatio * (x - lastX);
+    let xBottomCrossingRatio = (y - yMax) / (y - lastY);
+    let xBottomCrossing = x - xBottomCrossingRatio * (x - lastX);
+    if (
+      yLeftCrossingRatio < 1 &&
+      yLeftCrossingRatio > 0 &&
+      yLeftCrossing !== false &&
+      yLeftCrossing <= yMax &&
+      yLeftCrossing >= yMin
+    ) {
+      pointOnAxis.push([xMin, yLeftCrossing]);
     }
-    _addPoint(xpx, ypx, x, y, j, move, allowMarker) {
-        /*if( ! this.currentLineId ) {
+    if (
+      yRightCrossingRatio < 1 &&
+      yRightCrossingRatio > 0 &&
+      yRightCrossing !== false &&
+      yRightCrossing <= yMax &&
+      yRightCrossing >= yMin
+    ) {
+      pointOnAxis.push([xMax, yRightCrossing]);
+    }
+    if (
+      xTopCrossingRatio < 1 &&
+      xTopCrossingRatio > 0 &&
+      xTopCrossing !== false &&
+      xTopCrossing <= xMax &&
+      xTopCrossing >= xMin
+    ) {
+      pointOnAxis.push([xTopCrossing, yMin]);
+    }
+    if (
+      xBottomCrossingRatio < 1 &&
+      xBottomCrossingRatio > 0 &&
+      xBottomCrossing !== false &&
+      xBottomCrossing <= xMax &&
+      xBottomCrossing >= xMin
+    ) {
+      pointOnAxis.push([xBottomCrossing, yMax]);
+    }
+    return pointOnAxis;
+  }
+  _addPoint(xpx, ypx, x, y, j, move, allowMarker) {
+    /*if( ! this.currentLineId ) {
             throw "No current line"
           }* @memberof SerieLine
       */
-        if (xpx !== xpx || ypx !== ypx) {
-            return;
-        }
-        if (this.counter == 0) {
-            this.currentLine = 'M ';
-        }
-        else {
-            if (this.options.lineToZero || move) {
-                this.currentLine += 'M ';
-            }
-            else {
-                this.currentLine += 'L ';
-            }
-        }
-        this.currentLine += xpx;
-        this.currentLine += ' ';
-        this.currentLine += ypx;
-        this.currentLine += ' ';
-        if (this.options.lineToZero && this.pos0 !== undefined) {
-            this.currentLine += 'L ';
-            this.currentLine += xpx;
-            this.currentLine += ' ';
-            this.currentLine += this.pos0;
-            this.currentLine += ' ';
-        }
-        if (this.hasErrors()) {
-            this.errorAddPoint(j, x, y, xpx, ypx);
-        }
-        this.counter++;
+    if (xpx !== xpx || ypx !== ypx) {
+      return;
     }
-    // Returns the DOM
-    _createLine() {
-        var i = this.currentLineId++, line;
-        // Creates a line if needed
-        if (this.lines[i]) {
-            line = this.lines[i];
-        }
-        else {
-            line = document.createElementNS(this.graph.ns, 'path');
-            this.applyLineStyle(line);
-            this.groupLines.appendChild(line);
-            this.lines[i] = line;
-        }
-        if (this.counter == 0) {
-            line.setAttribute('d', '');
-        }
-        else {
-            line.setAttribute('d', this.currentLine);
-        }
-        this.currentLine = 'M ';
-        this.counter = 0;
-        return line;
+    if (this.counter == 0) {
+      this.currentLine = 'M ';
+    } else {
+      if (this.options.lineToZero || move) {
+        this.currentLine += 'M ';
+      } else {
+        this.currentLine += 'L ';
+      }
     }
-    /**
-     * Reapply the current style to the serie lines elements. Mostly used internally
-     * @memberof SerieLine
-     */
-    applyLineStyles() {
-        for (var i = 0; i < this.lines.length; i++) {
-            this.applyLineStyle(this.lines[i]);
-        }
+    this.currentLine += xpx;
+    this.currentLine += ' ';
+    this.currentLine += ypx;
+    this.currentLine += ' ';
+    if (this.options.lineToZero && this.pos0 !== undefined) {
+      this.currentLine += 'L ';
+      this.currentLine += xpx;
+      this.currentLine += ' ';
+      this.currentLine += this.pos0;
+      this.currentLine += ' ';
     }
-    /**
-     * Applies the current style to a line element. Mostly used internally
-     * @memberof SerieLine
-     */
-    applyLineStyle(line) {
-        line.setAttribute('stroke', this.getLineColor());
-        line.setAttribute('stroke-width', this.getLineWidth());
-        if (this.getLineDashArray()) {
-            line.setAttribute('stroke-dasharray', this.getLineDashArray());
-        }
-        else {
-            line.removeAttribute('stroke-dasharray');
-        }
-        if (this.getFillColor()) {
-            line.setAttribute('fill', this.getFillColor());
-        }
-        else {
-            line.setAttribute('fill', 'none');
-        }
-        //	line.setAttribute('shape-rendering', 'optimizeSpeed');
+    if (this.hasErrors()) {
+      this.errorAddPoint(j, x, y, xpx, ypx);
     }
-    /**
-     * Updates the current style (lines + legend) of the serie. Use this method if you have explicitely changed the options of the serie
-     * @example var opts = { lineColor: 'red' };
-     * var s = graph.newSerie( "name", opts ).setData( someData );
-     * opts.lineColor = 'green';
-     * s.updateStyle(); // Sets the lineColor to green
-     * s.draw(); // Would also do the same thing, but recalculates the whole serie display (including (x,y) point pairs)
-     * @memberof SerieLine
-     */
-    updateStyle() {
-        this.applyLineStyles();
-        this.setLegendSymbolStyle();
-        this.styleHasChanged(false);
+    this.counter++;
+  }
+  // Returns the DOM
+  _createLine() {
+    var i = this.currentLineId++,
+      line;
+    // Creates a line if needed
+    if (this.lines[i]) {
+      line = this.lines[i];
+    } else {
+      line = document.createElementNS(this.graph.ns, 'path');
+      this.applyLineStyle(line);
+      this.groupLines.appendChild(line);
+      this.lines[i] = line;
     }
-    // Revised August 2014. Ok
-    getMarkerPath(family, add) {
-        var z = family.zoom || 1, add = add || 0, el = [];
-        switch (family.type) {
-            case 2:
-                el = ['m', -2, -2, 'l', 4, 4, 'm', -4, 0, 'l', 4, -4];
-                break;
-            case 3:
-                el = ['m', -2, 0, 'l', 4, 0, 'm', -2, -2, 'l', 0, 4];
-                break;
-            case 4:
-                el = ['m', -1, -1, 'l', 2, 0, 'l', -1, 2, 'z'];
-                break;
-            default:
-            case 1:
-                el = ['m', -2, -2, 'l', 4, 0, 'l', 0, 4, 'l', -4, 0, 'z'];
-                break;
-        }
-        if ((z == 1 || !z) && !add) {
-            return el.join(' ');
-        }
-        var num = 'number';
-        if (!el) {
-            return;
-        }
-        for (var i = 0, l = el.length; i < l; i++) {
-            if (typeof el[i] == num) {
-                el[i] *= z + add;
-            }
-        }
-        return el.join(' ');
+    if (this.counter == 0) {
+      line.setAttribute('d', '');
+    } else {
+      line.setAttribute('d', this.currentLine);
     }
-    /**
-     * Searches the closest point pair (x,y) to the a pair of pixel position
-     * @param {Number} x - The x position in pixels (from the left)
-     * @param {Number} y - The y position in pixels (from the left)
-     * @returns {Number} Index in the data array of the closest (x,y) pair to the pixel position passed in parameters
-     * @memberof SerieLine
-     */
-    /*
+    this.currentLine = 'M ';
+    this.counter = 0;
+    return line;
+  }
+  /**
+   * Reapply the current style to the serie lines elements. Mostly used internally
+   * @memberof SerieLine
+   */
+  applyLineStyles() {
+    for (var i = 0; i < this.lines.length; i++) {
+      this.applyLineStyle(this.lines[i]);
+    }
+  }
+  /**
+   * Applies the current style to a line element. Mostly used internally
+   * @memberof SerieLine
+   */
+  applyLineStyle(line) {
+    line.setAttribute('stroke', this.getLineColor());
+    line.setAttribute('stroke-width', this.getLineWidth());
+    if (this.getLineDashArray()) {
+      line.setAttribute('stroke-dasharray', this.getLineDashArray());
+    } else {
+      line.removeAttribute('stroke-dasharray');
+    }
+    if (this.getFillColor()) {
+      line.setAttribute('fill', this.getFillColor());
+    } else {
+      line.setAttribute('fill', 'none');
+    }
+    //	line.setAttribute('shape-rendering', 'optimizeSpeed');
+  }
+  /**
+   * Updates the current style (lines + legend) of the serie. Use this method if you have explicitely changed the options of the serie
+   * @example var opts = { lineColor: 'red' };
+   * var s = graph.newSerie( "name", opts ).setData( someData );
+   * opts.lineColor = 'green';
+   * s.updateStyle(); // Sets the lineColor to green
+   * s.draw(); // Would also do the same thing, but recalculates the whole serie display (including (x,y) point pairs)
+   * @memberof SerieLine
+   */
+  updateStyle() {
+    this.applyLineStyles();
+    this.setLegendSymbolStyle();
+    this.styleHasChanged(false);
+  }
+  // Revised August 2014. Ok
+  getMarkerPath(family, add) {
+    var z = family.zoom || 1,
+      add = add || 0,
+      el = [];
+    switch (family.type) {
+      case 2:
+        el = ['m', -2, -2, 'l', 4, 4, 'm', -4, 0, 'l', 4, -4];
+        break;
+      case 3:
+        el = ['m', -2, 0, 'l', 4, 0, 'm', -2, -2, 'l', 0, 4];
+        break;
+      case 4:
+        el = ['m', -1, -1, 'l', 2, 0, 'l', -1, 2, 'z'];
+        break;
+      default:
+      case 1:
+        el = ['m', -2, -2, 'l', 4, 0, 'l', 0, 4, 'l', -4, 0, 'z'];
+        break;
+    }
+    if ((z == 1 || !z) && !add) {
+      return el.join(' ');
+    }
+    var num = 'number';
+    if (!el) {
+      return;
+    }
+    for (var i = 0, l = el.length; i < l; i++) {
+      if (typeof el[i] == num) {
+        el[i] *= z + add;
+      }
+    }
+    return el.join(' ');
+  }
+  /**
+   * Searches the closest point pair (x,y) to the a pair of pixel position
+   * @param {Number} x - The x position in pixels (from the left)
+   * @param {Number} y - The y position in pixels (from the left)
+   * @returns {Number} Index in the data array of the closest (x,y) pair to the pixel position passed in parameters
+   * @memberof SerieLine
+   */
+  /*
     
@@ -723,252 +794,282 @@ Let's deprecate this
     */
-    handleMouseMove(xValue, doMarker, yValue) {
-        var valX = xValue || this.getXAxis().getMouseVal(), valY = yValue || this.getYAxis().getMouseVal();
-        var value = this.getClosestPointToXY(valX, valY);
-        if (!value) {
-            return;
-        }
-        var ratio, intY;
-        if (value.xMax == value.xMin) {
-            intY = value.yMin;
-        }
-        else {
-            //ratio = ( valX - value.xMin ) / ( value.xMax - value.xMin );
-            //intY = ( ( 1 - ratio ) * value.yMin + ratio * value.yMax );
-        }
-        if (doMarker && this.options.trackMouse) {
-            if (value.xMin == undefined) {
-                return false;
-            }
-        }
-        return {
-            xBefore: value.xMin,
-            xAfter: value.xMax,
-            yBefore: value.yMin,
-            yAfter: value.yMax,
-            trueX: value.xExact,
-            indexClosest: value.indexClosest,
-            interpolatedY: intY,
-            xClosest: value.xClosest,
-            yClosest: value.yClosest
-        };
+  handleMouseMove(xValue, doMarker, yValue) {
+    var valX = xValue || this.getXAxis().getMouseVal(),
+      valY = yValue || this.getYAxis().getMouseVal();
+    var value = this.getClosestPointToXY(valX, valY);
+    if (!value) {
+      return;
     }
-    /**
-     * Gets the maximum value of the y values between two x values. The x values must be monotoneously increasing
-     * @param {Number} startX - The start of the x values
-     * @param {Number} endX - The end of the x values
-     * @returns {Number} Maximal y value in between startX and endX
-     * @memberof SerieLine
-     */
-    getMax(start, end) {
-        var start2 = Math.min(start, end), end2 = Math.max(start, end), v1 = this.getClosestPointToXY(start2), v2 = this.getClosestPointToXY(end2), i, j, max = -Infinity, initJ, maxJ;
-        if (!v1) {
-            start2 = this.minX;
-            v1 = this.getClosestPointToXY(start2);
-        }
-        if (!v2) {
-            end2 = this.maxX;
-            v2 = this.getClosestPointToXY(end2);
-        }
-        if (!v1 || !v2) {
-            return -Infinity;
-        }
-        for (i = v1.dataIndex; i <= v2.dataIndex; i++) {
-            initJ = i == v1.dataIndex ? v1.xBeforeIndexArr : 0;
-            maxJ = i == v2.dataIndex ? v2.xBeforeIndexArr : this.data[i].length;
-            for (j = initJ; j <= maxJ; j += 2) {
-                max = Math.max(max, this.data[i][j + 1]);
-            }
-        }
-        return max;
+    var ratio, intY;
+    if (value.xMax == value.xMin) {
+      intY = value.yMin;
+    } else {
+      //ratio = ( valX - value.xMin ) / ( value.xMax - value.xMin );
+      //intY = ( ( 1 - ratio ) * value.yMin + ratio * value.yMax );
     }
-    /**
-     * Gets the minimum value of the y values between two x values. The x values must be monotoneously increasing
-     * @param {Number} startX - The start of the x values
-     * @param {Number} endX - The end of the x values
-     * @returns {Number} Maximal y value in between startX and endX
-     * @memberof SerieLine
-     */
-    getMin(start, end) {
-        var start2 = Math.min(start, end), end2 = Math.max(start, end), v1 = this.getClosestPointToXY(start2), v2 = this.getClosestPointToXY(end2), i, j, min = Infinity, initJ, maxJ;
-        if (!v1) {
-            start2 = this.minX;
-            v1 = this.getClosestPointToXY(start2);
-        }
-        if (!v2) {
-            end2 = this.maxX;
-            v2 = this.getClosestPointToXY(end2);
-        }
-        if (!v1 || !v2) {
-            return Infinity;
-        }
-        for (i = v1.dataIndex; i <= v2.dataIndex; i++) {
-            initJ = i == v1.dataIndex ? v1.xBeforeIndexArr : 0;
-            maxJ = i == v2.dataIndex ? v2.xBeforeIndexArr : this.data[i].length;
-            for (j = initJ; j <= maxJ; j += 2) {
-                min = Math.min(min, this.data[i][j + 1]);
-            }
-        }
-        return min;
+    if (doMarker && this.options.trackMouse) {
+      if (value.xMin == undefined) {
+        return false;
+      }
     }
-    getRawLineStyle(styleName = "unselected") {
-        let s = this.getRawStyle(styleName);
-        if (!s.line) {
-            s.line = {};
-        }
-        return s.line;
+    return {
+      xBefore: value.xMin,
+      xAfter: value.xMax,
+      yBefore: value.yMin,
+      yAfter: value.yMax,
+      trueX: value.xExact,
+      indexClosest: value.indexClosest,
+      interpolatedY: intY,
+      xClosest: value.xClosest,
+      yClosest: value.yClosest,
+    };
+  }
+  /**
+   * Gets the maximum value of the y values between two x values. The x values must be monotoneously increasing
+   * @param {Number} startX - The start of the x values
+   * @param {Number} endX - The end of the x values
+   * @returns {Number} Maximal y value in between startX and endX
+   * @memberof SerieLine
+   */
+  getMax(start, end) {
+    var start2 = Math.min(start, end),
+      end2 = Math.max(start, end),
+      v1 = this.getClosestPointToXY(start2),
+      v2 = this.getClosestPointToXY(end2),
+      i,
+      j,
+      max = -Infinity,
+      initJ,
+      maxJ;
+    if (!v1) {
+      start2 = this.minX;
+      v1 = this.getClosestPointToXY(start2);
     }
-    /*
-      LINE STYLE * @memberof SerieLine
-     */
-    setLineStyle(number, selectionType = 'unselected', applyToSelected) {
-        let s = this.getRawLineStyle(selectionType);
-        s.style = number;
-        if (applyToSelected) {
-            this.setLineStyle(number, 'selected');
-        }
-        this.styleHasChanged(selectionType);
-        return this;
+    if (!v2) {
+      end2 = this.maxX;
+      v2 = this.getClosestPointToXY(end2);
     }
-    getLineStyle(selectionType) {
-        var _a;
-        return (_a = this.getComputedStyle(selectionType).line) === null || _a === void 0 ? void 0 : _a.style;
+    if (!v1 || !v2) {
+      return -Infinity;
     }
-    getLineDashArray(styleName = this.getActiveStyleName()) {
-        let s = this.getLineStyle(styleName);
-        if (Array.isArray(s)) {
-            return s.join(', ');
-        }
-        else if (typeof s == "string") {
-            return s;
-        }
-        else {
-            switch (s) {
-                case Dasharray.PLAIN:
-                    return '1, 1';
-                    break;
-                case Dasharray.DASHED_SM:
-                    return '2, 2';
-                    break;
-                case Dasharray.DASHED:
-                    return '3, 3';
-                    break;
-                case Dasharray.DASHED_LG:
-                    return '4, 4';
-                    break;
-                case Dasharray.DASHED_XL:
-                    return '5, 5';
-                    break;
-                case Dasharray.DASHED_LG_INTV_SM:
-                    return '5 2';
-                    break;
-                case Dasharray.DASHED_SM_INTV_LG:
-                    return '2 5';
-                    break;
-                case Dasharray.DASHED_INTV_ALT:
-                    return '4 2 4 4';
-                    break;
-                case Dasharray.DASHED_DOTTED:
-                    return '1,3,1';
-                    break;
-                case Dasharray.DASHED_XL_INTV_SM:
-                    return '9 2';
-                    break;
-                case Dasharray.DASHED_SM_INTV_XL:
-                    return '2 9';
-                    break;
-                default:
-                    return "";
-            }
-        }
+    for (i = v1.dataIndex; i <= v2.dataIndex; i++) {
+      initJ = i == v1.dataIndex ? v1.xBeforeIndexArr : 0;
+      maxJ = i == v2.dataIndex ? v2.xBeforeIndexArr : this.data[i].length;
+      for (j = initJ; j <= maxJ; j += 2) {
+        max = Math.max(max, this.data[i][j + 1]);
+      }
     }
-    /** @memberof SerieLine
-     */
-    setLineWidth(width, selectionType, applyToSelected) {
-        let s = this.getRawLineStyle(selectionType);
-        s.width = width;
-        if (applyToSelected) {
-            this.setLineWidth(width, 'selected');
-        }
-        this.styleHasChanged(selectionType);
-        return this;
+    return max;
+  }
+  /**
+   * Gets the minimum value of the y values between two x values. The x values must be monotoneously increasing
+   * @param {Number} startX - The start of the x values
+   * @param {Number} endX - The end of the x values
+   * @returns {Number} Maximal y value in between startX and endX
+   * @memberof SerieLine
+   */
+  getMin(start, end) {
+    var start2 = Math.min(start, end),
+      end2 = Math.max(start, end),
+      v1 = this.getClosestPointToXY(start2),
+      v2 = this.getClosestPointToXY(end2),
+      i,
+      j,
+      min = Infinity,
+      initJ,
+      maxJ;
+    if (!v1) {
+      start2 = this.minX;
+      v1 = this.getClosestPointToXY(start2);
     }
-    getLineWidth() {
-        var _a;
-        return (_a = this.getComputedStyle().line) === null || _a === void 0 ? void 0 : _a.width;
+    if (!v2) {
+      end2 = this.maxX;
+      v2 = this.getClosestPointToXY(end2);
     }
-    /* LINE COLOR * @memberof SerieLine
-     */
-    setLineColor(color, selectionType, applyToSelected) {
-        let s = this.getRawLineStyle(selectionType);
-        s.color = color;
-        if (applyToSelected) {
-            this.setLineColor(color, 'selected');
-        }
-        this.styleHasChanged(selectionType);
-        return this;
+    if (!v1 || !v2) {
+      return Infinity;
     }
-    getLineColor() {
-        var _a;
-        return (_a = this.getComputedStyle().line) === null || _a === void 0 ? void 0 : _a.color;
+    for (i = v1.dataIndex; i <= v2.dataIndex; i++) {
+      initJ = i == v1.dataIndex ? v1.xBeforeIndexArr : 0;
+      maxJ = i == v2.dataIndex ? v2.xBeforeIndexArr : this.data[i].length;
+      for (j = initJ; j <= maxJ; j += 2) {
+        min = Math.min(min, this.data[i][j + 1]);
+      }
     }
-    /* FILL COLOR * @memberof SerieLine
+    return min;
+  }
+  getRawLineStyle(styleName = 'unselected') {
+    let s = this.getRawStyle(styleName);
+    if (!s.line) {
+      s.line = {};
+    }
+    return s.line;
+  }
+  /*
+      LINE STYLE * @memberof SerieLine
      */
-    setFillColor(color, selectionType, applyToSelected) {
-        let s = this.getRawLineStyle(selectionType);
-        s.fillColor = color;
-        if (applyToSelected) {
-            this.setFillColor(color, 'selected');
-        }
-        this.styleHasChanged(selectionType);
-        return this;
+  setLineStyle(number, selectionType = 'unselected', applyToSelected) {
+    let s = this.getRawLineStyle(selectionType);
+    s.style = number;
+    if (applyToSelected) {
+      this.setLineStyle(number, 'selected');
     }
-    getFillColor() {
-        var _a;
-        return (_a = this.getComputedStyle().line) === null || _a === void 0 ? void 0 : _a.fillColor;
+    this.styleHasChanged(selectionType);
+    return this;
+  }
+  getLineStyle(selectionType) {
+    var _a;
+    return (_a = this.getComputedStyle(selectionType).line) === null ||
+      _a === void 0
+      ? void 0
+      : _a.style;
+  }
+  getLineDashArray(styleName = this.getActiveStyleName()) {
+    let s = this.getLineStyle(styleName);
+    if (Array.isArray(s)) {
+      return s.join(', ');
+    } else if (typeof s == 'string') {
+      return s;
+    } else {
+      switch (s) {
+        case Dasharray.PLAIN:
+          return '1, 1';
+          break;
+        case Dasharray.DASHED_SM:
+          return '2, 2';
+          break;
+        case Dasharray.DASHED:
+          return '3, 3';
+          break;
+        case Dasharray.DASHED_LG:
+          return '4, 4';
+          break;
+        case Dasharray.DASHED_XL:
+          return '5, 5';
+          break;
+        case Dasharray.DASHED_LG_INTV_SM:
+          return '5 2';
+          break;
+        case Dasharray.DASHED_SM_INTV_LG:
+          return '2 5';
+          break;
+        case Dasharray.DASHED_INTV_ALT:
+          return '4 2 4 4';
+          break;
+        case Dasharray.DASHED_DOTTED:
+          return '1,3,1';
+          break;
+        case Dasharray.DASHED_XL_INTV_SM:
+          return '9 2';
+          break;
+        case Dasharray.DASHED_SM_INTV_XL:
+          return '2 9';
+          break;
+        default:
+          return '';
+      }
     }
-    /** @memberof SerieLine
-     */
-    isMonotoneous() {
-        if (this.waveform) {
-            return this.waveform.isMonotoneous();
-        }
-        return !!this.xmonotoneous;
+  }
+  /** @memberof SerieLine
+   */
+  setLineWidth(width, selectionType, applyToSelected) {
+    let s = this.getRawLineStyle(selectionType);
+    s.width = width;
+    if (applyToSelected) {
+      this.setLineWidth(width, 'selected');
     }
-    findLocalMinMax(xRef, xWithin, type) {
-        if (!this.waveform) {
-            return false;
-        }
-        return this.waveform.findLocalMinMax(xRef, xWithin, type);
+    this.styleHasChanged(selectionType);
+    return this;
+  }
+  getLineWidth() {
+    var _a;
+    return (_a = this.getComputedStyle().line) === null || _a === void 0
+      ? void 0
+      : _a.width;
+  }
+  /* LINE COLOR * @memberof SerieLine
+   */
+  setLineColor(color, selectionType, applyToSelected) {
+    let s = this.getRawLineStyle(selectionType);
+    s.color = color;
+    if (applyToSelected) {
+      this.setLineColor(color, 'selected');
     }
-    /**
-     * Performs a binary search to find the closest point index to an x value. For the binary search to work, it is important that the x values are monotoneous.
-     * If the serie is not monotoneously ascending, then a Euclidian search is made
-     * @param {Number} valX - The x value to search for
-     * @param {number} valY - The y value to search for. Optional. When omitted, only a search in x will be done
-     * @param {Number} withinPxX - The maximum distance in X
-     * @param {number} withinPxY - The maximum distance in Y
-     * @param {string} useAxis - ```x``` or ```y```. Use only the value of x or y to find the closest point
-     * @returns {Object} Index in the data array of the closest (x,y) pair to the pixel position passed in parameters
-     * @memberof SerieLine
-     */
-    getClosestPointToXY(valX = this.getXAxis().getMouseVal(), valY = this.getYAxis().getMouseVal(), withinPxX = 0, withinPxY = 0, useAxis = false, usePx = true) {
-        // For the scatter serie it's pretty simple. No interpolation. We look at the point directly
-        //const xVal = this.getXAxis().getVal( x );
-        //const yVal = this.getYAxis().getVal( y );
-        const xValAllowed = this.getXAxis().getRelVal(withinPxX);
-        const yValAllowed = this.getYAxis().getRelVal(withinPxY);
-        // Index of the closest point
-        const closestPointIndex = this.waveform.findWithShortestDistance({
-            x: valX,
-            y: valY,
-            xMaxDistance: xValAllowed,
-            yMaxDistance: yValAllowed,
-            axisRef: useAxis,
-            scaleX: !usePx ? 1 : 1 / this.getXAxis().getRelVal(1),
-            scaleY: !usePx ? 1 : 1 / this.getYAxis().getRelVal(1)
-        });
-        if (isNaN(closestPointIndex) || closestPointIndex === false) {
-            return false;
-        }
-        /*
+    this.styleHasChanged(selectionType);
+    return this;
+  }
+  getLineColor() {
+    var _a;
+    return (_a = this.getComputedStyle().line) === null || _a === void 0
+      ? void 0
+      : _a.color;
+  }
+  /* FILL COLOR * @memberof SerieLine
+   */
+  setFillColor(color, selectionType, applyToSelected) {
+    let s = this.getRawLineStyle(selectionType);
+    s.fillColor = color;
+    if (applyToSelected) {
+      this.setFillColor(color, 'selected');
+    }
+    this.styleHasChanged(selectionType);
+    return this;
+  }
+  getFillColor() {
+    var _a;
+    return (_a = this.getComputedStyle().line) === null || _a === void 0
+      ? void 0
+      : _a.fillColor;
+  }
+  /** @memberof SerieLine
+   */
+  isMonotoneous() {
+    if (this.waveform) {
+      return this.waveform.isMonotoneous();
+    }
+    return !!this.xmonotoneous;
+  }
+  findLocalMinMax(xRef, xWithin, type) {
+    if (!this.waveform) {
+      return false;
+    }
+    return this.waveform.findLocalMinMax(xRef, xWithin, type);
+  }
+  /**
+   * Performs a binary search to find the closest point index to an x value. For the binary search to work, it is important that the x values are monotoneous.
+   * If the serie is not monotoneously ascending, then a Euclidian search is made
+   * @param {Number} valX - The x value to search for
+   * @param {number} valY - The y value to search for. Optional. When omitted, only a search in x will be done
+   * @param {Number} withinPxX - The maximum distance in X
+   * @param {number} withinPxY - The maximum distance in Y
+   * @param {string} useAxis - ```x``` or ```y```. Use only the value of x or y to find the closest point
+   * @returns {Object} Index in the data array of the closest (x,y) pair to the pixel position passed in parameters
+   * @memberof SerieLine
+   */
+  getClosestPointToXY(
+    valX = this.getXAxis().getMouseVal(),
+    valY = this.getYAxis().getMouseVal(),
+    withinPxX = 0,
+    withinPxY = 0,
+    useAxis = false,
+    usePx = true,
+  ) {
+    // For the scatter serie it's pretty simple. No interpolation. We look at the point directly
+    //const xVal = this.getXAxis().getVal( x );
+    //const yVal = this.getYAxis().getVal( y );
+    const xValAllowed = this.getXAxis().getRelVal(withinPxX);
+    const yValAllowed = this.getYAxis().getRelVal(withinPxY);
+    // Index of the closest point
+    const closestPointIndex = this.waveform.findWithShortestDistance({
+      x: valX,
+      y: valY,
+      xMaxDistance: xValAllowed,
+      yMaxDistance: yValAllowed,
+      axisRef: useAxis,
+      scaleX: !usePx ? 1 : 1 / this.getXAxis().getRelVal(1),
+      scaleY: !usePx ? 1 : 1 / this.getYAxis().getRelVal(1),
+    });
+    if (isNaN(closestPointIndex) || closestPointIndex === false) {
+      return false;
+    }
+    /*
       
@@ -986,36 +1087,35 @@ if (
         */
-        if (closestPointIndex < 0) {
-            return false;
-        }
-        const dataOutput = {
-            indexBefore: closestPointIndex,
-            indexAfter: closestPointIndex,
-            xExact: valX,
-            indexClosest: closestPointIndex,
-            interpolatedY: this.waveform.getY(closestPointIndex),
-            xClosest: this.waveform.getX(closestPointIndex),
-            yClosest: this.waveform.getY(closestPointIndex)
-        };
-        if (this.waveform.isMonotoneous()) {
-            let xBefore = this.waveform.getX(closestPointIndex);
-            let xAfter = this.waveform.getX(closestPointIndex);
-            let yBefore = this.waveform.getY(closestPointIndex);
-            let yAfter = this.waveform.getX(closestPointIndex);
-            if (xBefore < xAfter) {
-                dataOutput.xBefore = xBefore;
-                dataOutput.xAfter = xAfter;
-                dataOutput.yBefore = yBefore;
-                dataOutput.yAfter = yAfter;
-            }
-            else {
-                dataOutput.xBefore = xAfter;
-                dataOutput.xAfter = xBefore;
-                dataOutput.yBefore = yAfter;
-                dataOutput.yAfter = yBefore;
-            }
-        }
-        return dataOutput;
+    if (closestPointIndex < 0) {
+      return false;
     }
+    const dataOutput = {
+      indexBefore: closestPointIndex,
+      indexAfter: closestPointIndex,
+      xExact: valX,
+      indexClosest: closestPointIndex,
+      interpolatedY: this.waveform.getY(closestPointIndex),
+      xClosest: this.waveform.getX(closestPointIndex),
+      yClosest: this.waveform.getY(closestPointIndex),
+    };
+    if (this.waveform.isMonotoneous()) {
+      let xBefore = this.waveform.getX(closestPointIndex);
+      let xAfter = this.waveform.getX(closestPointIndex);
+      let yBefore = this.waveform.getY(closestPointIndex);
+      let yAfter = this.waveform.getX(closestPointIndex);
+      if (xBefore < xAfter) {
+        dataOutput.xBefore = xBefore;
+        dataOutput.xAfter = xAfter;
+        dataOutput.yBefore = yBefore;
+        dataOutput.yAfter = yAfter;
+      } else {
+        dataOutput.xBefore = xAfter;
+        dataOutput.xAfter = xBefore;
+        dataOutput.yBefore = yAfter;
+        dataOutput.yAfter = yBefore;
+      }
+    }
+    return dataOutput;
+  }
 }
 util.mix(SerieLine, ErrorBarMixin);
 export default SerieLine;

src/series/graph.serie.line.ts

@@ -80,4 +80,4 @@ // @ts-nocheck
 
-  constructor(graph: Graph, name: string, options: SerieLineOptions ) {
-    super( graph, name, options);
+  constructor(graph: Graph, name: string, options: SerieLineOptions) {
+    super(graph, name, options);
 
@@ -104,3 +104,3 @@ this.init();
 
-    
+
     this.data = [];
@@ -178,8 +178,8 @@ this._isMinOrMax = {
   protected init() {
-    this.options = this.extendLineOptions( this.options );
+    this.options = this.extendLineOptions(this.options);
     util.mapEventEmission(this.options, this); // Register events
   }
 
-  protected extendLineOptions<T extends SerieLineOptions>( options: T ): T {
-    options = super.extendScatterOptions( util.extend( true, {}, defaultOptions, options ) )
+  protected extendLineOptions<T extends SerieLineOptions>(options: T): T {
+    options = super.extendScatterOptions(util.extend(true, {}, defaultOptions, options))
     return options;
@@ -243,3 +243,3 @@ }
   unselect() {
-   
+
     super.unselect();
@@ -254,3 +254,3 @@ return this.select('unselected');
    */
-  getSymbolForLegend() : SVGElement {
+  getSymbolForLegend(): SVGElement {
     const container = this.symbolLegendContainer;
@@ -261,3 +261,3 @@
       this.applyLineStyle(line);
-      
+
       line.setAttribute('x1', "5");
@@ -288,3 +288,3 @@ line.setAttribute('x2', "25");
    */
-  degrade( pxPerP: number ) {
+  degrade(pxPerP: number) {
     this._degradationPx = pxPerP;
@@ -313,3 +313,2 @@ return this;
     // Degradation
-
     if (this.waveform) {
@@ -435,7 +434,5 @@ if (this._degradationPx) {
     //this.applyLineStyle(this.getSymbolForLegend());
-    if (this.hasStyleChanged(this.getActiveStyle())) {
-      this.computeActiveStyle();
-      this.updateStyle();
-    }
 
+    this.recomputeActiveStyleIfNeeded();
+
     this.dataHasChanged(false);
@@ -838,3 +835,3 @@ super.afterDraw();
    */
-  applyLineStyles() {
+  protected applyLineStyles() {
     for (var i = 0; i < this.lines.length; i++) {
@@ -849,3 +846,3 @@ this.applyLineStyle(this.lines[i]);
    */
-  applyLineStyle(line) {
+  protected applyLineStyle(line) {
 
@@ -1120,5 +1117,5 @@ line.setAttribute('stroke', this.getLineColor());
 
-    if( Array.isArray( s ) ) {
+    if (Array.isArray(s)) {
       return s.join(', ');
-    } else if( typeof s == "string" ) {
+    } else if (typeof s == "string") {
       return s;
@@ -1147,3 +1144,3 @@ } else {
         case Dasharray.DASHED_SM_INTV_LG:
-            return '2 5';
+          return '2 5';
           break;
@@ -1160,3 +1157,3 @@ case Dasharray.DASHED_INTV_ALT:
         case Dasharray.DASHED_SM_INTV_XL:
-            return '2 9';
+          return '2 9';
           break;
@@ -1256,3 +1253,10 @@ default:
    */
-  getClosestPointToXY(valX = this.getXAxis().getMouseVal(), valY = this.getYAxis().getMouseVal(), withinPxX = 0, withinPxY = 0, useAxis = false, usePx = true) {
+  getClosestPointToXY(
+    valX: number = this.getXAxis().getMouseVal(),
+    valY: number = this.getYAxis().getMouseVal(),
+    withinPxX: number = 0,
+    withinPxY: number = 0,
+    useAxis: boolean = false,
+    usePx: boolean = true
+  ) {
     // For the scatter serie it's pretty simple. No interpolation. We look at the point directly
@@ -1275,3 +1279,2 @@
     });
-
     if (isNaN(closestPointIndex) || closestPointIndex === false) {
@@ -1278,0 +1281,0 @@ return false;

src/series/graph.serie.scatter.ts

@@ -0,0 +0,0 @@ // @ts-nocheck

src/series/graph.serie.ts

@@ -1,3 +0,3 @@
-// @ts-nocheck
 
+
 import Graph, { ns } from '../graph.core';
@@ -8,3 +8,3 @@
 // @ts-ignore
-import EventMixing from '../mixins/graph.mixin.event_graph.js';
+import { EventEmitter } from '../mixins/graph.mixin.event';
 // @ts-ignore
@@ -20,14 +20,10 @@ import { SerieOptions, SerieStyle } from '../../types/series'
 
-const defaultOptions: SerieOptions = {
+const defaultOptions: Partial<SerieOptions> = {
   redrawShapesAfterDraw: false
 };
 
-/**
- * Serie class to be extended
- * @static
- */
-class Serie {
+class Serie extends EventEmitter {
 
   public options: SerieOptions
-  private graph: Graph
+  protected graph: Graph
   private name: string
@@ -38,2 +34,3 @@ protected groupMain: SVGElement
   private _unselectedStyleName: string;
+  private _changedStyles: { [x: string]: boolean }
 
@@ -44,8 +41,11 @@ protected minX: number;
   protected maxY: number;
-  
-  private styles: { [x: string]: {
-    base: string,
-    data: SerieStyle 
-  } }
 
+
+  private styles: {
+    [x: string]: {
+      base?: string,
+      data: SerieStyle
+    }
+  }
+
   protected shown: boolean = true;
@@ -56,2 +56,5 @@ protected selected: boolean = false;
   constructor(graph, name, options = {}) {
+
+    super();
+
     this.options = util.extend(
@@ -72,6 +75,6 @@ true, {},
 
-  init() {}
+  init() { }
 
-  extendOptions<T extends SerieOptions>( options: T ) : T {
-    options = util.extend( true, {}, defaultOptions, options );
+  extendOptions<T extends SerieOptions>(options: T): T {
+    options = util.extend(true, {}, defaultOptions, options);
     return options;
@@ -83,3 +86,5 @@ }
 
-  draw() { }
+  draw(force: boolean) {
+    throw new Error("Method draw must be implemented");
+  }
 
@@ -104,8 +109,4 @@ beforeDraw() { }
    * @param{String} [ type=float ] - Specify the type of the data. Use <code>int</code> to save memory (half the amount of bytes allocated to the data).
-   * @example serie.setData( [ [ x1, y1 ], [ x2, y2 ], ... ] );
-   * @example serie.setData( [ x1, y1, x2, y2, ... ] ); // Faster
-   * @example serie.setData( [ [ x1, y1, x2, y2, ..., xn, yn ] , [ xm, ym, x(m + 1), y(m + 1), ...] ], true ) // 1D array with a gap in the middle
-   * @example serie.setData( { x: x0, dx: spacing, y: [ y1, y2, y3, y4 ] } ); // Data with equal x separation. Fastest way
-   */
-  setData(data, oneDimensional, type) {
+  */
+  setData(data: Waveform) {
     if (data instanceof Waveform) {
@@ -156,3 +157,3 @@ return this.setWaveform(data);
    */
-  setOption(name, value) {
+  setOption<T extends keyof SerieOptions>(name: T, value: SerieOptions[T]) {
     this.options[name] = value;
@@ -166,3 +167,3 @@ }
    */
-  kill(noLegendUpdate) {
+  kill(noLegendUpdate: boolean) {
     this.graph.removeSerieFromDom(this);
@@ -348,2 +349,3 @@ this.graph._removeSerie(this);
   _checkY(val) {
+
     this.minY = Math.min(this.minY, val);
@@ -379,8 +381,11 @@ this.maxY = Math.max(this.maxY, val);
     // After axes have been assigned, the graph axes should update their min/max
-    this.graph.updateDataMinMaxAxes();
+    this.graph.updateDataMinMaxAxes(false);
     return this;
   }
 
+  /**
+   * @alias autoAxis
+   */
   autoAxes() {
-    return this.autoAxis(...arguments);
+    return this.autoAxis();
   }
@@ -404,3 +409,3 @@
 
-    this.graph.updateDataMinMaxAxes();
+    this.graph.updateDataMinMaxAxes(false);
 
@@ -426,3 +431,3 @@ return this;
 
-    this.graph.updateDataMinMaxAxes();
+    this.graph.updateDataMinMaxAxes(false);
 
@@ -446,3 +451,3 @@ return this;
 
-    this.graph.updateDataMinMaxAxes();
+    this.graph.updateDataMinMaxAxes(false);
 
@@ -526,3 +531,3 @@ return this;
     this.dataHasChanged();
-    this.graph.updateDataMinMaxAxes();
+    this.graph.updateDataMinMaxAxes(false);
 
@@ -543,6 +548,6 @@
 
-      line.setAttribute('x1', 5);
-      line.setAttribute('x2', 25);
-      line.setAttribute('y1', 0);
-      line.setAttribute('y2', 0);
+      line.setAttribute('x1', "5");
+      line.setAttribute('x2', "25");
+      line.setAttribute('y1', "0");
+      line.setAttribute('y2', "0");
 
@@ -557,13 +562,13 @@ line.setAttribute('cursor', 'pointer');
 
-  _getSymbolForLegendContainer() : SVGElement {
+  _getSymbolForLegendContainer(): SVGElement {
     return this.symbolLegendContainer;
   }
 
-  extendStyle( data: Object, styleName: string = 'unselected', baseStyleName: string = 'unselected' ) {
-    this.styles[ styleName ] = this.styles[ styleName ] || { base: baseStyleName, data: {}}
-    util.extend( this.styles[ styleName ].data, data );
+  extendStyle(data: Object, styleName: string = 'unselected', baseStyleName: string = 'unselected') {
+    this.styles[styleName] = this.styles[styleName] || { base: baseStyleName, data: {} }
+    util.extend(this.styles[styleName].data, data);
   }
 
   setStyle(json, styleName = 'unselected', baseStyleName = 'unselected') {
-   
+
     this.styles[styleName] = {
@@ -581,3 +586,3 @@ base: baseStyleName,
     if (!this.styles[styleName]) {
-      return this.graph.constructor.getStyle(styleName);
+      return Graph.getStyle(styleName);
     }
@@ -631,2 +636,9 @@ return this._buildStyle(styleName);
 
+  protected recomputeActiveStyleIfNeeded() {
+    if (this.hasStyleChanged(this.getActiveStyle())) {
+      this.computeActiveStyle();
+      this.updateStyle();
+    }
+  }
+
   getComputedStyle(style = this.getActiveStyle()) {
@@ -640,13 +652,12 @@ return this.computedStyle[style];
 
-  private _buildStyle( styleName: string ) {
-    let base = this.styles[ styleName ].base;
-
-    if( base == styleName ) {
-      base = null;
+  private _buildStyle(styleName: string) {
+    let base: string | undefined = this.styles[styleName].base;
+    if (base == styleName) {
+      base = undefined;
     }
 
-    if (!base) {
-      return util.extend(true, {}, this.styles[ styleName ].data);
+    if (base === undefined) {
+      return util.extend(true, {}, this.styles[styleName].data);
     } else {
-      return util.extend(true, {}, this.getStyle(base), this.styles[ styleName ].data);
+      return util.extend(true, {}, this.getStyle(base), this.styles[styleName].data);
     }
@@ -790,3 +801,3 @@ }
    */
-  styleHasChanged(selectionType: string | boolean = 'unselected') {
+  styleHasChanged(selectionType: string | false = 'unselected') {
     this._changedStyles = this._changedStyles || {};
@@ -799,3 +810,3 @@
     } else {
-      this._changedStyles[selectionType || 'unselected'] = true;
+      this._changedStyles[selectionType ? selectionType : 'unselected'] = true;
     }
@@ -825,4 +836,4 @@
 
-      
-      if (!s || s.base == selectionType ) {
+
+      if (!s || s.base == selectionType) {
         break;
@@ -840,3 +851,3 @@ }
    */
-  dataHasChanged(arg) {
+  dataHasChanged(arg?: any) {
     this._dataHasChanged = arg === undefined || arg;
@@ -946,3 +957,3 @@
     this._tracker = true;
-
+    this.options.tracking = {};
     return this;
@@ -1014,6 +1025,4 @@ }
 
-EventMixing(Serie, 'serie');
-
 export default Serie;
 
 

src/series/graph.serie.zone.3d.js

@@ -0,0 +0,0 @@ // import Graph from '../graph.core.js';

src/series/graph.serie.zone.js

@@ -0,0 +0,0 @@ import {

src/shapes/graph.shape.areaundercurve.js

@@ -0,0 +0,0 @@ import Shape from './graph.shape.js';

src/shapes/graph.shape.arrow.js

@@ -0,0 +0,0 @@ import ShapeLine from './graph.shape.line.js';

src/shapes/graph.shape.cross.js

@@ -0,0 +0,0 @@ import Shape from './graph.shape.js';

src/shapes/graph.shape.ellipse.js

@@ -10,37 +10,32 @@ import * as util from '../graph.util.js';
 class ShapeEllipse extends Shape {
-
-  constructor( graph, options ) {
-    super( graph, options );
+  constructor(graph, options) {
+    super(graph, options);
   }
 
   createDom() {
-    this._dom = document.createElementNS( this.graph.ns, 'ellipse' );
+    this._dom = document.createElementNS(this.graph.ns, 'ellipse');
   }
 
   applyPosition() {
-
-    var pos = this.computePosition( 0 );
-    if ( !pos ) {
+    var pos = this.computePosition(0);
+    if (!pos) {
       return;
     }
-    this.setDom( 'cx', pos.x || 0 );
-    this.setDom( 'cy', pos.y || 0 );
+    this.setDom('cx', pos.x || 0);
+    this.setDom('cy', pos.y || 0);
+    let posR = this.graph.newPosition({
+      dx: this.getProp('rx', 0),
+      dy: this.getProp('ry', 0) || this.getProp('rx', 0),
+    });
 
-    let posR = this.graph.newPosition( {
+    let posComputed = this.calculatePosition(posR);
 
-      dx: this.getProp( 'rx' ),
-      dy: this.getProp( 'ry' ) || this.getProp( 'rx' )
-
-    } );
-
-    let posComputed = this.calculatePosition( posR );
-
-    this.setDom( 'rx', Math.abs( posComputed.x ) || 0 );
-    this.setDom( 'ry', Math.abs( posComputed.y ) || 0 );
+    this.setDom('rx', Math.abs(posComputed.x) || 0);
+    this.setDom('ry', Math.abs(posComputed.y) || 0);
     return true;
   }
 
-  setR( rx, ry ) {
-    this.setProp( 'rx', rx );
-    this.setProp( 'ry', ry );
+  setR(rx, ry) {
+    this.setProp('rx', rx);
+    this.setProp('ry', ry);
     return this;
@@ -53,7 +48,5 @@ }
 
-  handleMouseMoveImpl( e, deltaX, deltaY, deltaXPx, deltaYPx ) {
-
-  }
+  handleMouseMoveImpl(e, deltaX, deltaY, deltaXPx, deltaYPx) {}
 }
 
-export default ShapeEllipse;
+export default ShapeEllipse;

src/shapes/graph.shape.html.js

@@ -0,0 +0,0 @@ import {

src/shapes/graph.shape.js

 import GraphPosition from '../graph.position.js';
 import * as util from '../graph.util.js';
+import { EventEmitter } from '../mixins/graph.mixin.event.js';
 import EventMixin from '../mixins/graph.mixin.event_graph.js';
@@ -9,4 +10,6 @@ /**
  */
-class Shape {
-  constructor() { }
+class Shape extends EventEmitter {
+  constructor() {
+    super();
+  }
 
@@ -29,3 +32,3 @@ /**
       if (!this.getProp('noClip')) {
-        this.group.setAttribute('clip-path', `url(#_clipplot${graph._creation})`);
+        this.group.setAttribute('clip-path', `url(#_clipplot${graph.uid})`);
       }
@@ -112,3 +115,3 @@ this.group.jsGraphIsShape = this;
    */
-  initImpl() { }
+  initImpl() {}
 
@@ -260,4 +263,3 @@ /**
   setEventReceptacle() {
-
-    if (this, simplified) {
+    if ((this, simplified)) {
       return;
@@ -442,3 +444,3 @@ }
    */
-  redrawImpl() { }
+  redrawImpl() {}
 
@@ -458,7 +460,8 @@ /**
     for (var i = 0, l = this.properties.position.length; i < l; i++) {
-      var pos = GraphPosition.check(this.properties.position[i], function (
-        relativeTo
-      ) {
-        return self.getRelativePosition(relativeTo);
-      });
+      var pos = GraphPosition.check(
+        this.properties.position[i],
+        function (relativeTo) {
+          return self.getRelativePosition(relativeTo);
+        },
+      );
 
@@ -504,3 +507,2 @@ this.properties.position[i] = pos;
       this.properties[prop][index || 0] = val;
-
     } else {
@@ -519,5 +521,3 @@ this.properties[prop] = val;
   getProp(prop, index) {
-
     if (index == undefined) {
-
       return this.properties[prop];
@@ -558,3 +558,2 @@ }
   setDom(prop, val, noForce) {
-
     this._cachedDOM = this._cachedDOM || {};
@@ -578,3 +577,2 @@
   setDomGroup(prop, val) {
-
     if (this.simplified) {
@@ -710,3 +708,3 @@ this._dom.setAttribute(prop, val);
       type: type,
-      arguments: Array.isArray(args) ? args : [args]
+      arguments: Array.isArray(args) ? args : [args],
     });
@@ -730,7 +728,7 @@ return this;
           x: cx,
-          y: cy
+          y: cy,
         },
         angle: angle,
-        angleType: angleType
-      }
+        angleType: angleType,
+      },
     });
@@ -952,6 +950,6 @@ return this;
           i,
-          typeof attributes[j][i] == 'function' ?
-            attributes[j][i].call(this, i) :
-            attributes[j][i],
-          true
+          typeof attributes[j][i] == 'function'
+            ? attributes[j][i].call(this, i)
+            : attributes[j][i],
+          true,
         );
@@ -984,5 +982,3 @@ }
     if (!(index instanceof GraphPosition)) {
-
       position = this.getPosition(index);
-
     } else {
@@ -1001,3 +997,3 @@ position = index;
         this.getYAxis(),
-        this.getSerie()
+        this.getSerie(),
       );
@@ -1077,3 +1073,3 @@ }
               this.getYAxis(),
-              this.getSerie()
+              this.getSerie(),
             );
@@ -1087,3 +1083,3 @@ } else {
               this.getYAxis(),
-              this.getSerie()
+              this.getSerie(),
             );
@@ -1102,5 +1098,3 @@ }
           if (!transforms[i].arguments) {
-
             if (transforms[i].angleType == 'angleData') {
-
               let xAxis, yAxis;
@@ -1116,3 +1110,10 @@
 
-              angle = Math.atan(Math.tan(transforms[i].angle * Math.PI / 180) * xAxis.getRelVal(1) / yAxis.getRelVal(1)) * 180 / Math.PI;
+              angle =
+                (Math.atan(
+                  (Math.tan((transforms[i].angle * Math.PI) / 180) *
+                    xAxis.getRelVal(1)) /
+                    yAxis.getRelVal(1),
+                ) *
+                  180) /
+                Math.PI;
             } else {
@@ -1130,3 +1131,3 @@ angle = transforms[i].angle;
               const posCenter = GraphPosition.check(
-                transforms[i].center
+                transforms[i].center,
               ).compute(
@@ -1136,3 +1137,3 @@ this.graph,
                 this.getYAxis(),
-                this.getSerie()
+                this.getSerie(),
               );
@@ -1145,7 +1146,4 @@
                 transformString += posCenter.y;
-
               }
-
             }
-
           } else {
@@ -1161,3 +1159,3 @@ transformString += transforms[i].arguments[0];
                 transforms[i].arguments[1],
-                this.getXAxis()
+                this.getXAxis(),
               ).replace('px', '');
@@ -1167,3 +1165,3 @@ transformString += ', ';
                 transforms[i].arguments[2],
-                this.getYAxis()
+                this.getYAxis(),
               ).replace('px', '');
@@ -1189,3 +1187,2 @@ }
   makeLabels() {
-
     if (this.simplified) {
@@ -1212,3 +1209,2 @@ return;
       if (!this._labels[i]) {
-
         this._labels[i] = document.createElementNS(this.graph.ns, 'text');
@@ -1220,3 +1216,3 @@ this._labels[i].setAttribute('data-label-i', i);
           this.graph.ns,
-          'rect'
+          'rect',
         );
@@ -1301,3 +1297,3 @@ this._labelsBackground[i].setAttribute('data-label-i', i);
     var position = this.calculatePosition(
-      GraphPosition.check(this.getProp('labelPosition', labelIndex))
+      GraphPosition.check(this.getProp('labelPosition', labelIndex)),
     );
@@ -1336,3 +1332,3 @@
         'transform',
-        `rotate(${currAngle} ${x} ${y})`
+        `rotate(${currAngle} ${x} ${y})`,
       );
@@ -1352,3 +1348,3 @@ //  this._labelsBackground[ labelIndex ].setAttribute( 'transform', 'rotate(' + currAngle + ' ' + x + ' ' + y + ')' );
       'dominant-baseline',
-      this.getProp('labelBaseline', labelIndex) || 'no-change'
+      this.getProp('labelBaseline', labelIndex) || 'no-change',
     );
@@ -1359,3 +1355,3 @@
       'labelText',
-      labelIndex
+      labelIndex,
     );
@@ -1366,3 +1362,3 @@
       'fill',
-      this.getProp('labelColor', labelIndex) || 'black'
+      this.getProp('labelColor', labelIndex) || 'black',
     );
@@ -1374,3 +1370,3 @@
         'font-size',
-        `${this.getProp('labelSize', labelIndex) || 12}px`
+        `${this.getProp('labelSize', labelIndex) || 12}px`,
       );
@@ -1382,3 +1378,3 @@ }
       'text-anchor',
-      this._getLabelAnchor(labelIndex)
+      this._getLabelAnchor(labelIndex),
     );
@@ -1389,3 +1385,3 @@
       'stroke',
-      this.getProp('labelStrokeColor', labelIndex) || 'black'
+      this.getProp('labelStrokeColor', labelIndex) || 'black',
     );
@@ -1396,3 +1392,3 @@
       'stroke-width',
-      this.getProp('labelStrokeWidth', labelIndex) || `${0}px`
+      this.getProp('labelStrokeWidth', labelIndex) || `${0}px`,
     );
@@ -1411,7 +1407,7 @@
       'fill',
-      this.getProp('labelBackgroundColor') || 'transparent'
+      this.getProp('labelBackgroundColor') || 'transparent',
     );
     this._labelsBackground[labelIndex].setAttribute(
       'fill-opacity',
-      this.getProp('labelBackgroundOpacity') || 1
+      this.getProp('labelBackgroundOpacity') || 1,
     );
@@ -1495,3 +1491,2 @@
   addHandles() {
-
     if (this.simplified) {
@@ -1733,3 +1728,3 @@ return;
    */
-  handleMouseDownImpl() { }
+  handleMouseDownImpl() {}
 
@@ -1741,3 +1736,3 @@ /**
    */
-  handleMouseMoveImpl() { }
+  handleMouseMoveImpl() {}
 
@@ -1749,3 +1744,3 @@ /**
    */
-  handleMouseUpImpl() { }
+  handleMouseUpImpl() {}
 
@@ -1757,3 +1752,3 @@ /**
    */
-  handleCreateImpl() { }
+  handleCreateImpl() {}
 
@@ -1852,3 +1847,3 @@ /**
       coords.x - this._mouseCoords.x,
-      coords.y - this._mouseCoords.y
+      coords.y - this._mouseCoords.y,
     );
@@ -1890,3 +1885,3 @@
    */
-  handleDblClick(e) { }
+  handleDblClick(e) {}
 
@@ -2061,4 +2056,4 @@ /**
 
-  highlightImpl() { }
-  unHighlightImpl() { }
+  highlightImpl() {}
+  unHighlightImpl() {}
 
@@ -2121,7 +2116,7 @@ /**
       x: 'min',
-      y: 'min'
+      y: 'min',
     };
     var position2 = {
       x: 'max',
-      y: 'max'
+      y: 'max',
     };
@@ -2137,7 +2132,7 @@
       'width',
-      Math.abs(position2.x - position.x)
+      Math.abs(position2.x - position.x),
     );
     this.maskDomWrapper.setAttribute(
       'height',
-      Math.abs(position2.y - position.y)
+      Math.abs(position2.y - position.y),
     );
@@ -2148,3 +2143,3 @@
         this._dom.attributes[i].name,
-        this._dom.attributes[i].value
+        this._dom.attributes[i].value,
       );
@@ -2183,10 +2178,14 @@ }
       position: 'absolute',
-      marginTop: `${parseInt(e.target.getAttribute('y').replace('px', '')) +
+      marginTop: `${
+        parseInt(e.target.getAttribute('y').replace('px', '')) +
         this.graph.getPaddingTop() -
-        10}px`,
-      marginLeft: `${parseInt(e.target.getAttribute('x').replace('px', '')) +
+        10
+      }px`,
+      marginLeft: `${
+        parseInt(e.target.getAttribute('x').replace('px', '')) +
         this.graph.getPaddingLeft() -
-        50}px`,
+        50
+      }px`,
       textAlign: 'center',
-      width: '100px'
+      width: '100px',
     });
@@ -2208,3 +2207,3 @@
         previousValue: previousValue,
-        nextValue: nextValue
+        nextValue: nextValue,
       });
@@ -2273,4 +2272,2 @@ };
 
-EventMixin(Shape, 'shape');
-
-export default Shape;
+export default Shape;

src/shapes/graph.shape.label.js

@@ -0,0 +0,0 @@ import GraphShape from './graph.shape.js';

src/shapes/graph.shape.line.js

@@ -0,0 +0,0 @@ import GraphShape from './graph.shape.js';

src/shapes/graph.shape.nmrintegral.js

@@ -0,0 +0,0 @@ import GraphPosition from '../graph.position.js';

src/shapes/graph.shape.peakboundariescenter.js

@@ -0,0 +0,0 @@ import ShapeLine from './graph.shape.line.js';

src/shapes/graph.shape.peakintegration2d.js

@@ -0,0 +0,0 @@ import ShapeRect from './graph.shape.rect.js';

src/shapes/graph.shape.peakinterval.js

@@ -0,0 +0,0 @@ define( [ '../graph.util', './graph.shape.line' ], function( util, GraphLine ) {

src/shapes/graph.shape.peakinterval2.js

@@ -0,0 +0,0 @@ define( [ '../graph.util', './graph.shape.line' ], function( util, GraphLine ) {

src/shapes/graph.shape.polygon.js

@@ -0,0 +0,0 @@ import Shape from './graph.shape.js';

src/shapes/graph.shape.polyline.js

@@ -0,0 +0,0 @@ import Shape from './graph.shape.js';

src/shapes/graph.shape.rect.js

@@ -0,0 +0,0 @@ import * as util from '../graph.util.js';

src/shapes/graph.shape.zoom2d.js

@@ -0,0 +0,0 @@ define( [ '../graph.util', './graph.shape' ], function( util, GraphShape ) {

src/util/dist/waveform.js

@@ -0,0 +0,0 @@ 'use strict';

src/util/package.json

@@ -0,0 +0,0 @@ {

test/main.js

@@ -0,0 +0,0 @@ import * as mod from "./mod"

test/memorytest.js

@@ -0,0 +0,0 @@ var g;

test/mod.js

@@ -0,0 +0,0 @@ function write( val ) {

tsconfig.json

 {
     "compilerOptions": {
         "target": "ES6",
-        "lib": [ "es5", "dom" ],
+        "lib": [ "es2015", "dom" ],
         "esModuleInterop": true,
@@ -6,0 +6,0 @@ // Ensure that .d.ts files are created by tsc, but not .js files

tutorials/10_basic.md

@@ -0,0 +0,0 @@ <script>

tutorials/10-zoom.md

@@ -0,0 +0,0 @@ <script>

tutorials/11-seriestyle.md

@@ -0,0 +0,0 @@ ************************

tutorials/12-shapes.md

@@ -0,0 +0,0 @@ jsGraph can be used not only to display data in series, but it can also be used to create shapes associated to this data. In this tutorial, we demonstrate how to create various shapes, position them on your graph, change their style and allow manipulation.

tutorials/13-shapes-types.md

@@ -0,0 +0,0 @@ In the previous tutorial ({@tutorial 4-shapes}) we have shown the basics of shape creation, styling and modifications. Here, we simply showcase the different provided with jsGraph with their specificities.

tutorials/15-barcharts.md

@@ -0,0 +0,0 @@ Since v1.15, jsGraph allows you to use the bar chart series together with the bar x axis. The two have to work together, i.e. you cannot assign a line serie to a bar axis neither a bar serie to a normal or a time axis. In addition, for now, bar graphs are only accepted in the x direction (vertical bars).

tutorials/15-shapes-events.md

@@ -0,0 +0,0 @@ Shapes feature events. However those events are fired at the {@link Graph} level, to avoid registering too many event handlers which would slow down jsGraph and use up too much memory.

tutorials/16-boxcharts.md

@@ -0,0 +0,0 @@ Since v1.16, jsGraph support box charts. Box charts are a nice way to render statistical data, and is similar but more flexible than bar charts. While bar charts start at zero and display a cityscape till a certain value, plus potentially an error bar, box charts displays the median (second quartile, Q2), two box boundaries (first and third quartile, Q1 and Q3), and two whiskers that can take any data.

tutorials/16-errorbars.md

@@ -0,0 +0,0 @@ <script>

tutorials/17-trackingline.md

@@ -0,0 +0,0 @@ jsGraph allows you to display a vertical line as a tracker and to display information about the series at the x point of the tracker. Obviously your x data must be monotoneously increasing for this feature to work. I will show you through a serie of examples how to work with the tracking features.

tutorials/18-adaptto.md

@@ -0,0 +0,0 @@ <script>

tutorials/19-axisspan.md

@@ -0,0 +0,0 @@ jsGraph allows you to have in a single graph more than one axis at the same position (top, left, right, bottom). Axes don't actually have to take up the 100% of the space, horizontally or vertically.

tutorials/20-axesadvanced.md

@@ -0,0 +0,0 @@ <script>

tutorials/22-linedifference.md

@@ -0,0 +0,0 @@ The plugin `serielinedifference` (or `serieLineDifference`, using camel-casing) allows you to color the area between two series, `serieTop` and `serieBottom`. Different styles can be applied whether `serieTop` is above (positive) or below (negative) `serieBottom`. The only requirement for this plugin is that the x values of each serie is monotoneously increasing (decreasing will _not_ work).

tutorials/23-densitymap.md

@@ -0,0 +0,0 @@ Density maps are a great way to render a lot of overlapping data. When data points that have some kind of an ```(x,y)``` relationships and you have sampled a lot of data, it would make little sense to render it with a normal line serie because:

tutorials/tutorials.json

@@ -0,0 +0,0 @@ {

types/main.ts

@@ -0,0 +0,0 @@

types/series.d.ts

@@ -26,3 +26,7 @@ export declare type SerieStyle = {
 export declare type SerieOptions = {
-    redrawShapesAfterDraw?: boolean;
+    redrawShapesAfterDraw: boolean;
+    bindShapesToDisplayState: boolean;
+    label: string;
+    flip: boolean;
+    layer: number;
 };

types/series.ts

 export type SerieStyle = {
-    [ x: string ]: any
+    [x: string]: any
 }
@@ -24,5 +24,5 @@
     HISTOGRAM = "HISTOGRAM"
-  }
-    
+}
 
+
 export interface SerieInterface {
@@ -33,4 +33,11 @@ getType(): SERIE_TYPE
 export type SerieOptions = {
-    redrawShapesAfterDraw?: boolean
+    redrawShapesAfterDraw: boolean,
+    bindShapesToDisplayState: boolean,
+    label: string,
+    flip: boolean,
+    layer: number,
+
+    tracking: any,
+
+    box_orientation: 'y' | 'x'
 }
-  

util/doctemplate/publish.js

@@ -0,0 +0,0 @@ 'use strict';

util/doctemplate/README.md

@@ -0,0 +0,0 @@ The default template for JSDoc 3 uses: [the Taffy Database library](http://taffydb.com/) and the [Underscore Template library](http://documentcloud.github.com/underscore/#template).

webpack.config.js

@@ -1,29 +0,26 @@
-
-
 const path = require('path');
 
 const babel = {
-    test: /\.(m?js|ts)$/,
-    exclude: /node_modules/,
-    use: {
-        loader: 'babel-loader',
-        options: {
-            presets: [
-                [
-                "@babel/env",
-                {
-                    "targets": {
-                        "chrome": "90",
-                    },
-                    "useBuiltIns": "usage",
-                    "corejs": "3.6.5"
-                }],
-                [
-                    "@babel/preset-typescript"
-                ]
-            ],
-            plugins: [ '@babel/plugin-proposal-class-properties']
-        }
-    }
-}
+  test: /\.(m?js|ts)$/,
+  exclude: /node_modules/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      presets: [
+        [
+          '@babel/env',
+          {
+            targets: {
+              chrome: '90',
+            },
+            useBuiltIns: 'usage',
+            corejs: '3.6.5',
+          },
+        ],
+        ['@babel/preset-typescript'],
+      ],
+      plugins: ['@babel/plugin-proposal-class-properties'],
+    },
+  },
+};
 
@@ -33,27 +30,29 @@ const clientConfig = {
   output: {
-      library: {
-          type: 'commonjs2'
-      },
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'jsGraph.js'
+    library: {
+      type: 'module',
+    },
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'jsGraph.js',
   },
+  devtool: 'source-map',
+  experiments: {
+    outputModule: true,
+  },
+
   optimization: {
-    minimize: true
+    minimize: true,
   },
 
-  
   mode: 'production',
-  entry: "./src/graph.ts",
+  entry: './src/graph.ts',
   resolve: {
-      extensions: ['.ts', '.js', '.json'],
-      aliasFields: [ "browser" ]
+    extensions: ['.ts', '.js', '.json'],
+    aliasFields: ['browser'],
   },
- 
+
   module: {
-      rules: [
-          babel
-      ]
-  }
+    rules: [babel],
+  },
 };
 
-module.exports = clientConfig;
+module.exports = clientConfig;

No alert changes

Improved metrics

Total package byte prevSize

17874499

increased by30.32%

Number of package files

313

increased by23.23%

Lines of code

129583

increased by4.82%

Worsened metrics

Dev dependency count

19

increased by35.71%

No dependency changes