0.8.1

Merge pull request 'Fix bar width calculation' (#7 ) from fix-bar-width-calculation into main
Reviewed-on: #7
15 changed files with 613 additions and 1073 deletions
--- a/examples/demo.html
+++ b/examples/demo.html
@ -0,0 +1,61 @@
+<!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">
+      var pod = new ChartwerkBarPod(
+        document.getElementById('chart'),
+        [
+          { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex]  },
+          // { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
+          // { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
+          // { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
+        ],
+        {
+          usePanning: false,
+          axis: {
+            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
+            y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
+          },
+          stacked: false,
+          matching: false,
+          maxBarWidth: 20,
+          minBarWidth: 4,
+          zoomEvents: {
+            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
+          },
+          annotations: [
+            { key: 'm-1', color: 'red' },
+            { key: 'm-2', color: 'green' }
+          ],
+          eventsCallbacks: {
+            zoomIn: (range) => { console.log('range', range) }
+          },
+          renderLegend: false,
+        }
+      );
+      console.time('render');
+      pod.render();
+      console.timeEnd('render');
+
+      function getData() {
+        return [
+          [100, 15], [200, 20], [300, 10],
+        ];
+      }
+    </script>
+  </body>
+</html>
+
+<style>
+.overlay {
+  fill: black;
+}
+</style>
--- a/examples/demo_annotation.html
+++ b/examples/demo_annotation.html
@ -1,55 +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">
-      var pod = new ChartwerkBarPod(
-        document.getElementById('chart'),
-        [
-          { target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'], annotation: { enable: true, color: 'green'} },
-          { target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'], annotation: { enable: true, color: 'black' } },
-        ],
-        {
-          usePanning: false,
-          axis: {
-            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] },
-            y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
-          },
-          zoomEvents: {
-            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
-          },
-          eventsCallbacks: {
-            zoomIn: (range) => { console.log('range', range) }
-          },
-          renderLegend: false,
-          type: {
-            ['non-discrete']: {
-              enable: true,
-              barWidth: {
-                estimated: { value: 35, type: 'unit' },
-                max: 30,
-                min: 10,
-              }
-            }
-          }
-        }
-      );
-      console.time('render');
-      pod.render();
-      console.timeEnd('render');
-    </script>
-  </body>
-</html>
-
-<style>
-.overlay {
-  fill: none;
-}
-</style>
--- a/examples/demo_discrete.html
+++ b/examples/demo_discrete.html
@ -1,57 +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">
-      var pod = new ChartwerkBarPod(
-        document.getElementById('chart'),
-        [
-          { target: 'serie1', datapoints: [[100, 10, 20, 5], [200, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] },
-          { target: 'serie2', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] },
-          { target: 'serie3', datapoints: [[100, -10, 5], [200, -5, -5], [300, -20, 15]], color: ['red', 'pink', 'blue'] },
-          { target: 'serie4', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] },
-        ],
-        {
-          usePanning: false,
-          axis: {
-            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 },
-            y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
-          },
-          zoomEvents: {
-            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
-          },
-          eventsCallbacks: {
-            zoomIn: (range) => { console.log('range', range) }
-          },
-          renderLegend: false,
-          // discrete type config
-          type: {
-            discrete: {
-              enable: true,
-              step: 100,
-              groupSize: {
-                width: { value: 60, type: 'percent', }
-              }
-            }
-          }
-        }
-      );
-      console.time('render');
-      pod.render();
-      console.timeEnd('render');
-    </script>
-  </body>
-</html>
-
-<style>
-.overlay {
-  fill: none;
-}
-</style>
--- a/examples/demo_formatters.html
+++ b/examples/demo_formatters.html
@ -1,57 +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">
-      // use formatters for color and opacity
-      const colorFormatter = (event) => (event.value > 50 ? 'red' : 'green');
-      const opacityFormatter = (event) => (event.key >= 200 ? 0.5 : 1);
-
-      var pod = new ChartwerkBarPod(
-        document.getElementById('chart'),
-        [
-          { target: 'serie1', datapoints: [[0, 50], [100, 70], [200, 40], [300, 90]], color: colorFormatter, opacity: opacityFormatter },
-        ],
-        {
-          usePanning: false,
-          axis: {
-            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 },
-            y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
-          },
-          zoomEvents: {
-            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
-          },
-          eventsCallbacks: {
-            zoomIn: (range) => { console.log('range', range) }
-          },
-          renderLegend: false,
-          type: {
-            discrete: {
-              enable: true,
-              step: 100,
-              groupSize: {
-                width: { value: 60, type: 'percent', }
-              }
-            }
-          }
-        }
-      );
-      console.time('render');
-      pod.render();
-      console.timeEnd('render');
-    </script>
-  </body>
-</html>
-
-<style>
-.overlay {
-  fill: none;
-}
-</style>
--- a/examples/demo_non_discrete.html
+++ b/examples/demo_non_discrete.html
@ -1,56 +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">
-      var pod = new ChartwerkBarPod(
-        document.getElementById('chart'),
-        [
-          { target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] },
-          { target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'] },
-        ],
-        {
-          usePanning: false,
-          axis: {
-            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] },
-            y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
-          },
-          zoomEvents: {
-            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
-          },
-          eventsCallbacks: {
-            zoomIn: (range) => { console.log('range', range) }
-          },
-          renderLegend: false,
-          // non_discrete type config
-          type: {
-            ['non-discrete']: {
-              enable: true,
-              barWidth: {
-                estimated: { value: 35, type: 'unit' },
-                max: 30,
-                min: 10,
-              }
-            }
-          }
-        }
-      );
-      console.time('render');
-      pod.render();
-      console.timeEnd('render');
-    </script>
-  </body>
-</html>
-
-<style>
-.overlay {
-  fill: none;
-}
-</style>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@chartwerk/bar-pod",
-  "version": "0.7.2",
+  "version": "0.8.1",
  "description": "Chartwerk bar pod",
  "main": "dist/index.js",
  "files": [
--- a/src/index.ts
+++ b/src/index.ts
@ -2,26 +2,17 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, AxisFormat } from '@cha

 import { BarConfig } from './models/bar_options';
 import { BarSeries } from './models/bar_series';
-import { BarAnnotation } from './models/bar_annotation';
-import { DataProcessor, DataRow, DataItem } from './models/data_processor';
-import { BarGroup } from './models/bar_group';
-import { setBarScaleY, setBarScaleX } from './models/bar_state';
-
-import {
-  BarSerie, BarOptions, DiscreteConfig, NonDiscreteConfig,
-  BarPodType, SizeType, CallbackEvent, Color, Opacity,
-  BarData, ColorFormatter, OpacityFormatter,
-  Datapoint, ValueX, ValueY,
-} from './types';

+import { BarSerie, BarOptions, RowValues } from './types';
 import { findClosest } from './utils';

 import * as d3 from 'd3';
 import * as _ from 'lodash';

+
 export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
  barYScale: null | d3.ScaleLinear<number, number> = null;
-  dataProcessor: DataProcessor;
+  _seriesDataForRendring = [];
  series: BarSeries;
  options: BarConfig;

@ -29,10 +20,6 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
    super(el, _series, _options);
    this.series = new BarSeries(_series);
    this.options = new BarConfig(_options);
-    this.dataProcessor = new DataProcessor(this.series.visibleSeries, this.options);
-
-    setBarScaleY(this.state, this.dataProcessor.dataRows, this.options);
-    setBarScaleX(this.state, this.dataProcessor.dataRows, this.options);
  }

  protected renderMetrics(): void {
@ -40,33 +27,188 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
      this.renderNoDataPointsMessage();
      return;
    }
-    this.dataProcessor.dataRows.forEach((dataRow: DataRow) => {
-      const barGroup = new BarGroup(
-        this.overlay, this.metricContainer,
-        dataRow, this.options, this.state,
-        { width: this.width, height: this.height, zeroHorizon: this.state.yScale(0) },
-        this.dataProcessor.dataRows.length
+
+    this.setBarPodScales();
+    this.setSeriesDataForRendering();
+    this.renderSerie(this._seriesDataForRendring);
+  }
+
+  get isMatchingDisabled(): boolean {
+    return this.options.barOptions.matching === false || this.seriesUniqKeys.length === 0;
+  }
+
+  setSeriesDataForRendering(): void {
+    if(this.isMatchingDisabled) {
+      this._seriesDataForRendring = this.getZippedDataForRender(this.series.visibleSeries);
+    } else {
+      const matchedSeries = this.seriesForMatching.map(
+        (series: BarSerie[], idx: number) => this.getZippedDataForRender(series)
      );
-      this.renderAnnotationForGroup(barGroup, dataRow);
-    });
+      this._seriesDataForRendring = this.mergeMacthedSeriesAndSort(matchedSeries);
+    }
  }

