Acl-comp-dev2 NPM

acl-comp-dev2

This package contains the stencil components currently being deployed and registered with npm as 'acl-comp-dev2'. These are rough stencil components in early stage development.

Note: the components require an ArcGIS username/token that must be currently valid.

Components:

arcgis-infographic: generates an ArcGIS Infographic report for a given latitude/longitude. The component automatically generates an infographic representing data collected in 1,3, and 5 mile areas around that location.
arcgis-report-list: this component fetches a list of infographic report templates available to the signed-in user from public reports and those shared by the Organization. The component emits an event that the arcgis-infographic component listens for. When a report is selected in the arcgis-report-list tree, the infographic will update to display that report for the given location.
(other c4 UI components)

Add components:

Create a web page project with package.json
Install this component package
```
npm install acl-comp-dev2@latest
```

 - Add script element to the page that points to this component's stencil-component.js file.  Example:
 ```bash        
    <!-- Runtime JS for acl-comp-dev2 components -->
    <script src="./node_modules/acl-comp-dev2/dist/stencil-components.js"></script>
    <!-- Calcite refs acl-comp-dev2 -->
    <script type="module" src=https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js></script>
    <link rel="stylesheet" type="text/css" href="./node_modules/acl-comp-dev2/dist/assets/css/calcite.css" />

Add the arcgis-infographic component element into your page HTML. Example:

    <arcgis-infographic
      id="myInfographic"
      reportId="19cdb404e60843799844d1f229a3ef75"
      reportLocation= "34.055569, -117.182541"
      username="some_username"
      token="Q9coRuBz_Gen51dIITFyLslcF3i_Ej1gp0Oaj1m7-e72BU3ekpYETE1iK0OtV_8Dob8V8q1nmmHglKAu_NvqocTbIr6QuHsR1qsTIaYAvGwDAk9e9abR7huyW5gePS3kO_TIFoTPYf1NOd5q_XCxjcJIEB-xxDt8IfQavd6NH1bG_aDO6lLmeNUfMTZQen2f-X84hOLA4pVKTBQTGE_8czpCxrOfiVCexd8vmCRVBJA."
      style="position: 'relative';width: '560px';height: '440px';border: 'solid #ADD8E6';">
    </arcgis-infographic>

Add the arcgis-report-list into your page HTML. Example

<arcgis-report-list 
    id="myReportList"            
    username="some_username"
    token= "Q9coRuBz_Gen51dIITFyLslcF3i_Ej1gp0Oaj1m7-e72BU3ekpYETE1iK0OtV_8Dob8V8q1nmmHglKAu_NvqocTbIr6QuHsR1qsTIaYAvGwDAk9e9abR7huyW5gePS3kO_TIFoTPYf1NOd5q_XCxjcJIEB-xxDt8IfQavd6NH1bG_aDO6lLmeNUfMTZQen2f-X84hOLA4pVKTBQTGE_8czpCxrOfiVCexd8vmCRVBJA.">
</arcgis-report-list>

Note: The 'arcgis-infograpic' component requires a reportId, reportLocation as "latitude,longitude" (like "34.055569, -117.182541"), arcgis username, and arcgis currently valid token. If any of those are missing, the component won't run and displays an '!' icon inside a triangle.