<commit_before>/**
 * @fileoverview Radial plot component.
 * @author <NAME>.
 *         FE Development Lab <<EMAIL>>
 */

'use strict';

var dom = require('../../helpers/domHandler');
var geom = require('../../helpers/geometric');
var chartConst = require('../../const');
var renderUtil = require('../../helpers/renderUtil');
var pluginFactory = require('../../factories/pluginFactory');

var RadialPlot = tui.util.defineClass(/** @lends Plot.prototype */ {
    /**
     * plot component className
     * @type {string}
     */
    className: 'tui-chart-plot-area',

    /**
     * Plot component.
     * @constructs Plot
     * @param {object} params parameters
     *      @param {number} params.vTickCount vertical tick count
     *      @param {number} params.hTickCount horizontal tick count
     *      @param {object} params.theme axis theme
     */
    init: function(params) {
        /**
         * Options
         * @type {object}
         */
        this.options = tui.util.extend({
            type: 'spiderweb'
        }, params.options);

        /**
         * Theme
         * @type {object}
         */
        this.theme = params.theme || {};

        /**
         * Graph renderer
         * @type {object}
         */
        this.graphRenderer = pluginFactory.get('raphael', 'radialPlot');
    },

    /**
     * Render plot area
     * @param {HTMLElement} container html container
     * @param {object} dimension dimension
     * @param {Array.<Array>} plotPositions plot positions
     * @param {object} labelData label data
     * @returns {Paper} raphael paper
     */
    _renderPlotArea: function(container, dimension, plotPositions, labelData) {
        var renderParams = {
            container: container,
            dimension: dimension,
            plotPositions: plotPositions,
            labelData: labelData,
            theme: this.theme,
            options: this.options
        };

        return this.graphRenderer.render(renderParams);
    },

    /**
     * Make plot positions for render
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @returns {Array.<Array>} plot positions
     */
    _makePositions: function(axisDataMap, dimension) {
        var width = dimension.width - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_MARGIN_FOR_CATEGORY;
        var height = dimension.height - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_MARGIN_FOR_CATEGORY;
        var centerX = (width / 2) + (chartConst.RADIAL_PLOT_PADDING / 2) + (chartConst.RADIAL_MARGIN_FOR_CATEGORY / 2);
        var centerY = (height / 2) - (chartConst.RADIAL_PLOT_PADDING / 2) - (chartConst.RADIAL_MARGIN_FOR_CATEGORY / 2);
        var stepCount = axisDataMap.yAxis.tickCount;
        var angleStepCount = axisDataMap.xAxis.labels.length;

        return makeSpiderWebPositions({
            width: width,
            height: height,
            centerX: centerX,
            centerY: centerY,
            angleStepCount: angleStepCount,
            stepCount: stepCount
        });
    },

    /**
     * Make category positions
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @returns {Array.<object>} category positions
     */
    _makeCategoryPositions: function(axisDataMap, dimension) {
        var width = dimension.width - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_CATEGORY_PADDING;
        var height = dimension.height - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_CATEGORY_PADDING;
        var centerX = (width / 2) + (chartConst.RADIAL_PLOT_PADDING / 2) + (chartConst.RADIAL_CATEGORY_PADDING / 2);
        var centerY = (height / 2) - (chartConst.RADIAL_PLOT_PADDING / 2) - (chartConst.RADIAL_CATEGORY_PADDING / 2);
        var angleStepCount = axisDataMap.xAxis.labels.length;

        return makeRadialCategoryPositions({
            width: width,
            height: height,
            centerX: centerX,
            centerY: centerY,
            angleStepCount: angleStepCount
        });
    },

    /**
     * Make label data
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @param {Array.<Array>} plotPositions plot positions
     * @returns {object}
     */
    _makeLabelData: function(axisDataMap, dimension, plotPositions) {
        var categories = axisDataMap.xAxis.labels;
        var stepLabels = axisDataMap.yAxis.labels;
        var categoryPositions = this._makeCategoryPositions(axisDataMap, dimension);
        var categoryLabelData = [];
        var stepLabelData = [];
        var i, j;

        for (i = 0; i < categories.length; i += 1) {
            categoryLabelData.push({
                text: categories[i],
                position: categoryPositions[i]
            });
        }

        // 마지막 스탭 라벨은 카테고리랑 겹칠수 있어 만들지 않음
        for (j = 0; j < (stepLabels.length - 1); j += 1) {
            stepLabelData.push({
                text: stepLabels[j],
                position: plotPositions[j][0]
            });
        }

        return {
            category: categoryLabelData,
            step: stepLabelData
        };
    },

    /**
     * Render plot component.
     * @param {object} data - bounds and scale data
     * @returns {{
     *     container: HTMLElement,
     *     paper: object
     * }} plot element
     */
    render: function(data) {
        var paper;
        var plotPositions = this._makePositions(data.axisDataMap, data.layout.dimension);
        var labelData = this._makeLabelData(data.axisDataMap, data.layout.dimension, plotPositions);

        this.plotContainer = dom.create('DIV', this.className);
        this._renderContainerPosition(this.plotContainer, data.positionMap.plot);

        paper = this._renderPlotArea(this.plotContainer, data.layout.dimension, plotPositions, labelData);

        return {
            container: this.plotContainer,
            paper: paper
        };
    },

    /**
     * Set element's top, left given top, left position
     * series에서 가져옴, 추후 공통 페이퍼 적용전까지 임시 사용
     * @param {HTMLElement} el - series element
     * @param {{top: number, left: number}} position - series top, left position
     * @private
     */<commit_msg>Add rerender process to radialPlot<commit_after>/**
 * @fileoverview Radial plot component.
 * @author <NAME>.
 *         FE Development Lab <<EMAIL>>
 */

'use strict';

var dom = require('../../helpers/domHandler');
var geom = require('../../helpers/geometric');
var chartConst = require('../../const');
var renderUtil = require('../../helpers/renderUtil');
var pluginFactory = require('../../factories/pluginFactory');

var RadialPlot = tui.util.defineClass(/** @lends Plot.prototype */ {
    /**
     * plot component className
     * @type {string}
     */
    className: 'tui-chart-plot-area',

    /**
     * Plot component.
     * @constructs Plot
     * @param {object} params parameters
     *      @param {number} params.vTickCount vertical tick count
     *      @param {number} params.hTickCount horizontal tick count
     *      @param {object} params.theme axis theme
     */
    init: function(params) {
        /**
         * Options
         * @type {object}
         */
        this.options = tui.util.extend({
            type: 'spiderweb'
        }, params.options);

        /**
         * Theme
         * @type {object}
         */
        this.theme = params.theme || {};

        /**
         * Graph renderer
         * @type {object}
         */
        this.graphRenderer = pluginFactory.get('raphael', 'radialPlot');
    },

    /**
     * Render plot area
     * @param {HTMLElement} container html container
     * @param {object} dimension dimension
     * @param {Array.<Array>} plotPositions plot positions
     * @param {object} labelData label data
     * @returns {Paper} raphael paper
     */
    _renderPlotArea: function(container, dimension, plotPositions, labelData) {
        var renderParams = {
            container: container,
            dimension: dimension,
            plotPositions: plotPositions,
            labelData: labelData,
            theme: this.theme,
            options: this.options
        };

        return this.graphRenderer.render(renderParams);
    },

    /**
     * Make plot positions for render
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @returns {Array.<Array>} plot positions
     */
    _makePositions: function(axisDataMap, dimension) {
        var width = dimension.width - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_MARGIN_FOR_CATEGORY;
        var height = dimension.height - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_MARGIN_FOR_CATEGORY;
        var centerX = (width / 2) + (chartConst.RADIAL_PLOT_PADDING / 2) + (chartConst.RADIAL_MARGIN_FOR_CATEGORY / 2);
        var centerY = (height / 2) - (chartConst.RADIAL_PLOT_PADDING / 2) - (chartConst.RADIAL_MARGIN_FOR_CATEGORY / 2);
        var stepCount = axisDataMap.yAxis.tickCount;
        var angleStepCount = axisDataMap.xAxis.labels.length;

        return makeSpiderWebPositions({
            width: width,
            height: height,
            centerX: centerX,
            centerY: centerY,
            angleStepCount: angleStepCount,
            stepCount: stepCount
        });
    },

    /**
     * Make category positions
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @returns {Array.<object>} category positions
     */
    _makeCategoryPositions: function(axisDataMap, dimension) {
        var width = dimension.width - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_CATEGORY_PADDING;
        var height = dimension.height - chartConst.RADIAL_PLOT_PADDING - chartConst.RADIAL_CATEGORY_PADDING;
        var centerX = (width / 2) + (chartConst.RADIAL_PLOT_PADDING / 2) + (chartConst.RADIAL_CATEGORY_PADDING / 2);
        var centerY = (height / 2) - (chartConst.RADIAL_PLOT_PADDING / 2) - (chartConst.RADIAL_CATEGORY_PADDING / 2);
        var angleStepCount = axisDataMap.xAxis.labels.length;

        return makeRadialCategoryPositions({
            width: width,
            height: height,
            centerX: centerX,
            centerY: centerY,
            angleStepCount: angleStepCount
        });
    },

    /**
     * Make label data
     * @param {object} axisDataMap axisDataMap
     * @param {object} dimension dimension
     * @param {Array.<Array>} plotPositions plot positions
     * @returns {object}
     */
    _makeLabelData: function(axisDataMap, dimension, plotPositions) {
        var categories = axisDataMap.xAxis.labels;
        var stepLabels = axisDataMap.yAxis.labels;
        var categoryPositions = this._makeCategoryPositions(axisDataMap, dimension);
        var categoryLabelData = [];
        var stepLabelData = [];
        var i, j;

        for (i = 0; i < categories.length; i += 1) {
            categoryLabelData.push({
                text: categories[i],
                position: categoryPositions[i]
            });
        }

        // 마지막 스탭 라벨은 카테고리랑 겹칠수 있어 만들지 않음
        for (j = 0; j < (stepLabels.length - 1); j += 1) {
            stepLabelData.push({
                text: stepLabels[j],
                position: plotPositions[j][0]
            });
        }

        return {
            category: categoryLabelData,
            step: stepLabelData
        };
    },

    /**
     * Render plot component.
     * @param {object} data - bounds and scale data
     * @returns {{
     *     container: HTMLElement,
     *     paper: object
     * }} plot element
     */
    render: function(data) {
        var paper;
        var plotPositions = this._makePositions(data.axisDataMap, data.layout.dimension);
        var labelData = this._makeLabelData(data.axisDataMap, data.layout.dimension, plotPositions);

        this.plotContainer = dom.create('DIV', this.className);
        this._renderContainerPosition(this.plotContainer, data.positionMap.plot);

        paper = this._renderPlotArea(this.plotContainer, data.layout.dimension, plotPositions, labelData);

        return {
            container: this.plotContainer,
            paper: paper
        };
    },

    /**
     * Re render plot component
     * @param {object} data - bounds and scale data
     */
    rerender: function(data) {
        var plotPositions = this._makePositions(data.axisDataMap, data.layout.dimension);
        var labelData = this._makeLabelData(data.axisDataMap, data.layout.dimension, plotPositions);

        this.plotContainer.innerHTML = '';

        this._renderPlotArea(this.plotContainer, data.layout.dimension, plotPositions, labelData);
    },

    /**
     * Set element's top, left given top, left position
     * series에서 가져옴, 추후 공통 페이퍼 적용전까지 임시 사용
     * @param {HTMLElement} el - series element
     * @param {{top: number, left: number}} position - series top, left position
     * @private
     */
{'fraction_non_alphanumeric': 0.11117107393416081, 'fraction_numerical': 0.002775422095443682, 'mean_word_length': 2.2140733399405352, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4894991', 'n_tokens_mistral': 3904, 'n_tokens_neox': 3817, 'n_words': 857}