-  renderAnnotationForGroup(barGroup: BarGroup, dataRow: DataRow): void {
-    if(this.options.barType === BarPodType.DISCRETE) {
-      return;
+  setBarPodScales(): void {
+    // TODO: its a hack to avoid infinite scale function recalling
+    // It should be fixed by implenting BarState
+    this.barYScale = this.getYScale();
+  }
+
+  renderSerie(data: any): void {
+    this.metricContainer.selectAll(`.rects-container`)
+      .data(data)
+      .enter().append('g')
+      .attr('class', 'rects-container')
+      .each((d: RowValues, rowIndex: number, nodes: any) => {
+        const container = d3.select(nodes[rowIndex]);
+        container.selectAll('rect')
+          .data(d.values)
+          .enter().append('rect')
+          .style('fill', (val, idx) => this.getBarColor(d, val, idx, rowIndex))
+          .attr('opacity', () => this.getBarOpacity(d))
+          .attr('x', (val: number, idx: number) => {
+            return this.getBarPositionX(d.key, idx);
+          })
+          .attr('y', (val: number, idx: number) => {
+            return this.getBarPositionY(val, idx, d.values);
+          })
+          .attr('width', this.barWidth)
+          .attr('height', (val: number) => this.getBarHeight(val))
+          .on('contextmenu', this.contextMenu.bind(this))
+          .on('mouseover', this.redirectEventToOverlay.bind(this))
+          .on('mousemove', this.redirectEventToOverlay.bind(this))
+          .on('mouseout', this.redirectEventToOverlay.bind(this))
+          .on('mousedown', () => { d3.event.stopPropagation(); });
+
+        // render bar annotations, its all hardcoded
+        if(_.isEmpty(this.options.barOptions.annotations)) {
+          return;
+        }
+        // find all series for single matchedKey
+        const series = _.filter(this.series.visibleSeries, serie => _.includes(d.serieTarget, serie.target));
+        const matchedKeys = _.map(series, serie => serie.matchedKey); // here matchedKeys should be equal
+        const key = matchedKeys[0];
+
+        const lastRect = _.last(container.selectAll('rect')?.nodes());
+        const annotation = _.find(this.options.barOptions.annotations, a => a.key === key);
+        if(!lastRect || !key || !annotation) {
+          return;
+        }
+
+        const rectSelection = d3.select(lastRect);
+        // render triangle
+        container.append('path')
+          .attr('d', () => {
+            const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
+            const y = Math.ceil(_.toNumber(rectSelection.attr('y')));
+            const options = { max: this.options.barOptions.maxAnnotationSize, min: this.options.barOptions.minAnnotationSize };
+            return this.getTrianglePath(x, y, this.barWidth, options);
+          })
+          .attr('fill', annotation.color)
+          .on('mouseover', this.redirectEventToOverlay.bind(this))
+          .on('mousemove', this.redirectEventToOverlay.bind(this))
+          .on('mouseout', this.redirectEventToOverlay.bind(this))
+          .on('mousedown', () => { d3.event.stopPropagation(); });
+      });
+  }
+
+  redirectEventToOverlay(): void {
+    this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
+  }
+
+  getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
+    // (x, y) - top left corner of bar
+    const minTriangleSize = options?.min || 6;
+    const maxTriagleSize = options?.max || 10;
+    const yOffset = 4; // offset between triangle and bar
+    const centerX = x + length / 2;
+    const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
+
+    const topY = Math.max(y - correctedLength - yOffset, 4);
+    const topLeftCorner = {
+      x: centerX - correctedLength / 2,
+      y: topY,
+    };
+    const topRightCorner = {
+      x: centerX + correctedLength / 2,
+      y: topY,
+    };
+    const bottomMiddleCorner = {
+      x: centerX,
+      y: topY + correctedLength,
+    };
+
+    return `M ${topLeftCorner.x} ${topLeftCorner.y}
+      L ${topRightCorner.x} ${topRightCorner.y}
+      L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
+  }
+
+  getBarOpacity(rowValues: RowValues): number {
+    if(this.options.barOptions.opacityFormatter === undefined) {
+      return 1;
    }
-    const target = _.first(dataRow.items).target;
-    const serie = this.series.getSerieByTarget(target);
-    if(!serie.annotation?.enable) {
-      return;
+    return this.options.barOptions.opacityFormatter(rowValues);
+  }
+
+  getBarColor(rowValues: RowValues, val: number, i: number, rowIndex: number): string {
+    if(_.isFunction(rowValues.colors[i])) {
+      return (rowValues.colors[i] as Function)({ rowData: rowValues, val, stackedIndex: i, rowIndex });
    }
-    const annotationOptions = {
-      size: barGroup.getGroupWidth(),
-      max: serie.annotation.size.max,
-      min: serie.annotation.size.min,
-      color: serie.annotation.color,
-    };
-    new BarAnnotation(this.overlay, barGroup.getGroupContainer(), annotationOptions);
+    return (rowValues.colors[i] as string);
+  }
+
+  mergeMacthedSeriesAndSort(matchedSeries: any[]) {
+    // TODO: refactor
+    if(matchedSeries.length === 0) {
+      throw new Error('Cant mergeMacthedSeriesAndSort');
+    }
+    if(matchedSeries.length === 1) {
+      return matchedSeries[0];
+    }
+    let unionSeries = _.clone(matchedSeries[0]);
+    for(let i = 1; i < matchedSeries.length; i++){
+      unionSeries = [...unionSeries, ...matchedSeries[i]];
+    }
+    const sortedSeries = _.sortBy(unionSeries, ['key']);
+    return sortedSeries;
+  }
+
+  get seriesUniqKeys(): string[] {
+    if(!this.series.isSeriesAvailable) {
+      return [];
+    }
+    const keys = this.series.visibleSeries.map(serie => serie.matchedKey);
+    const uniqKeys = _.uniq(keys);
+    const filteredKeys = _.filter(uniqKeys, key => key !== undefined);
+    return filteredKeys;
+  }
+
+  get seriesForMatching(): BarSerie[][] {
+    if(this.seriesUniqKeys.length === 0) {
+      return [this.series.visibleSeries];
+    }
+    const seriesList = this.seriesUniqKeys.map(key => {
+      const seriesWithKey = _.filter(this.series.visibleSeries, serie => serie.matchedKey === key);
+      return seriesWithKey;
+    });
+    return seriesList;
+  }
+
+  getZippedDataForRender(series: BarSerie[]): RowValues[] {
+    if(series.length === 0) {
+      throw new Error('There is no visible series');
+    }
+    const keysColumn = _.map(series[0].datapoints, row => row[0]);
+    const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
+    // @ts-ignore
+    const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null));
+    const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns);
+    const zippedValuesColumn = _.zip(...valuesColumns);
+    const colors = _.map(series, serie => serie.colorFormatter || serie.color);
+    const tagrets = _.map(series, serie => serie.target);
+    const zippedData = _.zip(keysColumn, zippedValuesColumn, zippedAdditionalValuesColumn, tagrets);
+    const data = _.map(zippedData, row => { return { key: row[0], values: row[1], additionalValues: row[2], colors, serieTarget: tagrets } });
+    return data.filter(v => v.key !== undefined);
  }

  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
@ -89,39 +231,28 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
    this.crosshair.select('#crosshair-line-x')
      .attr('x1', eventX)
      .attr('x2', eventX);
-    const dataRow = this.getDataRowFromMousePosition(eventX);
+
+    const series = this.getSeriesPointFromMousePosition(eventX);

    this.options.callbackMouseMove({
-      position: {
-        eventX: event[0],
-        eventY: event[1],
-        pageX: d3.event.pageX,
-        pageY: d3.event.pageY,
-        valueX: this.state.xScale.invert(event[0]),
-        valueY: this.state.yScale.invert(event[1]),
-      },
-      data: dataRow,
+      x: d3.event.pageX,
+      y: d3.event.pageY,
+      time: this.state.xScale.invert(eventX),
+      series,
+      chartX: eventX,
+      chartWidth: this.width
    });
  }

-  getDataRowFromMousePosition(eventX: number): DataRow | undefined {
+  getSeriesPointFromMousePosition(eventX: number): any[] | undefined {
    if(!this.series.isSeriesAvailable) {
      return undefined;
    }
-    const mousePositionKey = this.state.xScale.invert(eventX);
-    const keys = _.map(this.dataProcessor.dataRows, (dataRow: DataRow) => dataRow.key);
-    let idx: number;
-    switch(this.options.barType) {
-      case BarPodType.DISCRETE:
-        idx = Math.floor(mousePositionKey);
-        break;
-      case BarPodType.NON_DISCRETE:
-        idx = findClosest(keys, mousePositionKey);
-        break;
-      default:
-        break;
-    }
-    return this.dataProcessor.dataRows[idx];
+    const mousePoisitionKey = Math.ceil(this.state.xScale.invert(eventX));
+    const keys = _.map(this._seriesDataForRendring, el => el.key);
+    const idx = findClosest(keys, mousePoisitionKey);
+
+    return this._seriesDataForRendring[idx];
  }

  onMouseOver(): void {
@ -133,6 +264,121 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
    this.options.callbackMouseOut();
    this.crosshair.style('display', 'none');
  }
+
+  contextMenu(): void {
+    // maybe it is not the best name, but i took it from d3.
+    d3.event.preventDefault(); // do not open browser's context menu.
+
+    const event = d3.mouse(this.chartContainer.node());
+    const eventX = event[0];
+    const series = this.getSeriesPointFromMousePosition(eventX);
+    this.options.callbackContextMenu({
+      pageX: d3.event.pageX,
+      pageY: d3.event.pageY,
+      xVal: this.state.xScale.invert(eventX),
+      series,
+      chartX: eventX
+    });
+  }
+
+  get barWidth(): number {
+    const xAxisStartValue = _.first(this.series.visibleSeries[0].datapoints)[0];
+    const xAxisEndValue = _.last(this.series.visibleSeries[0].datapoints)[0];
+    const timeInterval = (xAxisEndValue - xAxisStartValue) / this.series.visibleSeries[0].datapoints.length;
+    let width = this.state.xScale(timeInterval) / 2;
+    if(this.options.barOptions.barWidth !== undefined) {
+      // barWidth now has axis-x dimension
+      width = this.state.xScale(this.state.getMinValueX() + this.options.barOptions.barWidth);
+    }
+    let rectColumns = this.series.visibleSeries.length;
+    if(this.options.barOptions.stacked === true) {
+      rectColumns = 1;
+    }
+    return this.updateBarWidthWithBorders(width / rectColumns);
+  }
+
+  updateBarWidthWithBorders(width: number): number {
+    let barWidth = width;
+    if(this.options.barOptions.minBarWidth !== undefined) {
+      barWidth = Math.max(barWidth, this.options.barOptions.minBarWidth);
+    }
+    if(this.options.barOptions.maxBarWidth !== undefined) {
+      barWidth = Math.min(barWidth, this.options.barOptions.maxBarWidth);
+    }
+    return barWidth;
+  }
+
+  getBarHeight(value: number): number {
+    // TODO: Property 'sign' does not exist on type 'Math'
+    // @ts-ignore
+    const height = Math.sign(value) * (this.barYScale(0) - this.barYScale(value));
+    return height;
+  }
+
+  getBarPositionX(key: number, idx: number): number {
+    let xPosition: number = this.state.xScale(key);
+    if(this.options.barOptions.stacked === false) {
+      xPosition += idx * this.barWidth;
+    }
+    return xPosition;
+  }
+
+  getBarPositionY(val: number, idx: number, values: number[]): number {
+    let yPosition: number = this.barYScale(Math.max(val, 0));
+    if(this.options.barOptions.stacked === true) {
+      const previousBarsHeight = _.sum(
+        _.map(_.range(idx), i => this.getBarHeight(values[i]))
+      );
+      yPosition -= previousBarsHeight;
+    }
+    return yPosition;
+  }
+
+  getYScale(): d3.ScaleLinear<number, number> {
+    if(
+      this.state.getMinValueY() === undefined ||
+      this.state.getMaxValueY() === undefined
+    ) {
+      return d3.scaleLinear()
+        .domain([1, 0])
+        .range([0, this.height]);
+    }
+    const yMaxValue = this.getYMaxValue();
+    return d3.scaleLinear()
+      .domain([yMaxValue, Math.min(this.state.getMinValueY(), 0)])
+      .range([0, this.height]);
+  }
+
+  getYMaxValue(): number | undefined {
+    if(!this.series.isSeriesAvailable) {
+      return undefined;
+    }
+    if(this.options.axis.y.range) {
+      return _.max(this.options.axis.y.range);
+    }
+    let maxValue: number;
+    if(this.options.barOptions.stacked === true) {
+      if(this.options.barOptions.matching === true && this.seriesUniqKeys.length > 0) {
+        const maxValues = this.seriesForMatching.map(series => {
+          const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
+          const zippedValuesColumn = _.zip(...valuesColumns);
+          return maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
+        });
+        return _.max(maxValues);
+      } else {
+        const valuesColumns = _.map(this.series.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
+        const zippedValuesColumn = _.zip(...valuesColumns);
+        maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
+      }
+    } else {
+      maxValue = _.max(
+        this.series.visibleSeries.map(
+          serie => _.maxBy<number[]>(serie.datapoints, dp => dp[1])[0]
+        )
+      );
+    }
+    return Math.max(maxValue, 0);
+  }
 }

 // it is used with Vue.component, e.g.: Vue.component('chartwerk-bar-chart', VueChartwerkBarChartObject)
@ -158,10 +404,4 @@ export const VueChartwerkBarChartObject = {
  }
 };

-export {
-  BarSerie, BarOptions, TimeFormat, AxisFormat,
-  DiscreteConfig, NonDiscreteConfig,
-  BarPodType, SizeType, CallbackEvent, Color, Opacity,
-  BarData, ColorFormatter, OpacityFormatter,
-  Datapoint, ValueX, ValueY, DataItem, DataRow,
-};
+export { BarSerie, BarOptions, TimeFormat, AxisFormat };
--- a/src/models/bar_annotation.ts
+++ b/src/models/bar_annotation.ts
@ -1,69 +0,0 @@
-import * as d3 from 'd3';
-import * as _ from 'lodash';
-
-
-const DEFAULT_ANNOTATION_OFFSET_Y = 4; //offset between triangle and bar in px
-const DEFAULT_ANNOTATION_COLOR = 'red';
-
-export class BarAnnotation {
-  position: { x: number, y: number };
-
-  constructor(
-    protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
-    protected groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>, // group - bars as one item
-    protected annotationOptions: { size: number, max?: number, min?: number, offset?: number, color?: string },
-  ) {
-    this.position = this.getGroupLastRectPosition();
-    this.renderAnnotation();
-  }
-
-  protected renderAnnotation(): void {
-    this.groupContainer.append('path')
-      .attr('d', () => this.getTrianglePath())
-      .attr('fill', this.annotationOptions.color || DEFAULT_ANNOTATION_COLOR)
-      .on('mouseover', this.redirectEventToOverlay.bind(this))
-      .on('mousemove', this.redirectEventToOverlay.bind(this))
-      .on('mouseout', this.redirectEventToOverlay.bind(this))
-      .on('mousedown', () => { d3.event.stopPropagation(); });
-  }
-
-  getGroupLastRectPosition(): { x: number, y: number } {
-    const lastRect = _.last(this.groupContainer.selectAll('rect')?.nodes());
-    const barSelection = d3.select(lastRect);
-    return {
-      x: Math.ceil(_.toNumber(barSelection.attr('x'))),
-      y: Math.ceil(_.toNumber(barSelection.attr('y'))),
-    }
-  }
-
-  protected getTrianglePath(): string {
-    // (x, y) - top left corner of bar
-    const minTriangleSize = this.annotationOptions?.min;
-    const maxTriagleSize = this.annotationOptions?.max;
-    const yOffset = this.annotationOptions?.offset || DEFAULT_ANNOTATION_OFFSET_Y;
-    const centerX = this.position.x + this.annotationOptions.size / 2;
-    const correctedLength = _.clamp(this.annotationOptions.size, minTriangleSize, maxTriagleSize);
-
-    const topY = Math.max(this.position.y - correctedLength - yOffset, 4);
-    const topLeftCorner = {
-      x: centerX - correctedLength / 2,
-      y: topY,
-    };
-    const topRightCorner = {
-      x: centerX + correctedLength / 2,
-      y: topY,
-    };
-    const bottomMiddleCorner = {
-      x: centerX,
-      y: topY + correctedLength,
-    };
-
-    return `M ${topLeftCorner.x} ${topLeftCorner.y}
-      L ${topRightCorner.x} ${topRightCorner.y}
-      L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
-  }
-
-  redirectEventToOverlay(): void {
-    this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
-  }
-}
--- a/src/models/bar_group.ts
+++ b/src/models/bar_group.ts
@ -1,183 +0,0 @@
-import { DataRow, DataItem } from './data_processor';
-import { BarConfig } from './bar_options';
-
-import { PodState } from '@chartwerk/core';
-
-import { BarOptions, BarPodType, BarSerie, SizeType } from '../types';
-
-import * as d3 from 'd3';
-import * as _ from 'lodash';
-
-
-export class BarGroup {
-  constructor(
-    protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
-    protected container: d3.Selection<SVGGElement, unknown, null, undefined>,
-    protected dataRow: DataRow,
-    protected options: BarConfig,
-    protected state: PodState<BarSerie, BarOptions>,
-    protected boxParams: { width: number, height: number, zeroHorizon: number },
-    protected allDataLength: number,
-  ) {
-    this.setGroupWidth();
-    this.setBarWidth();
-
-    this.renderBarGroup();
-  }
-
-  protected _groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
-  protected _groupWidth: number;
-  protected _barWidth: number;
-
-  public getGroupContainer(): d3.Selection<SVGGElement, unknown, null, undefined> {
-    return this._groupContainer;
-  }
-
-  public getGroupWidth(): number {
-    return this._groupWidth;
-  }
-
-  public getBarWidth(): number {
-    return this._barWidth;
-  }
-
-  protected renderBarGroup(): void {
-    this._groupContainer = this.container.append('g').attr('class', `bar-group group-${this.dataRow.key}`);
-    _.forEach(this.dataRow.items, (data: DataItem, serieIdx: number) => {
-      this.renderStackedBars(data, serieIdx);
-    });
-  }
-
-  protected renderStackedBars(data: DataItem, serieIdx: number): void {
-    const barsHeightPositiveList = [];
-    const barsHeightNegativeList = [];
-    data.values.forEach((value: number, valueIdx: number) => {
-      const barHeight = this.getBarHeight(value);
-      const config = {
-        position: {
-          x: this.getBarPositionX(serieIdx),
-          y: this.getBarPositionY(value, barsHeightPositiveList, barsHeightNegativeList, barHeight),
-        },
-        width: this._barWidth,
-        height: barHeight,
-        color: data.colors[valueIdx],
-        opacity: data.opacity[valueIdx],
-        value,
-      };
-      if(value >= 0) {
-        barsHeightPositiveList.push(barHeight);
-      } else {
-        barsHeightNegativeList.push(barHeight);
-      }
-      
-      this.renderBar(config);
-    });
-  }
-
-  protected getBarPositionX(idx: number): number {
-    return this.state.xScale(this.dataRow.key) + this._barWidth * idx;
-  }
-
-  protected getBarPositionY(
-    value: number, barsHeightPositiveList: number[], barsHeightNegativeList: number[], barHeight: number
-  ): number {
-    if(value >= 0) {
-      const previousBarsHeight = _.sum(barsHeightPositiveList);
-      return this.boxParams.zeroHorizon - previousBarsHeight - barHeight;
-    }
-    const previousBarsHeight = _.sum(barsHeightNegativeList);
-    return this.boxParams.zeroHorizon + previousBarsHeight;
-  }
-
-  protected getBarHeight(value): number {
-    return Math.abs(this.boxParams.zeroHorizon - this.state.yScale(value));
-  }
-
-  protected setGroupWidth(): void {
-    switch(this.options.barType) {
-      case BarPodType.DISCRETE:
-        this.setDiscreteGroupWidth();
-        return;
-      case BarPodType.NON_DISCRETE:
-        this.setNonDiscreteGroupWidth();
-        return;
-    }
-  }
-
-  protected setDiscreteGroupWidth(): void {
-    const groupSizeConfig = this.options.dicreteConfig.groupSize.width;
-    let width;
-    if(groupSizeConfig.type === SizeType.PX) {
-      width = groupSizeConfig.value;
-    }
-    if(groupSizeConfig.type === SizeType.PERCENT) {
-      const factor = groupSizeConfig.value / 100;
-      width = (this.boxParams.width / this.allDataLength) * factor;
-    }
-    this._groupWidth = _.clamp(width, this.options.dicreteConfig.groupSize.min || width, this.options.dicreteConfig.groupSize.max || width);
-  }
-
-  protected setNonDiscreteGroupWidth(): void {
-    const widthConfig = this.options.nonDicreteConfig.barWidth;
-    if(widthConfig.estimated.value === undefined) {
-      const groupWidth = this.boxParams.width / (this.allDataLength * this.dataRow.items.length);
-      this._groupWidth = groupWidth * 0.5;
-      return;
-    }
-    let width;
-    if(widthConfig.estimated.type === SizeType.PX) {
-      width = widthConfig.estimated.value;
-    }
-    if(widthConfig.estimated.type === SizeType.UNIT) {
-      width = this.state.absXScale(widthConfig.estimated.value);
-    }
-    this._groupWidth = _.clamp(width, widthConfig.min || width, widthConfig.max || width);
-  }
-
-  protected setBarWidth(): void {
-    switch(this.options.barType) {
-      case BarPodType.DISCRETE:
-        this._barWidth = this._groupWidth / this.dataRow.items.length;
-        return;
-      case BarPodType.NON_DISCRETE:
-        this._barWidth = this._groupWidth;
-        return;
-    }
-  }
-
-  protected renderBar(config: any): void {
-    this._groupContainer.append('rect')
-      .attr('x', config.position.x)
-      .attr('y', config.position.y)
-      .attr('width', config.width)
-      .attr('height', config.height)
-      .style('fill', config.color)
-      .attr('opacity', config.opacity)
-      .on('contextmenu', this.contextMenu.bind(this))
-      .on('mouseover', this.redirectEventToOverlay.bind(this))
-      .on('mousemove', this.redirectEventToOverlay.bind(this))
-      .on('mouseout', this.redirectEventToOverlay.bind(this))
-      .on('mousedown', () => { d3.event.stopPropagation(); });
-  }
-
-  contextMenu(): void {
-    d3.event.preventDefault(); // do not open browser's context menu.
-    const event = d3.mouse(this.container.node());
-  
-    this.options.callbackContextMenu({
-      position: {
-        eventX: event[0],
-        eventY: event[1],
-        pageX: d3.event.pageX,
-        pageY: d3.event.pageY,
-        valueX: this.state.xScale.invert(event[0]),
-        valueY: this.state.yScale.invert(event[1]),
-      },
-      data: this.dataRow,
-    });
-  }
-
-  redirectEventToOverlay(): void {
-    this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
-  }
-}
--- a/src/models/bar_options.ts
+++ b/src/models/bar_options.ts
@ -1,66 +1,40 @@
 import { CoreOptions } from '@chartwerk/core';
