feat(network): add network graph

[j1mie]

This is an initial PR for the network graph component.

There is still outstanding work to complete for expansion, mini map etc. however in order to get the ball rolling and keep PR sizes reasonable, I can submit these as a series of PRs, if that's all good with you guys 🙌 (I've left a list out upcoming items at the bottom of the PR description)

Adds

• Network graph demo data, and demo to homepage
• @carbon/icons and @carbon/icon-helpers dependencies to support the rendering of icons in the network graph
• Network chart class at packages/core/src/charts/network.ts
• Index file for network component at packages/core/src/components/graphs/network/index.ts
• network-card sub component at packages/core/src/components/graphs/network/network-card.ts , a function that renders out the card component
• network-line sub component at packages/core/src/components/graphs/network/network-line.ts, a function that renders out lines components and their markers
• network component at packages/core/src/components/graphs/network/network.ts that calls both the network line and network card functions, and also calls d3 zoom function
• A path building utility using d3-path for correct spacing of lines between cards, at packages/core/src/components/graphs/network/utils/build-path-string.ts
• An icon path utility function for rendering icons at packages/core/src/components/graphs/network/utils/get-icon-string.ts
• Basic interfaces for Network and Zoomable charts
• SCSS styles for network, network-card, network-line at packages/core/src/styles/graphs/network/
• Zoomable chart class

Changed

• Formatting and check for type.options in packages/core/demo/index.ts
• Export network graph component at packages/core/src/components/index.ts
• Network chart and Zoomable chart configuration options at packages/core/src/configuration.ts
• Export the Network chart at packages/core/src/index.ts

Questions / Comments

• I'm unsure of the best approach to extend the Zoomable chart class and would appreciate guidance, feedback here?
• How can I remove the "Update data" button on the demo page, or what way would make sense to use this in the context of the network graph?
• Can I mark the network example on the demo page as "Experimental" or "WIP" and if so, what the best approach for doing this?
• The SCSS follows conventions from Carbon, and works fine with theming, is this acceptable in the context of this repo where theming may function differently?
• Sub components are defined as functions / functional d3 components. Is this acceptable in the context of this repo or would you prefer to go with a class-based approach?
• How do I test this component / add this component to React, Angular and Vue storybooks?

Todos / outstanding work

• Expandable cards styling, logic
• Dynamic x,y values based on rows and columns
• Mini map component to complement zooming functionality
• Document component, API
• Text truncation
• Pass custom components for cards / lines via render a prop pattern / function

Demo screenshot or recording

Network chart (white theme)

Network chart / focussed card (white theme)

Network chart (g10 theme)

Network chart (g90 theme)

Network chart (g100 theme)

Pan, drag, zoom behaviour

Review checklist (for reviewers only)

• Demos all features
• Documented/annotated
• Matches UI/UX specs
• Meets the code style guide
• Accessible
• Mobile first (responsive)
• RTL support (bidirectional text)
• Performant (limited bloat)

[theiliad]

@j1mie I think the core netlify deploy preview is still broken. Same error on Travis

[j1mie]

@theiliad gotcha. Not seeing the Travis error after merging with master.

[theiliad]

@theiliad gotcha. Not seeing the Travis error after merging with master.

Problem is I don't see your demo on the deploy preview now. Perhaps it's gone with the core demo site refactor?

[j1mie]

@theiliad Refactored based on recent updates

[j1mie]

@theiliad any updates on this

[theiliad]

Hi Jimmy, still trying to get design to take a look at this component 😞
I'll ask the team again to take look

[designertyler]

Hi @j1mie there are couple things that stand out from the specs I saw from @cameroncalder

The network card heading is a little high and starts to look top aligned with the icon. This should appear center aligned with the icon.

The network link line uses a different style arrowhead and bend. Was this a later design change?

The network link line's color is using the older version of gray-50 that was #8c8c8c and is now #8d8d8d. The specs were using the older gray-30 which is a bit lighter. Double checking that wasn't another design decision after the specs were made.

I like the shorter 24px that are between the nods in the preview link, but the specs have a taller 32px between. Maybe this was another design change that was done in code and the specs not updated.

I would recommend going the full 80px between the nodes. Right now it looks like it's 76px at the default zoom level.

There's a slight overlap of the arrowhead and the node.

[stanislavgeorgiev]

Is there an ETA on when would this work be completed? We could use this network chart in our project 👍

[keithcha]

Is there an ETA on when would this work be completed? We could use this network chart in our project 👍

Just bumping this for an update. It's been 9 months since this PR was opened.

[j1mie]

Hi there, unfortunately these changes did not make it upstream, I'm going to close this out for the time being and will post here again if the situation changes.

[theiliad]

Hi, based on the survey we ran 3 months ago, here's the current list of items based on priority

1. KPI
2. Histogram
3. Decision tree
4. Heatmap
5. Bullet chart
6. Treemap
7. Cross tab
8. Network diagram
9. Box and whisker
10. Alluvial
11. Waterfall

Network diagram is currently number 8 on the list

[keithcha]

Hi, based on the survey we ran 3 months ago, here's the current list of items based on priority

1. KPI
2. Histogram
3. Decision tree
4. Heatmap
5. Bullet chart
6. Treemap
7. Cross tab
8. Network diagram
9. Box and whisker
10. Alluvial
11. Waterfall

Network diagram is currently number 8 on the list

Thank you for the update!

[stanislavgeorgiev]

Is there an experimental branch where people can contribute half baked solutions and get help from other people?

[Gunasoundari]

Hi @j1mie, Any update on this PR?

[theiliad]

Closing in favor of #1022