feat(treemap): Extend tree map API. #1089

Akiyamka · 2019-01-18T08:34:56Z

Motivation: For creating complex tree map example we need more control over rendering.
Adding these props allows you to create, for example, nested treemaps.


        feat(treemap): Extend tree map API.

- getChildren - getContent


        update docs with new api

CLAassistant · 2019-01-18T08:35:03Z

All committers have signed the CLA.


        tree map example

mcnuttandrew · 2019-01-18T16:06:52Z

Hey @Akiyamka,
This is great work so far! Mind adding some tests and an example to the showcase to document (in code) how these feature work?


        neste example with bread crumbs


        update docs


        not try call getContent if not specified


        add semicolon


        add showcase


        fix navigation

Akiyamka · 2019-01-24T08:14:52Z

@mcnuttandrew done, I added example in showcase and few more options for visual styling.


        Clean up


        ignore es-lint warning.

Reason - in that case it's ok.

mcnuttandrew

This continues to be good work! Thanks!!!
I have a few notes:

It doesn't look like you use the simply.json dataset you included. You should either use it in your example or delete it, whichever
I like the showcase example, would you mind adding some tests against it? See the treemap-tests file for examples

src/styles/treemap.scss

docs/treemap.md

showcase/treemap/tree-tools.js

showcase/treemap/zoomable-treemap.js

showcase/treemap/tree-tools.js

showcase/treemap/zoomable-treemap.js

mcnuttandrew · 2019-01-24T14:43:52Z

showcase/treemap/zoomable-treemap.js

+          padding={gap}
+          margin={0}
+          getColor={colorFromValue}
+          renderMode='DOM'


Do your changes work in SVG and DOM mode?

Yes, changes work in svg mode, but because onLeafClick not trigger in svg mode, navigation looks broken.

mcnuttandrew

(see prev review)

src/treemap/index.js

docs/treemap.md

src/treemap/index.js

showcase/treemap/zoomable-treemap.js


        revert global styles, move style override to showcase example


        add more comments for tree-tools


        update year in copyright


        Update docs/treemap.md

Co-Authored-By: Akiyamka <Akiyamka@gmail.com>


        Update docs/treemap.md

Co-Authored-By: Akiyamka <Akiyamka@gmail.com>


        Update docs/treemap.md

Co-Authored-By: Akiyamka <Akiyamka@gmail.com>


        Update docs/treemap.md

Co-Authored-By: Akiyamka <Akiyamka@gmail.com>

showcase/treemap/tree-tools.js

showcase/treemap/zoomable-treemap.js


        correcting a typo

showcase/treemap/zoomable-treemap.js


        better naming for constant


        better naming of variables


        fix typo in comments


        fix typo in names


        fix typo in doc

Akiyamka · 2019-01-30T09:55:18Z

@mcnuttandrew, please check changes, is everything OK or is there anything else to change?

mcnuttandrew · 2019-01-30T21:00:26Z

Hey @Akiyamka would you mind taking a look at both of my comments from the previous review (remove unused file and add tests)

mcnuttandrew · 2019-01-30T21:13:00Z

I tried downloading your branch to play around with your example and there are few bugs

Clicking on leaf nodes causes an error which causes the whole component to crash
It appears to crash on SVG mode

Also a few comments

I think it is not a good approach to include dangerouslySetInnerHTML, instead add a class to that component (zoomable-treemap or something) and add those styles examples.scss targeting only that component.
i turned on animation, it's pretty fun for your example

showcase/treemap/tree-tools.js


        remove creditals


        remove unused dataset


        remove dangerouslySetInnerHTML block from example and move styles to …

…examples.scss


        fix crush after click on leaf

Akiyamka · 2019-01-31T09:20:53Z

@mcnuttandrew, thanks for the review!
I fixed crash in svg mode, but unfortunately I can't make it work the same way as in dom mode, because the component has different APIs in these modes. For example, clicking on a sheet does not return the sheet in svg mode. I think I need another pull request to fix this.


        fix crush in svg mode

id0Sch · 2020-01-07T15:04:41Z

is this going to be merged soon? i'd love to use it :)

Akiyamka added 2 commits Jan 17, 2019

feat(treemap): Extend tree map API.

c8795da

- getChildren - getContent

update docs with new api

Loading status checks…

1e54109

tree map example

a68f4fc

Akiyamka added 6 commits Jan 22, 2019

neste example with bread crumbs

240fcd6

update docs

0bab3ed

not try call getContent if not specified

55b24c6

add semicolon

3bfc7ee

add showcase

4f6d864

fix navigation

Loading status checks…

be4609e

Akiyamka added 2 commits Jan 24, 2019

Clean up

Loading status checks…

cb4488f

ignore es-lint warning.

Loading status checks…

16dffbe

Reason - in that case it's ok.

mcnuttandrew reviewed Jan 24, 2019

View changes

mcnuttandrew requested changes Jan 24, 2019

View changes