nommuna2/index.html

## index.html
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>ArcGIS JSAPI 4.6 TypeScript Demo</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
    <script>
        var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
        window.dojoConfig = {
            packages: [{
                name: "app",
                location: locationPath + "/app"
            },{
                name: "chart.js",
                location: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"
            }]
        };
    </script>
    <script src="https://js.arcgis.com/4.6"></script>

</head>

<body>
    <div id="viewDiv"></div>
    <script>
        require(["app/main"]);
    </script>
</body>

</html>

## main.ts
import EsriMap = require("esri/Map");
import MapView = require("esri/views/MapView");
import FeatureLayer = require("esri/layers/FeatureLayer");
import PopupTemplate = require("esri/PopupTemplate");
import Popup = require("esri/widgets/Popup");
import Query = require("esri/tasks/support/Query");
import Chart = require("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js");

const featureLayerRenderer: any = {
    type: "simple",
    symbol: {
      type: "simple-fill",
      style: "solid",
      color: "white",
    }
  };

const featureLayer: FeatureLayer = new FeatureLayer({
    url: "https://services.arcgis.com/Wl7Y1m92PbjtJs5n/ArcGIS/rest/services/Californiaaa/FeatureServer/10",
    definitionExpression: "STATE_NAME = 'California'",
    renderer: featureLayerRenderer,
    visible: true
});

const map: EsriMap = new EsriMap({
    basemap: "dark-gray",
    layers: [featureLayer]
});

const view: MapView = new MapView({
    map: map,
    container: "viewDiv",
    center: [-118.244, 34.052],
    zoom: 7,
    popup: {
        dockEnabled: true,
        visible: false,
        dockOptions: {
            breakpoint: false,
            buttonEnabled: false,
            position: "auto"
        }
    }
});

// Create a query to get data from the feature layer
let query: Query = new Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
query.where = "1=1";
query.num = 50;

// On view click, query the feature layer and pass the results to setContentInfo function.
view.on("click", (e) => {
    query.geometry = e.mapPoint;
    featureLayer.queryFeatures(query).then((results) => {
        if(results.features[0].attributes.STATE_NAME === "California"){
            view.popup.visible = true;
            view.popup.open({
                title: "Doughnut Graph Example",
                content: setContentInfo(results.features[0].attributes)
            });
        }
    });
  });

 // Using the data from the feature layer, create a doughnut graph.
function setContentInfo(results: any): any {
    // Create a new canvas element, this is where the graph will be placed.
    let canvas: any = document.createElement('canvas');
    canvas.id = "myChart";

    // Create a data object, this will include the data from the feature layer and other information like color or labels.
    let data: any = {
      datasets:[{
        data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC, results.OTHER, results.WHITE],
        backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
      }],
      labels: [
        'Asian',
        'Black',
        'Hawaiian',
        'Hispanic',
        'Other',
        'White'
      ]
    };

    //Create a new Chart and hook it to the canvas and then return the canvas.
    let myPieChart: Chart = new Chart(canvas,{
      type: 'doughnut',
      data: data
  });

   return canvas;
}
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
	<title>ArcGIS JSAPI 4.6 TypeScript Demo</title>
	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>
	<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
	<script>
	var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
	window.dojoConfig = {
	packages: [{
	name: "app",
	location: locationPath + "/app"
	},{
	name: "chart.js",
	location: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"
	}]
	};
	</script>
	<script src="https://js.arcgis.com/4.6"></script>

	</head>

	<body>
	<div id="viewDiv"></div>
	<script>
	require(["app/main"]);
	</script>
	</body>

	</html>
	import EsriMap = require("esri/Map");
	import MapView = require("esri/views/MapView");
	import FeatureLayer = require("esri/layers/FeatureLayer");
	import PopupTemplate = require("esri/PopupTemplate");
	import Popup = require("esri/widgets/Popup");
	import Query = require("esri/tasks/support/Query");
	import Chart = require("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js");

	const featureLayerRenderer: any = {
	type: "simple",
	symbol: {
	type: "simple-fill",
	style: "solid",
	color: "white",
	}
	};

	const featureLayer: FeatureLayer = new FeatureLayer({
	url: "https://services.arcgis.com/Wl7Y1m92PbjtJs5n/ArcGIS/rest/services/Californiaaa/FeatureServer/10",
	definitionExpression: "STATE_NAME = 'California'",
	renderer: featureLayerRenderer,
	visible: true
	});

	const map: EsriMap = new EsriMap({
	basemap: "dark-gray",
	layers: [featureLayer]
	});

	const view: MapView = new MapView({
	map: map,
	container: "viewDiv",
	center: [-118.244, 34.052],
	zoom: 7,
	popup: {
	dockEnabled: true,
	visible: false,
	dockOptions: {
	breakpoint: false,
	buttonEnabled: false,
	position: "auto"
	}
	}
	});

	// Create a query to get data from the feature layer
	let query: Query = new Query();
	query.returnGeometry = true;
	query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
	query.where = "1=1";
	query.num = 50;

	// On view click, query the feature layer and pass the results to setContentInfo function.
	view.on("click", (e) => {
	query.geometry = e.mapPoint;
	featureLayer.queryFeatures(query).then((results) => {
	if(results.features[0].attributes.STATE_NAME === "California"){
	view.popup.visible = true;
	view.popup.open({
	title: "Doughnut Graph Example",
	content: setContentInfo(results.features[0].attributes)
	});
	}
	});
	});

	// Using the data from the feature layer, create a doughnut graph.
	function setContentInfo(results: any): any {
	// Create a new canvas element, this is where the graph will be placed.
	let canvas: any = document.createElement('canvas');
	canvas.id = "myChart";

	// Create a data object, this will include the data from the feature layer and other information like color or labels.
	let data: any = {
	datasets:[{
	data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC, results.OTHER, results.WHITE],
	backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
	}],
	labels: [
	'Asian',
	'Black',
	'Hawaiian',
	'Hispanic',
	'Other',
	'White'
	]
	};

	//Create a new Chart and hook it to the canvas and then return the canvas.
	let myPieChart: Chart = new Chart(canvas,{
	type: 'doughnut',
	data: data
	});

	return canvas;
	}