Enforce prettier in CI (#1804)

* Enforce prettier in CI

* Apply prettier

* Automatically apply prettier before committing

.github/ISSUE_TEMPLATE.md

@@ -6,4 +6,3 @@ Pure Chart.js starting template: https://jsfiddle.net/Hongbo_Miao/mvct2uwo/3/
 
 If the issue does not show in a pure Chart.js project, and shows in a ng2-charts project, please try to provide a minimal demo of the problem.
 ng2-charts starting template: http://plnkr.co/edit/Ka4NXG3pZ1mXnaN95HX5?p=preview
-

.github/dependabot.yml

@@ -2,13 +2,12 @@
 
 version: 2
 updates:
-
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
       # Check for updates to GitHub Actions every weekday
-      interval: "daily"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'daily'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'

.github/workflows/ci.yml

@@ -21,6 +21,7 @@ jobs:
           node-version: 18
       - run: npm ci
 
+      - run: npx prettier --check .
       - run: npm run lint
       - run: npm run build:lib
       - run: npm run build:schematics

.github/workflows/release-drafter.yml

@@ -10,9 +10,9 @@ jobs:
   correct_repository:
     runs-on: ubuntu-latest
     steps:
-    - name: fail on fork
-      if: github.repository_owner != 'valor-software'
-      run: exit 1
+      - name: fail on fork
+        if: github.repository_owner != 'valor-software'
+        run: exit 1
 
   update_release_draft:
     needs: correct_repository

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

README.md

@@ -25,79 +25,69 @@ changes to start using the library right away.
 
 1. You can install **_ng2-charts_** using npm:
 
-    ```bash
-    npm install ng2-charts --save
-    ```
+   ```bash
+   npm install ng2-charts --save
+   ```
 
    or yarn:
 
-    ```bash
-    yarn add ng2-charts --save
-    ```
+   ```bash
+   yarn add ng2-charts --save
+   ```
 
 2. You will also need to install and include `Chart.js` library in your application (it is a peer dependency of this
    library, more info can be found in the
    official `chart.js` [documentation](http://www.chartjs.org/docs/#getting-started))
 
-    ```bash
-    npm install chart.js --save
-    ```
+   ```bash
+   npm install chart.js --save
+   ```
 
    or with yarn:
 
-    ```bash
-    yarn add  chart.js --save
-    ```
+   ```bash
+   yarn add  chart.js --save
+   ```
 
 3. Import the directive in your standalone component:
 
-    ```typescript
-    import { BaseChartDirective } from 'ng2-charts';
-    
-    @Component({
-      standalone: true,
-      imports: [BaseChartDirective],
-    })
-    export class MyComponent { }
-    ```
+   ```typescript
+   import { BaseChartDirective } from 'ng2-charts';
+
+   @Component({
+     standalone: true,
+     imports: [BaseChartDirective],
+   })
+   export class MyComponent {}
+   ```
 
 4. Provide a configuration, typically in your `main.ts`:
 
-    ```typescript
-    import {
-      provideCharts,
-      withColorGenerator,
-      withDefaultRegisterables,
-    } from 'ng2-charts';
-    
-    bootstrapApplication(AppComponent, {
-      providers: [
-        provideCharts(withDefaultRegisterables(), withColorGenerator()),
-      ],
-    }).catch((err) => console.error(err));
-    ```
-
-    Alternatively, include a minimal configuration to reduce the bundle size, eg:
-
-    ```typescript
-    provideCharts({registerables: [BarController, Legend, Colors]})
-    ```
-   
-    Or in your AppModule:
-
-    ```typescript
-    import {
-      provideCharts,
-      withColorGenerator,
-      withDefaultRegisterables,
-    } from 'ng2-charts';
-    
-    @NgModule({
-      providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
-      bootstrap: [AppComponent],
-    })
-    export class AppModule {}
-    ```
+   ```typescript
+   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+
+   bootstrapApplication(AppComponent, {
+     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+   }).catch((err) => console.error(err));
+   ```
+
+   Alternatively, include a minimal configuration to reduce the bundle size, eg:
+
+   ```typescript
+   provideCharts({ registerables: [BarController, Legend, Colors] });
+   ```
+
+   Or in your AppModule:
+
+   ```typescript
+   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+
+   @NgModule({
+     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+     bootstrap: [AppComponent],
+   })
+   export class AppModule {}
+   ```
 
 ### Angular version compatibility table
 
@@ -334,4 +324,4 @@ text)
 If you like this library and want to say thanks, consider [buying me a coffee](https://www.buymeacoffee.com/santam)!
 
 [//]: # 'super hidden section about running `npm test:ci` in win11 wsl2'
-[//]: # 'export CHROME_BIN=/mnt/c/Program\\ Files\ (x86)/Google/Chrome/Application/chrome.exe'
+[//]: # 'export CHROME_BIN=/mnt/c/Program\\ Files\\ (x86)/Google/Chrome/Application/chrome.exe'

apps/ng2-charts-demo/e2e/ng2-charts.spec.ts

@@ -1,9 +1,9 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from '@playwright/test';
 
 test(`navigate to main Demo page and check info`, async ({ page }) => {
-  const topBarSelector = "mat-toolbar";
-  const mainContentSelector = "main";
-  await page.goto("/");
+  const topBarSelector = 'mat-toolbar';
+  const mainContentSelector = 'main';
+  await page.goto('/');
 
   // wait for animations to finish
   await expect(page.locator(topBarSelector)).toBeVisible();
@@ -14,25 +14,27 @@ test(`navigate to main Demo page and check info`, async ({ page }) => {
 });
 
 const componentsArray = [
-  { url: "/#LineChart", selector: "app-line-chart" },
-  { url: "/#BarChart", selector: "app-bar-chart" },
-  { url: "/#DoughnutChart", selector: "app-doughnut-chart" },
-  { url: "/#RadarChart", selector: "app-radar-chart" },
-  { url: "/#PieChart", selector: "app-pie-chart" },
-  { url: "/#PolarAreaChart", selector: "app-polar-area-chart" },
-  { url: "/#BubbleChart", selector: "app-bubble-chart" },
-  { url: "/#ScatterChart", selector: "app-scatter-chart" },
-  { url: "/#DynamicChart", selector: "app-dynamic-chart" }
+  { url: '/#LineChart', selector: 'app-line-chart' },
+  { url: '/#BarChart', selector: 'app-bar-chart' },
+  { url: '/#DoughnutChart', selector: 'app-doughnut-chart' },
+  { url: '/#RadarChart', selector: 'app-radar-chart' },
+  { url: '/#PieChart', selector: 'app-pie-chart' },
+  { url: '/#PolarAreaChart', selector: 'app-polar-area-chart' },
+  { url: '/#BubbleChart', selector: 'app-bubble-chart' },
+  { url: '/#ScatterChart', selector: 'app-scatter-chart' },
+  { url: '/#DynamicChart', selector: 'app-dynamic-chart' },
 ];
 
 componentsArray.forEach((component) => {
   test(`${component.selector}`, async ({ page }) => {
     await page.goto(component.url);
     // wait for animations to finish
-    await expect(page.locator(component.selector)
-      .locator("canvas"))
-      .toBeVisible();
+    await expect(
+      page.locator(component.selector).locator('canvas'),
+    ).toBeVisible();
 
-    return expect(page.locator(component.selector).locator("canvas")).toHaveScreenshot();
+    return expect(
+      page.locator(component.selector).locator('canvas'),
+    ).toHaveScreenshot();
   });
 });

apps/ng2-charts-demo/jest.config.ts

@@ -1,6 +1,4 @@
-const esModules = [
-  'lodash-es'
-].join('|');
+const esModules = ['lodash-es'].join('|');
 export default {
   displayName: 'ng2-charts',
   preset: '../../jest.preset.js',
@@ -24,5 +22,5 @@ export default {
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
-  ]
+  ],
 };

apps/ng2-charts-demo/playwright.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig, devices } from "@playwright/test";
-import { nxE2EPreset } from "@nx/playwright/preset";
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { workspaceRoot } from "@nx/devkit";
+import { workspaceRoot } from '@nx/devkit';
 
 // For CI, you may want to set BASE_URL to the deployed application.
-const baseURL = process.env["BASE_URL"] || "http://localhost:4200";
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
 
 /**
  * Read environment variables from file.
@@ -16,20 +16,22 @@ const baseURL = process.env["BASE_URL"] || "http://localhost:4200";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: "./e2e" }),
-  projects: [{
-    name: "chromium",
-    use: { ...devices["Desktop Chrome"] }
-  }],
+  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
   webServer: {
-    command: "npm run serve-static",
+    command: 'npm run serve-static',
     url: baseURL,
-    reuseExistingServer: !process.env.CI
+    reuseExistingServer: !process.env.CI,
   },
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry"
-  }
+    trace: 'on-first-retry',
+  },
 });

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BarChartComponent } from './bar-chart.component';
-import {provideCharts, withDefaultRegisterables} from "ng2-charts";
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 describe('BarChartComponent', () => {
   let component: BarChartComponent;

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts

@@ -1,15 +1,21 @@
 import { Component, ViewChild } from '@angular/core';
-import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from "chart.js";
+import {
+  Chart,
+  ChartConfiguration,
+  ChartData,
+  ChartEvent,
+  ChartType,
+} from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import DataLabelsPlugin from 'chartjs-plugin-datalabels';
 import { MatButton } from '@angular/material/button';
 
 @Component({
-    selector: 'app-bar-chart',
-    templateUrl: './bar-chart.component.html',
-    styleUrls: ['./bar-chart.component.scss'],
-    standalone: true,
-    imports: [MatButton, BaseChartDirective],
+  selector: 'app-bar-chart',
+  templateUrl: './bar-chart.component.html',
+  styleUrls: ['./bar-chart.component.scss'],
+  standalone: true,
+  imports: [MatButton, BaseChartDirective],
 })
 export class BarChartComponent {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.html

@@ -4,7 +4,8 @@
   [data]="bubbleChartData"
   [options]="bubbleChartOptions"
   [legend]="true"
-  [type]="bubbleChartType">
+  [type]="bubbleChartType"
+>
 </canvas>
 
 <button mat-button mat-raised-button color="primary" (click)="randomize()">

apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BubbleChartComponent } from './bubble-chart.component';
-import {provideCharts, withDefaultRegisterables} from "ng2-charts";
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 describe('BubbleChartComponent', () => {
   let component: BubbleChartComponent;

apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
 import { MatButton } from '@angular/material/button';
-import {BaseChartDirective} from "ng2-charts";
+import { BaseChartDirective } from 'ng2-charts';
 
 @Component({
-    selector: 'app-bubble-chart',
-    templateUrl: './bubble-chart.component.html',
-    styleUrls: ['./bubble-chart.component.scss'],
-    standalone: true,
-    imports: [MatButton, BaseChartDirective],
+  selector: 'app-bubble-chart',
+  templateUrl: './bubble-chart.component.html',
+  styleUrls: ['./bubble-chart.component.scss'],
+  standalone: true,
+  imports: [MatButton, BaseChartDirective],
 })
 export class BubbleChartComponent {
   public bubbleChartOptions: ChartConfiguration['options'] = {
@@ -97,7 +97,7 @@ export class BubbleChartComponent {
   public randomize(): void {
     const numberOfPoints = this.rand(5) + 5;
     this.bubbleChartData.datasets[0].data = new Array(numberOfPoints).map(() =>
-      this.randomPoint(30)
+      this.randomPoint(30),
     );
   }
 }