[Enhancement]: Carbon Charts 2.0 next branch

nstuyvesant commented 1 year ago

Name

Nate Stuyvesant

Are you an IBM employee?

[ ] Yes

Contact Details

nstuyvesant@gmail.com

Summary

Created a next branch on https://github.com/nstuyvesant/carbon-charts/tree/next and submitted a PR https://github.com/carbon-design-system/carbon-charts/pull/1533.

Completed so far...

Node LTS (18.16.0) support
Angular 15.2.6 (partial Ivy so in theory, supports Angular 9+)
Vue.js 3.2.47
React 18.2.0
Svelte 3.58.0 / SvelteKit 1.15.7 (supports older versions of Svelte as component library is just sources)
Storybook 7.0.6 including migration from deprecated Knobs to Controls and standalone marked stories to MDX. Also removed some of the hacks no longer needed and enabled dark mode.
Lerna 6.6.1
Yarn 3.5.0 and use of workspace: prefix to eliminate need for symbolic links
Vite 4.2.2 builds for all packages except Angular
Core tests converted from Jasmine/Karma to vitest
TypeScript for all packages
SvelteKit-based component library (generates standard Svelte components)
Explicit exports added to core's package.json
Eliminated need for build.sh scripts
Replaced dom-to-image.js with the dom-to-image-more package (solves build issues in Svelte projects that use @carbon/charts-svelte and @carbon/charts)
Simplified imports of interfaces, components, etc. - flattened
Added styles.css, styles.min.css to the Angular, React, Svelte and Vue packages so developers can get them without loading @carbon/charts, too.
Charts Angular now has working sandbox instead of code sample.
Made package folders match module names (core -> charts, angular -> charts-angular, etc.)
Refactored React and Svelte components
Added Diagram components to charts-react (they were there but not exported)

Justification

Current version is very difficult to upgrade. Changing one small thing causes many other things to break mainly due to outdated dependencies.
Vue components didn't work with Vue 3
Angular components didn't support Ivy. While these are thing wrappers, it's more of an issue related to the bundled Angular runtime.
Not all of the packages had working sandboxes.

Desired UX and success metrics

The same functionality should largely be available but supporting newer development environments. Possibly add a chart type like a waterfall (I have some code for this based on D3).

"Must have" functionality

Everything I listed in the Summary above.

Specific timeline issues / requests

There's probably only 8-10 hours more to complete everything.

Available extra resources

Can continue to contribute - probably sunk about 80 hours into the changes in this branch.

What priority level would this issue be in your opinion?

P1

theiliad commented 1 year ago

Hi @nstuyvesant, thank you for working through this!

Could you pls turn your branch into a PR? Thanks

nstuyvesant commented 1 year ago

The PR passed the checks. https://github.com/carbon-design-system/carbon-charts/pull/1533

carbon-design-system / carbon-charts