@hestia-earth/ui-components 0.43.23 → 0.43.25

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

@@ -10,10 +10,9 @@ import { ReplaySubject, of, mergeMap, shareReplay, delay, map, catchError, disti
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
 import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, isTypeNode, sortKeysByType, uniquenessFields, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, typeToSchemaType, infrastructureTermTermType, managementTermTermType } from '@hestia-earth/schema';
-import { axisLabelCursor, afterBarDrawPlugin, lollipopChartPlugin, hasNegativeContributions, withOthers, barDataset, defaultBarDatasets, defaultBarSettings, categoryLabel, emissionCategories, categoryValues, emissionCategoriesOf, emissionCategoryValue, chartLabelMaxLength, defaultTicksFont, toLine, groupDataByCategory, backgroundHoverPlugin, axisHoverPlugin, increaseScaleLimits, defaultHorizontalTooltip, horizontalBarHeight, defaultHorizontalBarConfig, listColor, getColor, parseContributions as parseContributions$1, indicatorLogs, nonZeroContributors, logsTotalValue, namedContributors, breakdownBars, breakdownTooltip, breakdownBarText, breakdownScale, logToCsv as logToCsv$2 } from '@hestia-earth/ui-components-charts';
-export { ColorPalette, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, chartLabelMaxLength, colorToRgba, defaultTicksFont, getColor, groupDataByCategory, hexToRgba, increaseScaleLimits, listColor, listColorContinuous, listColorWithAlpha, lollipopChartPlugin, parseColor, sumValues } from '@hestia-earth/ui-components-charts';
-import { select, selectAll } from 'd3-selection';
-import { isEmpty, unique, monthsBefore, toPrecision, isNumber, isUndefined, toComma, duration, keyToLabel, sum, min, max, mean, median, ellipsis as ellipsis$1, getPercentileValue, isEqual as isEqual$2, diffInDays } from '@hestia-earth/utils';
+import { formatPrecision, axisLabelCursor, defaultChartSettings, exportAsSVG, downloadFile, hasNegativeContributions, withOthers, barDataset, defaultBarDatasets, defaultBarSettings, categoryLabel, emissionCategories, categoryValues, emissionCategoriesOf, emissionCategoryValue, contributionItemColor, contributionChartHeight, groupDataByCategory, contributionChartConfig, hasNegativeValues, contributionData, defaultContributionSettings, contributionCsv, dataAtIndex, datasetCenter, distributionChart, defaultLineSettings, defaultHorizontalTooltip, horizontalBarHeight, lollipopChartPlugin, backgroundHoverPlugin, afterBarDrawPlugin, axisHoverPlugin, defaultHorizontalBarConfig, chartLabelMaxLength, listColor, getColor, nodeBorderColours, nodeColours as nodeColours$1, hierarchyLegend, downloadSvg, downloadPng, hierarchyCsv, drawHierarchyChart, hierarchyTermTypes, hierarchyContributions, missingTermIds, hierarchyWarnings, hierarchyModels, hierarchyData, defaultIndicatorsModelId, parseContributions, indicatorLogs, nonZeroContributors, logsTotalValue, namedContributors, breakdownBars, breakdownTooltip, breakdownBarText, breakdownScale, logToCsv as logToCsv$1 } from '@hestia-earth/ui-components-charts';
+export { ColorPalette, afterBarDrawPlugin, axisHoverPlugin, axisLabelCursor, backgroundHoverPlugin, chartLabelMaxLength, colorToRgba, convertToSvg, d3ellipse, d3wrap, defaultTicksFont, downloadFile, downloadPng, downloadSvg, exportAsSVG, getColor, groupDataByCategory, hexToRgba, increaseScaleLimits, listColor, listColorContinuous, listColorWithAlpha, lollipopChartPlugin, parseColor, registerChart, sumValues } from '@hestia-earth/ui-components-charts';
+import { isEmpty, unique, monthsBefore, toPrecision, isNumber, isUndefined, duration, keyToLabel, sum, min, max, mean, median, isEqual as isEqual$2, diffInDays } from '@hestia-earth/utils';
 import { json2csv } from 'json-2-csv';
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/term';
 import defaultModelId from '@hestia-earth/glossary/resources/defaultModelId.json';
@@ -39,14 +38,11 @@ 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 { 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 annotationPlugin from 'chartjs-plugin-annotation';
 import merge$1 from 'lodash.merge';
+import { Chart } from 'chart.js';
 import set from 'lodash.set';
 import uniqBy from 'lodash.uniqby';
-import { headersFromCsv, toCsv as toCsv$1, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
+import { headersFromCsv, toCsv, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
 import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
 import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
 import { ScrollStrategyOptions, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -63,10 +59,6 @@ import { createErrorFormatter, htmlRenderer, isMigrationError, isMissingProperty
 export { errorHasError, errorHasWarning, filterError, guidePageId, isMigrationError, isMissingOneOfError, isMissingPropertyError, missingNodeErrors } from '@hestia-earth/ui-components/file-errors';
 import { format, subDays, parseISO } from 'date-fns';
 import { enGB } from 'date-fns/locale';
-import { linkHorizontal } from 'd3-shape';
-import 'd3-transition';
-import { hierarchy, tree } from 'd3-hierarchy';
-import { easeElasticIn, easeElasticOut } from 'd3-ease';
 
 class HeAuthService {
     set token(token) {
@@ -263,20 +255,6 @@ const toSnakeCase = (value) => (value || '')
     .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
     .replace(/([A-Z])([A-Z][a-z])/g, '$1_$2')
     .toLowerCase();
-const downloadFile = (url, fileName) => {
-    if (!url) {
-        return;
-    }
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.setAttribute('style', 'display: none');
-    a.href = url;
-    a.download = fileName;
-    a.click();
-    a.remove();
-    // Clean up the object URL after a short delay
-    setTimeout(() => URL.revokeObjectURL(url), 100);
-};
 const dataVersionHeaderKey = 'X-DATA-VERSION';
 const dataVersionHeader = (dataVersion) => (dataVersion ? { [dataVersionHeaderKey]: dataVersion } : {});
 
@@ -560,51 +538,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const d3ellipse = (selection, maxWidth, ellipsisStr = '...') => {
-    selection.each(function () {
-        const t = select(this);
-        if (t.node().getComputedTextLength() > maxWidth) {
-            const chars = t.text().split('');
-            const line = [];
-            do {
-                line.push(chars.shift());
-                t.text(line.join('') + ellipsisStr);
-            } while (t.node().getComputedTextLength() <= maxWidth);
-        }
-    });
-};
-const shouldBreakLine = (overflows, isMultiWordLine, isOwnLineWord, isUnderLineLimit) => ((overflows && isMultiWordLine) || isOwnLineWord) && isUnderLineLimit;
-const d3wrap = (t, { maxWidth, maxLines, words, nHeight, lHeight, vcentre = false, ownLineWord = '' }) => {
-    words = words.reverse();
-    const y = t.attr('y');
-    const x = t.attr('x');
-    let lineNumber = 1;
-    let word;
-    let line = [];
-    let tspan = t.text(null).append('tspan').attr('x', x).attr('y', y);
-    while ((word = words.pop()) && lineNumber <= maxLines) {
-        line.push(word);
-        tspan.text(line.join(' '));
-        // TODO: hyphenate words that are too long
-        if (shouldBreakLine(tspan.node().getComputedTextLength() > maxWidth, line.length > 1, word === ownLineWord, lineNumber < maxLines)) {
-            line.pop();
-            tspan.text(line.join(' '));
-            line = [word];
-            tspan = t
-                .append('tspan')
-                .attr('x', x)
-                .attr('y', y)
-                .attr('dy', lineNumber++ * lHeight + 'px')
-                .text(word);
-        }
-    }
-    d3ellipse(tspan, maxWidth, '... ' + ownLineWord);
-    if (vcentre) {
-        const yOffset = nHeight / 2 - (t.selectAll('tspan').size() - 1) * (lHeight / 2);
-        t.selectAll('tspan').attr('y', yOffset);
-    }
-};
-
 const SUCCESS_CRITERION_MAX_DELTA_PERCENT = 5;
 const WARNING_CRITERION_MAX_DELTA_PERCENT = 20;
 var DeltaColour;
@@ -666,7 +599,7 @@ const parseMessage = (message = '') => message.split(',').reduce((prev, parts) =
     };
 }, {});
 const formatLine = ({ data: { message } }) => parseMessage(message);
-const logToCsv$1 = (lines) => json2csv((lines || []).map(formatLine).filter(data => !isEmpty(data)), {
+const logToCsv = (lines) => json2csv((lines || []).map(formatLine).filter(data => !isEmpty(data)), {
     emptyFieldValue: ''
 });
 
@@ -1814,10 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             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: [":host{display:block}@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 }] }] } });
 
-const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
-const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
-    ? `${(enableComma ? toComma : v => v)(parsePrecision(value, precision))}`.replace(/\.00$/, '')
-    : value;
+const transform = formatPrecision;
 class PrecisionPipe {
     transform(value, precision = 3, enableComma = true) {
         return transform(value, precision, enableComma);
@@ -5624,163 +5554,6 @@ const axisLabelSettings = (tooltip, tooltipFn, clickFn) => {
     };
 };
 
-const defaultChartWidth = 800;
-const defaultChartHeight = 600;
-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
-        },
-        transitions: {
-            active: {
-                animation: {
-                    duration: 0
-                }
-            }
-        },
-        plugins: {
-            legend: { display: false },
-            title: config.options.plugins?.title || { display: false }
-        },
-        scales: config.options.scales
-    }
-});
-const stretchSvg = (svgString, width, height) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString, 'image/svg+xml');
-    const svgElement = doc.documentElement;
-    // 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 parseAfterDrawBarPlugins = (afterBarDrawConfig, units) => Array.isArray(afterBarDrawConfig)
-    ? afterBarDrawConfig.map(afterBarDrawPlugin)
-    : [
-        afterBarDrawPlugin({
-            textFn: ({ data }) => [toPrecision(Array.isArray(data) ? data[0] : data), units].filter(Boolean).join(' '),
-            emptyValueLabel: 'No data',
-            ...(afterBarDrawConfig || {})
-        })
-    ];
-const convertToSvg = (config, metadata = {}) => new Promise((resolve, reject) => {
-    const width = metadata.width || defaultChartWidth;
-    const height = metadata.height || defaultChartHeight;
-    // 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');
-    mockCanvas.width = width;
-    mockCanvas.height = height;
-    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;
-    };
-    // 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 = [
-        metadata.afterBarDrawConfig !== null && parseAfterDrawBarPlugins(metadata.afterBarDrawConfig, metadata.units),
-        metadata.lollipopConfig !== null && lollipopChartPlugin(metadata.lollipopConfig)
-    ]
-        .filter(Boolean)
-        .flat();
-    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 svgToUrl = (svgElement) => {
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svgElement);
-    if (!svgString.includes('xmlns')) {
-        svgString = svgString.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
-    }
-    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-    return URL.createObjectURL(blob);
-};
-const downloadSvg = (svgElement) => downloadFile(svgToUrl(svgElement), 'chart.svg');
-const downloadPng = async (svgElement, { width, height } = {}) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    // Set canvas dimensions based on SVG size
-    // (You might want to fetch getBBox() or use explicitly set width/height)
-    const svgSize = svgElement.getBoundingClientRect();
-    canvas.width = width || svgSize.width;
-    canvas.height = height || svgSize.height;
-    img.onload = () => {
-        if (ctx) {
-            // ctx.fillStyle = 'white';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(img, 0, 0);
-            const pngUrl = canvas.toDataURL('image/png');
-            downloadFile(pngUrl, 'chart.png');
-        }
-    };
-    img.src = svgToUrl(svgElement);
-};
-
-const registerChart = (items = []) => () => {
-    Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, annotationPlugin, ...items);
-};
-
 class ChartConfigurationDirective {
     constructor() {
         this._elementRef = inject(ElementRef);
@@ -5882,17 +5655,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <!-- the chart may sit in a popover closing on outside clicks: keep it open, or the chart is gone -->\n  <div class=\"modal is-active\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], chartExportFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartExportFn", required: false }] }] } });
 
