update example for print performaing

.gitignore

@@ -1,10 +1 @@
 node_modules
-dist
-
-# yarn
-.yarn
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions

.yarnrc.yml

@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-3.2.1.cjs

README.md

@@ -1,43 +1,2 @@
 # Chartwerk Line Pod
-## Including
 
-### Browser
-
-#### Script tag
-```html
-<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script>
-```
-
-#### Example
-```html
-<div id="line-chart" class="chart-block" style="width: 100%; height: 400px;"></div>
-
-<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script>
-<script>
-  new LinePod(document.getElementById('yourDivId', yourData, yourOptions)).render();
-</script>
-```
-
-#### Other examples
-* [Basic](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/basic.html)
-* [Live](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/live.html)
-* [Vertical](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/vertical.html)
-* [Segments](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/segments.html)
-* [Markers](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/markers.html)
-
-### Development
-
-If you want to link `core` then clone it to same directory and then run
-
-```
-yarn link ../core
-```
-
-but don't add `resolutions` logic to `package.json`
-
-then run
-
-```
-yarn install
-yarn dev
-```

build/webpack.base.conf.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const CopyPlugin = require("copy-webpack-plugin");
 
 
 function resolve(dir) {
@@ -9,14 +8,7 @@ function resolve(dir) {
 module.exports = {
   context: resolve('src'),
   entry: './index.ts',
-  plugins: [
+  plugins: [],
-    new CopyPlugin({
-      patterns: [
-        { from: "../react/dist/index.js", to: "react/index.js" },
-        { from: "../react/dist/index.d.ts", to: "react/index.d.ts" },
-      ],
-    })
-  ],
   module: {
     rules: [
       {
@@ -33,10 +25,6 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.js'],
-    // this is necessary for resolution of external libs like d3 in dev mode
-    // when core is linked: webpack will take d3 from this node_modules but not from
-    // internal so you get one version of d3
-    modules: [path.resolve(__dirname, '../node_modules'), 'node_modules']
   },
   output: {
     filename: 'index.js',

build/webpack.dev.conf.js

@@ -2,7 +2,7 @@ const baseWebpackConfig = require('./webpack.base.conf');
 
 var conf = baseWebpackConfig;
 conf.devtool = 'inline-source-map';
+conf.watch = true;
 conf.mode = 'development';
-conf.output.filename = 'index.dev.js';
 
 module.exports = conf;

build/webpack.prod.conf.js

@@ -2,8 +2,5 @@ const baseWebpackConfig = require('./webpack.base.conf');
 
 var conf = baseWebpackConfig;
 conf.mode = 'production';
-conf.externals = [
-  '@chartwerk/core', 'd3', 'lodash'
-];
 
 module.exports = baseWebpackConfig;

dist/index.d.ts

@@ -0,0 +1,100 @@
+import { ChartwerkPod, TickOrientation, TimeFormat } from '@chartwerk/core';
+import { LineTimeSerie, LineOptions, Mode } from './types';
+export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
+    lineGenerator: any;
+    constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions);
+    renderMetrics(): void;
+    clearAllMetrics(): void;
+    initLineGenerator(): void;
+    appendData(data: [number, number][], shouldRerender?: boolean): void;
+    _renderDots(datapoints: number[][], serieIdx: number): void;
+    _renderLines(datapoints: number[][], serieIdx: number): void;
+    _renderMetric(datapoints: number[][], metricOptions: {
+        color: string;
+        confidence: number;
+        target: string;
+        mode: Mode;
+        serieIdx: number;
+        renderDots: boolean;
+        renderLines: boolean;
+    }): void;
+    updateCrosshair(): void;
+    appendCrosshairCircles(): void;
+    appendCrosshairCircle(serieIdx: number): void;
+    renderSharedCrosshair(values: {
+        x?: number;
+        y?: number;
+    }): void;
+    hideSharedCrosshair(): void;
+    moveCrosshairLine(xPosition: number, yPosition: number): void;
+    moveCrosshairCircle(xPosition: number, yPosition: number, serieIdx: number): void;
+    hideCrosshairCircle(serieIdx: number): void;
+    getClosestDatapoint(serie: LineTimeSerie, xValue: number, yValue: number): [number, number];
+    getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number;
+    getValueInterval(columnIdx: number): number | undefined;
+    onMouseMove(): void;
+    findAndHighlightDatapoints(xValue: number, yValue: number): {
+        value: [number, number];
+        color: string;
+        label: string;
+    }[];
+    isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange?: boolean): boolean;
+    onMouseOver(): void;
+    onMouseOut(): void;
+    protected zoomOut(): void;
+}
+export declare const VueChartwerkLinePod: {
+    render(createElement: any): any;
+    mixins: {
+        props: {
+            id: {
+                type: StringConstructor;
+                required: boolean;
+            };
+            series: {
+                type: ArrayConstructor;
+                required: boolean;
+                default: () => any[];
+            };
+            options: {
+                type: ObjectConstructor;
+                required: boolean;
+                default: () => {};
+            };
+        };
+        watch: {
+            id(): void;
+            series(): void;
+            options(): void;
+        };
+        mounted(): void;
+        destroyed(): void;
+        methods: {
+            render(): void;
+            renderSharedCrosshair(values: {
+                x?: number;
+                y?: number;
+            }): void;
+            hideSharedCrosshair(): void;
+            onPanningRescale(event: any): void;
+            renderChart(): void;
+            appendEvents(): void;
+            zoomIn(range: any): void;
+            zoomOut(centers: any): void;
+            mouseMove(evt: any): void;
+            mouseOut(): void;
+            onLegendClick(idx: any): void;
+            panningEnd(range: any): void;
+            panning(range: any): void;
+            contextMenu(evt: any): void;
+            sharedCrosshairMove(event: any): void;
+            renderEnd(): void;
+        };
+    }[];
+    methods: {
+        render(): void;
+        renderSharedCrosshair(values: any): void;
+        hideSharedCrosshair(): void;
+    };
+};
+export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat };

dist/types.d.ts

@@ -0,0 +1,18 @@
+import { TimeSerie, Options } from '@chartwerk/core';
+declare type LineTimeSerieParams = {
+    confidence: number;
+    mode: Mode;
+    maxLength: number;
+    renderDots: boolean;
+    renderLines: boolean;
+    useOutOfRange: boolean;
+    dashArray: string;
+    class: string;
+};
+export declare enum Mode {
+    STANDARD = "Standard",
+    CHARGE = "Charge"
+}
+export declare type LineTimeSerie = TimeSerie & Partial<LineTimeSerieParams>;
+export declare type LineOptions = Options;
+export {};

examples/area.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
-
-    <script type="text/javascript">
-      let options = {
-        renderLegend: false, usePanning: false,
-        axis: {
-          x: { format: 'numeric', range: [0, 100] },
-          y: { invert: true, range: [0, 100] },
-          y1: { isActive: true, format: 'numeric', range: [0, 1000] },
-        },
-        zoomEvents: {
-          mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
-          scroll: { zoom: { isActive: false, orientation: 'horizontal' } }
-        },
-      }
-      const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
-      const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
-      const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
-      const data4 = [[0,900], [35, 800], [65, 700], [100, 600]];
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
-          { target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
-          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
-          { target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
-        ],
-        options
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/demo.html

@@ -4,26 +4,21 @@
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
 
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
+    <script src="../dist/index.js" type="text/javascript"></script>
   </head>
   <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <div id="chart" style="width: 500px; height: 500px;"></div>
 
     <script type="text/javascript">
       const startTime = 1590590148;
       const arrayLength = 20;
       const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
-      const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 10)]);
+      const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
       const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
       const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); }
       const panningEnd = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); }
       let options = {
-        renderLegend: false, usePanning: false,
+        renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },
-        axis: {
-          y: { invert: false, range: [0, 350] },
-          y1: { isActive: true, range: [0, 10],  ticksCount: 8 },
-          x: { format: 'time' }
-        },
         zoomEvents: {
           mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
           scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
@@ -33,8 +28,8 @@
       var pod = new LinePod(
         document.getElementById('chart'),
         [
-          { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
+          { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first' },
-          { target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
+          { target: 'test2', datapoints: data2, color: 'blue' },
           { target: 'test3', datapoints: data3, color: 'orange' },
         ],
         options

examples/demo_live.html

@@ -5,7 +5,7 @@
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
   <meta content="utf-8" http-equiv="encoding">
 
-  <script src="../dist/index.dev.js" type="text/javascript"></script>
+  <script src="../dist/index.js" type="text/javascript"></script>
 </head>
 
 <body>
@@ -15,9 +15,9 @@
     const startTime = 1590590148;
     const arrayLength = 100;
     this.isZoomed = false; // TODO: temporary hack to have zoomin|zoomout with `appendData`. It will be moved to Pod.
-    var data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+    const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
-    var data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
+    const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
-    var data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
+    const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
     const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); this.isZoomed = true }
     const zoomOut = (ranges) => { options.axis.x.range = undefined; pod.updateData(undefined, options); this.isZoomed = false }
     let options = { renderLegend: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },  eventsCallbacks: { zoomIn: zoomIn, zoomOut } };
@@ -37,17 +37,9 @@
       const d1 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
       const d2 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 100)];
       const d3 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