-import { BarOptions, BarPodType, DiscreteConfig, NonDiscreteConfig, SizeType } from '../types';
+import { BarOptions, BarAdditionalOptions } from '../types';

 import * as _ from 'lodash';

-const DEFAULT_MIN_BAR_WIDTH = 4; //px
-
 const BAR_SERIE_DEFAULTS = {
-  type: {
-    [BarPodType.DISCRETE]: {
-      enable: false,
-      step: undefined,
-      innerSize: undefined,
-      groupSize: {
-        width: { value: 50, type: (SizeType.PERCENT as SizeType.PERCENT) },
-        max: undefined,
-        min: DEFAULT_MIN_BAR_WIDTH,
-      }
-    },
-    [BarPodType.NON_DISCRETE]: {
-      enable: false,
-      barWidth: {
-        estimated: { value: undefined, type: (SizeType.UNIT as SizeType.UNIT) },
-        max: undefined,
-        min: DEFAULT_MIN_BAR_WIDTH,
-      }
-    },
-  },
+  renderBarLabels: false,
+  stacked: false,
+  barWidth: undefined,
+  maxBarWidth: undefined,
+  minBarWidth: undefined,
+  maxAnnotationSize: undefined,
+  minAnnotationSize: undefined,
+  matching: false,
+  opacityFormatter: undefined,
+  annotations: [],
 };

 export class BarConfig extends CoreOptions<BarOptions> {

  constructor(options: BarOptions) {
    super(options, BAR_SERIE_DEFAULTS);
-    this.validateOptions();
-  }
-
-  get barOptions(): any {
-    return {};
  }

-  get dicreteConfig(): DiscreteConfig {
-    if(!this._options.type[BarPodType.DISCRETE]?.enable) {
-      throw new Error(`Can't get discrete config for non_dicreste type`);
+  get barOptions(): BarAdditionalOptions {
+    return {
+      renderBarLabels: this._options.renderBarLabels,
+      stacked: this._options.stacked,
+      barWidth: this._options.barWidth,
+      maxBarWidth: this._options.maxBarWidth,
+      minBarWidth: this._options.minBarWidth,
+      maxAnnotationSize: this._options.maxAnnotationSize,
+      minAnnotationSize: this._options.minAnnotationSize,
+      matching: this._options.matching,
+      opacityFormatter: this._options.opacityFormatter,
+      annotations: this._options.annotations,
    }
-    return this._options.type[BarPodType.DISCRETE];
-  }
-
-  get nonDicreteConfig(): NonDiscreteConfig {
-    if(!this._options.type[BarPodType.NON_DISCRETE]?.enable) {
-      throw new Error(`Can't get non_discrete config for dicreste type`);
-    }
-    return this._options.type[BarPodType.NON_DISCRETE];
-  }
-
-  get barType(): BarPodType {
-    if(this._options.type[BarPodType.DISCRETE]?.enable === true) {
-      return BarPodType.DISCRETE;
-    }
-    if(this._options.type[BarPodType.NON_DISCRETE]?.enable === true) {
-      return BarPodType.NON_DISCRETE;
-    }
-    throw new Error(`Unknown Ber Pod Type: ${this._options.type}`);
  }

  // event callbacks
@ -73,31 +47,4 @@ export class BarConfig extends CoreOptions<BarOptions> {
  get contextMenu(): (evt: any) => void {
    return this._options.eventsCallbacks.contextMenu;
  }
-
-  validateOptions(): void {
-    if(
-      this._options.type[BarPodType.DISCRETE]?.enable === true &&
-      this._options.type[BarPodType.NON_DISCRETE]?.enable === true
-    ) {
-      throw new Error(`Bar Options is not valid: only one BarPodType should be enabled`);
-    }
-    if(
-      this._options.type[BarPodType.DISCRETE]?.enable === false &&
-      this._options.type[BarPodType.NON_DISCRETE]?.enable === false
-    ) {
-      // @ts-ignore
-      this._options.type[BarPodType.DISCRETE]?.enable = true;
-      console.warn(`Bar Options: no type has been provided -> BarPodType.DISCRETE type will be used af default`);
-    }
-  }
-
-  validateDiscreteOptions(): void {
-    const groupType = this._options.type[BarPodType.DISCRETE].groupSize?.width?.type;
-    if(
-      groupType !== undefined &&
-      groupType !== SizeType.PERCENT && groupType !== SizeType.PX
-    ) {
-      throw new Error(`Bar Options is not valid: groupSize.width.type should be "px" on "percent": ${groupType}`);
-    }
-  }
 }
--- a/src/models/bar_series.ts
+++ b/src/models/bar_series.ts
@ -1,23 +1,10 @@
 import { CoreSeries } from '@chartwerk/core';
-import { BarSerie, SizeType } from '../types';
+import { BarSerie } from '../types';

-import * as _ from 'lodash';
-
-const DEFAULT_MIN_ANNOTATION_SIZE = 6; //px
-const DEFAULT_MAX_ANNOTATION_SIZE = 10; //px

 const BAR_SERIE_DEFAULTS = {
-  annotation: {
-    enable: false,
-    color: undefined,
-    size: {
-      esimated: { value: undefined, type: (SizeType.PERCENT as SizeType.PERCENT) },
-      max: DEFAULT_MAX_ANNOTATION_SIZE,
-      min: DEFAULT_MIN_ANNOTATION_SIZE,
-    }
-  },
-  color: undefined,
-  opacity: 1,
+  matchedKey: undefined,
+  colorFormatter: undefined
 };

 export class BarSeries extends CoreSeries<BarSerie> {
@ -25,9 +12,4 @@ export class BarSeries extends CoreSeries<BarSerie> {
  constructor(series: BarSerie[]) {
    super(series, BAR_SERIE_DEFAULTS);
  }
-
-  // move to parent
-  public getSerieByTarget(target: string): BarSerie | undefined {
-    return _.find(this.visibleSeries, serie => serie.target === target);
-  }
 }
--- a/src/models/bar_state.ts
+++ b/src/models/bar_state.ts
@ -1,46 +0,0 @@
-import { PodState } from '@chartwerk/core';
-import { DataRow } from './data_processor';
-import { BarConfig } from './bar_options';
-
-import { BarOptions, BarSerie, BarPodType, DiscreteConfig } from '../types';
-
-import * as _ from 'lodash';
-
-// It is not a real bar state. Just rewrite some core params. like xScale/yScale
-// TODO: import core scale and extend it, same to bar_series and bar_options
-
-export function setBarScaleX(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarConfig): void {
-  switch(options.barType) {
-    case BarPodType.DISCRETE:
-      const config: DiscreteConfig = options.dicreteConfig;
-      let discreteStep = 0;
-      if(_.isNumber(config.step)) {
-        discreteStep = config.step;
-      } else {
-        if(!_.isEmpty(dataRows)) {
-          discreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length;
-        }
-      }
-      state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + discreteStep];
-      return;
-    case BarPodType.NON_DISCRETE:
-      if(!_.isEmpty(options.axis.x.range)) {
-        return;
-      }
-      let nonDiscreteStep = 0;
-      if(!_.isEmpty(dataRows)) {
-        nonDiscreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length;
-      }
-      state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + nonDiscreteStep];
-      return;
-  }
-}
-
-export function setBarScaleY(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarOptions): void {
-  if(!_.isEmpty(options.axis.y.range)) {
-    return;
-  }
-  const maxValue = _.max(_.map(dataRows, (dataRow: DataRow) => dataRow.maxSumm));
-  const minValue = _.min(_.map(dataRows, (dataRow: DataRow) => dataRow.minSubtraction));
-  state.yValueRange = [minValue, maxValue];
-}
--- a/src/models/data_processor.ts
+++ b/src/models/data_processor.ts
@ -1,143 +0,0 @@
-import {
-  Datapoint, Color, ValueX, Opacity,
-  BarPodType, BarSerie
-} from '../types';
-
-import { BarConfig } from './bar_options';
-
-import * as _ from 'lodash';
-
-export type DataRow = {
-  key: number; // x
-  items: DataItem[];
-  maxSumm: number;
-  minSubtraction: number;
-};
-export type DataItem = {
-  target: string; // serie target
-  values: number[]; // y list
-  colors: string[];
-  opacity: number[];
-};
-const DEFAULT_BAR_COLOR = 'green';
-const DEFAULT_OPACITY = 1;
-
-export class DataProcessor {
-  _formattedDataRows: DataRow[] = [];
-
-  constructor(protected visibleSeries: BarSerie[], protected options: BarConfig) {
-    this.validateData();
-    switch(this.options.barType) {
-      case BarPodType.DISCRETE:
-        this.setDataRowsForDiscreteType();
-        break;
-      case BarPodType.NON_DISCRETE:
-        this.setDataRowsForNonDiscreteType();
-        break;
-      default:
-        throw new Error(`Bar DataProcessor: Unknown BarPodType ${this.options.barType}`);
-    }
-  }
-
-  public get dataRows(): DataRow[] {
-    return this._formattedDataRows;
-  }
-
-  protected setDataRowsForDiscreteType(): void {
-    const zippedData = _.zip(..._.map(this.visibleSeries, serie => serie.datapoints));
-    this._formattedDataRows = _.map(zippedData, (dataRow: Datapoint[], rowIdx: number) => {
-      return {
-        key: _.first(_.first(dataRow)), // x
-        items: _.map(dataRow, (datapoint: Datapoint, pointIdx: number) => {
-          const serie = this.visibleSeries[pointIdx];
-          const values = _.tail(datapoint);
-          return {
-            target: serie.target,
-            values, // y list
-            colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target),
-            opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target),
-          }
-        }),
-        maxSumm: _.max(_.map(dataRow, (datapoint: Datapoint) => this.getMaxSumm(_.tail(datapoint)))), // max y axis scale
-        minSubtraction: _.min(_.map(dataRow, (datapoint: Datapoint) => this.getMinSubtraction(_.tail(datapoint)))), // min y axis scale
-      }
-    });
-  }
-
-  protected setDataRowsForNonDiscreteType(): void {
-    for(let serie of this.visibleSeries) {
-      const rows = _.map(serie.datapoints, (datapoint: Datapoint) => {
-        const values = _.tail(datapoint);
-        return {
-          key: datapoint[0], // x
-          items: [
-            {
-              target: serie.target,
-              values, // y list
-              colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target),
-              opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target),
-            }
-          ],
-          maxSumm: this.getMaxSumm(values), // max y axis scale
-          minSubtraction: this.getMinSubtraction(values), // min y axis scale
-        }
-      });
-      this._formattedDataRows = _.concat(this._formattedDataRows, rows);
-    }
-    this._formattedDataRows = _.sortBy(this._formattedDataRows, 'key');
-  }
-
-  getColorsForEachValue(values: number[], color: Color, key: ValueX, target: string): string[] {
-    if(_.isString(color)) {
-      return _.map(values, value => color);
-    }
-    if(_.isArray(color)) {
-      return _.map(values, (value, i) => color[i] || DEFAULT_BAR_COLOR);
-    }
-    if(_.isFunction(color)) {
-      return _.map(values, (value, i) => (color as Function)({ value, barIndex: i, key, target }));
-    }
-    throw new Error(`Unknown type of serie color: ${target} ${color}`);
-  }
-
-  getOpacityForEachValue(values: number[], opacity: Opacity | undefined, key: ValueX, target: string): number[] {
-    if(opacity === undefined) {
-      return _.map(values, value => DEFAULT_OPACITY);
-    }
-    if(_.isNumber(opacity)) {
-      return _.map(values, value => opacity);
-    }
-    if(_.isArray(opacity)) {
-      return _.map(values, (value, i) => !_.isNil(opacity[i]) ? opacity[i] : DEFAULT_OPACITY);
-    }
-    if(_.isFunction(opacity)) {
-      return _.map(values, (value, i) => (opacity as Function)({ value, barIndex: i, key, target }));
-    }
-    throw new Error(`Unknown type of serie opacity: ${target} ${opacity}`);
-  }
-
-  getMaxSumm(values: number[]): number {
-    return values.reduce((prev, curr) => curr > 0 ? prev + curr : prev, 0);
-  }
-
-  getMinSubtraction(values: number[]): number {
-    return values.reduce((prev, curr) => curr < 0 ? prev + curr : prev, 0);
-  }
-
-  validateData(): void {
-    if(this.options.barType === BarPodType.NON_DISCRETE) {
-      return;
-    }
-    // TODO: move non-empty datapoints validation to core
-    if(_.isEmpty(this.visibleSeries)) {
-      return;
-    }
-    const xValuesList = _.map(_.first(this.visibleSeries).datapoints, dp => dp[0]);
-    _.forEach(this.visibleSeries, serie => {
-      const serieXList = _.map(serie.datapoints, dp => dp[0]);
-      if(!_.isEqual(xValuesList, serieXList)) {
-        throw new Error(`Bar DataProcessor: All series should have equal X values lists`);
-      }
-    });
-  }
-}
--- a/src/types.ts
+++ b/src/types.ts
@ -1,84 +1,34 @@
 import { Serie, Options } from '@chartwerk/core';