-const defaultSettings$3 = Object.freeze({
-    options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                display: false
-            }
-        }
-    }
-});
 class ChartComponent {
     constructor() {
         this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -5901,7 +5663,7 @@ class ChartComponent {
         this.exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
         this.chartRef = viewChild('chartRef', ...(ngDevMode ? [{ debugName: "chartRef" }] : []));
         this.configuration = computed(() => ({
-            ...merge$1({}, defaultSettings$3, this.config()),
+            ...merge$1({}, defaultChartSettings, this.config()),
             data: this.data()
         }), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
@@ -6076,81 +5838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const grey = '#4a4a4a';
-const barheight = 8; // 8px
-const hoverHeight = 10; // 10px
-const defaultSettings$2 = Object.freeze({
-    type: 'bar',
-    options: {
-        indexAxis: 'y',
-        responsive: true,
-        plugins: {
-            tooltip: {
-                enabled: false
-            },
-            legend: {
-                display: false
-            }
-        },
-        scales: {
-            x: {
-                stacked: true,
-                display: true,
-                grid: {
-                    display: true,
-                    drawOnChartArea: true
-                },
-                ticks: {
-                    font: defaultTicksFont,
-                    callback: label => `${transform(+label)}`
-                }
-            },
-            y: {
-                stacked: true,
-                display: true,
-                position: 'left',
-                grid: {
-                    display: true,
-                    drawOnChartArea: false,
-                    drawTicks: true,
-                    tickLength: 8,
-                    offset: false
-                },
-                ticks: {
-                    color: grey,
-                    padding: 4,
-                    crossAlign: 'center',
-                    font: {
-                        ...defaultTicksFont,
-                        weight: 400
-                    },
-                    callback: function (value) {
-                        const label = this.getLabelForValue(value);
-                        return ellipsis$1(label, chartLabelMaxLength);
-                    }
-                }
-            }
-        }
-    }
-});
-const chartHeight = (minHeight, maxHeight, nbRows) => {
-    const rowHeight = barheight + hoverHeight * 2; // Pixels per bar (includes bar + gap)
-    const padding = 60; // Extra pixels for x-axis labels, legend, etc.
-    const height = nbRows * rowHeight + padding;
-    return Math.min(Math.max(height, minHeight), maxHeight);
-};
-const datasetCenter = (chart, index) => {
-    const elements = chart.data.datasets
-        .map((_, i) => {
-        const meta = chart.getDatasetMeta(i);
-        return meta.hidden ? null : meta.data[index];
-    })
-        .filter(e => !!e);
-    const right = Math.max(...elements.map(e => e.x), ...elements.map(e => e.base));
-    const left = Math.min(...elements.map(e => e.x), ...elements.map(e => e.base));
-    return (right + left) / 2;
-};
-const itemColor = (item) => item.backgroundColor || item.borderColor || item.color;
 const tooltipFn = ({ label, selectedLabel, units, values }) => `
     <div class="is-flex is-flex-direction-column is-overflow-y-auto" style="max-height:400px">
       <div class="is-hidden-tablet is-p-1 has-text-centered has-text-secondary has-text-weight-bold is-size-7 with-border-secondary-accent" style="border-bottom-width:1px">${label}</div>
@@ -6162,7 +5849,7 @@ const tooltipFn = ({ label, selectedLabel, units, values }) => `
     .map(value => `
               <div class="is-flex is-flex-direction-column is-align-self-stretch w-100">
                 <div class="is-flex is-align-items-center is-gap-4 is-p-1 has-text-grey-dark is-size-7" style="height:21px">
-                  <div class="is-flex-shrink-0 is-radius-3" style="width:12px;height:12px;background:${itemColor(value)}"></div>
+                  <div class="is-flex-shrink-0 is-radius-3" style="width:12px;height:12px;background:${contributionItemColor(value)}"></div>
                   <div class="is-flex-grow-1">
                     <span class="has-text-ellipsis is-ellipsis-1 ${value.label === selectedLabel ? 'has-text-weight-bold' : ''}">${value.label}</span>
                   </div>
@@ -6170,7 +5857,7 @@ const tooltipFn = ({ label, selectedLabel, units, values }) => `
                 ${((value.label === selectedLabel ? value.includedItems : []) || [])
     .map(included => `
                   <div class="is-flex is-align-items-center is-gap-4 is-p-1 is-pl-4 has-text-grey-dark is-size-7" style="height:21px">
-                    <div class="is-flex-shrink-0 is-radius-3" style="width:8px;height:8px;background:${itemColor(included)}"></div>
+                    <div class="is-flex-shrink-0 is-radius-3" style="width:8px;height:8px;background:${contributionItemColor(included)}"></div>
                     <div class="is-flex-grow-1">
                       <span class="has-text-ellipsis is-ellipsis-1">${included.label}</span>
                     </div>
@@ -6208,23 +5895,6 @@ const tooltipFn = ({ label, selectedLabel, units, values }) => `
       </div>
     </div>
   `.trim();
-const dataAtIndex = (data, index, includeItems = true) => data
-    .map(item => ({
-    ...item,
-    value: item.values[index],
-    includedItems: includeItems
-        ? item.includedItems?.map(included => ({
-            ...included,
-            value: included.values[index]
-        }))
-        : []
-}))
-    .filter(v => !isUndefined(v.value))
-    .sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
-const logToCsv = (labels, data) => [
-    toLine(['@id', ...data.map(v => v.label)]),
-    labels.map((label, index) => toLine([label, ...dataAtIndex(data, index, false).map(v => v.value)])).join('\n')
-].join('\n');
 class ContributionChartComponent {
     constructor() {
         this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
@@ -6276,53 +5946,18 @@ class ContributionChartComponent {
         this.axisEnabled = computed(() => !!this.axisTooltipFn() || !!this.axisLabelClickFn(), ...(ngDevMode ? [{ debugName: "axisEnabled" }] : []));
         this.axisTooltipContent = computed(() => (data) => this.axisTooltipFn()?.(data.label, data.index) ?? '', ...(ngDevMode ? [{ debugName: "axisTooltipContent" }] : []));
         this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
-        this.chartHeight = computed(() => this.height() || chartHeight(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
-        this.hasNegativeContributions = computed(() => this.displayData()?.some(value => value.values.some(v => v < 0)), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
+        this.chartHeight = computed(() => this.height() || contributionChartHeight(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.displayData = computed(() => groupDataByCategory(this.data(), this.labels(), this.category(), this.emissionCategoryService), ...(ngDevMode ? [{ debugName: "displayData" }] : []));
-        this.defaultConfig = computed(() => ({
-            options: {
-                onClick: (event, activeElements, chart) => this.onItemClick(event, activeElements, chart),
-                plugins: { axisHover: this.axisSettings },
-                scales: {
-                    x: {
-                        display: !this.responsiveService.isMobile(),
-                        afterDataLimits: scale => increaseScaleLimits(scale),
-                        title: {
-                            display: !!this.label(),
-                            text: this.label()
-                        },
-                        grid: {
-                            lineWidth: context => (context.tick.value === 0 && this.hasNegativeContributions() ? 1 : 0)
-                        }
-                    },
-                    y: {
-                        display: !this.responsiveService.isMobile()
-                    }
-                }
-            },
-            plugins: [
-                backgroundHoverPlugin({ threshold: hoverHeight }),
-                afterBarDrawPlugin({
-                    placement: 'right',
-                    textFn: ({ data }) => (isUndefined(data) ? 'No data' : '')
-                }),
-                ...(this.axisEnabled() ? [axisHoverPlugin] : [])
-            ]
+        this.defaultConfig = computed(() => contributionChartConfig({
+            onClick: (event, activeElements, chart) => this.onItemClick(event, activeElements, chart),
+            axis: this.axisEnabled() ? this.axisSettings : undefined,
+            label: this.label(),
+            hasNegativeValues: hasNegativeValues(this.displayData()),
+            mobile: this.responsiveService.isMobile()
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
-        this.dataConfig = computed(() => ({
-            datasets: this.displayData().map(item => ({
-                label: item.label,
-                data: item.values,
-                backgroundColor: item.backgroundColor || item.color,
-                borderColor: item.borderColor || item.color,
-                barThickness: barheight,
-                maxBarThickness: barheight,
-                includedItems: item.includedItems
-            })),
-            labels: this.labels()
-        }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge$1({}, defaultSettings$2, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
-        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.labels(), this.displayData()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
+        this.dataConfig = computed(() => contributionData(this.displayData(), this.labels()), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
+        this.configuration = computed(() => merge$1({}, defaultContributionSettings, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(contributionCsv(this.labels(), this.displayData()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
     }
     onItemClick(event, activeElements, chart) {
         const index = activeElements?.[0]?.index;
@@ -6359,182 +5994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"is-relative\" [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n    @if (axisEnabled()) {\n      <he-chart-tooltip #axisTooltip=\"chartTooltip\" [tooltipFn]=\"axisTooltipContent()\" />\n    }\n  </he-chart>\n\n  @if (!data()?.length) {\n    <div class=\"is-absolute w-100 h-100 | no-data\">\n      <div class=\"is-flex is-justify-content-center is-align-items-center w-100 h-100\">\n        <span class=\"is-size-7\">No contribution available.</span>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}.no-data{top:0;background-color:#0000004d}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], axisTooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTooltipFn", required: false }] }], axisLabelClickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisLabelClickFn", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }], axisTooltip: [{ type: i0.ViewChild, args: ['axisTooltip', { isSignal: true }] }] } });
 
-const colors = {
-    darkBlue: 'rgba(25, 57, 87, 1)',
-    lightBlue: 'rgba(132, 160, 220, 1)',
-    // `$warning` — marks the reported value, and is the one colour that reads against both a white
-    // page and the dark blue popover the parametric chart is shown in
-    orange: 'rgba(255, 136, 27, 1)'
-};
-const opaqueColor = (color, opacity = 0.5) => color.replace(', 1)', `, ${opacity})`);
-const defaultSettings$1 = Object.freeze({
-    type: 'line',
-    options: {
-        events: [],
-        responsive: true,
-        plugins: {
-            tooltip: {
-                enabled: false
-            },
-            legend: {
-                display: false,
-                align: 'center'
-            }
-        },
-        scales: {
-            y: {
-                display: true,
-                position: 'left',
-                grid: {
-                    display: true
-                },
-                beginAtZero: true,
-                ticks: {
-                    crossAlign: 'center'
-                }
-            }
-        }
-    }
-});
-const joinXLabel = ' to ';
-const createDynamicHistogramData = (values, numberOfBins) => {
-    if (values.length === 0) {
-        return { labels: [], frequencies: [] };
-    }
-    // Find the minimum and maximum values in the dataset
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    // Calculate the size of each bin
-    const binSize = (max - min) / numberOfBins;
-    // Create an array to hold the bin frequencies, initialized to zero
-    const frequencies = new Array(numberOfBins).fill(0);
-    // Create labels for the chart based on the bin ranges
-    const labels = [];
-    for (let i = 0; i < numberOfBins; i++) {
-        const binStart = min + i * binSize;
-        const binEnd = binStart + binSize;
-        labels.push([binStart, binEnd].join(joinXLabel));
-        // Count data points for the current bin
-        values.forEach(point => {
-            if (point >= binStart && point < binEnd) {
-                frequencies[i]++;
-            }
-        });
-    }
-    // Ensure the maximum value is included in the last bin
-    frequencies[numberOfBins - 1] += values.filter(p => p === max).length;
-    return { labels, frequencies };
-};
-/**
- * Parametric mode: how far either side of the mean the curve is drawn, in standard deviations.
- * Four covers ~99.99% of the density, so the tails are visually flat by the time it stops.
- */
-const curveSpread = 4;
-const curvePoints = 120;
-/** Fraction of the drawn range kept clear at each end, so a marker on the edge is not clipped. */
-const curvePadding = 0.05;
-const normalPdf = (x, mu, sd) => Math.exp(-0.5 * ((x - mu) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI));
-/**
- * The x range to draw. The reported value is included when it is known, because the whole point of
- * the chart is to show how far outside the interval it sits — clipping it to the curve would hide
- * exactly what the reader came to see.
- */
-const curveRange = (mu, sd, value, minX) => {
-    const values = [mu - curveSpread * sd, mu + curveSpread * sd, ...(Number.isFinite(value) ? [value] : [])];
-    const from = Math.min(...values);
-    const to = Math.max(...values);
-    const padding = (to - from) * curvePadding;
-    // a fitted normal has mass either side of the mean, but the quantity it describes may not:
-    // drawing a physical amount below its floor invites the reader to think that is possible
-    return { from: Number.isFinite(minX) ? Math.max(from - padding, minX) : from - padding, to: to + padding };
-};
-/** Samples the normal PDF, as `{x, y}` points for a linear x axis. */
-const createNormalCurve = (mu, sd, value, minX) => {
-    const { from, to } = curveRange(mu, sd, value, minX);
-    return Array.from({ length: curvePoints + 1 }, (_, index) => from + ((to - from) * index) / curvePoints).map(x => ({
-        x,
-        y: normalPdf(x, mu, sd)
-    }));
-};
-/**
- * The shaded confidence interval, the mean, and the vertical marker at the reported value.
- *
- * The mean earns its line: the y axis is a probability density, whose absolute value means nothing
- * to a reader, so without it there is no way to tell what the peak of the curve represents.
- */
-const distributionAnnotations = (min, max, value, mean) => ({
-    ...(Number.isFinite(min) && Number.isFinite(max)
-        ? {
-            interval: {
-                type: 'box',
-                xMin: min,
-                xMax: max,
-                backgroundColor: opaqueColor(colors.lightBlue, 0.3),
-                borderWidth: 0,
-                drawTime: 'beforeDatasetsDraw'
-            }
-        }
-        : {}),
-    ...(Number.isFinite(mean)
-        ? {
-            mean: {
-                type: 'line',
-                xMin: mean,
-                xMax: mean,
-                borderColor: colors.lightBlue,
-                borderWidth: 1,
-                borderDash: [4, 4],
-                label: {
-                    display: true,
-                    content: 'average',
-                    position: 'start',
-                    backgroundColor: colors.lightBlue,
-                    color: colors.darkBlue,
-                    font: { size: 9 }
-                }
-            }
-        }
-        : {}),
-    ...(Number.isFinite(value)
-        ? {
-            value: {
-                type: 'line',
-                xMin: value,
-                xMax: value,
-                borderColor: colors.orange,
-                borderWidth: 2,
-                label: {
-                    display: true,
-                    content: `${transform(value, 3, true)}`,
-                    position: 'start',
-                    backgroundColor: colors.orange,
-                    color: '#fff',
-                    font: { size: 10 }
-                }
-            }
-        }
-        : {})
-});
-const createSinglePointDataset = (labels, pointValue) => {
-    // Create an array with the same length as the labels, filled with nulls.
-    const pointData = new Array(labels.length).fill(null);
-    // Find the index of the bin that contains the pointValue.
-    // We parse the bin range from the label string (e.g., '900-1000').
-    const binIndex = labels.findIndex(label => {
-        // Split the label to get the bin's min and max values
-        const [minStr, maxStr] = label.split(joinXLabel);
-        const binMin = parseFloat(minStr);
-        const binMax = parseFloat(maxStr);
-        return pointValue >= binMin && pointValue < binMax;
-    });
-    // If a valid bin is found, place the point value in the array.
-    if (binIndex !== -1) {
-        // We'll set the single point's Y-value to its own value here,
-        // but you could also set it to a frequency or a custom value.
-        pointData[binIndex] = 1;
-    }
-    return pointData;
-};
+/** A distribution as a histogram, or as a normal curve; drawn from `@hestia-earth/ui-components-charts`. */
 class DistributionChartComponent {
     constructor() {
         /**
@@ -6581,159 +6041,20 @@ class DistributionChartComponent {
          * for a physical amount. Left unset the curve is drawn symmetrically about `mu`.
          */
         this.minX = input(...(ngDevMode ? [undefined, { debugName: "minX" }] : []));
-        /**
-         * `sd` must be strictly positive: a zero or negative deviation makes the PDF a division by zero.
-         */
-        this.parametric = computed(() => Number.isFinite(this.mu()) && Number.isFinite(this.sd()) && this.sd() > 0, ...(ngDevMode ? [{ debugName: "parametric" }] : []));
-        this.curve = computed(() => createNormalCurve(this.mu(), this.sd(), this.value(), this.minX()), ...(ngDevMode ? [{ debugName: "curve" }] : []));
-        this.maxPercentileValue = computed(() => this.maxPercentile() ? getPercentileValue(this.distribution(), this.maxPercentile()) : null, ...(ngDevMode ? [{ debugName: "maxPercentileValue" }] : []));
-        this.groupedData = computed(() => createDynamicHistogramData(this.maxPercentileValue()
-            ? (this.distribution() ?? []).filter(v => v <= this.maxPercentileValue())
-            : (this.distribution() ?? []), this.nbBins()), ...(ngDevMode ? [{ debugName: "groupedData" }] : []));
-        this.singlePoint = computed(() => createSinglePointDataset(this.groupedData()?.labels || [], this.value()), ...(ngDevMode ? [{ debugName: "singlePoint" }] : []));
-        this.defaultConfig = computed(() => ({
-            options: {
-                scales: {
-                    x: {
-                        display: true,
-                        grid: {
-                            offset: true
-                        },
-                        min: 0,
-                        ticks: {
-                            callback: function (value) {
-                                const label = this.getLabelForValue(value);
-                                return (label
-                                    ?.split(joinXLabel)
-                                    ?.map(parseFloat)
-                                    ?.map(v => transform(v, 3, true))
-                                    // .map(v => v.toExponential())
-                                    ?.join('-'));
-                            }
-                        },
-                        title: {
-                            display: true,
-                            text: this.label()
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            font: {
-                                family: defaultTicksFont.family,
-                                size: 10,
-                                weight: 400
-                            },
-                            color: '#4A4A4A'
-                        },
-                        title: {
-                            display: true,
-                            text: 'Frequency of values'
-                        }
-                    }
-                }
-            }
-        }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
-        /**
-         * The x axis is `linear` here, not the category axis the histogram uses: the curve is `{x, y}`
-         * points, and the annotations position the interval and the marker at real x values.
-         */
-        this.parametricConfig = computed(() => ({
-            options: {
-                plugins: {
-                    annotation: {
-                        annotations: distributionAnnotations(this.intervalMin(), this.intervalMax(), this.value(), this.mu())
-                    }
-                },
-                scales: {
-                    x: {
-                        type: 'linear',
-                        display: true,
-                        ticks: {
-                            font: {
-                                family: defaultTicksFont.family,
-                                size: 10,
-                                weight: 400
-                            },
-                            color: '#4A4A4A',
-                            callback: value => `${transform(value, 3, true)}`
-                        },
-                        title: {
-                            display: true,
-                            text: this.label()
-                        }
-                    },
-                    y: {
-                        // the density itself carries no meaning for the reader, only the shape does
-                        ticks: {
-                            display: false
-                        },
-                        grid: {
-                            display: false
-                        },
-                        title: {
-                            display: false
-                        }
-                    }
-                }
-            }
-        }), ...(ngDevMode ? [{ debugName: "parametricConfig" }] : []));
-        this.histogramData = computed(() => ({
-            datasets: [
-                this.distribution()
-                    ? [
-                        {
-                            label: 'Distribution',
-                            data: this.groupedData().frequencies,
-                            backgroundColor: opaqueColor(colors.lightBlue),
-                            borderColor: colors.lightBlue,
-                            borderWidth: 1,
-                            type: 'bar'
-                        },
-                        {
-                            label: 'Distribution',
-                            data: this.groupedData().frequencies,
-                            backgroundColor: opaqueColor(colors.darkBlue),
-                            borderColor: colors.darkBlue,
-                            borderWidth: 1,
-                            fill: false,
-                            pointRadius: 0,
-                            type: 'line'
-                        }
-                    ]
-                    : [],
-                this.singlePoint()?.length
-                    ? {
-                        label: 'Value',
-                        data: this.singlePoint(),
-                        fill: false,
-                        borderColor: colors.darkBlue,
-                        backgroundColor: colors.darkBlue,
-                        pointRadius: 4,
-                        showLine: false,
-                        type: 'line',
-                        tension: 0
-                    }
-                    : []
-            ].flat(),
-            labels: this.groupedData().labels
-        }), ...(ngDevMode ? [{ debugName: "histogramData" }] : []));
-        this.parametricData = computed(() => ({
-            datasets: [
-                {
-                    label: 'Distribution',
-                    data: this.curve(),
-                    backgroundColor: opaqueColor(colors.lightBlue, 0.2),
-                    // light enough to read on a dark panel, dark enough to read on a white one
-                    borderColor: colors.lightBlue,
-                    borderWidth: 1,
-                    fill: true,
-                    pointRadius: 0,
-                    type: 'line'
-                }
-            ]
-        }), ...(ngDevMode ? [{ debugName: "parametricData" }] : []));
-        this.dataConfig = computed(() => this.parametric() ? this.parametricData() : this.histogramData(), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge$1({}, defaultSettings$1, this.parametric() ? this.parametricConfig() : this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.chart = computed(() => distributionChart({
+            distribution: this.distribution(),
+            value: this.value(),
+            label: this.label(),
+            nbBins: this.nbBins(),
+            maxPercentile: this.maxPercentile(),
+            mu: this.mu(),
+            sd: this.sd(),
+            intervalMin: this.intervalMin(),
+            intervalMax: this.intervalMax(),
+            minX: this.minX()
+        }), ...(ngDevMode ? [{ debugName: "chart" }] : []));
+        this.dataConfig = computed(() => this.chart().data, ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
+        this.configuration = computed(() => merge$1({}, this.chart().config, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DistributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, maxPercentile: { classPropertyName: "maxPercentile", publicName: "maxPercentile", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, mu: { classPropertyName: "mu", publicName: "mu", isSignal: true, isRequired: false, transformFunction: null }, sd: { classPropertyName: "sd", publicName: "sd", isSignal: true, isRequired: false, transformFunction: null }, intervalMin: { classPropertyName: "intervalMin", publicName: "intervalMin", isSignal: true, isRequired: false, transformFunction: null }, intervalMax: { classPropertyName: "intervalMax", publicName: "intervalMax", isSignal: true, isRequired: false, transformFunction: null }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["distributionChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -6743,22 +6064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-distribution-chart', exportAs: 'distributionChart', 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 }] }], mu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mu", required: false }] }], sd: [{ type: i0.Input, args: [{ isSignal: true, alias: "sd", required: false }] }], intervalMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMin", required: false }] }], intervalMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMax", required: false }] }], minX: [{ type: i0.Input, args: [{ isSignal: true, alias: "minX", required: false }] }] } });
 
-const defaultSettings = Object.freeze({
-    type: 'line',
-    options: {
-        scales: {
-            x: {
-                type: 'time',
-                time: {
-                    unit: 'day'
-                },
-                ticks: {
-                    font: defaultTicksFont
-                }
-            }
-        }
-    }
-});
 class LineChartComponent {
     constructor() {
         this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
@@ -6769,7 +6074,7 @@ class LineChartComponent {
         this.dataConfig = computed(() => ({
             datasets: this.datasets()
         }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge$1({}, defaultSettings, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.configuration = computed(() => merge$1({}, defaultLineSettings, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
     exportAsSvg(config = {}) {
         return this.chart().exportAsSvg(config);
@@ -8425,9 +7730,9 @@ class NodeCsvExportConfirmComponent {
         this.included = computed(() => this.includedNodes()
             .filter(({ included }) => included)
             .map(({ node }) => node), ...(ngDevMode ? [{ debugName: "included" }] : []));
-        this.csvData = computed(() => toCsv$1(this.nodes() || [], { includeExising: !this.isUpload() }), ...(ngDevMode ? [{ debugName: "csvData" }] : []));
+        this.csvData = computed(() => toCsv(this.nodes() || [], { includeExising: !this.isUpload() }), ...(ngDevMode ? [{ debugName: "csvData" }] : []));
         this.csvContent = computed(() => this.headers().length
-            ? this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv$1(this.included(), { includeExising: !this.isUpload(), selectedHeaders: this.headers() }))}`)
+            ? this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.included(), { includeExising: !this.isUpload(), selectedHeaders: this.headers() }))}`)
             : undefined, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
         this.downloadFilename = computed(() => fileToExt(this.filename(), this.extension()), ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
     }
@@ -10892,7 +10197,8 @@ const isWeightedMean = (formula) => formula.bindings.some(({ column }) => column
 const REPORTING_TABLE = 'reporting';
 const isCompletenessMean = (formula) => formula.bindings.some(({ key }) => key === REPORTING_TABLE);
 const isMeanThatRan = (formula, weighted) => weighted ? !isSimpleMean(formula) : !isWeightedMean(formula);
-// dividing a phase weight between the Cycles that share it, which is the plantation stage's
+// dividing a phase weight between the Cycles that share it: a step of how the mean is computed
+// rather than of the calculation, and already written in the guide, so it is never shown
 const isWeightNormalisation = (formula) => formula.bindings.some(({ symbol }) => WEIGHT_SYMBOLS.includes(symbol ?? ''));
 /**
  * A symbol that should carry a value: the result and the inputs, but never a fixed constant or a
@@ -11151,8 +10457,7 @@ const ranForAggregation = (rules) => (formula) => {
             applies: isSubSystemWeight,
             ran: () => rules.termType === TermTermType.crop && !rules.subAggregation && !rules.worldAggregation
         },
-        { applies: isPlantationWeight, ran: () => ranPlantationWeight(rules) },
-        { applies: isWeightNormalisation, ran: () => ranPlantationWeight(rules) }
+        { applies: isPlantationWeight, ran: () => ranPlantationWeight(rules) }
     ];
     return stages.find(({ applies }) => applies(formula))?.ran() ?? true;
 };
@@ -11162,6 +10467,7 @@ const ranForAggregation = (rules) => (formula) => {
  */
 const appliesToNodeKey = (nodeKey) => (formula) => !nodeKey || !isEconomicValueShare(formula) || nodeKey === PRODUCTS_KEY;
 const appliesToAggregation = (rules) => (formula) => !isCompletenessMean(formula) &&
+    !isWeightNormalisation(formula) &&
     ranForAggregation(rules)(formula) &&
     appliesToNodeKey(rules.nodeKey)(formula) &&
     isMeanThatRan(formula, isWeightedAggregation(rules));
@@ -11652,6 +10958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 // TODO: compute from the list of unique properties
 const additionalKeys = [
+    'referencePeriod',
     'key',
     'methodModelDescription',
     'methodDescription',
@@ -11683,6 +10990,7 @@ const defaultTableKeys = [
     'operation',
     'impactAssessment',
     'value',
+    'referencePeriod',
     'dates',
     'startDate',
     'endDate',
@@ -12635,7 +11943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const nodeColours$1 = {
+const nodeColours = {
     [NodeType.Cycle]: '#ecf1ff',
     [NodeType.Site]: '#d5f3d8',
     [NodeType.ImpactAssessment]: '#e7e0cb',
@@ -12912,7 +12220,7 @@ class NodeCsvPreviewComponent {
             ? this.schemas()
                 ? toCsvPivot(this.schemas(), this.nodes())
                 : ''
-            : toCsv$1(this.nodes(), this.csvOptions()), ...(ngDevMode ? [{ debugName: "_csv" }] : []));
+            : toCsv(this.nodes(), this.csvOptions()), ...(ngDevMode ? [{ debugName: "_csv" }] : []));
         this.csv = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(this._csv())}`), ...(ngDevMode ? [{ debugName: "csv" }] : []));
         this.parsedCsv = computed(() => parse(this._csv()).data, ...(ngDevMode ? [{ debugName: "parsedCsv" }] : []));
         this.headers = computed(() => this.parsedCsv()[0], ...(ngDevMode ? [{ debugName: "headers" }] : []));