-      console.log('d1', data1)
       const shouldRerender = !this.isZoomed;
       console.time('rerender');
-      data1.push(d1);
+      pod.appendData([d1, d2, d3], shouldRerender);
-      data2.push(d2);
-      data3.push(d3);
-      pod.updateData([
-        { target: 'test1', datapoints: data1, color: 'green', maxLength: arrayLength + 30, renderDots: false },
-        { target: 'test2', datapoints: data2, color: 'blue', maxLength: arrayLength + 30, renderDots: false },
-        { target: 'test3', datapoints: data3, color: 'orange', maxLength: arrayLength + 30, renderDots: false },
-      ]);
       console.timeEnd('rerender');
       if(rerenderIdx > arrayLength + 100) {
         clearInterval(test);

examples/demo_vertical.html

@@ -4,24 +4,32 @@
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
 
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
+    <script src="../dist/index.js" type="text/javascript"></script>
   </head>
   <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <div id="charts">
+    </div>
 
     <script type="text/javascript">
+      
       const startTime = 1590590148;
-      const arrayLength = 20;
+      const arrayLength = 200;
+      const chartsNumber = 150;
       const data1 = createDatapoints(arrayLength, startTime, 40);
       const data2 = createDatapoints(arrayLength, startTime, 30, 50);
       const data3 = createDatapoints(arrayLength, startTime, 20, 90);
 
+      insertHtml(chartsNumber);
+
       let options = {
         renderLegend: false,
         axis: {
-          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter },
+          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter, ticksCount: 6 },
           x: { format: 'numeric' }
         },
+        // grid: {
+        //   y: { ticksCount: 2000 }
+        // },
         zoomEvents: {
           mouse: {
             pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' },
@@ -36,17 +44,8 @@
         crosshair: { orientation: 'horizontal' },
         margin: { top: 30, right: 20, bottom: 20, left: 50 }
       }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { target: 'test1', datapoints: data1, color: 'green' },
-          { target: 'test2', datapoints: data2, color: 'blue' },
-          { target: 'test3', datapoints: data3, color: 'orange' },
-        ],
-        options
-      );
-      pod.render();
 
+      multileRender(chartsNumber);
 
       function zoomIn(ranges) {
         const range = ranges[1];
@@ -61,7 +60,7 @@
       }
 
       function onPanning() {
-        // console.log('panning', pod);
+        console.log('panning', pod);
       }
 
       function createDatapoints(arrayLength, startTime, randomValue, randomOffset = 0) {
@@ -85,6 +84,31 @@
         }
         return 'black';
       }
+    
+      function insertHtml(chartsNumber) {
+        let chartsHtml = '';
+
+        for(let i = 1; i <= chartsNumber; i++) {
+          chartsHtml += `<div id="chart-${i}" style="height: 640px; width: 880px"></div>`;
+        }
+
+        document.getElementById('charts').innerHTML = chartsHtml;
+      }
+
+      function multileRender(chartsNumber) {
+        for (let i = 1; i <= chartsNumber; i++) {
+          const pod = new LinePod(
+            document.getElementById(`chart-${i}`),
+            [
+              { target: 'test1', datapoints: data1, color: 'green' },
+              { target: 'test2', datapoints: data2, color: 'blue' },
+              { target: 'test3', datapoints: data3, color: 'orange' },
+            ],
+            options
+          );
+          pod.render();
+        }
+      }
     </script>
   </body>
 </html>

