chore: test next ahead of release

.syncpackrc.js

@@ -52,7 +52,7 @@ const config = {
       dependencies: ["@arcgis/core"],
       dependencyTypes: ["dev", "prod"],
       packages: ["**"],
-      pinVersion: "~4.29.6"
+      pinVersion: "~4.30.0"
     },
     {
       label: "ArcGIS Components dev and prod dependency",
@@ -64,27 +64,44 @@ const config = {
         "@arcgis/map-components",
         "@arcgis/map-components-angular",
         "@arcgis/map-components-react",
+      ],
+      packages: ["**"],
+      pinVersion: "~4.30.0"
+    },
+    {
+      label: "ArcGIS Charts Components dev and prod dependency",
+      dependencyTypes: ["dev", "prod"],
+      dependencies: [
         "@arcgis/charts-components",
         "@arcgis/charts-model",
         "@arcgis/charts-components-angular",
         "@arcgis/charts-components-react"
       ],
       packages: ["**"],
-      pinVersion: "~4.29.6"
+      pinVersion: "~4.30.0"
     },
     {
       label: "Calcite Components dev dependency",
-      dependencies: ["@esri/calcite-components"],
+      dependencies: [
+        "@esri/calcite-components", 
+        "@esri/calcite-components-angular",
+        "@esri/calcite-components-react"
+      ],
       packages: ["**"],
       dependencyTypes: ["dev", "prod"],
-      pinVersion: "^2.5.1"
+      pinVersion: "^2.8.5"
     },
     {
       label: "React for dev and prod",
       dependencyTypes: ["dev", "prod"],
-      dependencies: ["react", "react-dom"],
+      dependencies: [
+        "react", 
+        "react-dom", 
+        "@types/react-dom", 
+        "@types/react"
+      ],
       packages: ["**"],
-      pinVersion: "^18.2.0"
+      pinVersion: "^18.3.0"
     },
     {
       label: "Angular dev and prod deps",
@@ -103,7 +120,7 @@ const config = {
         "@angular/compiler-cli"
       ],
       packages: ["**"],
-      pinVersion: "^17.2.0"
+      pinVersion: "^17.3.6"
     },
     {
       label: "Vite for dev",
@@ -117,14 +134,14 @@ const config = {
       dependencyTypes: ["dev", "prod"],
       dependencies: ["webpack"],
       packages: ["**"],
-      pinVersion: "^5.90.1"
+      pinVersion: "^5.90.3"
     },
     {
       label: "vue for dev, prod",
       dependencyTypes: ["dev", "prod"],
       dependencies: ["vue"],
       packages: ["**"],
-      pinVersion: "^3.4.18"
+      pinVersion: "^3.4.19"
     },
     {
       label: "css-loader for dev",

package.json

@@ -8,12 +8,11 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
-    "postinstall": "husky install",
-    "update": "yarn up @esri/calcite-components@next @arcgis/core@next @arcgis/map-components@next @arcgis/coding-components@next @arcgis/coding-components-react@next @arcgis/coding-components-angular@next"
+    "postinstall": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "18.6.1",
-    "@commitlint/config-conventional": "18.6.2",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
     "husky": "9.0.11",
     "prettier": "^3.0.0",
     "syncpack": "^12.3.0"

packages/charts-components/README.MD

@@ -2,6 +2,4 @@
 
 > **Disclaimer:** Components are in beta. Please do not contact Esri Technical Support for assistance.
 
-📁 **[Click here to download all charts component templates as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/charts-components/templates)** 📁
-
 These templates and samples are for [@arcgis/charts-components](https://www.npmjs.com/package/@arcgis/charts-components)

packages/charts-components/templates/amd-script-tag/README.md

@@ -1,9 +1 @@
-# Charts components AMD template📁
-
-📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/charts-components/templates/amd-script-tag)** 📁
-
-## Resources
-
-[ArcGIS Developers - Build with AMD modules](http://developers.arcgis.com/javascript/latest/amd-build/)
-
-[Monaco - AMD editor sample](https://github.com/microsoft/monaco-editor/blob/main/samples/browser-amd-editor/index.html)
+# Charts components AMD template

packages/charts-components/templates/amd-script-tag/index.html

@@ -13,43 +13,65 @@
     <link rel="icon" href="data:;base64,=" />
 
     <!-- Load the ArcGIS Maps SDK for JavaScript -->
-    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" />
-    <script src="https://js.arcgis.com/4.29/"></script>
+    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/dark/main.css" />
+    <script src="https://js.arcgis.com/4.30/"></script>
 
     <!-- Load the Charts Components -->
-    <script type="module" src="https://js.arcgis.com/charts-components/4.29/arcgis-charts-components.esm.js"></script>
+    <!-- TODO: Update to 4.30/js.arcgis.com after release -->
+    <script type="module" src="https://jsdev.arcgis.com/charts-components/next/arcgis-charts-components.esm.js"></script>
+
+    <!-- Load the Charts Model -->
+    <!-- TODO: Update to 4.30/js.arcgis.com after release -->
+    <script type="module" src="https://jsdev.arcgis.com/charts-model/next/index.js"></script>
 </head>
 
 <body>
-    <arcgis-charts-scatter-plot id="scatter-plot" class="chart-container"></arcgis-charts-scatter-plot>
-    <script>
+    <arcgis-charts-scatter-plot id="scatterplot" class="chart-container"></arcgis-charts-scatter-plot>
+    <script type="module">
+        /**
+         * Import ScatterPlotModel from the Charts Model module.
+         */
+        const { ScatterPlotModel } = await $arcgis.import("@arcgis/charts-model");
+
         /**
-         * Simple data loader against public data.
-         * For the test data, we need a feature layer.
+         * Create a feature layer with a service URL. This will be used to create a chart later.
          */
-        async function loadFeatureLayerItem() {
-            const WebMap = await $arcgis.import("esri/WebMap");
-            const webmap = new WebMap({
-                portalItem: {
-                    id: "a72bb6468f57491f84409186446808e1"
-                }
+        async function createFeatureLayer(url) {
+            const FeatureLayer = await $arcgis.import("esri/layers/FeatureLayer");
+
+            const featureLayer = new FeatureLayer({
+                url: url
             });
-            await webmap.loadAll();
-            const featureLayerItem = webmap.layers.items[0];
 
-            return featureLayerItem;
+            await featureLayer.load();
+
+            return featureLayer;
         }
+
         /**
-         * Listen for the `arcgisChartsUpdateComplete` event to update the chart with the feature layer.
+         * Initialize the scatterplot chart.
          */
-        document.querySelector("arcgis-charts-scatter-plot").addEventListener("arcgisChartsUpdateComplete", async (event) => {
-            const layer = await loadFeatureLayerItem();
-            const config = layer.charts[0];
-            const scatterPlot = document.getElementById("scatter-plot");
-
-            scatterPlot.config = config;
-            scatterPlot.layer = layer;
-        });
+        async function initScatterplot() {
+            const layer = await createFeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0');
+
+            const scatterplotElement = document.getElementById("scatterplot");
+
+            // Create a new ScatterPlotModel and set the x and y axis fields.
+            const scatterplotModel = new ScatterPlotModel();
+            await scatterplotModel.setup({ layer });
+
+            await scatterplotModel.setXAxisField("Ward");
+            await scatterplotModel.setYAxisField("Beat");
+
+            // Set the scatterplot element's config and layer properties.
+            const config = scatterplotModel.getConfig();
+
+            scatterplotElement.config = config;
+            scatterplotElement.layer = layer;
+        }
+
+        // Call initScatterplot() function to render the chart.
+        initScatterplot();
     </script>
 </body>
 

packages/charts-components/templates/angular/README.md

@@ -1,3 +1 @@
-# Charts components Angular template
-
-📁 **[Click here to download this directory as a ZIP file](https://download-directory.github.io?url=https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/charts-components/templates/angular)** 📁
+# Charts components Angular template

packages/charts-components/templates/angular/package.json

@@ -10,33 +10,33 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^17.2.0",
-    "@angular/common": "^17.2.0",
-    "@angular/compiler": "^17.2.0",
-    "@angular/core": "^17.2.0",
-    "@angular/forms": "^17.2.0",
-    "@angular/platform-browser": "^17.2.0",
-    "@angular/platform-browser-dynamic": "^17.2.0",
-    "@angular/router": "^17.2.0",
-    "@arcgis/charts-components-angular": "~4.29.6",
-    "@arcgis/charts-model": "~4.29.6",
-    "@arcgis/core": "~4.29.6",
-    "@esri/calcite-components": "^2.5.1",
+    "@angular/animations": "^17.3.6",
+    "@angular/common": "^17.3.6",
+    "@angular/compiler": "^17.3.6",
+    "@angular/core": "^17.3.6",
+    "@angular/forms": "^17.3.6",
+    "@angular/platform-browser": "^17.3.6",
+    "@angular/platform-browser-dynamic": "^17.3.6",
+    "@angular/router": "^17.3.6",
+    "@arcgis/charts-components-angular": "~4.30.0",
+    "@arcgis/charts-model": "~4.30.0",
+    "@arcgis/core": "~4.30.0",
+    "@esri/calcite-components": "^2.8.5",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular/cli": "^17.2.0",
-    "@angular/compiler-cli": "^17.2.0",
+    "@angular-devkit/build-angular": "^17.3.6",
+    "@angular/cli": "^17.3.6",
+    "@angular/compiler-cli": "^17.3.6",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.2"
+    "typescript": "~5.4.5"
   }
 }

packages/charts-components/templates/angular/src/app/app.component.html

@@ -1 +1 @@
-<arcgis-charts-scatter-plot #scatterPlot class="chart-component"></arcgis-charts-scatter-plot>
+<arcgis-charts-scatter-plot #scatterplot class="chart-component"></arcgis-charts-scatter-plot>

packages/charts-components/templates/angular/src/app/app.component.ts

@@ -13,47 +13,52 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild } from '@angular/core';
-import { loadFeatureLayer } from '../functions/load-data.service';
-import { ScatterPlotModel } from '@arcgis/charts-model';
+import { Component, ViewChild } from "@angular/core";
+import { createFeatureLayer } from "../functions/create-feature-layer.service";
+import { ScatterPlotModel } from "@arcgis/charts-model";
 
-import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader';
+import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css"
 })
 export class AppComponent {
-  title = 'charts-components-angular-template';
+  title = "charts-components-angular-template";
 
-  @ViewChild('scatterPlot') scatterPlot: HTMLArcgisChartsScatterPlotElement | undefined;
+  @ViewChild("scatterplot") scatterplot: HTMLArcgisChartsScatterPlotElement | undefined;
 
   ngOnInit() {
     // define custom elements in the browser, and load the assets from the CDN
-    defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.29/t9n' });
+    defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.30/t9n" });
+  }
 
-    // Call async functions here
-    this.createScatterPlot();
+  ngAfterViewInit() {
+    this.initScatterplot();
   }
 
-  // Async function to create a scatter plot
-  async createScatterPlot() {
-    const featureLayer = await loadFeatureLayer('8871626e970a4f3e9d6113ec63a92f2f');
+  /**
+   * Function to initialize the scatterplot.
+   */
+  async initScatterplot() {
+    const layer = await createFeatureLayer(
+      "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0"
+    );
 
-    const scatterPlotParams = {
-      layer: featureLayer,
-      xAxisFieldName: 'Earnings',
-      yAxisFieldName: 'Cost',
-    };
+    // Create a new ScatterPlotModel and set the x and y axis fields.
+    const scatterplotModel = new ScatterPlotModel();
+    await scatterplotModel.setup({ layer });
 
-    const scatterPlotModel = new ScatterPlotModel(scatterPlotParams);
+    await scatterplotModel.setXAxisField("Ward");
+    await scatterplotModel.setYAxisField("Beat");
 
-    const config = await scatterPlotModel.config;
+    // Set the scatterplot element's config and layer properties.
+    const config = scatterplotModel.getConfig();
 
-    if (this.scatterPlot !== undefined) {
-      this.scatterPlot.config = config;
-      this.scatterPlot.layer = featureLayer;
+    if (this.scatterplot !== undefined) {
+      this.scatterplot.config = config;
+      this.scatterplot.layer = layer;
     }
   }
 }

packages/charts-components/templates/vue/src/utils/load-data.js → packages/charts-components/templates/angular/src/functions/create-feature-layer.service.ts

@@ -16,14 +16,11 @@
 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
 
 /**
- * Simple data loader against public data.
- * For the test data, we need a feature layer.
+ * Create a feature layer with a service URL. This will be used to create a chart later.
  */
-export async function loadFeatureLayer(portalItemId) {
+export async function createFeatureLayer(url: string): Promise<any> {
   const featureLayer = new FeatureLayer({
-    portalItem: {
-      id: portalItemId
-    }
+    url: url
   });
 
   await featureLayer.load();