Arcade

    // returns the % of the population that is age 18 and older
    renderer.valueExpression = "Round( ($feature.AGE_18UP / $feature.TOTAL_POP) \* 100 )";

    renderer.valueExpression = `
        var republican = $feature.MP06025a_B;
        var democrat = $feature.MP06024a_B;
        var independent = $feature.MP06026a_B;

        var parties = [ republican, democrat, independent ];
        var total = Sum(parties);
        var max = Max(parties);
        return (max / total) \* 100;
    `;

    layer.popupTemplate = {
        content: "{expression/percent-unemployed}",
        expressionInfos: [
            {
                name: "percent-unemployed",
                title: "Percent unemployed",
                expression: `
                var unemploymentRate = ( $feature.UNEMP_CY / $feature.LABOR_FORCE ) \* 100;
                var population = $feature.POP_16UP;
                var populationNotWorking = ( ( $feature.UNEMP_CY + $feature.NOT_LABORFORCE_16 ) / $feature.POP_16UP ) \* 100;

                // returns a string built using an Arcade template literal

                return \\\\{$feature.COUNTY} County

                - Unemployment rate: \\{Text(unemploymentRate, "##.#")}%
                - % population not working: \\{Text(populationNotWorking, "##.#")}%
                - Population: \\{Text(population, "#,###")}\\
                `
            }
        ]
    };

    <script type="text/plain" id="adult-population">
        var republican = $feature.MP06025a_B;
        var democrat = $feature.MP06024a_B;
        var independent = $feature.MP06026a_B;

        var parties = [ republican, democrat, independent ];
        var total = Sum(parties);
        var max = Max(parties);
        return (max / total) \* 100;
    </script>

    renderer.valueExpression = document.getElementById("adult-population").text;

    // returns the value of a field in the layer
    // the value of this field will be the label for each feature
    const arcade = "$feature.STATION_NAME";

    // this object autocasts as new LabelClass()
    const labelClass = {
        // set the arcade expression to the `expression` property of labelExpressionInfo
        labelExpressionInfo: {
            expression: arcade
        },
        labelPlacement: "below-right",
        minScale: 2500000,
        symbol: {
            type: "label-3d",
            symbolLayers: [{
                type: "text",
                material: { color: "white" },
                halo: {
                    color: "black",
                    size: 1
                },
                size: 8
            }]
        }
    };

    // set the label class to the feature layer
    featureLayer.labelingInfo = [ labelClass ];

// labor force participation rate
Round(($feature.CIVLBFR_CY / $feature.POP_16UP)\*100,2)

layer.popupTemplate = {
    expressionInfos: [{
        name: "participation-rate",
        title: "% of population 16+ participating in the labor force",
        expression: "Round(($feature.CIVLBFR_CY / $feature.POP_16UP)\*100,2)"
    }],
    content: "In {NAME} county, {expression/participation-rate}% of the population"
    + " participates in the labor force."
};

layer.popupTemplate = {
 expressionInfos: [{
    name: "participation-rate",
    title: "% of population 16+ participating in the labor force",
    expression: "Round(($feature.CIVLBFR_CY / $feature.POP_16UP)\*100,2)"
 }],
 content: [{
    type: "fields",
    fieldInfos: [{
            fieldName: "expression/participation-rate"
        }, {
            fieldName: "CIVLBFR_CY",
            label: "Civilian labor force",
            format: {
                places: 0,
                digitSeparator: true
            }
        }, {
            fieldName: "POP_16UP",
            label: "Population 16+",
            format: {
                places: 0,
                digitSeparator: true
            }
        }
    ]
 }]
};

// returns the sum of the cost field for all features in the cluster
$feature.cluster_count \* $feature.cluster_avg_cost

// returns the total number of car crashes
// that resulted in at least one fatality in a
// cluster representing motor vehicle accidents
Count(Filter($aggregatedFeatures, "FATALITIES > 0"))

layer.featureReduction = {
    type: "cluster",
    popupTemplate: {
        expressionInfos: [{
                name: "total-cost",
                title: "Total damages",
                expression: "Text($feature.cluster_count \* $feature.cluster_avg_cost, '$#,###.##')"
            }, {
                name: "fatalities",
                title: "Crashes with fatalities",
                expression: `
                Expects($aggregatedFeatures, 'FATALITIES')
                Count(Filter($aggregatedFeatures, 'FATALITIES > 0'))
                `
            }
        ],
        content: `
            This cluster represents {cluster_count} motor vehical accidents. {expression/fatalities} of these crashes
            had at least one fatality. These crashes resulted in {expression/total-cost} of damages.
            `
    }
};

