<commit_before>import {
    _,
    Autowired,
    ChartType,
    Component,
    Dialog,
    EventService, MessageBox,
    PostConstruct,
    RefSelector,
    ResizeObserverService
} from "ag-grid-community";
import {ChartOptions, GridChartFactory} from "./gridChartFactory";
import {Chart} from "../charts/chart/chart";
import {BarSeries} from "../charts/chart/series/barSeries";
import {LineSeries} from "../charts/chart/series/lineSeries";
import {PieSeries} from "../charts/chart/series/pieSeries";
import colors from "../charts/chart/colors";
import {CartesianChart} from "../charts/chart/cartesianChart";
import {PolarChart} from "../charts/chart/polarChart";
import {ChartModel} from "./rangeChart/chartModel";
import {ChartMenu} from "./menu/chartMenu";

export class GridChartComp extends Component {

    private static TEMPLATE =
        `<div class="ag-chart" tabindex="-1">
            <div ref="eChart" class="ag-chart-canvas-wrapper"></div>
        </div>`;

    @Autowired('resizeObserverService') private resizeObserverService: ResizeObserverService;
    @Autowired('eventService') eventService: EventService;

    @RefSelector('eChart') private eChart: HTMLElement;
    @RefSelector('eErrors') private eErrors: HTMLElement;

    private readonly chartOptions: ChartOptions;
    private readonly chartModel: ChartModel;

    private chartDialog: Dialog;
    private chartMenu: ChartMenu;

    private currentChartType: ChartType;
    private chart: Chart<any, string, number>;

    constructor(chartOptions: ChartOptions, chartModel: ChartModel) {
        super(GridChartComp.TEMPLATE);

        this.chartOptions = chartOptions;
        this.chartModel = chartModel;

        this.currentChartType = chartModel.getChartType();
        this.chart = GridChartFactory.createChart(chartModel.getChartType(), chartOptions, this.eChart);
    }

    @PostConstruct
    private postConstruct(): void {

        const errors = this.chartModel.getErrors();
        const errorsExist = errors && errors.length > 0;
        if (errorsExist) {
            this.showErrorMessageBox();
            this.destroy();
            return;
        }

        this.addMenu();
        this.addResizeListener();
        this.addRangeListener();

        this.addDestroyableEventListener(this.chartModel, ChartModel.EVENT_CHART_MODEL_UPDATED, this.refresh.bind(this));
        this.addDestroyableEventListener(this.chartMenu, ChartMenu.EVENT_DOWNLOAD_CHART, this.downloadChart.bind(this));
        this.addDestroyableEventListener(this.chartMenu, ChartMenu.EVENT_CLOSE_CHART, this.destroy.bind(this));

        this.refresh();
    }

    private addMenu() {
        this.chartMenu = new ChartMenu(this.chartModel);
        this.getContext().wireBean(this.chartMenu);

        if (this.chartOptions.insideDialog) {
            this.chartDialog = new Dialog({
                resizable: true,
                movable: true,
                title: 'Chart',
                component: this,
                centered: true,
                closable: false
            });
            this.getContext().wireBean(this.chartDialog);
            this.chartDialog.addTitleBarButton(this.chartMenu, 0);
        } else {
            const eChart: HTMLElement = this.getGui();
            eChart.appendChild(this.chartMenu.getGui());
        }
    }

    private downloadChart() {
        this.chart.scene.download("chart");
    }

    public getChart(): Chart<any, string, number> {
        return this.chart
    }

    public refresh(): void {
        const errors = this.chartModel.getErrors();
        const errorsExist = errors && errors.length > 0;

        if (errorsExist) {
            this.showErrorMessageBox();
        } else {
            const shouldCreateNewChart = this.chartModel.getChartType() !== this.currentChartType;
            if (shouldCreateNewChart) {
                this.createNewChart();
            }

            this.updateChart();
        }
    }

    private showErrorMessageBox() {

        // TODO this message box get destroy when grid is destroyed
        const errorMessage = this.chartModel.getErrors().join(' ');

        const messageBox = new MessageBox({
            title: 'Cannot Chart',
            message: errorMessage,
            centered: true,
            resizable: false,
            movable: true,
            width: 400,
            height: 150
        });

        this.getContext().wireBean(messageBox);
    }

