Add Angular

Author: arman-boyakhchyan

Angular/package-lock.json

@@ -22,8 +22,8 @@
     "@angular/platform-browser": "^18.0.3",
     "@angular/platform-browser-dynamic": "^18.0.3",
     "@angular/router": "^18.0.3",
-    "devextreme": "24.2.3",
-    "devextreme-angular": "24.2.3",
+    "devextreme": "25.1.3",
+    "devextreme-angular": "25.1.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.7"

Angular/package.json

@@ -1,3 +1,40 @@
 <div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+  <dx-chart
+    [dataSource]="chartData"
+    title="Target vs Actual Spending 2024"
+  >
+    <dxi-series
+      type="bar"
+      argumentField="month"
+      valueField="targetSpend"
+      name="Budget"
+      color="#5996ff"
+    ></dxi-series>
+    <dxi-series
+      type="spline"
+      argumentField="month"
+      valueField="actualSpend"
+      name="Amount Spend"
+      color="#cb4bfa"
+    ></dxi-series>
+    <dxi-value-axis>
+      <dxi-constant-line
+        [value]="averageSpend"
+      >
+        <dxo-label
+          text="Yearly Spend Average"
+        ></dxo-label>
+      </dxi-constant-line>
+    </dxi-value-axis>
+    <dxo-tooltip
+      [enabled]="true"
+      [customizeTooltip]="customizeTooltip"
+    ></dxo-tooltip>
+    <dxo-common-pane-settings>
+      <dxo-background-color
+        base="#ffffff"
+        [fillId]="chartGradient"
+      ></dxo-background-color>
+    </dxo-common-pane-settings>
+  </dx-chart>
 </div>