-import { DataRow } from 'models/data_processor';

-export type ValueX = (number | string);
-export type ValueY = number;
-export type Datapoint = [ValueX, ...ValueY[]]; // [x, y, y, y, ..., y], multiple y values as stacked bars
-export type BarData = { value: ValueY, key: ValueX, barIndex: number, target: string };
-export type ColorFormatter = (data: BarData) => string;
-export type OpacityFormatter = (data: BarData) => number;
-export type Color = string | string[] | ColorFormatter;
-export type Opacity = number | number[] | OpacityFormatter;
-
-export type BarSerieAdditionalParams = {
-  datapoints: Datapoint[];
-  // TODO add absolute/stacked type for y values. datapoint can be [x: 0, y1: 10, y2: 20] (absolute) === [x: 0, y1: 10, y2: 10] (stacked)
-  annotation?: {
-    // only for non_discrete type for now
-    enable: boolean;
-    color?: string;
-    size?: {
-      esimated: { value: number, type?: SizeType.PERCENT | SizeType.PX };
-      max?:  number; // type always SizeType.PX
-      min?: number; // type always SizeType.PX
-    }
-  };
-  color?: Color;
-  opacity?: Opacity;
-}
-export type BarSerie = Serie & BarSerieAdditionalParams;
-
-export type CallbackEvent = {
-  position: {
-    eventX: number,
-    eventY: number,
-    pageX: number,
-    pageY: number,
-    valueX: number,
-    valueY: number,
-  },
-  data: DataRow,
+export type BarSerieParams = {
+  matchedKey: string;
+  colorFormatter: (serie: BarSerie) => string;
 }
-
+export type BarSerie = Serie & Partial<BarSerieParams>;
 export type BarAdditionalOptions = {
-  type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both
-    [BarPodType.DISCRETE]: DiscreteConfig;
-    [BarPodType.NON_DISCRETE]: NonDiscreteConfig;
-  }
+  renderBarLabels?: boolean;
+  stacked?: boolean;
+  barWidth?: number; // width in x axis unit
+  maxBarWidth?: number; // in px
+  minBarWidth?: number; // in px
+  maxAnnotationSize?: number; // in px TODO: move to annotaions
+  minAnnotationSize?: number; // in px
+  matching?: boolean;
+  opacityFormatter?: (data: RowValues) => number;
+  annotations?: {
+    key: string, // matchedKey from series
+     // TODO: add  enum with "triangle" option 
+    color: string,
+  }[];
  eventsCallbacks?: {
-    contextMenu?: (data: CallbackEvent) => void;
-  };
+    contextMenu?: (data: any) => void;
+  }
 }
 export type BarOptions = Options & Partial<BarAdditionalOptions>;
