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

zyfra · Aug 23, 2024 · 7935be5 · 7935be5
1 parent 2e4ba07
commit 7935be5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/apps/doc/src/app/charts/waterfall/waterfall.component.html b/apps/doc/src/app/charts/waterfall/waterfall.component.html
@@ -19,6 +19,7 @@
  [xField]="xField"
  [yField]="yField"
  [theme]="$any(prizmTheme.changesTheme$ | async)"
+ [color]="color"
  ></prizm-charts-waterfall>
  </prizm-doc-demo>
  <prizm-doc-documentation>
@@ -81,6 +82,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/waterfall/waterfall.component.ts b/apps/doc/src/app/charts/waterfall/waterfall.component.ts
@@ -20,6 +20,12 @@ export class WaterfallComponent {
  ];
  public xField = 'type';
  public yField = 'money';
+ public colorVariants = [
+ '',
+ ['red', 'blue', 'green', 'yellow'],
+ ['#b07e9f', '#7dbbb0', '#a37c18', '#e7bee6', '#396878', '#6699cc', '#fc9e7b'],
+ ];
+ public color = this.colorVariants[0];
  public options = {
  appendPadding: [15, 0, 0, 0],
  meta: {

diff --git a/libs/charts/base/src/lib/components/waterfall/prizm-charts-waterfall.component.ts b/libs/charts/base/src/lib/components/waterfall/prizm-charts-waterfall.component.ts
@@ -26,6 +26,14 @@ export class PrizmChartsWaterfallComponent<
  return this.options?.data ?? [];
  }
 
+ @Input()
+ public set color(value: PrizmChartsWaterfallOptions['color']) {
+ this.updateOptions({ color: value });
+ }
+ public get color(): PrizmChartsWaterfallOptions['color'] {
+ return this.options.color;
+ }
+
  @Input()
  public set xField(value: string) {
  this.updateOptions({ xField: value });