18 changed files with 33 additions and 1527 deletions
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -12,8 +12,7 @@ module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
-        { from: "../react/dist/index.js", to: "react/index.js" },
-        { from: "../react/dist/index.d.ts", to: "react/index.d.ts" },
+        { from: "../react", to: "react" },
      ],
    })
  ],
--- a/examples/segments.html
+++ b/examples/segments.html
@ -13,7 +13,7 @@
      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]);
+      const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1000]);
      let options = {
        renderLegend: false,
        axis: {
@ -27,12 +27,9 @@
          { datapoints: timeSerieData, color: 'black' },
        ],
        options,
-        undefined,
+        [],
        [
-          {
-            data: segmentsData,
-            color:'#FFE545'
-          }
+          { data: segmentsData, color:'#FFE545' }
        ]
      );
      pod.render();
--- a/examples/segments_select.html
+++ b/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>
--- a/examples/zoom_out.html
+++ b/examples/zoom_out.html
@ -20,7 +20,7 @@
          zoom: { isActive: true, orientation: "horizontal" },
          pan: { isActive: false },
        }},
-        events: {
+        eventsCallbacks: {
          zoomOut: function(centers, ranges) {
            console.log('zoomOut', centers, ranges);
          }
--- a/package.json
+++ b/package.json
@ -1,13 +1,13 @@
 {
  "name": "@chartwerk/line-pod",
-  "version": "0.6.19",
+  "version": "0.6.17",
  "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 && webpack --config build/webpack.dev.conf.js",
    "dev": "webpack --watch --config build/webpack.dev.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
@ -30,8 +30,5 @@
    "webpack": "^5.87.0",
    "webpack-cli": "^5.1.4"
  },
-  "packageManager": "yarn@3.2.1",
-  "workspaces": [
-    "react/*"
-  ]
+  "packageManager": "yarn@3.2.1"
 }
--- a/react/ChartwerkLinePod.tsx
+++ b/react/ChartwerkLinePod.tsx
@ -2,7 +2,7 @@ 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 { useEffect, useRef, useState } from 'react';

 import _ from 'lodash';

@ -66,6 +66,7 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
    }
  }, 1);

+
  return (
    <div id={props.id} className={props.className} ref={chartRef}></div>
  );
--- a/react/build/webpack.base.conf.js
+++ b/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'
-  ]
-};
--- a/react/build/webpack.dev.conf.js
+++ b/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;
--- a/react/build/webpack.prod.conf.js
+++ b/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;
--- a/react/package.json
+++ b/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"
-  }
-}
--- a/react/tsconfig.json
+++ b/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"
-  }
-}
--- a/react/yarn.lock
+++ b/react/yarn.lock
--- a/src/components/segments.ts
+++ b/src/components/segments.ts
@ -1,44 +1,34 @@
-import { SegmentSerie, SegmentElement } from "../models/segment";
+import { SegmentSerie } 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;
+import d3 from "d3";

 export class Segments {
  // TODO: more semantic name
  private _d3Holder = null;
-  private _metricCon = null;

-  constructor(
-    private _series: SegmentSerie[],
-    private _state: PodState<LineTimeSerie, LineOptions>
-  ) {
+  constructor(private _series: SegmentSerie[], private _state: PodState<LineTimeSerie, LineOptions>) {
  }

-  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
+  render(metricContainer: 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);
+      this.renderSerie(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');
+  protected renderSerie(serie: SegmentSerie) {
    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)
@ -46,28 +36,10 @@ export class Segments {
        .attr('width', width)
        // @ts-ignore // TODO: remove ignore but boxParams are protected
        .attr('height', this._state.boxParams.height)
-        .attr('opacity', opacity)
+        .attr('opacity', 0.3)
        .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)
-        })
+        .style('pointer-events', 'none');
    });
+
  }
 }
--- a/src/index.ts
+++ b/src/index.ts
@ -56,7 +56,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    }

    this._segmentsLayer = new Segments(this._segmentSeries, this.state);
-    this._segmentsLayer.render(this.metricContainer, this.chartContainer);
+    this._segmentsLayer.render(this.metricContainer);
  }

  clearAllMetrics(): void {
@ -446,10 +446,10 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {

    // TODO: refactor core not to take _options explicitly
    if(
-      this.options._options.events !== undefined && 
-      this.options._options.events.zoomOut !== undefined
+      this.options._options.eventsCallbacks !== undefined && 
+      this.options._options.eventsCallbacks.zoomOut !== undefined
    ) {
-      this.options._options.events.zoomOut(
+      this.options._options.eventsCallbacks.zoomOut(
        centers,
        [this.state.xValueRange, this.state.yValueRange]
      );
--- a/src/models/segment.ts
+++ b/src/models/segment.ts
@ -1,11 +1,4 @@
-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
+  data: [number, number, any?][] // [from, to, payload?] payload is any data for tooltip
 }
--- a/src/types.ts
+++ b/src/types.ts
@ -12,7 +12,7 @@ type LineTimeSerieParams = {

 export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
 export type LineOptions = Options & {
-  events? : {
+  eventsCallbacks? : {
    zoomOut?: (centers: {
      x: number;
      y: number;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,5 +19,6 @@
    "noUnusedLocals": false,
    "baseUrl": "./src",
  },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "exclude": ["*.tsx"]
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -5,13 +5,13 @@ __metadata:
  version: 6
  cacheKey: 8

-"@chartwerk/core@npm:^0.6.23":
-  version: 0.6.23
-  resolution: "@chartwerk/core@npm:0.6.23"
+"@chartwerk/core@npm:^0.6.21":
+  version: 0.6.21
+  resolution: "@chartwerk/core@npm:0.6.21"
  dependencies:
    d3: ^5.16.0
    lodash: ^4.17.21
-  checksum: 629b0438e8cea02914e12956069d318caa98e6b3e2dd2514aab267474fa87e0aa92c190c4ca0fe95ca8091f83be1e1897801f5632c3f11d9cb3be39fa89cca84
+  checksum: c536eca30241e775d4d4cfed4d54fd64c2f0299e792056166c90e50e11d9b698b1736b9c0dbf6ec6ea30fecd676f0012c774ff91a1d184eaee00c71b5d9e3925
  languageName: node
  linkType: hard

@ -19,7 +19,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@chartwerk/line-pod@workspace:."
  dependencies:
-    "@chartwerk/core": ^0.6.23
+    "@chartwerk/core": ^0.6.21
    copy-webpack-plugin: ^11.0.0
    css-loader: ^6.8.1
    style-loader: ^3.3.3