@hestia-earth/ui-components 0.37.3 → 0.38.1

package/fesm2022/hestia-earth-ui-components.mjs

@@ -6,17 +6,19 @@ import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule, NG_VA
 import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe } from '@angular/common';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { catchError, map, debounceTime, distinctUntilChanged, tap, switchMap, mergeMap, shareReplay, delay, take, first, filter, startWith, skip, throttleTime, skipUntil, reduce, mergeAll, toArray, distinct, groupBy } from 'rxjs/operators';
-import { of, zip, ReplaySubject, timer, Subject, combineLatest, pipe, fromEvent, merge as merge$1, EMPTY, animationFrameScheduler, forkJoin, from } from 'rxjs';
+import { catchError, map, debounceTime, distinctUntilChanged, tap, switchMap, startWith, mergeMap, shareReplay, delay, take, first, filter, skip, throttleTime, skipUntil, reduce, mergeAll, toArray, distinct, groupBy } from 'rxjs/operators';
+import { of, zip, fromEvent, ReplaySubject, timer, Subject, combineLatest, pipe, merge as merge$1, EMPTY, animationFrameScheduler, forkJoin, from } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
 import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, sortKeysByType, isTypeNode, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, isTypeBlankNode, typeToSchemaType, managementTermTermType } from '@hestia-earth/schema';
