feat: charts colors update #1196

apps/doc/src/app/charts/bar/bar.component.html

@@ -8,7 +8,7 @@
  <prizm-doc-example id="base" [content]="exampleOutline" heading="Base">
  <prizm-charts-bar-example></prizm-charts-bar-example>
  </prizm-doc-example>
- <prizm-doc-example id="stacked" [content]="exampleOutline" heading="Stacked">
+ <prizm-doc-example id="stacked" [content]="exampleStacked" heading="Stacked">
  <prizm-charts-stacked-bar-example></prizm-charts-stacked-bar-example>
  </prizm-doc-example>
  <prizm-doc-example id="group" [content]="exampleGroup" heading="Group">

apps/doc/src/app/charts/bar/examples/base/prizm-charts-bar-example.component.html

@@ -4,7 +4,7 @@
  [theme]="$any(prizmTheme.changesTheme$ | async)"
  [color]="color"
  xField="sales"
- seriesField="sales"
  yField="type"
+ seriesField="sales"
 ></prizm-charts-bar>
 <pre>{{ data | json }}</pre>

apps/doc/src/app/charts/bar/examples/base/prizm-charts-bar-example.component.ts

@@ -50,17 +50,23 @@ export class PrizmChartsBarExampleComponent implements AfterViewInit {
  sales: 38,
  },
  ];
- readonly color: PrizmChartsBarOptions['color'] = data => {
- return data.sales > 40 ? 'red' : 'green';
+
+ readonly tooltipOptions = {
+ showTitle: false,
+ formatter: item => ({ name: item.type, value: item.sales }),
  };
 
  constructor(public readonly prizmTheme: PrizmThemeService) {}
 
+ readonly color: PrizmChartsBarOptions['color'] = data => {
+ return data.sales > 40 ? 'red' : 'green';
+ };
+
  ngAfterViewInit(): void {
  // we can update options manually
  this.bar.updateOptions({
  legend: false,
- // color: this.color
+ tooltip: this.tooltipOptions,
  });
  }
 }

apps/doc/src/app/charts/bar/examples/group/prizm-charts-group-bar-example.component.html

@@ -1,6 +1,7 @@
 <prizm-charts-bar
  [data]="data"
  [label]="label"
+ [options]="options"
  [theme]="$any(prizmTheme.changesTheme$ | async)"
  xField="value"
  yField="label"

apps/doc/src/app/charts/bar/examples/group/prizm-charts-group-bar-example.component.ts

@@ -77,5 +77,7 @@ export class PrizmChartsBarGroupExampleComponent {
  ],
  };
 
+ public options = { isGroup: true };
+
  constructor(public readonly prizmTheme: PrizmThemeService) {}
 }

apps/doc/src/app/charts/bar/examples/stacked/prizm-charts-stacked-bar-example.component.html

@@ -1,5 +1,6 @@
 <prizm-charts-bar
  [data]="data"
+ [label]="label"
  [options]="{ isStack: true }"
  [theme]="$any(prizmTheme.changesTheme$ | async)"
  xField="value"

apps/doc/src/app/charts/bar/examples/stacked/prizm-charts-stacked-bar-example.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { PrizmChartsBarOptions } from '@prizm-ui/charts';
 import { PrizmThemeService } from '@prizm-ui/theme';
 
 @Component({
@@ -107,5 +108,14 @@ export class PrizmChartsStackedBarExampleComponent {
  },
  ];
 
+ public label: PrizmChartsBarOptions['label'] = {
+ position: 'middle', // 'left', 'middle', 'right'
+ layout: [
+ { type: 'interval-adjust-position' },
+ { type: 'interval-hide-overlap' },
+ { type: 'adjust-color' },
+ ],
+ };
+
  constructor(public readonly prizmTheme: PrizmThemeService) {}
 }

apps/doc/src/app/charts/gauge/gauge.component.html

@@ -50,7 +50,7 @@
  <ng-template
  [(documentationPropertyValue)]="percent"
  documentationPropertyName="percent"
- documentationPropertyType="number"
+ documentationPropertyType="decimal"
  documentationPropertyMode="input"
  >
  Percent

apps/doc/src/app/charts/pie/pie.component.html

@@ -28,22 +28,6 @@
  </prizm-charts-pie>
  </prizm-doc-demo>
  <prizm-doc-documentation>
- <ng-template
- [(documentationPropertyValue)]="width"
- documentationPropertyName="width"
- documentationPropertyType="number"
- >
- Width
- </ng-template>
-
- <ng-template
- [(documentationPropertyValue)]="height"
- documentationPropertyName="height"
- documentationPropertyType="number"
- >
- Height
- </ng-template>
-
  <ng-template
  [(documentationPropertyValue)]="angleField"
  documentationPropertyName="angleField"

apps/doc/src/app/charts/scatter/examples/base/prizm-charts-scatter-example.component.ts

@@ -216,7 +216,7 @@ export class PrizmChartsScatterExampleComponent {
  Team: 'Viktoria Plzen',
  'xG conceded': 0.33,
  'Shot conceded': 7,
- Result: 3,
+ Result: '3',
  },
  {
  'H/A': 'H',

apps/doc/src/app/charts/scatter/scatter.component.ts

@@ -210,7 +210,7 @@ export class ScatterComponent {
  Team: 'Viktoria Plzen',
  'xG conceded': 0.33,
  'Shot conceded': 7,
- Result: 3,
+ Result: '3',
  },
  {
  'H/A': 'H',

apps/doc/src/app/charts/waterfall/examples/base/prizm-charts-waterfall-example.component.ts

@@ -38,7 +38,7 @@ export class PrizmChartsWaterfallExampleComponent {
  },
  },
  label: {
- style: { fontSize: 10, fill: 'rgba(0,0,0,0.65)' },
+ style: { fontSize: 10 },
  layout: [{ type: 'interval-adjust-position' }],
  },
  total: {

apps/doc/src/app/charts/waterfall/waterfall.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc';
-import { PrizmSize } from '@prizm-ui/components';
 import { PrizmChartsWaterfallItem } from '@prizm-ui/charts';
 import { PrizmThemeService } from '@prizm-ui/theme';
 
@@ -33,7 +32,7 @@ export class WaterfallComponent {
  },
  },
  label: {
- style: { fontSize: 10, fill: 'rgba(0,0,0,0.65)' },
+ style: { fontSize: 10 },
  layout: [{ type: 'interval-adjust-position' }],
  },
  total: {