diff --git a/src/index.ts b/src/index.ts index e1bc6d4..ac4eb65 100644 --- a/src/index.ts +++ b/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 { 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 { protected renderGrid(): void { this.grid.render(); + this.options.callbackComponentRenderEnd(RenderComponent.GRID); } protected renderAxes(): void { @@ -216,6 +219,7 @@ abstract class ChartwerkPod { this.renderXAxis(); this.renderYAxis(); this.renderY1Axis(); + this.options.callbackComponentRenderEnd(RenderComponent.AXES); } protected renderXAxis(): void { @@ -316,6 +320,7 @@ abstract class ChartwerkPod { .attr('x2', this.width) .style('pointer-events', 'none'); } + this.options.callbackComponentRenderEnd(RenderComponent.CROSSHAIR); } protected addEvents(): void { @@ -363,6 +368,7 @@ abstract class ChartwerkPod { .attr('cursor', 'crosshair') .attr('fill', 'none'); } + this.options.callbackComponentRenderEnd(RenderComponent.OVERLAY); } protected initBrush(): void { @@ -449,6 +455,7 @@ abstract class ChartwerkPod { .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 { .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 }; diff --git a/src/models/options.ts b/src/models/options.ts index 56ea4eb..1f414f3 100644 --- a/src/models/options.ts +++ b/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 { } } + 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); diff --git a/src/types.ts b/src/types.ts index ce17698..91d29e7 100644 --- a/src/types.ts +++ b/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', +} \ No newline at end of file