Skip to content

Commit f8467a2

Browse files
Mr-KRAMAMr-KRAMA
committed
updatiing
1 parent a4df721 commit f8467a2

7 files changed

Lines changed: 140 additions & 1 deletion

File tree

‎goldens/material/charts/index.api.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
## API Report File for "@angular/material_charts"
2+
3+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4+
5+
```ts
6+
7+
import * as i0 from '@angular/core';
8+
import { AfterViewInit } from '@angular/core';
9+
import { OnChanges } from '@angular/core';
10+
import { OnDestroy } from '@angular/core';
11+
import { PipeTransform } from '@angular/core';
12+
import { SimpleChanges } from '@angular/core';
13+
14+
// @public
15+
export class MatChart implements AfterViewInit, OnChanges, OnDestroy {
16+
constructor(...args: unknown[]);
17+
ariaLabel: string;
18+
color: ThemePalette;
19+
datasets: MatChartDataset[];
20+
height: number;
21+
hideTooltip(): void;
22+
label: string;
23+
// (undocumented)
24+
ngAfterViewInit(): void;
25+
// (undocumented)
26+
ngOnChanges(_changes: SimpleChanges): void;
27+
// (undocumented)
28+
ngOnDestroy(): void;
29+
// (undocumented)\n static ngAcceptInputType_showLegend: unknown;
30+
// (undocumented)
31+
static ngAcceptInputType_showTooltip: unknown;
32+
showLegend: boolean;
33+
showTooltip: boolean;
34+
showTooltipAt(event: MouseEvent, text: string): void;
35+
type: MatChartType;
36+
valueFor(data: MatChartDataset['data'], label: string): number;
37+
width: number;
38+
// (undocumented)
39+
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>;
40+
// (undocumented)
41+
static ɵfac: i0.ɵɵFactoryDeclaration<MatChart, never>;
42+
}
43+
44+
// @public (undocumented)
45+
export interface MatChartDataPoint {
46+
label: string;
47+
value: number;
48+
}
49+
50+
// @public (undocumented)
51+
export interface MatChartDataset {
52+
color?: string;
53+
data: MatChartDataPoint[];
54+
label: string;
55+
}
56+
57+
// @public (undocumented)
58+
export class MatChartsModule {
59+
// (undocumented)
60+
static ɵfac: i0.ɵɵFactoryDeclaration<MatChartsModule, never>;
61+
// (undocumented)
62+
static ɵinj: i0.ɵɵInjectorDeclaration<MatChartsModule>;
63+
// (undocumented)
64+
static ɵmod: i0.ɵɵNgModuleDeclaration<MatChartsModule, never, [typeof MatChart, typeof MatChartValuePipe], [typeof MatChart, typeof MatChartValuePipe]>;
65+
}
66+
67+
// @public
68+
export type MatChartType = 'line' | 'bar' | 'pie';
69+
70+
// @public (undocumented)
71+
export class MatChartValuePipe implements PipeTransform {
72+
// (undocumented)
73+
transform(data: MatChartDataPoint[], label: string): number;
74+
// (undocumented)
75+
static ɵfac: i0.ɵɵFactoryDeclaration<MatChartValuePipe, never>;
76+
// (undocumented)
77+
static ɵpipe: i0.ɵɵPipeDeclaration<MatChartValuePipe, "chartValue", true>;
78+
}
79+
80+
// (No @packageDocumentation comment for this package)
81+
82+
```

‎src/material/BUILD.bazel‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ sass_library(
4040
"//src/material/button:theme",
4141
"//src/material/button-toggle:theme",
4242
"//src/material/card:theme",
43+
"//src/material/charts:theme",
4344
"//src/material/checkbox:theme",
4445
"//src/material/chips:theme",
4546
"//src/material/core:core_sass",
@@ -116,6 +117,7 @@ ng_package(
116117
"//src/material/button:theme",
117118
"//src/material/button-toggle:theme",
118119
"//src/material/card:theme",
120+
"//src/material/charts:theme",
119121
"//src/material/checkbox:theme",
120122
"//src/material/chips:theme",
121123
"//src/material/core:core_sass",

‎src/material/_index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,4 +144,4 @@
144144
@forward './timepicker/timepicker-theme' as timepicker-* show timepicker-theme, timepicker-color,
145145
timepicker-typography, timepicker-density, timepicker-base, timepicker-overrides;
146146
@forward './charts/chart-theme' as chart-* show chart-theme, chart-color, chart-typography,
147-
chart-density, chart-base;
147+
chart-density, chart-base, chart-overrides;

‎src/material/charts/BUILD.bazel‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
load(
22
"//tools:defaults.bzl",
3+
"extract_tokens",
34
"markdown_to_html",
45
"ng_project",
56
"ng_web_test_suite",
@@ -12,6 +13,7 @@ sass_library(
1213
name = "m3",
1314
srcs = ["_m3-chart.scss"],
1415
deps = [
16+
"//src/material/core/style:sass_utils",
1517
"//src/material/core/tokens:m3_utils",
1618
],
1719
)
@@ -81,6 +83,11 @@ markdown_to_html(
8183
srcs = [":charts.md"],
8284
)
8385

86+
extract_tokens(
87+
name = "tokens",
88+
srcs = [":theme"],
89+
)
90+
8491
filegroup(
8592
name = "source-files",
8693
srcs = glob(["**/*.ts"]),

‎src/material/charts/_chart-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@
5050
@include token-utils.values($tokens);
5151
}
5252

53+
/// Outputs the CSS variable values for the given tokens.
54+
/// @param {Map} $tokens The token values to emit.
55+
@mixin overrides($tokens: ()) {
56+
@each $token, $value in $tokens {
57+
--mat-chart-#{$token}: #{$value};
58+
}
59+
}
60+
5361
/// Outputs all theme styles for the mat-chart.
5462
/// @param {Map} $theme The theme to generate styles for.
5563
/// @param {String} $color-variant The color variant to use.

‎src/material/charts/charts.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# MatChart
2+
3+
`MatChart` is a Material-themed SVG chart component supporting line, bar, and pie chart types.
4+
5+
## Usage
6+
7+
```html
8+
<mat-chart
9+
type="bar"
10+
label="Monthly Sales"
11+
[datasets]="datasets"
12+
[showTooltip]="true"
13+
[showLegend]="true"
14+
[height]="300">
15+
</mat-chart>
16+
```
17+
18+
```typescript
19+
import { MatChart, MatChartDataset } from '@angular/material/charts';
20+
21+
datasets: MatChartDataset[] = [
22+
{
23+
label: 'Revenue',
24+
data: [
25+
{ label: 'Jan', value: 120 },
26+
{ label: 'Feb', value: 180 },
27+
{ label: 'Mar', value: 150 },
28+
],
29+
},
30+
];
31+
```
32+
33+
## Theming
34+
35+
```scss
36+
@use '@angular/material' as mat;
37+
38+
@include mat.chart-theme($theme);
39+
```

‎src/material/config.bzl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ entryPoints = [
7272
"tooltip/testing",
7373
"tree",
7474
"tree/testing",
75+
"charts",
7576
]
7677

7778
# List of all non-testing entry-points of the Angular Material package.

0 commit comments

Comments
 (0)