get y scale only once

demo.html

@@ -13,7 +13,7 @@
       var pod = new ChartwerkBarPod(
         document.getElementById('chart'),
         [
-          { target: 'test11', datapoints: [[100, 15], [110, 20], [300, 10]], matchedKey: 'm-1', color: 'red' },
+          { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red' },
           { 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' },
@@ -29,7 +29,29 @@
           maxBarWidth: 20
         }
       );
+      console.time('render');
       pod.render();
+      console.timeEnd('render');
+
+      function getData() {
+        return [
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+          [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
+        ];
+      }
     </script>
   </body>
 </html>

dist/index.d.ts

@@ -3,8 +3,10 @@ import { BarTimeSerie, BarOptions, RowValues } from './types';
 import * as d3 from 'd3';
 export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     metricsContainer: any;
+    barYScale: null | d3.ScaleLinear<number, number>;
     constructor(el: HTMLElement, _series?: BarTimeSerie[], _options?: BarOptions);
     protected renderMetrics(): void;
+    setBarPodScales(): void;
     renderSerie(data: any): void;
     getBarOpacity(rowValues: RowValues): number;
     mergeMacthedSeriesAndSort(matchedSeries: any[]): any;
@@ -27,8 +29,8 @@ export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptio
     getBarHeight(value: number): number;
     getBarPositionX(key: number, idx: number): number;
     getBarPositionY(val: number, idx: number, values: number[]): number;
-    get yScale(): d3.ScaleLinear<number, number>;
+    getYScale(): d3.ScaleLinear<number, number>;
-    get maxValue(): number | undefined;
+    getYMaxValue(): number | undefined;
 }
 export declare const VueChartwerkBarChartObject: {
     render(createElement: any): any;

src/index.ts

@@ -14,6 +14,7 @@ const DEFAULT_BAR_OPTIONS: BarOptions = {
 
 export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
   metricsContainer: any;
+  barYScale: null | d3.ScaleLinear<number, number> = null;
 
   constructor(el: HTMLElement, _series: BarTimeSerie[] = [], _options: BarOptions = {}) {
     super(d3, el, _series, _options);
@@ -25,6 +26,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
       this.renderNoDataPointsMessage();
       return;
     }
+  
+    this.setBarPodScales();
 
     // container for clip path
     const clipContatiner = this.chartContainer
@@ -48,6 +51,12 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     this.renderSerie(concatedSeries);
   }
 
+  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.metricsContainer.selectAll(`.rects-container`)
       .data(data)
@@ -274,7 +283,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
   getBarHeight(value: number): number {
     // TODO: Property 'sign' does not exist on type 'Math'
     // @ts-ignore
-    const height = Math.sign(value) * (this.yScale(0) - this.yScale(value));
+    const height = Math.sign(value) * (this.barYScale(0) - this.barYScale(value));
     return height;
   }
 
@@ -287,7 +296,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
   }
 
   getBarPositionY(val: number, idx: number, values: number[]): number {
-    let yPosition: number = this.yScale(Math.max(val, 0));
+    let yPosition: number = this.barYScale(Math.max(val, 0));
     if(this.options.stacked === true) {
       const previousBarsHeight = _.sum(
         _.map(_.range(idx), i => this.getBarHeight(values[i]))
@@ -297,7 +306,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     return yPosition;
   }
 
-  get yScale(): d3.ScaleLinear<number, number> {
+  getYScale(): d3.ScaleLinear<number, number> {
     if(
       this.state.getMinValueY() === undefined ||
       this.state.getMaxValueY() === undefined
@@ -306,12 +315,13 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
         .domain([1, 0])
         .range([0, this.height]);
     }
+    const yMaxValue = this.getYMaxValue();
     return this.d3.scaleLinear()
-      .domain([this.maxValue, Math.min(this.state.getMinValueY(), 0)])
+      .domain([yMaxValue, Math.min(this.state.getMinValueY(), 0)])
       .range([0, this.height]);
   }
 
-  get maxValue(): number | undefined {
+  getYMaxValue(): number | undefined {
     if(this.series === undefined || this.series.length === 0 || this.series[0].datapoints.length === 0) {
       return undefined;
     }