examples/markers.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 100%; height: 500px;"></div>
-
-    <script type="text/javascript">
-      const startTime = 1701790172908;
-      const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
-        .map((el, idx) => [startTime + idx * 1000, el]);
-      const markersData1 = [3, 6, 9].map(el => ({
-        x: startTime + el * 1000,
-        color: 'red',
-        alwaysDisplay: false,
-        html: new Date(startTime).toISOString(),
-      }));
-      const markersData2 = [4, 11].map(el => ({
-        x: startTime + el * 1000,
-        color: 'blue',
-        alwaysDisplay: true,
-        html: new Date(startTime).toISOString(),
-      }));
-      let options = {
-        renderLegend: false,
-        axis: {
-          y: { range: [0, 10] },
-          x: { format: 'time' }
-        },
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { datapoints: timeSerieData, color: 'black' },
-        ],
-        options,
-        {
-          series: [
-            { data: markersData1 },
-            { data: markersData2 },
-          ]
-        }
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/markers_select.html

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 100%; height: 500px;"></div>
-
-    <script type="text/javascript">
-      const startTime = 1701790172908;
-      const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
-        .map((el, idx) => [startTime + idx * 1000, el]);
-      const markersData = [3, 6, 9].map(el => ({
-        x: startTime + el * 1000,
-        payload: el,
-        color: 'red',
-      }));
-      let options = {
-        renderLegend: false,
-        axis: {
-          y: { range: [0, 10] },
-          x: { format: 'time' }
-        },
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { datapoints: timeSerieData, color: 'black' },
-        ],
-        options,
-        {
-          series: [
-            { data: markersData },
-          ],
-          events: {
-            onMouseMove: (el) => { console.log(el); },
-            onMouseOut: () => { console.log('mouse out'); }
-          }
-        }
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/mouse_click.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
-    <script type="text/javascript">
-      const startTime = 1590590148;
-      const data = Array.from(
-        { length: 20 },
-        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
-      );
-      let options = {
-        renderLegend: false, usePanning: false,
-        axis: { y: { range: [0, 50] } },
-        zoomEvents: { mouse: { 
-          zoom: { isActive: false },
-          pan: { isActive: false },
-        } },
-        eventsCallbacks: { mouseClick: console.log }
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [{ datapoints: data }],
-        options
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/mouse_move.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
-    <script type="text/javascript">
-      const startTime = 1590590148;
-      const data = Array.from(
-        { length: 20 },
-        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
-      );
-      let options = {
-        renderLegend: false, usePanning: false,
-        axis: { y: { range: [0, 50] } },
-        eventsCallbacks: { mouseMove: console.log }
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [{ datapoints: data }],
-        options
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/right_click.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
-    <script type="text/javascript">
-      const startTime = 1590590148;
-      const data = Array.from(
-        { length: 20 },
-        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
-      );
-      let options = {
-        renderLegend: false, usePanning: false,
-        axis: { y: { range: [0, 50] } },
-        zoomEvents: { mouse: { 
-          zoom: { isActive: false },
-          pan: { isActive: false },
-        } },
-        eventsCallbacks: { contextMenu: (position) => console.log('contextMenu', position) }
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [{ datapoints: data }],
-        options
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/segments.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 100%; height: 500px;"></div>
-
-    <script type="text/javascript">
-      const startTime = 1701790172908;
-      const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
-        .map((el, idx) => [startTime + idx * 1000, el]);
-      const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1100]);
-      let options = {
-        renderLegend: false,
-        axis: {
-          y: { range: [0, 10] },
-          x: { format: 'time' }
-        },
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { datapoints: timeSerieData, color: 'black' },
-        ],
-        options,
-        undefined,
-        [
-          {
-            data: segmentsData,
-            color:'#FFE545'
-          }
-        ]
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/segments_select.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 100%; height: 500px;"></div>
-
-    <script type="text/javascript">
-      const startTime = 1701790172908;
-      const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
-        .map((el, idx) => [startTime + idx * 1000, el]);
-      const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1100]);
-      let options = {
-        renderLegend: false,
-        axis: {
-          y: { range: [0, 10] },
-          x: { format: 'time' }
-        },
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { datapoints: timeSerieData, color: 'black' },
-        ],
-        options,
-        undefined,
-        [
-          {
-            data: segmentsData,
-            color:'#FFE545',
-            select: true,
-            opacity: 0.4,
-            opacitySelect: 0.8,
-            onSelect: console.log,
-            onUnselect: console.log
-          }
-        ]
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

examples/zoom_out.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-    <script src="../dist/index.dev.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
-    <script type="text/javascript">
-      const startTime = 1590590148;
-      const data = Array.from(
-        { length: 20 },
-        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
-      );
-      let options = {
-        renderLegend: false, usePanning: false,
-        axis: { y: { range: [0, 50] } },
-        zoomEvents: { mouse: {
-          zoom: { isActive: true, orientation: "horizontal" },
-          pan: { isActive: false },
-        }},
-        events: {
-          zoomOut: function(centers, ranges) {
-            console.log('zoomOut', centers, ranges);
-          }
-        }
-      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [{ datapoints: data }],
-        options
-      );
-      pod.render();
-    </script>
-  </body>
-</html>

package.json

@@ -1,37 +1,32 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.7.8",
+  "version": "0.4.8",
   "description": "Chartwerk line chart",
   "main": "dist/index.js",
-  "files": [
-    "/dist"
-  ],
   "scripts": {
-    "build": "rm -rf dist && cd react && yarn build && cd .. && webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
+    "build": "webpack --config build/webpack.prod.conf.js",
-    "dev": "webpack --watch --config build/webpack.dev.conf.js",
+    "dev": "webpack --config build/webpack.dev.conf.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "echo \"Error: no test specified\" && exit 1"
-    "update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
   },
   "repository": {
     "type": "git",
-    "url": "http://code.corpglory.net/chartwerk/line-pod.git"
+    "url": "https://gitlab.com/chartwerk/line-pod.git"
   },
   "author": "CorpGlory",
   "license": "ISC",
   "dependencies": {
-    "@chartwerk/core": "^0.6.26"
+    "@chartwerk/core": "^0.3.4"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^11.0.0",
+    "@types/d3": "5.16.4",
-    "css-loader": "^6.8.1",
+    "@types/lodash": "^4.14.149",
-    "style-loader": "^3.3.3",
+    "css-loader": "^3.4.2",
-    "ts-loader": "^9.4.3",
+    "d3": "5.16.0",
-    "typescript": "^5.1.3",
+    "lodash": "^4.17.15",
-    "webpack": "^5.87.0",
+    "style-loader": "^1.1.3",
-    "webpack-cli": "^5.1.4"
+    "ts-loader": "^6.2.1",
-  },
+    "typescript": "^3.8.3",
-  "packageManager": "yarn@3.2.1",
+    "webpack": "^4.42.0",
-  "workspaces": [
+    "webpack-cli": "^3.3.11"
-    "react/*"
+  }
-  ]
 }

react/build/webpack.base.conf.js

@@ -1,26 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.tsx',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    filename: 'index.js',
-    path: path.resolve(__dirname, '../dist'),
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-  },
-  externals: [
-    '@chartwerk/line-pod', 'react'
-  ]
-};

react/build/webpack.dev.conf.js

@@ -1,8 +0,0 @@
-const baseWebpackConfig = require('./webpack.base.conf');
-
-var conf = baseWebpackConfig;
-conf.devtool = 'inline-source-map';
-conf.mode = 'development';
-conf.output.filename = 'index.dev.js';
-
-module.exports = conf;

react/build/webpack.prod.conf.js

@@ -1,6 +0,0 @@
-const baseWebpackConfig = require('./webpack.base.conf');
-
-var conf = baseWebpackConfig;
-conf.mode = 'production';
-
-module.exports = baseWebpackConfig;

react/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "line-pod-react",
-  "version": "0.0.1",
-  "description": "React wrapper around line-pod",
-  "main": "dist/index.js",
-  "repository": "http://code.corpglory.net/chartwerk/line-pod.git",
-  "author": "CorpGlory Inc.",
-  "license": "ISC",
-  "scripts": {
-    "build": "webpack --config build/webpack.prod.conf.js",
-    "dev": "webpack --config build/webpack.dev.conf.js"
-  },
-  "dependencies": {
-    "@chartwerk/line-pod": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.3",
-    "webpack": "^5.87.0"
-  }
-}

react/src/index.tsx