    public createNewChart() {
        // capture current chart dimensions so new chart is same size
        this.chartOptions.height = this.chart.height;
        this.chartOptions.width = this.chart.width;

        // destroy chart and remove it from DOM
        this.chart.destroy();<commit_msg>AG-2839 - changed error message box title<commit_after>import {
    _,
    Autowired,
    ChartType,
    Component,
    Dialog,
    EventService, MessageBox,
    PostConstruct,
    RefSelector,
    ResizeObserverService
} from "ag-grid-community";
import {ChartOptions, GridChartFactory} from "./gridChartFactory";
import {Chart} from "../charts/chart/chart";
import {BarSeries} from "../charts/chart/series/barSeries";
import {LineSeries} from "../charts/chart/series/lineSeries";
import {PieSeries} from "../charts/chart/series/pieSeries";
import colors from "../charts/chart/colors";
import {CartesianChart} from "../charts/chart/cartesianChart";
import {PolarChart} from "../charts/chart/polarChart";
import {ChartModel} from "./rangeChart/chartModel";
import {ChartMenu} from "./menu/chartMenu";

export class GridChartComp extends Component {

    private static TEMPLATE =
        `<div class="ag-chart" tabindex="-1">
            <div ref="eChart" class="ag-chart-canvas-wrapper"></div>
        </div>`;

    @Autowired('resizeObserverService') private resizeObserverService: ResizeObserverService;
    @Autowired('eventService') eventService: EventService;

    @RefSelector('eChart') private eChart: HTMLElement;
    @RefSelector('eErrors') private eErrors: HTMLElement;

    private readonly chartOptions: ChartOptions;
    private readonly chartModel: ChartModel;

    private chartDialog: Dialog;
    private chartMenu: ChartMenu;

    private currentChartType: ChartType;
    private chart: Chart<any, string, number>;

    constructor(chartOptions: ChartOptions, chartModel: ChartModel) {
        super(GridChartComp.TEMPLATE);

        this.chartOptions = chartOptions;
        this.chartModel = chartModel;

        this.currentChartType = chartModel.getChartType();
        this.chart = GridChartFactory.createChart(chartModel.getChartType(), chartOptions, this.eChart);
    }

    @PostConstruct
    private postConstruct(): void {

        const errors = this.chartModel.getErrors();
        const errorsExist = errors && errors.length > 0;
        if (errorsExist) {
            this.showErrorMessageBox();
            this.destroy();
            return;
        }

        this.addMenu();
        this.addResizeListener();
        this.addRangeListener();

        this.addDestroyableEventListener(this.chartModel, ChartModel.EVENT_CHART_MODEL_UPDATED, this.refresh.bind(this));
        this.addDestroyableEventListener(this.chartMenu, ChartMenu.EVENT_DOWNLOAD_CHART, this.downloadChart.bind(this));
        this.addDestroyableEventListener(this.chartMenu, ChartMenu.EVENT_CLOSE_CHART, this.destroy.bind(this));

        this.refresh();
    }

    private addMenu() {
        this.chartMenu = new ChartMenu(this.chartModel);
        this.getContext().wireBean(this.chartMenu);

        if (this.chartOptions.insideDialog) {
            this.chartDialog = new Dialog({
                resizable: true,
                movable: true,
                title: 'Chart',
                component: this,
                centered: true,
                closable: false
            });
            this.getContext().wireBean(this.chartDialog);
            this.chartDialog.addTitleBarButton(this.chartMenu, 0);
        } else {
            const eChart: HTMLElement = this.getGui();
            eChart.appendChild(this.chartMenu.getGui());
        }
    }

    private downloadChart() {
        this.chart.scene.download("chart");
    }

    public getChart(): Chart<any, string, number> {
        return this.chart
    }

    public refresh(): void {
        const errors = this.chartModel.getErrors();
        const errorsExist = errors && errors.length > 0;

        if (errorsExist) {
            this.showErrorMessageBox();
        } else {
            const shouldCreateNewChart = this.chartModel.getChartType() !== this.currentChartType;
            if (shouldCreateNewChart) {
                this.createNewChart();
            }

            this.updateChart();
        }
    }

    private showErrorMessageBox() {

        // TODO this message box get destroy when grid is destroyed
        const errorMessage = this.chartModel.getErrors().join(' ');

        const messageBox = new MessageBox({
            title: 'Charting Error',
            message: errorMessage,
            centered: true,
            resizable: false,
            movable: true,
            width: 400,
            height: 150
        });

        this.getContext().wireBean(messageBox);
    }

    public createNewChart() {
        // capture current chart dimensions so new chart is same size
        this.chartOptions.height = this.chart.height;
        this.chartOptions.width = this.chart.width;

        // destroy chart and remove it from DOM
        this.chart.destroy();
{'fraction_non_alphanumeric': 0.1100609115731989, 'fraction_numerical': 0.002520478890989288, 'mean_word_length': 2.5414652287095576, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6438553', 'n_tokens_mistral': 2585, 'n_tokens_neox': 2492, 'n_words': 553}