\n {TabsPanels}
\n \n \n
\n );\n }\n}\n","/*!\n * chartjs-plugin-datalabels v2.2.0\n * https://chartjs-plugin-datalabels.netlify.app\n * (c) 2017-2022 chartjs-plugin-datalabels contributors\n * Released under the MIT license\n */\nimport { isNullOrUndef, merge, toFont, resolve, toPadding, valueOrDefault, callback, isObject, each } from 'chart.js/helpers';\nimport { defaults as defaults$1, ArcElement, PointElement, BarElement } from 'chart.js';\n\nvar devicePixelRatio = (function() {\n if (typeof window !== 'undefined') {\n if (window.devicePixelRatio) {\n return window.devicePixelRatio;\n }\n\n // devicePixelRatio is undefined on IE10\n // https://stackoverflow.com/a/20204180/8837887\n // https://github.com/chartjs/chartjs-plugin-datalabels/issues/85\n var screen = window.screen;\n if (screen) {\n return (screen.deviceXDPI || 1) / (screen.logicalXDPI || 1);\n }\n }\n\n return 1;\n}());\n\nvar utils = {\n // @todo move this in Chart.helpers.toTextLines\n toTextLines: function(inputs) {\n var lines = [];\n var input;\n\n inputs = [].concat(inputs);\n while (inputs.length) {\n input = inputs.pop();\n if (typeof input === 'string') {\n lines.unshift.apply(lines, input.split('\\n'));\n } else if (Array.isArray(input)) {\n inputs.push.apply(inputs, input);\n } else if (!isNullOrUndef(inputs)) {\n lines.unshift('' + input);\n }\n }\n\n return lines;\n },\n\n // @todo move this in Chart.helpers.canvas.textSize\n // @todo cache calls of measureText if font doesn't change?!\n textSize: function(ctx, lines, font) {\n var items = [].concat(lines);\n var ilen = items.length;\n var prev = ctx.font;\n var width = 0;\n var i;\n\n ctx.font = font.string;\n\n for (i = 0; i < ilen; ++i) {\n width = Math.max(ctx.measureText(items[i]).width, width);\n }\n\n ctx.font = prev;\n\n return {\n height: ilen * font.lineHeight,\n width: width\n };\n },\n\n /**\n * Returns value bounded by min and max. This is equivalent to max(min, min(value, max)).\n * @todo move this method in Chart.helpers.bound\n * https://doc.qt.io/qt-5/qtglobal.html#qBound\n */\n bound: function(min, value, max) {\n return Math.max(min, Math.min(value, max));\n },\n\n /**\n * Returns an array of pair [value, state] where state is:\n * * -1: value is only in a0 (removed)\n * * 1: value is only in a1 (added)\n */\n arrayDiff: function(a0, a1) {\n var prev = a0.slice();\n var updates = [];\n var i, j, ilen, v;\n\n for (i = 0, ilen = a1.length; i < ilen; ++i) {\n v = a1[i];\n j = prev.indexOf(v);\n\n if (j === -1) {\n updates.push([v, 1]);\n } else {\n prev.splice(j, 1);\n }\n }\n\n for (i = 0, ilen = prev.length; i < ilen; ++i) {\n updates.push([prev[i], -1]);\n }\n\n return updates;\n },\n\n /**\n * https://github.com/chartjs/chartjs-plugin-datalabels/issues/70\n */\n rasterize: function(v) {\n return Math.round(v * devicePixelRatio) / devicePixelRatio;\n }\n};\n\nfunction orient(point, origin) {\n var x0 = origin.x;\n var y0 = origin.y;\n\n if (x0 === null) {\n return {x: 0, y: -1};\n }\n if (y0 === null) {\n return {x: 1, y: 0};\n }\n\n var dx = point.x - x0;\n var dy = point.y - y0;\n var ln = Math.sqrt(dx * dx + dy * dy);\n\n return {\n x: ln ? dx / ln : 0,\n y: ln ? dy / ln : -1\n };\n}\n\nfunction aligned(x, y, vx, vy, align) {\n switch (align) {\n case 'center':\n vx = vy = 0;\n break;\n case 'bottom':\n vx = 0;\n vy = 1;\n break;\n case 'right':\n vx = 1;\n vy = 0;\n break;\n case 'left':\n vx = -1;\n vy = 0;\n break;\n case 'top':\n vx = 0;\n vy = -1;\n break;\n case 'start':\n vx = -vx;\n vy = -vy;\n break;\n case 'end':\n // keep natural orientation\n break;\n default:\n // clockwise rotation (in degree)\n align *= (Math.PI / 180);\n vx = Math.cos(align);\n vy = Math.sin(align);\n break;\n }\n\n return {\n x: x,\n y: y,\n vx: vx,\n vy: vy\n };\n}\n\n// Line clipping (Cohen–Sutherland algorithm)\n// https://en.wikipedia.org/wiki/Cohen–Sutherland_algorithm\n\nvar R_INSIDE = 0;\nvar R_LEFT = 1;\nvar R_RIGHT = 2;\nvar R_BOTTOM = 4;\nvar R_TOP = 8;\n\nfunction region(x, y, rect) {\n var res = R_INSIDE;\n\n if (x < rect.left) {\n res |= R_LEFT;\n } else if (x > rect.right) {\n res |= R_RIGHT;\n }\n if (y < rect.top) {\n res |= R_TOP;\n } else if (y > rect.bottom) {\n res |= R_BOTTOM;\n }\n\n return res;\n}\n\nfunction clipped(segment, area) {\n var x0 = segment.x0;\n var y0 = segment.y0;\n var x1 = segment.x1;\n var y1 = segment.y1;\n var r0 = region(x0, y0, area);\n var r1 = region(x1, y1, area);\n var r, x, y;\n\n // eslint-disable-next-line no-constant-condition\n while (true) {\n if (!(r0 | r1) || (r0 & r1)) {\n // both points inside or on the same side: no clipping\n break;\n }\n\n // at least one point is outside\n r = r0 || r1;\n\n if (r & R_TOP) {\n x = x0 + (x1 - x0) * (area.top - y0) / (y1 - y0);\n y = area.top;\n } else if (r & R_BOTTOM) {\n x = x0 + (x1 - x0) * (area.bottom - y0) / (y1 - y0);\n y = area.bottom;\n } else if (r & R_RIGHT) {\n y = y0 + (y1 - y0) * (area.right - x0) / (x1 - x0);\n x = area.right;\n } else if (r & R_LEFT) {\n y = y0 + (y1 - y0) * (area.left - x0) / (x1 - x0);\n x = area.left;\n }\n\n if (r === r0) {\n x0 = x;\n y0 = y;\n r0 = region(x0, y0, area);\n } else {\n x1 = x;\n y1 = y;\n r1 = region(x1, y1, area);\n }\n }\n\n return {\n x0: x0,\n x1: x1,\n y0: y0,\n y1: y1\n };\n}\n\nfunction compute$1(range, config) {\n var anchor = config.anchor;\n var segment = range;\n var x, y;\n\n if (config.clamp) {\n segment = clipped(segment, config.area);\n }\n\n if (anchor === 'start') {\n x = segment.x0;\n y = segment.y0;\n } else if (anchor === 'end') {\n x = segment.x1;\n y = segment.y1;\n } else {\n x = (segment.x0 + segment.x1) / 2;\n y = (segment.y0 + segment.y1) / 2;\n }\n\n return aligned(x, y, range.vx, range.vy, config.align);\n}\n\nvar positioners = {\n arc: function(el, config) {\n var angle = (el.startAngle + el.endAngle) / 2;\n var vx = Math.cos(angle);\n var vy = Math.sin(angle);\n var r0 = el.innerRadius;\n var r1 = el.outerRadius;\n\n return compute$1({\n x0: el.x + vx * r0,\n y0: el.y + vy * r0,\n x1: el.x + vx * r1,\n y1: el.y + vy * r1,\n vx: vx,\n vy: vy\n }, config);\n },\n\n point: function(el, config) {\n var v = orient(el, config.origin);\n var rx = v.x * el.options.radius;\n var ry = v.y * el.options.radius;\n\n return compute$1({\n x0: el.x - rx,\n y0: el.y - ry,\n x1: el.x + rx,\n y1: el.y + ry,\n vx: v.x,\n vy: v.y\n }, config);\n },\n\n bar: function(el, config) {\n var v = orient(el, config.origin);\n var x = el.x;\n var y = el.y;\n var sx = 0;\n var sy = 0;\n\n if (el.horizontal) {\n x = Math.min(el.x, el.base);\n sx = Math.abs(el.base - el.x);\n } else {\n y = Math.min(el.y, el.base);\n sy = Math.abs(el.base - el.y);\n }\n\n return compute$1({\n x0: x,\n y0: y + sy,\n x1: x + sx,\n y1: y,\n vx: v.x,\n vy: v.y\n }, config);\n },\n\n fallback: function(el, config) {\n var v = orient(el, config.origin);\n\n return compute$1({\n x0: el.x,\n y0: el.y,\n x1: el.x + (el.width || 0),\n y1: el.y + (el.height || 0),\n vx: v.x,\n vy: v.y\n }, config);\n }\n};\n\nvar rasterize = utils.rasterize;\n\nfunction boundingRects(model) {\n var borderWidth = model.borderWidth || 0;\n var padding = model.padding;\n var th = model.size.height;\n var tw = model.size.width;\n var tx = -tw / 2;\n var ty = -th / 2;\n\n return {\n frame: {\n x: tx - padding.left - borderWidth,\n y: ty - padding.top - borderWidth,\n w: tw + padding.width + borderWidth * 2,\n h: th + padding.height + borderWidth * 2\n },\n text: {\n x: tx,\n y: ty,\n w: tw,\n h: th\n }\n };\n}\n\nfunction getScaleOrigin(el, context) {\n var scale = context.chart.getDatasetMeta(context.datasetIndex).vScale;\n\n if (!scale) {\n return null;\n }\n\n if (scale.xCenter !== undefined && scale.yCenter !== undefined) {\n return {x: scale.xCenter, y: scale.yCenter};\n }\n\n var pixel = scale.getBasePixel();\n return el.horizontal ?\n {x: pixel, y: null} :\n {x: null, y: pixel};\n}\n\nfunction getPositioner(el) {\n if (el instanceof ArcElement) {\n return positioners.arc;\n }\n if (el instanceof PointElement) {\n return positioners.point;\n }\n if (el instanceof BarElement) {\n return positioners.bar;\n }\n return positioners.fallback;\n}\n\nfunction drawRoundedRect(ctx, x, y, w, h, radius) {\n var HALF_PI = Math.PI / 2;\n\n if (radius) {\n var r = Math.min(radius, h / 2, w / 2);\n var left = x + r;\n var top = y + r;\n var right = x + w - r;\n var bottom = y + h - r;\n\n ctx.moveTo(x, top);\n if (left < right && top < bottom) {\n ctx.arc(left, top, r, -Math.PI, -HALF_PI);\n ctx.arc(right, top, r, -HALF_PI, 0);\n ctx.arc(right, bottom, r, 0, HALF_PI);\n ctx.arc(left, bottom, r, HALF_PI, Math.PI);\n } else if (left < right) {\n ctx.moveTo(left, y);\n ctx.arc(right, top, r, -HALF_PI, HALF_PI);\n ctx.arc(left, top, r, HALF_PI, Math.PI + HALF_PI);\n } else if (top < bottom) {\n ctx.arc(left, top, r, -Math.PI, 0);\n ctx.arc(left, bottom, r, 0, Math.PI);\n } else {\n ctx.arc(left, top, r, -Math.PI, Math.PI);\n }\n ctx.closePath();\n ctx.moveTo(x, y);\n } else {\n ctx.rect(x, y, w, h);\n }\n}\n\nfunction drawFrame(ctx, rect, model) {\n var bgColor = model.backgroundColor;\n var borderColor = model.borderColor;\n var borderWidth = model.borderWidth;\n\n if (!bgColor && (!borderColor || !borderWidth)) {\n return;\n }\n\n ctx.beginPath();\n\n drawRoundedRect(\n ctx,\n rasterize(rect.x) + borderWidth / 2,\n rasterize(rect.y) + borderWidth / 2,\n rasterize(rect.w) - borderWidth,\n rasterize(rect.h) - borderWidth,\n model.borderRadius);\n\n ctx.closePath();\n\n if (bgColor) {\n ctx.fillStyle = bgColor;\n ctx.fill();\n }\n\n if (borderColor && borderWidth) {\n ctx.strokeStyle = borderColor;\n ctx.lineWidth = borderWidth;\n ctx.lineJoin = 'miter';\n ctx.stroke();\n }\n}\n\nfunction textGeometry(rect, align, font) {\n var h = font.lineHeight;\n var w = rect.w;\n var x = rect.x;\n var y = rect.y + h / 2;\n\n if (align === 'center') {\n x += w / 2;\n } else if (align === 'end' || align === 'right') {\n x += w;\n }\n\n return {\n h: h,\n w: w,\n x: x,\n y: y\n };\n}\n\nfunction drawTextLine(ctx, text, cfg) {\n var shadow = ctx.shadowBlur;\n var stroked = cfg.stroked;\n var x = rasterize(cfg.x);\n var y = rasterize(cfg.y);\n var w = rasterize(cfg.w);\n\n if (stroked) {\n ctx.strokeText(text, x, y, w);\n }\n\n if (cfg.filled) {\n if (shadow && stroked) {\n // Prevent drawing shadow on both the text stroke and fill, so\n // if the text is stroked, remove the shadow for the text fill.\n ctx.shadowBlur = 0;\n }\n\n ctx.fillText(text, x, y, w);\n\n if (shadow && stroked) {\n ctx.shadowBlur = shadow;\n }\n }\n}\n\nfunction drawText(ctx, lines, rect, model) {\n var align = model.textAlign;\n var color = model.color;\n var filled = !!color;\n var font = model.font;\n var ilen = lines.length;\n var strokeColor = model.textStrokeColor;\n var strokeWidth = model.textStrokeWidth;\n var stroked = strokeColor && strokeWidth;\n var i;\n\n if (!ilen || (!filled && !stroked)) {\n return;\n }\n\n // Adjust coordinates based on text alignment and line height\n rect = textGeometry(rect, align, font);\n\n ctx.font = font.string;\n ctx.textAlign = align;\n ctx.textBaseline = 'middle';\n ctx.shadowBlur = model.textShadowBlur;\n ctx.shadowColor = model.textShadowColor;\n\n if (filled) {\n ctx.fillStyle = color;\n }\n if (stroked) {\n ctx.lineJoin = 'round';\n ctx.lineWidth = strokeWidth;\n ctx.strokeStyle = strokeColor;\n }\n\n for (i = 0, ilen = lines.length; i < ilen; ++i) {\n drawTextLine(ctx, lines[i], {\n stroked: stroked,\n filled: filled,\n w: rect.w,\n x: rect.x,\n y: rect.y + rect.h * i\n });\n }\n}\n\nvar Label = function(config, ctx, el, index) {\n var me = this;\n\n me._config = config;\n me._index = index;\n me._model = null;\n me._rects = null;\n me._ctx = ctx;\n me._el = el;\n};\n\nmerge(Label.prototype, {\n /**\n * @private\n */\n _modelize: function(display, lines, config, context) {\n var me = this;\n var index = me._index;\n var font = toFont(resolve([config.font, {}], context, index));\n var color = resolve([config.color, defaults$1.color], context, index);\n\n return {\n align: resolve([config.align, 'center'], context, index),\n anchor: resolve([config.anchor, 'center'], context, index),\n area: context.chart.chartArea,\n backgroundColor: resolve([config.backgroundColor, null], context, index),\n borderColor: resolve([config.borderColor, null], context, index),\n borderRadius: resolve([config.borderRadius, 0], context, index),\n borderWidth: resolve([config.borderWidth, 0], context, index),\n clamp: resolve([config.clamp, false], context, index),\n clip: resolve([config.clip, false], context, index),\n color: color,\n display: display,\n font: font,\n lines: lines,\n offset: resolve([config.offset, 4], context, index),\n opacity: resolve([config.opacity, 1], context, index),\n origin: getScaleOrigin(me._el, context),\n padding: toPadding(resolve([config.padding, 4], context, index)),\n positioner: getPositioner(me._el),\n rotation: resolve([config.rotation, 0], context, index) * (Math.PI / 180),\n size: utils.textSize(me._ctx, lines, font),\n textAlign: resolve([config.textAlign, 'start'], context, index),\n textShadowBlur: resolve([config.textShadowBlur, 0], context, index),\n textShadowColor: resolve([config.textShadowColor, color], context, index),\n textStrokeColor: resolve([config.textStrokeColor, color], context, index),\n textStrokeWidth: resolve([config.textStrokeWidth, 0], context, index)\n };\n },\n\n update: function(context) {\n var me = this;\n var model = null;\n var rects = null;\n var index = me._index;\n var config = me._config;\n var value, label, lines;\n\n // We first resolve the display option (separately) to avoid computing\n // other options in case the label is hidden (i.e. display: false).\n var display = resolve([config.display, true], context, index);\n\n if (display) {\n value = context.dataset.data[index];\n label = valueOrDefault(callback(config.formatter, [value, context]), value);\n lines = isNullOrUndef(label) ? [] : utils.toTextLines(label);\n\n if (lines.length) {\n model = me._modelize(display, lines, config, context);\n rects = boundingRects(model);\n }\n }\n\n me._model = model;\n me._rects = rects;\n },\n\n geometry: function() {\n return this._rects ? this._rects.frame : {};\n },\n\n rotation: function() {\n return this._model ? this._model.rotation : 0;\n },\n\n visible: function() {\n return this._model && this._model.opacity;\n },\n\n model: function() {\n return this._model;\n },\n\n draw: function(chart, center) {\n var me = this;\n var ctx = chart.ctx;\n var model = me._model;\n var rects = me._rects;\n var area;\n\n if (!this.visible()) {\n return;\n }\n\n ctx.save();\n\n if (model.clip) {\n area = model.area;\n ctx.beginPath();\n ctx.rect(\n area.left,\n area.top,\n area.right - area.left,\n area.bottom - area.top);\n ctx.clip();\n }\n\n ctx.globalAlpha = utils.bound(0, model.opacity, 1);\n ctx.translate(rasterize(center.x), rasterize(center.y));\n ctx.rotate(model.rotation);\n\n drawFrame(ctx, rects.frame, model);\n drawText(ctx, model.lines, rects.text, model);\n\n ctx.restore();\n }\n});\n\nvar MIN_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991; // eslint-disable-line es/no-number-minsafeinteger\nvar MAX_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991; // eslint-disable-line es/no-number-maxsafeinteger\n\nfunction rotated(point, center, angle) {\n var cos = Math.cos(angle);\n var sin = Math.sin(angle);\n var cx = center.x;\n var cy = center.y;\n\n return {\n x: cx + cos * (point.x - cx) - sin * (point.y - cy),\n y: cy + sin * (point.x - cx) + cos * (point.y - cy)\n };\n}\n\nfunction projected(points, axis) {\n var min = MAX_INTEGER;\n var max = MIN_INTEGER;\n var origin = axis.origin;\n var i, pt, vx, vy, dp;\n\n for (i = 0; i < points.length; ++i) {\n pt = points[i];\n vx = pt.x - origin.x;\n vy = pt.y - origin.y;\n dp = axis.vx * vx + axis.vy * vy;\n min = Math.min(min, dp);\n max = Math.max(max, dp);\n }\n\n return {\n min: min,\n max: max\n };\n}\n\nfunction toAxis(p0, p1) {\n var vx = p1.x - p0.x;\n var vy = p1.y - p0.y;\n var ln = Math.sqrt(vx * vx + vy * vy);\n\n return {\n vx: (p1.x - p0.x) / ln,\n vy: (p1.y - p0.y) / ln,\n origin: p0,\n ln: ln\n };\n}\n\nvar HitBox = function() {\n this._rotation = 0;\n this._rect = {\n x: 0,\n y: 0,\n w: 0,\n h: 0\n };\n};\n\nmerge(HitBox.prototype, {\n center: function() {\n var r = this._rect;\n return {\n x: r.x + r.w / 2,\n y: r.y + r.h / 2\n };\n },\n\n update: function(center, rect, rotation) {\n this._rotation = rotation;\n this._rect = {\n x: rect.x + center.x,\n y: rect.y + center.y,\n w: rect.w,\n h: rect.h\n };\n },\n\n contains: function(point) {\n var me = this;\n var margin = 1;\n var rect = me._rect;\n\n point = rotated(point, me.center(), -me._rotation);\n\n return !(point.x < rect.x - margin\n || point.y < rect.y - margin\n || point.x > rect.x + rect.w + margin * 2\n || point.y > rect.y + rect.h + margin * 2);\n },\n\n // Separating Axis Theorem\n // https://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169\n intersects: function(other) {\n var r0 = this._points();\n var r1 = other._points();\n var axes = [\n toAxis(r0[0], r0[1]),\n toAxis(r0[0], r0[3])\n ];\n var i, pr0, pr1;\n\n if (this._rotation !== other._rotation) {\n // Only separate with r1 axis if the rotation is different,\n // else it's enough to separate r0 and r1 with r0 axis only!\n axes.push(\n toAxis(r1[0], r1[1]),\n toAxis(r1[0], r1[3])\n );\n }\n\n for (i = 0; i < axes.length; ++i) {\n pr0 = projected(r0, axes[i]);\n pr1 = projected(r1, axes[i]);\n\n if (pr0.max < pr1.min || pr1.max < pr0.min) {\n return false;\n }\n }\n\n return true;\n },\n\n /**\n * @private\n */\n _points: function() {\n var me = this;\n var rect = me._rect;\n var angle = me._rotation;\n var center = me.center();\n\n return [\n rotated({x: rect.x, y: rect.y}, center, angle),\n rotated({x: rect.x + rect.w, y: rect.y}, center, angle),\n rotated({x: rect.x + rect.w, y: rect.y + rect.h}, center, angle),\n rotated({x: rect.x, y: rect.y + rect.h}, center, angle)\n ];\n }\n});\n\nfunction coordinates(el, model, geometry) {\n var point = model.positioner(el, model);\n var vx = point.vx;\n var vy = point.vy;\n\n if (!vx && !vy) {\n // if aligned center, we don't want to offset the center point\n return {x: point.x, y: point.y};\n }\n\n var w = geometry.w;\n var h = geometry.h;\n\n // take in account the label rotation\n var rotation = model.rotation;\n var dx = Math.abs(w / 2 * Math.cos(rotation)) + Math.abs(h / 2 * Math.sin(rotation));\n var dy = Math.abs(w / 2 * Math.sin(rotation)) + Math.abs(h / 2 * Math.cos(rotation));\n\n // scale the unit vector (vx, vy) to get at least dx or dy equal to\n // w or h respectively (else we would calculate the distance to the\n // ellipse inscribed in the bounding rect)\n var vs = 1 / Math.max(Math.abs(vx), Math.abs(vy));\n dx *= vx * vs;\n dy *= vy * vs;\n\n // finally, include the explicit offset\n dx += model.offset * vx;\n dy += model.offset * vy;\n\n return {\n x: point.x + dx,\n y: point.y + dy\n };\n}\n\nfunction collide(labels, collider) {\n var i, j, s0, s1;\n\n // IMPORTANT Iterate in the reverse order since items at the end of the\n // list have an higher weight/priority and thus should be less impacted\n // by the overlapping strategy.\n\n for (i = labels.length - 1; i >= 0; --i) {\n s0 = labels[i].$layout;\n\n for (j = i - 1; j >= 0 && s0._visible; --j) {\n s1 = labels[j].$layout;\n\n if (s1._visible && s0._box.intersects(s1._box)) {\n collider(s0, s1);\n }\n }\n }\n\n return labels;\n}\n\nfunction compute(labels) {\n var i, ilen, label, state, geometry, center, proxy;\n\n // Initialize labels for overlap detection\n for (i = 0, ilen = labels.length; i < ilen; ++i) {\n label = labels[i];\n state = label.$layout;\n\n if (state._visible) {\n // Chart.js 3 removed el._model in favor of getProps(), making harder to\n // abstract reading values in positioners. Also, using string arrays to\n // read values (i.e. var {a,b,c} = el.getProps([\"a\",\"b\",\"c\"])) would make\n // positioners inefficient in the normal case (i.e. not the final values)\n // and the code a bit ugly, so let's use a Proxy instead.\n proxy = new Proxy(label._el, {get: (el, p) => el.getProps([p], true)[p]});\n\n geometry = label.geometry();\n center = coordinates(proxy, label.model(), geometry);\n state._box.update(center, geometry, label.rotation());\n }\n }\n\n // Auto hide overlapping labels\n return collide(labels, function(s0, s1) {\n var h0 = s0._hidable;\n var h1 = s1._hidable;\n\n if ((h0 && h1) || h1) {\n s1._visible = false;\n } else if (h0) {\n s0._visible = false;\n }\n });\n}\n\nvar layout = {\n prepare: function(datasets) {\n var labels = [];\n var i, j, ilen, jlen, label;\n\n for (i = 0, ilen = datasets.length; i < ilen; ++i) {\n for (j = 0, jlen = datasets[i].length; j < jlen; ++j) {\n label = datasets[i][j];\n labels.push(label);\n label.$layout = {\n _box: new HitBox(),\n _hidable: false,\n _visible: true,\n _set: i,\n _idx: label._index\n };\n }\n }\n\n // TODO New `z` option: labels with a higher z-index are drawn\n // of top of the ones with a lower index. Lowest z-index labels\n // are also discarded first when hiding overlapping labels.\n labels.sort(function(a, b) {\n var sa = a.$layout;\n var sb = b.$layout;\n\n return sa._idx === sb._idx\n ? sb._set - sa._set\n : sb._idx - sa._idx;\n });\n\n this.update(labels);\n\n return labels;\n },\n\n update: function(labels) {\n var dirty = false;\n var i, ilen, label, model, state;\n\n for (i = 0, ilen = labels.length; i < ilen; ++i) {\n label = labels[i];\n model = label.model();\n state = label.$layout;\n state._hidable = model && model.display === 'auto';\n state._visible = label.visible();\n dirty |= state._hidable;\n }\n\n if (dirty) {\n compute(labels);\n }\n },\n\n lookup: function(labels, point) {\n var i, state;\n\n // IMPORTANT Iterate in the reverse order since items at the end of\n // the list have an higher z-index, thus should be picked first.\n\n for (i = labels.length - 1; i >= 0; --i) {\n state = labels[i].$layout;\n\n if (state && state._visible && state._box.contains(point)) {\n return labels[i];\n }\n }\n\n return null;\n },\n\n draw: function(chart, labels) {\n var i, ilen, label, state, geometry, center;\n\n for (i = 0, ilen = labels.length; i < ilen; ++i) {\n label = labels[i];\n state = label.$layout;\n\n if (state._visible) {\n geometry = label.geometry();\n center = coordinates(label._el, label.model(), geometry);\n state._box.update(center, geometry, label.rotation());\n label.draw(chart, center);\n }\n }\n }\n};\n\nvar formatter = function(value) {\n if (isNullOrUndef(value)) {\n return null;\n }\n\n var label = value;\n var keys, klen, k;\n if (isObject(value)) {\n if (!isNullOrUndef(value.label)) {\n label = value.label;\n } else if (!isNullOrUndef(value.r)) {\n label = value.r;\n } else {\n label = '';\n keys = Object.keys(value);\n for (k = 0, klen = keys.length; k < klen; ++k) {\n label += (k !== 0 ? ', ' : '') + keys[k] + ': ' + value[keys[k]];\n }\n }\n }\n\n return '' + label;\n};\n\n/**\n * IMPORTANT: make sure to also update tests and TypeScript definition\n * files (`/test/specs/defaults.spec.js` and `/types/options.d.ts`)\n */\n\nvar defaults = {\n align: 'center',\n anchor: 'center',\n backgroundColor: null,\n borderColor: null,\n borderRadius: 0,\n borderWidth: 0,\n clamp: false,\n clip: false,\n color: undefined,\n display: true,\n font: {\n family: undefined,\n lineHeight: 1.2,\n size: undefined,\n style: undefined,\n weight: null\n },\n formatter: formatter,\n labels: undefined,\n listeners: {},\n offset: 4,\n opacity: 1,\n padding: {\n top: 4,\n right: 4,\n bottom: 4,\n left: 4\n },\n rotation: 0,\n textAlign: 'start',\n textStrokeColor: undefined,\n textStrokeWidth: 0,\n textShadowBlur: 0,\n textShadowColor: undefined\n};\n\n/**\n * @see https://github.com/chartjs/Chart.js/issues/4176\n */\n\nvar EXPANDO_KEY = '$datalabels';\nvar DEFAULT_KEY = '$default';\n\nfunction configure(dataset, options) {\n var override = dataset.datalabels;\n var listeners = {};\n var configs = [];\n var labels, keys;\n\n if (override === false) {\n return null;\n }\n if (override === true) {\n override = {};\n }\n\n options = merge({}, [options, override]);\n labels = options.labels || {};\n keys = Object.keys(labels);\n delete options.labels;\n\n if (keys.length) {\n keys.forEach(function(key) {\n if (labels[key]) {\n configs.push(merge({}, [\n options,\n labels[key],\n {_key: key}\n ]));\n }\n });\n } else {\n // Default label if no \"named\" label defined.\n configs.push(options);\n }\n\n // listeners: {\n \n
\n );\n }\n}\n","import React, {Component} from 'react';\nimport {Chart, ChartDataset, ChartOptions} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport {LabelOptions} from 'chartjs-plugin-datalabels/types/options';\n\nexport interface IDoughnutChartProps {\n dataset: number[];\n doughnutStyling?: Partial\n \n
\n );\n }\n}\n","import { useTranslation } from 'react-i18next';\nimport { FlexBoxRow } from 'src/components/common/FlexBoxRow';\nimport { styled, Typography, useMediaQuery } from '@mui/material';\nimport { OrionTheme } from 'src/components/theme/orion/Theme';\nimport { LineHeight } from 'src/components/theme/orion/overrides/LineHeight';\nimport { ResponsiveRow } from 'src/components/common/ResponsiveRow';\nimport { OrionColors } from 'src/components/theme/orion/common/colors';\nimport { GoogleShoppingScoreSection, ScoreSectionType } from 'src/enums/google/ScoreSection';\nimport { GradeUtils } from 'src/utils/GradeUtils';\n\nconst Label = styled(FlexBoxRow)`\n &:before {\n content: '';\n display: inline-block;\n min-width: ${({ theme }) => theme.spacing(2)};\n min-height: ${({ theme }) => theme.spacing(2)};\n border-radius: 50%;\n background: ${({ bcolor }: { bcolor: string }) => bcolor};\n }\n`;\n\nconst GetGap = (isMobile: boolean, responsive: boolean): number => {\n if (isMobile) return 3;\n return responsive ? 0.5 : 3;\n};\n\nexport const ChartLabel: React.FC<{ bcolor: string; children: JSX.Element }> = ({ bcolor, children }) => (\n \n);\n\ntype CommonChartLabelsProps = {\n responsive: boolean;\n};\n\nexport const CommonChartLabels = ({ responsive }: CommonChartLabelsProps): JSX.Element => {\n const isMobile = useMediaQuery(OrionTheme.breakpoints.down(600));\n const { t } = useTranslation(['common']);\n\n return (\n \n {Object.values(GoogleAdsScoreSection).map(\n (sectionName) =>\n sectionName === selected && (\n \n \n ),\n )}\n
\n \n
\n