@@ -13032,7 +12340,7 @@ class NodeLogsFileComponent {
             ?.filter(({ level }) => levels.indexOf(level) >= levels.indexOf(this.selectedLevel()))
             ?.filter(({ code }) => (!this.modelFilter() || code.toLocaleLowerCase().includes(`model=${this.modelFilter().toLowerCase()}`)) &&
             (!this.termFilter() || code.toLocaleLowerCase().includes(`term=${this.termFilter().toLowerCase()}`))), ...(ngDevMode ? [{ debugName: "nodeLogLines" }] : []));
-        this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv$1(this.allLogs()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
+        this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.allLogs()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
         this.csvFilename = computed(() => fileToExt(this.node()?.['@id'] ?? '', 'csv'), ...(ngDevMode ? [{ debugName: "csvFilename" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -13842,7 +13150,8 @@ const propertyTypeValue = {
                 ? val.map(value => propertyValue(items, value)).join(ARRAY_DELIMITER)
                 : val;
     },
-    json: val => val || '',
+    // a GeoJSON object is shown as its JSON: the input formatter has no name to show for it
+    json: val => (val ? safeJSONStringify(val) : ''),
     string: val => (`${val}` || '').trim(),
     number: val => +(`${val}` || '0'),
     integer: val => +(`${val}` || '0'),
@@ -13878,7 +13187,8 @@ const propertyTypeParseValue = {
                 ? val
                 : val.split(ARRAY_DELIMITER).map(value => parseNewValue(items, value));
     },
-    json: val => val || '',
+    // stored as the object the schema asks for; text that is not JSON is kept for the validation to report
+    json: val => safeJSONParse(val, val) || '',
     string: val => (`${val}` || '').trim(),
     number: val => +(`${val}` || '0'),
     integer: val => +(`${val}` || '0'),
@@ -15181,7 +14491,7 @@ const valueToNodes = (value, type) => Array.isArray(value)
 const nodesFromError = (error, type) => error ? valueToNodes(error.node, type) || valueToNodes(error.value, error.schema) || [] : [];
 const errorCsv = nodes => {
     try {
-        return toCsv$1(nodes, { includeExising: true });
+        return toCsv(nodes, { includeExising: true });
     }
     catch {
         return '';
@@ -15412,528 +14722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  */
 const impactAssessmentProduct = (impactAssessment) => impactAssessment?.product?.term || impactAssessment?.term;
 
-/* eslint-disable complexity */
-var ChartNodeType;
-(function (ChartNodeType) {
-    ChartNodeType["midpoint"] = "midpoint";
-    ChartNodeType["category"] = "category";
-    ChartNodeType["emission"] = "emission";
-    ChartNodeType["endpoint"] = "endpoint";
-    ChartNodeType["input"] = "input";
-    ChartNodeType["operation"] = "operation";
-    ChartNodeType["root"] = "root";
-})(ChartNodeType || (ChartNodeType = {}));
-const nodeBorderColours = {
-    [ChartNodeType.endpoint]: '#193957',
-    [ChartNodeType.midpoint]: '#249DA5',
-    [ChartNodeType.category]: '#DC7033',
-    [ChartNodeType.emission]: '#498F78',
-    [ChartNodeType.input]: '#FFC000',
-    [ChartNodeType.operation]: '#D0CABA'
-};
-const nodeColours = {
-    [ChartNodeType.endpoint]: '#DBE3EA',
-    [ChartNodeType.midpoint]: '#D3EBED',
-    [ChartNodeType.category]: '#FFDEC0',
-    [ChartNodeType.emission]: '#D5F3D8',
-    [ChartNodeType.input]: '#FFE8A3',
-    [ChartNodeType.operation]: '#FBF4DF'
-};
-const legend = [
-    { type: ChartNodeType.endpoint, text: 'Endpoint / Single Score' },
-    { type: ChartNodeType.midpoint, text: 'Characterised Indicator' },
-    { type: ChartNodeType.category, text: 'Category' },
-    { type: ChartNodeType.emission, text: 'Emission / Resource Use' },
-    { type: ChartNodeType.input, text: 'Input' },
-    { type: ChartNodeType.operation, text: 'Operation' }
-];
-/* eslint-disable-next-line complexity */
-const getUnitsAndLabel = (terms, fallbackLabel = 'unknown term') => {
-    const allTerms = (Array.isArray(terms) ? terms : [terms]).filter(Boolean);
-    const term = allTerms?.[0];
-    const label = term?.name ?? term?.['@id'] ?? fallbackLabel;
-    const units = term?.units ? `(${term?.units})` : '';
-    return {
-        label: `${label.replace(units, '').trim()}${allTerms.length > 1 ? ` (and ${allTerms.length - 1} more)` : ''}`,
-        terms: allTerms,
-        units
-    };
-};
-const typeMapping = {
-    [TermTermType.endpointIndicator]: ChartNodeType.endpoint,
-    [TermTermType.characterisedIndicator]: ChartNodeType.midpoint,
-    [TermTermType.emission]: ChartNodeType.emission,
-    [TermTermType.resourceUse]: ChartNodeType.emission,
-    [TermTermType.operation]: ChartNodeType.operation
-};
-const safeDivide = (numerator, denominator) => (denominator !== 0 ? numerator / denominator : 0);
-const sumIndicators = (data) => {
-    const totalValues = data.reduce((acc, log) => {
-        acc[log.indicator] = acc[log.indicator] || [];
-        !isUndefined(log.weightedValue) && acc[log.indicator].push(log.weightedValue);
-        if (log.category) {
-            const categoryKey = `${log.indicator}-${log.category}`;
-            acc[categoryKey] = acc[categoryKey] || [];
-            !isUndefined(log.weightedValue) && acc[categoryKey].push(log.weightedValue);
-        }
-        return acc;
-    }, {});
-    return Object.fromEntries(Object.entries(totalValues).map(([key, values]) => [
-        key,
-        // if the total is positive, we ignore negative values
-        sum(values) < 0 ? sum(values) : sum(values.filter(v => v >= 0))
-    ]));
-};
-const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log) => {
-    const contributorType = typeMapping[terms[log.contributor]?.termType] || ChartNodeType.input;
-    const indicatorType = typeMapping[terms[log.indicator]?.termType];
-    const categoryKey = log.category ? `${log.indicator}-${log.category}` : undefined;
-    const parentTotal = categoryKey ? totals[categoryKey] : totals[log.indicator];
-    const contributorNode = {
-        id: log.contributor,
-        ...getUnitsAndLabel(terms[log.contributor], log.contributor),
-        type: contributorType,
-        value: log.value,
-        weightedValue: log.weightedValue,
-        modelId: log.modelId,
-        fraction: safeDivide(log.weightedValue, parentTotal),
-        children: contributorType === ChartNodeType.emission
-            ? log.inputs.map(i => ({
-                ...i,
-                ...getUnitsAndLabel(terms[i.id], i.label),
-                type: ChartNodeType.input,
-                fraction: safeDivide(i.weightedValue, log.value),
-                children: i.operations.map(o => ({
-                    ...o,
-                    ...getUnitsAndLabel(terms[o.id], o.label),
-                    type: ChartNodeType.operation,
-                    fraction: safeDivide(o.weightedValue, i.weightedValue)
-                }))
-            }))
-            : []
-    };
-    acc[log.indicator] = acc[log.indicator] || {
-        id: log.indicator,
-        ...getUnitsAndLabel(terms[log.indicator], log.indicator),
-        modelId: log.modelId,
-        type: indicatorType,
-        value: totals[log.indicator],
-        children: []
-    };
-    if (log.category) {
-        const categoryId = `cat-${log.indicator}-${log.category}`;
-        let categoryNode = acc[log.indicator].children.find(c => c.id === categoryId);
-        if (!categoryNode) {
-            categoryNode = {
-                id: categoryId,
-                label: log.category,
-                type: ChartNodeType.category,
-                units: '',
-                value: totals[categoryKey],
-                weightedValue: totals[categoryKey],
-                modelId: log.modelId,
-                fraction: safeDivide(totals[categoryKey], totals[log.indicator]),
-                children: []
-            };
-            acc[log.indicator].children.push(categoryNode);
-        }
-        categoryNode.children.push(contributorNode);
-    }
-    else {
-        acc[log.indicator].children.push(contributorNode);
-    }
-    return acc;
-}, {});
-
-const width = 800;
-const margin = { top: 10, right: 20, bottom: 10, left: 20 };
-const fontSize = Math.floor(width / 100);
-const nodePadding = fontSize / 2;
-const lineHeight = fontSize * 1.2;
-const barHeight = lineHeight;
-const barRadius = 4;
-const nodeHeight = nodePadding * 2 + 2 * lineHeight + barHeight;
-const nodeWidth = nodeHeight * 2 * 1.618;
-const nodeContentWidth = nodeWidth - nodePadding * 2;
-const layerSpacing = (width - margin.left - margin.right - nodeWidth * 5) / 4;
-const nodeMargin = nodePadding * 0.75;
-const nodeSpacingFactor = (nodeHeight + nodeMargin * 2) / nodeHeight;
-const nodeDuration = 600;
-const linkDuration = 200;
-const groupDelay = nodeDuration - 100;
-const nonLCAIndicatorsId = 'nonLCAIndicators';
-const greyedOpacity = 0.2;
-const groupOverlap = lineHeight - nodePadding - nodeMargin;
-const groupNodeSpace = nodeHeight - 2 * groupOverlap;
-const collapseChildren = (node) => {
-    node._children = node.children || node._children;
-    node.children = null;
-    return node;
-};
-const restoreChildren = (node) => {
-    node.children = node._children;
-    node._children = null;
-    return node;
-};
-// children currently laid out, falling back to the collapsed ones while a node is closing
-const childrenOf = (node) => (node?.children || node?._children || []);
-// Stagger the children so they animate one after the other: in order when they appear, in reverse
-// when they disappear. A child that is not in the list anymore has no known position: it is not
-// delayed, which also keeps the delay finite (a `NaN` delay would never run, nor ever be removed).
-const enterStagger = (parent, child) => Math.max(childrenOf(parent).indexOf(child), 0) * 10;
-const exitStagger = (parent, child) => {
-    const children = childrenOf(parent);
-    const index = children.indexOf(child);
-    return index < 0 ? 0 : (children.length - index - 1) * 10;
-};
-const wrap = (selection, maxWidth = nodeContentWidth) => {
-    selection.each(function (d) {
-        const t = select(this);
-        const units = ellipsis$1(d.data.units, 20);
-        d3wrap(t, {
-            maxWidth,
-            maxLines: d.data.showBar ? 2 : 3,
-            vcentre: !d.data.showBar,
-            words: [...d.data.label.split(/\s+/), units],
-            ownLineWord: units,
-            nHeight: nodeHeight,
-            lHeight: lineHeight
-        });
-    });
-};
-const setNodeSize = selection => selection.attr('width', nodeWidth).attr('height', nodeHeight);
-const formatBar = (selection) => selection
-    .attr('height', barHeight)
-    .attr('rx', `${barRadius}`)
-    .attr('ry', `${barRadius}`)
-    .attr('y', nodeHeight - nodePadding - barHeight)
-    .attr('x', nodePadding);
-const formatBarPath = (data) => {
-    const x = nodePadding;
-    const y = nodeHeight - nodePadding - barHeight;
-    const h = barHeight;
-    const w = fractionWidth(data);
-    const isFull = data.fraction >= 0.99;
-    // Prevent visual glitches if the bar is narrower than the radius
-    const safeW = data.fraction < 0.01 ? 0 : Math.max(w, barRadius);
-    const safeH = Math.max(h, 2 * barRadius);
-    return isFull
-        ? `
-    M ${x + safeW - barRadius}, ${y}
-    a ${barRadius},${barRadius} 0 0 1 ${barRadius},${barRadius} v ${safeH - 2 * barRadius}
-    a ${barRadius},${barRadius} 0 0 1 -${barRadius},${barRadius} h -${safeW - 2 * barRadius}
-    a ${barRadius},${barRadius} 0 0 1 -${barRadius},-${barRadius} v -${safeH - 2 * barRadius}
-    a ${barRadius},${barRadius} 0 0 1 ${barRadius},-${barRadius}
-    z
-  `
-        : `
-    M ${x + safeW}, ${y}
-    v ${safeH}
-    h -${safeW - barRadius}
-    a ${barRadius},${barRadius} 0 0 1 -${barRadius},-${barRadius}
-    v -${safeH - 2 * barRadius}
-    a ${barRadius},${barRadius} 0 0 1 ${barRadius},-${barRadius}
-    z
-  `;
-};
-const groupButtonWidth = (nodeWidth * 2) / 7;
-const groupButtonHeight = nodePadding * 2 + lineHeight + 3;
-const setGroupButtonXY = (selection) => selection
-    .attr('width', groupButtonWidth)
-    .attr('height', d => (d._groupOpen ? lineHeight + nodePadding * 2 : groupButtonHeight))
-    .attr('x', d => (d._groupOpen ? (nodeWidth * 2.5) / 7 : nodeWidth / 2 - groupButtonWidth / 2))
-    .attr('y', d => d._groupOpen ? groupOverlap + (groupNodeSpace - (lineHeight + nodePadding * 2)) / 2 : nodePadding + lineHeight + 6);
-const formatNumber = (value) => (isNumber(value) ? toPrecision(value, 3) : 'N/A');
-const isTypeWithoutValue = (nodeDatum) => [ChartNodeType.input, ChartNodeType.operation].includes(nodeDatum.data.type);
-const getWeightedValueText = (nodeDatum) => `${formatNumber(nodeDatum.data.weightedValue)}${nodeDatum.parent?.data.value === null
-    ? ''
-    : ` of ${formatNumber(nodeDatum.parent?.data.value || nodeDatum.parent?.data.weightedValue || 0)}`} ${isNumber(nodeDatum.parent?.data.value) ? nodeDatum.parent?.data?.units : nodeDatum.parent?.parent?.data?.units}`;
-const generateTipData = (nodeDatum) => ({
-    hasWeightedValue: nodeDatum.data.weightedValue,
-    weightedValueText: getWeightedValueText(nodeDatum),
-    valueKeyHref: `${schemaBaseUrl()}/${SchemaType.Indicator}#value`,
-    modelDocsHref: nodeDatum.data.modelDocs,
-    valueValueText: isNumber(nodeDatum.data.value)
-        ? `${formatNumber(nodeDatum.data.value)} ${nodeDatum.data.units}`
-        : isTypeWithoutValue(nodeDatum)
-            ? ''
-            : 'no contribution',
-    hasValue: nodeDatum.data.value,
-    modelKeyHref: `${schemaBaseUrl()}/${SchemaType.Indicator}#methodModel`,
-    modelValue: nodeDatum.data.modelName,
-    modelValueHref: `${baseUrl()}/term/${nodeDatum.data.modelId}`,
-    termKeyHref: `${schemaBaseUrl()}/${SchemaType.Indicator}#term`,
-    terms: nodeDatum.data.terms?.map(term => ({
-        text: term.name || term['@id'],
-        href: `${baseUrl()}/term/${term['@id']}`
-    }))
-});
-const addTooltip = (selection, { tooltipOperator }) => {
-    let hoveringTip = false;
-    let hoveringNode = false;
-    let lastNodeId;
-    const closeTip = () => {
-        tooltipOperator.close(false);
-        selectAll('.tip-target').classed('tip-target', false);
-        lastNodeId = null;
-    };
-    const startCloseTip = () => {
-        setTimeout(() => {
-            if (!hoveringTip && !hoveringNode) {
-                closeTip();
-            }
-        }, 100);
-    };
-    selection
-        .on('click', closeTip)
-        .on('pointerenter', (event, nodeDatum) => {
-        hoveringNode = true;
-        if (lastNodeId === nodeDatum.data.id) {
-            return;
-        }
-        closeTip();
-        lastNodeId = nodeDatum.data.id;
-        select(event.target).classed('tip-target', true);
-        tooltipOperator.open({ tipData: generateTipData(nodeDatum) });
-        select('.driver-chart-tooltip')
-            .on('pointerenter', () => {
-            hoveringTip = true;
-        })
-            .on('pointerleave', () => {
-            hoveringTip = false;
-            startCloseTip();
-        });
-    })
-        .on('pointerleave', () => {
-        hoveringNode = false;
-        startCloseTip();
-    });
-    return selection;
-};
-const mergedNodes = (selection, { tooltipOperator }) => {
-    selection
-        .selectAll('.node-box')
-        .classed('node-openable', d => !!d.height)
-        .classed('node-open', d => d._open)
-        .call(setNodeSize)
-        .attr('stroke', ({ data }) => nodeBorderColours[data.type])
-        .attr('fill', d => nodeColours[d.data.type])
-        .attr('stroke-width', '2')
-        .attr('rx', '3px')
-        .attr('ry', '3px')
-        .style('user-select', typeof window !== 'undefined' && window.innerWidth < 768 ? 'none' : null);
-    selection.filter(d => !d.data.group && d.data.id !== nonLCAIndicatorsId).call(addTooltip, { tooltipOperator });
-    selection
-        .selectAll('.node-label')
-        .attr('y', d => (d.data.showBar ? lineHeight / 2 + nodePadding / 2 : 0))
-        .attr('x', nodeWidth / 2)
-        .attr('font-weight', 'bold')
-        .attr('fill', '#4a4a4a')
-        .attr('text-anchor', 'middle')
-        .attr('alignment-baseline', 'central');
-    const groups = selection.filter(d => d.data.group);
-    groups
-        .selectAll('.group-border')
-        .attr('width', nodeWidth + nodePadding * 2)
-        .attr('x', -nodePadding)
-        .attr('y', nodeHeight - (lineHeight + nodePadding * 2))
-        .attr('opacity', d => (d._greyed && d._groupOpen ? greyedOpacity : d._groupOpen ? 1 : 0))
-        .attr('height', d => d._groupOpen
-        ? Math.abs(d.parent._groupChildren.length - d.parent.children.length) * (nodeHeight * nodeSpacingFactor) +
-            nodePadding +
-            (lineHeight + nodePadding * 2) / 2
-        : 0)
-        .attr('fill', 'none')
-        .attr('stroke-dasharray', '2, 5')
-        .attr('stroke', '#b5b5b5')
-        .attr('stroke-width', '1');
-    groups
-        .selectAll('.group-label')
-        .attr('width', nodeWidth)
-        .attr('y', nodeHeight / 3)
-        .attr('x', nodeWidth / 2)
-        .text(d => d.data.label)
-        .attr('opacity', d => (d._groupOpen ? 0 : d._greyed ? greyedOpacity : 1))
-        .attr('fill', '#4a4a4a')
-        .attr('text-anchor', 'middle')
-        .attr('alignment-baseline', 'central')
-        .attr('font-weight', 'bold');
-    groups
-        .selectAll('.group-button-border')
-        .attr('width', nodeWidth)
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('height', d => (d._groupOpen ? '0' : '45'))
-        .attr('fill', 'none')
-        .attr('stroke-dasharray', '2, 5')
-        .attr('stroke', '#b5b5b5')
-        .attr('stroke-width', '1');
-    groups
-        .selectAll('.group-button')
-        .call(setGroupButtonXY)
-        .style('pointer-events', d => (d._greyed ? 'none' : 'auto'))
-        .style('stroke-opacity', d => (d._greyed ? greyedOpacity : 1))
-        .style('display', 'none') // do not show on export
-        .attr('fill', d => nodeColours[d.data.type])
-        .attr('rx', '3px')
-        .attr('ry', '3px');
-    groups
-        .selectAll('.group-button-text')
-        .text(d => (d._groupOpen ? 'Hide' : 'Show'))
-        .style('display', 'none') // do not show on export
-        .attr('x', d => (d._groupOpen ? nodeWidth / 2 : nodeWidth / 2))
-        .attr('y', d => (d._groupOpen ? nodeMargin + lineHeight + lineHeight / 2 : nodeHeight / 3 + groupButtonHeight - 4))
-        .attr('font-size', () => `${fontSize * 1.3}px`)
-        .attr('fill', '#4a4a4a')
-        .attr('text-anchor', 'middle')
-        .attr('alignment-baseline', 'central');
-    selection.selectAll('.sibling-mask').remove();
-    selection
-        .filter(d => d._greyed && !d.data.group)
-        .append('rect')
-        .classed('node-openable', d => !!d.height)
-        .classed('sibling-mask mask-openable', true)
-        .attr('fill', 'rgba(250, 250, 250)')
-        .attr('stroke', 'rgba(250, 250, 250)')
-        .attr('fill-opacity', '0.8')
-        .attr('stroke-opacity', '0.9')
-        .attr('stroke-width', '2')
-        .attr('rx', '3px')
-        .attr('ry', '3px')
-        .call(setNodeSize);
-    selection
-        .filter(d => d._greyed && d.data.group)
-        .append('rect')
-        .classed('sibling-mask', true)
-        .attr('fill', 'rgba(250, 250, 250)')
-        .attr('stroke', 'rgba(250, 250, 250)')
-        .attr('fill-opacity', '0.8')
-        .attr('stroke-opacity', '0.9')
-        .attr('stroke-width', '2')
-        .attr('rx', '3px')
-        .attr('ry', '3px')
-        .call(setGroupButtonXY);
-    return selection;
-};
-// more than 70%
-const fractionCutoff = 0.7;
-const fractionWidth = (data) => Math.min(Math.abs(data.fraction), 1) * nodeContentWidth;
-const enterNodes = (selection) => {
-    const nodes = selection.filter(d => d.data.type !== ChartNodeType.root && !d.data.group);
-    nodes.append('rect').classed('node-box', true);
-    nodes
-        .append('text')
-        .classed('node-label', true)
-        .text(({ data }) => data.label + ' ' + data.units)
-        .attr('opacity', 0);
-    // Text elements must be rendered before we can calculate wrapping
-    setTimeout(() => {
-        const labels = nodes.selectAll('.node-label').call(wrap);
-        labels.attr('opacity', 1);
-    });
-    const groups = selection.filter(d => d.data.group);
-    groups.append('rect').attr('class', 'group-border');
-    groups.append('text').attr('class', 'group-label');
-    groups.append('rect').attr('class', 'group-button-border');
-    groups.append('rect').attr('class', 'group-button');
-    groups.append('text').attr('class', 'group-button-text');
-    const withBar = nodes.filter(d => d.data.showBar);
-    withBar
-        .filter(d => d.data.fraction > 0)
-        .append('rect')
-        .classed('bar-background', true)
-        .attr('width', nodeContentWidth)
-        .attr('fill', 'white')
-        .call(formatBar);
-    withBar
-        .append('path')
-        .classed('bar-foreground', true)
-        .attr('d', d => formatBarPath(d.data))
-        .attr('fill', d => nodeBorderColours[d.data.type]);
-    withBar
-        .append('text')
-        .classed('bar-label', true)
-        .text(({ data }) => data.fraction === 0
-        ? 'no contribution'
-        : `${Math.round(100 * data.fraction)}% ${Math.round(100 * data.fraction) === 0 ? ' (rounded)' : ''}`)
-        .attr('text-anchor', d => (d.data.fraction === 0 ? 'middle' : d.data.fraction > fractionCutoff ? 'end' : 'start'))
-        .attr('x', d => d.data.fraction === 0
-        ? nodeWidth / 2
-        : fractionWidth(d.data) + nodePadding + (d.data.fraction > fractionCutoff ? -4 : 4))
-        .attr('y', nodeHeight - nodePadding - barHeight / 2)
-        .attr('fill', '#4a4a4a')
-        .attr('alignment-baseline', 'central');
-    return selection;
-};
-const mergedLinks = (selection, { togglingGroup, switchingSelection }) => selection
-    .style('stroke', d => (d.target._open && nodeBorderColours[d.source.data.type]) || null)
-    .attr('stroke-dasharray', d => (d.target.data.group ? '2,5' : null))
-    .attr('stroke-width', d => (d.target._open ? 2 : d.target._groupOpen ? 0 : 1))
-    .attr('stroke-opacity', d => (d.target._greyed ? 0.1 : 0.6))
-    .transition()
-    .duration(linkDuration)
-    .delay(d => {
-    const groupClosing = togglingGroup && !childrenOf(d.target.parent).find(n => n.data.group)?._groupOpen;
-    return groupClosing ? groupDelay : (switchingSelection ? nodeDuration : 0) + enterStagger(d.source, d.target);
-})
-    .attr('opacity', 1)
-    .attr('d', d => {
-    const targetDy = d.target._groupOpen ? nodePadding + lineHeight / 2 + nodeMargin * 2 : nodeHeight / 2;
-    return linkHorizontal()({
-        source: [d.source.y + nodeWidth, d.source.x + nodeHeight / 2],
-        target: [d.target.y, d.target.x + targetDy]
-    });
-});
-const groupByPercentage = node => [ChartNodeType.endpoint, ChartNodeType.midpoint, ChartNodeType.emission].includes(node.data.type);
-const groupPercentage = (node, percentage = 0.02) => {
-    const grouped = node._children?.filter(child => child.data.fraction < percentage);
-    if (node._children?.length > 6 && grouped?.length > 1) {
-        const type = node._children[0].data.type;
-        const groupNode = {
-            ...hierarchy({
-                id: `${type}-group`,
-                label: `${grouped.length} more under ${Math.round(percentage * 100)}%.`,
-                weightedValue: null,
-                value: null,
-                type,
-                group: true
-            }),
-            depth: node.depth + 1,
-            height: 1,
-            parent: node
-        };
-        const notGrouped = node._children?.filter(child => child.data.fraction >= percentage);
-        node._children.splice(notGrouped.length, 0, groupNode);
-        notGrouped.push(groupNode);
-        node._groupChildren = node._children;
-        node._children = notGrouped;
-    }
-};
-const showBar = (node) => [
-    node.parent?.data.type !== ChartNodeType.root,
-    node.parent?.data.id !== nonLCAIndicatorsId,
-    !node.data.group,
-    !isNaN(node.data.fraction)
-].every(Boolean);
-const extraInputKeys = ['input', 'input value'];
-const extraOperationKeys = ['operation', 'operation value'];
-const dataToCsv = (keys, terms) => (data) => [
-    // line for the data
-    toLine([
-        ...keys.map(k => terms[data[k]]?.name || data[k] || ''),
-        ...extraInputKeys.map(() => ''),
-        ...extraOperationKeys.map(() => '')
-    ]),
-    // lines for each inputs and operations
-    ...(data.inputs ?? []).flatMap(input => [
-        toLine([...keys.map(() => ''), input.label, input.weightedValue, ...extraOperationKeys.map(() => '')]),
-        ...(input.operations ?? []).map(operation => toLine([...keys.map(() => ''), ...extraInputKeys.map(() => ''), operation.label, operation.weightedValue]))
-    ])
-];
-const toCsv = (data, terms) => {
-    const keys = Object.keys(data[0]).filter(k => k !== 'inputs');
-    return [toLine([...keys, ...extraInputKeys, ...extraOperationKeys]), ...data.flatMap(dataToCsv(keys, terms))].join('\n');
-};
+/**
+ * The driver chart, drawn with d3 by `@hestia-earth/ui-components-charts`; this component gives it the
+ * platform's popover, legend and export.
+ */
 class HierarchyChartComponent {
     constructor() {
         this.chartRef = viewChild.required('chart');
@@ -15942,58 +14734,10 @@ class HierarchyChartComponent {
         this.terms = input({}, ...(ngDevMode ? [{ debugName: "terms" }] : []));
         this.chartError = output();
         this.nodeBorderColours = nodeBorderColours;
-        this.nodeColours = nodeColours;
+        this.nodeColours = nodeColours$1;
         this.expandDownload = signal(false, ...(ngDevMode ? [{ debugName: "expandDownload" }] : []));
         this.includedTypes = signal([], ...(ngDevMode ? [{ debugName: "includedTypes" }] : []));
-        this.legend = computed(() => {
-            const includedTypes = this.includedTypes();
-            const defaultLegend = legend.filter(({ type }) => includedTypes.includes(type));
-            const categoryLabel = this.data().find(d => d.categoryLabel)?.categoryLabel;
-            return categoryLabel
-                ? defaultLegend.map(l => (l.type === ChartNodeType.category ? { ...l, text: categoryLabel } : l))
-                : defaultLegend;
-        }, ...(ngDevMode ? [{ debugName: "legend" }] : []));
-        this.totalsPerIndicator = computed(() => sumIndicators(this.data()), ...(ngDevMode ? [{ debugName: "totalsPerIndicator" }] : []));
-        this.indicators = computed(() => groupIndicators(this.data(), this.terms(), this.totalsPerIndicator()), ...(ngDevMode ? [{ debugName: "indicators" }] : []));
-        this.indicatorArray = computed(() => Object.values(this.indicators()), ...(ngDevMode ? [{ debugName: "indicatorArray" }] : []));
-        this.linkedIndicators = computed(() => this.indicatorArray()
-            // link endpoints to midpoints and midpoints to any child midpoints
-            .map(indicator => ({
-            ...indicator,
-            children: indicator.children.map(child => {
-                const prefixRemoved = indicator.type === ChartNodeType.endpoint && child.label.split(', ')[1];
-                const childIndicator = this.indicators()[child.id];
-                return child.type === ChartNodeType.midpoint
-                    ? {
-                        ...child,
-                        label: prefixRemoved
-                            ? '[...]' + prefixRemoved.charAt(0).toUpperCase() + prefixRemoved.slice(1)
-                            : child.label,
-                        modelId: childIndicator?.modelId || child.modelId,
-                        children: childIndicator?.children
-                    }
-                    : child;
-            })
-        }))
-            // remove duplicated indicators
-            .filter(indicator => !this.indicatorArray().some(parent => parent.children.some(child => child.id === indicator.id))), ...(ngDevMode ? [{ debugName: "linkedIndicators" }] : []));
-        this.nonLCAIndicators = computed(() => this.linkedIndicators().filter(indicator => indicator.type === ChartNodeType.midpoint), ...(ngDevMode ? [{ debugName: "nonLCAIndicators" }] : []));
-        this.otherEndpoint = computed(() => this.nonLCAIndicators().length
-            ? {
-                id: nonLCAIndicatorsId,
-                label: 'Other indicators',
-                term: 'n/a',
-                modelId: 'n/a',
-                units: '',
-                value: null,
-                weightedValue: null,
-                type: ChartNodeType.endpoint,
-                fraction: null,
-                children: this.nonLCAIndicators()
-            }
-            : null, ...(ngDevMode ? [{ debugName: "otherEndpoint" }] : []));
-        this.endpoints = computed(() => this.linkedIndicators().filter(indicator => indicator.type === ChartNodeType.endpoint), ...(ngDevMode ? [{ debugName: "endpoints" }] : []));
-        this.chartChildren = computed(() => this.endpoints().length ? [...this.endpoints(), this.otherEndpoint()].filter(Boolean) : this.linkedIndicators(), ...(ngDevMode ? [{ debugName: "chartChildren" }] : []));
+        this.legend = computed(() => hierarchyLegend(this.data(), this.includedTypes()), ...(ngDevMode ? [{ debugName: "legend" }] : []));
         this.exportFormats = [
             ...exportFormats,
             {
@@ -16003,201 +14747,35 @@ class HierarchyChartComponent {
         ];
         this.chartExportFn = async (format) => {
             return {
-                png: () => this.downloadPng(),
-                svg: () => this.downloadSvg(),
-                csv: () => downloadFile(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.data(), this.terms()))}`, 'chart.csv')
+                png: () => downloadPng(this.chartRef().nativeElement),
+                svg: () => downloadSvg(this.chartRef().nativeElement),
+                csv: () => downloadFile(`data:text/html;charset=utf-8,${encodeURIComponent(hierarchyCsv(this.data(), this.terms()))}`, 'chart.csv')
             }[format]();
         };
         effect(() => {
             if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chartRef()?.nativeElement].every(Boolean)) {
-                untracked(() => this.init());
+                untracked(() => this.draw());
             }
         });
     }
-    init() {
+    draw() {
         try {
-            this.root = null;
-            this.node = null;
-            this.link = null;
-            this.initChart();
+            const { includedTypes } = drawHierarchyChart(this.chartRef().nativeElement, {
+                data: this.data(),
+                terms: this.terms(),
+                tooltip: {
+                    open: tipData => this.tooltipOperator().open({ tipData }),
+                    close: () => this.tooltipOperator().close(false),
+                    element: () => document.querySelector('.driver-chart-tooltip')
+                },
+                urls: { baseUrl, schemaBaseUrl }
+            });
+            this.includedTypes.set(includedTypes);
         }
         catch (error) {
             this.chartError.emit(error);
         }
     }
-    initChart() {
-        const root = hierarchy({
-            id: 'dummy-root',
-            label: '',
-            terms: [],
-            modelId: '',
-            value: null,
-            weightedValue: null,
-            units: '',
-            type: ChartNodeType.root,
-            children: this.chartChildren()
-        });
-        this.includedTypes.set(unique(root.descendants().map(n => n.data.type)));
-        this.root = root
-            // treat `0` as -infinity so they appear all the way to the bottom
-            .sort((a, b) => (b.data.fraction || -Infinity) - (a.data.fraction || -Infinity))
-            .eachAfter(node => {
-            if (node.data.fraction === 0) {
-                node.children = null;
-                node.height = 0;
-            }
-            node.data.type !== ChartNodeType.root && collapseChildren(node);
-            groupByPercentage(node) && groupPercentage(node);
-            node.data.showBar = showBar(node);
-            node.data.modelName = this.terms()?.[node.data.modelId]?.name;
-            node.data.modelDocs = this.terms()?.[node.data.modelId]?.docs;
-        });
-        this.renderChart();
-    }
-    renderChart() {
-        this.svg = select(this.chartRef()?.nativeElement);
-        this.svg.selectAll('*').remove();
-        // root node is always positioned at ⟨0, 0⟩
-        const innerHeight = (this.root.children.length - 1) * nodeHeight * nodeSpacingFactor + nodeHeight;
-        this.yMin = (nodeHeight - innerHeight) / 2 - margin.top;
-        this.yTotal = innerHeight + margin.top + margin.bottom;
-        const numLayers = this.legend().length;
-        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
-        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
-        this.svg
-            .attr('viewBox', [-margin.left, this.yMin, totalWidth, this.yTotal].join(' '))
-            .attr('font-size', `${fontSize}px`);
-        this.node = this.svg.append('g').selectAll('g');
-        this.link = this.svg.append('g').selectAll('path');
-        this.handleNodeClick(null, this.root.find(node => node.depth === 1));
-    }
-    // flip x/y to go left-right instead of top-bottom
-    updateChart({ togglingGroup = false, switchingSelection = false } = {}) {
-        const root = this.root;
-        const treeLayout = tree()
-            .nodeSize([nodeHeight, nodeWidth])
-            .separation((...neighbours) => neighbours.some(n => n.data.group && n._groupOpen) ? 1 - groupOverlap / nodeHeight : nodeSpacingFactor);
-        const tree$1 = treeLayout(root);
-        const links = tree$1.links().filter(d => d.source.data.type !== ChartNodeType.root) || [];
-        const nodes = tree$1.descendants().reverse();
-        const numLayers = this.legend().length;
-        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
-        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
-        const offset = Math.max(0, (totalWidth - margin.left - margin.right - chartWidth) / 2);
-        nodes.forEach(d => {
-            d.y = offset + (d.depth - 1) * (nodeWidth + layerSpacing);
-        });
-        // By default the tree expands symmetrically upwards and downwards from the selected node.
-        // We move children down to prevent expansion upwards or up to minimise expansion downwards
-        const minimiseHeight = ({ previousTanslateY, previousYTotal }, depth) => {
-            const maxYTotal = Math.max(previousYTotal, this.yTotal);
-            const parent = tree$1.find(node => node.depth === depth - 1 && node._open);
-            parent?.children?.forEach(node => (node.x += previousTanslateY));
-            const { min: minX, max: maxX } = (parent?.children || []).reduce(({ min, max }, n) => ({
-                min: n.x < min ? n.x : min,
-                max: n.x > max ? n.x : max
-            }), { min: parent?.x, max: parent?.x });
-            const { yMin, yTotal } = parent?.children?.length
-                ? { yMin: minX - margin.top, yTotal: maxX - minX + margin.bottom + margin.top + nodeHeight }
-                : { yMin: null, yTotal: null };
-            const overflowAbove = this.yMin - yMin; // positive when overflows above
-            const overflowBelow = yTotal + yMin - (maxYTotal + this.yMin); // positive when overflows below
-            // - translateY when overflows above: positive
-            // - translateY when overflows below: negative by smallest of underflow above or overflow below
-            // - translateY when no overflow: 0
-            const translateY = overflowAbove > 0 ? overflowAbove : overflowBelow > 0 ? Math.max(-overflowBelow, overflowAbove) : 0;
-            parent?.children?.forEach(node => (node.x += translateY));
-            return {
-                previousYTotal: Math.max(yTotal, previousYTotal),
-                previousTanslateY: translateY + previousTanslateY
-            };
-        };
-        const depths = Array.from({ length: numLayers }, (_, i) => i + 2);
-        const { previousYTotal: newHeight } = depths.reduce(minimiseHeight, {
-            previousTanslateY: 0,
-            previousYTotal: this.yTotal
-        });
-        this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, totalWidth, newHeight].join(' '));
-        this.node = this.node
-            // the root is a dummy node: it is never rendered, and has no parent to animate against
-            .data(nodes.filter(d => d.data.type !== ChartNodeType.root), d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
-            .join(enter => enter
-            .append('g')
-            .call(enterNodes)
-            .attr('opacity', 0)
-            .attr('transform', d => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')'), update => update, exit => {
-            this.tooltipOperator().close(false);
-            return (exit
-                .style('pointer-events', 'none')
-                .transition()
-                .duration(nodeDuration / 2)
-                .delay(d => exitStagger(d.parent, d))
-                .ease(easeElasticIn.amplitude(0.5).period(1))
-                .attr('transform', d => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')')
-                .attr('opacity', 0)
-                .remove()
-                // in case a tooltip was opened on a transitioning element
-                .on('end', () => this.tooltipOperator().close(false)));
-        });
-        this.node
-            .call(mergedNodes, { tooltipOperator: this.tooltipOperator() })
-            .transition()
-            .delay(d => {
-            const groupClosing = togglingGroup && !childrenOf(d.parent).find(n => n.data.group)?._groupOpen;
-            return groupClosing ? groupDelay : (switchingSelection ? nodeDuration : 0) + enterStagger(d.parent, d);
-        })
-            .duration(nodeDuration)
-            .ease(easeElasticOut.amplitude(0.5).period(1))
-            .attr('transform', d => `translate(${d.y},${d.x})`)
-            .attr('opacity', 1);
-        this.node.selectAll('.node-openable').on('click', this.handleNodeClick.bind(this));
-        this.node.selectAll('.group-button').on('click', this.handleGroupButtonClick.bind(this));
-        this.link = this.link
-            .data(links, d => `${d.source.parent?.parent?.data.id}-${d.source.parent?.data.id}-${d.source.data.id}-${d.target.data.id}`)
-            .join(enter => enter
-            .append('path')
-            .classed('link-path', true)
-            .attr('opacity', 0)
-            .attr('fill', 'none')
-            .attr('stroke', '#b5b5b5'), update => update, exit => exit
-            .transition()
-            .duration(linkDuration / 2)
-            .delay(d => exitStagger(d.source, d.target))
-            .attr('opacity', 0)
-            .remove())
-            .call(mergedLinks, { togglingGroup, switchingSelection });
-    }
-    handleGroupButtonClick(_event, d) {
-        if (d._greyed) {
-            return;
-        }
-        d._groupOpen = !d._groupOpen;
-        const children = d.parent._groupChildren;
-        d.parent._groupChildren = d.parent.children;
-        d.parent.children = children;
-        this.updateChart({ togglingGroup: true });
-    }
-    handleNodeClick(_event, d) {
-        d._open = !d._open;
-        const switchingSelection = '_greyed' in d && d._greyed;
-        // the node can still be clicked while it animates out, by which time its parent is collapsed
-        childrenOf(d.parent).forEach(child => {
-            child._greyed = false;
-            if (child !== d) {
-                child._open = false;
-                collapseChildren(child);
-                child._greyed = d._open;
-            }
-        });
-        d.children ? collapseChildren(d) : restoreChildren(d);
-        this.updateChart({ switchingSelection });
-    }
-    downloadSvg() {
-        return downloadSvg(this.chartRef().nativeElement);
-    }
-    downloadPng() {
-        return downloadPng(this.chartRef().nativeElement);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart></svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  @if (tipData.modelValue) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n      <span class=\"is-pr-1\">:</span>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n    </p>\n  }\n  @if (tipData.terms?.length) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n      <span class=\"is-pr-1\">:</span>\n      @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n        <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n        @if (!lastTerm) {\n          <span class=\"is-px-1\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: [".chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }] }); }
 }
@@ -16206,13 +14784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart></svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  @if (tipData.modelValue) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n      <span class=\"is-pr-1\">:</span>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n    </p>\n  }\n  @if (tipData.terms?.length) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n      <span class=\"is-pr-1\">:</span>\n      @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n        <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n        @if (!lastTerm) {\n          <span class=\"is-px-1\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: [".chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
 
-const filterTermTypes$1 = [
-    TermTermType.resourceUse,
-    TermTermType.emission,
-    TermTermType.characterisedIndicator,
-    TermTermType.endpointIndicator,
-    TermTermType.model
-];
 const searchParams = (should) => ({
     fields: ['@type', '@id', 'name', 'units', 'termType'],
     limit: 9999, // do not use scroll
@@ -16224,89 +14795,13 @@ const searchParams = (should) => ({
         }
     }
 });
-const defaultIndicatorsModelId = 'defaultIndicatorsModelId';
-const defaultIndicatorsModelName = 'Default Indicators (multi-model)';
-const warnings = (logs, terms) => [!logs.every(log => terms[log.indicator] && terms[log.contributor]) && 'missing-terms'].filter(Boolean);
-const parseLogValues = (impactAssessment, values) => {
-    const log = values[0];
-    const { weightedTotal, total } = values.reduce((prev, curr) => ({
-        weightedTotal: prev.weightedTotal + curr.weightedValue,
-        total: prev.total + curr.value
-    }), { weightedTotal: 0, total: 0 });
-    const inputsObj = (impactAssessment.emissionsResourceUse || [])
-        .filter(eru => eru.term['@id'] === log.contributor && eru.inputs?.length)
-        .reduce((acc, eru) => {
-        const inputId = eru.inputs.map(i => i['@id']).join(';');
-        const currentOperations = eru.operation
-            ? [
-                {
-                    id: eru.operation['@id'],
-                    ...getUnitsAndLabel(eru.operation),
-                    modelId: log.modelId,
-                    weightedValue: eru.value
-                }
-            ]
-            : [];
-        acc[inputId] = acc[inputId]
-            ? {
-                ...acc[inputId],
-                weightedValue: acc[inputId].weightedValue + eru.value,
-                modelId: log.modelId,
-                operations: [...acc[inputId].operations, ...currentOperations]
-            }
-            : {
-                id: inputId,
-                ...(!eru.inputs?.length ? { label: 'Input group (under development)' } : getUnitsAndLabel(eru.inputs)),
-                modelId: log.modelId,
-                weightedValue: eru.value,
-                operations: [...currentOperations]
-            };
-        return acc;
-    }, {});
-    const inputs = Object.values(inputsObj);
-    return { ...log, weightedValue: weightedTotal, value: total, inputs };
-};
-const processContributions = (record, nodes) => Object.entries(record || {}).flatMap(([index, contributions]) => {
-    const indicator = nodes[+index];
-    return indicator
-        ? Object.entries(contributions).flatMap(([impactTermId, modelContr]) => Object.entries(modelContr).map(([modelId, weightedValue]) => {
-            const contributor = indicator.term['@id'];
-            const value = indicator.value || 0;
-            const coefficient = value !== 0 ? weightedValue / value : 0;
-            // only get contributions with positive coefficient
-            return coefficient > 0
-                ? {
-                    indicator: impactTermId,
-                    contributor,
-                    coefficient,
-                    modelId,
-                    weightedValue,
-                    value
-                }
-                : null;
-        }))
-        : null;
-});
-const parseContributions = (impactAssessment, contributions) => {
-    const allLogs = [
-        ...processContributions(contributions.emissionsResourceUse, impactAssessment.emissionsResourceUse || []),
-        ...processContributions(contributions.impacts, impactAssessment.impacts || [])
-    ].filter(Boolean);
-    const grouped = allLogs.reduce((acc, log) => {
-        const key = [log.indicator, log.contributor, log.modelId].join('/');
-        acc[key] = acc[key] || [];
-        acc[key].push(log);
-        return acc;
-    }, {});
-    return Object.values(grouped).map(logs => parseLogValues(impactAssessment, logs));
-};
 class ImpactAssessmentsGraphComponent {
     constructor() {
         this.searchService = inject(HeSearchService);
         this.nodeService = inject(HeNodeService);
         this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
         this.initialTerms = toSignal(this.searchService
-            .search$(searchParams(filterTermTypes$1.map(termType => matchTermType(termType))))
+            .search$(searchParams(hierarchyTermTypes.map(termType => matchTermType(termType))))
             .pipe(mergeMap(({ results }) => from(results).pipe(map(term => {
             const modelDocs = term.termType === TermTermType.model ? findMatchingModel({ model: term['@id'] }) : null;
             return {
@@ -16329,16 +14824,14 @@ class ImpactAssessmentsGraphComponent {
             }),
             stream: ({ params: { selectedImpactAssessment, isRecalculated } }) => !selectedImpactAssessment || !isRecalculated
                 ? of([])
-                : this.nodeService.getContributions$(selectedImpactAssessment).pipe(map(contributions => parseContributions(selectedImpactAssessment, contributions)), catchError(err => {
+                : this.nodeService.getContributions$(selectedImpactAssessment).pipe(map(contributions => hierarchyContributions(selectedImpactAssessment, contributions)), catchError(err => {
                     console.error(err);
                     this.error.set(err.toString());
                     return of([]);
                 }))
         });
         this.nodeLogs = computed(() => this.nodeLogsResource.value() ?? [], ...(ngDevMode ? [{ debugName: "nodeLogs" }] : []));
-        this.logTermIds = computed(() => unique(this.nodeLogs()
-            .flatMap(l => [l.contributor, l.indicator, ...l.inputs.map(i => i.id)])
-            .filter(termId => !this.initialTerms()?.[termId])), ...(ngDevMode ? [{ debugName: "logTermIds" }] : []));
+        this.logTermIds = computed(() => missingTermIds(this.nodeLogs(), this.initialTerms()), ...(ngDevMode ? [{ debugName: "logTermIds" }] : []));
         this.allTermsResource = rxResource({
             params: () => ({
                 logTermIds: this.logTermIds(),
@@ -16355,40 +14848,14 @@ class ImpactAssessmentsGraphComponent {
         });
         this.allTerms = computed(() => this.allTermsResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "allTerms" }] : []));
         this.noData = computed(() => !this.nodeLogs()?.length, ...(ngDevMode ? [{ debugName: "noData" }] : []));
-        this.warnings = computed(() => [this.nodeLogs(), this.allTerms()].some(v => isEmpty(v)) ? [] : warnings(this.nodeLogs(), this.allTerms()), ...(ngDevMode ? [{ debugName: "warnings" }] : []));
+        this.warnings = computed(() => [this.nodeLogs(), this.allTerms()].some(v => isEmpty(v)) ? [] : hierarchyWarnings(this.nodeLogs(), this.allTerms()), ...(ngDevMode ? [{ debugName: "warnings" }] : []));
         this.showWarnings = signal(false, ...(ngDevMode ? [{ debugName: "showWarnings" }] : []));
         this.error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
         this.selectedModelId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedModelId" }] : []));
-        this.hasDefaultModelLogs = computed(() => this.nodeLogs()?.some(log => log.modelId === getDefaultModelId(log.indicator)), ...(ngDevMode ? [{ debugName: "hasDefaultModelLogs" }] : []));
-        this.models = computed(() => [
-            ...(this.hasDefaultModelLogs() ? [{ '@id': defaultIndicatorsModelId, name: defaultIndicatorsModelName }] : []),
-            ...unique(this.nodeLogs().map(({ modelId }) => this.allTerms()[modelId] || { '@id': modelId }))
-        ], ...(ngDevMode ? [{ debugName: "models" }] : []));
+        this.models = computed(() => hierarchyModels(this.nodeLogs(), this.allTerms()), ...(ngDevMode ? [{ debugName: "models" }] : []));
         this.categories = this.emissionCategoryService.categories;
         this.selectedCategory = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
-        this.chartData = computed(() => {
-            const category = this.selectedCategory();
-            const categoryLabel = category ? this.emissionCategoryService.categoryLabel(category) : undefined;
-            return this.nodeLogs()
-                .filter(log => log.modelId ===
-                (this.selectedModelId() === defaultIndicatorsModelId
-                    ? getDefaultModelId(log.indicator)
-                    : this.selectedModelId()))
-                .map(log => {
-                const includeCategory = category &&
-                    [TermTermType.emission, TermTermType.resourceUse].includes(this.allTerms()[log.contributor]?.termType);
-                const categoryValue = includeCategory
-                    ? this.emissionCategoryService.emissionCategoryValue(log.contributor, category)
-                    : null;
-                return includeCategory
-                    ? {
-                        ...log,
-                        category: categoryValue || `Not available for ${categoryLabel}`,
-                        categoryLabel
-                    }
-                    : log;
-            });
-        }, ...(ngDevMode ? [{ debugName: "chartData" }] : []));
+        this.chartData = computed(() => hierarchyData(this.nodeLogs(), this.allTerms(), this.selectedModelId(), this.selectedCategory()), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.loading = computed(() => [this.nodeLogsResource.isLoading(), this.allTermsResource.isLoading()].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.showChart = computed(() => [!isEmpty(this.chartData()), !isEmpty(this.allTerms()), !this.loading(), !this.error(), !this.showWarnings()].every(Boolean), ...(ngDevMode ? [{ debugName: "showChart" }] : []));
         effect(() => {
@@ -16430,7 +14897,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
             }),
             stream: ({ params: { impactAssessment } }) => this.nodeService
                 .getContributions$(impactAssessment)
-                .pipe(map(contributions => parseContributions$1(impactAssessment, contributions)))
+                .pipe(map(contributions => parseContributions(impactAssessment, contributions)))
         });
         this.logs = computed(() => indicatorLogs(this.logsResource.value() ?? [], this.selectedTermId(), this.selectedMethodId()), ...(ngDevMode ? [{ debugName: "logs" }] : []));
         this.nonZeroLogs = computed(() => nonZeroContributors(this.logs()), ...(ngDevMode ? [{ debugName: "nonZeroLogs" }] : []));
@@ -16469,7 +14936,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         this.chartData = computed(() => breakdownBars(this.values(), this.selectedCategory()), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.chartTooltipFn = ({ includedItems, index }) => breakdownTooltip(this.chartData()[index], includedItems, this.nonZeroLogs(), this.total(), this.maximumValues());
         this.afterBarDrawSettings = computed(() => breakdownBarText(this.displayValue(), this.total(), this.maximumValues()), ...(ngDevMode ? [{ debugName: "afterBarDrawSettings" }] : []));
-        this.configuration = computed(() => breakdownScale(this.values()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.configuration = computed(() => breakdownScale(this.values(), this.selectedCategory()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
         this.exportFormats = [
             ...exportFormats,
             {
@@ -16477,7 +14944,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
                 label: 'Data'
             }
         ];
-        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv$2(this.logs(), this.impactAssessment()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
+        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv$1(this.logs(), this.impactAssessment()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
         this.chartExportFn = async (format, chart) => {
             return {
                 png: () => chart.exportAsPng(),
@@ -17514,5 +15981,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBlockComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HE_REGION_GEOJSON_BASE_URL, 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, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, aggregatedSitePrimaryProduct, allCountriesQuery, allGroups, allOptions, availableProperties, axisLabelSettings, backgroundModelParams, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, errorsLabel, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findBackgroundModel, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, findTermModels, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter$1 as formatter, getDatesBetween, gitBranch, gitHome, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, highestMethodTier, ignoreKeys$2 as ignoreKeys, impactAssessmentProduct, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isIdenticalNodeValue, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, loadMapApi, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, 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, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeChartLabels, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, openNodeUrl, openUrl, optionsFromGroup, parentKey, parentProperty, parseData, parseDataPath, parseLines, 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, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, suggestTerms, takeAfterViewInit, termLocation, termLocationName, termProperties, termSearch, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBlockComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HE_REGION_GEOJSON_BASE_URL, 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, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, aggregatedSitePrimaryProduct, allCountriesQuery, allGroups, allOptions, availableProperties, axisLabelSettings, backgroundModelParams, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, distinctUntilChangedDeep, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, errorsLabel, evaluateSuccess, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findBackgroundModel, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, findTermModels, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter$1 as formatter, getDatesBetween, gitBranch, gitHome, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, highestMethodTier, ignoreKeys$2 as ignoreKeys, impactAssessmentProduct, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isIdenticalNodeValue, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, loadMapApi, locationQuery, logToCsv, logValueArray, logsKey, 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, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeChartLabels, nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, openNodeUrl, openUrl, optionsFromGroup, parentKey, parentProperty, parseData, parseDataPath, parseLines, 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, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, suggestTerms, takeAfterViewInit, termLocation, termLocationName, termProperties, termSearch, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map