<p>Pie Chart Select - uses Vega Schema</p>
<cob-chart>
    <script type="application/json" slot="config">
        {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "boston": {
                "chartID": "pieChart",
                "selectField": "Department",
                "defaultSelection": "Election Department"
            },
            "width": 200,
            "height": 200,
            "autosize": {
                "type": "pad",
                "resize": true
            },
            "padding": 0,
            "data": [{
                "name": "table",
                "url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-pieChartSelect.csv",
                "format": {
                    "type": "csv",
                    "parse": {
                        "Amount": "number"
                    }
                },
                "transform": [{
                        "type": "filter",
                        "expr": "datum.Year === 'FY19 Adopted'"
                    },
                    {
                        "type": "filter",
                        "expr": "if(select === 'All', datum.Department, datum.Department === select)"
                    },
                    {
                        "type": "pie",
                        "field": "Amount",
                        "sort": true
                    }
                ]
            }],
            "scales": [{
                "name": "color",
                "type": "ordinal",
                "domain": {
                    "data": "table",
                    "field": "Expense Category"
                },
                "range": {
                    "scheme": "tableau10"
                }
            }],
            "legends": [{
                "fill": "color",
                "orient": "bottom",
                "labelFont": "Lora",
                "labelLimit": 500,
                "labelFontSize": 14,
                "offset": 5
            }],
            "signals": [{
                "name": "select",
                "value": "All",
                "bind": {
                    "input": "select",
                    "name": "Select a Department: ",
                    "options": [
                        "Election Department",
                        "Law Department",
                        "Property Management Department"
                    ]
                }
            }],
            "marks": [{
                "type": "arc",
                "from": {
                    "data": "table"
                },
                "encode": {
                    "enter": {
                        "fill": {
                            "scale": "color",
                            "field": "Expense Category"
                        },
                        "x": {
                            "signal": "width / 2"
                        },
                        "y": {
                            "signal": "height / 2"
                        },
                        "tooltip": {
                            "signal": "{title: datum.Source, 'Amount of Budget': format(datum.Amount,'$,'), 'Expense Category': datum['Expense Category'], 'Department': datum.Department}"
                        }
                    },
                    "update": {
                        "startAngle": {
                            "field": "startAngle"
                        },
                        "endAngle": {
                            "field": "endAngle"
                        },
                        "padAngle": 0,
                        "innerRadius": {
                            "signal": "width / 4"
                        },
                        "outerRadius": {
                            "signal": "width / 2"
                        },
                        "cornerRadius": 0
                    }
                }
            }]
        }
    </script>
</cob-chart>