@@ -1,74 +0,0 @@
-import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
-import { MarkersConf } from '@chartwerk/line-pod/dist/models/marker';
-import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
-
-import React, { useEffect, useRef, useState } from 'react';
-
-import _ from 'lodash';
-
-
-export type ChartwerkLinePodProps = {
-  id?: string;
-  series: LineTimeSerie[];
-  options?: LineOptions;
-  markersConf?: MarkersConf,
-  segments?: SegmentSerie[],
-  className?: string;
-}
-
-export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
-
-  const [pod, setPod] = useState<LinePod | null>(null);
-  const [hack, setHack] = useState<number | null>(null);
-
-  const chartRef = useRef(null);
-  const chart = chartRef.current;
-
-  useEffect(() => {
-    // this function will be called on component unmount
-    return () => {
-      if(pod === null) { return; }
-      // @ts-ignore
-      pod.removeEventListeners();
-    }
-  }, []);
-
-  useEffect(() => {
-    if(chart === null) { return; }
-    if(pod === null) {
-      const newPod = new LinePod(
-        // @ts-ignore
-        chart,
-        props.series,
-        props.options,
-        props.markersConf,
-        props.segments
-      );
-      setPod(newPod);
-      newPod.render();
-    } else {
-      if(props.markersConf) {
-        pod.updateMarkers(props.markersConf);
-      }
-      if(props.segments) {
-        pod.updateSegments(props.segments);
-      }
-      // TODO: actually it's wrong logic with updates
-      // because it creates new pod anyway
-      pod.updateData(props.series, props.options);
-    }
-  }, [chart, props.id, props.options, props.markersConf, props.segments]);
-
-  // TODO: it's a hack to render the LinePod right after the div appears in DOM
-  setTimeout(() => {
-    if(hack === null) {
-      setHack(1);
-    }
-  }, 1);
-
-  return (
-    <div id={props.id} className={props.className} ref={chartRef}></div>
-  );
-}
-
-export default ChartwerkLinePod;

react/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "rootDir": "./src",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "declaration": true,
-    "declarationDir": "dist",
-    "allowSyntheticDefaultImports": true,
-    "inlineSourceMap": false,
-    "sourceMap": true,
-    "noEmitOnError": false,
-    "emitDecoratorMetadata": false,
-    "experimentalDecorators": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": false,
-    "noImplicitUseStrict": false,
-    "noImplicitAny": false,
-    "noUnusedLocals": false,
-    "baseUrl": "./src",
-    "jsx": "react"
-  }
-}

src/components/markers.ts

@@ -1,139 +0,0 @@
-import { MarkerElem, MarkersConf, MarkerSerie } from '../models/marker';
-import { LineTimeSerie, LineOptions } from '../types';
-
-import { Margin, PodState } from '@chartwerk/core';
-
-import d3 from 'd3';
-
-export class Markers {
-  private _layerContainer = null;
-  private _chartHeight = 0;
-
-  constructor(
-    private _chartContainer: d3.Selection<HTMLElement, unknown, null, undefined>,
-    private _markerConf: MarkersConf,
-    private _state: PodState<LineTimeSerie, LineOptions>,
-    private _margin: Margin,
-  ) { }
-
-  clear() {
-    if(this._layerContainer !== null) {
-      this._layerContainer.remove();
-    }
-    this._chartContainer.selectAll('.marker-content').remove();
-  }
-
-  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartHeight: number) {
-    this._chartHeight = chartHeight;
-    this._layerContainer = metricContainer
-      .append('g')
-      .attr('class', 'markers-layer');
-    for(const serie of this._markerConf.series) {
-      this.renderSerie(serie);
-    }
-  }
-
-  private _getLinePosition(marker: MarkerElem): number {
-    return this._state.xScale(marker.x);
-  }
-
-  private _renderCircle(marker: MarkerElem) {
-    const linePosition = this._getLinePosition(marker);
-
-    let circle = this._layerContainer.append('circle')
-      .attr('class', 'gap-circle')
-      .attr('stroke', marker.color)
-      .attr('stroke-width', '2px')
-      .attr('r', 4)
-      .attr('cx', linePosition)
-      .attr('cy', 5)
-
-    circle
-      .attr('pointer-events', 'all')
-      .style('cursor', 'pointer')
-      .on('mousemove', () => {
-        const onMouseMove = this._markerConf.events?.onMouseMove;
-        if(onMouseMove) {
-          onMouseMove(marker);
-          return
-        }
-        if(marker.alwaysDisplay) {
-          return;
-        }
-        this._chartContainer
-          .selectAll(`.marker-content-${marker.x}`)
-          .style('visibility', 'visible')
-          .style('z-index', 9999);
-      })
-      .on('mouseout', () => {
-        const onMouseOut = this._markerConf.events?.onMouseOut;
-        if(onMouseOut) {
-          onMouseOut()
-          return
-        }
-        if(marker.alwaysDisplay) {
-          return;
-        }
-        this._chartContainer
-          .selectAll(`.marker-content-${marker.x}`)
-          .style('visibility', 'hidden')
-          .style('z-index', 1);
-      });
-  }
-
-  private _renderLine(marker: MarkerElem) {
-    const linePosition = this._getLinePosition(marker);
-
-    this._layerContainer.append('line')
-      .attr('class', 'gap-line')
-      .attr('stroke', marker.color)
-      .attr('stroke-width', '1px')
-      .attr('stroke-opacity', '0.3')
-      .attr('stroke-dasharray', '4')
-      .attr('x1', linePosition)
-      .attr('x2', linePosition)
-      .attr('y1', 0)
-      // @ts-ignore // TODO: remove ignore but boxParams are protected
-      .attr('y2', this._state.boxParams.height)
-      .attr('pointer-events', 'none');
-  }
-
-  private _renderTooltip(marker: MarkerElem) {
-    if(marker.html === undefined) {
-      return;
-    }
-
-    const linePosition = this._getLinePosition(marker);
-
-    const div = this._chartContainer
-      .append('div')
-      .attr('class', `marker-content marker-content-${marker.x}`)
-      // @ts-ignore // TODO: remove ignore but boxParams are protected
-      .style('top', `${this._state.boxParams.height - this._chartHeight}px`)
-      .style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden')
-      .style('position', 'absolute')
-      .style('border', '1px solid black')
-      .style('background-color', 'rgb(33, 37, 41)')
-      .style('color', 'rgb(255, 255, 255)')
-      .style('line-height', '1.55')
-      .style('font-size', '0.875rem')
-      .style('border-radius', '0.5rem')
-      .style('padding', 'calc(0.3125rem) 0.625rem')
-      .style('position', 'absolute')
-      .style('white-space', 'nowrap')
-      .style('pointer-events', 'none')
-      .style('z-index', 1)
-      .html(marker.html);
-
-    // align tooltip: center (we need it to be rendered first)
-    div.style('left', `${linePosition + this._margin.left - div.node().getBoundingClientRect().width / 2}px`)
-  }
-
-  protected renderSerie(serie: MarkerSerie) {
-    serie.data.forEach((marker: MarkerElem) => {
-      this._renderLine(marker);
-      this._renderCircle(marker);
-      this._renderTooltip(marker);
-    });
-  }
-}

src/components/segments.ts

