[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

nstuyvesant · 2022-02-04T16:17:58Z

Contact Details

What happened?

Followed steps on https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-treemap--treemap for TreeMap with these exceptions:

npx @angular/cli new my-treemap --style=scss 
cd my-treemap
npm install --save @carbon/charts@0.54.11 @carbon/charts-angular@0.54.11 d3@7.0.0

System:
OS: macOS 12.2
CPU: (10) arm64 Apple M1 Pro
Memory: 429.22 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.2 - /opt/homebrew/bin/node
npm: 8.3.2 - /opt/homebrew/bin/npm
Browsers:
Chrome: 97.0.4692.99
Safari: 15.3
Angular: 13.2.1

When I run Angular in dev mode:

ng serve

I get...

./node_modules/@carbon/charts-angular/__ivy_ngcc__/fesm2015/carbon-charts-angular.js:4:0-65 - Error: Module not found: Error: Can't resolve 'carbon-components/src/globals/js/settings' in '/Users/nates/dev/my-treemap/node_modules/@carbon/charts-angular/__ivy_ngcc__/fesm2015'

So then I install carbon-components npm install --save carbon-components@10.52.0 and try ng serve again. Now it runs but looks horrible. The JavaScript console says "dom-utils.js:334 Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide."

<!--app.component.html-->
<ibm-treemap-chart [data]="data" [options]="options"></ibm-treemap-chart>

\\ app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartsModule } from "@carbon/charts-angular";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

import "@carbon/charts/styles.css";
import "./plex-and-carbon-components.css";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-treemap';
  data = [
		{
			"name": "Oceania",
			"children": [
					{
						"name": "A",
						"value": 800
					},
					{
						"name": "B",
						"value": 200
					},
					{
						"name": "C",
						"value": 100
					},
					{
						"name": "D",
						"value": 900
					}
				]
		},
		{
				"name": "Europe",
				"children": [
						{
								"name": "France",
								"value": 2800,
								"showLabel": true
						},
						{
								"name": "Germany",
								"value": 10000,
								"showLabel": true
						},
						{
								"name": "Sweden",
								"value": 500
						},
						{
								"name": "England",
								"value": 500
						},
						{
								"name": "Italy",
								"value": 200
						}
				]
		},
		{
				"name": "America",
				"children": [
						{
								"name": "U.S.",
								"value": 3500,
								"showLabel": true
						},
						{
								"name": "Brazil",
								"value": 3000,
								"showLabel": true
						},
						{
								"name": "Mexico",
								"value": 2000,
								"showLabel": true
						},
						{
								"name": "AA",
								"value": 500
						},
						{
								"name": "BB",
								"value": 100
						},
						{
								"name": "CC",
								"value": 500
						},
						{
								"name": "DD",
								"value": 500
						},
						{
								"name": "EE",
								"value": 400
						},
						{
								"name": "FF",
								"value": 600
						},
						{
								"name": "GG",
								"value": 200
						},
						{
								"name": "HH",
								"value": 800
						},
						{
								"name": "II",
								"value": 900
						},
						{
								"name": "JJ",
								"value": 100
						},
						{
								"name": "KK",
								"value": 900
						}
				]
		},
		{
				"name": "Australia",
				"children": [
						{
								"name": "KH",
								"value": 2000
						},
						{
								"name": "LL",
								"value": 400
						},
						{
								"name": "MM",
								"value": 500
						},
						{
								"name": "NN",
								"value": 100
						},
						{
								"name": "OO",
								"value": 1000
						},
						{
								"name": "PP",
								"value": 800
						},
						{
								"name": "QQ",
								"value": 700
						},
						{
								"name": "RR",
								"value": 200
						},
						{
								"name": "ST",
								"value": 300
						}
				]
		},
		{
				"name": "Africa",
				"children": [
						{
								"name": "Nigeria",
								"value": 2300,
								"showLabel": true
						},
						{
								"name": "TT",
								"value": 2000
						},
						{
								"name": "UU",
								"value": 500
						},
						{
								"name": "VV",
								"value": 1200
						},
						{
								"name": "WW",
								"value": 2000
						},
						{
								"name": "XX",
								"value": 800
						},
						{
								"name": "YY",
								"value": 2000
						},
						{
								"name": "ZZ",
								"value": 500
						},
						{
								"name": "ABC",
								"value": 1200
						},
						{
								"name": "CBA",
								"value": 1500
						}
				]
		},
		{
				"name": "Asia",
				"children": [
						{
								"name": "China",
								"value": 12500,
								"showLabel": true
						},
						{
								"name": "Iran",
								"value": 22500,
								"showLabel": true
						},
						{
								"name": "Myanmar",
								"value": 12500,
								"showLabel": true
						}
				]
		}
  ];

	options = {
		"title": "Treemap",
		"height": "400px"
  };
}