// Creates a table with only fields that contain data
var fields = Schema($feature).fields;
function getNames(field){
    return field.name;
}
function filterValidFields(fieldName){
    var invalidNames = ["objectid", "fid", "shape__area", "shape__length"];
    return !includes(invalidNames, lower(fieldName)) && !IsEmpty($feature[fieldName]) && !IsNan($feature[fieldName]);
}

var validFields = Filter(Map(fields, getNames), filterValidFields);
var attributes = {};
var fieldInfos = [];

for (var f in validFields){
    var fieldName = validFields[f];
    Push(fieldInfos, { fieldName: fieldName });
    // format numbers with digit separator and one decimal place
    var value = IIF(TypeOf($feature[fieldName] == "Number"), Text($feature[fieldName], "#,#.#"), $feature[fieldName]);
    attributes[fieldName] = value;
}

return {
    type: "fields",
    fieldInfos: fieldInfos,
    attributes: attributes
};

// Creates an column chart where each category/value
// is an aggregate of two or more fields
layer.popupTemplate = {
    title: "Educational Attainment",
    content: [{
        type: "expression",
        expressionInfo: {
            expression: `
                // Create a dictionary of attributes representing the values
                // to display in the chart
                var attributes = {
                "No School": $feature.no_school + $feature.some_primary,
                "Primary": $feature.primary_complete + $feature.some_secondary,
                "Secondary": $feature.secondary_complete + $feature.some_highSchool,
                "High School": $feature.highSchool_diploma + $feature.highSchool_ged + $feature.some_college,
                "College/University": $feature.associates + $feature.bachelors + $feature.masters + $feature.doctorate + $feature.professional;
                };

                var fields = [];

                // Create an array representing the attribute names (or keys)
                for (var k in attributes){
                Push(fields, k);
                }

                // Returns a dictionary providing the information
                // required by the popup to render a column chart
                return {
                type: "media",
                attributes: attributes,
                title: "Educational attainment",
                mediaInfos: [{
                type: "columnchart",
                value: {
                // The list of attribute names (keys) to include in the chart
                fields: fields
                }
                }]
                };
                `,
            title: "Educational Attainment"
        }
    }]
};

 let popupTemplate = {
    title: "Power plant summary",
    content: [
        {
            type: "text",
            text: "The following list describes the number of power plants used to generate power for each fuel type in this cluster."
        },
        {
            type: "expression",
            expressionInfo: {
                expression: `
                Expects($aggregatedFeatures, "fuel1")

                var statsFS = GroupBy($aggregatedFeatures,
                [
                { name: 'Type', expression: 'fuel1'},
                ],
                [ // statistics to return for each fuel type
                { name: 'num_features', expression: '1', statistic: 'COUNT' }
                ]
                );
                var ordered = OrderBy(statsFs, 'num_features DESC');

                var list = "<ol>";

                for (var group in ordered){
                list += \\<li>\\{group.Type} (\\{Text(group.num_features, "#,###")})</li>\\
                }
                list += "</ol>";

                return {
                type: "text",
                text: list
                }
                `,
                title: "Total Capacity List"
            }
        }
    ]
 };

 let popupTemplate = {
    title: "Power plant summary",
    content: [
        {
            type: "text",
            text: "The following table describes the total megawatt capacity of power plants used to generate power for each fuel type in this cluster."
        },
        {
            type: "expression",
            expressionInfo: {
                expression: `
                    Expects($aggregatedFeatures, "fuel1", "capacity_mw")
                    var attributes = {};
                    var fieldInfos = [];

                    var statsFS = GroupBy($aggregatedFeatures,
                    [
                    { name: 'Type', expression: 'fuel1'},
                    ],
                    [ // statistics to return for each unique category
                    { name: 'capacity_total', expression: 'capacity_mw', statistic: 'SUM' }
                    ]
                    );
                    var ordered = OrderBy(statsFs, 'capacity_total DESC');

                    for(var f in ordered){
                    var type = f.Type;
                    attributes[type] = Text(f.capacity_total, "#,### mW");
                    Push(fieldInfos, {
                    fieldName: type
                    });
                    }

                    return {
                    type: "fields",
                    attributes: attributes,
                    fieldInfos: fieldInfos,
                    }
                    `,
                title: "Table of fuel types"
            }
        }
    ]
 };

 let popupTemplate = {
    title: "Power plant summary",
    content: [{
        type: "expression",
        expressionInfo: {
            expression: `
                Expects($aggregatedFeatures, "fuel1")
                var attributes = {};
                var fieldNames = [];

                var types = Distinct($aggregatedFeatures, "fuel1");

                for(var t in types){
                var type = t.fuel1;
                Push(fieldNames, type);
                attributes[type] = Count(Filter($aggregatedFeatures, "fuel1 = @type" ));
                }

                return {
                type: "media",
                attributes: attributes,
                title: "Total power plants",
                mediaInfos: [{
                type: "piechart",
                value: {
                fields: fieldNames
                }
                }]
                }
                `,
            title: "Total Power Plants Pie Chart"
        }
    }]
 };

