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

Contact Details

[e-mail]

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

[nstuyvesant]

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:

1. Update the dependencies for @carbon/charts-angular to support Angular 13 (been out for a while now)?
2. 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?

[nstuyvesant]

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.