plex-and-carbon-components.css:

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap";
@import "https://unpkg.com/carbon-components/css/carbon-components.min.css";

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

Version

@carbon/charts@0.54.11
@carbon/charts-angular@0.54.11

Data & options used

No response

Relevant log output

./node_modules/@carbon/charts-angular/__ivy_ngcc__/fesm2015/carbon-charts-angular.js:4:0-65 - Error: Module not found: Error: Can't resolve 'carbon-components/src/globals/js/settings' in '/Users/nates/dev/my-treemap/node_modules/@carbon/charts-angular/__ivy_ngcc__/fesm2015'

Codesandbox example

No response

The text was updated successfully, but these errors were encountered:

nstuyvesant · 2022-02-04T16:23:18Z

Is @carbon-charts@0.54.11 not compatible with Angular 13?

theiliad · 2022-02-04T19:22:14Z

Hi, pls read our angular getting started guide.

https://charts.carbondesignsystem.com/?path=/story/docs-getting-started--angular

Also you need to import styles in a place where it'll actually take effect. I usually try app.component.ts

theiliad · 2022-02-04T19:22:30Z

Feel free to reply with additional comments 🙂

nstuyvesant · 2022-02-04T19:23:38Z

I did read it. Do you see where I made a mistake?

theiliad · 2022-02-04T19:26:34Z

Your carbon-components dep. resolution issue seems to be fixed by installing the package.

Now regarding the styles, if you've imported it and it still isn't looking correct, I would assume that the styles aren't being applied. I would try importing in a different file (this doesn't seem like a bug, just a matter of your css styles not being properly applied onto the page)

Pls try the above and lmk if you're still having issues 🙂

nstuyvesant · 2022-02-05T17:10:10Z

Just got it working with Angular 13 but it's different from what's on the Carbon Charts Angular documentation website for TreeMap.

File: package.json (had to do an npm install --force as @carbon-charts wants Angular 12 and lower...

{
  "name": "my-treemap",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.1",
    "@angular/common": "~13.2.1",
    "@angular/compiler": "~13.2.1",
    "@angular/core": "~13.2.1",
    "@angular/forms": "~13.2.1",
    "@angular/platform-browser": "~13.2.1",
    "@angular/platform-browser-dynamic": "~13.2.1",
    "@angular/router": "~13.2.1",
    "@carbon/charts": "^0.54.12",
    "@carbon/charts-angular": "^0.54.12",
    "@carbon/themes": "^10.50.0",
    "carbon-components": "^10.52.0",
    "rxjs": "~7.5.2",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.2",
    "@angular/cli": "~13.2.2",
    "@angular/compiler-cli": "~13.2.1",
    "@types/jasmine": "~3.10.3",
    "@types/node": "^17.0.15",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.15",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.1",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.5"
  }
}

Note: had to install carbon-components and @carbon/themes.

File: /src/styles.scss (could have loaded some of this from app.component.scss I suppose):

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap";
@import '@carbon/themes/scss/themes';
@import 'carbon-components/scss/globals/scss/styles.scss';
@import "@carbon/charts/styles/styles.scss";

Would it make sense to:

Update the dependencies for @carbon/charts-angular to support Angular 13 (been out for a while now)?
Update the docs like https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-treemap--treemap to show the configuration for Angular 13 instead of 8?

theiliad · 2022-02-05T21:13:13Z

Would it make sense to:

I'll think on this some more.

It's tough to provide angular code samples when they keep releasing so many new versions.

I think they key takeaway of our code samples could be the essentials of how you'd use the library in angular, rather than angular-specific or version-specific code that you can just copy & paste.

theiliad · 2022-02-06T01:45:28Z

I did manage to get a v13-compatible build process. Tested the bundle on codesandbox and charts work smoothly.

However, storybook is not working now, and I'm having a hard time figuring out why. There are also not too many examples on storybook's website for angular 13.

Just found this PR storybookjs/storybook#17387

WIP PR #1304

nstuyvesant · 2022-02-06T04:39:00Z

Awesome - thanks! I've been able to put together a decent example using @carbon/charts-angular's TreeMapComponent including rounding the rects.

One thing I didn't spot in the docs... is there a way to add space between the rects? Looked through the component's properties and didn't see anything. Did I miss something or will I have to manipulate the rects directly in the DOM?

theiliad · 2022-02-06T04:43:56Z

Awesome - thanks! I've been able to put together a decent example using @carbon/charts-angular's TreeMapComponent including rounding the rects.

