constructor()

in src/visualComponent/columnMapping/columnMappingComponent.ts [63:161]
81 lines of code
4 McCabe index (conditional complexity)

    constructor(options: IVisualComponentConstructorOptions) {
        super();

        this.stateService = options.stateService;

        this.element = options.element
            .append("div")
            .classed(this.className, true);

        this.rootElement = this.element
            .append("div")
            .classed(this.rootElementSelector.className, true);

        this.scrollableElement = this.rootElement
            .append("div")
            .classed(this.scrollableElementSelector.className, true);

        const header: IVisualComponent = new ColumnMappingHeaderComponent({
            element: this.rootElement,
        });

        const row: IVisualComponent = new ColumnMappingColumnSelectorComponent({
            columns: [actualValueColumn],
            element: this.scrollableElement,
            getSelectedValueByColumnName: (columnName: string, values: string[]) => {
                if (!this.stateService.states.columnMapping.isCurrentRowSet()) {
                    const defaultValue: string = values[0];

                    this.stateService.states.columnMapping.setCurrentRowName(defaultValue);

                    return defaultValue;
                }

                return undefined;
            },
            onChange: (
                columnName: string,
                displayName: string,
                onChangeOptions: IVisualComponentRenderOptions,
            ) => {
                if (!this.stateService.states.columnMapping) {
                    return;
                }

                this.stateService.states.columnMapping
                    .setRow(displayName)
                    .setCurrentRowName(displayName);

                this.render(onChangeOptions);
            },

            title: "Select the Row to map to additional columns from your data model",
        });

        const columns: IVisualComponent = new ColumnMappingColumnSelectorComponent({
            columns: [
                comparisonValueColumn,
                kpiIndicatorIndexColumn,
                kpiIndicatorValueColumn,
                secondComparisonValueColumn,
                secondKPIIndicatorValueColumn,
            ],
            element: this.scrollableElement,
            getSelectedValueByColumnName: (columnName: string) => {
                return this.stateService.states.columnMapping.getSelectedValueByColumnName(columnName);
            },
            onChange: (columnName: string, displayName: string) => {
                if (!this.stateService.states.columnMapping) {
                    return;
                }

                const rowName: string = row.getState()[actualValueColumn.displayName as string];

                this.stateService.states.columnMapping
                    .setRow(rowName)
                    .setCurrentRowName(rowName)
                    .setColumn(columnName, displayName);
            },
            title: "Link to the associated columns from your data model",

        });

        const footer: IVisualComponent = new ColumnMappingFooterComponent({
            buttons: [
                {
                    buttonText: "Apply",
                    onClick: this.onApply.bind(this),
                },
            ],
            element: this.rootElement,
        });

        this.components = [
            header,
            row,
            columns,
            footer,
        ];
    }