@@ -1,73 +0,0 @@
-import { SegmentSerie, SegmentElement } from "../models/segment";
-import { PodState } from "@chartwerk/core";
-import { LineTimeSerie, LineOptions } from "../types";
-
-import * as d3 from "d3";
-
-const OPACITY = 0.3;
-const OPACITY_SELECT = 0.3;
-
-export class Segments {
-  // TODO: more semantic name
-  private _d3Holder = null;
-  private _metricCon = null;
-
-  constructor(
-    private _series: SegmentSerie[],
-    private _state: PodState<LineTimeSerie, LineOptions>
-  ) {
-  }
-
-  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
-    if(this._d3Holder !== null) {
-      this._d3Holder.remove();
-    }
-    this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
-    for (const s of this._series) {
-      this.renderSerie(chartContainer, s);
-    }
-  }
-
-  protected renderSerie(chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>, serie: SegmentSerie) {
-    // TODO: it's hack with core, need to find a better way
-    const overlay = chartContainer.select('.overlay');
-    serie.data.forEach((d) => {
-      // @ts-ignore
-      const startPositionX = this._state.xScale(d[0]) as number;
-      // @ts-ignore
-      const endPositionX = this._state.xScale(d[1]) as number;
-      const width = endPositionX - startPositionX // Math.max(endPositionX - startPositionX, MIMIMUM_SEGMENT_WIDTH);
-      const opacity = serie.opacity || OPACITY;
-      const opacitySelect = serie.opacitySelect || OPACITY_SELECT;
-      this._d3Holder.append('rect')
-        .attr('class', 'segment')
-        .attr('x', startPositionX)
-        .attr('y', 0)
-        .attr('width', width)
-        // @ts-ignore // TODO: remove ignore but boxParams are protected
-        .attr('height', this._state.boxParams.height)
-        .attr('opacity', opacity)
-        .style('fill', serie.color)
-        .on('mouseover', function() {
-          if(serie.select === true) {
-            d3.select(this).attr('opacity', opacitySelect);
-            if(serie.onSelect) {
-              serie.onSelect(d);
-            }
-          }
-        })
-        .on('mouseout', function(e) {
-          if(serie.select === true) {
-            d3.select(this).attr('opacity', opacity);
-            if(serie.onUnselect) {
-              serie.onUnselect(d);
-            }
-          }
-        })
-        .on('mousemove', function(e) {
-          var event = new MouseEvent('mousemove', d3.event);
-          overlay.node().dispatchEvent(event)
-        })
-    });
-  }
-}

src/index.ts

@@ -1,11 +1,5 @@
-import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
+import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core';
-import { LineTimeSerie, LineOptions, MouseObj, AreaType } from './types';
+import { LineTimeSerie, LineOptions, Mode } from './types';
-import { Markers } from './components/markers';
-import { Segments } from './components/segments';
-
-import { LineSeries } from './models/line_series';
-import { MarkersConf } from './models/marker';
-import { SegmentSerie } from './models/segment';
 
 import * as d3 from 'd3';
 import * as _ from 'lodash';
@@ -14,131 +8,176 @@ const METRIC_CIRCLE_RADIUS = 1.5;
 const CROSSHAIR_CIRCLE_RADIUS = 3;
 const CROSSHAIR_BACKGROUND_RAIDUS = 9;
 const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
-type Generator = d3.Line<[number, number]> | d3.Area<[number, number]>;
+
-
+export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
-class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
+  lineGenerator = null;
-  private _markersLayer: Markers = null;
+
-  private _segmentsLayer: Segments = null;
+  constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
-
+    super(d3, _el, _series, _options);
-  constructor(
-    _el: HTMLElement,
-    _series: LineTimeSerie[] = [],
-    _options: LineOptions = {},
-    private _markersConf?: MarkersConf,
-    private _segmentSeries: SegmentSerie[] = [],
-  ) {
-    super(_el, _series, _options);
-    this.series = new LineSeries(_series);
   }
 
