Merge pull request 'New renderEnd callbacks' (#2) from new-part-render-end-callback into main

Reviewed-on: #2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/core",
-  "version": "0.6.14",
+  "version": "0.6.15",
   "description": "Chartwerk core",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/index.ts

@@ -23,6 +23,7 @@ import {
   ScrollPanDirection,
   AxisOption,
   AxesOptions,
+  RenderComponent,
 } from './types';
 import { uid } from './utils';
 import { palette } from './colors';
@@ -193,6 +194,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     this.metricContainer = clipContatiner
       .append('g')
       .attr('class', 'metrics-rect');
+      this.options.callbackComponentRenderEnd(RenderComponent.METRICS_CONTAINER);
   }
 
   protected createSvg(): void {
@@ -209,6 +211,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
 
   protected renderGrid(): void {
     this.grid.render();
+    this.options.callbackComponentRenderEnd(RenderComponent.GRID);
   }
 
   protected renderAxes(): void {
@@ -216,6 +219,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     this.renderXAxis();
     this.renderYAxis();
     this.renderY1Axis();
+    this.options.callbackComponentRenderEnd(RenderComponent.AXES);
   }
 
   protected renderXAxis(): void {
@@ -316,6 +320,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
         .attr('x2', this.width)
         .style('pointer-events', 'none');
     }
+    this.options.callbackComponentRenderEnd(RenderComponent.CROSSHAIR);
   }
 
   protected addEvents(): void {
@@ -363,6 +368,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
         .attr('cursor', 'crosshair')
         .attr('fill', 'none');
     }
+    this.options.callbackComponentRenderEnd(RenderComponent.OVERLAY);
   }
 
   protected initBrush(): void {
@@ -449,6 +455,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       .attr('height', this.height)
       .attr('x', 0)
       .attr('y', 0);
+    this.options.callbackComponentRenderEnd(RenderComponent.CLIP_PATH);
   }
 
   protected renderLegend(): void {
@@ -487,6 +494,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
         .text(series[idx].target)
         .on('click', () => this.options.callbackLegendLabelClick(idx));
     }
+    this.options.callbackComponentRenderEnd(RenderComponent.LEGEND);
   }
 
   protected renderYLabel(): void {
@@ -904,7 +912,7 @@ export {
   ChartwerkPod, VueChartwerkPodMixin,
   PodState, CoreSeries, CoreOptions, CORE_SERIE_DEFAULTS, CORE_DEFAULT_OPTIONS,
   Margin, Serie, Options, TimeFormat, BrushOrientation, PanOrientation,
-  AxesOptions, AxisOption,
+  AxesOptions, AxisOption, RenderComponent,
   AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent,
   palette
 };

src/models/options.ts

@@ -4,7 +4,7 @@ import {
   CrosshairOptions, CrosshairOrientation,
   ZoomEvents, MouseZoomEvent, MousePanEvent, DoubleClickEvent, ScrollZoomEvent, ScrollPanEvent,
   ScrollPanOrientation, ScrollPanDirection, PanOrientation, KeyEvent, BrushOrientation,
-  Margin, TimeFormat, AxisRange,
+  Margin, TimeFormat, AxisRange, RenderComponent,
 } from '../types';
 
 import lodashDefaultsDeep from 'lodash/defaultsDeep';
@@ -176,6 +176,12 @@ export class CoreOptions<O extends Options> {
     }
   }
 
+  callbackComponentRenderEnd(part: RenderComponent): void {
+    if(has(this._options.eventsCallbacks, 'componentRenderEnd')) {
+      this._options.eventsCallbacks.componentRenderEnd(part);
+    }
+  }
+
   callbackLegendClick(idx: number): void {
     if(has(this._options.eventsCallbacks, 'onLegendClick')) {
       this._options.eventsCallbacks.onLegendClick(idx);

src/types.ts

@@ -29,6 +29,7 @@ export type Options = {
     sharedCrosshairMove?: (event: any) => void,
     renderStart?: () => void,
     renderEnd?: () => void,
+    componentRenderEnd?: (part: RenderComponent) => void,
   };
   axis?: AxesOptions;
   grid?: GridOptions;
@@ -195,3 +196,13 @@ export type ScrollPanEvent = {
   orientation?: ScrollPanOrientation;
   direction?: ScrollPanDirection;
 }
+
+export enum RenderComponent {
+  CLIP_PATH = 'clipPath',
+  OVERLAY = 'overlay',
+  AXES = 'axes',
+  GRID = 'grid',
+  CROSSHAIR = 'crosshair',
+  METRICS_CONTAINER = 'metricsContainer',
+  LEGEND = 'legend',
+}