Treemap

[curran]

Let's add a Treemap component!

This is a good reference for feature set: https://echarts.apache.org/examples/en/index.html#chart-type-treemap

[curran]

Scaffolded by @rokotyan in

• Component | Treemap: New component ExaForce/unovis#2

As I start working on this, I'm wondering how we want to support hierarchies. I see there's already some precedent for hierarchies with the VisNestedDonut component, which expects the layers prop to be defined something like this:

from packages/dev/src/examples/misc/nested-donut/basic-nested-donut/index.tsx

        layers={[
          (d: NestedDatum) => d.group,
          (d: NestedDatum) => d.subgroup,
          (d: NestedDatum) => d.value,
        ]}

I suppose we would want to define a similar API for the Treemap, to match the style of the existing Unovis component.

[curran]

Working through how to manage the exports

[curran]

Interestingly, the import does actually resolve at Runtime, but the TypeScript linting system can't seem to resolve it.

[rokotyan]

@curran The dev app imports @unovis/ts from its build, not from the sources. So you might see typings issues there until you build @unovis/ts.

[curran]

Thanks for having a look! After I run npm run build:ts, the error still shows for the import from '@unovis/react'.

I have a feeling it might be related to the Webpack alias in

packages/dev/webpack.config.js

line 78

'@unovis/react': path.resolve(__dirname, '../react/src/'),

This resolves it in the build, but I don't see any similar alias setup within the TypeScript config in

packages/dev/tsconfig.json

When I follow the import link in VSCode, it resolves to a file in node_modules. I would guess that the import error would only go away once a new version of the '@unovis/react' package is actually published, or if an alias is added to the TypeScript config.

[rokotyan]

@curran have you tried building @unovis/react too? Forgot to mention it

[curran]

The error persists even after running npm run build:react.

I think the core issue is that VSCode/TypeScript is resolving the import to node_modules.

[curran]

An interesting question arises when we compare this to nested donut - do we want the ability to label intermediate nodes? Or do we want to just label the leaf nodes?

Most treemaps just label the leaf nodes, but I found this example that does:

It looks like doing that introduces some extra padding, which may disconnect the actual areas of the nodes from the data values (a tradeoff of visibility vs. accuracy).

What do you think?

[rokotyan]

@curran I think this will be valuable, but it should be an optional configuration.