One thing I didn't spot in the docs... is there a way to add space between the rects? Looked through the component's properties and didn't see anything. Did I miss something or will I have to manipulate the rects directly in the DOM?

Not currently. I think we'd need to add this as a customizable https://github.com/d3/d3-hierarchy/blob/main/README.md#treemap_padding

This makes me think... maybe we should expose the treemap object itself so devs can add their own customizations as well

nstuyvesant · 2022-02-06T17:48:50Z

That would be great. I've had the opportunity to try a variety of treemaps - Apex, Google Charts, and Carbon Charts. In my opinion, Carbon Charts compares very favorably.

Carbon Charts provides a lot of control around assigning colors to groups which was critical for our use-case.

We also need to adjust look and feel so I also appreciate the leaf class being assigned to each rect. Made it easy to put them all in an array with a simple let rects = Array.from(document.getElementsByClassName('leaf')). That allowed me to change the border radius (rx and ry - too bad CSS can't affect those). But if we could control some of the rendering of each rect by option properties (stroke, rx, ry, and spacing between the nodes), this would provide a lot of formatting control and cut down on the need to modify what's been rendered.

theiliad · 2022-02-07T03:21:58Z

That would be great. I've had the opportunity to try a variety of treemaps - Apex, Google Charts, and Carbon Charts. In my opinion, Carbon Charts compares very favorably.

Carbon Charts provides a lot of control around assigning colors to groups which was critical for our use-case.

We also need to adjust look and feel so I also appreciate the leaf class being assigned to each rect. Made it easy to put them all in an array with a simple let rects = Array.from(document.getElementsByClassName('leaf')). That allowed me to change the border radius (rx and ry - too bad CSS can't affect those). But if we could control some of the rendering of each rect by option properties (stroke, rx, ry, and spacing between the nodes), this would provide a lot of formatting control and cut down on the need to modify what's been rendered.

Glad to know that! I've got lots more I want to do here, if I get to it.

I'll keep thinking about those further customizations

nstuyvesant · 2022-02-07T12:14:33Z

Perhaps of interest... my repo experimenting with the Angular version of the treemap...
https://github.com/nstuyvesant/treemap
Custom tooltip, click handling, and a few other things. Hoping the example helps others.

nstuyvesant · 2023-07-11T12:02:49Z

Solved in @carbon/charts-angular@next.

nstuyvesant added the type: bug 🐛 Something isn't working label Feb 4, 2022

nstuyvesant changed the title ~~[Bug]: Follow sample for @carbon/charts-angular TreeMap does not work with latest Angular~~ [Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular Feb 4, 2022

theiliad closed this as completed Feb 4, 2022

theiliad reopened this Feb 6, 2022

nstuyvesant closed this as completed Jul 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

nstuyvesant commented Feb 4, 2022

nstuyvesant commented Feb 4, 2022

theiliad commented Feb 4, 2022

theiliad commented Feb 4, 2022

nstuyvesant commented Feb 4, 2022

theiliad commented Feb 4, 2022 •

edited

Loading

nstuyvesant commented Feb 5, 2022

theiliad commented Feb 5, 2022 •

edited

Loading

theiliad commented Feb 6, 2022 •

edited

Loading

nstuyvesant commented Feb 6, 2022

theiliad commented Feb 6, 2022

nstuyvesant commented Feb 6, 2022

theiliad commented Feb 7, 2022

nstuyvesant commented Feb 7, 2022

nstuyvesant commented Jul 11, 2023

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

[Bug]: Sample for @carbon/charts-angular TreeMap does not work with latest Angular #1298

Comments

nstuyvesant commented Feb 4, 2022

Contact Details

What happened?

Version

Data & options used

Relevant log output

Codesandbox example

nstuyvesant commented Feb 4, 2022

theiliad commented Feb 4, 2022

theiliad commented Feb 4, 2022

nstuyvesant commented Feb 4, 2022

theiliad commented Feb 4, 2022 • edited Loading

nstuyvesant commented Feb 5, 2022

theiliad commented Feb 5, 2022 • edited Loading

theiliad commented Feb 6, 2022 • edited Loading

nstuyvesant commented Feb 6, 2022

theiliad commented Feb 6, 2022

nstuyvesant commented Feb 6, 2022

theiliad commented Feb 7, 2022

nstuyvesant commented Feb 7, 2022

nstuyvesant commented Jul 11, 2023

theiliad commented Feb 4, 2022 •

edited

Loading

theiliad commented Feb 5, 2022 •

edited

Loading

theiliad commented Feb 6, 2022 •

edited

Loading