chore: update chart component

Author: yanmariomenev

examples-standalone/kendoangular-landing-page/src/app/components/charts/charts.component.html

@@ -13,39 +13,41 @@
 
     <div class="chart-item">
         <kendo-chart>
-            <kendo-chart-title text="Units sold"></kendo-chart-title>
+            <kendo-chart-title text="Hybrid car mileage report"></kendo-chart-title>
+            <kendo-chart-legend position="top"></kendo-chart-legend>
+
+            <kendo-chart-value-axis>
+                @for (item of valueAxes; track item.name) {
+                <kendo-chart-value-axis-item
+                    [name]="item.name!"
+                    [title]="item.title!"
+                    [min]="item.min!"
+                    [max]="item.max!"
+                    [majorUnit]="item.majorUnit!"
+                    [color]="item.color!"
+                >
+                </kendo-chart-value-axis-item>
+                }
+            </kendo-chart-value-axis>
+
             <kendo-chart-category-axis>
-                <kendo-chart-category-axis-item [categories]="lineChartCategories" [title]="{ text: 'Months' }">
+                <kendo-chart-category-axis-item [categories]="categories" [axisCrossingValue]="crossingValues">
                 </kendo-chart-category-axis-item>
             </kendo-chart-category-axis>
-            <kendo-chart-series>
-                <kendo-chart-series-item type="line" [data]="lineChartData[0]"> </kendo-chart-series-item>
-                <kendo-chart-series-item type="line" [data]="lineChartData[1]"> </kendo-chart-series-item>
-                <kendo-chart-series-item type="line" [data]="lineChartData[2]"> </kendo-chart-series-item>
-            </kendo-chart-series>
-        </kendo-chart>
-    </div>
 
-    <div class="chart-item">
-        <kendo-chart>
             <kendo-chart-series>
-                <kendo-chart-series-item type="heatmap" [data]="commitData">
-                    <kendo-chart-series-item-tooltip>
-                        <ng-template let-value="value">
-                            {{ value.value }} contributions on week {{ value.x }}, day
-                            {{ value.y }}
-                        </ng-template>
-                    </kendo-chart-series-item-tooltip>
+                @for (item of series; track item.name) {
+                <kendo-chart-series-item
+                    [name]="item.name!"
+                    [data]="item.data!"
+                    [type]="item.type!"
+                    [stack]="item.stack!"
+                    [color]="item.color"
+                    [axis]="item.axis!"
+                >
                 </kendo-chart-series-item>
+                }
             </kendo-chart-series>
-
-            <kendo-chart-x-axis>
-                <kendo-chart-x-axis-item [visible]="false"> </kendo-chart-x-axis-item>
-            </kendo-chart-x-axis>
-
-            <kendo-chart-y-axis>
-                <kendo-chart-y-axis-item [visible]="false"> </kendo-chart-y-axis-item>
-            </kendo-chart-y-axis>
         </kendo-chart>
     </div>
 </div>

examples-standalone/kendoangular-landing-page/src/app/components/charts/charts.component.ts

@@ -1,6 +1,5 @@
 import { Component } from "@angular/core";
-import { KENDO_CHARTS, SeriesLabelsContentArgs } from "@progress/kendo-angular-charts";
-import { commitData } from "../../data/commit-data";
+import { KENDO_CHARTS, Series, SeriesLabelsContentArgs, ValueAxis } from "@progress/kendo-angular-charts";
 
 @Component({
     selector: "app-charts",
@@ -18,16 +17,66 @@ export class ChartsComponent {
         { kind: "Other", share: 0.192 },
     ];
 
-    public commitData = commitData();
+    public series: Series[] = [
+        {
+            type: "column",
+            data: [20, 40, 45, 30, 50],
+            stack: true,
+            name: "on battery",
+            color: "#cc6e38",
+        },
+        {
+            type: "column",
+            data: [20, 30, 35, 35, 40],
+            stack: true,
+            name: "on gas",
+            color: "#ef955f",
+        },
+        {
+            type: "line",
+            data: [30, 38, 40, 32, 42],
+            name: "mpg",
+            color: "#ec5e0a",
+            axis: "mpg",
+        },
+        {
+            type: "line",
+            data: [7.8, 6.2, 5.9, 7.4, 5.6],
+            name: "l/100 km",
+            color: "#4e4141",
+            axis: "l100km",
+        },
+    ];
 
-    public lineChartCategories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
-    public lineChartData = [
-        [123, 276, 310, 212, 240, 156, 98],
-        [165, 210, 287, 144, 190, 167, 212],
-        [56, 140, 195, 46, 123, 78, 95],
+    public valueAxes: ValueAxis[] = [
+        {
+            title: { text: "miles" },
+            min: 0,
+            max: 100,
+        },
+        {
+            name: "km",
+            title: { text: "km" },
+            min: 0,
+            max: 161,
+            majorUnit: 32,
+        },
+        {
+            name: "mpg",
+            title: { text: "miles per gallon" },
+            color: "#ec5e0a",
+        },
+        {
+            name: "l100km",
+            title: { text: "liters per 100km" },
+            color: "#4e4141",
+        },
     ];
 
+    public categories: string[] = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
     public labelContent(e: SeriesLabelsContentArgs): string {
         return e.category;
-    }
+      }
+    public crossingValues: number[] = [0, 0, 10, 10];
 }