feat(multiple): add Material chart component with line, bar, and pie …

goldens/material/charts/index.api.md

@@ -0,0 +1,82 @@
+## API Report File for "@angular/material_charts"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import * as i0 from '@angular/core';
+import { AfterViewInit } from '@angular/core';
+import { OnChanges } from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { PipeTransform } from '@angular/core';
+import { SimpleChanges } from '@angular/core';
+
+// @public
+export class MatChart implements AfterViewInit, OnChanges, OnDestroy {
+    constructor(...args: unknown[]);
+    ariaLabel: string;
+    color: ThemePalette;
+    datasets: MatChartDataset[];
+    height: number;
+    hideTooltip(): void;
+    label: string;
+    // (undocumented)
+    ngAfterViewInit(): void;
+    // (undocumented)
+    ngOnChanges(_changes: SimpleChanges): void;
+    // (undocumented)
+    ngOnDestroy(): void;
+    // (undocumented)\n    static ngAcceptInputType_showLegend: unknown;
+    // (undocumented)
+    static ngAcceptInputType_showTooltip: unknown;
+    showLegend: boolean;
+    showTooltip: boolean;
+    showTooltipAt(event: MouseEvent, text: string): void;
+    type: MatChartType;
+    valueFor(data: MatChartDataset['data'], label: string): number;
+    width: number;
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChart, "mat-chart", ["matChart"], { "type": { "alias": "type"; "required": false; }; "datasets": { "alias": "datasets"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "label": { "alias": "label"; "required": false; }; "color": { "alias": "color"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "showLegend": { "alias": "showLegend"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChart, never>;
+}
+
+// @public (undocumented)
+export interface MatChartDataPoint {
+    label: string;
+    value: number;
+}
+
+// @public (undocumented)
+export interface MatChartDataset {
+    color?: string;
+    data: MatChartDataPoint[];
+    label: string;
+}
+
+// @public (undocumented)
+export class MatChartsModule {
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChartsModule, never>;
+    // (undocumented)
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatChartsModule>;
+    // (undocumented)
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChartsModule, never, [typeof MatChart, typeof MatChartValuePipe], [typeof MatChart, typeof MatChartValuePipe]>;
+}
+
+// @public
+export type MatChartType = 'line' | 'bar' | 'pie';
+
+// @public (undocumented)
+export class MatChartValuePipe implements PipeTransform {
+    // (undocumented)
+    transform(data: MatChartDataPoint[], label: string): number;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChartValuePipe, never>;
+    // (undocumented)
+    static ɵpipe: i0.ɵɵPipeDeclaration<MatChartValuePipe, "chartValue", true>;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

src/material/BUILD.bazel

@@ -40,6 +40,7 @@ sass_library(
         "//src/material/button:theme",
         "//src/material/button-toggle:theme",
         "//src/material/card:theme",
+        "//src/material/charts:theme",
         "//src/material/checkbox:theme",
         "//src/material/chips:theme",
         "//src/material/core:core_sass",
@@ -116,6 +117,7 @@ ng_package(
         "//src/material/button:theme",
         "//src/material/button-toggle:theme",
         "//src/material/card:theme",
+        "//src/material/charts:theme",
         "//src/material/checkbox:theme",
         "//src/material/chips:theme",
         "//src/material/core:core_sass",

src/material/_index.scss

@@ -143,3 +143,5 @@
   tree-base, tree-overrides;
 @forward './timepicker/timepicker-theme' as timepicker-* show timepicker-theme, timepicker-color,
   timepicker-typography, timepicker-density, timepicker-base, timepicker-overrides;
+@forward './charts/chart-theme' as chart-* show chart-theme, chart-color, chart-typography,
+  chart-density, chart-base, chart-overrides;

src/material/charts/BUILD.bazel

@@ -0,0 +1,94 @@
+load(
+    "//tools:defaults.bzl",
+    "extract_tokens",
+    "markdown_to_html",
+    "ng_project",
+    "ng_web_test_suite",
+    "sass_library",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+sass_library(
+    name = "m3",
+    srcs = ["_m3-chart.scss"],
+    deps = [
+        "//src/material/core/style:sass_utils",
+        "//src/material/core/tokens:m3_utils",
+    ],
+)
+
+sass_library(
+    name = "m2",
+    srcs = ["_m2-chart.scss"],
+    deps = [
+        "//src/material/core/theming:_inspection",
+    ],
+)
+
+sass_library(
+    name = "theme",
+    srcs = ["_chart-theme.scss"],
+    deps = [
+        ":m2",
+        ":m3",
+        "//src/material/core/theming",
+        "//src/material/core/theming:_inspection",
+        "//src/material/core/theming:_validation",
+        "//src/material/core/tokens:token_utils",
+        "//src/material/core/typography",
+    ],
+)
+
+ng_project(
+    name = "charts",
+    srcs = [
+        "chart.ts",
+        "chart-types.ts",
+        "chart-value.pipe.ts",
+        "charts-module.ts",
+        "index.ts",
+        "public-api.ts",
+    ],
+    assets = ["chart.html"],
+    deps = [
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/core",
+        "//src/material/core",
+    ],
+)
+
+ng_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":charts",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/platform-browser",
+        "//src/material/core",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":charts.md"],
+)
+
+extract_tokens(
+    name = "tokens",
+    srcs = [":theme"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/material/charts/_chart-theme.scss

@@ -0,0 +1,82 @@
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use './m2-chart';
+@use './m3-chart';
+@use 'sass:map';
+
+/// Outputs base theme styles for the mat-chart.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-chart.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-chart.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-chart.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use.
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-chart.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-chart.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs typography theme styles for the mat-chart.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+  $tokens: map.get(m2-chart.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-chart.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs density theme styles for the mat-chart.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+  $tokens: map.get(m2-chart.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-chart.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @each $token, $value in $tokens {
+    --mat-chart-#{$token}: #{$value};
+  }
+}
+
+/// Outputs all theme styles for the mat-chart.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use.
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

src/material/charts/_m2-chart.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../core/theming/inspection';
+
+/// Generates custom tokens for the mat-chart (M2 theme).
+@function get-tokens($theme) {
+  $foreground: inspection.get-theme-color($theme, foreground);
+  $background: inspection.get-theme-color($theme, background);
+
+  @return (
+    base: (
+      chart-axis-color: map.get($foreground, divider),
+      chart-grid-color: map.get($foreground, divider),
+    ),
+    color: (
+      chart-label-text-color: map.get($foreground, text),
+      chart-axis-label-color: map.get($foreground, secondary-text),
+      chart-tooltip-background: map.get($foreground, text),
+      chart-tooltip-text-color: map.get($background, card),
+      chart-legend-text-color: map.get($foreground, secondary-text),
+    ),
+    typography: (
+      chart-label-text-size: 14px,
+      chart-label-text-weight: 500,
+      chart-axis-label-size: 11px,
+      chart-legend-text-size: 12px,
+    ),
+    density: (),
+  );
+}

src/material/charts/_m3-chart.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mat-chart.
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  $tokens: (
+    base: (
+      chart-axis-color: map.get($system, outline),
+      chart-grid-color: map.get($system, outline-variant),
+    ),
+    color: (
+      chart-label-text-color: map.get($system, on-surface),
+      chart-axis-label-color: map.get($system, on-surface-variant),
+      chart-tooltip-background: map.get($system, inverse-surface),
+      chart-tooltip-text-color: map.get($system, inverse-on-surface),
+      chart-legend-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (
+      chart-label-text-size: map.get($system, title-small-size),
+      chart-label-text-weight: map.get($system, title-small-weight),
+      chart-axis-label-size: map.get($system, label-small-size),
+      chart-legend-text-size: map.get($system, label-small-size),
+    ),
+    density: (),
+  );
+
+  @return $tokens;
+}

src/material/charts/chart-types.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+/** Supported chart types. */
+export type MatChartType = 'line' | 'bar' | 'pie';
+
+/** A single data point in a chart dataset. */
+export interface MatChartDataPoint {
+  label: string;
+  value: number;
+}
+
+/** A dataset to be rendered in the chart. */
+export interface MatChartDataset {
+  label: string;
+  data: MatChartDataPoint[];
+  color?: string;
+}

src/material/charts/chart-value.pipe.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {MatChartDataPoint} from './chart-types';
+
+/**
+ * Looks up the numeric value for a given label inside a dataset's data array.
+ * Used in the chart template to avoid calling methods inside `@for` loops.
+ *
+ * @example
+ * {{ dataset.data | chartValue: 'Jan' }}  // → 42
+ */
+@Pipe({name: 'chartValue'})
+export class MatChartValuePipe implements PipeTransform {
+  transform(data: MatChartDataPoint[], label: string): number {
+    return data.find(pt => pt.label === label)?.value ?? 0;
+  }
+}