saeidzebardast / nvd3-elements Goto Github PK

Chart elements cannot be styled by CSS

When a non-polymer lib (e.g. d3) makes DOM changes it is necessary to call scopeSubtree to update the classes. This is documented at https://www.polymer-project.org/1.0/docs/devguide/styling#scope-subtree

We do call scopeSubtree at https://github.com/saeidzebardast/nvd3-elements/blob/master/nvd3-behavior.html#L317 however this is insufficient because the local DOM continues to change after ready, e.g. when data arrives or changes. something is triggering D3 to unconditionally overwrite the class attribute on certain SVG elements immediately after the mutationObserver finishes setting them all, undoing some of it's work.

In this screenshot note the <rect> and the enclosing <g> are missing the style-scope nvd3-discrete-bar style-scope classes; without these classes it's IMPOSSIBLE to style them with CSS in Polymer. Add those classes manually and suddenly style sheets work as expected.

The fix is to call this.scopeSubtree(this.$.svg, true); whenever nvd3/d3 adds DOM elements. (scopeSubtree sets up a mutationObserver that is supposed to keep the classes up to date with subsequent mutations.)

The polymer documentation states:

shadow. Local DOM is rendered using shadow DOM where supported (this will be the default in the future).

Setting the dom global variable to shadow breaks all the css styles and rules.
window.Polymer = {dom: 'shadow'};

Hi,

Since Polymer 1.7, some of the styles defined in nvd3-shared-styles do
not apply anymore.

To reproduce, run bower update in the nvd3-elements repo,
then polyserve and go to
http://localhost:8080/components/nvd3-elements/demo/nvd3-line.html

The rule that do not apply and that makes the demo look weird is :

Line 289
      :root svg.nvd3-svg {
        ...
        width: 100%;
        height: 100%;
      }

I think this rule do not apply because nvd3-shared-styles is used in a
document level custom-style in nvd3-behavior.html :

<style is="custom-style" include="nvd3-shared-styles"></style>

From the doc https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style :

Document styles defined in a custom-style are shimmed to ensure
they do not leak into local DOM when running on browsers without
native Shadow DOM.

The svg element is in the local DOM, so it seems normal that the rule
does not apply (even though it was working before 1.7).

Other css rules seem to work, because they apply on elements added
to the DOM by nvd3, so not under the control of Polymer shady DOM polyfill
(none of these elements have the style-scope class), but this is not something
we should rely on.

Also, using document level styles rules is probably the cause of issue #11,
because styles really do not leak into the local DOM from above under shadow DOM.

I think using scoped styles is the path to solve this issue.

I wrote a PR to achieve this and everything seems to work with shady
and shadow DOM. Basically, I've included nvd3-shared-styles in every element
local DOM style, and rewritten the CSS rules to target the local DOM.

One problem though is the styling of the tooltip.
nvd3 adds the tooltip div at the end of the body, so it still need document
level styling.

I've tried to make clear my findings, but I'm still confused with
all these DOM (shadow/shady/local/light) things. So don't hesitate to correct me
if I wrote something wrong.

Currently these elements use https://github.com/novus/nvd3 which uses D3v3.
Should switch to https://github.com/nvd3/nvd3 which uses D3v4.

Although this is also old since D3v5 is out..

This is really great work!
I am very interested in testing your components. Unfortunately my project uses Polymer 2. Do you know whether the components work in Polymer 2 in hybrid mode?

Migrate library to Polymer 3.0? The library is great but will not work in conjunction with Polymer 3.0 web components.

First of all, great work.... the nvd-elements are handy and sweet..

But some events from the charts outside of the component would be nice...

Szenario: onMouseover a dataPoint I need to draw this data into a map, but I didn't know how to listen on these Events...

Hi!

I would like to propose that we combine our development efforts with nvd3 Polymer elements!

We've published an nvd3-pie element at https://github.com/Neovici/nvd3-pie with a different feature set but the same general goal.

The things we would want to get into your behavior or specific elements would be:

• Possibility to (multi) select graph slices/parts (with bound selected or similar and/or events)
• Configurable x/y label/value properties (to avoid re-mapping input data)
• Support title
• Support tooltips
• Support growOnHover

Also I would probably consider using iron-resize and refresh() method instead of nv.utils.windowResize() helper to also react on resize-events within the page and not only the window.

If you think these are features/changes you'd welcome into your repository we can fork your repo and start working on PRs for this.
Any feature you'd want to implement yourself of these?
They are available (although they can be made more elegant) in our element right now if you want to have a look.

Thanks and hope we can work together on this!

When using an nvd3-pie or nvd3-donut element within an iron-collapse element, the chart element receive iron-resize events when we mouse hover the chart.

This is because iron-collapse fires iron-resize events when it receives transitionend events.

Donut and pie charts use css transitions to change the opacity of the chart slices, causing a transitionend event to bubble up to iron-collapse.

This is not a nvd3-elements issue, but maybe nvd3-elements could provide a workaround to avoid this (by stopping transitionend events propagation).

I will submit a PR, let me know if you think it's relevant.

I can't use date for labels, it is necessary a tickFormat property to format this type of datas

Currently the element only supports numbers as the only x axis value. It would be sweet if this element supports labels in the x axis as this stackoverflow answer points out.