-  override renderMetrics(): void {
+  renderMetrics(): void {
     this.clearAllMetrics();
 
     this.updateCrosshair();
-    this.updateEvents();
+    this.initLineGenerator();
 
-    if(!this.series.isSeriesAvailable) {
+    // TODO: seems that renderMetrics is not correct name
+    if(this.series.length === 0) {
       this.renderNoDataPointsMessage();
       return;
     }
-    for(const serie of this.series.visibleSeries) {
-      const generator = this.getRenderGenerator(serie.renderArea, serie.yOrientation);
-      this._renderMetric(serie, generator);
-    }
-    if(!_.isEmpty(this._markersConf)) {
-      this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin);
-      this._markersLayer.render(this.metricContainer, this.height);
-    }
 
-    if(!_.isEmpty(this._segmentSeries)) {
+    for(let idx = 0; idx < this.series.length; ++idx) {
-      this._segmentsLayer = new Segments(this._segmentSeries, this.state);
+      if(this.series[idx].visible === false) {
-      this._segmentsLayer.render(this.metricContainer, this.chartContainer);
+        continue;
+      }
+      // TODO: use _.defaults same as in core
+      const confidence = this.series[idx].confidence || 0;
+      const mode = this.series[idx].mode || Mode.STANDARD;
+      const target = this.series[idx].target;
+      const renderDots = this.series[idx].renderDots !== undefined ? this.series[idx].renderDots : false;
+      const renderLines = this.series[idx].renderLines !== undefined ? this.series[idx].renderLines : true;
+
+      this._renderMetric(
+        this.series[idx].datapoints,
+        {
+          color: this.getSerieColor(idx),
+          confidence,
+          target,
+          mode,
+          serieIdx: idx,
+          renderDots,
+          renderLines,
+        }
+      );
     }
   }
 
   clearAllMetrics(): void {
     // TODO: temporary hack before it will be implemented in core.
     this.chartContainer.selectAll('.metric-el').remove();
-    this._markersLayer?.clear();
   }
 
-  protected updateEvents(): void {
+  initLineGenerator(): void {
-    // overlay - core component that is used to handle mouse events
+    this.lineGenerator = this.d3.line()
-    if(!this.overlay) {
+      .x(d => this.xScale(d[0]))
-      return;
+      .y(d => this.yScale(d[1]));
-    }
-    if(this.options._options.events?.contextMenu === undefined) {
-      return;
-    }
-    this.overlay.on('contextmenu', this.onContextMenu.bind(this));
   }
 
-  getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
+  public appendData(data: [number, number][], shouldRerender = true): void {
-    const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
+    for(let idx = 0; idx < this.series.length; ++idx) {
-    const yValueRange = yOrientation === yAxisOrientation.LEFT ? this.state.yValueRange : this.state.y1ValueRange;
+      if(this.series[idx].visible === false) {
-    const yAxisOptions = yOrientation === yAxisOrientation.LEFT ? this.options.axis.y : this.options.axis.y1;
+        continue;
-
+      }
-    const topChartBorder = !yAxisOptions.invert ? yScale(yValueRange[1]) : yScale(yValueRange[0]);
+      this.series[idx].datapoints.push(data[idx]);
-    const bottomChartBorder = !yAxisOptions.invert ? yScale(yValueRange[0]) : yScale(yValueRange[1]);
+      const maxLength = this.series[idx].maxLength;
-    switch(renderArea) {
+      if(maxLength !== undefined && this.series[idx].datapoints.length > maxLength) {
-      case AreaType.NONE:
+        this.series[idx].datapoints.shift();
-        // return line generator
+      }
-        return d3.line()
+    }
-          .x(d => this.state.xScale(d[0]))
+
-          .y(d => yScale(d[1]));
+    for(let idx = 0; idx < this.series.length; ++idx) {
-      case AreaType.ABOVE:
+      this.metricContainer.select(`.metric-path-${idx}`)
-        return d3.area()
+        .datum(this.series[idx].datapoints)
-          .x(d => this.state.xScale(d[0]))
+        .attr('d', this.lineGenerator);
-          .y0(topChartBorder)
+
-          .y1(d => yScale(d[1]));
+      if(this.series[idx].renderDots === true) {
-      case AreaType.BELOW:
+        this.metricContainer.selectAll(`.metric-circle-${idx}`)
-        return d3.area()
+          .data(this.series[idx].datapoints)
-          .x(d => this.state.xScale(d[0]))
+          .attr('cx', d => this.xScale(d[0]))
-          .y0(d => yScale(d[1]))
+          .attr('cy', d => this.yScale(d[1]));
-          .y1(bottomChartBorder);
+
-      default:
+        this._renderDots([data[idx]], idx);
-        throw new Error(`Unknown type of renderArea: ${renderArea}`);
+      }
+    }
+    if(shouldRerender) {
+      const rightBorder = _.last(data)[0];
+      this.state.xValueRange = [this.state.getMinValueX(), rightBorder];
+      this.renderXAxis();
+      this.renderYAxis();
+      this.renderGrid();
     }
   }
 
-  _renderDots(serie: LineTimeSerie): void {
+  _renderDots(datapoints: number[][], serieIdx: number): void {
+    const customClass = this.series[serieIdx].class || '';
+
     this.metricContainer.selectAll(null)
-      .data(serie.datapoints)
+      .data(datapoints)
       .enter()
       .append('circle')
-      .attr('class', `metric-circle-${serie.idx} metric-el ${serie.class}`)
+      .attr('class', `metric-circle-${serieIdx} metric-el ${customClass}`)
-      .attr('fill', serie.color)
+      .attr('fill', this.getSerieColor(serieIdx))
       .attr('r', METRIC_CIRCLE_RADIUS)
       .style('pointer-events', 'none')
-      .attr('cx', d => this.state.xScale(d[0]))
+      .attr('cx', d => this.xScale(d[0]))
-      .attr('cy', d => this.state.getYScaleByOrientation(serie.yOrientation)(d[1]));
+      .attr('cy', d => this.yScale(d[1]));
   }
 
-  _renderLines(serie: LineTimeSerie, generator: Generator): void {
+  _renderLines(datapoints: number[][], serieIdx: number): void {
-    const fillColor = serie.renderArea !== AreaType.NONE ? serie.color : 'none';
+    const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0';
-    const fillOpacity = serie.renderArea !== AreaType.NONE ? 0.5 : 'none';
+    const customClass = this.series[serieIdx].class || ''
 
     this.metricContainer
       .append('path')
-      .datum(serie.datapoints)
+      .datum(datapoints)
-      .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
+      .attr('class', `metric-path-${serieIdx} metric-el ${customClass}`)
-      .attr('fill', fillColor)
+      .attr('fill', 'none')
-      .attr('fill-opacity', fillOpacity)
+      .attr('stroke', this.getSerieColor(serieIdx))
-      .attr('stroke', serie.color)
       .attr('stroke-width', 1)
       .attr('stroke-opacity', 0.7)
       .attr('pointer-events', 'none')
-      .style('stroke-dasharray', serie.dashArray)
+      .style('stroke-dasharray', dashArray)
-      .attr('d', generator);
+      .attr('d', this.lineGenerator);
-  }
+  }
+
+  _renderMetric(
+    datapoints: number[][],
+    metricOptions: {
+      color: string,
+      confidence: number,
+      target: string,
+      mode: Mode,
+      serieIdx: number,
+      renderDots: boolean,
+      renderLines: boolean,
+    }
+  ): void {
+    if(_.includes(this.seriesTargetsWithBounds, metricOptions.target)) {
+      return;
+    }
 
-  _renderMetric(serie: LineTimeSerie, generator: Generator): void {
+    if(metricOptions.mode === Mode.CHARGE) {
-    if(serie.renderLines === true) {
+      const dataPairs = this.d3.pairs(datapoints);
-      this._renderLines(serie, generator);
+      this.metricContainer.selectAll(null)
+        .data(dataPairs)
+        .enter()
+        .append('line')
+        .attr('x1', d => this.xScale(d[0][0]))
+        .attr('x2', d => this.xScale(d[1][0]))
+        .attr('y1', d => this.yScale(d[0][1]))
+        .attr('y2', d => this.yScale(d[1][1]))
+        .attr('stroke-opacity', 0.7)
+        .style('stroke-width', 1)
+        .style('stroke', d => {
+          if(d[1][0] > d[0][0]) {
+            return 'green';
+          } else if (d[1][0] < d[0][0]) {
+            return 'red';
+          } else {
+            return 'gray';
+          }
+        });
+      return;
     }
 
-    if(serie.renderDots === true) {
+    if(metricOptions.renderLines === true) {
-      this._renderDots(serie);
+      this._renderLines(datapoints, metricOptions.serieIdx);
+    }
+
+    if(metricOptions.renderDots === true) {
+      this._renderDots(datapoints, metricOptions.serieIdx);
     }
   }
 
@@ -150,7 +189,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
   appendCrosshairCircles(): void {
     // circle for each serie
-    this.series.visibleSeries.forEach((serie: LineTimeSerie, serieIdx: number) => {
+    this.series.forEach((serie: LineTimeSerie, serieIdx: number) => {
       this.appendCrosshairCircle(serieIdx);
     });
   }
@@ -163,7 +202,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS)
       .attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS)
       .attr('clip-path', `url(#${this.rectClipId})`)
-      .attr('fill', this.series.visibleSeries[serieIdx].color)
+      .attr('fill', this.getSerieColor(serieIdx))
       .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
       .style('pointer-events', 'none');
 
@@ -173,21 +212,33 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .attr('cy', -CROSSHAIR_CIRCLE_RADIUS)
       .attr('class', `crosshair-circle-${serieIdx}`)
       .attr('clip-path', `url(#${this.rectClipId})`)
-      .attr('fill', this.series.visibleSeries[serieIdx].color)
+      .attr('fill', this.getSerieColor(serieIdx))
       .attr('r', CROSSHAIR_CIRCLE_RADIUS)
       .style('pointer-events', 'none');
   }
 
+  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
+    this.onMouseOver(); // TODO: refactor to use it once
+    const eventX = this.xScale(values.x);
+    const eventY = this.yScale(values.y);
+    this.moveCrosshairLine(eventX, eventY);
+    const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
+
+    if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) {
+      return;
+    }
 
+    this.options.eventsCallbacks.sharedCrosshairMove({
+      datapoints: datapoints,
+      eventX, eventY
+    });
+  }
 
   public hideSharedCrosshair(): void {
     this.crosshair.style('display', 'none');
   }
 
-  // TODO: refactor to make xPosition and yPosition optional
-  //       and trough error if they are provided for wrong orientation
   moveCrosshairLine(xPosition: number, yPosition: number): void {
-    this.crosshair.style('display', null);
     switch(this.options.crosshair.orientation) {
       case CrosshairOrientation.VERTICAL:
         this.crosshair.select('#crosshair-line-x')
@@ -252,9 +303,9 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       default:
         throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
     }
-
+    
     // TODO: d3.bisect is not the best way. Use binary search
-    const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left;
+    const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left;
     let closestIdx = bisectIndex(datapoints, value);
 
     // TODO: refactor corner cases
@@ -279,7 +330,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     // columnIdx: 1 for y, 0 for x
     // inverval: x/y value interval between data points
     // TODO: move it to base/state instead of timeInterval
-    const intervals = _.map(this.series.visibleSeries, serie => {
+    const intervals = _.map(this.series, serie => {
       if(serie.datapoints.length < 2) {
         return undefined;
       }
@@ -292,133 +343,119 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     return _.max(intervals);
   }
 
-  getMouseObj(): MouseObj {
+  onMouseMove(): void {
-    const eventX = d3.mouse(this.chartContainer.node())[0];
+    const eventX = this.d3.mouse(this.chartContainer.node())[0];
-    const eventY = d3.mouse(this.chartContainer.node())[1];
+    const eventY = this.d3.mouse(this.chartContainer.node())[1];
-    const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
+    const xValue = this.xScale.invert(eventX); // mouse x position in xScale
-    const yValue = this.state.yScale.invert(eventY);
+    const yValue = this.yScale.invert(eventY);
+    // TODO: isOutOfChart is a hack, use clip path correctly
+    if(this.isOutOfChart() === true) {
+      this.crosshair.style('display', 'none');
+      return;
+    }
+    this.moveCrosshairLine(eventX, eventY);
 
     const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
 
-    // TODO: is shift key pressed
+    if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) {
+      return;
+    }
+    // TDOO: is shift key pressed
     // TODO: need to refactor this object
-    return {
+    this.options.eventsCallbacks.mouseMove({
-      x: d3.event.pageX,
+      x: this.d3.event.pageX,
-      y: d3.event.pageY,
+      y: this.d3.event.pageY,
       xVal: xValue,
       yVal: yValue,
       series: datapoints,
       chartX: eventX,
       chartWidth: this.width
-    };
-  }
-
-  override onMouseMove(): void {
-    const obj = this.getMouseObj();
-    const eventX = d3.mouse(this.chartContainer.node())[0];
-    const eventY = d3.mouse(this.chartContainer.node())[1];
-
-    this.moveCrosshairLine(eventX, eventY);
-
-    // TODO: is shift key pressed
-    // TODO: need to refactor this object
-    this.options.callbackMouseMove(obj);
-  }
-
-  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
-    this.showCrosshair();
-    this.moveCrosshairLine(
-      values.x ? this.state.xScale(values.x) : 0,
-      values.y ? this.state.yScale(values.y) : 0
-    );
-    const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
-
-    this.options.callbackSharedCrosshairMove({
-      datapoints: datapoints,
-      eventX: values.x ? this.state.xScale(values.x) : 0,
-      eventY: values.y ? this.state.yScale(values.y) : 0
     });
   }
 
-  override onMouseClick(): void {
-    this.options.callbackMouseClick(this.getMouseObj());
-  }
-
   findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {
-    if(!this.series.isSeriesAvailable) {
+    if(this.series === undefined || this.series.length === 0) {
       return [];
     }
     let points = []; // datapoints in each metric that is closest to xValue/yValue position
-    this.series.visibleSeries.forEach((serie: LineTimeSerie) => {
+    this.series.forEach((serie: LineTimeSerie, serieIdx: number) => {
+      if(
+        serie.visible === false ||
+        _.includes(this.seriesTargetsWithBounds, serie.target)
+      ) {
+        this.hideCrosshairCircle(serieIdx);
+        return;
+      }
       const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue);
-      if(_.isNil(closestDatapoint) || _.isNil(closestDatapoint[0])) {
+      if(closestDatapoint === undefined || this.isOutOfRange(closestDatapoint, xValue, yValue, serie.useOutOfRange)) {
-        this.hideCrosshairCircle(serie.idx);
+        this.hideCrosshairCircle(serieIdx);
-      } else {
+        return;
-        const xPosition = this.state.xScale(closestDatapoint[0]);
-        let yPosition;
-        if(serie.yOrientation === yAxisOrientation.RIGHT) {
-          yPosition = this.state.y1Scale(closestDatapoint[1]);
-        } else {
-          yPosition = this.state.yScale(closestDatapoint[1]);
-        }
-        this.moveCrosshairCircle(xPosition, yPosition, serie.idx);
       }
 
+      const xPosition = this.xScale(closestDatapoint[0]);
+      const yPosition = this.yScale(closestDatapoint[1]);
+      this.moveCrosshairCircle(xPosition, yPosition, serieIdx);
+
       points.push({
         value: closestDatapoint,
-        color: serie.color,
+        color: this.getSerieColor(serieIdx),
         label: serie.alias || serie.target
       });
     });
     return points;
   }
 
-  showCrosshair() {
+  isOutOfRange(closestDatapoint: [number, number], xValue: number, yValue: number, useOutOfRange = true): boolean {
+    // find is mouse position more than xRange/yRange from closest point
+    // TODO: refactor getValueInterval to remove this!
+    if(useOutOfRange === false) {
+      return false;
+    }
+    let columnIdx; // 1 for y value, 0 for x value
+    let value; // xValue ot y Value
+    switch(this.options.crosshair.orientation) {
+      case CrosshairOrientation.VERTICAL:
+        columnIdx = 0;
+        value = xValue;
+        break;
+      case CrosshairOrientation.HORIZONTAL:
+        columnIdx = 1;
+        value = yValue;
+        break;
+      case CrosshairOrientation.BOTH:
+        // TODO: maybe use voronoi
+        columnIdx = 1;
+        value = yValue;
+      default:
+        throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
+    }
+    const range = Math.abs(closestDatapoint[columnIdx] - value);
+    const interval = this.getValueInterval(columnIdx); // interval between points
+    // do not move crosshair circles, it mouse to far from closest point
+    return interval === undefined || range > interval / 2;
+  }
+
+  onMouseOver(): void {
     this.crosshair.style('display', null);
     this.crosshair.selectAll('.crosshair-circle')
       .style('display', null);
   }
 
-  hideCrosshair() {
+  onMouseOut(): void {
+    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) {
+      this.options.eventsCallbacks.mouseOut();
+    }
     this.crosshair.style('display', 'none');
-    this.crosshair.selectAll('.crosshair-circle')
-      .style('display', 'none');
   }
 
-  override onMouseOver(): void {
+  // methods below rewrite cores, (move more methods here)
-    this.showCrosshair();
-    this.onMouseMove();
-  }
-
-  override onMouseOut(): void {
-    this.hideCrosshair();
-    this.options.callbackMouseOut();
-  }
-
-  isDoubleClickActive(): boolean {
-    return this.options.doubleClickEvent.isActive;
-  }
-
-  protected onBrushEnd(): void {
-    super.onBrushEnd();
-    this.onMouseOver();
-  }
-
-  updateMarkers(markersConf: MarkersConf): void {
-    this._markersConf = markersConf;
-  }
-
-  updateSegments(segments: SegmentSerie[]): void {
-    this._segmentSeries = segments;
-  }
-
-  // methods below rewrite s, (move more methods here)
   protected zoomOut(): void {
-    if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
+    // TODO: test to remove, seems its depricated
+    if(this.isOutOfChart() === true) {
       return;
     }
     // TODO: its not clear, why we use this orientation here. Mb its better to use separate option
-    const orientation: BrushOrientation = this.options.mouseZoomEvent.orientation;
+    const orientation: BrushOrientation = this.options.zoomEvents.mouse.zoom.orientation;
     const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0];
     const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0];
     switch(orientation) {
@@ -446,75 +483,22 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     this.renderYAxis();
     this.renderGrid();
     this.onMouseOver();
-
+    
-    let xAxisMiddleValue: number = this.state.xScale.invert(this.width / 2);
+    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) {
-    let yAxisMiddleValue: number = this.state.yScale.invert(this.height / 2);
+      let xAxisMiddleValue: number = this.xScale.invert(this.width / 2);
-    const centers = {
+      let yAxisMiddleValue: number = this.yScale.invert(this.height / 2);
-      x: xAxisMiddleValue,
+      const centers = {
-      y: yAxisMiddleValue
+        x: xAxisMiddleValue,
-    }
+        y: yAxisMiddleValue
-
+      }
-    // TODO: refactor core not to take _options explicitly
+      this.options.eventsCallbacks.zoomOut(centers);
-    if(
-      this.options._options.events !== undefined &&
-      this.options._options.events.zoomOut !== undefined
-    ) {
-      this.options._options.events.zoomOut(
-        centers,
-        [this.state.xValueRange, this.state.yValueRange]
-      );
     }
   }
-
-  protected onContextMenu(): void {
-    d3.event.preventDefault(); // do not open browser's context menu.
-    const eventX = d3.mouse(this.chartContainer.node())[0];
-    const eventY = d3.mouse(this.chartContainer.node())[1];
-
-    this.options._options.events.contextMenu({
-      x: this.state.xScale.invert(eventX),
-      y: this.state.yScale.invert(eventY),
-    });
-  }
-
-  // override parent updateData method to provide markers and segments
-  protected updateLineData(
-    series?: LineTimeSerie[],
-    options?: LineOptions,
-    markersConf?: MarkersConf,
-    segments?: SegmentSerie[],
-    shouldRerender = true
-  ): void {
-    this.updateMarkers(markersConf);
-    this.updateSegments(segments);
-    this.updateData(series, options, shouldRerender);
-  }
 }
 
-// TODO: it should be moved to VUE folder
 // it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
 export const VueChartwerkLinePod = {
   // alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
-  props: {
-    markersConf: {
-      type: Object,
-      required: false,
-      default: function() { return {}; }
-    },
-    segments: {
-      type: Array,
-      required: false,
-      default: function() { return []; }
-    },
-  },
-  watch: {
-    markersConf() {
-      this.renderChart();
-    },
-    segments() {
-      this.renderChart();
-    },
-  },
   render(createElement) {
     return createElement(
       'div',
@@ -528,10 +512,10 @@ export const VueChartwerkLinePod = {
   methods: {
     render() {
       if(this.pod === undefined) {
-        this.pod = new LinePod(document.getElementById(this.id), this.series, this.options, this.markersConf, this.segments);
+        this.pod = new LinePod(document.getElementById(this.id), this.series, this.options);
         this.pod.render();
       } else {
-        this.pod.updateLineData(this.series, this.options, this.markersConf, this.segments);
+        this.pod.updateData(this.series, this.options);
       }
     },
     renderSharedCrosshair(values) {
@@ -543,4 +527,4 @@ export const VueChartwerkLinePod = {
   }
 };
 
-export { LineTimeSerie, LineOptions, TimeFormat, LinePod, AreaType, MarkersConf, SegmentSerie };
+export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat };

src/models/line_series.ts

@@ -1,21 +0,0 @@
-import { CoreSeries, yAxisOrientation } from '@chartwerk/core';
-import { LineTimeSerie, AreaType } from '../types';
-
-import * as _ from 'lodash';
-
-
-const LINE_SERIE_DEFAULTS = {
-  maxLength: undefined,
-  renderDots: false,
-  renderLines: true,
-  dashArray: '0',
-  class: '',
-  renderArea: AreaType.NONE,
-  yOrientation: yAxisOrientation.LEFT,
-};
-
-export class LineSeries extends CoreSeries<LineTimeSerie> {
-  constructor(series: LineTimeSerie[]) {
-    super(series, _.clone(LINE_SERIE_DEFAULTS));
-  }
-}

src/models/marker.ts

@@ -1,19 +0,0 @@
-export type MarkerElem = {
-  x: number;
-  color: string;
-  html?: string;
-  alwaysDisplay?: boolean;
-  payload?: any;
-}
-
-export type MarkerSerie = {
-  data: MarkerElem[];
-}
-
-export type MarkersConf = {
-  series: MarkerSerie[],
-  events?: {
-    onMouseMove?: (el: MarkerElem) => void;
-    onMouseOut?: () => void;
-  }
-}

src/models/segment.ts

@@ -1,11 +0,0 @@
-export type SegmentElement = [number, number, any?];
-
-export type SegmentSerie = {
-  color: string;
-  data: SegmentElement[] // [from, to, payload?] payload is any data for tooltip,
-  select?: boolean,
-  opacity?: number,
-  opacitySelect?: number,
-  onSelect?: (SegmentElement) => void
-  onUnselect?: (SegmentElement) => void
-}

src/types.ts

@@ -1,41 +1,18 @@
-import { Serie, Options } from '@chartwerk/core';
+import { TimeSerie, Options } from '@chartwerk/core';
-import { AxisRange } from '@chartwerk/core/dist/types';
 
 type LineTimeSerieParams = {
-  maxLength: number;
+  confidence: number,
-  renderDots: boolean;
+  mode: Mode,
-  renderLines: boolean; // TODO: refactor same as scatter-pod
+  maxLength: number,
+  renderDots: boolean,
+  renderLines: boolean, // TODO: refactor same as scatter-pod
+  useOutOfRange: boolean, // It's temporary hack. Need to refactor getValueInterval() method
   dashArray: string; // dasharray attr, only for lines
   class: string; // option to add custom class to each serie element
-  renderArea: AreaType; // default is none
 }
-
+export enum Mode {
-export enum AreaType {
+  STANDARD = 'Standard',
-  NONE = 'None',
+  CHARGE = 'Charge'
-  ABOVE = 'Above',
-  BELOW = 'Below',
-}
-
-export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
-export type LineOptions = Options & {
-  events? : {
-    zoomOut?: (centers: {
-      x: number;
-      y: number;
-    }, range: AxisRange[]) => void;
-    contextMenu?: (position: {
-      x: number;
-      y: number;
-    }) => void;
-  }
 }
-
+export type LineTimeSerie = TimeSerie & Partial<LineTimeSerieParams>;
-export type MouseObj = {
+export type LineOptions = Options;
-  x: number,
-  y: number,
-  xVal: number,
-  yVal: number,
-  series: { value: [number, number], color: string, label: string }[],
-  chartX: number,
-  chartWidth: number
-}

tsconfig.json

@@ -17,7 +17,6 @@
     "noImplicitUseStrict": false,
     "noImplicitAny": false,
     "noUnusedLocals": false,
-    "baseUrl": "./src",
+    "baseUrl": "./src"
-  },
+  }
-  "include": ["src/**/*"]
 }