Browse Source

fix hidden crosshait after zoom out

merge-requests/16/head
vargburz 3 years ago
parent
commit
562183a2c8
  1. 2
      dist/index.js
  2. 2
      package.json
  3. 9
      src/index.ts

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "@chartwerk/line-pod", "name": "@chartwerk/line-pod",
"version": "0.4.6", "version": "0.4.7",
"description": "Chartwerk line chart", "description": "Chartwerk line chart",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {

9
src/index.ts

@ -176,6 +176,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
updateCrosshair(): void { updateCrosshair(): void {
this.crosshair.selectAll('circle').remove();
// Core doesn't know anything about crosshair circles, It is only for line pod // Core doesn't know anything about crosshair circles, It is only for line pod
this.appendCrosshairCircles(); this.appendCrosshairCircles();
} }
@ -188,9 +189,12 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
appendCrosshairCircle(serieIdx: number): void { appendCrosshairCircle(serieIdx: number): void {
// TODO: cx, cy - hacks to hide circles after zoom out(can be replaced with display: none)
this.crosshair.append('circle') this.crosshair.append('circle')
.attr('class', `crosshair-circle-${serieIdx} crosshair-background`) .attr('class', `crosshair-circle-${serieIdx} crosshair-background`)
.attr('r', CROSSHAIR_BACKGROUND_RAIDUS) .attr('r', CROSSHAIR_BACKGROUND_RAIDUS)
.attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.getSerieColor(serieIdx)) .attr('fill', this.getSerieColor(serieIdx))
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY) .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
@ -198,6 +202,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.crosshair this.crosshair
.append('circle') .append('circle')
.attr('cx', -CROSSHAIR_CIRCLE_RADIUS)
.attr('cy', -CROSSHAIR_CIRCLE_RADIUS)
.attr('class', `crosshair-circle-${serieIdx}`) .attr('class', `crosshair-circle-${serieIdx}`)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.getSerieColor(serieIdx)) .attr('fill', this.getSerieColor(serieIdx))
@ -469,7 +475,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.renderMetrics(); this.renderMetrics();
this.renderXAxis(); this.renderXAxis();
this.renderYAxis(); this.renderYAxis();
this.renderGrid() this.renderGrid();
this.onMouseOver();
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) { if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) {
let xAxisMiddleValue: number = this.xScale.invert(this.width / 2); let xAxisMiddleValue: number = this.xScale.invert(this.width / 2);

Loading…
Cancel
Save