diff --git a/.syncpackrc.js b/.syncpackrc.js index 859cb8d..712fb11 100644 --- a/.syncpackrc.js +++ b/.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", diff --git a/package.json b/package.json index 6b1187c..fb437cb 100644 --- a/package.json +++ b/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" diff --git a/packages/charts-components/README.MD b/packages/charts-components/README.MD index 71b34d0..a1f5b6c 100644 --- a/packages/charts-components/README.MD +++ b/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) diff --git a/packages/charts-components/templates/amd-script-tag/README.md b/packages/charts-components/templates/amd-script-tag/README.md index b855271..ced79fa 100644 --- a/packages/charts-components/templates/amd-script-tag/README.md +++ b/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 \ No newline at end of file diff --git a/packages/charts-components/templates/amd-script-tag/index.html b/packages/charts-components/templates/amd-script-tag/index.html index 38168bc..c35a898 100644 --- a/packages/charts-components/templates/amd-script-tag/index.html +++ b/packages/charts-components/templates/amd-script-tag/index.html @@ -13,43 +13,65 @@ - - + + - + + + + + + - - diff --git a/packages/charts-components/templates/angular/README.md b/packages/charts-components/templates/angular/README.md index 7b1d75c..a1231b2 100644 --- a/packages/charts-components/templates/angular/README.md +++ b/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)** πŸ“ \ No newline at end of file +# Charts components Angular template \ No newline at end of file diff --git a/packages/charts-components/templates/angular/package.json b/packages/charts-components/templates/angular/package.json index 19da878..aee13d3 100644 --- a/packages/charts-components/templates/angular/package.json +++ b/packages/charts-components/templates/angular/package.json @@ -10,26 +10,26 @@ "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", @@ -37,6 +37,6 @@ "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" } } diff --git a/packages/charts-components/templates/angular/src/app/app.component.html b/packages/charts-components/templates/angular/src/app/app.component.html index fae202b..a84420d 100644 --- a/packages/charts-components/templates/angular/src/app/app.component.html +++ b/packages/charts-components/templates/angular/src/app/app.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/charts-components/templates/angular/src/app/app.component.ts b/packages/charts-components/templates/angular/src/app/app.component.ts index 6fbd23f..43d81e1 100644 --- a/packages/charts-components/templates/angular/src/app/app.component.ts +++ b/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; } } } diff --git a/packages/charts-components/templates/vue/src/utils/load-data.js b/packages/charts-components/templates/angular/src/functions/create-feature-layer.service.ts similarity index 79% rename from packages/charts-components/templates/vue/src/utils/load-data.js rename to packages/charts-components/templates/angular/src/functions/create-feature-layer.service.ts index 985c06a..fa3ac9d 100644 --- a/packages/charts-components/templates/vue/src/utils/load-data.js +++ b/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 { const featureLayer = new FeatureLayer({ - portalItem: { - id: portalItemId - } + url: url }); await featureLayer.load(); diff --git a/packages/charts-components/templates/angular/src/functions/load-data.service.ts b/packages/charts-components/templates/angular/src/functions/load-data.service.ts deleted file mode 100644 index a298809..0000000 --- a/packages/charts-components/templates/angular/src/functions/load-data.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -/* Copyright 2024 Esri - * - * Licensed under the Apache License Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import WebMap from "@arcgis/core/WebMap"; -import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; - -/** - * Simple data loader against public data. - * For the test data, we need a feature layer. - */ -export async function loadFeatureLayer(portalItemId: string): Promise { - const featureLayer = new FeatureLayer({ - portalItem: { - id: portalItemId - } - }); - - await featureLayer.load(); - - return featureLayer; -} diff --git a/packages/charts-components/templates/react/README.md b/packages/charts-components/templates/react/README.md index 3411f18..224df01 100644 --- a/packages/charts-components/templates/react/README.md +++ b/packages/charts-components/templates/react/README.md @@ -1,7 +1,5 @@ # Charts components React using Vite 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/react)** πŸ“ - This repository showcases how to integrate the charts components with [React](https://react.dev/). ## Get started @@ -73,9 +71,3 @@ npm run preview ``` yarn preview ``` - -## Learn More - -You can learn more in the [Vite guides](https://vitejs.dev/guide/). - -To learn React, check out the [React documentation](https://react.dev/). diff --git a/packages/charts-components/templates/react/package.json b/packages/charts-components/templates/react/package.json index 1041d41..2057b03 100644 --- a/packages/charts-components/templates/react/package.json +++ b/packages/charts-components/templates/react/package.json @@ -8,18 +8,18 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/charts-components-react": "~4.29.6", - "@arcgis/charts-model": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components-react": "^2.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@arcgis/charts-components-react": "~4.30.0", + "@arcgis/charts-model": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components-react": "^2.8.5", + "react": "^18.3.0", + "react-dom": "^18.3.0" }, "devDependencies": { - "@types/react": "^18.2.48", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", - "typescript": "~5.3.2", + "typescript": "~5.4.5", "vite": "^5.1.3" }, "browserslist": { diff --git a/packages/charts-components/templates/react/src/components/Charts.tsx b/packages/charts-components/templates/react/src/components/Charts.tsx deleted file mode 100644 index 3d709ab..0000000 --- a/packages/charts-components/templates/react/src/components/Charts.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/* Copyright 2024 Esri - * - * Licensed under the Apache License Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { useEffect, useRef, useCallback } from 'react'; - -import { ArcgisChartsActionBar, ArcgisChartsScatterPlot } from '@arcgis/charts-components-react'; -import { ScatterPlotModel } from '@arcgis/charts-model'; - -import { loadFeatureLayer } from '../functions/load-data'; - -import './Charts.css'; -// set the default action bar based on the series type -function setDefaultActionBar(chartElementId: string, seriesType: string) { - const actionBarElement = document.getElementById(chartElementId) as HTMLArcgisChartsActionBarElement; - - if (actionBarElement !== null) { - actionBarElement.actionBarHideActionsProps = { - hideRotateChart: seriesType === 'histogramSeries' || seriesType === 'pieSeries' || seriesType === 'scatterSeries', - hideFilterByExtent: true, - hideZoom: true, - hideSelection: true, - hideFullExtent: true, - }; - } -} - -export default function Charts() { - const scatterPlotRef = useRef(null); - - // useCallback to prevent the function from being recreated when the component rebuilds - const initializeChart = useCallback(async () => { - const featureLayer = await loadFeatureLayer(); - - const scatterPlotParams = { - layer: featureLayer, - xAxisFieldName: 'Earnings', - yAxisFieldName: 'Cost', - }; - - const scatterPlotModel = new ScatterPlotModel(scatterPlotParams); - - const config = await scatterPlotModel.config; - - scatterPlotRef.current.config = config; - scatterPlotRef.current.layer = featureLayer; - - // add event listener when selection is made on the chart to enable/disable action bar buttons - scatterPlotRef.current.addEventListener('arcgisChartsSelectionComplete', (event: CustomEvent) => { - const actionBarElement = document.getElementById('scatter-plot-action-bar') as HTMLArcgisChartsActionBarElement; - - const selectionData = event.detail; - if (selectionData.selectionOIDs === undefined || selectionData.selectionOIDs.length === 0) { - actionBarElement.disableClearSelection = true; - actionBarElement.disableFilterBySelection = true; - } else { - actionBarElement.disableClearSelection = false; - actionBarElement.disableFilterBySelection = false; - } - }); - - // set the default actions for the action bar based on the series type - setDefaultActionBar('scatter-plot-action-bar', config.series[0].type); - }, []); - - // Register a function that will execute after the current render cycle - useEffect(() => { - initializeChart().catch(console.error); - }, [initializeChart]); - - return ( - - - - ); -} diff --git a/packages/charts-components/templates/react/src/components/Scatterplot.tsx b/packages/charts-components/templates/react/src/components/Scatterplot.tsx new file mode 100644 index 0000000..aed637c --- /dev/null +++ b/packages/charts-components/templates/react/src/components/Scatterplot.tsx @@ -0,0 +1,90 @@ +/* Copyright 2024 Esri + * + * Licensed under the Apache License Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useEffect, useRef, useCallback } from "react"; + +import { ArcgisChartsActionBar, ArcgisChartsScatterPlot } from "@arcgis/charts-components-react"; +import { ScatterPlotModel } from "@arcgis/charts-model"; + +import { createFeatureLayer } from "../functions/create-feature-layer"; + +import "./Charts.css"; +// set the default action bar based on the series type +function setDefaultActionBar(chartElementId: string, seriesType: string) { + const actionBarElement = document.getElementById(chartElementId) as HTMLArcgisChartsActionBarElement; + + if (actionBarElement !== null) { + actionBarElement.actionBarHideActionsProps = { + hideRotateChart: seriesType === "histogramSeries" || seriesType === "pieSeries" || seriesType === "scatterSeries", + hideFilterByExtent: true, + hideZoom: true, + hideSelection: true, + hideFullExtent: true + }; + } +} + +// Default export for the Scatterplot component +export default function Scatterplot() { + const scatterplotRef = useRef(null); + + // useCallback to prevent the function from being recreated when the component rebuilds + const initScatterplot = useCallback(async () => { + const layer = await createFeatureLayer( + "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0" + ); + + // 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(); + + scatterplotRef.current.config = config; + scatterplotRef.current.layer = layer; + + // Add event listener when selection is made on the chart to enable/disable action bar buttons. + scatterplotRef.current.addEventListener("arcgisChartsSelectionComplete", (event: CustomEvent) => { + const actionBarElement = document.getElementById("scatterplot-action-bar") as HTMLArcgisChartsActionBarElement; + + const selectionData = event.detail; + if (selectionData.selectionOIDs === undefined || selectionData.selectionOIDs.length === 0) { + actionBarElement.clearSelectionState = "disabled"; + actionBarElement.filterBySelectionState = "disabled"; + } else { + actionBarElement.clearSelectionState = "enabled"; + actionBarElement.filterBySelectionState = "enabled"; + } + }); + + // Set the default actions for the action bar based on the series type + setDefaultActionBar("scatterplot-action-bar", config.series[0].type); + }, []); + + // Register a function that will execute after the current render cycle + useEffect(() => { + initScatterplot().catch(console.error); + }, [initScatterplot]); + + return ( + + + + ); +} diff --git a/packages/charts-components/templates/webpack/src/load-data.js b/packages/charts-components/templates/react/src/functions/create-feature-layer.ts similarity index 79% rename from packages/charts-components/templates/webpack/src/load-data.js rename to packages/charts-components/templates/react/src/functions/create-feature-layer.ts index 985c06a..fa3ac9d 100644 --- a/packages/charts-components/templates/webpack/src/load-data.js +++ b/packages/charts-components/templates/react/src/functions/create-feature-layer.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 { const featureLayer = new FeatureLayer({ - portalItem: { - id: portalItemId - } + url: url }); await featureLayer.load(); diff --git a/packages/charts-components/templates/react/src/index.tsx b/packages/charts-components/templates/react/src/index.tsx index 2c8e29a..a94f5d8 100644 --- a/packages/charts-components/templates/react/src/index.tsx +++ b/packages/charts-components/templates/react/src/index.tsx @@ -15,17 +15,17 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import Charts from './components/Charts'; +import Scatterplot from './components/Scatterplot'; import { defineCustomElements as defineCalciteElements } from '@esri/calcite-components/dist/loader'; import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader'; // 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' }); -defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.5.1/assets' }); +defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); +defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + ); diff --git a/packages/charts-components/templates/vite/README.md b/packages/charts-components/templates/vite/README.md index 05b212b..f743821 100644 --- a/packages/charts-components/templates/vite/README.md +++ b/packages/charts-components/templates/vite/README.md @@ -1,7 +1,5 @@ # Charts components Vite 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/vite)** πŸ“ - This project showcases how to integrate the charts components using vite. ## Get started @@ -73,11 +71,3 @@ npm run preview ``` yarn preview ``` - -## Resources - -[ArcGIS Core - Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) - -[ViteJS - Why Vite](https://vitejs.dev/guide/why.html) - -[ViteJS - Getting Started](https://vitejs.dev/guide/) diff --git a/packages/charts-components/templates/react/src/functions/load-data.ts b/packages/charts-components/templates/vite/create-feature-layer.js similarity index 78% rename from packages/charts-components/templates/react/src/functions/load-data.ts rename to packages/charts-components/templates/vite/create-feature-layer.js index 141a978..e401b26 100644 --- a/packages/charts-components/templates/react/src/functions/load-data.ts +++ b/packages/charts-components/templates/vite/create-feature-layer.js @@ -16,15 +16,13 @@ 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() { +export async function createFeatureLayer(url) { const featureLayer = new FeatureLayer({ - portalItem: { - id: '8871626e970a4f3e9d6113ec63a92f2f', - }, + url: url, }); + await featureLayer.load(); return featureLayer; diff --git a/packages/charts-components/templates/vite/index.html b/packages/charts-components/templates/vite/index.html index ee08365..f3aa645 100644 --- a/packages/charts-components/templates/vite/index.html +++ b/packages/charts-components/templates/vite/index.html @@ -8,7 +8,7 @@ - + diff --git a/packages/charts-components/templates/vite/main.js b/packages/charts-components/templates/vite/main.js index d524588..ee25658 100644 --- a/packages/charts-components/templates/vite/main.js +++ b/packages/charts-components/templates/vite/main.js @@ -16,28 +16,32 @@ import './style.css'; import { ScatterPlotModel } from '@arcgis/charts-model'; -import { loadFeatureLayer } from './load-data'; +import { createFeatureLayer } from './create-feature-layer'; import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader'; -// 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' }); +// Define custom elements in the browser, and load the assets from the CDN +defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); -(async () => { - const scatterPlotRef = document.querySelector('arcgis-charts-scatter-plot'); +// Function to initialize the scatterplot. +async function initScatterplot() { + const layer = await createFeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0'); - const featureLayer = await loadFeatureLayer('8871626e970a4f3e9d6113ec63a92f2f'); + const scatterplotElement = document.getElementById('scatterplot'); - 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(); - scatterPlotRef.config = config; - scatterPlotRef.layer = featureLayer; -})(); + scatterplotElement.config = config; + scatterplotElement.layer = layer; +} + +// Call initScatterplot() function to render the chart. +initScatterplot(); diff --git a/packages/charts-components/templates/vite/package.json b/packages/charts-components/templates/vite/package.json index 79c1b01..2021dce 100644 --- a/packages/charts-components/templates/vite/package.json +++ b/packages/charts-components/templates/vite/package.json @@ -8,10 +8,10 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/charts-components": "~4.29.6", - "@arcgis/charts-model": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components": "^2.5.1" + "@arcgis/charts-components": "~4.30.0", + "@arcgis/charts-model": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components": "^2.8.5" }, "devDependencies": { "resolve-pkg": "^2.0.0", diff --git a/packages/charts-components/templates/vue/README.md b/packages/charts-components/templates/vue/README.md index 646eb41..4318ac7 100644 --- a/packages/charts-components/templates/vue/README.md +++ b/packages/charts-components/templates/vue/README.md @@ -1,7 +1,5 @@ # Vue 3 + Vite -πŸ“ **[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/vue)** πŸ“ - This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` diff --git a/packages/charts-components/templates/vue/src/components/Charts.vue b/packages/charts-components/templates/vue/src/components/Charts.vue deleted file mode 100644 index 8a8a6f3..0000000 --- a/packages/charts-components/templates/vue/src/components/Charts.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/packages/charts-components/templates/vue/src/components/Scatterplot.vue b/packages/charts-components/templates/vue/src/components/Scatterplot.vue new file mode 100644 index 0000000..13a9a46 --- /dev/null +++ b/packages/charts-components/templates/vue/src/components/Scatterplot.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/charts-components/templates/vue/src/main.js b/packages/charts-components/templates/vue/src/main.js index 49d18e5..3fdce89 100644 --- a/packages/charts-components/templates/vue/src/main.js +++ b/packages/charts-components/templates/vue/src/main.js @@ -22,7 +22,7 @@ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-com import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; // define custom elements in the browser, and load the assets from the CDN -defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); -defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" }); +defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); +defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); createApp(App).mount("#app"); diff --git a/packages/charts-components/templates/vite/load-data.js b/packages/charts-components/templates/vue/src/utils/create-feature-layer.js similarity index 73% rename from packages/charts-components/templates/vite/load-data.js rename to packages/charts-components/templates/vue/src/utils/create-feature-layer.js index 985c06a..e401b26 100644 --- a/packages/charts-components/templates/vite/load-data.js +++ b/packages/charts-components/templates/vue/src/utils/create-feature-layer.js @@ -13,17 +13,14 @@ * limitations under the License. */ -import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; +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) { const featureLayer = new FeatureLayer({ - portalItem: { - id: portalItemId - } + url: url, }); await featureLayer.load(); diff --git a/packages/charts-components/templates/webpack/README.md b/packages/charts-components/templates/webpack/README.md index 941d204..b705c32 100644 --- a/packages/charts-components/templates/webpack/README.md +++ b/packages/charts-components/templates/webpack/README.md @@ -1,7 +1,5 @@ # Charts components Webpack 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/webpack)** πŸ“ - This repository showcases how to integrate the charts components using webpack. ## Project setup @@ -49,58 +47,3 @@ npm run build ``` yarn build ``` - -#### JS - -Imported the components using [Stencil's pattern for integrating components without a JavaScript framework](https://stenciljs.com/docs/javascript). - -```js -import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; - -// 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" }); -``` - -Use [`src/index.js`](./src/index.js) to load the data, define custom elements, and utilize various kinds of properties in the editor. Both the Calcite and Charts elements must be defined. - -#### CSS - -You can find all the necessary styling in [`src/index.css`](./src/index.css). - -#### HTML - -Parsing the `index.html` was simplified by using the HtmlWebpackPlugin in the webpack configuration file. - -```js -// webpack.config.js -const HtmlWebPackPlugin = require("html-webpack-plugin"); - -module.exports = { - plugins: [ - new HtmlWebPackPlugin({ - title: "Charts components Webpack template", - template: "./public/index.html", - filename: "./index.html", - chunksSortMode: "none", - inlineSource: ".(css)$" - }), - ... - ] -}; -``` - -## Resources - -[Webpack's getting started guide](https://webpack.js.org/guides/getting-started/) - -[Defining custom elements](https://stenciljs.com/docs/custom-elements-bundle) - -### Webpack plugins - -For the webpack configuration file ([`webpack.config.js`](webpack.config.js)) - -[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/) - -[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) - -[terser-webpack-plugin](https://webpack.js.org/plugins/terser-webpack-plugin/) diff --git a/packages/charts-components/templates/webpack/package.json b/packages/charts-components/templates/webpack/package.json index b803d7f..7b2a4c2 100644 --- a/packages/charts-components/templates/webpack/package.json +++ b/packages/charts-components/templates/webpack/package.json @@ -6,19 +6,19 @@ "start": "webpack serve --mode development" }, "dependencies": { - "@arcgis/charts-components": "~4.29.6", - "@arcgis/charts-model": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components": "^2.5.1" + "@arcgis/charts-components": "~4.30.0", + "@arcgis/charts-model": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components": "^2.8.5" }, "devDependencies": { "css-loader": "^6.10.0", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.7.6", "source-map-loader": "5.0.0", - "style-loader": "3.3.4", + "style-loader": "4.0.0", "terser-webpack-plugin": "^5.3.9", - "webpack": "^5.90.1", + "webpack": "^5.90.3", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.1" } diff --git a/packages/charts-components/templates/webpack/public/index.html b/packages/charts-components/templates/webpack/public/index.html index 13d2dc3..587af48 100644 --- a/packages/charts-components/templates/webpack/public/index.html +++ b/packages/charts-components/templates/webpack/public/index.html @@ -9,7 +9,7 @@ - + \ No newline at end of file diff --git a/packages/charts-components/templates/webpack/src/create-feature-layer.js b/packages/charts-components/templates/webpack/src/create-feature-layer.js new file mode 100644 index 0000000..e401b26 --- /dev/null +++ b/packages/charts-components/templates/webpack/src/create-feature-layer.js @@ -0,0 +1,29 @@ +/* Copyright 2024 Esri + * + * Licensed under the Apache License Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; + +/** + * Create a feature layer with a service URL. This will be used to create a chart later. + */ +export async function createFeatureLayer(url) { + const featureLayer = new FeatureLayer({ + url: url, + }); + + await featureLayer.load(); + + return featureLayer; +} diff --git a/packages/charts-components/templates/webpack/src/index.js b/packages/charts-components/templates/webpack/src/index.js index 2faffac..0967382 100644 --- a/packages/charts-components/templates/webpack/src/index.js +++ b/packages/charts-components/templates/webpack/src/index.js @@ -13,31 +13,35 @@ * limitations under the License. */ -import { ScatterPlotModel } from "@arcgis/charts-model"; -import { loadFeatureLayer } from "./load-data"; +import { ScatterPlotModel } from '@arcgis/charts-model'; +import { createFeatureLayer } from './create-feature-layer'; import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; // define custom elements in the browser, and load the assets from the CDN -defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); -defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" }); +defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); +defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); -(async () => { - const scatterPlotRef = document.querySelector("arcgis-charts-scatter-plot"); +// Function to initialize the scatterplot. +async function initScatterplot() { + const layer = await createFeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0'); - const featureLayer = await loadFeatureLayer("8871626e970a4f3e9d6113ec63a92f2f"); + const scatterplotElement = document.getElementById('scatterplot'); - 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(); - scatterPlotRef.config = config; - scatterPlotRef.layer = featureLayer; -})(); + scatterplotElement.config = config; + scatterplotElement.layer = layer; +} + +// Call initScatterplot() function to render the chart. +initScatterplot(); diff --git a/packages/charts-components/templates/webpack/webpack.config.js b/packages/charts-components/templates/webpack/webpack.config.js index 40c8bb6..1e1916d 100644 --- a/packages/charts-components/templates/webpack/webpack.config.js +++ b/packages/charts-components/templates/webpack/webpack.config.js @@ -12,57 +12,57 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -const path = require("path"); +const path = require('path'); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const TerserPlugin = require("terser-webpack-plugin"); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const TerserPlugin = require('terser-webpack-plugin'); module.exports = { entry: { - index: ["./src/index.css", "./src/index.js"] + index: ['./src/index.css', './src/index.js'], }, node: false, optimization: { - minimizer: [new TerserPlugin({ extractComments: false })] + minimizer: [new TerserPlugin({ extractComments: false })], }, output: { - path: path.resolve(__dirname, "dist"), - chunkFilename: "chunks/[id].js", - publicPath: "", - clean: true + path: path.resolve(__dirname, 'dist'), + chunkFilename: 'chunks/[id].js', + publicPath: '', + clean: true, }, devServer: { static: { - directory: path.join(__dirname, "dist") + directory: path.join(__dirname, 'dist'), }, compress: true, - port: 8080 + port: 8080, }, module: { rules: [ { test: /\.js$/, - enforce: "pre", - use: ["source-map-loader"] + enforce: 'pre', + use: ['source-map-loader'], }, { test: /\.css$/, - use: [MiniCssExtractPlugin.loader, "css-loader"] - } - ] + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], }, plugins: [ new HtmlWebpackPlugin({ - title: "Charts components Webpack template", - template: "./public/index.html", - filename: "./index.html", - chunksSortMode: "none", - inlineSource: ".(css)$" + title: 'Charts components Webpack template', + template: './public/index.html', + filename: './index.html', + chunksSortMode: 'none', + inlineSource: '.(css)$', }), new MiniCssExtractPlugin({ - filename: "[name].[chunkhash].css", - chunkFilename: "[id].css" - }) - ] + filename: '[name].[chunkhash].css', + chunkFilename: '[id].css', + }), + ], }; diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-initial/package.json b/packages/charts-components/tutorials/charts-components-with-map-components-initial/package.json index fcc6149..7799c7e 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-initial/package.json +++ b/packages/charts-components/tutorials/charts-components-with-map-components-initial/package.json @@ -7,7 +7,7 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/core": "~4.29.6" + "@arcgis/core": "~4.30.0" }, "devDependencies": { "vite": "^5.1.3" diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-solution/README.md b/packages/charts-components/tutorials/charts-components-with-map-components-solution/README.md index b4937d5..a6ca29b 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-solution/README.md +++ b/packages/charts-components/tutorials/charts-components-with-map-components-solution/README.md @@ -1,3 +1 @@ # Charts components with Map components (solution) - -πŸ“ **[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/map-components/tutorials/charts-components-with-map-components-solution)** πŸ“ diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-solution/index.html b/packages/charts-components/tutorials/charts-components-with-map-components-solution/index.html index 1c30151..d0cdf4d 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-solution/index.html +++ b/packages/charts-components/tutorials/charts-components-with-map-components-solution/index.html @@ -9,7 +9,9 @@ - + + + diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-solution/main.js b/packages/charts-components/tutorials/charts-components-with-map-components-solution/main.js index 2657989..0e4872e 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-solution/main.js +++ b/packages/charts-components/tutorials/charts-components-with-map-components-solution/main.js @@ -25,22 +25,29 @@ import { defineCustomElements as defineMapElements } from "@arcgis/map-component * you need to keep the version number in the path the same as the version of * `@esri/calcite-components` installed as a dependency of `@arcgis/map-components`. */ -defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); +defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); /** * Use the Map Components to define and lazy load the custom map elements. */ -defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); +defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); /** * Use the Charts Components to define and lazy load the custom charts elements. */ -defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.29/t9n" }); +defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.30/t9n" }); + +/** + * Get a reference to the `arcgis-charts-scatter-plot` element + */ +const mapElement = document.querySelector("arcgis-map"); +const scatterplotElement = document.querySelector("arcgis-charts-scatter-plot"); +const actionBarElement = document.querySelector("arcgis-charts-action-bar"); /** * Add an event listener for the `arcgis-map` component's `arcgisViewReadyChange` event. */ -document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", (event) => { +mapElement.addEventListener("arcgisViewReadyChange", (event) => { /** * Get the map and the view from the event target */ @@ -52,11 +59,6 @@ document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", ( const featureLayer = map.layers.find((layer) => layer.title === "CollegeScorecard_Charts"); const scatterplotConfig = featureLayer.charts[0]; - /** - * Get a reference to the `arcgis-charts-scatter-plot` element - */ - const scatterplotElement = document.querySelector("arcgis-charts-scatter-plot"); - /** * Assign the config and the layer to the chart element to render the chart */ @@ -73,4 +75,43 @@ document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", ( map.highlightSelect?.remove(); map.highlightSelect = featureLayerViews.items[0].highlight(event.detail.selectionOIDs); }); + + /** + * Add an event listener to the action bar element to listen to the default action select event. + */ + actionBarElement.addEventListener("arcgisChartsDefaultActionSelect", (event) => { + // Get the actionId and actionActive from the event detail + const { actionId, actionActive } = event.detail; + + if (actionId === "filterByExtent") { + if (mapElement.view !== undefined) { + // Set the view of the scatterplot element to the map view if the Filter By Extent action is toggled on + scatterplotElement.view = actionActive ? mapElement.view : undefined; + } + } + }); +}); + +/** + * Add an event listener to the `arcgisViewClick` event on the `arcgis-map` element. + * This is used to sync up a selection on the map with the scatterplot. + */ +mapElement.addEventListener("arcgisViewClick", (event) => { + // Get the view from the event target + const { view } = event.target; + + // Get the screen points from the event detail + var screenPoints = event.detail.screenPoint; + view.hitTest(screenPoints).then(getFeatures); + + // Get the features from the hitTest + function getFeatures(response) { + // Get the selected feature OID + const selectedFeatureOID = response.results[0].graphic.attributes["ObjectId"]; + + // Set the selection data on the scatterplot element + scatterplotElement.selectionData = { + selectionOIDs: [selectedFeatureOID] + }; + } }); diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-solution/package.json b/packages/charts-components/tutorials/charts-components-with-map-components-solution/package.json index 87210a1..c857035 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-solution/package.json +++ b/packages/charts-components/tutorials/charts-components-with-map-components-solution/package.json @@ -7,10 +7,10 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/charts-components": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@arcgis/map-components": "~4.29.6", - "@esri/calcite-components": "^2.5.1" + "@arcgis/charts-components": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@arcgis/map-components": "~4.30.0", + "@esri/calcite-components": "^2.8.5" }, "devDependencies": { "vite": "^5.1.3" diff --git a/packages/charts-components/tutorials/charts-components-with-map-components-solution/style.css b/packages/charts-components/tutorials/charts-components-with-map-components-solution/style.css index 88f78b4..75d4424 100644 --- a/packages/charts-components/tutorials/charts-components-with-map-components-solution/style.css +++ b/packages/charts-components/tutorials/charts-components-with-map-components-solution/style.css @@ -1,5 +1,5 @@ /* import the `@arcgis/core` light theme */ -@import "https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css"; +@import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; html, body { diff --git a/packages/coding-components/README.MD b/packages/coding-components/README.MD index 6e84d69..6072740 100644 --- a/packages/coding-components/README.MD +++ b/packages/coding-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 coding 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/coding-components/templates)** πŸ“ - These templates and samples are for [@arcgis/coding-components](https://www.npmjs.com/package/@arcgis/coding-components) diff --git a/packages/coding-components/templates/amd-script-tag/README.md b/packages/coding-components/templates/amd-script-tag/README.md index 57e4244..2bd1914 100644 --- a/packages/coding-components/templates/amd-script-tag/README.md +++ b/packages/coding-components/templates/amd-script-tag/README.md @@ -1,11 +1,3 @@ # Coding 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/coding-components/templates/amd-script-tag)** πŸ“ - Since the ArcGIS Maps SDK for JavaScript and Calcite Components are dependencies of Coding Components they have to be loaded first. Coding Components will detect that it is used under AMD and will require its Maps SDK dependencies through AMD loading. - -## 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) diff --git a/packages/coding-components/templates/amd-script-tag/index.html b/packages/coding-components/templates/amd-script-tag/index.html index 0028c96..bf1e0d7 100644 --- a/packages/coding-components/templates/amd-script-tag/index.html +++ b/packages/coding-components/templates/amd-script-tag/index.html @@ -13,35 +13,41 @@ display: flex; flex-direction: column; align-items: center; - margin: 4rem 2rem; height: 70vh; min-height: 400px; + width: 100%; + box-sizing: border-box; + padding: 1rem; } + arcgis-arcade-editor { - max-width: 80%; + width: 100%; + max-width: 100%; + box-sizing: border-box; } - - - + + + - + - +
@@ -87,13 +93,13 @@ const arcadeEditorElt = document.querySelector("arcgis-arcade-editor"); // Log script change events - arcadeEditorElt.addEventListener("scriptChange", async (e) => { + arcadeEditorElt.addEventListener("arcgisScriptChange", async (e) => { console.log("script:", e.detail); // console.log("outputType on script:", await arcadeEditorElt.getOutputType()); }); // Log editor diagnostics - arcadeEditorElt.addEventListener("diagnosticsChange", async (e) => { + arcadeEditorElt.addEventListener("arcgisDiagnosticsChange", async (e) => { console.log("diagnostics:", e.detail); }); diff --git a/packages/coding-components/templates/angular/README.md b/packages/coding-components/templates/angular/README.md index f3abee9..11cb2e3 100644 --- a/packages/coding-components/templates/angular/README.md +++ b/packages/coding-components/templates/angular/README.md @@ -1,3 +1 @@ -# Coding 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/coding-components/templates/angular)** πŸ“ \ No newline at end of file +# Coding components Angular template \ No newline at end of file diff --git a/packages/coding-components/templates/angular/package.json b/packages/coding-components/templates/angular/package.json index 5aa4752..588e756 100644 --- a/packages/coding-components/templates/angular/package.json +++ b/packages/coding-components/templates/angular/package.json @@ -10,25 +10,25 @@ "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/coding-components-angular": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components-angular": "^2.4.0", + "@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/coding-components-angular": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components-angular": "^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", "@types/sortablejs": "^1.15.5", "jasmine-core": "~5.1.0", @@ -37,6 +37,6 @@ "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" } } diff --git a/packages/coding-components/templates/angular/src/app/app.component.css b/packages/coding-components/templates/angular/src/app/app.component.css index c595624..b5b66f2 100644 --- a/packages/coding-components/templates/angular/src/app/app.component.css +++ b/packages/coding-components/templates/angular/src/app/app.component.css @@ -2,11 +2,15 @@ display: flex; flex-direction: column; align-items: center; - margin: 4rem 2rem; height: 70vh; min-height: 400px; -} - -arcgis-arcade-editor { - max-width: 80%; -} + width: 100%; + box-sizing: border-box; + padding: 1rem; + } + + arcgis-arcade-editor { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } \ No newline at end of file diff --git a/packages/coding-components/templates/angular/src/app/app.component.ts b/packages/coding-components/templates/angular/src/app/app.component.ts index 691f389..c5ec3b2 100644 --- a/packages/coding-components/templates/angular/src/app/app.component.ts +++ b/packages/coding-components/templates/angular/src/app/app.component.ts @@ -41,8 +41,8 @@ export class AppComponent implements OnInit { ngOnInit() { // define custom elements in the browser, and load the assets from the CDN - defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); - defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.29/assets" }); + defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); + defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); // Call async functions here this.fetch(); } diff --git a/packages/coding-components/templates/angular/src/styles.css b/packages/coding-components/templates/angular/src/styles.css index dabb541..0ec7bce 100644 --- a/packages/coding-components/templates/angular/src/styles.css +++ b/packages/coding-components/templates/angular/src/styles.css @@ -1,6 +1,6 @@ -@import "https://js.arcgis.com/coding-components/4.29/arcgis-coding-components.css"; -@import "https://js.arcgis.com/calcite-components/2.5.1/calcite.css"; -@import "https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css"; +@import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; +@import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; +@import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; html, body { diff --git a/packages/coding-components/templates/react/README.md b/packages/coding-components/templates/react/README.md index 221bdda..df3a3cb 100644 --- a/packages/coding-components/templates/react/README.md +++ b/packages/coding-components/templates/react/README.md @@ -1,7 +1,5 @@ # Coding components React using Vite 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/coding-components/templates/react)** πŸ“ - This repository showcases how to integrate the coding components with [React](https://react.dev/). ## Get started @@ -73,9 +71,3 @@ npm run preview ``` yarn preview ``` - -## Learn More - -You can learn more in the [Vite guides](https://vitejs.dev/guide/). - -To learn React, check out the [React documentation](https://react.dev/). diff --git a/packages/coding-components/templates/react/package.json b/packages/coding-components/templates/react/package.json index a759507..30e69ab 100644 --- a/packages/coding-components/templates/react/package.json +++ b/packages/coding-components/templates/react/package.json @@ -8,17 +8,17 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/coding-components-react": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components-react": "^2.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@arcgis/coding-components-react": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components-react": "^2.8.5", + "react": "^18.3.0", + "react-dom": "^18.3.0" }, "devDependencies": { - "@types/react": "^18.2.48", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", - "typescript": "~5.3.2", + "typescript": "~5.4.5", "vite": "^5.1.3" }, "browserslist": { diff --git a/packages/coding-components/templates/react/src/components/ArcadeEditor.css b/packages/coding-components/templates/react/src/components/ArcadeEditor.css index e7dd20a..d6ed067 100644 --- a/packages/coding-components/templates/react/src/components/ArcadeEditor.css +++ b/packages/coding-components/templates/react/src/components/ArcadeEditor.css @@ -1,5 +1,5 @@ -@import "https://js.arcgis.com/coding-components/4.29/arcgis-coding-components.css"; -@import "https://js.arcgis.com/calcite-components/2.5.1/calcite.css"; +@import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; +@import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; html, body { @@ -10,11 +10,15 @@ body { display: flex; flex-direction: column; align-items: center; - margin: 4rem 2rem; height: 70vh; min-height: 400px; + width: 100%; + box-sizing: border-box; + padding: 1rem; } arcgis-arcade-editor { - max-width: 80%; + width: 100%; + max-width: 100%; + box-sizing: border-box; } \ No newline at end of file diff --git a/packages/coding-components/templates/react/src/components/ArcadeEditor.tsx b/packages/coding-components/templates/react/src/components/ArcadeEditor.tsx index 9eab0cf..5c4853b 100644 --- a/packages/coding-components/templates/react/src/components/ArcadeEditor.tsx +++ b/packages/coding-components/templates/react/src/components/ArcadeEditor.tsx @@ -44,12 +44,12 @@ export default function ArcadeEditor() { // Set the script on the editor script="$feature" // Log script change events - onScriptChange={async (e) => { + onArcgisScriptChange={async (e) => { console.log("script:", e.detail); // console.log("outputType on script:", await arcadeEditorElt.getOutputType()); }} // Log editor diagnostics - onDiagnosticsChange={async (e) => { + onArcgisDiagnosticsChange={async (e) => { console.log("diagnostics:", e.detail); }} // Tells Arcade editor to use the 'popup' profile and provides the necessary data used as diff --git a/packages/coding-components/templates/react/src/index.css b/packages/coding-components/templates/react/src/index.css index 6595195..75af8a0 100644 --- a/packages/coding-components/templates/react/src/index.css +++ b/packages/coding-components/templates/react/src/index.css @@ -1 +1 @@ -@import 'https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css'; \ No newline at end of file +@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css'; \ No newline at end of file diff --git a/packages/coding-components/templates/react/src/index.tsx b/packages/coding-components/templates/react/src/index.tsx index 8d4305d..595e0c1 100644 --- a/packages/coding-components/templates/react/src/index.tsx +++ b/packages/coding-components/templates/react/src/index.tsx @@ -22,8 +22,8 @@ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-com import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; // define custom elements in the browser, and load the assets from the CDN -defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.29/assets" }); -defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); +defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); +defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( diff --git a/packages/coding-components/templates/vite/README.md b/packages/coding-components/templates/vite/README.md index 91e0882..694f020 100644 --- a/packages/coding-components/templates/vite/README.md +++ b/packages/coding-components/templates/vite/README.md @@ -1,7 +1,5 @@ # Coding components Vite 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/coding-components/templates/vite)** πŸ“ - This project showcases how to integrate the coding components using vite. ## Get started @@ -73,11 +71,3 @@ npm run preview ``` yarn preview ``` - -## Resources - -[ArcGIS Core - Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) - -[ViteJS - Why Vite](https://vitejs.dev/guide/why.html) - -[ViteJS - Getting Started](https://vitejs.dev/guide/) diff --git a/packages/coding-components/templates/vite/main.js b/packages/coding-components/templates/vite/main.js index c98a11e..102d358 100644 --- a/packages/coding-components/templates/vite/main.js +++ b/packages/coding-components/templates/vite/main.js @@ -21,21 +21,21 @@ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-com import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; // define custom elements in the browser, and load the assets from the CDN -defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" }); -defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.29/assets" }); +defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); +defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); (async () => { // Get the Arcade editor element const arcadeEditorElt = document.querySelector("arcgis-arcade-editor"); // Log script change events - arcadeEditorElt.addEventListener("scriptChange", async (e) => { + arcadeEditorElt.addEventListener("arcgisScriptChange", async (e) => { console.log("script:", e.detail); // console.log("outputType on script:", await arcadeEditorElt.getTestResult()); }); // Log editor diagnostics - arcadeEditorElt.addEventListener("diagnosticsChange", async (e) => { + arcadeEditorElt.addEventListener("arcgisDiagnosticsChange", async (e) => { console.log("diagnostics:", e.detail); }); @@ -82,16 +82,4 @@ defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-compo // Everything has been loaded and assigned, we can remove scrim document.getElementById("scrim").remove(); - - // Make changes to the Monaco editor's options - // Wait for the editorInstance to be defined - const editorInstance = await arcadeEditorElt.getEditorInstance(); - - // Enable the minimap in the editor - editorInstance.updateOptions({ - // minimap: { - // enabled: true, - // }, - // lineNumbers: "off", - }); })(); diff --git a/packages/coding-components/templates/vite/package.json b/packages/coding-components/templates/vite/package.json index 04edb65..7a09490 100644 --- a/packages/coding-components/templates/vite/package.json +++ b/packages/coding-components/templates/vite/package.json @@ -8,9 +8,9 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/coding-components": "~4.29.6", - "@arcgis/core": "~4.29.6", - "@esri/calcite-components": "^2.5.1" + "@arcgis/coding-components": "~4.30.0", + "@arcgis/core": "~4.30.0", + "@esri/calcite-components": "^2.8.5" }, "devDependencies": { "vite": "^5.1.3" diff --git a/packages/coding-components/templates/vite/style.css b/packages/coding-components/templates/vite/style.css index e205cdd..ccd9537 100644 --- a/packages/coding-components/templates/vite/style.css +++ b/packages/coding-components/templates/vite/style.css @@ -1,6 +1,6 @@ -@import "https://js.arcgis.com/coding-components/4.29/arcgis-coding-components.css"; -@import "https://js.arcgis.com/calcite-components/2.5.1/calcite.css"; -@import "https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css"; +@import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; +@import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; +@import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; html, body { @@ -11,11 +11,15 @@ body { display: flex; flex-direction: column; align-items: center; - margin: 4rem 2rem; height: 70vh; min-height: 400px; + width: 100%; + box-sizing: border-box; + padding: 1rem; } arcgis-arcade-editor { - max-width: 80%; + width: 100%; + max-width: 100%; + box-sizing: border-box; } \ No newline at end of file diff --git a/packages/coding-components/templates/vue/README.md b/packages/coding-components/templates/vue/README.md index 7150a96..4318ac7 100644 --- a/packages/coding-components/templates/vue/README.md +++ b/packages/coding-components/templates/vue/README.md @@ -1,7 +1,5 @@ # Vue 3 + Vite -πŸ“ **[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/coding-components/templates/vue)** πŸ“ - This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + + - - + + diff --git a/packages/map-components/templates/angular/README.md b/packages/map-components/templates/angular/README.md index ae49371..020860a 100644 --- a/packages/map-components/templates/angular/README.md +++ b/packages/map-components/templates/angular/README.md @@ -1,3 +1 @@ # Map 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/map-components/templates/angular)** πŸ“ \ No newline at end of file diff --git a/packages/map-components/templates/angular/angular.json b/packages/map-components/templates/angular/angular.json index 1405205..d7470da 100644 --- a/packages/map-components/templates/angular/angular.json +++ b/packages/map-components/templates/angular/angular.json @@ -41,7 +41,6 @@ "development": { "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true @@ -53,10 +52,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "map-components-angular-template:build:production" + "buildTarget": "map-components-angular-template:build:production" }, "development": { - "browserTarget": "map-components-angular-template:build:development" + "buildTarget": "map-components-angular-template:build:development" } }, "defaultConfiguration": "development" @@ -64,7 +63,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "map-components-angular-template:build" + "buildTarget": "map-components-angular-template:build" } }, "test": { diff --git a/packages/map-components/templates/angular/package.json b/packages/map-components/templates/angular/package.json index 3f35769..12bdc52 100644 --- a/packages/map-components/templates/angular/package.json +++ b/packages/map-components/templates/angular/package.json @@ -10,26 +10,25 @@ "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/core": "~4.29.6", - "@arcgis/map-components-angular": "~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/core": "~4.30.0", + "@arcgis/map-components-angular": "~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", - "@stencil/core": "4.12.2", + "@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", @@ -37,6 +36,6 @@ "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" } } diff --git a/packages/map-components/templates/angular/src/app/app.component.ts b/packages/map-components/templates/angular/src/app/app.component.ts index 1a317d0..ccfc32d 100644 --- a/packages/map-components/templates/angular/src/app/app.component.ts +++ b/packages/map-components/templates/angular/src/app/app.component.ts @@ -29,6 +29,6 @@ export class AppComponent implements OnInit { } ngOnInit(): void { - defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); + defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); } } diff --git a/packages/map-components/templates/angular/src/index.html b/packages/map-components/templates/angular/src/index.html index 77f231f..3279b24 100644 --- a/packages/map-components/templates/angular/src/index.html +++ b/packages/map-components/templates/angular/src/index.html @@ -7,7 +7,7 @@ - + diff --git a/packages/map-components/templates/react/README.md b/packages/map-components/templates/react/README.md index a8abc95..2001fb3 100644 --- a/packages/map-components/templates/react/README.md +++ b/packages/map-components/templates/react/README.md @@ -1,7 +1,5 @@ # Map components React using Vite 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/map-components/templates/react)** πŸ“ - This repository showcases how to use map components with [React](https://react.dev/). ## Get started @@ -73,9 +71,3 @@ npm run preview ``` yarn preview ``` - -## Learn More - -You can learn more in the [Vite guides](https://vitejs.dev/guide/). - -To learn React, check out the [React documentation](https://react.dev/). diff --git a/packages/map-components/templates/react/index.html b/packages/map-components/templates/react/index.html index b61553b..7bc221e 100644 --- a/packages/map-components/templates/react/index.html +++ b/packages/map-components/templates/react/index.html @@ -5,24 +5,6 @@ Map components React template -
diff --git a/packages/map-components/templates/react/package.json b/packages/map-components/templates/react/package.json index 229f899..4f622ee 100644 --- a/packages/map-components/templates/react/package.json +++ b/packages/map-components/templates/react/package.json @@ -8,17 +8,17 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/core": "~4.29.6", - "@arcgis/map-components-react": "~4.29.6", - "@esri/calcite-components": "^2.5.1", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@arcgis/core": "~4.30.0", + "@arcgis/map-components-react": "~4.30.0", + "@esri/calcite-components-react": "^2.8.5", + "react": "^18.3.0", + "react-dom": "^18.3.0" }, "devDependencies": { - "@types/react": "^18.2.48", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", - "typescript": "~5.3.2", + "typescript": "~5.4.5", "vite": "^5.1.3" }, "browserslist": { diff --git a/packages/map-components/templates/react/src/index.css b/packages/map-components/templates/react/src/index.css index 325622e..885bd69 100644 --- a/packages/map-components/templates/react/src/index.css +++ b/packages/map-components/templates/react/src/index.css @@ -1 +1,11 @@ -@import 'https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/dark/main.css'; +@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; + +#root, +html, +body, +arcgis-map { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/packages/map-components/templates/react/src/index.tsx b/packages/map-components/templates/react/src/index.tsx index eaa7a3a..639c5e7 100644 --- a/packages/map-components/templates/react/src/index.tsx +++ b/packages/map-components/templates/react/src/index.tsx @@ -1,20 +1,34 @@ +/* Copyright 2024 Esri + * + * Licensed under the Apache License Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react"; -// import defineCustomElements to register custom elements with the custom elements registry -import { defineCustomElements } from "@arcgis/map-components/dist/loader"; -// Register custom elements -defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); +import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader"; + +defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( - { - console.log('MapView ready', event); + console.log("MapView ready", event); }} > diff --git a/packages/map-components/templates/vite/README.md b/packages/map-components/templates/vite/README.md index 9e1c780..d8685c7 100644 --- a/packages/map-components/templates/vite/README.md +++ b/packages/map-components/templates/vite/README.md @@ -1,7 +1,5 @@ # Map components Vite 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/map-components/templates/vite)** πŸ“ - This project showcases how to integrate the map components using Vite. ## Get started @@ -73,11 +71,3 @@ npm run preview ``` yarn preview ``` - -## Resources - -[ArcGIS Core - Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) - -[ViteJS - Why Vite](https://vitejs.dev/guide/why.html) - -[ViteJS - Getting Started](https://vitejs.dev/guide/) diff --git a/packages/map-components/templates/vite/main.js b/packages/map-components/templates/vite/main.js index d61fbc5..f7de401 100644 --- a/packages/map-components/templates/vite/main.js +++ b/packages/map-components/templates/vite/main.js @@ -1,7 +1,7 @@ import "./styles.css"; // Lazy loading ESM import { defineCustomElements } from "@arcgis/map-components/dist/loader"; - defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); + defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); const mapElement = document.querySelector('arcgis-map'); mapElement.addEventListener('arcgisViewReadyChange', event => { diff --git a/packages/map-components/templates/vite/package.json b/packages/map-components/templates/vite/package.json index e47c29b..c28c291 100644 --- a/packages/map-components/templates/vite/package.json +++ b/packages/map-components/templates/vite/package.json @@ -8,9 +8,9 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/core": "~4.29.6", - "@arcgis/map-components": "~4.29.6", - "@esri/calcite-components": "^2.5.1" + "@arcgis/core": "~4.30.0", + "@arcgis/map-components": "~4.30.0", + "@esri/calcite-components": "^2.8.5" }, "devDependencies": { "vite": "^5.1.3" diff --git a/packages/map-components/templates/vite/styles.css b/packages/map-components/templates/vite/styles.css index f5e96b6..1c48515 100644 --- a/packages/map-components/templates/vite/styles.css +++ b/packages/map-components/templates/vite/styles.css @@ -1,4 +1,4 @@ -@import 'https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/dark/main.css'; +@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; html, body { diff --git a/packages/map-components/templates/vue/README.md b/packages/map-components/templates/vue/README.md index c3a4843..6142b6f 100644 --- a/packages/map-components/templates/vue/README.md +++ b/packages/map-components/templates/vue/README.md @@ -1,7 +1,5 @@ # Map components Vue 3 + Vite 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/map-components/templates/vue)** πŸ“ - This project showcases how to integrate the map components using Vite. ## Get started @@ -73,9 +71,3 @@ npm run preview ``` yarn preview ``` - -## Resources - -[Stencil - Vue Integration](https://stenciljs.com/docs/vue) - -[Vue - Components Basics](https://vuejs.org/guide/essentials/component-basics.html) diff --git a/packages/map-components/templates/vue/package.json b/packages/map-components/templates/vue/package.json index d5df58b..9f49da5 100644 --- a/packages/map-components/templates/vue/package.json +++ b/packages/map-components/templates/vue/package.json @@ -8,10 +8,10 @@ "preview": "vite preview" }, "dependencies": { - "@arcgis/core": "~4.29.6", - "@arcgis/map-components": "~4.29.6", - "@esri/calcite-components": "^2.5.1", - "vue": "^3.4.18" + "@arcgis/core": "~4.30.0", + "@arcgis/map-components": "~4.30.0", + "@esri/calcite-components": "^2.8.5", + "vue": "^3.4.19" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.3", diff --git a/packages/map-components/templates/vue/src/App.vue b/packages/map-components/templates/vue/src/App.vue index 594fb63..332896f 100644 --- a/packages/map-components/templates/vue/src/App.vue +++ b/packages/map-components/templates/vue/src/App.vue @@ -1,7 +1,7 @@