-import { toPrecision, isUndefined, isEmpty, toComma, isNumber, getPercentileValue, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
+import { isUndefined, isEmpty, toPrecision, ellipsis as ellipsis$1, sum, toComma, isNumber, getPercentileValue, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, toDashCase, diffInDays } from '@hestia-earth/utils';
 import Gradient from 'javascript-color-gradient';
 import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
-import Chart, { Chart as Chart$1 } from 'chart.js';
-import canvasToSvg from 'canvas-to-svg';
+import { Chart, BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';
+import C2S from 'canvas-to-svg';
+import 'chartjs-adapter-date-fns';
 import merge from 'lodash.merge';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { select, selectAll } from 'd3-selection';
 import { json2csv } from 'json-2-csv';
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
@@ -30,12 +32,11 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { RouterLinkActive, RouterLink, ActivatedRoute } from '@angular/router';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { GoogleMap, MapMarker, MapPolygon } from '@angular/google-maps';
 import { Meta, DomSanitizer } from '@angular/platform-browser';
 import removeMd from 'remove-markdown';
 import orderBy from 'lodash.orderby';
-import { headersFromCsv, toCsv, toJson, toCsvPivot, ErrorKeys as ErrorKeys$1 } from '@hestia-earth/schema-convert';
+import { headersFromCsv, toCsv, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
 import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
@@ -592,16 +593,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
         }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSources", required: false }] }, { type: i0.Output, args: ["searchSourcesChange"] }], searchBibliographies: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBibliographies", required: false }] }, { type: i0.Output, args: ["searchBibliographiesChange"] }], searchBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBy", required: false }] }, { type: i0.Output, args: ["searchByChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const defaultBarDrawSettings = {
-    xPosFn: x => x + 10,
+    xPosFn: (x, index, width, chart, data) => (data < 0 || isEmpty(data) ? chart.scales.x.getPixelForValue(0) : x) + 10,
     yPosFn: y => y + 3,
-    colorFn: () => 'black',
-    textFn: m => (typeof m.data === 'number' ? `${m.label} - ${toPrecision(m.data)} kg` : ''),
+    colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
+    textFn: ({ data }) => `${data}`,
     font: '14px Lato',
     maxWidth: 90,
     emptyValueLabel: 'No data'
 };
 const afterBarDrawPlugin = settings => ({
-    afterDraw: (chart) => {
+    id: 'afterBarDrawPlugin',
+    afterDatasetsDraw: (chart) => {
         if (!chart.data.datasets?.length) {
             return;
         }
@@ -609,23 +611,23 @@ const afterBarDrawPlugin = settings => ({
             ...defaultBarDrawSettings,
             ...(settings ?? {})
         };
-        const { ctx } = chart;
+        const { ctx, width, height } = chart;
         ctx.save();
-        const height = chart.chartArea.bottom - chart.chartArea.top;
-        const width = chart.chartArea.right - chart.chartArea.left;
-        chart
-            .getDatasetMeta(0)
-            .data.filter(({ _view }) => !!_view)
-            .forEach(({ _view, _model, _datasetIndex, _index }, index) => {
-            const { x, y } = _view;
-            const label = _model.label;
-            const data = chart.data.datasets[_datasetIndex].data[_index];
+        const meta = chart.getDatasetMeta(0);
+        const dataset = chart.data.datasets[0];
+        const elements = meta.data;
+        elements
+            .filter(element => !element.skip)
+            .forEach((element, index) => {
+            const { x, y } = element;
+            const label = chart.data.labels?.[index] ?? '';
+            const data = dataset.data[index];
             const xPos = xPosFn(x, index, width, chart, data);
             const yPos = yPosFn(y, index, height, chart, data);
             const text = isUndefined(data) ? emptyValueLabel : textFn({ label, data }, index, chart);
             if (text) {
                 ctx.font = font;
-                ctx.fillStyle = colorFn(_view, index, chart, data);
+                ctx.fillStyle = colorFn(element.options, index, chart, data);
                 if (Array.isArray(text)) {
                     ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
                     ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
@@ -736,6 +738,7 @@ const hexToRgba = (hex, aplha = 1) => {
 };
 const listColorWithAlpha = (alpha = 0.8) => (_v, index) => hexToRgba(getColor(index), alpha);
 
+// ... createHoverGradient remains the same ...
 const createHoverGradient = (ctx, chartArea, color) => {
     const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
     gradient.addColorStop(0, colorToRgba(color, 0.05));
@@ -743,34 +746,53 @@ const createHoverGradient = (ctx, chartArea, color) => {
     gradient.addColorStop(1, colorToRgba(color, 0.05));
     return gradient;
 };
-const calculateShadowBounds = (barModel, threshold, barWidth) => {
-    const barY = barModel.y;
-    const barX = barModel.x;
-    const barBase = barModel.base || 0;
-    const barHeight = barModel.height || barWidth;
-    const barTop = barY - barHeight / 2;
-    const barBottom = barY + barHeight / 2;
-    const isNegative = barX < barBase;
-    const shadowLeft = isNegative ? barX : barBase;
-    const shadowRight = isNegative ? barBase : barX;
+// UPDATED: Use element properties instead of _model
+const calculateBarBounds = (element, indexAxis = 'y') => {
+    const { x, y, base, width, height } = element;
+    // Handle Horizontal Bars (indexAxis: 'y')
+    if (indexAxis === 'y') {
+        const barHeight = height; // Thickness of the bar
+        const barTop = y - barHeight / 2;
+        const barBottom = y + barHeight / 2;
+        const barLeft = Math.min(base, x);
+        const barRight = Math.max(base, x);
+        return { barLeft, barRight, barTop, barBottom, thickness: barHeight };
+    }
+    // Handle Vertical Bars (indexAxis: 'x')
+    else {
+        const barWidth = width; // Thickness of the bar
+        const barLeft = x - barWidth / 2;
+        const barRight = x + barWidth / 2;
+        const barTop = Math.min(base, y);
+        const barBottom = Math.max(base, y);
+        return { barLeft, barRight, barTop, barBottom, thickness: barWidth };
+    }
+};
+// UPDATED: Calculate shadow bounds based on the bounds we just found
+const calculateShadowBounds = (element, bounds, threshold) => {
     return {
-        top: barTop - threshold,
-        bottom: barBottom + threshold,
-        left: shadowLeft,
-        right: shadowRight,
-        width: shadowRight - shadowLeft,
-        height: barBottom + threshold - (barTop - threshold)
+        top: bounds.barTop - threshold,
+        bottom: bounds.barBottom + threshold,
+        left: bounds.barLeft, // Usually we expand Y (thickness), but keep X (length) capped at value
+        right: bounds.barRight,
+        width: bounds.barRight - bounds.barLeft,
+        height: bounds.barBottom + threshold - (bounds.barTop - threshold)
     };
 };
-const drawHoverEffect = (ctx, chartArea, barModel, threshold, barWidth) => {
-    const barColor = barModel.backgroundColor || barModel.borderColor || '';
+const drawHoverEffect = (ctx, chartArea, element, threshold, indexAxis) => {
+    // Access colors via options
+    const opts = element.options || null;
+    const barColor = (opts?.backgroundColor || opts?.borderColor || '#000000');
     const color = parseColor(barColor);
-    const bounds = calculateShadowBounds(barModel, threshold, barWidth);
+    const bounds = calculateBarBounds(element, indexAxis);
+    const shadow = calculateShadowBounds(element, bounds, threshold);
     ctx.save();
-    const gradient = createHoverGradient(ctx, { left: bounds.left, right: bounds.right }, color);
+    // Draw Gradient Background
+    const gradient = createHoverGradient(ctx, { left: shadow.left, right: shadow.right }, color);
     ctx.fillStyle = gradient;
-    ctx.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
-    drawHorizontalLines(ctx, { left: bounds.left, right: bounds.right }, bounds.top, bounds.bottom, color);
+    ctx.fillRect(shadow.left, shadow.top, shadow.width, shadow.height);
+    // Draw Dashed Lines
+    drawHorizontalLines(ctx, { left: shadow.left, right: shadow.right }, shadow.top, shadow.bottom, color);
     ctx.restore();
 };
 const drawHorizontalLines = (ctx, barArea, topY, bottomY, color) => {
@@ -784,45 +806,36 @@ const drawHorizontalLines = (ctx, barArea, topY, bottomY, color) => {
     ctx.lineTo(barArea.right, bottomY);
     ctx.stroke();
 };
-const calculateBarBounds = (model) => {
-    const barLeft = Math.min(model.base || 0, model.x);
-    const barRight = Math.max(model.base || 0, model.x);
-    const barHeight = model.height || 20;
-    const barTop = model.y - barHeight / 2;
-    const barBottom = model.y + barHeight / 2;
-    return { barLeft, barRight, barTop, barBottom };
-};
+// UPDATED: Distance calculation using the new bounds
 const calculateDistanceToBar = (x, y, bounds) => {
     let distance = 0;
-    if (x < bounds.barLeft) {
+    // Horizontal distance
+    if (x < bounds.barLeft)
         distance += Math.pow(bounds.barLeft - x, 2);
-    }
-    else if (x > bounds.barRight) {
+    else if (x > bounds.barRight)
         distance += Math.pow(x - bounds.barRight, 2);
-    }
-    if (y < bounds.barTop) {
+    // Vertical distance
+    if (y < bounds.barTop)
         distance += Math.pow(bounds.barTop - y, 2);
-    }
-    else if (y > bounds.barBottom) {
+    else if (y > bounds.barBottom)
         distance += Math.pow(y - bounds.barBottom, 2);
-    }
     return Math.sqrt(distance);
 };
+// UPDATED: Hit area check
 const isWithinHitArea = (x, y, bounds, threshold) => {
     const hitLeft = bounds.barLeft - threshold;
     const hitRight = bounds.barRight + threshold;
     const hitTop = bounds.barTop - threshold;
     const hitBottom = bounds.barBottom + threshold;
-    const withinHorizontal = x >= hitLeft && x <= hitRight;
-    const withinVertical = y >= hitTop && y <= hitBottom;
-    return withinHorizontal && withinVertical;
+    return x >= hitLeft && x <= hitRight && y >= hitTop && y <= hitBottom;
 };
-const checkBarProximity = (element, index, datasetIndex, x, y, threshold, currentClosest) => {
+const checkBarProximity = (element, // Raw element
+index, datasetIndex, x, y, threshold, currentClosest, indexAxis) => {
     const bar = element;
-    const model = bar._model;
-    if (!model)
+    // V4 Safety check: Ensure the element has been drawn (has x/y)
+    if (bar.x == null || bar.y == null)
         return;
-    const bounds = calculateBarBounds(model);
+    const bounds = calculateBarBounds(bar, indexAxis);
     if (!isWithinHitArea(x, y, bounds, threshold))
         return;
     const distance = calculateDistanceToBar(x, y, bounds);
@@ -831,109 +844,115 @@ const checkBarProximity = (element, index, datasetIndex, x, y, threshold, curren
         currentClosest.bar = {
             datasetIndex,
             index,
-            model
+            element: bar // Save the whole element
         };
     }
 };
 const findNearBar = (chart, x, y, threshold) => {
     const closest = { bar: null, distance: Infinity };
+    // Determine orientation (horizontal bar vs vertical bar)
+    const indexAxis = chart.options.indexAxis || 'x';
     chart.data.datasets?.forEach((dataset, datasetIndex) => {
+        // V4 Visibility check
+        if (!chart.isDatasetVisible(datasetIndex))
+            return;
         const meta = chart.getDatasetMeta(datasetIndex);
-        if (!meta.hidden) {
-            meta.data.forEach((element, index) => {
-                checkBarProximity(element, index, datasetIndex, x, y, threshold, closest);
-            });
-        }
+        meta.data.forEach((element, index) => {
+            // Skip hidden/skipped elements
+            if (element.hidden || element.skip)
+                return;
+            checkBarProximity(element, index, datasetIndex, x, y, threshold, closest, indexAxis);
+        });
     });
     return closest.distance <= threshold ? closest.bar : undefined;
 };
 const triggerBarClick = (chart, barData) => {
-    const chartWithTooltip = chart;
-    if (chartWithTooltip.tooltip) {
-        chartWithTooltip.tooltip._active = [
-            {
-                _datasetIndex: barData.datasetIndex,
-                _index: barData.index
-            }
-        ];
-    }
-    const config = chart.config;
-    if (config?.options?.onClick) {
-        const element = chart.getDatasetMeta(barData.datasetIndex).data[barData.index];
+    const activeElements = [
+        {
+            element: barData.element,
+            datasetIndex: barData.datasetIndex,
+            index: barData.index
+        }
+    ];
+    // 1. Highlight visually
+    chart.setActiveElements(activeElements);
+    // 2. Show Tooltip
+    chart.tooltip?.setActiveElements(activeElements, { x: 0, y: 0 });
+    // 3. Fire Click Callback
+    const onClickHandler = chart.options.onClick;
+    if (onClickHandler) {
         const mockEvent = {
             type: 'click',
-            x: barData.model.x,
-            y: barData.model.y,
+            x: barData.element.x,
+            y: barData.element.y,
+            chart: chart,
             native: {
-                offsetX: barData.model.x,
-                offsetY: barData.model.y,
-                target: chart.canvas
-            },
-            originalEvent: {
-                offsetX: barData.model.x,
-                offsetY: barData.model.y,
-                clientX: barData.model.x,
-                clientY: barData.model.y,
-                target: chart.canvas
-            },
-            target: chart.canvas
+                target: chart.canvas,
+                preventDefault: () => { },
+                stopPropagation: () => { }
+            }
         };
-        config.options.onClick(mockEvent, [element]);
+        onClickHandler.call(chart, mockEvent, activeElements, chart);
     }
     chart.update();
 };
 const handleMouseMove = (chart, nearBar, threshold, e) => {
+    // Return object
     const newNearBar = findNearBar(chart, e.x, e.y, threshold);
-    chart.canvas.style.cursor = newNearBar ? 'pointer' : 'default';
-    if (newNearBar?.datasetIndex !== nearBar?.datasetIndex || newNearBar?.index !== nearBar?.index) {
-        chart.render({ duration: 0 });
-        return newNearBar;
-    }
-    return nearBar;
+    const prevCursor = chart.canvas.style.cursor;
+    const newCursor = newNearBar ? 'pointer' : 'default';
+    // Optimization: Only touch DOM if necessary
+    if (prevCursor !== newCursor) {
+        chart.canvas.style.cursor = newCursor;
+    }
+    // Check if the "near bar" target has changed
+    const hasChanged = newNearBar?.datasetIndex !== nearBar?.datasetIndex || newNearBar?.index !== nearBar?.index;
+    return {
+        nearBar: hasChanged ? newNearBar || null : nearBar,
+        changed: hasChanged
+    };
 };
 const handleMouseOut = (chart, nearBar) => {
     chart.canvas.style.cursor = 'default';
-    nearBar && chart.render();
+    return !!nearBar;
 };
 const handleClick = (chart, nearBar) => {
-    nearBar && triggerBarClick(chart, nearBar);
+    if (nearBar)
+        triggerBarClick(chart, nearBar);
 };
 const getActiveBar = (chart) => {
-    const chartWithTooltip = chart;
-    const activePoints = chartWithTooltip.tooltip._active;
-    if (!activePoints || activePoints.length === 0) {
-        return undefined;
-    }
-    const activePoint = activePoints[0];
-    const meta = chart.getDatasetMeta(activePoint._datasetIndex);
-    const bar = meta.data[activePoint._index];
-    return bar._model || undefined;
+    const activeElements = chart.tooltip?.getActiveElements();
+    return activeElements?.[0]?.element;
 };
-const defaultSettings$4 = { barWidth: 20, threshold: 10 };
+const defaultSettings$4 = { threshold: 10 };
 const backgroundHoverPlugin = (settings = {}) => {
     let nearBar = null;
-    const { barWidth, threshold } = {
-        ...defaultSettings$4,
-        ...settings
-    };
+    const { threshold } = { ...defaultSettings$4, ...settings };
     return {
         id: 'backgroundHover',
-        afterEvent: (chart, event) => {
-            const e = event.event || event;
+        afterEvent: (chart, args) => {
+            const e = args.event;
+            let changed = false;
             if (e.type === 'mousemove') {
-                nearBar = handleMouseMove(chart, nearBar, threshold, e);
+                const result = handleMouseMove(chart, nearBar, threshold || 10, e);
+                nearBar = result.nearBar;
+                changed = result.changed;
             }
             else if (e.type === 'mouseout') {
-                handleMouseOut(chart, nearBar);
+                changed = handleMouseOut(chart, nearBar);
                 nearBar = null;
             }
             else if (e.type === 'click') {
                 handleClick(chart, nearBar);
+                // Clicks usually trigger their own updates, but if you need one:
+                // changed = true;
             }
+            args.changed = changed;
         },
         beforeDraw: (chart) => {
-            const activeBar = nearBar ? nearBar.model : getActiveBar(chart);
-            return activeBar && drawHoverEffect(chart.ctx, chart.chartArea, activeBar, threshold, barWidth);
+            const indexAxis = chart.options.indexAxis || 'x';
+            const activeBar = nearBar ? nearBar.element : getActiveBar(chart);
+            activeBar && drawHoverEffect(chart.ctx, chart.chartArea, activeBar, threshold || 10, indexAxis);
         }
     };
 };
@@ -967,6 +986,7 @@ const defaultLollipopSettings = {
     isMouseInsideLollipopFn: () => null
 };
 const lollipopChartPlugin = settings => ({
+    id: 'lollipopChartPlugin',
     afterDatasetsDraw: (chart) => {
         if (!chart.data.datasets?.length) {
             return;
@@ -984,12 +1004,13 @@ const lollipopChartPlugin = settings => ({
             if (meta.hidden)
                 return;
             ctx.save();
-            meta.data
-                .filter(({ _view }) => !!_view && !_view.skip)
-                .forEach(({ _view, _datasetIndex, _index }, index) => {
-                const color = colorFn(_view, index);
-                const { base, x, y } = _view;
-                const data = chart.data.datasets[_datasetIndex].data[_index];
+            const elements = meta.data;
+            elements
+                .filter(element => !element.skip)
+                .forEach((element, index) => {
+                const { base, x, y } = element;
+                const color = colorFn(element.options, index);
+                const data = dataset.data[index];
                 clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x, y }, circleRadius));
                 clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
                 circle(ctx, x, y, color, circleRadius);
@@ -1006,185 +1027,117 @@ const lollipopChartPlugin = settings => ({
 
 const defaultChartWidth = 800;
 const defaultChartHeight = 600;
-const isNonSerializableType = (value) => typeof value === 'function' || value instanceof HTMLElement || value instanceof Element || value instanceof Node;
-const setDefaultOptions = (config) => {
-    config.options = config.options || {};
-    config.options.plugins = config.options.plugins || {};
-    config.options.plugins.legend = config.options.plugins.legend || { display: false };
-    config.options.legendCallback = null;
-    config.options.tooltips = {};
-    config.options.animation = undefined;
-    config.options.responsive = false;
-    config.options.maintainAspectRatio = false;
-    config.options.devicePixelRatio = 1;
-    return config;
-};
-const modernizeChartConfig = (config) => {
-    const modernized = { ...config };
-    // For Chart.js v2, keep the configuration as-is since we're using the same version
-    setDefaultOptions(modernized);
-    return modernized;
-};
-const extractEssentialChartConfig = (config) => {
-    const essentialConfig = {
-        type: config.type,
-        data: {
-            labels: config.data?.labels || [],
-            datasets: []
+const extractEssentialChartConfig = (config) => ({
+    type: config.type || 'bar',
+    data: config.data,
+    options: {
+        indexAxis: config.options?.indexAxis,
+        responsive: false,
+        maintainAspectRatio: false,
+        devicePixelRatio: 1,
+        animation: false,
+        animations: {
+            colors: false,
+            x: false,
+            y: false
         },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                legend: {
-                    display: false
+        transitions: {
+            active: {
+                animation: {
+                    duration: 0
                 }
             }
-        }
-    };
-    if (config.data?.datasets) {
-        essentialConfig.data.datasets = config.data.datasets.map((dataset) => ({
-            label: dataset.label,
-            data: dataset.data || [],
-            backgroundColor: dataset.backgroundColor,
-            borderColor: dataset.borderColor,
-            borderWidth: dataset.borderWidth || 1,
-            type: dataset.type
-        }));
-    }
-    if (config.options?.plugins?.title) {
-        essentialConfig.options.plugins.title = {
-            display: config.options.plugins.title.display,
-            text: config.options.plugins.title.text
-        };
-    }
-    if (config.options?.scales) {
-        essentialConfig.options.scales = {};
-        Object.keys(config.options.scales).forEach(scaleKey => {
-            const scale = config.options.scales[scaleKey];
-            if (scale) {
-                essentialConfig.options.scales[scaleKey] = {
-                    display: scale.display !== false,
-                    title: scale.title
-                        ? {
-                            display: scale.title.display,
-                            text: scale.title.text
-                        }
-                        : undefined
-                };
-            }
-        });
-    }
-    return setDefaultOptions(essentialConfig);
-};
-const sanitizeChartConfig = (config) => {
-    try {
-        const sanitized = {
-            type: config.type,
-            data: deepCloneSerializable(config.data),
-            options: deepCloneSerializable(config.options)
-        };
-        if (sanitized.data?.datasets?.length) {
-            return modernizeChartConfig(sanitized);
-        }
-    }
-    catch (error) {
-        console.error('Sanitizing chart failed, fallback to default config');
-    }
-    return modernizeChartConfig(extractEssentialChartConfig(config));
-};
-const deepCloneSerializable = (obj, visited = new WeakSet()) => {
-    const simpleValue = getSimpleValue(obj, visited);
-    if (simpleValue !== undefined) {
-        return simpleValue.value;
-    }
-    visited.add(obj);
-    try {
-        return cloneComplexObject(obj, visited);
-    }
-    catch (error) {
-        console.warn('Error cloning object:', error);
-        return {};
-    }
-    finally {
-        visited.delete(obj);
-    }
-};
-const getSimpleValue = (obj, visited) => {
-    if (obj === null || typeof obj !== 'object') {
-        return { value: obj };
-    }
-    if (visited.has(obj)) {
-        return { value: {} };
-    }
-    const specialValue = handleSpecialTypes(obj);
-    return specialValue !== undefined ? { value: specialValue } : undefined;
-};
-const cloneComplexObject = (obj, visited) => Array.isArray(obj) ? obj.map(item => deepCloneSerializable(item, visited)) : cloneObject(obj, visited);
-const handleSpecialTypes = (obj) => isNonSerializableType(obj) || obj instanceof RegExp ? null : obj instanceof Date ? obj.toISOString() : undefined;
-const shouldSkipProperty = (key, value) => isNonSerializableType(value) || ['__ngContext__', 'chart', 'ctx', 'canvas'].includes(key) || key.startsWith('_');
-const cloneObject = (obj, visited) => {
-    const cloned = {};
-    for (const key in obj) {
-        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
-            continue;
-        }
-        const value = obj[key];
-        if (shouldSkipProperty(key, value)) {
-            continue;
-        }
-        const clonedValue = deepCloneSerializable(value, visited);
-        if (clonedValue !== null) {
-            cloned[key] = clonedValue;
-        }
+        },
+        plugins: {
+            legend: { display: false },
+            title: config.options.plugins?.title || { display: false }
+        },
+        scales: config.options.scales
     }
-    return cloned;
-};
-const stretchSvg = (svgString) => {
+});
+const stretchSvg = (svgString, width, height) => {
     const parser = new DOMParser();
     const doc = parser.parseFromString(svgString, 'image/svg+xml');
     const svgElement = doc.documentElement;
-    // include padding on the right for labels that go over the edge
-    svgElement.setAttribute('viewBox', `0 0 ${+svgElement.getAttribute('width') + 100} ${svgElement.getAttribute('height')}`);
+    // Add 100px padding to ViewBox for overflow labels
+    svgElement.setAttribute('viewBox', `0 0 ${width + 100} ${height}`);
     svgElement.setAttribute('width', '100%');
     svgElement.setAttribute('height', '100%');
     svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
     return svgElement.outerHTML;
 };
-const convertToSvg = (config, metadata = {}) => {
+const convertToSvg = (config, metadata = {}) => new Promise((resolve, reject) => {
     const width = metadata.width || defaultChartWidth;
     const height = metadata.height || defaultChartHeight;
-    const svgContext = new canvasToSvg(width, height);
+    // 1. Create the SVG Context
+    const svgContext = new C2S(width, height);
+    svgContext.setTransform = () => { };
+    svgContext.resetTransform = () => { };
+    svgContext.roundRect = function (x, y, w, h) {
+        this.rect(x, y, w, h);
+    };
+    // 2. Mock the Canvas Element
     const mockCanvas = document.createElement('canvas');
-    // Set dimensions to match the SVG context
     mockCanvas.width = width;
     mockCanvas.height = height;
-    mockCanvas.style.width = width + 'px';
-    mockCanvas.style.height = height + 'px';
-    mockCanvas.getContext = type => {
+    mockCanvas.style.width = `${width}px`;
+    mockCanvas.style.height = `${height}px`;
+    mockCanvas.getBoundingClientRect = () => ({
+        x: 0,
+        y: 0,
+        bottom: height,
+        height: height,
+        left: 0,
+        right: width,
+        top: 0,
+        width: width,
+        toJSON: () => { }
+    });
+    // Intercept getContext to return our SVG generator
+    mockCanvas.getContext = (type) => {
         if (type === '2d') {
             svgContext.canvas = mockCanvas;
             return svgContext;
         }
         return null;
     };
-    const chartConfig = sanitizeChartConfig(config);
+    // 3. Prepare Config
+    const chartConfig = extractEssentialChartConfig(config);
+    // eslint-disable-next-line prefer-const
+    let chart;
+    chartConfig.options.animation = {
+        onComplete: () => {
+            try {
+                const svgString = svgContext.getSerializedSvg(true);
+                const finalSvg = stretchSvg(svgString, width, height);
+                chart.destroy();
+                resolve(finalSvg);
+            }
+            catch (e) {
+                reject(e);
+            }
+        }
+    };
+    // 4. Register Export-Specific Plugins
     chartConfig.plugins = [
         afterBarDrawPlugin({
             textFn: ({ data }) => [toPrecision(data), metadata.units].filter(Boolean).join(' '),
-            xPosFn: (x, index, width, chart, data) => (data < 0 || isEmpty(data) ? chart.scales['x-axis-0'].getPixelForValue(0) : x) + 10,
             emptyValueLabel: 'No data'
         }),
         metadata.lollipopConfig ? lollipopChartPlugin(metadata.lollipopConfig) : null
-    ].filter(Boolean);
-    new Chart(mockCanvas, chartConfig);
-    return stretchSvg(svgContext.getSerializedSvg(true));
-};
-const exportAsSVG = (config, metadata) => {
-    const content = convertToSvg(config, metadata);
-    const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    downloadFile(url, metadata.fileName || 'aggregate-chart-export.svg');
+    ].filter((p) => Boolean(p));
+    chart = new Chart(mockCanvas, chartConfig);
+});
+const exportAsSVG = async (config, metadata) => {
+    try {
+        const content = await convertToSvg(config, metadata);
+        const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        downloadFile(url, metadata.fileName || 'chart-export.svg');
+    }
+    catch (error) {
+        console.error('Failed to export SVG', error);
+    }
 };
 const downloadSvg = (svgElement) => {
     const serializer = new XMLSerializer();
@@ -1197,6 +1150,10 @@ const downloadSvg = (svgElement) => {
     return downloadFile(url, 'chart.svg');
 };
 
+const registerChart = (items = []) => () => {
+    Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, ...items);
+};
+
 class ChartConfigurationDirective {
     constructor() {
         this._zone = inject(NgZone);
@@ -1210,16 +1167,11 @@ class ChartConfigurationDirective {
      * @param configuration The chart configuration
      */
     set chartConfiguration(configuration) {
-        if (!configuration) {
-            this._chart?.destroy();
-            this._chart = null;
-            return;
-        }
         this._zone.runOutsideAngular(() => {
-            if (this._chart) {
-                this._chart.destroy();
+            this.removeChart();
+            if (configuration) {
+                this._chart = new Chart(this._elementRef.nativeElement, configuration);
             }
-            this._chart = new Chart(this._elementRef.nativeElement, configuration);
         });
     }
     /**
@@ -1238,10 +1190,14 @@ class ChartConfigurationDirective {
         }
     }
     ngOnDestroy() {
-        this._chart?.destroy();
-        this._chart = null;
+        this.removeChart();
         this._observer?.disconnect();
     }
+    removeChart() {
+        const chart = this._chart || Chart.getChart(this._elementRef.nativeElement);
+        chart?.destroy();
+        this._chart = null;
+    }
     get chart() {
         return this._chart;
     }
@@ -1255,8 +1211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             type: Directive,
             args: [{
                     selector: '[chartConfiguration]',
-                    exportAs: 'chart',
-                    standalone: true
+                    exportAs: 'chart'
                 }]
         }], propDecorators: { chartConfiguration: [{
                 type: Input
@@ -1268,85 +1223,206 @@ const defaultSettings$3 = Object.freeze({
     options: {
         responsive: true,
         maintainAspectRatio: false,
-        legend: {
-            display: false
+        plugins: {
+            legend: {
+                display: false
+            }
         }
     }
 });
 class ChartComponent {
     constructor() {
-        this.data = input({}, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
+        this.exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
         this.configuration = computed(() => ({
             ...merge({}, defaultSettings$3, this.config()),
             data: this.data()
         }), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
-    exportAsSvg(config = {}) {
-        return exportAsSVG(this.configuration(), {
+    async exportAsSvg(config = {}) {
+        this.exporting.set(true);
+        await exportAsSVG(this.configuration(), {
             width: 600,
             height: 400,
             fileName: 'chart.svg',
             ...config
         });
+        this.exporting.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download Chart (SVG)\" placement=\"top\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  }\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <a\n      class=\"is-absolute | download\"\n      (click)=\"!exporting() && exportAsSvg()\"\n      [ngbTooltip]=\"exporting() ? null : 'Download Chart (SVG)'\"\n      placement=\"top\">\n      @if (exporting()) {\n        <he-svg-icon name=\"loading\" animation=\"spin\" />\n      } @else {\n        <he-svg-icon name=\"download\" />\n      }\n    </a>\n  }\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, HESvgIconComponent, NgbTooltip], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download Chart (SVG)\" placement=\"top\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  }\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
+            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, HESvgIconComponent, NgbTooltip], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <a\n      class=\"is-absolute | download\"\n      (click)=\"!exporting() && exportAsSvg()\"\n      [ngbTooltip]=\"exporting() ? null : 'Download Chart (SVG)'\"\n      placement=\"top\">\n      @if (exporting()) {\n        <he-svg-icon name=\"loading\" animation=\"spin\" />\n      } @else {\n        <he-svg-icon name=\"download\" />\n      }\n    </a>\n  }\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }] } });
 
+var Breakpoint;
+(function (Breakpoint) {
+    Breakpoint["tablet"] = "tablet";
+    Breakpoint["desktop"] = "desktop";
+    Breakpoint["widescreen"] = "widescreen";
+    Breakpoint["fullhd"] = "fullhd";
+})(Breakpoint || (Breakpoint = {}));
+const beakpointWidths = {
+    [Breakpoint.tablet]: 768,
+    [Breakpoint.desktop]: 1024,
+    [Breakpoint.widescreen]: 1216,
+    [Breakpoint.fullhd]: 1408
+};
+const toSize = (size, dir) => `(${dir}-width: ${dir === 'max' ? size - 1 : size}px)`;
+const toBreakpoint = ({ min, max }) => [min ? toSize(beakpointWidths[min], 'min') : '', max ? toSize(beakpointWidths[max], 'max') : '']
+    .filter(Boolean)
+    .join(' and ');
+class ResponsiveService {
+    constructor() {
+        this.breakPointObserver = inject(BreakpointObserver);
+        this.windowWidth$ = fromEvent(window, 'resize').pipe(startWith(window.innerWidth), map(() => window.innerWidth));
+        this.isMobile$ = this.breakPointObserver.observe(toBreakpoint({ max: Breakpoint.tablet })).pipe(map(state => state.matches), distinctUntilChanged());
+        this.isTablet$ = this.breakPointObserver
+            .observe(toBreakpoint({ min: Breakpoint.tablet, max: Breakpoint.desktop }))
+            .pipe(map(state => state.matches), distinctUntilChanged());
+        this.isDesktop$ = this.breakPointObserver
+            .observe(toBreakpoint({ min: Breakpoint.desktop, max: Breakpoint.widescreen }))
+            .pipe(map(state => state.matches), distinctUntilChanged());
+        this.isWidescreen$ = this.breakPointObserver
+            .observe(toBreakpoint({ min: Breakpoint.widescreen, max: Breakpoint.fullhd }))
+            .pipe(map(state => state.matches), distinctUntilChanged());
+        this.isFullHd$ = this.breakPointObserver.observe(toBreakpoint({ min: Breakpoint.fullhd })).pipe(map(state => state.matches), distinctUntilChanged());
+        this.isTouch$ = this.breakPointObserver.observe(toBreakpoint({ max: Breakpoint.desktop })).pipe(map(state => state.matches), distinctUntilChanged());
+        /**
+         * Resolution for 1080p (or Full HD) on a normal screen, although bulma defines it differently.
+         */
+        this.is1080p$ = this.breakPointObserver.observe(toSize(1920, 'min')).pipe(map(state => state.matches), distinctUntilChanged());
+        this.isRetinaDisplay = () => {
+            if (window.matchMedia) {
+                const mq = window.matchMedia([
+                    'min--moz-device-pixel-ratio: 1.3',
+                    '-o-min-device-pixel-ratio: 2.6/2',
+                    '-webkit-min-device-pixel-ratio: 1.3',
+                    'min-device-pixel-ratio: 1.3',
+                    'min-resolution: 1.3dppx'
+                ]
+                    .map(v => `only screen and (${v})`)
+                    .join(', '));
+                return mq?.matches || window.devicePixelRatio > 1;
+            }
+            return false;
+        };
+        this.isMobile = toSignal(this.isMobile$);
+        this.isTablet = toSignal(this.isTablet$);
+        this.isDesktop = toSignal(this.isDesktop$);
+        this.isWidescreen = toSignal(this.isWidescreen$);
+        this.isFullHd = toSignal(this.isFullHd$);
+        this.isTouch = toSignal(this.isTouch$);
+        this.is1080p = toSignal(this.is1080p$);
+        this.resolutionName = computed(() => this.isMobile()
+            ? 'mobile'
+            : this.isTablet()
+                ? 'tablet'
+                : this.isDesktop()
+                    ? 'desktop'
+                    : this.isWidescreen()
+                        ? 'widescreen'
+                        : 'fullhd', ...(ngDevMode ? [{ debugName: "resolutionName" }] : []));
+        this.resolutionName$ = toObservable(this.resolutionName);
+    }
+    isAboveBreakpoint$(breakpoint) {
+        return typeof breakpoint === 'number'
+            ? this.windowWidth$.pipe(map(width => width >= breakpoint))
+            : breakpoint === 'none'
+                ? of(false)
+                : this._isAboveBreakpointName$(breakpoint);
+    }
+    _isAboveBreakpointName$(breakpoint) {
+        return this.resolutionName$.pipe(map(resolutionName => {
+            const width = beakpointWidths[resolutionName];
+            const overlapBreakpointWidth = beakpointWidths[breakpoint];
+            return width >= overlapBreakpointWidth;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BarChartLegendComponent {
+    constructor() {
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    }
+    trackByItem(item) {
+        return Object.values(item).join('-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BarChartLegendComponent, isStandalone: true, selector: "he-bar-chart-legend", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of data(); track trackByItem(value)) {\n    @if (value.includedItems?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.includedItems.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.backgroundColor || value.color\"></div>\n\n      @if (value.includedItems?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.includedItems; track trackByItem(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.label }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.label }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartLegendComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-bar-chart-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of data(); track trackByItem(value)) {\n    @if (value.includedItems?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.includedItems.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.backgroundColor || value.color\"></div>\n\n      @if (value.includedItems?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.includedItems; track trackByItem(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.label }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.label }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+const grey = '#4a4a4a';
 const defaultSettings$2 = Object.freeze({
-    type: 'horizontalBar',
+    type: 'bar',
     options: {
         animation: {
             duration: 0
         },
-        tooltips: {
-            enabled: false
+        plugins: {
+            legend: {
+                align: 'start'
+            },
+            tooltip: {
+                enabled: false
+            }
         },
         scales: {
-            xAxes: [
-                {
+            x: {
+                display: true,
+                min: 0,
+                title: {
                     display: false,
-                    ticks: {
-                        min: 0
-                    },
-                    scaleLabel: {
-                        display: true,
-                        fontSize: 14,
-                        fontColor: '#4a4a4a'
-                    },
-                    gridLines: {
-                        drawOnChartArea: false
+                    color: grey,
+                    font: {
+                        size: 14
                     }
                 }
-            ],
-            yAxes: [
-                {
+            },
+            y: {
+                display: true,
+                position: 'left',
+                border: {
+                    display: true
+                },
+                grid: {
                     display: true,
-                    position: 'left',
-                    gridLines: {
-                        display: true,
-                        drawOnChartArea: false,
-                        drawTicks: true,
-                        drawBorder: true,
-                        tickMarkLength: 8,
-                        offsetGridLines: false
+                    drawOnChartArea: true,
+                    drawTicks: true,
+                    tickLength: 8,
+                    offset: false
+                },
+                ticks: {
+                    color: grey,
+                    padding: 4,
+                    crossAlign: 'center',
+                    font: {
+                        family: 'Lato',
+                        size: 12,
+                        weight: 400
                     },
-                    ticks: {
-                        fontColor: '#4a4a4a',
-                        fontFamily: 'Lato',
-                        fontSize: 12,
-                        fontStyle: '400',
-                        padding: 4,
-                        crossAlign: 'center'
+                    callback: function (value) {
+                        const label = this.getLabelForValue(value);
+                        return ellipsis$1(label, 50);
                     }
                 }
-            ]
+            }
         }
     }
 });
@@ -1357,43 +1433,93 @@ const defaultDatasets = {
 };
 class BarChartComponent {
     constructor() {
-        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.responsiveService = inject(ResponsiveService);
+        /**
+         * X-axis label.
+         */
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        /**
+         * Maximum value of the chart. If not supplied, the maximum is the highest value from the datasets.
+         */
         this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
         this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        /**
+         * When `datasets` is not provided, a single dataset is used from the `data` parameter, and this label is used.
+         */
+        this.datasetLabel = input('', ...(ngDevMode ? [{ debugName: "datasetLabel" }] : []));
+        /**
+         * If `data` is provided, the `labels` can be read from them. Otherwise use this to provide custom labels.
+         */
         this.labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        /**
+         * Override chart default configuration.
+         */
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Show default button for export, located on the top-right corner of the chart.
+         */
         this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
+        /**
+         * If set to `false`, chart will show `0` instead if the value is negative.
+         */
+        this.showNegativeValues = input(true, ...(ngDevMode ? [{ debugName: "showNegativeValues" }] : []));
+        /**
+         * Maximum values to display on the chart.
+         * All values not dislayed will be grouped together into a "summed" value.
+         * Default is `20`.
+         */
+        this.maximumValues = input(20, ...(ngDevMode ? [{ debugName: "maximumValues" }] : []));
+        this.hasNegativeContributions = computed(() => this.data()?.some(({ count }) => count < 0), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
         this.chart = viewChild.required(ChartComponent);
+        this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
         this.defaultConfig = computed(() => ({
             options: {
-                legend: {
-                    align: 'start'
-                },
                 scales: {
-                    xAxes: [
-                        {
-                            display: true,
-                            ticks: {
-                                ...(this.max() ? { max: this.max() } : {})
-                            }
+                    x: {
+                        display: !this.responsiveService.isMobile(),
+                        ...(this.max() ? { max: this.max() } : {}),
+                        title: {
+                            display: !!this.title(),
+                            text: this.title()
                         }
-                    ]
+                    }
                 }
             }
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
+        this.maximumData = computed(() => {
+            const data = this.data();
+            const includedData = data.slice(0, this.maximumValues());
+            const excludedData = data.slice(this.maximumValues());
+            return [
+                ...includedData,
+                excludedData.length ? {
+                    label: `${excludedData.length} others`,
+                    count: sum(excludedData.map(({ count }) => count)),
+                    backgroundColor: excludedData[0].backgroundColor,
+                    borderColor: excludedData[0].borderColor,
+                    color: excludedData[0].color,
+                    includedItems: excludedData
+                } : []
+            ].flat();
+        }, ...(ngDevMode ? [{ debugName: "maximumData" }] : []));
         this.defaultDatasets = computed(() => this.datasets()?.length
-            ? this.datasets()
+            ? this.datasets().map(dataset => ({
+                ...defaultDatasets,
+                ...dataset
+            }))
             : [
                 {
-                    defaultDatasets,
-                    backgroundColor: this.data().map(({ backgroundColor, color }) => backgroundColor || color),
-                    borderColor: this.data().map(({ borderColor, color }) => borderColor || color),
-                    data: this.data().map(({ count }) => count)
+                    ...defaultDatasets,
+                    backgroundColor: this.maximumData().map(({ backgroundColor, color }) => backgroundColor || color),
+                    borderColor: this.maximumData().map(({ borderColor, color }) => borderColor || color),
+                    data: this.maximumData().map(({ count }) => toPrecision(this.showNegativeValues() ? count : Math.max(0, count))),
+                    label: this.datasetLabel()
                 }
             ], ...(ngDevMode ? [{ debugName: "defaultDatasets" }] : []));
         this.dataConfig = computed(() => ({
             datasets: this.defaultDatasets(),
-            labels: this.labels().length ? this.labels() : this.data().map(({ label }) => label)
+            labels: this.labels().length ? this.labels() : this.maximumData().map(({ label }) => label)
         }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
         this.configuration = computed(() => merge({}, defaultSettings$2, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
@@ -1401,12 +1527,12 @@ class BarChartComponent {
         return this.chart().exportAsSvg(config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: BarChartComponent, isStandalone: true, selector: "he-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["barChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n  <ng-content />\n</he-chart>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BarChartComponent, isStandalone: true, selector: "he-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, datasetLabel: { classPropertyName: "datasetLabel", publicName: "datasetLabel", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showNegativeValues: { classPropertyName: "showNegativeValues", publicName: "showNegativeValues", isSignal: true, isRequired: false, transformFunction: null }, maximumValues: { classPropertyName: "maximumValues", publicName: "maximumValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["barChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n  <ng-content />\n</he-chart>\n\n@if (hasNegativeContributions()) {\n  <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n    <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n    <b>0</b>\n    <span>.</span>\n  </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-bar-chart', exportAs: 'barChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n  <ng-content />\n</he-chart>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'he-bar-chart', exportAs: 'barChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, BarChartLegendComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n  <ng-content />\n</he-chart>\n\n@if (hasNegativeContributions()) {\n  <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n    <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n    <b>0</b>\n    <span>.</span>\n  </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], datasetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasetLabel", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showNegativeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNegativeValues", required: false }] }], maximumValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumValues", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
 
 const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
 const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
@@ -1422,8 +1548,7 @@ class PrecisionPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PrecisionPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'precision',
-                    standalone: true
+                    name: 'precision'
                 }]
         }] });
 
@@ -1437,27 +1562,27 @@ const defaultSettings$1 = Object.freeze({
     options: {
         events: [],
         responsive: true,
-        tooltips: {
-            enabled: false
-        },
-        legend: {
-            display: false,
-            align: 'center'
+        plugins: {
+            tooltip: {
+                enabled: false
+            },
+            legend: {
+                display: false,
+                align: 'center'
+            }
         },
         scales: {
-            yAxes: [
-                {
-                    display: true,
-                    position: 'left',
-                    gridLines: {
-                        display: true
-                    },
-                    ticks: {
-                        beginAtZero: true,
-                        crossAlign: 'center'
-                    }
+            y: {
+                display: true,
+                position: 'left',
+                grid: {
+                    display: true
+                },
+                beginAtZero: true,
+                ticks: {
+                    crossAlign: 'center'
                 }
-            ]
+            }
         }
     }
 });
@@ -1541,41 +1666,40 @@ class DistributionChartComponent {
         this.defaultConfig = computed(() => ({
             options: {
                 scales: {
-                    xAxes: [
-                        {
+                    x: {
+                        display: true,
+                        grid: {
+                            offset: true
+                        },
+                        min: 0,
+                        ticks: {
+                            callback: (label) => label
+                                .split(joinXLabel)
+                                .map(parseFloat)
+                                .map(v => transform(v, 3, true))
+                                // .map(v => v.toExponential())
+                                .join('-')
+                        },
+                        title: {
                             display: true,
-                            gridLines: {
-                                offsetGridLines: true
-                            },
-                            ticks: {
-                                min: 0,
-                                userCallback: (label) => label
-                                    .split(joinXLabel)
-                                    .map(parseFloat)
-                                    .map(v => transform(v, 3, true))
-                                    // .map(v => v.toExponential())
-                                    .join('-')
-                            },
-                            scaleLabel: {
-                                display: true,
-                                labelString: this.label()
-                            }
+                            text: this.label()
                         }
-                    ],
-                    yAxes: [
-                        {
-                            ticks: {
-                                fontColor: '#4A4A4A',
-                                fontFamily: 'Lato',
-                                fontSize: 10,
-                                fontStyle: '400'
+                    },
+                    y: {
+                        ticks: {
+                            font: {
+                                family: 'Lato',
+                                size: 10,
+                                style: 'normal',
+                                weight: 400
                             },
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Frequency of values'
-                            }
+                            color: '#4A4A4A'
+                        },
+                        title: {
+                            display: true,
+                            text: 'Frequency of values'
                         }
-                    ]
+                    }
                 }
             }
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
@@ -1589,8 +1713,6 @@ class DistributionChartComponent {
                             backgroundColor: opaqueColor(colors.lightBlue),
                             borderColor: colors.lightBlue,
                             borderWidth: 1,
-                            fill: true,
-                            pointRadius: 0,
                             type: 'bar'
                         },
                         {
@@ -1604,7 +1726,7 @@ class DistributionChartComponent {
                             type: 'line'
                         }
                     ]
-                    : null,
+                    : [],
                 this.singlePoint()?.length
                     ? {
                         label: 'Value',
@@ -1617,10 +1739,8 @@ class DistributionChartComponent {
                         type: 'line',
                         tension: 0
                     }
-                    : null
-            ]
-                .filter(Boolean)
-                .flat(),
+                    : []
+            ].flat(),
             labels: this.groupedData().labels
         }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
         this.configuration = computed(() => merge({}, defaultSettings$1, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
@@ -1633,42 +1753,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             args: [{ selector: 'he-distribution-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], nbBins: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbBins", required: false }] }], maxPercentile: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPercentile", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-const defaultSettings = {
+const defaultSettings = Object.freeze({
     type: 'line',
     options: {
         scales: {
-            xAxes: [
-                {
-                    type: 'time',
-                    time: {
-                        unit: 'day'
+            x: {
+                type: 'time',
+                time: {
+                    unit: 'day'
+                }
+            }
+        }
+    }
+});
+class LineChartComponent {
+    constructor() {
+        this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
+        this.chart = viewChild.required(ChartComponent);
+        this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
+        this.dataConfig = computed(() => ({
+            datasets: this.datasets()
+        }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
+        this.configuration = computed(() => merge({}, defaultSettings, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    }
+    exportAsSvg(config = {}) {
+        return this.chart().exportAsSvg(config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: LineChartComponent, isStandalone: true, selector: "he-line-chart", inputs: { datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["lineChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-line-chart', exportAs: 'lineChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
+
+const defaultConfig = Object.freeze({
+    options: {
+        indexAxis: 'y',
+        scales: {
+            x: {
+                grid: {
+                    drawOnChartArea: false
+                },
+                ticks: {
+                    callback: value => toPrecision(Number(value), 3)
+                }
+            },
+            y: {
+                grid: {
+                    drawOnChartArea: false
+                },
+                ticks: {
+                    crossAlign: 'near'
+                }
+            }
+        }
+    }
+});
+const defaultTooltipFn = ({ label, count, includedItems }) => includedItems.length ? includedItems.map(item => defaultTooltipFn(item)).join('</br>') : `${label}: ${count}`;
+class HorizontalBarChartComponent extends BarChartComponent {
+    constructor() {
+        super(...arguments);
+        this.tooltipFn = input(defaultTooltipFn, ...(ngDevMode ? [{ debugName: "tooltipFn" }] : []));
+        this.afterBarDrawSettings = input(...(ngDevMode ? [undefined, { debugName: "afterBarDrawSettings" }] : []));
+        this.tooltip = viewChild.required('tooltip');
+        this.horizontalConfiguration = computed(() => ({
+            ...merge(this.configuration(), defaultConfig, {
+                options: {
+                    onClick: (event, activeElements) => {
+                        const index = activeElements?.[0]?.index;
+                        !isUndefined(index) && this.showTooltip(index, event.x, event.y);
+                    },
+                    scales: {
+                        y: {
+                            display: !this.responsiveService.isMobile()
+                        }
                     }
                 }
+            }),
+            plugins: [
+                lollipopChartPlugin(),
+                backgroundHoverPlugin({ threshold: 5 }),
+                afterBarDrawPlugin(this.afterBarDrawSettings()),
+                ...(this.configuration().plugins ?? [])
             ]
-        }
-    }
-};
-class LineChartComponent {
-    constructor() {
-        this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
-        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
-        this.chart = viewChild.required(ChartComponent);
-        this.dataConfig = computed(() => ({
-            datasets: this.datasets()
-        }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge({}, defaultSettings, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "horizontalConfiguration" }] : []));
+        this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : []));
+        this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : []));
     }
-    exportAsSvg(config = {}) {
-        return this.chart().exportAsSvg(config);
+    showTooltip(index, x, y) {
+        this.tooltipX.set(x);
+        this.tooltipY.set(y);
+        const data = this.maximumData()[index];
+        const text = this.tooltipFn()(data || {}, index);
+        text && setTimeout(() => this.tooltip().open({ data: text }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: LineChartComponent, isStandalone: true, selector: "he-line-chart", inputs: { datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["lineChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HorizontalBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HorizontalBarChartComponent, isStandalone: true, selector: "he-horizontal-bar-chart", inputs: { tooltipFn: { classPropertyName: "tooltipFn", publicName: "tooltipFn", isSignal: true, isRequired: false, transformFunction: null }, afterBarDrawSettings: { classPropertyName: "afterBarDrawSettings", publicName: "afterBarDrawSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], exportAs: ["horizontalBarChart"], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n\n    <ng-content />\n  </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n  <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n    <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n    <b>0</b>\n    <span>.</span>\n  </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HorizontalBarChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-line-chart', exportAs: 'lineChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'he-horizontal-bar-chart', exportAs: 'horizontalBarChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, NgbTooltip, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n\n    <ng-content />\n  </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n  <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n    <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n    <b>0</b>\n    <span>.</span>\n  </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { tooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFn", required: false }] }], afterBarDrawSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterBarDrawSettings", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
 
 const ignoreCompounds = (value) => typeof value !== 'string' ||
     [
@@ -2703,8 +2891,7 @@ class ResizedDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizedDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[resized]',
-                    standalone: true
+                    selector: '[resized]'
                 }]
         }], ctorParameters: () => [], propDecorators: { resized: [{ type: i0.Output, args: ["resized"] }] } });
 
@@ -2898,7 +3085,7 @@ class BlankNodeStateNoticeComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BlankNodeStateNoticeComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-blank-node-state-notice', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (show()) {\n  <div class=\"is-flex is-gap-8 is-align-items-center is-size-7 is-italic\">\n    <span class=\"notice-data-unchaged\">\u2020 Data uploaded by the user</span>\n    <span class=\"divider\"></span>\n    <span class=\"notice-data-added\">* Data added by HESTIA</span>\n    <span class=\"divider\"></span>\n    <span class=\"notice-data-updated\">** Data updated by HESTIA</span>\n    @if (showDeleted()) {\n      <span class=\"divider\"></span>\n      <span class=\"notice-data-deleted\">**** Data deleted by HESTIA</span>\n    }\n  </div>\n}\n", styles: ["@media screen and (max-width: 767px){:host div{flex-direction:column;align-items:flex-start!important}:host div .divider{display:none}}.divider{width:1px;height:20px;background:#4a4a4a}\n"] }]
+            args: [{ selector: 'he-blank-node-state-notice', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (show()) {\n  <div class=\"is-flex is-gap-8 is-align-items-center is-size-7 is-italic\">\n    <span class=\"notice-data-unchaged\">\u2020 Data uploaded by the user</span>\n    <span class=\"divider\"></span>\n    <span class=\"notice-data-added\">* Data added by HESTIA</span>\n    <span class=\"divider\"></span>\n    <span class=\"notice-data-updated\">** Data updated by HESTIA</span>\n    @if (showDeleted()) {\n      <span class=\"divider\"></span>\n      <span class=\"notice-data-deleted\">**** Data deleted by HESTIA</span>\n    }\n  </div>\n}\n", styles: ["@media screen and (max-width: 767px){:host div{flex-direction:column;align-items:flex-start!important}:host div .divider{display:none}}.divider{width:1px;height:20px;background:#4a4a4a}\n"] }]
         }], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], showDeleted: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleted", required: false }] }] } });
 
 class BlankNodeValueDeltaComponent {
@@ -3199,100 +3386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                     }, template: "<aside\n  class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n  [class.sticky]=\"sticky()\">\n  <ng-content select=\"[header]\" />\n\n  <div class=\"is-flex is-flex-direction-column is-gap-4\">\n    @for (link of links(); track trackByLink(link)) {\n      <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n  @if (isCollapsible(link)) {\n    <he-svg-icon\n      [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n      class=\"is-inline-block is-clickable\"\n      size=\"20\"\n      (click)=\"toggleLink($event, link)\" />\n  }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n  @if (level === 1) {\n    @if (link.icon) {\n      <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n    } @else if (hasPrimaryIcons()) {\n      <span class=\"primary-missing-icon\">&nbsp;</span>\n    }\n  }\n  <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n  <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  @let childParents = concatLinks(link, parentLinks);\n  @if (isCollapsible(link)) {\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n      [class.is-hidden]=\"!link.expanded\">\n      @for (childLink of link.links; track trackByLink(childLink)) {\n        <ng-container\n          *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n  <div\n    class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n    [attr.data-menu-level]=\"level\"\n    (click)=\"toggleLink($event, link)\"\n    [class.with-border-color]=\"!!link.borderColor\">\n    @if (link.borderColor) {\n      <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n    }\n    <a\n      class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n      [class.he-menu-item-selectable]=\"!!link?.url\"\n      (click)=\"link.url ? close() : null\"\n      [routerLink]=\"link.url\"\n      [queryParams]=\"link.queryParams\"\n      [fragment]=\"link.fragment\"\n      routerLinkActive=\"link-active\"\n      [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n      (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n      <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n    </a>\n  </div>\n  <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width: 1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], routerLinkMatchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkMatchOptions", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
-var Breakpoint;
-(function (Breakpoint) {
-    Breakpoint["tablet"] = "tablet";
-    Breakpoint["desktop"] = "desktop";
-    Breakpoint["widescreen"] = "widescreen";
-    Breakpoint["fullhd"] = "fullhd";
-})(Breakpoint || (Breakpoint = {}));
-const beakpointWidths = {
-    [Breakpoint.tablet]: 768,
-    [Breakpoint.desktop]: 1024,
-    [Breakpoint.widescreen]: 1216,
-    [Breakpoint.fullhd]: 1408
-};
-const toSize = (size, dir) => `(${dir}-width: ${dir === 'max' ? size - 1 : size}px)`;
-const toBreakpoint = ({ min, max }) => [min ? toSize(beakpointWidths[min], 'min') : '', max ? toSize(beakpointWidths[max], 'max') : '']
-    .filter(Boolean)
-    .join(' and ');
-class ResponsiveService {
-    constructor() {
-        this.breakPointObserver = inject(BreakpointObserver);
-        this.windowWidth$ = fromEvent(window, 'resize').pipe(startWith(window.innerWidth), map(() => window.innerWidth));
-        this.isMobile$ = this.breakPointObserver.observe(toBreakpoint({ max: Breakpoint.tablet })).pipe(map(state => state.matches), distinctUntilChanged());
-        this.isTablet$ = this.breakPointObserver
-            .observe(toBreakpoint({ min: Breakpoint.tablet, max: Breakpoint.desktop }))
-            .pipe(map(state => state.matches), distinctUntilChanged());
-        this.isDesktop$ = this.breakPointObserver
-            .observe(toBreakpoint({ min: Breakpoint.desktop, max: Breakpoint.widescreen }))
-            .pipe(map(state => state.matches), distinctUntilChanged());
-        this.isWidescreen$ = this.breakPointObserver
-            .observe(toBreakpoint({ min: Breakpoint.widescreen, max: Breakpoint.fullhd }))
-            .pipe(map(state => state.matches), distinctUntilChanged());
-        this.isFullHd$ = this.breakPointObserver.observe(toBreakpoint({ min: Breakpoint.fullhd })).pipe(map(state => state.matches), distinctUntilChanged());
-        this.isTouch$ = this.breakPointObserver.observe(toBreakpoint({ max: Breakpoint.desktop })).pipe(map(state => state.matches), distinctUntilChanged());
-        /**
-         * Resolution for 1080p (or Full HD) on a normal screen, although bulma defines it differently.
-         */
-        this.is1080p$ = this.breakPointObserver.observe(toSize(1920, 'min')).pipe(map(state => state.matches), distinctUntilChanged());
-        this.isRetinaDisplay = () => {
-            if (window.matchMedia) {
-                const mq = window.matchMedia([
-                    'min--moz-device-pixel-ratio: 1.3',
-                    '-o-min-device-pixel-ratio: 2.6/2',
-                    '-webkit-min-device-pixel-ratio: 1.3',
-                    'min-device-pixel-ratio: 1.3',
-                    'min-resolution: 1.3dppx'
-                ]
-                    .map(v => `only screen and (${v})`)
-                    .join(', '));
-                return mq?.matches || window.devicePixelRatio > 1;
-            }
-            return false;
-        };
-        this.isMobile = toSignal(this.isMobile$);
-        this.isTablet = toSignal(this.isTablet$);
-        this.isDesktop = toSignal(this.isDesktop$);
-        this.isWidescreen = toSignal(this.isWidescreen$);
-        this.isFullHd = toSignal(this.isFullHd$);
-        this.isTouch = toSignal(this.isTouch$);
-        this.is1080p = toSignal(this.is1080p$);
-        this.resolutionName = computed(() => this.isMobile()
-            ? 'mobile'
-            : this.isTablet()
-                ? 'tablet'
-                : this.isDesktop()
-                    ? 'desktop'
-                    : this.isWidescreen()
-                        ? 'widescreen'
-                        : 'fullhd', ...(ngDevMode ? [{ debugName: "resolutionName" }] : []));
-        this.resolutionName$ = toObservable(this.resolutionName);
-    }
-    isAboveBreakpoint$(breakpoint) {
-        return typeof breakpoint === 'number'
-            ? this.windowWidth$.pipe(map(width => width >= breakpoint))
-            : breakpoint === 'none'
-                ? of(false)
-                : this._isAboveBreakpointName$(breakpoint);
-    }
-    _isAboveBreakpointName$(breakpoint) {
-        return this.resolutionName$.pipe(map(resolutionName => {
-            const width = beakpointWidths[resolutionName];
-            const overlapBreakpointWidth = beakpointWidths[breakpoint];
-            return width >= overlapBreakpointWidth;
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResponsiveService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 const storageKey$2 = 'he-drawer-container';
 const moveEvent = () => merge$1(fromEvent(window, 'mousemove').pipe(map(event => event.clientX)), fromEvent(window, 'touchmove', { passive: false }).pipe(map(event => event.touches[0].clientX)));
 class DrawerContainerComponent {
@@ -3518,8 +3611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             type: Directive,
             args: [{
                     selector: '[buttonScroller]',
-                    exportAs: 'buttonScroller',
-                    standalone: true
+                    exportAs: 'buttonScroller'
                 }]
         }], propDecorators: { scrollUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollUnit", required: false }] }] } });
 
@@ -3549,8 +3641,7 @@ class LongPressDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LongPressDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appLongPress]',
-                    standalone: true
+                    selector: '[appLongPress]'
                 }]
         }], propDecorators: { longPress: [{ type: i0.Output, args: ["longPress"] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], onPressStart: [{
                 type: HostListener,
@@ -3590,8 +3681,7 @@ class IsEllipsisActiveDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IsEllipsisActiveDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[isEllipsisActive]',
-                    standalone: true
+                    selector: '[isEllipsisActive]'
                 }]
         }] });
 
@@ -4109,7 +4199,7 @@ class SkeletonTextComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SkeletonTextComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-skeleton-text', standalone: true, template: "<span>&nbsp;</span>\n", styles: [":host{border-radius:3px;display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:#0001;line-height:10px;-webkit-user-select:none;user-select:none;pointer-events:none}span{display:inline-block}:host(.is-animated){position:relative;background:linear-gradient(to right,#0001 8%,#0002 18%,#0001 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}\n"] }]
+            args: [{ selector: 'he-skeleton-text', template: "<span>&nbsp;</span>\n", styles: [":host{border-radius:3px;display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:#0001;line-height:10px;-webkit-user-select:none;user-select:none;pointer-events:none}span{display:inline-block}:host(.is-animated){position:relative;background:linear-gradient(to right,#0001 8%,#0002 18%,#0001 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}\n"] }]
         }], propDecorators: { animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], _animated: [{
                 type: HostBinding,
                 args: ['class.is-animated']
@@ -4148,8 +4238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             args: [{
                     selector: 'he-social-tags',
                     template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], classes: [{
                 type: HostBinding,
@@ -4177,7 +4266,7 @@ class ToastComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-toast', standalone: true, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }]
+            args: [{ selector: 'he-toast', template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  @for (toast of toasts; track toast) {\n    <div class=\"notification is-{{ toast.color }}\" role=\"alert\">\n      <button class=\"delete\" (click)=\"dismiss(toast)\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n      <strong>\n        @switch (toast.color) {\n          @case ('danger') {\n            @switch (toast.message) {\n              @case ('Unauthorized') {\n                <span>You are not allowed to perform this action.</span>\n              }\n              @case ('form-invalid') {\n                <span>Please fix all the errors on this page.</span>\n              }\n              @case ('users-email-already-taken') {\n                <span>Email already taken.</span>\n              }\n              @case ('users-auth-already-taken') {\n                <span>Account already connected.</span>\n              }\n              @default {\n                <span>\n                  @if (toast.showRawMessage) {\n                    <span>{{ toast.message }}</span>\n                  }\n                  <span [class.is-hidden]=\"toast.showRawMessage\">\n                    An unknown error occurred. Please try again later.\n                  </span>\n                </span>\n              }\n            }\n          }\n          @default {\n            @if (toast.showRawMessage) {\n              <span>{{ toast.message }}</span>\n            }\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          }\n        }\n      </strong>\n    </div>\n  }\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable prefer-spread */
@@ -4198,8 +4287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'applyPure',
-                    pure: true,
-                    standalone: true
+                    pure: true
                 }]
         }] });
 
@@ -4213,8 +4301,7 @@ class CapitalizePipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CapitalizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'capitalize',
-                    standalone: true
+                    name: 'capitalize'
                 }]
         }] });
 
@@ -4265,8 +4352,7 @@ class ClickOutsideDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[clickOutside]',
-                    standalone: true
+                    selector: '[clickOutside]'
                 }]
         }], propDecorators: { clickOutsideListenAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickOutsideListenAfter", required: false }] }], clickOutside: [{ type: i0.Output, args: ["clickOutside"] }] } });
 
@@ -4285,8 +4371,7 @@ class CompoundDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CompoundDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appCompound]',
-                    standalone: true
+                    selector: '[appCompound]'
                 }]
         }], ctorParameters: () => [], propDecorators: { appCompound: [{ type: i0.Input, args: [{ isSignal: true, alias: "appCompound", required: true }] }], compoundTermType: [{ type: i0.Input, args: [{ isSignal: true, alias: "compoundTermType", required: false }] }] } });
 
@@ -4300,8 +4385,7 @@ class CompoundPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CompoundPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'compound',
-                    standalone: true
+                    name: 'compound'
                 }]
         }] });
 
@@ -4315,8 +4399,7 @@ class DefaultPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DefaultPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'default',
-                    standalone: true
+                    name: 'default'
                 }]
         }] });
 
@@ -4350,8 +4433,7 @@ class DurationPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'duration',
-                    standalone: true
+                    name: 'duration'
                 }]
         }] });
 
@@ -4365,8 +4447,7 @@ class EllipsisPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: EllipsisPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'ellipsis',
-                    standalone: true
+                    name: 'ellipsis'
                 }]
         }] });
 
@@ -4380,8 +4461,7 @@ class FileSizePipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'fileSize',
-                    standalone: true
+                    name: 'fileSize'
                 }]
         }] });
 
@@ -4395,8 +4475,7 @@ class GetPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: GetPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'get',
-                    standalone: true
+                    name: 'get'
                 }]
         }] });
 
@@ -4410,8 +4489,7 @@ class IsArrayPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IsArrayPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'isArray',
-                    standalone: true
+                    name: 'isArray'
                 }]
         }] });
 
@@ -4425,8 +4503,7 @@ class IsObjectPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IsObjectPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'isObject',
-                    standalone: true
+                    name: 'isObject'
                 }]
         }] });
 
@@ -4484,8 +4561,7 @@ class KeyToLabelPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KeyToLabelPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'keyToLabel',
-                    standalone: true
+                    name: 'keyToLabel'
                 }]
         }] });
 
