use npm core

demo.html

@@ -13,16 +13,16 @@
       var pod = new ChartwerkBarPod(
         document.getElementById('chart'),
         [
-          { target: 'test11', datapoints: [[15, 100], [20, 110], [10, 300]], matchedKey: 'm-1', color: 'red' },
-          { target: 'test12', datapoints: [[10, 100], [20, 200], [10, 300]], matchedKey: 'm-1', color: 'green' },
-          { target: 'test21', datapoints: [[10, 130], [26, 230], [15, 330]], matchedKey: 'm-2', color: 'yellow'},
-          { target: 'test22', datapoints: [[10, 130], [27, 230], [10, 330]], matchedKey: 'm-2', color: 'blue' },
+          { target: 'test11', datapoints: [[100, 15], [110, 20], [300, 10]], 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' },
         ],
         {
           usePanning: false,
           axis: {
             x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
-            y: { invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
+            y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
           },
           stacked: true,
           matching: true,

dist/index.d.ts

@@ -11,7 +11,10 @@ export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptio
     get seriesUniqKeys(): string[];
     get seriesForMatching(): BarTimeSerie[][];
     getZippedDataForRender(series: BarTimeSerie[]): RowValues[];
-    renderSharedCrosshair(timestamp: number): void;
+    renderSharedCrosshair(values: {
+        x?: number;
+        y?: number;
+    }): void;
     hideSharedCrosshair(): void;
     onMouseMove(): void;
     getSeriesPointFromMousePosition(eventX: number): any[] | undefined;
@@ -52,18 +55,27 @@ export declare const VueChartwerkBarChartObject: {
             options(): void;
         };
         mounted(): void;
+        destroyed(): void;
         methods: {
             render(): void;
+            renderSharedCrosshair(values: {
+                x?: number;
+                y?: number;
+            }): void;
+            hideSharedCrosshair(): void;
+            onPanningRescale(event: any): void;
             renderChart(): void;
             appendEvents(): void;
             zoomIn(range: any): void;
-            zoomOut(center: any): void;
+            zoomOut(centers: any): void;
             mouseMove(evt: any): void;
             mouseOut(): void;
             onLegendClick(idx: any): void;
             panningEnd(range: any): void;
             panning(range: any): void;
             contextMenu(evt: any): void;
+            sharedCrosshairMove(event: any): void;
+            renderEnd(): void;
         };
     }[];
     methods: {

package-lock.json

@@ -5,8 +5,9 @@
   "requires": true,
   "dependencies": {
     "@chartwerk/core": {
-      "version": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f",
-      "from": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f"
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
     },
     "@types/d3": {
       "version": "5.16.4",

package.json

@@ -15,7 +15,7 @@
   "author": "CorpGlory",
   "license": "Apache-2.0",
   "dependencies": {
-    "@chartwerk/core": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f"
+    "@chartwerk/core": "^0.3.4"
   },
   "devDependencies": {
     "@types/d3": "^5.7.2",

src/index.ts

@@ -123,8 +123,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     if(series.length === 0) {
       throw new Error('There is no visible series');
     }
-    const keysColumn = _.map(series[0].datapoints, row => row[1]);
-    const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[0]));
+    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);
@@ -135,10 +135,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     return data;
   }
 
-  public renderSharedCrosshair(timestamp: number): void {
+  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
     this.crosshair.style('display', null);
 
-    const x = this.xScale(timestamp);
+    const x = this.xScale(values.x);
     this.crosshair.select('#crosshair-line-x')
       .attr('x1', x)
       .attr('x2', x);
@@ -247,11 +247,11 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
 
   get barWidth(): number {
     // TODO: here we use first value + timeInterval as bar width. It is not a good idea
-    const xAxisStartValue = _.first(this.series[0].datapoints)[1];
+    const xAxisStartValue = _.first(this.series[0].datapoints)[0];
     let width = this.xScale(xAxisStartValue + this.timeInterval) / 2;
     if(this.options.barWidth !== undefined) {
       // barWidth now has axis-x dimension
-      width = this.xScale(this.minValueX + this.options.barWidth);
+      width = this.xScale(this.state.getMinValueX() + this.options.barWidth);
     }
     let rectColumns = this.visibleSeries.length;
     if(this.options.stacked === true) {
@@ -299,15 +299,15 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
 
   get yScale(): d3.ScaleLinear<number, number> {
     if(
-      this.minValue === undefined ||
-      this.maxValue === undefined
+      this.state.getMinValueY() === undefined ||
+      this.state.getMaxValueY() === undefined
     ) {
       return this.d3.scaleLinear()
         .domain([1, 0])
         .range([0, this.height]);
     }
     return this.d3.scaleLinear()
-      .domain([this.maxValue, Math.min(this.minValue, 0)])
+      .domain([this.maxValue, Math.min(this.state.getMinValueY(), 0)])
       .range([0, this.height]);
   }
 
@@ -322,20 +322,21 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
     if(this.options.stacked === true) {
       if(this.options.matching === true && this.seriesUniqKeys.length > 0) {
         const maxValues = this.seriesForMatching.map(series => {
-          const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[0]));
+          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.visibleSeries, serie => _.map(serie.datapoints, row => row[0]));
+        const valuesColumns = _.map(this.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
         const zippedValuesColumn = _.zip(...valuesColumns);
         maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row))); 
       }
     } else {
+      console.log('else')
       maxValue = _.max(
         this.visibleSeries.map(
-          serie => _.maxBy<number[]>(serie.datapoints, dp => dp[0])[0]
+          serie => _.maxBy<number[]>(serie.datapoints, dp => dp[1])[0]
         )
       );
     }
@@ -358,8 +359,10 @@ export const VueChartwerkBarChartObject = {
   mixins: [VueChartwerkPodMixin],
   methods: {
     render() {
+      console.time('bar-render');
       const pod = new ChartwerkBarPod(document.getElementById(this.id), this.series, this.options);
       pod.render();
+      console.timeEnd('bar-render');
     }
   }
 };