<kendo-drawer-container>
    <kendo-drawer #drawer [mode]="'push'" position="end" [(expanded)]="expanded">
        <ng-template kendoDrawerTemplate>
            <h3> Configuration</h3>
            <select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName"
                (valueChange)="onValueChange($event)"></select-chart-type>
            <label>Series:
                <kendo-dropdownlist [data]="series" [valuePrimitive]="true" [textField]="'title'" [valueField]="'field'"
                    [(value)]="selectedSeries">
                </kendo-dropdownlist>
            </label>
        </ng-template>
    </kendo-drawer>

    <kendo-drawer-content>
        <div class="drawer-content">
            <kendo-chart #chart>
                <kendo-chart-title [text]="getTitle(selectedSeries) + ' per stock'"></kendo-chart-title>
                <kendo-chart-series>
                    <kendo-chart-series-item [type]="chartConfiguration.seriesType" [data]="data"
                        [field]="selectedSeries" [name]="selectedSeries" [categoryField]="'symbol'">
                        <kendo-chart-series-item-tooltip>
                            <ng-template let-dataItem="dataItem" let-value="value">
                                {{dataItem.symbol}} {{getTitle(selectedSeries)}}: {{value}}
                            </ng-template>
                        </kendo-chart-series-item-tooltip>
                    </kendo-chart-series-item>
                </kendo-chart-series>
                <kendo-chart-legend position="right" orientation="vertical">
                </kendo-chart-legend>
            </kendo-chart>

            <div class="window-icon-buttons">
                <button kendoButton [svgIcon]="iconDownload" title="Export as PNG"
                    (click)="exportChart(chart)"></button>
                <button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
            </div>
        </div>

        <div kendoTooltip class="window-icon-buttons" [offset]="1">
            <button kendoButton [svgIcon]="iconDownload" title="Export as PNG" (click)="exportChart(chart)"></button>
            <button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
        </div>
    </kendo-drawer-content>
</kendo-drawer-container>