search

palantir / plottable

:bar_chart: A library of modular chart components built on D3
http://plottablejs.org/
MIT License
2.96k stars 224 forks source link

Custom drawing on top of charts no longer works after migrating to v3 #3382

Open zmandel opened 7 years ago

zmandel commented 7 years ago

Bug report

Live example URL: Working example (with plottable 2.9.0): https://zmandel.github.io/burndown2.9.0.html

Non-Working example (with plottable 3.1.1) https://zmandel.github.io/burndown3.1.1.html

Both use the same javascript file: https://zmandel.github.io/burndown.js

Context: This burndown is part of a "plus for trello" dashboard. The sample data is not very good, just to make the sample chart run. While the chart looks OK in both versions, it has interactions that draw on the chart. In particular:

Steps to repro: Please try first with the working example: https://zmandel.github.io/burndown2.9.0.html The repeat with the non-working one: https://zmandel.github.io/burndown3.1.1.html Some of this is based on the pre-3.0 samples from plottablejs.org (crosshair, etc)

  1. Click on any part of any line. The code will find the nearest point, and draw a dotted vertical line crossing that point.

  2. Draw a "projection" line following this little tutorial: http://www.plusfortrello.com/p/date-projections-in-burndowns.html, except that this sample data has no slope, dont worry, you dont have to base it on a slope. The steps of that tutorial are: (A) SHIFT (or CTRL) + Click on any point above zero, then (B) SHIFT + click on a 2nd point that is below and to the right of the first point. after (A) you should see the first point being drawn as a little circle, then after (B) a projection dotted line calculated and drawn until it reaches Y=0, and some text showing the date where the line crosses zero.

  3. Not included here for simplicity, but I also have code that adds tooptips using qtip, it worked before migrating to v3. I got another type of tooltip to work on another chart by setting a very high z-index to the DOM tooltip element, but that didnt help on this timeline chart. I can file a separate issue for this later, but im including here because is part of the customizations that dont show on top of the chart.

None on the 3.1.1 version, not sure if its not drawing, or drawing behind, or in the wrong x,y. I saw a note on migration notes about "g" being now "svg". My code uses "g" but not sure if its related.

zmandel commented 7 years ago

for reference, in burndown.js function createProjectionLine: https://github.com/zmandel/zmandel.github.io/blob/master/burndown.js#L359

function createCrosshair: https://github.com/zmandel/zmandel.github.io/blob/master/burndown.js#L466

hellochar commented 7 years ago

It looks like the "due: hello #14001" text exists in the 3.1 DOM, but it doesn't have an x, y, writing mode, font, etc. Can you help me debug why that's happening?

Click on any part of any line. The code will find the nearest point, and draw a dotted vertical line crossing that point.

Same issue - the line and circle don't have an x or y. They're there, they're just off the plot.

For tooltips I'd suggest using an HTML tooltip and adding it to the plot's element(), rather than using the .foreground().

zmandel commented 7 years ago

im not getting closer. the code is the same as in https://zmandel.github.io/burndown2.9.0.html and it does work well there. the x,y is added from the datasets, just like the line ones that do show.