@@ -4499,8 +4575,7 @@ class NoExtPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NoExtPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'noExt',
-                    standalone: true
+                    name: 'noExt'
                 }]
         }] });
 
@@ -4514,8 +4589,7 @@ class PluralizePipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PluralizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'pluralize',
-                    standalone: true
+                    name: 'pluralize'
                 }]
         }] });
 
@@ -4529,8 +4603,7 @@ class RemoveMarkdownPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RemoveMarkdownPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'removeMarkdown',
-                    standalone: true
+                    name: 'removeMarkdown'
                 }]
         }] });
 
@@ -4544,8 +4617,7 @@ class RepeatPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RepeatPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'repeat',
-                    standalone: true
+                    name: 'repeat'
                 }]
         }] });
 
@@ -6103,8 +6175,7 @@ class TagsInputDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TagsInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appTagsInput]',
-                    standalone: true
+                    selector: '[appTagsInput]'
                 }]
         }], propDecorators: { appTagsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTagsInput", required: true }] }] } });
 
@@ -6118,8 +6189,7 @@ class ThousandSuffixesPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThousandSuffixesPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'thousandSuff',
-                    standalone: true
+                    name: 'thousandSuff'
                 }]
         }] });
 
@@ -6133,8 +6203,7 @@ class ThousandsPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThousandsPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'thousands',
-                    standalone: true
+                    name: 'thousands'
                 }]
         }] });
 
