feat(charts/pie): add color input for pie #1816

zyfra · Jul 11, 2024 · dca0fc2 · dca0fc2
1 parent 538dfde
commit dca0fc2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/apps/doc/src/app/charts/pie/pie.component.html b/apps/doc/src/app/charts/pie/pie.component.html
@@ -24,6 +24,7 @@
  [interactions]="interactions"
  [label]="label"
  [theme]="$any(prizmTheme.changesTheme$ | async)"
+ [color]="color"
  >
  </prizm-charts-pie>
  </prizm-doc-demo>
@@ -103,6 +104,14 @@
  >
  Label
  </ng-template>
+ <ng-template
+ [(documentationPropertyValue)]="color"
+ documentationPropertyName="color"
+ documentationPropertyType="string"
+ documentationPropertyMode="input"
+ >
+ Color. Sets charts color. Note, for chart with seriesField use colors array.
+ </ng-template>
  </prizm-doc-documentation>
  </ng-template>
 

diff --git a/apps/doc/src/app/charts/pie/pie.component.ts b/apps/doc/src/app/charts/pie/pie.component.ts
@@ -20,6 +20,7 @@ export class PieComponent {
  ];
  colorField = 'type';
  angleField = 'value';
+ color = '';
  interactions: PrizmChartsPieOptions['interactions'] = [{ type: 'element-active' }];
  label: PrizmChartsPieOptions['label'] = {
  type: 'inner',

diff --git a/libs/charts/base/src/lib/components/pie/prizm-charts-pie.component.ts b/libs/charts/base/src/lib/components/pie/prizm-charts-pie.component.ts
@@ -36,6 +36,14 @@ export class PrizmChartsPieComponent<T extends Record<string, unknown>> extends
  return this.options?.angleField as string;
  }
 
+ @Input()
+ public set color(value: PrizmChartsPieOptions['color']) {
+ this.updateOptions({ color: value });
+ }
+ public get color(): PrizmChartsPieOptions['color'] {
+ return this.options.color;
+ }
+
  @Input()
  public set colorField(value: string) {
  this.updateOptions({ colorField: value });