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

zyfra · Jul 11, 2024 · b06a7b4 · b06a7b4
1 parent 0c870ea
commit b06a7b4
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/apps/doc/src/app/charts/line/examples/series/prizm-charts-line-series-example.component.html b/apps/doc/src/app/charts/line/examples/series/prizm-charts-line-series-example.component.html
@@ -6,4 +6,5 @@
  [yField]="'value'"
  [options]="{ smooth: true }"
  [seriesField]="'city'"
+ [color]="['#00bffb', '#f400b1']"
 ></prizm-charts-line>
diff --git a/apps/doc/src/app/charts/line/line.component.html b/apps/doc/src/app/charts/line/line.component.html
@@ -29,6 +29,7 @@
  [seriesField]="$any(seriesField)"
  [theme]="$any(prizmTheme.changesTheme$ | async)"
  [height]="height"
+ [color]="color"
  ></prizm-charts-line>
  </prizm-doc-demo>
  <prizm-doc-documentation>
@@ -68,15 +69,6 @@
  Series Field Name (use 'key' for example data)
  </ng-template>
 
- <ng-template
- [(documentationPropertyValue)]="width"
- documentationPropertyName="width"
- documentationPropertyType="number"
- documentationPropertyMode="input"
- >
- Width
- </ng-template>
-
  <ng-template
  documentationPropertyName="data"
  documentationPropertyMode="input"
@@ -117,6 +109,15 @@
  >
  Height
  </ng-template>
+
+ <ng-template
+ [(documentationPropertyValue)]="color"
+ documentationPropertyName="color"
+ documentationPropertyType="string"
+ documentationPropertyMode="input"
+ >
+ Color. Sets color to line. Note, for chart with seriesField use colors array.
+ </ng-template>
  </prizm-doc-documentation>
  </ng-template>
 

diff --git a/apps/doc/src/app/charts/line/line.component.ts b/apps/doc/src/app/charts/line/line.component.ts
@@ -11,6 +11,7 @@ export class LineComponent {
  height = 300;
  xField = 'x';
  yField = 'y';
+ color = '';
  width: number | null = null;
  seriesField: string | null = null;
  data: any = [

diff --git a/libs/charts/base/src/lib/components/line/prizm-charts-line.component.ts b/libs/charts/base/src/lib/components/line/prizm-charts-line.component.ts
@@ -20,6 +20,14 @@ export class PrizmChartsLineComponent<T = unknown> extends PrizmChartsAbstractCo
 
  private origin_!: PrizmChartsLineOrigin;
 
+ @Input()
+ public set color(value: PrizmChartsLineOptions['color']) {
+ this.updateOptions({ color: value });
+ }
+ public get color(): PrizmChartsLineOptions['color'] {
+ return this.options.color;
+ }
+
  @Input() set autoFit(value: boolean) {
  this.updateOptions({ autoFit: value });
  }