@daryl110/go-chart/src/modules/chartjs/charts/polarArea.chart.js

library to easily build charts

const {
    reusableChartBuild,
    createDatasetColor,
    reusableOnClickFunction
} = require('../others/chartjs.utils');

/**
 * @memberOf ChartJSModule
 * @function
 * @name polarAreaChart
 * @desc function to build a polar area chart, it should be noted that although more than 1 dataset can be handled,
 * it is not recommended to do so, since the data could be visual obfuscated
 * @param {string} title - chart title
 * @param {HTMLBodyElement} htmlElementContainer - container html element, where the chart is inserted
 * @param {string} idElement - chart id
 * @param {array} labels - array of strings containing the labels of each value within the dataset
 * @param {array} datasets - array of integers with data. structure: <code>
 *     [
 *        [number, number, ...],
 *        [number, number, ...],
 *        ...
 *     ]
 * </code>
 * @param {string=} [positionOfLegend='top'] - legend position, which can be (top | bottom | left | right)
 * @param {array=} [backgroundColor=null] - array of colors rgba with length equal to data length
 * @param {boolean=} [backgroundOpacity=false] - boolean that marks if the background color is opaque
 * @param {ChartJSModule.chartJSUtils.reusableOnClickFunction=} [clickEventForEachElement=() => {}] - callback function on event click on chart element
 * @returns {*|{}}
 * @see <img src="https://i.imgur.com/ef89LUB.jpg"></img>
 * @example chartJS.polarAreaChart(
 *    'polar-area-chart', // title of chart
 *    document.getElementById('charts'), // id of container of the chart
 *    'polar_area_chart', // id of chart to build
 *    ['test_1', 'test_2', 'test_3'], // labels of data
 *    [[58, 90, 50], [50, 20, 20]], // data
 *    'top', // legend position
 *    ['rgba(139, 89, 121, 1)','rgba(251, 234, 177, 1)','rgba(34, 244, 142, 1)'], // array of colors rgba equal to data length
 *    true, // background opacity
 *    (value, label) => alert(`value: ${value} - label: ${label}`) // basic function in event on click
 * );
 */
module.exports = (
    title,
    htmlElementContainer,
    idElement,
    labels,
    datasets,
    positionOfLegend = 'top',
    backgroundColor = undefined,
    backgroundOpacity = false,
    clickEventForEachElement = () => { }
) => {
    const datasetsArray = [];
    let polarAreaChart = {};

    const [{ length }] = datasets;
    let colors = [];

    for (let i = 0; i < length; i++) {
        colors.push(createDatasetColor(undefined, undefined, backgroundOpacity));
    }

    polarAreaChart = reusableChartBuild(
        datasets,
        (data) => {
            const backgroundColorLabel = [], borderColorLabel = [];

            if (!backgroundColor) {
                let count = 0;
                data.forEach(() => {
                    const {
                        backgroundColorLabelItem,
                        borderColorLabelItem
                    } = colors[count];
                    backgroundColorLabel.push(backgroundColorLabelItem);
                    borderColorLabel.push(borderColorLabelItem);
                    count++;
                });
            }

            if (backgroundOpacity && backgroundColor) {
                backgroundColor.forEach((color) => {
                    const {
                        backgroundColorLabelItem,
                        borderColorLabelItem
                    } = createDatasetColor(color, undefined, true);

                    backgroundColorLabel.push(backgroundColorLabelItem);
                    borderColorLabel.push(borderColorLabelItem);
                });

                backgroundColor = undefined;
            }

            datasetsArray.push({
                data,
                backgroundColor: !backgroundColor ? backgroundColorLabel : backgroundColor,
                borderColor: !backgroundColor ? borderColorLabel : undefined,
                borderWidth: 3
            });
        },
        htmlElementContainer,
        idElement,
        {
            type: 'polarArea',
            data: {
                labels,
                datasets: datasetsArray
            },
            options: {
                title: {
                    display: true,
                    text: title
                },
                responsive: true,
                legend: {
                    position: positionOfLegend
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    },
                    reverse: false
                },
                animation: {
                    animateRotate: true,
                    animateScale: true
                },
                onClick: ($event) => reusableOnClickFunction($event, polarAreaChart, clickEventForEachElement)
            }
        }
    );

    return polarAreaChart;
};