{"version":3,"sources":["components/year-review/constants/colors.js","components/year-review/components/tooltip/YRTooltip.jsx","components/year-review/constants/config.js","components/year-review/components/linechart/CustomDot.jsx","components/year-review/components/linechart/YRLineChart.jsx"],"names":["dnsBlue","dnsDarkBlue","dnsLightGrey","dnsGreen","dnsBlack","dnsVlaanderenColor","dnsBrusselsColor","Colors","dnsColorsArray","dnsBeColorArray","YRTooltip","active","payload","prefix","suffix","dataNames","data","className","length","map","dataName","index","Number","isInteger","FormatGraphDataService","addCommas","twoDecimalPlaces","values","name","defaultProps","isMobile","window","innerWidth","document","documentElement","clientWidth","Config","chartHeight","margin","pieChartMargin","animationBegin","animationDuration","animationEasing","CustomDot","cx","cy","value","values0","x","y","width","height","fill","viewBox","d","values1","fillRule","rx","values2","colorArray","YRLineChart","style","isReady","tooltipSuffix","tooltipPrefix","lineChartsData","formatMultipleValues","legendNames","focusable","vertical","dataKey","padding","left","right","unit","content","charAt","toLowerCase","type","color","lineChartData","stroke","dot"],"mappings":"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","file":"js/34.a644510d.chunk.js","sourcesContent":["const dnsBlue = '#049ee0';\nconst dnsLightBlue = '#5ED0FF';\nconst dnsDarkBlue = '#1e5fa6';\nconst dnsLightGrey = '#ededed';\nconst dnsGreen = '#008389';\nconst dnsBlack = '#1a1a1a';\nconst dnsVlaanderenColor = '#7a7a29';\nconst dnsBrusselsColor = '#55083f';\n\nconst Colors = {\n    dnsColorsArray: [\n        dnsDarkBlue,\n        dnsBlue,\n        dnsBlack,\n        dnsGreen,\n        dnsLightBlue,\n        dnsLightGrey,\n    ],\n    dnsBeColorArray: [\n        dnsBlack,\n        dnsBrusselsColor,\n        dnsVlaanderenColor,\n    ],\n    dnsBlue,\n    dnsDarkBlue,\n    dnsLightGrey,\n    dnsGreen,\n    dnsBlack,\n    dnsBrusselsColor,\n    dnsVlaanderenColor,\n};\n\nexport default Colors;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport FormatGraphDataService from 'components/year-review/services/FormatGraphDataService';\n\nconst YRTooltip = ({\n    active, payload, prefix, suffix, dataNames,\n}) => {\n    if (active) {\n        const data = payload[0].payload;\n\n        return (\n            <div className=\"yr-tooltip\">\n                <div>\n                    {\n                        dataNames.length ?\n                            dataNames.map((dataName, index) => (\n                                <span key={dataName}>\n                                    <strong>{dataName}: </strong>\n                                    {Number.isInteger(data[`values${index}`])\n                                        ? FormatGraphDataService.addCommas(data[`values${index}`])\n                                        : FormatGraphDataService.twoDecimalPlaces(data[`values${index}`])\n                                    }\n                                    {suffix}\n                                    <br />\n                                </span>))\n                            :\n                            (\n                                <strong>\n                                    {Number.isInteger(data.values)\n                                        ? FormatGraphDataService.addCommas(data.values)\n                                        : FormatGraphDataService.twoDecimalPlaces(data.values)}\n                                    {` ${suffix}`}\n                                </strong>\n                            )\n                    }\n                </div>\n                <div>{prefix} {data.name}</div>\n            </div>\n        );\n    }\n    return null;\n};\n\n\nYRTooltip.defaultProps = {\n    payload: [],\n    prefix: '',\n    suffix: '',\n    active: false,\n    dataNames: [],\n};\n\nYRTooltip.propTypes = {\n    active: PropTypes.bool,\n    payload: PropTypes.arrayOf(PropTypes.object),\n    prefix: PropTypes.string,\n    suffix: PropTypes.string,\n    dataNames: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default YRTooltip;\n","const viewportWidth = window.innerWidth || document.documentElement.clientWidth;\nconst isMobile = viewportWidth < 768;\n\nconst Config = {\n    chartHeight: isMobile ? 320 : 400,\n    margin: 10,\n    pieChartMargin: isMobile ? 90 : 20,\n    animationBegin: 500,\n    animationDuration: 1250,\n    animationEasing: 'ease-in-out',\n};\n\nexport default Config;\n","import React from 'react';\n\nconst CustomDot = ({\n    cx, cy, payload, value,\n}) => {\n    if (value === payload.values0) {\n        return ( // Purple triangle\n            <svg x={cx - 5} y={cy - 5} width={10} height={10} fill=\"red\" viewBox=\"0 0 10 10\">\n                <path fill=\"#55083F\" d=\"M5 0l5 10H0z\" />\n            </svg>\n        );\n    } else if (value === payload.values1) {\n        return ( // Green circle\n            <svg x={cx - 5} y={cy - 5} width={10} height={10} fill=\"red\" viewBox=\"0 0 10 10\">\n                <rect width=\"10\" height=\"10\" fill=\"#81812A\" fillRule=\"evenodd\" rx=\"5\" />\n            </svg>\n        );\n    } else if (value === payload.values2) {\n        return ( // Blue square\n            <svg x={cx - 5} y={cy - 5} width={10} height={10} fill=\"red\" viewBox=\"0 0 10 10\">\n                <path fill=\"#1E5FA6\" fillRule=\"evenodd\" d=\"M0 0h10v10H0z\" />\n            </svg>\n        );\n    }\n\n    return false;\n};\n\nexport default CustomDot;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Legend, Tooltip } from 'recharts';\n\nimport Colors from 'components/year-review/constants/colors';\nimport FormatGraphDataService from 'components/year-review/services/FormatGraphDataService';\nimport YRTooltip from 'components/year-review/components/tooltip/YRTooltip';\n\nimport Config from 'components/year-review/constants/config';\n\nimport CustomDot from './CustomDot';\n\nconst colorArray = [\n    Colors.dnsBrusselsColor,\n    Colors.dnsVlaanderenColor,\n    Colors.dnsDarkBlue,\n];\n\nconst YRLineChart = ({\n    data, style, isReady,\n}) => {\n    const {\n        tooltipSuffix,\n        tooltipPrefix,\n    } = style;\n\n    const lineChartsData = FormatGraphDataService.formatMultipleValues(data);\n\n    const legendNames = data[0].values.map(x => x.name);\n    return (\n        <ResponsiveContainer width=\"100%\" height={Config.chartHeight}>\n            <LineChart\n                data={lineChartsData}\n                focusable=\"false\"\n                key={isReady ? 0 : 1}\n            >\n                <CartesianGrid vertical={false} />\n                <XAxis dataKey=\"name\" padding={{ left: 30, right: 30 }} />\n                <YAxis unit=\"%\" />\n                <Tooltip\n                    content={\n                        <YRTooltip\n                            suffix={tooltipSuffix}\n                            prefix={tooltipPrefix}\n                            dataNames={legendNames}\n                        />}\n                />\n                <Legend\n                    payload={\n                        legendNames.map((name) => {\n                            if (name.charAt(0).toLowerCase() === 'b') {\n                                return (\n                                    {\n                                        value: name,\n                                        type: 'triangle',\n                                        color: Colors.dnsBrusselsColor,\n                                    }\n                                );\n                            } else if (name.charAt(0).toLowerCase() === 'w') {\n                                return (\n                                    {\n                                        value: name, type: 'square', color: Colors.dnsDarkBlue,\n                                    }\n                                );\n                            }\n                            return (\n                                {\n                                    value: name, type: 'circle', color: Colors.dnsVlaanderenColor,\n                                }\n                            );\n                        })\n                    }\n                />\n                {lineChartsData.map((lineChartData, index) => (\n                    <Line\n                        type=\"linear\"\n                        dataKey={`values${index}`}\n                        stroke={colorArray[index]}\n                        dot={<CustomDot />}\n                        animationBegin={Config.animationBegin}\n                        animationDuration={Config.animationDuration}\n                        animationEasing={Config.animationEasing}\n                        key={lineChartData.name}\n                    />\n                ))}\n            </LineChart>\n        </ResponsiveContainer>\n    );\n};\nYRLineChart.defaultProps = {\n    style: {},\n};\n\nYRLineChart.propTypes = {\n    data: PropTypes.arrayOf(PropTypes.any).isRequired,\n    isReady: PropTypes.bool.isRequired,\n    style: PropTypes.objectOf(PropTypes.string),\n};\n\n\nexport default YRLineChart;\n"],"sourceRoot":""}