Merge branch 'use-matric-container-from-core' into 'main'

use metric container from core

Closes #14

See merge request chartwerk/line-pod!12

dist/index.d.ts

@@ -2,9 +2,9 @@ import { ChartwerkPod, TickOrientation, TimeFormat } from '@chartwerk/core';
 import { LineTimeSerie, LineOptions, Mode } from './types';
 export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     lineGenerator: any;
-    metricContainer: any;
     constructor(_el: HTMLElement, _series?: LineTimeSerie[], _options?: LineOptions);
     renderMetrics(): void;
+    clearAllMetrics(): void;
     initLineGenerator(): void;
     appendData(data: [number, number][]): void;
     _renderDots(datapoints: number[][], serieIdx: number): void;

examples/demo.html

@@ -16,7 +16,7 @@
       const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
       const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
       const zoomIn = (ranges) => { pod.render(); }
-      const zoomOut = (ranges) => { console.log('zoomout'); options.axis.x.range = undefined; pod.updateData(undefined, options) }
+      const zoomOut = (ranges) => { pod.state.xValueRange = [startTime, startTime + arrayLength * 10000]; pod.render(); }
       let options = {
         renderLegend: false, usePanning: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },
         eventsCallbacks: { zoomIn: zoomIn, zoomOut }

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@chartwerk/core": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.0.tgz",
-      "integrity": "sha512-Dnw/akMqBvWEQDlzcendAzHsqzLE+jcWVU7fYnsXLFKCZT+JJL2cMpBv/aZ24/pw7WZQg2ORdLgAfLc3Ph9kuA=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-7uTNeV2+ln2WFQQpbJaYR8o0DmCoLhiMjQagLH8VsETVVCxI7YmgxYVVhx6OGE25miJHXwhRlplopDs6dWF5KQ=="
     },
     "@types/d3": {
       "version": "5.16.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Chartwerk line chart",
   "main": "dist/index.js",
   "scripts": {
@@ -15,7 +15,7 @@
   "author": "CorpGlory",
   "license": "ISC",
   "dependencies": {
-    "@chartwerk/core": "^0.3.0"
+    "@chartwerk/core": "^0.3.1"
   },
   "devDependencies": {
     "@types/d3": "5.16.4",

src/index.ts

@@ -11,14 +11,13 @@ const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
 
 export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   lineGenerator = null;
-  metricContainer = null;
 
   constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
     super(d3, _el, _series, _options);
   }
 
   renderMetrics(): void {
-    this.d3.select('.metrics-container').remove();
+    this.clearAllMetrics();
 
     this.updateCrosshair();
     this.initLineGenerator();
@@ -29,18 +28,6 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       return;
     }
 
-    // TODO: move to core, and create only one container
-    // container for clip path
-    const clipContatiner = this.chartContainer
-      .append('g')
-      .attr('clip-path', `url(#${this.rectClipId})`)
-      .attr('class', 'metrics-container');
-
-    // container for panning
-    this.metricContainer = clipContatiner
-      .append('g')
-      .attr('class', 'metrics-rect')
-
     for(let idx = 0; idx < this.series.length; ++idx) {
       if(this.series[idx].visible === false) {
         continue;
@@ -67,6 +54,11 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     }
   }
 
+  clearAllMetrics(): void {
+    // TODO: temporary hack before it will be implemented in core.
+    this.d3.selectAll('.metric-el').remove();
+  }
+
   initLineGenerator(): void {
     this.lineGenerator = this.d3.line()
       .x(d => this.xScale(d[0]))