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

zyfra · Jul 11, 2024 · d0ddfd3 · d0ddfd3
1 parent b6b65d7
commit d0ddfd3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/apps/doc/src/app/charts/scatter/scatter.component.html b/apps/doc/src/app/charts/scatter/scatter.component.html
@@ -23,6 +23,7 @@
  [colorField]="colorField"
  [theme]="$any($any(prizmTheme.changesTheme$ | async))"
  [options]="{ size: 5, shape: 'circle', appendPadding: 30 }"
+ [color]="color"
  ></prizm-charts-scatter>
  </prizm-doc-demo>
 
@@ -103,6 +104,15 @@
  >
  Height
  </ng-template>
+ <ng-template
+ [(documentationPropertyValue)]="color"
+ [documentationPropertyValues]="$any(colorVariants)"
+ 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/scatter/scatter.component.ts b/apps/doc/src/app/charts/scatter/scatter.component.ts
@@ -260,6 +260,8 @@ export class ScatterComponent {
  public yField = 'Shot conceded';
  public xField = 'xG conceded';
  public colorField = 'Result';
+ public colorVariants = ['', '#664d4d', ['red', 'blue', 'green'], ['#650000', '#7dbbb0', '#a37c18']];
+ public color = this.colorVariants[0];
  readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 
  readonly exampleOutline: TuiDocExample = {

diff --git a/libs/charts/base/src/lib/components/scatter/prizm-charts-scatter.component.ts b/libs/charts/base/src/lib/components/scatter/prizm-charts-scatter.component.ts
@@ -25,6 +25,14 @@ export class PrizmChartsScatterComponent<
  this.updateOptions({ autoFit: value });
  }
 
+ @Input()
+ public set color(value: PrizmChartsScatterOptions['color']) {
+ this.updateOptions({ color: value });
+ }
+ public get color(): PrizmChartsScatterOptions['color'] {
+ return this.options.color;
+ }
+
  @Input()
  public set yField(value: string) {
  this.updateOptions({ yField: value });