// Assign the expression to the `valueExpression` property and
// set up the unique value infos based on the decode values
// you set up in the expression.

const winnerArcade = document.getElementById("winning-party").text;

const renderer = new UniqueValueRenderer({
    valueExpression: winnerArcade,
    valueExpressionTitle: "Counties by dominant party among registered voters",
    uniqueValueInfos: [{
        value: "democrat",
        symbol: createSymbol("#00c3ff"),
        label: "Democrat"
    }, {
        value: "republican",
        symbol: createSymbol("#ff002e"),
        label: "Republican"
    }, {
        value: "independent",
        symbol: createSymbol("#faff00"),
        label: "Independent/non-affiliated"
    }]
});

// Assign the expression to the `valueExpression` property and
// set up the unique value infos based on the decode values
// you set up in the expression.

const strengthArcade = document.getElementById("strength").text;

const opacityVV = {
    type: "opacity",
    valueExpression: strengthArcade,
    stops: [
        { value: 33, opacity: 0.1 },
        { value: 50, opacity: 1.0 }
    ]
};

// Add the visual variable to the renderer

renderer.visualVariables = [ opacityVV ];

const formTemplate = new FormTemplate({
    title: "Inspector report",
    description: "Enter all relevant information below",
    elements: [
        new FieldElement({
            fieldName: "inspector",
            label: "Inspector name"
        }),
        new FieldElement({
            fieldName: "status",
            label: "Issue status"
        }),
        new FieldElement({
            fieldName: "resolution",
            label: "Resolution",
            // expression defined below
            visibilityExpression: "resolutionVisible"
        })
    ],
    expressionInfos: [{
        name: "resolutionVisible",
        title: "Resolution if status is completed",
        expression: "$feature.status == 'Completed' && !IsEmpty($feature.resolution)"
    }]
});

const formTemplate = new FormTemplate({
    title: "Inspector report",
    description: "Enter all relevant information below",
    elements: [
        new FieldElement({
            fieldName: "Area",
            label: "Area (square meters)",
            // expression defined in expressionInfos
            valueExpression: "area"
        }),
        new FieldElement({
            fieldName: "InspectorFirst",
            label: "First Name"
        })
        new FieldElement({
            fieldName: "InspectorLast",
            label: "Last Name"
        })
        new FieldElement({
            fieldName: "FullName",
            label: "Full Name",
            // expression defined in expressionInfos
            valueExpression: "fullName"
        }),
    ],
    expressionInfos: [{
        name: "area",
        title: "Area (square meters)",
        expression: "Round(AreaGeodetic($feature, 'square-meters'), 2)"
    }, {
        name: "fullName",
        title: "Inspector full name",
        expression: `IIF(!IsEmpty($feature.InspectorFirst) && !IsEmpty($feature.InspectorLast)){
            return $feature.InspectorFirst + " " + $feature.InspectorLast;
            }`
    }]
});

// Orders features by storm warning duration in descending order.
// Warnings with longer durations will be
// rendered on top of warnings with shorter durations.
layer.orderBy = [{
    valueExpression: "DateDiff($feature.Watch_End, $feature.Watch_Start, 'hours' )",
    order: "descending"
}];

layer.elevationInfo = {
    mode: "absolute-height",
    featureExpressionInfo: {
        expression: "Geometry($feature).z + $feature.HEIGHT"
    },
    unit: "meters"
};