-
-export enum SizeType {
-  UNIT = 'unit', // in units of X or Y values
-  PX = 'px',
-  PERCENT = 'percent', // from 0 to 100
-}
-
-export enum BarPodType {
-  DISCRETE = 'discrete', // render bars as groups
-  NON_DISCRETE = 'non-discrete', // render bars as time chart
+export type RowValues = {
+  key: number,
+  values: number[],
+  additionalValues: (null | number)[], // values in datapoints third column
+  colors: (string | ((data: any) => string))[],
+  serieTarget: string[],
 }
-
-export type DiscreteConfig = {
-  // union bars as one group, see examples/demo-group-by.html
-  enable: boolean;
-  step?: number; // X axis interval between two bars, type always SizeType.UNIT
-  groupSize?: {
-    width: { value: number, type?: SizeType.PERCENT | SizeType.PX, },
-    max?: number, // type always SizeType.PX
-    min?: number, // type always SizeType.PX
-    // TODO: margin between bars
-  };
-};
-
-export type NonDiscreteConfig = {
-  enable: boolean;
-  barWidth?: {
-    estimated?: { value: number, type?: SizeType.UNIT | SizeType.PX };
-    max?: number; // type always SizeType.PX
-    min?: number; // type always SizeType.PX
-  }
-};
--- a/yarn.lock
+++ b/yarn.lock
@ -20,12 +20,12 @@ __metadata:
  linkType: soft

 "@chartwerk/core@npm:latest":
-  version: 0.6.14
-  resolution: "@chartwerk/core@npm:0.6.14"
+  version: 0.6.26
+  resolution: "@chartwerk/core@npm:0.6.26"
  dependencies:
    d3: ^5.16.0
    lodash: ^4.17.21
-  checksum: 34888b555d91a96d5a279f43dc4b33f345d055574855e1c90cb22913f7e42b13b6c9abbd0af07e6531b6f872cdf8e04660c22a2c14938189b67b9c494c6a0bfb
+  checksum: d77ef83701dc13cf2b7fb36dc96448060b6301928bcc0730a7150930f83c51f295e176bcda4e1b8cb8f56d15fef5696edfe6f4e1033adbb5ef5d3487a02c3390
  languageName: node
  linkType: hard

@ -47,10 +47,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@jridgewell/resolve-uri@npm:3.1.0":
-  version: 3.1.0
-  resolution: "@jridgewell/resolve-uri@npm:3.1.0"
-  checksum: b5ceaaf9a110fcb2780d1d8f8d4a0bfd216702f31c988d8042e5f8fbe353c55d9b0f55a1733afdc64806f8e79c485d2464680ac48a0d9fcadb9548ee6b81d267
+"@jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "@jridgewell/resolve-uri@npm:3.1.1"
+  checksum: f5b441fe7900eab4f9155b3b93f9800a916257f4e8563afbcd3b5a5337b55e52bd8ae6735453b1b745457d9f6cdb16d74cd6220bbdd98cf153239e13f6cbb653
  languageName: node
  linkType: hard

@ -62,77 +62,72 @@ __metadata:
  linkType: hard

 "@jridgewell/source-map@npm:^0.3.3":
-  version: 0.3.3
-  resolution: "@jridgewell/source-map@npm:0.3.3"
+  version: 0.3.5
+  resolution: "@jridgewell/source-map@npm:0.3.5"
  dependencies:
    "@jridgewell/gen-mapping": ^0.3.0
    "@jridgewell/trace-mapping": ^0.3.9
-  checksum: ae1302146339667da5cd6541260ecbef46ae06819a60f88da8f58b3e64682f787c09359933d050dea5d2173ea7fa40f40dd4d4e7a8d325c5892cccd99aaf8959
+  checksum: 1ad4dec0bdafbade57920a50acec6634f88a0eb735851e0dda906fa9894e7f0549c492678aad1a10f8e144bfe87f238307bf2a914a1bc85b7781d345417e9f6f
  languageName: node
  linkType: hard

-"@jridgewell/sourcemap-codec@npm:1.4.14":
-  version: 1.4.14
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
-  checksum: 61100637b6d173d3ba786a5dff019e1a74b1f394f323c1fee337ff390239f053b87266c7a948777f4b1ee68c01a8ad0ab61e5ff4abb5a012a0b091bec391ab97
-  languageName: node
-  linkType: hard
-
-"@jridgewell/sourcemap-codec@npm:^1.4.10":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
  version: 1.4.15
  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
  checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
  languageName: node
  linkType: hard

-"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.18
-  resolution: "@jridgewell/trace-mapping@npm:0.3.18"
+"@jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.9":
+  version: 0.3.22
+  resolution: "@jridgewell/trace-mapping@npm:0.3.22"
  dependencies:
-    "@jridgewell/resolve-uri": 3.1.0
-    "@jridgewell/sourcemap-codec": 1.4.14
-  checksum: 0572669f855260808c16fe8f78f5f1b4356463b11d3f2c7c0b5580c8ba1cbf4ae53efe9f627595830856e57dbac2325ac17eb0c3dd0ec42102e6f227cc289c02
+    "@jridgewell/resolve-uri": ^3.1.0
+    "@jridgewell/sourcemap-codec": ^1.4.14
+  checksum: ac7dd2cfe0b479aa1b81776d40d789243131cc792dc8b6b6a028c70fcd6171958ae1a71bf67b618ffe3c0c3feead9870c095ee46a5e30319410d92976b28f498
  languageName: node
  linkType: hard

 "@types/eslint-scope@npm:^3.7.3":
-  version: 3.7.4
-  resolution: "@types/eslint-scope@npm:3.7.4"
+  version: 3.7.7
+  resolution: "@types/eslint-scope@npm:3.7.7"
  dependencies:
    "@types/eslint": "*"
    "@types/estree": "*"
-  checksum: ea6a9363e92f301cd3888194469f9ec9d0021fe0a397a97a6dd689e7545c75de0bd2153dfb13d3ab532853a278b6572c6f678ce846980669e41029d205653460
+  checksum: e2889a124aaab0b89af1bab5959847c5bec09809209255de0e63b9f54c629a94781daa04adb66bffcdd742f5e25a17614fb933965093c0eea64aacda4309380e
  languageName: node
  linkType: hard

 "@types/eslint@npm:*":
-  version: 8.40.2
-  resolution: "@types/eslint@npm:8.40.2"
+  version: 8.56.2
+  resolution: "@types/eslint@npm:8.56.2"
  dependencies:
    "@types/estree": "*"
    "@types/json-schema": "*"
-  checksum: a4780e45e677e3af21c44a900846996cb6d9ae8f71d51940942a047163ae93a05444392c005f491ed46aa169f3b25f8be125ab42c5d8bdb571154bf62a7c828a
+  checksum: 38e054971596f5c0413f66a62dc26b10e0a21ac46ceacb06fbf8cfb838d20820787209b17218b3916e4c23d990ff77cfdb482d655cac0e0d2b837d430fcc5db8
  languageName: node
  linkType: hard

-"@types/estree@npm:*, @types/estree@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "@types/estree@npm:1.0.1"
-  checksum: e9aa175eacb797216fafce4d41e8202c7a75555bc55232dee0f9903d7171f8f19f0ae7d5191bb1a88cb90e65468be508c0df850a9fb81b4433b293a5a749899d
+"@types/estree@npm:*, @types/estree@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@types/estree@npm:1.0.5"
+  checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a
  languageName: node
  linkType: hard

 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8":
-  version: 7.0.12
-  resolution: "@types/json-schema@npm:7.0.12"
-  checksum: 00239e97234eeb5ceefb0c1875d98ade6e922bfec39dd365ec6bd360b5c2f825e612ac4f6e5f1d13601b8b30f378f15e6faa805a3a732f4a1bbe61915163d293
+  version: 7.0.15
+  resolution: "@types/json-schema@npm:7.0.15"
+  checksum: 97ed0cb44d4070aecea772b7b2e2ed971e10c81ec87dd4ecc160322ffa55ff330dace1793489540e3e318d90942064bb697cc0f8989391797792d919737b3b98
  languageName: node
  linkType: hard

 "@types/node@npm:*":
-  version: 20.3.1
-  resolution: "@types/node@npm:20.3.1"
-  checksum: 63a393ab6d947be17320817b35d7277ef03728e231558166ed07ee30b09fd7c08861be4d746f10fdc63ca7912e8cd023939d4eab887ff6580ff704ff24ed810c
+  version: 20.11.17
+  resolution: "@types/node@npm:20.11.17"
+  dependencies:
+    undici-types: ~5.26.4
+  checksum: 59c0dde187120adc97da30063c86511664b24b50fe777abfe1f557c217d0a0b84a68aaab5ef8ac44f5c2986b3f9cd605a15fa6e4f31195e594da96bbe9617c20
  languageName: node
  linkType: hard

@ -344,11 +339,11 @@ __metadata:
  linkType: hard

 "acorn@npm:^8.7.1, acorn@npm:^8.8.2":
-  version: 8.8.2
-  resolution: "acorn@npm:8.8.2"
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
  bin:
    acorn: bin/acorn
-  checksum: f790b99a1bf63ef160c967e23c46feea7787e531292bb827126334612c234ed489a0dc2c7ba33156416f0ffa8d25bf2b0fdb7f35c2ba60eb3e960572bece4001
+  checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
  languageName: node
  linkType: hard

@ -391,17 +386,17 @@ __metadata:
  languageName: node
  linkType: hard

-"browserslist@npm:^4.14.5":
-  version: 4.21.9
-  resolution: "browserslist@npm:4.21.9"
+"browserslist@npm:^4.21.10":
+  version: 4.22.3
+  resolution: "browserslist@npm:4.22.3"
  dependencies:
-    caniuse-lite: ^1.0.30001503
-    electron-to-chromium: ^1.4.431
-    node-releases: ^2.0.12
-    update-browserslist-db: ^1.0.11
+    caniuse-lite: ^1.0.30001580
+    electron-to-chromium: ^1.4.648
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
  bin:
    browserslist: cli.js
-  checksum: 80d3820584e211484ad1b1a5cfdeca1dd00442f47be87e117e1dda34b628c87e18b81ae7986fa5977b3e6a03154f6d13cd763baa6b8bf5dd9dd19f4926603698
+  checksum: e62b17348e92143fe58181b02a6a97c4a98bd812d1dc9274673a54f73eec53dbed1c855ebf73e318ee00ee039f23c9a6d0e7629d24f3baef08c7a5b469742d57
  languageName: node
  linkType: hard

@ -412,10 +407,10 @@ __metadata:
  languageName: node
  linkType: hard

-"caniuse-lite@npm:^1.0.30001503":
-  version: 1.0.30001503
-  resolution: "caniuse-lite@npm:1.0.30001503"
-  checksum: cd5f0af37655ff71ec4ab3c49124d75e0b8b68de625d07ea80e9a82329e616b5203d5dad6865192653be9da50081c06878f081ab069dac0be35adf29aa1599cd
+"caniuse-lite@npm:^1.0.30001580":
+  version: 1.0.30001585
+  resolution: "caniuse-lite@npm:1.0.30001585"
+  checksum: c5994f0b5de857349ae0c157a3c61883e800ed154bbeab339aecf01a0a0fd24f67d23ebb48bc995c4c9cde2a281a51b682d1b14bbf2f832f6b2261119f450af4
  languageName: node
  linkType: hard

@ -496,20 +491,26 @@ __metadata:
  linkType: hard

 "css-loader@npm:^6.8.1":
-  version: 6.8.1
-  resolution: "css-loader@npm:6.8.1"
+  version: 6.10.0
+  resolution: "css-loader@npm:6.10.0"
  dependencies:
    icss-utils: ^5.1.0
-    postcss: ^8.4.21
+    postcss: ^8.4.33
    postcss-modules-extract-imports: ^3.0.0
-    postcss-modules-local-by-default: ^4.0.3
-    postcss-modules-scope: ^3.0.0
+    postcss-modules-local-by-default: ^4.0.4
+    postcss-modules-scope: ^3.1.1
    postcss-modules-values: ^4.0.0
    postcss-value-parser: ^4.2.0
-    semver: ^7.3.8
+    semver: ^7.5.4
  peerDependencies:
+    "@rspack/core": 0.x || 1.x
    webpack: ^5.0.0
-  checksum: 7c1784247bdbe76dc5c55fb1ac84f1d4177a74c47259942c9cfdb7a8e6baef11967a0bc85ac285f26bd26d5059decb848af8154a03fdb4f4894f41212f45eef3
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    webpack:
+      optional: true
+  checksum: ee3d62b5f7e4eb24281a22506431e920d07a45bd6ea627731ce583f3c6a846ab8b8b703bace599b9b35256b9e762f9f326d969abb72b69c7e6055eacf39074fd
  languageName: node
  linkType: hard

@ -844,10 +845,10 @@ __metadata:
  languageName: node
  linkType: hard

-"electron-to-chromium@npm:^1.4.431":
-  version: 1.4.431
-  resolution: "electron-to-chromium@npm:1.4.431"
-  checksum: 51b76599b1e8141ced50339e873fe961aa56369cd622fb8a26964c084722204866fadbde94219a432398dab1317a5afd79843ba97cdcd5819dfc98be0e47c0a1
+"electron-to-chromium@npm:^1.4.648":
+  version: 1.4.664
+  resolution: "electron-to-chromium@npm:1.4.664"
+  checksum: ffb3f0f797f0fe47dcf55f9e4a7dd409df40a0c9e11ced38d952f171ab79188a632fcccce101d876d171bbeb34c92754e4507d83b636c039e89b7acdb7646af7
  languageName: node
  linkType: hard

@ -862,25 +863,25 @@ __metadata:
  linkType: hard

 "envinfo@npm:^7.7.3":
-  version: 7.8.1
-  resolution: "envinfo@npm:7.8.1"
+  version: 7.11.1
+  resolution: "envinfo@npm:7.11.1"
  bin:
    envinfo: dist/cli.js
-  checksum: de736c98d6311c78523628ff127af138451b162e57af5293c1b984ca821d0aeb9c849537d2fde0434011bed33f6bca5310ca2aab8a51a3f28fc719e89045d648
+  checksum: f3d38ab6bc62388466e86e2f5665f90f238ca349c81bb36b311d908cb5ca96650569b43b308c9dcb6725a222693f6c43a704794e74a68fb445ec5575a90ca05e
  languageName: node
  linkType: hard

 "es-module-lexer@npm:^1.2.1":
-  version: 1.3.0
-  resolution: "es-module-lexer@npm:1.3.0"
-  checksum: 48fd9f504a9d2a894126f75c8b7ccc6273a289983e9b67255f165bfd9ae765d50100218251e94e702ca567826905ea2f7b3b4a0c4d74d3ce99cce3a2a606a238
+  version: 1.4.1
+  resolution: "es-module-lexer@npm:1.4.1"
+  checksum: a11b5a256d4e8e9c7d94c2fd87415ccd1591617b6edd847e064503f8eaece2d25e2e9078a02c5ce3ed5e83bb748f5b4820efbe78072c8beb07ac619c2edec35d
  languageName: node
  linkType: hard

 "escalade@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "escalade@npm:3.1.1"
-  checksum: a3e2a99f07acb74b3ad4989c48ca0c3140f69f923e56d0cba0526240ee470b91010f9d39001f2a4a313841d237ede70a729e92125191ba5d21e74b106800b133
+  version: 3.1.2
+  resolution: "escalade@npm:3.1.2"
+  checksum: 1ec0977aa2772075493002bdbd549d595ff6e9393b1cb0d7d6fcaf78c750da0c158f180938365486f75cb69fba20294351caddfce1b46552a7b6c3cde52eaa02
  languageName: node
  linkType: hard

@ -964,10 +965,19 @@ __metadata:
  languageName: node
  linkType: hard

-"function-bind@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "function-bind@npm:1.1.1"
-  checksum: b32fbaebb3f8ec4969f033073b43f5c8befbb58f1a79e12f1d7490358150359ebd92f49e72ff0144f65f2c48ea2a605bff2d07965f548f6474fd8efd95bf361a
+"flat@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "flat@npm:5.0.2"
+  bin:
+    flat: cli.js
+  checksum: 12a1536ac746db74881316a181499a78ef953632ddd28050b7a3a43c62ef5462e3357c8c29d76072bb635f147f7a9a1f0c02efef6b4be28f8db62ceb3d5c7f5d
+  languageName: node
+  linkType: hard
+
+"function-bind@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "function-bind@npm:1.1.2"
+  checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1
  languageName: node
  linkType: hard

@ -999,12 +1009,12 @@ __metadata:
  languageName: node
  linkType: hard

-"has@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has@npm:1.0.3"
+"hasown@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "hasown@npm:2.0.0"
  dependencies:
-    function-bind: ^1.1.1
-  checksum: b9ad53d53be4af90ce5d1c38331e712522417d017d5ef1ebd0507e07c2fbad8686fffb8e12ddecd4c39ca9b9b47431afbb975b8abf7f3c3b82c98e9aad052792
+    function-bind: ^1.1.2
+  checksum: 6151c75ca12554565098641c98a40f4cc86b85b0fd5b6fe92360967e4605a4f9610f7757260b4e8098dd1c2ce7f4b095f2006fe72a570e3b6d2d28de0298c176
  languageName: node
  linkType: hard

@ -1045,12 +1055,12 @@ __metadata:
  languageName: node
  linkType: hard

-"is-core-module@npm:^2.12.0":
-  version: 2.12.1
-  resolution: "is-core-module@npm:2.12.1"
+"is-core-module@npm:^2.13.0":
+  version: 2.13.1
+  resolution: "is-core-module@npm:2.13.1"
  dependencies:
-    has: ^1.0.3
-  checksum: f04ea30533b5e62764e7b2e049d3157dc0abd95ef44275b32489ea2081176ac9746ffb1cdb107445cf1ff0e0dfcad522726ca27c27ece64dadf3795428b8e468
+    hasown: ^2.0.0
+  checksum: 256559ee8a9488af90e4bad16f5583c6d59e92f0742e9e8bb4331e758521ee86b810b93bae44f390766ffbc518a0488b18d9dab7da9a5ff997d499efc9403f7c
  languageName: node
  linkType: hard

@ -1181,12 +1191,12 @@ __metadata:
  languageName: node
  linkType: hard

-"nanoid@npm:^3.3.6":
-  version: 3.3.6
-  resolution: "nanoid@npm:3.3.6"
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
  bin:
    nanoid: bin/nanoid.cjs
-  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
  languageName: node
  linkType: hard

@ -1197,10 +1207,10 @@ __metadata:
  languageName: node
  linkType: hard

-"node-releases@npm:^2.0.12":
-  version: 2.0.12
-  resolution: "node-releases@npm:2.0.12"
-  checksum: b8c56db82c4642a0f443332b331a4396dae452a2ac5a65c8dbd93ef89ecb2fbb0da9d42ac5366d4764973febadca816cf7587dad492dce18d2a6b2af59cda260
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 59443a2f77acac854c42d321bf1b43dea0aef55cd544c6a686e9816a697300458d4e82239e2d794ea05f7bbbc8a94500332e2d3ac3f11f52e4b16cbe638b3c41
  languageName: node
  linkType: hard

@ -1282,27 +1292,27 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-modules-local-by-default@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "postcss-modules-local-by-default@npm:4.0.3"
+"postcss-modules-local-by-default@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "postcss-modules-local-by-default@npm:4.0.4"
  dependencies:
    icss-utils: ^5.0.0
    postcss-selector-parser: ^6.0.2
    postcss-value-parser: ^4.1.0
  peerDependencies:
    postcss: ^8.1.0
-  checksum: 2f8083687f3d6067885f8863dd32dbbb4f779cfcc7e52c17abede9311d84faf6d3ed8760e7c54c6380281732ae1f78e5e56a28baf3c271b33f450a11c9e30485
+  checksum: 578b955b0773147890caa88c30b10dfc849c5b1412a47ad51751890dba16fca9528c3ab00a19b186a8c2c150c2d08e2ce64d3d907800afee1f37c6d38252e365
  languageName: node
  linkType: hard

-"postcss-modules-scope@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-modules-scope@npm:3.0.0"
+"postcss-modules-scope@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "postcss-modules-scope@npm:3.1.1"
  dependencies:
    postcss-selector-parser: ^6.0.4
  peerDependencies:
    postcss: ^8.1.0
-  checksum: 330b9398dbd44c992c92b0dc612c0626135e2cc840fee41841eb61247a6cfed95af2bd6f67ead9dd9d0bb41f5b0367129d93c6e434fa3e9c58ade391d9a5a138
+  checksum: 9e9d23abb0babc7fa243be65704d72a5a9ceb2bded4dbaef96a88210d468b03c8c3158c197f4e22300c851f08c6fdddd6ebe65f44e4c34448b45b8a2e063a16d
  languageName: node
  linkType: hard

@ -1328,12 +1338,12 @@ __metadata:
  linkType: hard

 "postcss-selector-parser@npm:^6.0.4":
-  version: 6.0.13
-  resolution: "postcss-selector-parser@npm:6.0.13"
+  version: 6.0.15
+  resolution: "postcss-selector-parser@npm:6.0.15"
  dependencies:
    cssesc: ^3.0.0
    util-deprecate: ^1.0.2
-  checksum: f89163338a1ce3b8ece8e9055cd5a3165e79a15e1c408e18de5ad8f87796b61ec2d48a2902d179ae0c4b5de10fccd3a325a4e660596549b040bc5ad1b465f096
+  checksum: 57decb94152111004f15e27b9c61131eb50ee10a3288e7fcf424cebbb4aba82c2817517ae718f8b5d704ee9e02a638d4a2acff8f47685c295a33ecee4fd31055
  languageName: node
  linkType: hard

@ -1344,14 +1354,14 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss@npm:^8.4.21":
-  version: 8.4.24
-  resolution: "postcss@npm:8.4.24"
+"postcss@npm:^8.4.33":
+  version: 8.4.35
+  resolution: "postcss@npm:8.4.35"
  dependencies:
-    nanoid: ^3.3.6
+    nanoid: ^3.3.7
    picocolors: ^1.0.0
    source-map-js: ^1.0.2
-  checksum: 814e2126dacfea313588eda09cc99a9b4c26ec55c059188aa7a916d20d26d483483106dc5ff9e560731b59f45c5bb91b945dfadc670aed875cc90ddbbf4e787d
+  checksum: cf3c3124d3912a507603f6d9a49b3783f741075e9aa73eb592a6dd9194f9edab9d20a8875d16d137d4f779fe7b6fbd1f5727e39bfd1c3003724980ee4995e1da
  languageName: node
  linkType: hard

@ -1397,28 +1407,28 @@ __metadata:
  linkType: hard

 "resolve@npm:^1.20.0":
-  version: 1.22.3
-  resolution: "resolve@npm:1.22.3"
+  version: 1.22.8
+  resolution: "resolve@npm:1.22.8"
  dependencies:
-    is-core-module: ^2.12.0
+    is-core-module: ^2.13.0
    path-parse: ^1.0.7
    supports-preserve-symlinks-flag: ^1.0.0
  bin:
    resolve: bin/resolve
-  checksum: fb834b81348428cb545ff1b828a72ea28feb5a97c026a1cf40aa1008352c72811ff4d4e71f2035273dc536dcfcae20c13604ba6283c612d70fa0b6e44519c374
+  checksum: f8a26958aa572c9b064562750b52131a37c29d072478ea32e129063e2da7f83e31f7f11e7087a18225a8561cfe8d2f0df9dbea7c9d331a897571c0a2527dbb4c
  languageName: node
  linkType: hard

 "resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>":
-  version: 1.22.3
-  resolution: "resolve@patch:resolve@npm%3A1.22.3#~builtin<compat/resolve>::version=1.22.3&hash=07638b"
+  version: 1.22.8
+  resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=07638b"
  dependencies:
-    is-core-module: ^2.12.0
+    is-core-module: ^2.13.0
    path-parse: ^1.0.7
    supports-preserve-symlinks-flag: ^1.0.0
  bin:
    resolve: bin/resolve
-  checksum: ad59734723b596d0891321c951592ed9015a77ce84907f89c9d9307dd0c06e11a67906a3e628c4cae143d3e44898603478af0ddeb2bba3f229a9373efe342665
+  checksum: 5479b7d431cacd5185f8db64bfcb7286ae5e31eb299f4c4f404ad8aa6098b77599563ac4257cb2c37a42f59dfc06a1bec2bcf283bb448f319e37f0feb9a09847
  languageName: node
  linkType: hard

@ -1454,23 +1464,23 @@ __metadata:
  languageName: node
  linkType: hard

-"semver@npm:^7.3.4, semver@npm:^7.3.8":
-  version: 7.5.1
-  resolution: "semver@npm:7.5.1"
+"semver@npm:^7.3.4, semver@npm:^7.5.4":
+  version: 7.6.0
+  resolution: "semver@npm:7.6.0"
  dependencies:
    lru-cache: ^6.0.0
  bin:
    semver: bin/semver.js
-  checksum: d16dbedad53c65b086f79524b9ef766bf38670b2395bdad5c957f824dcc566b624988013564f4812bcace3f9d405355c3635e2007396a39d1bffc71cfec4a2fc
+  checksum: 7427f05b70786c696640edc29fdd4bc33b2acf3bbe1740b955029044f80575fc664e1a512e4113c3af21e767154a94b4aa214bf6cd6e42a1f6dba5914e0b208c
  languageName: node
  linkType: hard

 "serialize-javascript@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "serialize-javascript@npm:6.0.1"
+  version: 6.0.2
+  resolution: "serialize-javascript@npm:6.0.2"
  dependencies:
    randombytes: ^2.1.0
-  checksum: 3c4f4cb61d0893b988415bdb67243637333f3f574e9e9cc9a006a2ced0b390b0b3b44aef8d51c951272a9002ec50885eefdc0298891bc27eb2fe7510ea87dc4f
+  checksum: c4839c6206c1d143c0f80763997a361310305751171dd95e4b57efee69b8f6edd8960a0b7fbfc45042aadff98b206d55428aee0dc276efe54f100899c7fa8ab7
  languageName: node
  linkType: hard

@ -1523,12 +1533,19 @@ __metadata:
  languageName: node
  linkType: hard

+"source-map@npm:^0.7.4":
+  version: 0.7.4
+  resolution: "source-map@npm:0.7.4"
+  checksum: 01cc5a74b1f0e1d626a58d36ad6898ea820567e87f18dfc9d24a9843a351aaa2ec09b87422589906d6ff1deed29693e176194dc88bcae7c9a852dc74b311dbf5
+  languageName: node
+  linkType: hard
+
 "style-loader@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "style-loader@npm:3.3.3"
+  version: 3.3.4
+  resolution: "style-loader@npm:3.3.4"
  peerDependencies:
    webpack: ^5.0.0
-  checksum: f59c953f56f6a935bd6a1dfa409f1128fed2b66b48ce4a7a75b85862a7156e5e90ab163878962762f528ec4d510903d828da645e143fbffd26f055dc1c094078
+  checksum: caac3f2fe2c3c89e49b7a2a9329e1cfa515ecf5f36b9c4885f9b218019fda207a9029939b2c35821dec177a264a007e7c391ccdd3ff7401881ce6287b9c8f38b
  languageName: node
  linkType: hard

@ -1564,15 +1581,15 @@ __metadata:
  languageName: node
  linkType: hard

-"terser-webpack-plugin@npm:^5.3.7":
-  version: 5.3.9
-  resolution: "terser-webpack-plugin@npm:5.3.9"
+"terser-webpack-plugin@npm:^5.3.10":
+  version: 5.3.10
+  resolution: "terser-webpack-plugin@npm:5.3.10"
  dependencies:
-    "@jridgewell/trace-mapping": ^0.3.17
+    "@jridgewell/trace-mapping": ^0.3.20
    jest-worker: ^27.4.5
    schema-utils: ^3.1.1
    serialize-javascript: ^6.0.1
-    terser: ^5.16.8
+    terser: ^5.26.0
  peerDependencies:
    webpack: ^5.1.0
  peerDependenciesMeta:
@ -1582,13 +1599,13 @@ __metadata:
      optional: true
    uglify-js:
      optional: true
-  checksum: 41705713d6f9cb83287936b21e27c658891c78c4392159f5148b5623f0e8c48559869779619b058382a4c9758e7820ea034695e57dc7c474b4962b79f553bc5f
+  checksum: bd6e7596cf815f3353e2a53e79cbdec959a1b0276f5e5d4e63e9d7c3c5bb5306df567729da287d1c7b39d79093e56863c569c42c6c24cc34c76aa313bd2cbcea
  languageName: node
  linkType: hard

-"terser@npm:^5.16.8":
-  version: 5.18.0
-  resolution: "terser@npm:5.18.0"
+"terser@npm:^5.26.0":
+  version: 5.27.0
+  resolution: "terser@npm:5.27.0"
  dependencies:
    "@jridgewell/source-map": ^0.3.3
    acorn: ^8.8.2
@ -1596,7 +1613,7 @@ __metadata:
    source-map-support: ~0.5.20
  bin:
    terser: bin/terser
-  checksum: d01eb9805a978b3338b68fd2d9e35c1cd4cad78ea093dc92c7b3c38965232f0af0f95e0c6d90920ecf600a74135c608aebae26302c036c01393a590e1918bb90
+  checksum: c165052cfea061e8512e9b9ba42a098c2ff6382886ae122b040fd5b6153443070cc2dcb4862269f1669c09c716763e856125a355ff984aa72be525d6fffd8729
  languageName: node
  linkType: hard

@ -1610,43 +1627,51 @@ __metadata:
  linkType: hard

 "ts-loader@npm:^9.4.3":
-  version: 9.4.3
-  resolution: "ts-loader@npm:9.4.3"
+  version: 9.5.1
+  resolution: "ts-loader@npm:9.5.1"
  dependencies:
    chalk: ^4.1.0
    enhanced-resolve: ^5.0.0
    micromatch: ^4.0.0
    semver: ^7.3.4
+    source-map: ^0.7.4
  peerDependencies:
    typescript: "*"
    webpack: ^5.0.0
-  checksum: 139ed53bc60717d0ca231cdffbdef7566b9feda11c72fecc697983113f1266ccca2e1cdf191f841a43afa6b87d6afe57a0caf4feecf02f30845aa7ac6f2411a4
+  checksum: 7cf396e656d905388ea2a9b5e82f16d3c955fda8d3df2fbf219f4bee16ff50a3c995c44ae3e584634e9443f056cec70bb3151add3917ffb4588ecd7394bac0ec
  languageName: node
  linkType: hard

 "typescript@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "typescript@npm:5.1.3"
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: d9d51862d98efa46534f2800a1071a613751b1585dc78884807d0c179bcd93d6e9d4012a508e276742f5f33c480adefc52ffcafaf9e0e00ab641a14cde9a31c7
+  checksum: 2007ccb6e51bbbf6fde0a78099efe04dc1c3dfbdff04ca3b6a8bc717991862b39fd6126c0c3ebf2d2d98ac5e960bcaa873826bb2bb241f14277034148f41f6a2
  languageName: node
  linkType: hard

 "typescript@patch:typescript@^5.1.3#~builtin<compat/typescript>":
-  version: 5.1.3
-  resolution: "typescript@patch:typescript@npm%3A5.1.3#~builtin<compat/typescript>::version=5.1.3&hash=7ad353"
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin<compat/typescript>::version=5.3.3&hash=7ad353"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: 32a25b2e128a4616f999d4ee502aabb1525d5647bc8955e6edf05d7fbc53af8aa98252e2f6ba80bcedfc0260c982b885f3c09cfac8bb65d2924f3133ad1e1e62
+  checksum: f61375590b3162599f0f0d5b8737877ac0a7bc52761dbb585d67e7b8753a3a4c42d9a554c4cc929f591ffcf3a2b0602f65ae3ce74714fd5652623a816862b610
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 3192ef6f3fd5df652f2dc1cd782b49d6ff14dc98e5dced492aa8a8c65425227da5da6aafe22523c67f035a272c599bb89cfe803c1db6311e44bed3042fc25487
  languageName: node
  linkType: hard

-"update-browserslist-db@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "update-browserslist-db@npm:1.0.11"
+"update-browserslist-db@npm:^1.0.13":
+  version: 1.0.13
+  resolution: "update-browserslist-db@npm:1.0.13"
  dependencies:
    escalade: ^3.1.1
    picocolors: ^1.0.0
@ -1654,7 +1679,7 @@ __metadata:
    browserslist: ">= 4.21.0"
  bin:
    update-browserslist-db: cli.js
-  checksum: b98327518f9a345c7cad5437afae4d2ae7d865f9779554baf2a200fdf4bac4969076b679b1115434bd6557376bdd37ca7583d0f9b8f8e302d7d4cc1e91b5f231
+  checksum: 1e47d80182ab6e4ad35396ad8b61008ae2a1330221175d0abd37689658bdb61af9b705bfc41057fd16682474d79944fb2d86767c5ed5ae34b6276b9bed353322
  languageName: node
  linkType: hard

@ -1717,12 +1742,13 @@ __metadata:
  linkType: hard

 "webpack-merge@npm:^5.7.3":
-  version: 5.9.0
-  resolution: "webpack-merge@npm:5.9.0"
+  version: 5.10.0
+  resolution: "webpack-merge@npm:5.10.0"
  dependencies:
    clone-deep: ^4.0.1
+    flat: ^5.0.2
    wildcard: ^2.0.0
-  checksum: 64fe2c23aacc5f19684452a0e84ec02c46b990423aee6fcc5c18d7d471155bd14e9a6adb02bd3656eb3e0ac2532c8e97d69412ad14c97eeafe32fa6d10050872
+  checksum: 1fe8bf5309add7298e1ac72fb3f2090e1dfa80c48c7e79fa48aa60b5961332c7d0d61efa8851acb805e6b91a4584537a347bc106e05e9aec87fa4f7088c62f2f
  languageName: node
  linkType: hard

@ -1734,17 +1760,17 @@ __metadata:
  linkType: hard

 "webpack@npm:^5.87.0":
-  version: 5.87.0
-  resolution: "webpack@npm:5.87.0"
+  version: 5.90.1
+  resolution: "webpack@npm:5.90.1"
  dependencies:
    "@types/eslint-scope": ^3.7.3
-    "@types/estree": ^1.0.0
+    "@types/estree": ^1.0.5
    "@webassemblyjs/ast": ^1.11.5
    "@webassemblyjs/wasm-edit": ^1.11.5
    "@webassemblyjs/wasm-parser": ^1.11.5
    acorn: ^8.7.1
    acorn-import-assertions: ^1.9.0
-    browserslist: ^4.14.5
+    browserslist: ^4.21.10
    chrome-trace-event: ^1.0.2
    enhanced-resolve: ^5.15.0
    es-module-lexer: ^1.2.1
@ -1758,7 +1784,7 @@ __metadata:
    neo-async: ^2.6.2
    schema-utils: ^3.2.0
    tapable: ^2.1.1
-    terser-webpack-plugin: ^5.3.7
+    terser-webpack-plugin: ^5.3.10
    watchpack: ^2.4.0
    webpack-sources: ^3.2.3
  peerDependenciesMeta:
@ -1766,7 +1792,7 @@ __metadata:
      optional: true
  bin:
    webpack: bin/webpack.js
-  checksum: b7d0e390f9d30627e303d54b17cb87b62f49ecffe2d35481f830679904993bae208e23748ffe0e6091b6dd4810562b2f2e88bb0f23b96515d74fb1e3c2898210
+  checksum: a7be844d5720a0c6282fec012e6fa34b1137dff953c5d48bf2ef066a6c27c1dbc92a9b9effc05ee61c9fe269499266db9782073f2d82a589d3c5c966ffc56584
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
rozetko	18a88e422c	0.8.1	2 months ago
rozetko	3b837a94a5	Merge pull request 'Fix bar width calculation' (#7 ) from fix-bar-width-calculation into main Reviewed-on: #7	2 months ago
rozetko	0302ed6c62	hotfix	2 months ago
rozetko	1b4a894460	revert	2 months ago
rozetko	71a0bc4e3b	fix bar width calculation	2 months ago
rozetko	509adf0543	0.8.0	10 months ago
rozetko	e2b41ac100	upd package json	10 months ago
rozetko	4a3ce4f26d	revert to 0.6.6	10 months ago