feat(highcharts-configs): new library

angular.json

@@ -162,6 +162,36 @@
           }
         }
       }
+    },
+    "highcharts-configs": {
+      "projectType": "library",
+      "root": "projects/highcharts-configs",
+      "sourceRoot": "projects/highcharts-configs/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/highcharts-configs/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/highcharts-configs/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/highcharts-configs/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/highcharts-configs/tsconfig.spec.json",
+            "polyfills": ["zone.js", "zone.js/testing"]
+          }
+        }
+      }
     }
   }
 }

package.json

@@ -66,7 +66,7 @@
     "@angular/platform-browser": "15.2.2",
     "@angular/platform-browser-dynamic": "15.2.2",
     "@angular/router": "15.2.2",
-    "@cds/core": "6.9.2",
+    "@cds/core": "6.15.0",
     "@compodoc/compodoc": "1.1.19",
     "@microsoft/api-extractor": "7.33.6",
     "@playwright/test": "1.48.0",
@@ -93,6 +93,8 @@
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "glob": "9.3.1",
+    "highcharts": "^12.0.2",
+    "highcharts-angular": "3.1.2",
     "husky": "7.0.4",
     "jasmine-core": "3.10.1",
     "jasmine-expect": "5.0.0",

projects/demo/src/app/app.routing.ts

@@ -143,6 +143,7 @@ export const APP_ROUTES: Routes = [
   },
   { path: 'wizard', loadChildren: () => import('./wizard/wizard.demo.module').then(m => m.WizardDemoModule) },
   { path: 'z-index', loadChildren: () => import('./z-index/z-index.demo.module').then(m => m.ZIndexDemoModule) },
+  { path: 'charts', loadChildren: () => import('./charts/charts.demo.module').then(m => m.ChartsModule) },
 ];
 
 export const ROUTING: ModuleWithProviders<RouterModule> = RouterModule.forRoot(APP_ROUTES);

projects/demo/src/app/charts/charts.component.html

@@ -0,0 +1,8 @@
+<h2>Highcharts configs playground</h2>
+
+<h3>Categorical</h3>
+<highcharts-chart
+  [Highcharts]="Highcharts"
+  [options]="categoricalOptions"
+  style="width: 100%; height: 400px; display: block"
+></highcharts-chart>

projects/demo/src/app/charts/charts.component.scss

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */

projects/demo/src/app/charts/charts.component.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { Component } from '@angular/core';
+import { Categorical } from '@clr/highcharts-configs';
+import * as Highcharts from 'highcharts';
+
+type DataItem = {
+  data: number[];
+  type: 'column';
+  name: string;
+};
+
+function generateArray(n: number): DataItem[] {
+  const generateRandomData = (length: number): number[] =>
+    Array.from({ length }, () => Math.floor(Math.random() * 500) + 1);
+
+  return Array.from({ length: n }, (_, index) => ({
+    data: generateRandomData(12),
+    type: 'column',
+    name: `Test ${index + 1}`,
+  }));
+}
+
+@Component({
+  selector: 'app-charts',
+  templateUrl: './charts.component.html',
+  styleUrls: ['./charts.component.scss'],
+})
+export class ChartsComponent {
+  Highcharts: typeof Highcharts = Highcharts;
+  categoricalOptions: Highcharts.Options = Categorical.applyRecommendedConfig({
+    title: {
+      text: 'Test Title',
+    },
+    xAxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    },
+    series: generateArray(3),
+  });
+}

projects/demo/src/app/charts/charts.demo.module.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { HighchartsChartModule } from 'highcharts-angular';
+
+import { ChartsComponent } from './charts.component';
+import { ChartsRoutingModule } from './charts.demo.routing';
+
+@NgModule({
+  declarations: [ChartsComponent],
+  imports: [CommonModule, ChartsRoutingModule, HighchartsChartModule],
+})
+export class ChartsModule {}

projects/demo/src/app/charts/charts.demo.routing.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ChartsComponent } from './charts.component';
+
+const routes: Routes = [{ path: '', component: ChartsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChartsRoutingModule {}

projects/demo/tsconfig.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "@clr/angular": ["./../angular/src/index.ts"]
+      "@clr/angular": ["./../angular/src/index.ts"],
+      "@clr/highcharts-configs": ["./../../dist/highcharts-configs"]
     }
   },
   "exclude": ["dist", "node_modules"]

projects/highcharts-configs/README.md

@@ -0,0 +1,25 @@
+# HighchartsConfigs
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project highcharts-configs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project highcharts-configs`.
+
+> Note: Don't forget to add `--project highcharts-configs` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build highcharts-configs` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build highcharts-configs`, go to the dist folder `cd dist/highcharts-configs` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test highcharts-configs` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/highcharts-configs/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/highcharts-configs",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/highcharts-configs/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@clr/highcharts-configs",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@cds/core": ">= 6.15.0"
+  },
+  "sideEffects": false
+}