@@ -6148,8 +6217,7 @@ class TimesPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TimesPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'times',
-                    standalone: true
+                    name: 'times'
                 }]
         }] });
 
@@ -6163,8 +6231,7 @@ class UncapitalizePipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UncapitalizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'uncapitalize',
-                    standalone: true
+                    name: 'uncapitalize'
                 }]
         }] });
 
@@ -6178,8 +6245,7 @@ class SortByPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SortByPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'sortBy',
-                    standalone: true
+                    name: 'sortBy'
                 }]
         }] });
 
@@ -8012,7 +8078,11 @@ class NodeLogsModelsComponent {
         this.nodeType = computed(() => nodeType(this.node()), ...(ngDevMode ? [{ debugName: "nodeType" }] : []));
         this.logsResource = rxResource({
             params: () => ({ node: this.node() }),
-            stream: ({ params: { node } }) => this.nodeService.getLog$({ ...node, dataState: DataState.recalculated })
+            stream: ({ params: { node } }) => this.nodeService.getLog$({
+                '@type': node['@type'],
+                '@id': node['@id'],
+                dataState: node.aggregated ? DataState.original : DataState.recalculated
+            })
         });
         this.allLogs = computed(() => this.logsResource.value() ?? '', ...(ngDevMode ? [{ debugName: "allLogs" }] : []));
         this.hasLogs = computed(() => this.allLogs() !== '', ...(ngDevMode ? [{ debugName: "hasLogs" }] : []));
@@ -8285,20 +8355,34 @@ class CyclesCompletenessComponent {
         component.headerKeys.set(headerKeys$1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n  @if (selectedView() === View.table) {\n    <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n      <he-svg-icon name=\"download\" />\n    </button>\n  }\n\n  @if (selectedView() === View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field is-horizontal is-mb-0\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth\">\n                <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                  @for (value of cycles(); track value; let cycleIndex = $index) {\n                    <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  @if (views()?.length > 1) {\n    <div class=\"field has-addons\">\n      @for (view of views(); track view) {\n        <div class=\"control\">\n          <button\n            class=\"button is-small\"\n            [class.is-selected]=\"selectedView() === view\"\n            (click)=\"selectedView.set(view)\">\n            <he-svg-icon\n              name=\"checkmark\"\n              aria-hidden=\"true\"\n              class=\"is-hidden-mobile\"\n              [class.is-hidden-tablet]=\"selectedView() !== view\" />\n            <he-svg-icon\n              [name]=\"viewIcon[view]\"\n              aria-hidden=\"true\"\n              [class.is-hidden-tablet]=\"selectedView() === view\" />\n            <span class=\"is-hidden-mobile\">{{ view }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n        <table class=\"table is-fullwidth is-narrow is-striped\">\n          <thead>\n            <tr class=\"has-text-weight-semibold\">\n              <th class=\"width-auto has-border-right\"></th>\n              @for (completeness of completenessKeys(); track completeness) {\n                <th [attr.title]=\"completeness\">\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                    {{ keyToLabel(completeness) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of completenessKeys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState()\"\n                      [node]=\"getCompleteness(cycle)\"\n                      [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No completeness data</span>\n      </div>\n    }\n  }\n  @case (View.logs) {\n    @if (selectedNode()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n        <table class=\"table is-fullwidth is-narrow is-striped\">\n          <thead>\n            <tr class=\"has-text-weight-semibold\">\n              <th class=\"width-auto has-border-right\"></th>\n              @for (completeness of completenessKeys(); track completeness) {\n                <th [attr.title]=\"completeness\">\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                    {{ keyToLabel(completeness) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of completenessKeys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState()\"\n                      [node]=\"getCompleteness(cycle)\"\n                      [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No completeness data</span>\n      </div>\n    }\n  }\n  @case (View.logs) {\n    <ng-container *ngTemplateOutlet=\"selectView\" />\n\n    @if (selectedNode()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-cycles-completeness', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
                         HESvgIconComponent,
                         DataTableComponent,
                         NodeLinkComponent,
                         BlankNodeStateComponent,
                         BlankNodeStateNoticeComponent,
                         NodeLogsModelsComponent
-                    ], template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n  @if (selectedView() === View.table) {\n    <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n      <he-svg-icon name=\"download\" />\n    </button>\n  }\n\n  @if (selectedView() === View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field is-horizontal is-mb-0\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth\">\n                <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                  @for (value of cycles(); track value; let cycleIndex = $index) {\n                    <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  @if (views()?.length > 1) {\n    <div class=\"field has-addons\">\n      @for (view of views(); track view) {\n        <div class=\"control\">\n          <button\n            class=\"button is-small\"\n            [class.is-selected]=\"selectedView() === view\"\n            (click)=\"selectedView.set(view)\">\n            <he-svg-icon\n              name=\"checkmark\"\n              aria-hidden=\"true\"\n              class=\"is-hidden-mobile\"\n              [class.is-hidden-tablet]=\"selectedView() !== view\" />\n            <he-svg-icon\n              [name]=\"viewIcon[view]\"\n              aria-hidden=\"true\"\n              [class.is-hidden-tablet]=\"selectedView() === view\" />\n            <span class=\"is-hidden-mobile\">{{ view }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n        <table class=\"table is-fullwidth is-narrow is-striped\">\n          <thead>\n            <tr class=\"has-text-weight-semibold\">\n              <th class=\"width-auto has-border-right\"></th>\n              @for (completeness of completenessKeys(); track completeness) {\n                <th [attr.title]=\"completeness\">\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                    {{ keyToLabel(completeness) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of completenessKeys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState()\"\n                      [node]=\"getCompleteness(cycle)\"\n                      [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No completeness data</span>\n      </div>\n    }\n  }\n  @case (View.logs) {\n    @if (selectedNode()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n" }]
+                    ], template: "@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n        <table class=\"table is-fullwidth is-narrow is-striped\">\n          <thead>\n            <tr class=\"has-text-weight-semibold\">\n              <th class=\"width-auto has-border-right\"></th>\n              @for (completeness of completenessKeys(); track completeness) {\n                <th [attr.title]=\"completeness\">\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                    {{ keyToLabel(completeness) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of completenessKeys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState()\"\n                      [node]=\"getCompleteness(cycle)\"\n                      [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No completeness data</span>\n      </div>\n    }\n  }\n  @case (View.logs) {\n    <ng-container *ngTemplateOutlet=\"selectView\" />\n\n    @if (selectedNode()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
+class ChartExportButtonComponent {
+    constructor() {
+        this.chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  class=\"button is-small is-ghost\"\n  (click)=\"!chart().exporting() && chart().exportAsSvg(config())\"\n  [ngbTooltip]=\"chart().exporting() ? null : 'Download Chart (SVG)'\"\n  placement=\"right\">\n  @if (chart().exporting()) {\n    <he-svg-icon name=\"loading\" animation=\"spin\" />\n  } @else {\n    <he-svg-icon name=\"download\" />\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"button is-small is-ghost\"\n  (click)=\"!chart().exporting() && chart().exportAsSvg(config())\"\n  [ngbTooltip]=\"chart().exporting() ? null : 'Download Chart (SVG)'\"\n  placement=\"right\">\n  @if (chart().exporting()) {\n    <he-svg-icon name=\"loading\" animation=\"spin\" />\n  } @else {\n    <he-svg-icon name=\"download\" />\n  }\n</button>\n" }]
+        }], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+
 const cycleValue = (cycle, values) => (values[cycle['@id']]?.nodes[0] || { value: [0] }).value;
 const cycleName = (cycle, index) => `${index + 1}. ${defaultLabel(cycle)}`;
 class CyclesEmissionsChartComponent {
@@ -8306,46 +8390,17 @@ class CyclesEmissionsChartComponent {
         this.cycles = input.required(...(ngDevMode ? [{ debugName: "cycles" }] : []));
         this.emissionPerCycle = computed(() => groupNodesByTerm(this.cycles(), 'emissions'), ...(ngDevMode ? [{ debugName: "emissionPerCycle" }] : []));
         this.terms = computed(() => Object.values(this.emissionPerCycle() ?? {})
-            .filter(({ values }) => Object.values(values).some(({ nodes: [{ value }] }) => propertyValue$1(value) >= 0))
+            .filter(({ values }) => Object.values(values).some(({ nodes: [{ value }] }) => propertyValue$1(value) > 0))
             .map(({ term }) => term)
             .sort((a, b) => a.name.localeCompare(b.name)), ...(ngDevMode ? [{ debugName: "terms" }] : []));
         this.selectedTerm = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedTerm" }] : []));
         this.labels = computed(() => this.cycles().map(cycleName), ...(ngDevMode ? [{ debugName: "labels" }] : []));
-        this.chartColors = computed(() => this.cycles().map(listColor), ...(ngDevMode ? [{ debugName: "chartColors" }] : []));
         this.chartValues = computed(() => this.emissionPerCycle()?.[this.selectedTerm()?.name]?.values || {}, ...(ngDevMode ? [{ debugName: "chartValues" }] : []));
-        this.datasets = computed(() => [
-            {
-                label: this.selectedTerm()?.name || '',
-                data: this.cycles().map(cycle => toPrecision(propertyValue$1(cycleValue(cycle, this.chartValues()), this.selectedTerm?.['@id']))),
-                backgroundColor: this.chartColors(),
-                borderColor: this.chartColors(),
-                barThickness: 2,
-                barPercentage: 1,
-                categoryPercentage: 1
-            }
-        ], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
-        this.chartConfig = computed(() => ({
-            plugins: [
-                lollipopChartPlugin(),
-                afterBarDrawPlugin({
-                    xPosFn: (x, index, width, chart) => (x || chart.scales['x-axis-0'].getPixelForValue(0)) + 10,
-                    textFn: ({ data }) => `${data}`,
-                    colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
-                    emptyValueLabel: 'No value'
-                })
-            ],
-            options: {
-                scales: {
-                    xAxes: [
-                        {
-                            scaleLabel: {
-                                labelString: this.selectedTerm()?.units
-                            }
-                        }
-                    ]
-                }
-            }
-        }), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
+        this.chartData = computed(() => this.cycles().map((cycle, index) => ({
+            label: cycleName(cycle, index),
+            count: propertyValue$1(cycleValue(cycle, this.chartValues()), this.selectedTerm?.['@id']),
+            color: listColor(cycle, index)
+        })), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         effect(() => {
             // make sure selected term exists
             const terms = this.terms();
@@ -8360,11 +8415,11 @@ class CyclesEmissionsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-cycles-emissions-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
 
 class CyclesFunctionalUnitMeasureComponent {
@@ -8378,7 +8433,7 @@ class CyclesFunctionalUnitMeasureComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesFunctionalUnitMeasureComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-functional-unit-measure', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span class=\"is-nowrap has-text-ellipsis\" [attr.title]=\"functionalUnit()\">\n  @switch (functionalUnit()) {\n    @case (CycleFunctionalUnit['1 ha']) {\n      1 hectare\n    }\n    @default {\n      relative\n    }\n  }\n</span>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'he-cycles-functional-unit-measure', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"is-nowrap has-text-ellipsis\" [attr.title]=\"functionalUnit()\">\n  @switch (functionalUnit()) {\n    @case (CycleFunctionalUnit['1 ha']) {\n      1 hectare\n    }\n    @default {\n      relative\n    }\n  }\n</span>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { cycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycle", required: true }] }] } });
 
 var View$3;
@@ -8651,7 +8706,7 @@ class CyclesNodesTimelineComponent {
         this.maxChart = computed(() => formatDate(this.maxDate(), false), ...(ngDevMode ? [{ debugName: "maxChart" }] : []));
         this.minChart = computed(() => this.minDate() ? formatDate(this.minDate(), true) : monthsBefore(this.maxChart(), 12), ...(ngDevMode ? [{ debugName: "minChart" }] : []));
         this.chartConfig = computed(() => ({
-            type: 'horizontalBar',
+            type: 'bar',
             plugins: [
                 lollipopChartPlugin({
                     circleRadius: 6,
@@ -8659,64 +8714,62 @@ class CyclesNodesTimelineComponent {
                     colorFn: () => colour
                 }),
                 afterBarDrawPlugin({
-                    xPosFn: (x, index, width, chart) => (x || chart.scales['x-axis-0'].getPixelForValue(this.minChart())) + 10,
-                    colorFn: () => '#b5b5b5',
+                    xPosFn: (x, index, width, chart) => (x || chart.scales.x.getPixelForValue(this.minChart().getTime())) + 10,
                     emptyValueLabel: 'No dates available'
                 })
             ],
             options: {
-                legend: {
-                    display: false
-                },
-                tooltips: {
-                    mode: 'point',
-                    enabled: false,
-                    intersect: true,
-                    axis: 'y'
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        mode: 'point',
+                        enabled: false,
+                        intersect: true,
+                        axis: 'y'
+                    }
                 },
                 scales: {
-                    xAxes: [
-                        {
-                            type: 'time',
-                            time: {
-                                unit: 'month'
-                            },
-                            ticks: {
-                                max: this.maxChart(),
-                                ...(this.minChart() ? { min: this.minChart() } : {})
-                            },
-                            stacked: false,
-                            gridLines: {
-                                drawOnChartArea: false
-                            }
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'month'
+                        },
+                        max: this.maxChart().getTime(),
+                        ...(this.minChart() ? { min: this.minChart().getTime() } : {}),
+                        stacked: false,
+                        grid: {
+                            drawOnChartArea: false
                         }
-                    ],
-                    yAxes: [
-                        {
-                            stacked: true,
-                            ticks: {
-                                padding: 4
-                            },
-                            gridLines: {
-                                display: true,
-                                drawOnChartArea: false,
-                                drawTicks: true,
-                                drawBorder: true,
-                                tickMarkLength: 8,
-                                offsetGridLines: false
-                            }
+                    },
+                    y: {
+                        stacked: true,
+                        border: {
+                            display: true
+                        },
+                        grid: {
+                            display: true,
+                            drawOnChartArea: false,
+                            drawTicks: true,
+                            tickLength: 8,
+                            offset: false
+                        },
+                        ticks: {
+                            padding: 4
                         }
-                    ]
+                    }
                 }
             }
         }), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-nodes-timeline', imports: [ChartComponent], template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-cycles-nodes-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: true }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }] } });
 
 class TermsUnitsDescriptionComponent {
@@ -8809,7 +8862,7 @@ class CyclesNodesComponent {
         this.View = View$2;
         this.viewIcon = viewIcon$2;
         this.showView = computed(() => ({
-            [View$2.chart]: this.selectedNodeKey() === BlankNodesKey.emissions && this.cycles().length > 1,
+            [View$2.chart]: [this.isEmission() && this.cycles().length > 1].some(Boolean),
             [View$2.logs]: !this.isOriginal() && this.hasRecalculatedNodes(),
             [View$2.table]: true,
             [View$2.timeline]: this.enableTimeline()
@@ -8955,7 +9008,7 @@ class CyclesResultComponent {
                 backgroundColor: color,
                 borderColor: color,
                 barPercentage: 0.5,
-                data: this.cycles().map(({ '@id': id }) => (values[id] ? propertyValue$1(values[id].value, termId) : 0))
+                data: this.cycles().map(({ '@id': id }) => values[id] ? propertyValue$1(values[id].value, termId) : 0)
             };
         }), ...(ngDevMode ? [{ debugName: "chartDatasets" }] : []));
         this.chartData = computed(() => ({
@@ -8963,41 +9016,37 @@ class CyclesResultComponent {
             labels: this.chartLabels()
         }), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.chartConfig = {
-            type: 'horizontalBar',
+            type: 'bar',
             options: {
-                legend: {
-                    display: true
-                },
-                tooltips: {
-                    callbacks: {
-                        title: (tooltipItems, data) => data.labels[tooltipItems[0].index]
+                indexAxis: 'y',
+                plugins: {
+                    legend: {
+                        display: true
+                    },
+                    tooltip: {
+                        callbacks: {
+                            title: tooltipItems => tooltipItems[0].label
+                        }
                     }
                 },
                 scales: {
-                    xAxes: [
-                        {
-                            ticks: {
-                                min: 0
-                            }
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            position: 'left',
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Cycle'
-                            }
+                    x: {
+                        min: 0
+                    },
+                    y: {
+                        position: 'left',
+                        title: {
+                            display: true,
+                            text: 'Cycle'
                         }
-                    ]
+                    }
                 }
             }
         };
-        Chart$1.scaleService.updateScaleDefaults('category', {
-            ticks: {
-                callback: tick => ellipsis(`${tick}`, 25)
-            }
-        });
+        Chart.defaults.scales.category.ticks.callback = function (val) {
+            const label = this.getLabelForValue(val);
+            return ellipsis(`${label}`, 25);
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesResultComponent, isStandalone: true, selector: "he-cycles-result", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" />\n", styles: [":host{display:block}he-chart ::ng-deep .chart-container{min-height:300px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -9402,19 +9451,16 @@ class NodeAggregatedQualityScoreComponent {
                     : of(undefined)
         });
         this.countryId = computed(() => this.countryResource.value()?.['@id'], ...(ngDevMode ? [{ debugName: "countryId" }] : []));
-        this.aggregationId = computed(() => [!!this.node(), !!this.countryId()].every(Boolean) ? nodeToAggregationFilename(this.node(), this.countryId()) : null, ...(ngDevMode ? [{ debugName: "aggregationId" }] : []));
         this.logsResource = rxResource({
             params: () => ({
                 showInfo: this.showInfo(),
-                node: this.node(),
-                aggregationId: this.aggregationId()
+                node: this.node()
             }),
-            stream: ({ params: { showInfo, node, aggregationId } }) => showInfo && aggregationId
+            stream: ({ params: { showInfo, node } }) => showInfo
                 ? this.nodeService
                     .getLog$({
                     '@type': node['@type'],
-                    '@id': aggregationId,
-                    aggregated: true
+                    '@id': node['@id']
                 })
                     .pipe(map(value => (value ? parseLines(value) : [])), mergeAll(), filter(({ data: { message } }) => !!message), map(({ data: { message } }) => parseMessage$1(message)), filter(({ id }) => id === this.node()['@id']), reduce((a, b) => ({ ...a, ...b }), {}))
                 : of({})
@@ -9845,7 +9891,7 @@ class EngineModelsStageComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: EngineModelsStageComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-engine-models-stage', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (inProgress()) {\n  <span class=\"tag is-warning\">\n    <span>Calculation in progress (stage {{ stage() }} out of {{ maxStage() }})</span>\n  </span>\n}\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'he-engine-models-stage', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (inProgress()) {\n  <span class=\"tag is-warning\">\n    <span>Calculation in progress (stage {{ stage() }} out of {{ maxStage() }})</span>\n  </span>\n}\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
 class EngineModelsVersionLinkComponent {
@@ -12035,31 +12081,31 @@ ${JSON.stringify(error)}
 /label ~"Priority::MEDIUM"
 /label ~"Tracking::Triage"
       `.trim())}`;
-var ErrorKeys;
-(function (ErrorKeys) {
-    ErrorKeys["PrivacyNotAllowed"] = "privacy-not-allowed";
-    ErrorKeys["NoData"] = "no-data";
-    ErrorKeys["NoHeaders"] = "no-headers";
-    ErrorKeys["InvalidJSON"] = "invalid-json";
-    ErrorKeys["InvalidSheetName"] = "invalid-sheet-name";
-    ErrorKeys["InvalidFirstColumn"] = "invalid-first-column";
-    ErrorKeys["InvalidExcelFile"] = "invalid-excel-file";
-    ErrorKeys["DuplicatedHeaders"] = "duplicated-headers";
-    ErrorKeys["DuplicatedIds"] = "duplicated-ids";
-    ErrorKeys["PropertyRequired"] = "property-required";
-    ErrorKeys["PropertyInternal"] = "property-internal";
-    ErrorKeys["UploadsLimit"] = "upload-limit";
-    ErrorKeys["NestedHeaders"] = "nested-headers";
-    ErrorKeys["NestedNodes"] = "nested-nodes";
-    ErrorKeys["ReferenceExistingHeaders"] = "reference-existing-headers";
-    ErrorKeys["MultipleTermHeaders"] = "multiple-term-headers";
-    ErrorKeys["MaxSize"] = "max-size";
-    ErrorKeys["InvalidBlankNodeHeaders"] = "invalid-blank-node-headers";
-    ErrorKeys["MaxRows"] = "max-rows";
-    ErrorKeys["Mendeley"] = "'content-type'";
-    ErrorKeys["Timeout"] = "TimeoutError: Timeout has occurred";
-    ErrorKeys["SetValueError"] = "set-value-failed";
-})(ErrorKeys || (ErrorKeys = {}));
+var FileUploadErrorKeys;
+(function (FileUploadErrorKeys) {
+    FileUploadErrorKeys["PrivacyNotAllowed"] = "privacy-not-allowed";
+    FileUploadErrorKeys["NoData"] = "no-data";
+    FileUploadErrorKeys["NoHeaders"] = "no-headers";
+    FileUploadErrorKeys["InvalidJSON"] = "invalid-json";
+    FileUploadErrorKeys["InvalidSheetName"] = "invalid-sheet-name";
+    FileUploadErrorKeys["InvalidFirstColumn"] = "invalid-first-column";
+    FileUploadErrorKeys["InvalidExcelFile"] = "invalid-excel-file";
+    FileUploadErrorKeys["DuplicatedHeaders"] = "duplicated-headers";
+    FileUploadErrorKeys["DuplicatedIds"] = "duplicated-ids";
+    FileUploadErrorKeys["PropertyRequired"] = "property-required";
+    FileUploadErrorKeys["PropertyInternal"] = "property-internal";
+    FileUploadErrorKeys["UploadsLimit"] = "upload-limit";
+    FileUploadErrorKeys["NestedHeaders"] = "nested-headers";
+    FileUploadErrorKeys["NestedNodes"] = "nested-nodes";
+    FileUploadErrorKeys["ReferenceExistingHeaders"] = "reference-existing-headers";
+    FileUploadErrorKeys["MultipleTermHeaders"] = "multiple-term-headers";
+    FileUploadErrorKeys["MaxSize"] = "max-size";
+    FileUploadErrorKeys["InvalidBlankNodeHeaders"] = "invalid-blank-node-headers";
+    FileUploadErrorKeys["MaxRows"] = "max-rows";
+    FileUploadErrorKeys["Mendeley"] = "'content-type'";
+    FileUploadErrorKeys["Timeout"] = "TimeoutError: Timeout has occurred";
+    FileUploadErrorKeys["SetValueError"] = "set-value-failed";
+})(FileUploadErrorKeys || (FileUploadErrorKeys = {}));
 const valueToNodes = (value, type) => Array.isArray(value)
     ? isExpandable(value)
         ? value.map(val => ({
@@ -12107,14 +12153,14 @@ class FilesUploadErrorsComponent {
         this.hasGeoJSONError = computed(() => this.error()?.error?.includes('Unable to parse GeoJSON value'), ...(ngDevMode ? [{ debugName: "hasGeoJSONError" }] : []));
         this.schemaUrl = computed(() => [schemaBaseUrl(this.file()?.schemaVersion), this.error()?.schema].filter(Boolean).join('/'), ...(ngDevMode ? [{ debugName: "schemaUrl" }] : []));
         this.schemaKeyUrl = computed(() => [this.schemaUrl(), this.error()?.schemaKey || this.error()?.key].filter(Boolean).join('#'), ...(ngDevMode ? [{ debugName: "schemaKeyUrl" }] : []));
-        this.isSchemaError = computed(() => [ErrorKeys$1.PropertyNotFound, ErrorKeys$1.SchemaNotFound].includes(this.error()?.message), ...(ngDevMode ? [{ debugName: "isSchemaError" }] : []));
+        this.isSchemaError = computed(() => [ErrorKeys.PropertyNotFound, ErrorKeys.SchemaNotFound].includes(this.error()?.message), ...(ngDevMode ? [{ debugName: "isSchemaError" }] : []));
         this.showJsonPreview = computed(() => !!this.error()?.node && this.isJSONFile(), ...(ngDevMode ? [{ debugName: "showJsonPreview" }] : []));
         this.showCsvPreview = computed(() => this.headers().length && this.rows().length && !this.isSchemaError() && !this.isJSONFile(), ...(ngDevMode ? [{ debugName: "showCsvPreview" }] : []));
         this.reportErrorUrl = computed(() => issueLink(this.file()?.pipelineStatus || this.file()?.status, this.message()), ...(ngDevMode ? [{ debugName: "reportErrorUrl" }] : []));
         this.baseUrl = baseUrl();
         this.nodeTypes = acceptedTypes;
-        this.SchemaErrorKeys = ErrorKeys$1;
-        this.ErrorKeys = ErrorKeys;
+        this.SchemaErrorKeys = ErrorKeys;
+        this.ErrorKeys = FileUploadErrorKeys;
         this.maxFileSizeMb = maxFileSizeMb;
         this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.headers = signal([], ...(ngDevMode ? [{ debugName: "headers" }] : []));
@@ -13234,11 +13280,11 @@ class ImpactAssessmentsGraphComponent {
         effect(() => this.showWarnings.set(this.warnings()?.length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessments: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessments", required: false }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
 const parseLog = (data) => ({
@@ -13263,13 +13309,12 @@ const logsTotalValue = (logs, includeNegativeValues) => sum((includeNegativeValu
 const valueRatio = (value, total) => toPrecision((value * 100) / total, 2);
 const chartLabel = (value, total) => {
     const ratio = valueRatio(value, total);
-    return value === 0 ? '0' : `${toPrecision(value, 3)}, ${ratio}%`;
+    return value === 0 ? '0' : `${value}, ${ratio}%`;
 };
 const chartBreakdownLabel = (logs, total, maxValues) => {
     const values = logs.slice(maxValues);
     return values.map(({ blankNodeTermId, value }) => `${blankNodeTermId}: ${chartLabel(value, total)}`).join('</br>');
 };
-const chartTextColor = (value) => (isUndefined(value) ? '#b5b5b5' : '#4a4a4a');
 const logToCsv = (logs, impact) => [
     csvHeaders.join(','),
     ...logs
@@ -13288,7 +13333,6 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         this.responsiveService = inject(ResponsiveService);
         this.impactAssessment = input.required(...(ngDevMode ? [{ debugName: "impactAssessment" }] : []));
         this.indicators = input([], ...(ngDevMode ? [{ debugName: "indicators" }] : []));
-        this.tooltip = viewChild.required('tooltip');
         this.maximumValues = computed(() => (this.responsiveService.isMobile() ? 10 : 20), ...(ngDevMode ? [{ debugName: "maximumValues" }] : []));
         this.logsResource = rxResource({
             params: () => ({
@@ -13305,7 +13349,10 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
                     ].filter(v => v.term['@id'] === log.blankNodeTermId);
                     const inputs = blankNodes
                         .filter(v => v.inputs?.length)
-                        .map(v => ({ name: v.inputs.map(i => i['@id']).join(';'), value: v.value * log.coefficient }));
+                        .map(v => ({
+                        name: v.inputs.map(i => i['@id']).join(';'),
+                        value: toPrecision(v.value * log.coefficient, 3)
+                    }));
                     const inputsValue = inputs.reduce((prev, curr) => prev + curr.value, 0);
                     const impact = impacts?.find(v => v.term['@id'] === log.impactTermId);
                     // logs might exist but impact was not added => skip logs
@@ -13313,7 +13360,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
                         ? {
                             ...log,
                             impactTermUnits: impact.term?.units,
-                            value: total,
+                            value: toPrecision(total, 3),
                             inputs,
                             inputsValue
                         }
@@ -13355,93 +13402,34 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
             ...(this.impactAssessment()?.endpoints || [])
         ], ...(ngDevMode ? [{ debugName: "impacts" }] : []));
         this.noData = computed(() => this.nonZeroLogs()?.length === 0, ...(ngDevMode ? [{ debugName: "noData" }] : []));
-        this.hasNegativeContributions = computed(() => this.nonZeroLogs()?.some(log => log.value < 0), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
-        this.values = computed(() => {
-            const includedValues = this.nonZeroLogs()?.slice(0, this.maximumValues());
-            const excludedValues = this.nonZeroLogs()?.slice(this.maximumValues());
-            return [
-                ...includedValues,
-                excludedValues.length
-                    ? {
-                        blankNodeTermId: `${excludedValues.length} others`,
-                        value: sum(excludedValues.map(({ value }) => value)),
-                        subLogs: excludedValues.map(value => ({
-                            ...value,
-                            name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId
-                        }))
-                    }
-                    : null
-            ]
-                .filter(Boolean)
-                .map((value, index) => ({
-                ...value,
-                name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId,
-                color: listColor(value, index),
-                secondaryColor: listColorWithAlpha()(value, index)
-            }));
-        }, ...(ngDevMode ? [{ debugName: "values" }] : []));
+        this.values = computed(() => this.nonZeroLogs().map((value, index) => ({
+            ...value,
+            name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId,
+            color: listColor(value, index)
+        })), ...(ngDevMode ? [{ debugName: "values" }] : []));
         this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.logs(), this.impactAssessment()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
         this.id = computed(() => this.impactAssessment()?.['@id'] || this.impactAssessment()?.id, ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.downloadFilename = computed(() => `${this.id()}-logs.csv`, ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
         this.displayValue = signal(false, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
         this.total = computed(() => logsTotalValue(this.nonZeroLogs(), false), ...(ngDevMode ? [{ debugName: "total" }] : []));
-        this.labels = computed(() => this.values().map(({ name }) => name), ...(ngDevMode ? [{ debugName: "labels" }] : []));
-        this.datasets = computed(() => [
-            {
-                label: this.selectedTerm()?.name ?? '',
-                // do not show negative values in the chart
-                data: this.values().map(({ value }) => Math.max(0, value)),
-                backgroundColor: this.values().map(({ color }) => color),
-                borderColor: this.values().map(({ color }) => color),
-                barThickness: 2,
-                barPercentage: 1,
-                categoryPercentage: 1,
-                hoverBackgroundColor: this.values().map(({ secondaryColor }) => secondaryColor),
-                hoverBorderColor: this.values().map(({ secondaryColor }) => secondaryColor),
-                hoverBorderWidth: 3
-            }
-        ], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
-        this.chartConfig = computed(() => ({
-            plugins: [
-                lollipopChartPlugin(),
-                afterBarDrawPlugin({
-                    xPosFn: (x, index, width, chart) => (x || chart.scales['x-axis-0'].getPixelForValue(0)) + 10,
-                    colorFn: (m, index, chart, data) => chartTextColor(data),
-                    emptyValueLabel: 'No value',
-                    ...(this.displayValue()
-                        ? {
-                            textFn: ({ label, data }, index) => index === this.maximumValues()
-                                ? `${label} at ${toPrecision(data)}`
-                                : `${toPrecision(data)}`
-                        }
-                        : { textFn: ({ data }) => `${valueRatio(data, this.total())}%` })
-                }),
-                backgroundHoverPlugin({ threshold: 5 })
-            ],
-            options: {
-                onClick: (event, activeElements) => {
-                    const index = activeElements?.[0]?.['_index'];
-                    !event.isTrusted && this.showTooltip(index, event.x, event.y);
-                },
-                scales: {
-                    xAxes: [
-                        {
-                            display: !this.responsiveService.isMobile(),
-                            scaleLabel: {
-                                labelString: this.selectedTerm()?.units
-                            }
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            display: !this.responsiveService.isMobile()
-                        }
-                    ]
-                }
+        this.chartData = computed(() => this.values().map(value => ({
+            label: value.name,
+            count: value.value,
+            backgroundColor: value.color
+        })), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
+        this.chartTooltipFn = ({ includedItems }, index) => {
+            const { value } = this.values()[index] || {};
+            return !isUndefined(value)
+                ? includedItems?.length
+                    ? chartBreakdownLabel(this.nonZeroLogs(), this.total(), this.maximumValues())
+                    : chartLabel(value, this.total())
+                : '';
+        };
+        this.afterBarDrawSettings = computed(() => (this.displayValue()
+            ? {
+                textFn: ({ label, data }, index) => (index === this.maximumValues() ? `${label} at ${data}` : `${data}`)
             }
-        }), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
-        this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : []));
-        this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : []));
+            : { textFn: ({ data }) => `${valueRatio(data, this.total())}%` }), ...(ngDevMode ? [{ debugName: "afterBarDrawSettings" }] : []));
         // make sure selected term exists
         effect(() => {
             const terms = this.terms();
@@ -13466,24 +13454,13 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
     trackByLog({ blankNodeTermId, modelId, impactTermId }) {
         return [blankNodeTermId, modelId, impactTermId].join('-');
     }
-    showTooltip(index, x, y) {
-        this.tooltipX.set(x);
-        this.tooltipY.set(y);
-        const { value } = this.values()[index] || {};
-        const text = value
-            ? index === this.maximumValues()
-                ? chartBreakdownLabel(this.nonZeroLogs(), this.total(), this.maximumValues())
-                : chartLabel(value, this.total())
-            : '';
-        text && setTimeout(() => this.tooltip().open({ data: text }));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-horizontal-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings"], exportAs: ["horizontalBarChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, NgbDropdownModule, BarChartComponent], template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbDropdownModule, HorizontalBarChartComponent], template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-horizontal-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
 const impactName = (impact, index) => `${index + 1}. ${defaultLabel(impact)}`;
@@ -13501,42 +13478,12 @@ class ImpactAssessmentsIndicatorsChartComponent {
             .map(({ term }) => term)
             .sort((a, b) => a.name.localeCompare(b.name)), ...(ngDevMode ? [{ debugName: "terms" }] : []));
         this.selectedTerm = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedTerm" }] : []));
-        this.labels = computed(() => this.impactAssessments().map(impactName), ...(ngDevMode ? [{ debugName: "labels" }] : []));
-        this.colors = computed(() => this.impactAssessments().map(listColor), ...(ngDevMode ? [{ debugName: "colors" }] : []));
         this.values = computed(() => this.indicatorPerImpactAssessment()?.[this.selectedTerm()?.name]?.values || {}, ...(ngDevMode ? [{ debugName: "values" }] : []));
-        this.datasets = computed(() => [
-            {
-                label: this.selectedTerm()?.name || '',
-                data: this.impactAssessments().map(impact => toPrecision(impactValue(impact, this.values()))),
-                backgroundColor: this.colors(),
-                borderColor: this.colors(),
-                barThickness: 2,
-                barPercentage: 1,
-                categoryPercentage: 1
-            }
-        ], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
-        this.chartConfig = computed(() => ({
-            plugins: [
-                lollipopChartPlugin(),
-                afterBarDrawPlugin({
-                    xPosFn: (x, index, width, chart) => (x || chart.scales['x-axis-0'].getPixelForValue(0)) + 10,
-                    textFn: ({ data }) => `${data}`,
-                    colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
-                    emptyValueLabel: 'No value'
-                })
-            ],
-            options: {
-                scales: {
-                    xAxes: [
-                        {
-                            scaleLabel: {
-                                labelString: this.selectedTerm()?.units
-                            }
-                        }
-                    ]
-                }
-            }
-        }), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
+        this.chartData = computed(() => this.impactAssessments().map((impact, index) => ({
+            label: impactName(impact, index),
+            count: impactValue(impact, this.values()),
+            color: listColor(impact, index)
+        })), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         effect(() => {
             // make sure selected term exists
             const terms = this.terms();
@@ -13551,11 +13498,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}he-horizontal-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
 
 var View$1;
@@ -13785,8 +13732,7 @@ class InputIndeterminateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputIndeterminateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[indeterminate]',
-                    standalone: true
+                    selector: 'input[indeterminate]'
                 }]
         }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: true }] }] } });
 
@@ -13852,8 +13798,7 @@ class FilterAccordionGroupPipe {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FilterAccordionGroupPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'filterAccordionGroup',
-                    standalone: true
+                    name: 'filterAccordionGroup'
                 }]
         }] });
 class FilterAccordionComponent extends ControlValueAccessor {
@@ -14036,8 +13981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
         }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
 
 const sortedPoints = (values) => Object.entries(values)
-    .map(([x, y]) => ({ x, y }))
-    .sort((a, b) => new Date(a.x).getTime() - new Date(b.x).getTime());
+    .map(([x, y]) => ({ x: new Date(x).getTime(), y }))
+    .sort((a, b) => a.x - b.x);
 class SitesManagementChartComponent {
     constructor() {
         this.nodeService = inject(HeNodeService);
@@ -14100,26 +14045,18 @@ class SitesManagementChartComponent {
             type: 'bar',
             options: {
                 scales: {
-                    xAxes: [
-                        {
-                            type: 'time',
-                            time: {
-                                unit: 'month'
-                            },
-                            stacked: true
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            position: 'left',
-                            ticks: {
-                                min: 0
-                                // TODO: not all of them are in %
-                                // userCallback: (label: string) => `${label}%`
-                            },
-                            stacked: true
-                        }
-                    ]
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'month'
+                        },
+                        stacked: true
+                    },
+                    y: {
+                        position: 'left',
+                        min: 0,
+                        stacked: true
+                    }
                 }
             }
         };
@@ -14133,11 +14070,11 @@ class SitesManagementChartComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesManagementChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" [showExportButton]=\"false\" />\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["termRemoved"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" />\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" [showExportButton]=\"false\" />\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["termRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-sites-management-chart', imports: [FormsModule, KeyValuePipe, NgbTooltip, ChartComponent, HorizontalButtonsGroupComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" [showExportButton]=\"false\" />\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"] }]
+            args: [{ selector: 'he-sites-management-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, KeyValuePipe, ChartComponent, ChartExportButtonComponent, HorizontalButtonsGroupComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" />\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" [showExportButton]=\"false\" />\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { site: [{ type: i0.Input, args: [{ isSignal: true, alias: "site", required: true }] }] } });
 
 var View;
@@ -14320,5 +14257,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map