data-suggestions 1.0.2 → 2.0.0

package/assets/recomendaciones/highlight-the-third-highest-value.json

@@ -1,80 +1,80 @@
-[
-  {
-    "visualVariable": "Border color",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Hover behavior",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Bar direction",
-    "sampleSize": "≤5",
-    "variability": "High",
-    "recommendation": "Horizontal"
-  },
-  {
-    "visualVariable": "Bar direction",
-    "sampleSize": null,
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Spacing between bars",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Labels",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Color palette",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Random color palette"
-  },
-  {
-    "visualVariable": "Axis maximum",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Number of steps",
-    "sampleSize": ">20",
-    "variability": "High",
-    "recommendation": "Few steps"
-  },
-  {
-    "visualVariable": "Number of steps",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Indifferent"
-  },
-  {
-    "visualVariable": "Order",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Ordered"
-  },
-  {
-    "visualVariable": "Opacity",
-    "sampleSize": ">20",
-    "variability": "High",
-    "recommendation": "Transparent"
-  },
-  {
-    "visualVariable": "Opacity",
-    "sampleSize": "≤5",
-    "variability": "Moderate",
-    "recommendation": "Opaque"
-  }
+[
+  {
+    "visualVariable": "Border color",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": "≤5",
+    "variability": "High",
+    "recommendation": "Horizontal"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": null,
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Color palette",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Random color palette"
+  },
+  {
+    "visualVariable": "Axis maximum",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Few steps"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Ordered"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Transparent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Opaque"
+  }
 ]

package/fesm2022/data-suggestions.mjs

@@ -36,59 +36,16 @@ function getConfiguredVisualVariableIndex(visualVariable) {
     return v !== undefined ? v : undefined;
 }
 
-/**
- * Single catalog of communication goals and their rules JSON.
- * Host apps should use `CommunicationGoalsService` instead of duplicating this list.
- */
-const COMMUNICATION_GOAL_DEFINITIONS = [
-    {
-        index: 1,
-        label: 'Count how many times a given value is repeated',
-        jsonSlug: 'count-times-that-a-certain-value-is-repeated',
-    },
-    {
-        index: 2,
-        label: 'Count how many times a threshold is exceeded',
-        jsonSlug: 'count-times-a-certain-value-is-exceeded',
-    },
-    {
-        index: 3,
-        label: 'Count how many times values stay below a threshold',
-        jsonSlug: 'count-times-does-not-exceed-a-certain-value',
-    },
-    {
-        index: 4,
-        label: 'Highlight a specific value',
-        jsonSlug: 'highlight-a-value',
-    },
-    {
-        index: 5,
-        label: 'Highlight the highest value',
-        jsonSlug: 'highlight-the-highest-value',
-    },
-    {
-        index: 6,
-        label: 'Highlight the lowest value',
-        jsonSlug: 'highlight-the-lowest-value',
-    },
-    {
-        index: 7,
-        label: 'Highlight higher values',
-        jsonSlug: 'highlight-higher-values',
-    },
-    {
-        index: 8,
-        label: 'Highlight lower values',
-        jsonSlug: 'highlight-lower-values',
-    },
-];
-function definitionsToBaseOptions() {
-    return COMMUNICATION_GOAL_DEFINITIONS.map((g) => ({
-        index: g.index,
-        value: g.label,
-        json: g.jsonSlug,
-    }));
-}
+const ChartGenGoals = {
+    COUNT_REPEATED_VALUE: 'count-times-that-a-certain-value-is-repeated',
+    COUNT_EXCEEDED_THRESHOLD: 'count-times-a-certain-value-is-exceeded',
+    COUNT_BELOW_THRESHOLD: 'count-times-does-not-exceed-a-certain-value',
+    HIGHLIGHT_VALUE: 'highlight-a-value',
+    HIGHLIGHT_HIGHEST_VALUE: 'highlight-the-highest-value',
+    HIGHLIGHT_LOWEST_VALUE: 'highlight-the-lowest-value',
+    HIGHLIGHT_HIGHER_VALUES: 'highlight-higher-values',
+    HIGHLIGHT_LOWER_VALUES: 'highlight-lower-values',
+};
 
 class chartsModel {
     data;
@@ -179,10 +136,10 @@ class chartsModel {
     hoverRec = 'default';
     showingInDialog = 'suggestions';
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: chartsModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: chartsModel, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: chartsModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: chartsModel, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: chartsModel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: chartsModel, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -237,10 +194,10 @@ class CommunicationRulesService {
             return acc;
         }, {})));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationRulesService, deps: [{ token: i1.HttpClient }, { token: chartsModel }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationRulesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommunicationRulesService, deps: [{ token: i1.HttpClient }, { token: chartsModel }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommunicationRulesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationRulesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CommunicationRulesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: chartsModel }] });
@@ -354,9 +311,6 @@ class DataSuggestionsService {
             };
         }));
     }
-    analyzBestGraph(_dataset, _goal) {
-        return 'bars';
-    }
     computeStats(dataset) {
         const values = dataset.map((d) => d.value);
         const n = values.length;
@@ -385,62 +339,32 @@ class DataSuggestionsService {
             sc = '>20';
         return { dataSize: sc, dataVariability: vari };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsService, deps: [{ token: CommunicationRulesService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: CommunicationRulesService }] });
-
-/**
- * Facade for host apps: goal catalog, rule counts, raw/filtered rules, and full suggestions
- * (same pipeline as `data-suggestions-table`).
- */
-class CommunicationGoalsService {
-    rulesService;
-    suggestionsService;
-    constructor(rulesService, suggestionsService) {
-        this.rulesService = rulesService;
-        this.suggestionsService = suggestionsService;
-    }
-    /** Goal definitions (index, label, JSON slug). */
-    getDefinitions() {
-        return COMMUNICATION_GOAL_DEFINITIONS;
-    }
-    /** Dropdown options without HTTP (label in `value`, slug in `json`). */
-    getBaseOptions() {
-        return definitionsToBaseOptions();
-    }
-    /** Same options with `(n)` rule count per JSON file. */
-    loadOptionsWithRuleCounts() {
-        const defs = COMMUNICATION_GOAL_DEFINITIONS;
-        const slugs = defs.map((d) => d.jsonSlug);
-        return this.rulesService.getCountsForGoals(slugs).pipe(map((counts) => defs.map((g) => ({
-            index: g.index,
-            value: `${g.label} (${counts[g.jsonSlug] ?? 0})`,
-            json: g.jsonSlug,
-        }))));
+    getRecommendationCount(dataset, goal) {
+        const { dataVariability, dataSize } = this.computeStats(dataset);
+        return this.rulesService.getRulesForGoal(goal).pipe(map((allRules) => this.getMatchingRules(allRules, dataSize, dataVariability).length));
     }
-    /** Full rules array from `assets/recomendaciones/<goalSlug>.json`. */
-    getRulesForGoal(goalSlug) {
-        return this.rulesService.getRulesForGoal(goalSlug);
+    getRecommendationCountsForDatasets(datasets, goal) {
+        return forkJoin(datasets.map((dataset) => this.getRecommendationCount(dataset.data, goal).pipe(map((recommendationCount) => ({
+            dataset,
+            recommendationCount,
+        })))));
     }
-    /** Rules filtered by sample size and variability (for custom UIs). */
-    getRecommendations(goalSlug, sampleSize, variability) {
-        return this.rulesService.getRecomendaciones(goalSlug, sampleSize, variability);
+    getMatchingRules(allRules, dataSize, dataVariability) {
+        const wantSize = normalizeSampleSizeLabel(dataSize);
+        return allRules.filter((r) => normalizeSampleSizeLabel(r.sampleSize) === wantSize &&
+            r.variability === dataVariability &&
+            !!r.recommendation);
     }
-    /** Dataset stats + ordered suggestion rows (table / chart binding). */
-    getSuggestionsResult(dataset, goalSlug) {
-        return this.suggestionsService.analyze(dataset, goalSlug);
+    analyzBestGraph(_dataset, _goal) {
+        return 'bars';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationGoalsService, deps: [{ token: CommunicationRulesService }, { token: DataSuggestionsService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationGoalsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsService, deps: [{ token: CommunicationRulesService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommunicationGoalsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: CommunicationRulesService }, { type: DataSuggestionsService }] });
+        }], ctorParameters: () => [{ type: CommunicationRulesService }] });
 
 Chart.register(...registerables, ChartDataLabels);
 class DataSuggestionsBarChartComponent {
@@ -747,12 +671,12 @@ class DataSuggestionsBarChartComponent {
     clamp(value, min, max) {
         return Math.min(Math.max(value, min), max);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DataSuggestionsBarChartComponent, isStandalone: true, selector: "lib-data-suggestions-bar-chart", inputs: { title: "title", labels: "labels", values: "values", orientation: "orientation", maxValue: "maxValue", stepNumber: "stepNumber", auxiliarLines: "auxiliarLines", opacity: "opacity", sortAscending: "sortAscending", showLabels: "showLabels", colorPalette: "colorPalette", barDistance: "barDistance", barBorderRecommendation: "barBorderRecommendation", hover: "hover", heightPx: "heightPx", minHeightPx: "minHeightPx", maxHeightPx: "maxHeightPx", minWidthPx: "minWidthPx", maxWidthPx: "maxWidthPx", barSizePx: "barSizePx" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrap\"  [style.height.px]=\"chartHeightPx\"\n[style.width.px]=\"chartWidthPx\">\n  <canvas #canvas></canvas>\n</div>\n", styles: [".chart-wrap{position:relative;margin-left:auto;margin-right:auto;max-width:900px;min-width:300px}.chart-wrap canvas{width:100%!important;height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DialogModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DataSuggestionsBarChartComponent, isStandalone: true, selector: "lib-data-suggestions-bar-chart", inputs: { title: "title", labels: "labels", values: "values", orientation: "orientation", maxValue: "maxValue", stepNumber: "stepNumber", auxiliarLines: "auxiliarLines", opacity: "opacity", sortAscending: "sortAscending", showLabels: "showLabels", colorPalette: "colorPalette", barDistance: "barDistance", barBorderRecommendation: "barBorderRecommendation", hover: "hover", heightPx: "heightPx", minHeightPx: "minHeightPx", maxHeightPx: "maxHeightPx", minWidthPx: "minWidthPx", maxWidthPx: "maxWidthPx", barSizePx: "barSizePx" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrap\"  [style.height.px]=\"chartHeightPx\"\r\n[style.width.px]=\"chartWidthPx\">\r\n  <canvas #canvas></canvas>\r\n</div>\r\n", styles: [".chart-wrap{position:relative;margin-left:auto;margin-right:auto;max-width:900px;min-width:300px}.chart-wrap canvas{width:100%!important;height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DialogModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-data-suggestions-bar-chart', standalone: true, imports: [CommonModule, ButtonModule, DialogModule], template: "<div class=\"chart-wrap\"  [style.height.px]=\"chartHeightPx\"\n[style.width.px]=\"chartWidthPx\">\n  <canvas #canvas></canvas>\n</div>\n", styles: [".chart-wrap{position:relative;margin-left:auto;margin-right:auto;max-width:900px;min-width:300px}.chart-wrap canvas{width:100%!important;height:100%!important}\n"] }]
+            args: [{ selector: 'lib-data-suggestions-bar-chart', standalone: true, imports: [CommonModule, ButtonModule, DialogModule], template: "<div class=\"chart-wrap\"  [style.height.px]=\"chartHeightPx\"\r\n[style.width.px]=\"chartWidthPx\">\r\n  <canvas #canvas></canvas>\r\n</div>\r\n", styles: [".chart-wrap{position:relative;margin-left:auto;margin-right:auto;max-width:900px;min-width:300px}.chart-wrap canvas{width:100%!important;height:100%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canvas: [{
                 type: ViewChild,
                 args: ['canvas', { static: true }]
@@ -1154,12 +1078,12 @@ ngOnInit(): void {
         }
         return 'single';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsTableComponent, deps: [{ token: DataSuggestionsService }, { token: chartsModel }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DataSuggestionsTableComponent, isStandalone: true, selector: "data-suggestions-table", inputs: { dataset: "dataset", goal: "goal" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"panel\">\r\n  <header class=\"header\">\r\n    <span>Applied suggestions: {{ resultsLength }}</span>\r\n    <!-- <button type=\"button\" (click)=\"generate()\" [disabled]=\"!dataset?.length || !goal\">\r\n      Analyze\r\n    </button> -->\r\n      <p-button\r\n      icon=\"pi pi-info-circle\"\r\n      title=\"Info\"\r\n      (click)=\"showJsonInfoDialog = true\"\r\n      styleClass=\"p-button-text\"\r\n      ></p-button>\r\n  </header>\r\n\r\n \r\n  @if (showGraph) {\r\n    <lib-data-suggestions-bar-chart\r\n      [title]=\"'Recommendations'\"\r\n      [labels]=\"this.chartModel.chartLabels\"\r\n      [values]=\"this.chartModel.chartValues\"\r\n      [orientation]=\"this.chartModel.orientation\"\r\n      [maxValue]=\"this.chartModel.incrementoMaximo\"\r\n      [stepNumber]=\"this.chartModel.numeroPasos\"\r\n      [auxiliarLines]=\"this.chartModel.auxiliarLines\"\r\n      [heightPx]=\"320\"\r\n      [opacity]=\"this.chartModel.opacity\"\r\n      [sortAscending]=\"this.chartModel.ordered\"\r\n      [showLabels]=\"this.chartModel.labels\"\r\n      [barDistance] = \"this.chartModel.separation\"\r\n      [colorPalette]=\"this.chartModel.colorPalette\"\r\n      [barBorderRecommendation]=\"this.chartModel.borderColor\"\r\n      [hover]=\"this.chartModel.hoverRec\"\r\n    >\r\n    </lib-data-suggestions-bar-chart>\r\n \r\n  }\r\n \r\n</section>\r\n\r\n<p-dialog\r\nheader=\"Info\"\r\n[(visible)]=\"showJsonInfoDialog\"\r\n[modal]=\"true\"\r\n[dismissableMask]=\"true\"\r\n[style]=\"{ width: '52rem' }\"\r\n>\r\n\r\n<div class=\"dialog-tabs\">\r\n  <button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'suggestions'\"\r\n(click)=\"chartModel.showingInDialog = 'suggestions'\"\r\n>\r\nSuggestions\r\n</button>\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'data'\"\r\n(click)=\"chartModel.showingInDialog = 'data'\"\r\n>\r\nExpected data format\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'variables'\"\r\n(click)=\"chartModel.showingInDialog = 'variables'\"\r\n>\r\nVariables overview\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'readme'\"\r\n(click)=\"chartModel.showingInDialog = 'readme'\"\r\n>\r\nHow to use the library\r\n</button>\r\n<button\r\n  type=\"button\"\r\n  class=\"dialog-tab\"\r\n  [class.active]=\"chartModel.showingInDialog === 'communicationGoals'\"\r\n  (click)=\"chartModel.showingInDialog = 'communicationGoals'\"\r\n>\r\nCommunication Goals\r\n</button>\r\n</div>\r\n<div class=\"grid body\">\r\n  @if(chartModel.showingInDialog === 'suggestions'){\r\n    <ng-container *ngIf=\"result$ | async as result\">\r\n      <div class=\"suggestions-content\">\r\n  \r\n        <div class=\"meta\">\r\n          <span><strong>Size:</strong> {{ result.dataSize }}</span>\r\n          <span><strong>Variability:</strong> {{ result.dataVariability }}</span>\r\n          <span><strong>Suggested chart:</strong> {{ result.suggestedGraph }}</span>\r\n        </div>\r\n  \r\n        @if(result.rules?.length){\r\n          <table class=\"table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Index</th>\r\n                <th>Visual variable</th>\r\n                <th>Recommendation</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let r of result.rules\">\r\n                <td>{{ r.index }}</td>\r\n                <td>{{ r.visualVariable }}</td>\r\n                <td>{{ r.recommendation }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        } @else {\r\n          <p class=\"empty\">\r\n            There are no suggestions for this combination.\r\n          </p>\r\n        }\r\n  \r\n      </div>\r\n    </ng-container>\r\n  }\r\n@if(chartModel.showingInDialog === 'data'){\r\n<p>\r\n  The library accepts multiple JSON structures and automatically converts them \r\n    into the internal format required to generate the chart.\r\n</p>\r\n\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 1: Array of objects</h4>\r\n    <pre class=\"json-example\">{{ jsonExample1 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 2: Key-value dictionary</h4>\r\n    <pre class=\"json-example\">{{ jsonExample2 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 3: Column-oriented structure</h4>\r\n    <pre class=\"json-example\">{{ jsonExample3 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 4: Array of tuples</h4>\r\n    <pre class=\"json-example\">{{ jsonExample4 }}</pre>\r\n  </div>\r\n\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'variables'){\r\n<img\r\nsrc=\"assets/img/ejemploVariables.jpeg\"\r\nalt=\"Summary of recommended configurations\"\r\nstyle=\"width: 400px; margin-left: 120px;\"\r\n/>\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'readme'){\r\n  <div class=\"info-section\" style=\"margin-left: 10px;\">\r\n    <h3>Quick Start</h3>\r\n  \r\n    <p>\r\n      Install the library from the NPM registry:\r\n    </p>\r\n  \r\n    <pre><code>npm install data-suggestions</code></pre>\r\n  \r\n    <p>\r\n      Import the component into your Angular application and provide a dataset\r\n      together with a communication goal. The library will automatically analyze\r\n      the data and generate visualization recommendations.\r\n    </p>\r\n  \r\n    <p>\r\n      For detailed installation instructions, supported data formats,\r\n      configuration options, examples, and API documentation, please refer to\r\n      the project's README file.\r\n    </p>\r\n  </div>\r\n  \r\n}\r\n@if(chartModel.showingInDialog === 'communicationGoals'){\r\n  <div class=\"communication-goals-content\" style=\"margin-left: 10px;\">\r\n\r\n\r\n    <p>\r\n      Communication goals define the analytical objective that the library\r\n      should apply when generating visualization recommendations.\r\n    </p>\r\n\r\n    <p>\r\n      The available communication goals can be retrieved directly through the\r\n      <code>CommunicationGoalsService</code>.\r\n    </p>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Get communication goals with recommendation counts</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalsServiceExample\"></pre>\r\n    </div>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Example response</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalsResponseExample\"></pre>\r\n    </div>\r\n\r\n    <p>\r\n      The <code>json</code> property contains the value that must be passed to\r\n      the <code>communicationGoal</code> parameter.\r\n    </p>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Usage example</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalUsageExample\"></pre>\r\n    </div>\r\n\r\n  </div>\r\n}\r\n</div>\r\n<!--  <p>\r\nEl archivo debe ser un JSON con una propiedad <strong>data</strong> que sea\r\nun array de objetos con <strong>key</strong> y <strong>value</strong>.\r\n</p>\r\n\r\n<pre class=\"json-example\">{{ jsonExample }}</pre>\r\n-->\r\n<ng-template pTemplate=\"footer\">\r\n<p-button\r\n  label=\"Cerrar\"\r\n  icon=\"pi pi-check\"\r\n  (click)=\"showJsonInfoDialog = false\"\r\n></p-button>\r\n</ng-template>\r\n</p-dialog>", styles: [".panel{display:grid;gap:12px;padding:12px;border:1px solid #ddd;border-radius:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.9;margin-left:10px;margin-top:10px;margin-bottom:10px}.table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}.empty{opacity:.7}.dialog-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #ddd}.dialog-tab{border:none;background:transparent;padding:.75rem 1rem;cursor:pointer;font-weight:500;color:#666;border-bottom:3px solid transparent}.dialog-tab:hover{color:#111}.dialog-tab.active{color:#111;font-weight:700;border-bottom-color:#2563eb}.active{color:#5da6ff!important}.json-example{background:#0b1020;color:#e6e6e6;padding:12px;border-radius:8px;overflow:auto;font-size:.9rem;line-height:1.35}.dialog-body{display:block;width:100%}.suggestions-content{display:flex;flex-direction:column;width:100%}.meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}.empty{display:block;width:100%;padding:14px 0;text-align:left;margin:0 0 0 10px}.json-section{display:block;width:100%;margin-bottom:20px}.json-section h4{margin-bottom:8px}.json-example{display:block;width:100%}.code-block{display:block;white-space:pre-wrap;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DataSuggestionsBarChartComponent, selector: "lib-data-suggestions-bar-chart", inputs: ["title", "labels", "values", "orientation", "maxValue", "stepNumber", "auxiliarLines", "opacity", "sortAscending", "showLabels", "colorPalette", "barDistance", "barBorderRecommendation", "hover", "heightPx", "minHeightPx", "maxHeightPx", "minWidthPx", "maxWidthPx", "barSizePx"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsTableComponent, deps: [{ token: DataSuggestionsService }, { token: chartsModel }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DataSuggestionsTableComponent, isStandalone: true, selector: "chart-gen", inputs: { dataset: "dataset", goal: "goal" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"panel\">\r\n  <header class=\"header\">\r\n    <span>Applied suggestions abc: {{ resultsLength }}</span>\r\n    <!-- <button type=\"button\" (click)=\"generate()\" [disabled]=\"!dataset?.length || !goal\">\r\n      Analyze\r\n    </button> -->\r\n      <p-button\r\n      icon=\"pi pi-info-circle\"\r\n      title=\"Info\"\r\n      (click)=\"showJsonInfoDialog = true\"\r\n      styleClass=\"p-button-text\"\r\n      ></p-button>\r\n  </header>\r\n\r\n \r\n  @if (showGraph) {\r\n    <lib-data-suggestions-bar-chart\r\n      [title]=\"'Recommendations'\"\r\n      [labels]=\"this.chartModel.chartLabels\"\r\n      [values]=\"this.chartModel.chartValues\"\r\n      [orientation]=\"this.chartModel.orientation\"\r\n      [maxValue]=\"this.chartModel.incrementoMaximo\"\r\n      [stepNumber]=\"this.chartModel.numeroPasos\"\r\n      [auxiliarLines]=\"this.chartModel.auxiliarLines\"\r\n      [heightPx]=\"320\"\r\n      [opacity]=\"this.chartModel.opacity\"\r\n      [sortAscending]=\"this.chartModel.ordered\"\r\n      [showLabels]=\"this.chartModel.labels\"\r\n      [barDistance] = \"this.chartModel.separation\"\r\n      [colorPalette]=\"this.chartModel.colorPalette\"\r\n      [barBorderRecommendation]=\"this.chartModel.borderColor\"\r\n      [hover]=\"this.chartModel.hoverRec\"\r\n    >\r\n    </lib-data-suggestions-bar-chart>\r\n \r\n  }\r\n \r\n</section>\r\n\r\n<p-dialog\r\nheader=\"Info\"\r\n[(visible)]=\"showJsonInfoDialog\"\r\n[modal]=\"true\"\r\n[dismissableMask]=\"true\"\r\n[style]=\"{ width: '60rem', height: '42rem' }\"\r\n[contentStyle]=\"{ height: '34rem', overflow: 'auto' }\"\r\n>\r\n\r\n<div class=\"dialog-tabs\">\r\n  <button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'suggestions'\"\r\n(click)=\"chartModel.showingInDialog = 'suggestions'\"\r\n>\r\nSuggestions\r\n</button>\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'data'\"\r\n(click)=\"chartModel.showingInDialog = 'data'\"\r\n>\r\nExpected data format\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'variables'\"\r\n(click)=\"chartModel.showingInDialog = 'variables'\"\r\n>\r\nVariables overview\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'readme'\"\r\n(click)=\"chartModel.showingInDialog = 'readme'\"\r\n>\r\nHow to use the library\r\n</button>\r\n<button\r\n  type=\"button\"\r\n  class=\"dialog-tab\"\r\n  [class.active]=\"chartModel.showingInDialog === 'communicationGoals'\"\r\n  (click)=\"chartModel.showingInDialog = 'communicationGoals'\"\r\n>\r\nCommunication Goals\r\n</button>\r\n</div>\r\n<div class=\"grid body\">\r\n  @if(chartModel.showingInDialog === 'suggestions'){\r\n    <ng-container *ngIf=\"result$ | async as result\">\r\n      <div class=\"suggestions-content\">\r\n  \r\n        <div class=\"meta\">\r\n          <span><strong>Size:</strong> {{ result.dataSize }}</span>\r\n          <span><strong>Variability:</strong> {{ result.dataVariability }}</span>\r\n          <span><strong>Suggested chart:</strong> {{ result.suggestedGraph }}</span>\r\n        </div>\r\n  \r\n        @if(result.rules?.length){\r\n          <table class=\"table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Index</th>\r\n                <th>Visual variable</th>\r\n                <th>Recommendation</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let r of result.rules\">\r\n                <td>{{ r.index }}</td>\r\n                <td>{{ r.visualVariable }}</td>\r\n                <td>{{ r.recommendation }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        } @else {\r\n          <p class=\"empty\">\r\n            There are no suggestions for this combination.\r\n          </p>\r\n        }\r\n  \r\n      </div>\r\n    </ng-container>\r\n  }\r\n@if(chartModel.showingInDialog === 'data'){\r\n<p>\r\n  The library accepts multiple JSON structures and automatically converts them \r\n    into the internal format required to generate the chart.\r\n</p>\r\n\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 1: Array of objects</h4>\r\n    <pre class=\"json-example\">{{ jsonExample1 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 2: Key-value dictionary</h4>\r\n    <pre class=\"json-example\">{{ jsonExample2 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 3: Column-oriented structure</h4>\r\n    <pre class=\"json-example\">{{ jsonExample3 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 4: Array of tuples</h4>\r\n    <pre class=\"json-example\">{{ jsonExample4 }}</pre>\r\n  </div>\r\n\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'variables'){\r\n<img\r\nsrc=\"assets/img/ejemploVariables.jpeg\"\r\nalt=\"Summary of recommended configurations\"\r\nstyle=\"width: 400px; margin-left: 120px;\"\r\n/>\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'readme'){\r\n  <div class=\"info-section\">\r\n    <h3>Quick Start</h3>\r\n\r\n    <p>Install the library:</p>\r\n\r\n    <pre><code>npm install data-suggestions</code></pre>\r\n\r\n    <p>Import the component, service and communication goal constants:</p>\r\n\r\n    <pre><code>import &#123;\r\n  DataSuggestionsTableComponent,\r\n  DataSuggestionsService,\r\n  ChartGenGoals\r\n&#125; from 'data-suggestions';</code></pre>\r\n\r\n    <p>Add the component to the Angular standalone imports:</p>\r\n\r\n    <pre><code>@Component(&#123;\r\n  standalone: true,\r\n  imports: [\r\n    DataSuggestionsTableComponent\r\n  ]\r\n&#125;)</code></pre>\r\n\r\n    <p>Use the component in your template:</p>\r\n\r\n    <pre><code>&lt;chart-gen\r\n  [dataset]=\"dataset\"\r\n  [goal]=\"ChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\"&gt;\r\n&lt;/chart-gen&gt;</code></pre>\r\n\r\n    <p>\r\n      The <code>dataset</code> input contains the data to be analyzed. The\r\n      <code>goal</code> input defines the communication objective and must use\r\n      one of the values exported by <code>ChartGenGoals</code>.\r\n    </p>\r\n\r\n    <h4>Supported data formats</h4>\r\n\r\n    <p>The library accepts several JSON structures:</p>\r\n\r\n    <pre><code>[\r\n  &#123; \"key\": \"Monday\", \"value\": 30 &#125;,\r\n  &#123; \"key\": \"Tuesday\", \"value\": 42 &#125;\r\n]</code></pre>\r\n\r\n    <pre><code>&#123;\r\n  \"Monday\": 30,\r\n  \"Tuesday\": 42\r\n&#125;</code></pre>\r\n\r\n    <pre><code>&#123;\r\n  \"labels\": [\"Monday\", \"Tuesday\"],\r\n  \"values\": [30, 42]\r\n&#125;</code></pre>\r\n\r\n    <pre><code>[\r\n  [\"Monday\", 30],\r\n  [\"Tuesday\", 42]\r\n]</code></pre>\r\n\r\n    <h4>Available communication goals</h4>\r\n\r\n    <pre><code>ChartGenGoals.COUNT_REPEATED_VALUE\r\nChartGenGoals.COUNT_EXCEEDED_THRESHOLD\r\nChartGenGoals.COUNT_BELOW_THRESHOLD\r\nChartGenGoals.HIGHLIGHT_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\r\nChartGenGoals.HIGHLIGHT_LOWEST_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHER_VALUES\r\nChartGenGoals.HIGHLIGHT_LOWER_VALUES</code></pre>\r\n\r\n    <h4>Recommendation counts</h4>\r\n\r\n    <p>\r\n      The library also provides a service to calculate how many recommendations\r\n      would be applied to each dataset for a selected communication goal.\r\n    </p>\r\n\r\n    <pre><code>this.dataSuggestionsService\r\n  .getRecommendationCountsForDatasets(datasets, goal)\r\n  .subscribe(results =&gt; &#123;\r\n    this.datasetOptions = results\r\n      .map((&#123; dataset, recommendationCount &#125;) =&gt; (&#123;\r\n        ...dataset,\r\n        displayLabel: `$&#123;dataset.label&#125; ($&#123;recommendationCount&#125;)`,\r\n        recommendationCount\r\n      &#125;))\r\n      .sort((a, b) =&gt; b.recommendationCount - a.recommendationCount);\r\n  &#125;);</code></pre>\r\n  </div>\r\n}\r\n@if(chartModel.showingInDialog === 'communicationGoals'){\r\n  <div class=\"communication-goals-content\">\r\n    <h3>Communication Goals</h3>\r\n\r\n    <p>\r\n      Communication goals are exported by the library through\r\n      <code>ChartGenGoals</code>. Each key maps to the internal JSON rule file\r\n      used to generate recommendations.\r\n    </p>\r\n\r\n    <pre><code>import &#123; ChartGenGoals &#125; from 'data-suggestions';</code></pre>\r\n\r\n    <p>Example:</p>\r\n\r\n    <pre><code>goal = ChartGenGoals.HIGHLIGHT_HIGHEST_VALUE;</code></pre>\r\n\r\n    <p>Available goals:</p>\r\n\r\n    <pre><code>ChartGenGoals.COUNT_REPEATED_VALUE\r\nChartGenGoals.COUNT_EXCEEDED_THRESHOLD\r\nChartGenGoals.COUNT_BELOW_THRESHOLD\r\nChartGenGoals.HIGHLIGHT_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\r\nChartGenGoals.HIGHLIGHT_LOWEST_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHER_VALUES\r\nChartGenGoals.HIGHLIGHT_LOWER_VALUES</code></pre>\r\n  </div>\r\n}\r\n</div>\r\n<!--  <p>\r\nEl archivo debe ser un JSON con una propiedad <strong>data</strong> que sea\r\nun array de objetos con <strong>key</strong> y <strong>value</strong>.\r\n</p>\r\n\r\n<pre class=\"json-example\">{{ jsonExample }}</pre>\r\n-->\r\n<ng-template pTemplate=\"footer\">\r\n<p-button\r\n  label=\"Cerrar\"\r\n  icon=\"pi pi-check\"\r\n  (click)=\"showJsonInfoDialog = false\"\r\n></p-button>\r\n</ng-template>\r\n</p-dialog>", styles: [".panel{display:grid;gap:12px;padding:12px;border:1px solid #ddd;border-radius:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.9;margin-left:10px;margin-top:10px;margin-bottom:10px}.table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}.empty{opacity:.7}.dialog-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #ddd}.dialog-tab{border:none;background:transparent;padding:.75rem 1rem;cursor:pointer;font-weight:500;color:#666;border-bottom:3px solid transparent}.dialog-tab:hover{color:#111}.dialog-tab.active{color:#111;font-weight:700;border-bottom-color:#2563eb}.active{color:#5da6ff!important}.json-example{background:#0b1020;color:#e6e6e6;padding:12px;border-radius:8px;overflow:auto;font-size:.9rem;line-height:1.35}.dialog-body{display:block;width:100%}.suggestions-content{display:flex;flex-direction:column;width:100%}.meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}.empty{display:block;width:100%;padding:14px 0;text-align:left;margin:0 0 0 10px}.json-section{display:block;width:100%;margin-bottom:20px}.json-section h4{margin-bottom:8px}.json-example{display:block;width:100%}.code-block{display:block;white-space:pre-wrap;word-break:break-word}:host ::ng-deep .p-dialog-content{overflow:auto}.dialog-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.body{min-height:28rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DataSuggestionsBarChartComponent, selector: "lib-data-suggestions-bar-chart", inputs: ["title", "labels", "values", "orientation", "maxValue", "stepNumber", "auxiliarLines", "opacity", "sortAscending", "showLabels", "colorPalette", "barDistance", "barBorderRecommendation", "hover", "heightPx", "minHeightPx", "maxHeightPx", "minWidthPx", "maxWidthPx", "barSizePx"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DataSuggestionsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataSuggestionsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-suggestions-table', standalone: true, imports: [CommonModule, DataSuggestionsBarChartComponent, ButtonModule, DialogModule], template: "<section class=\"panel\">\r\n  <header class=\"header\">\r\n    <span>Applied suggestions: {{ resultsLength }}</span>\r\n    <!-- <button type=\"button\" (click)=\"generate()\" [disabled]=\"!dataset?.length || !goal\">\r\n      Analyze\r\n    </button> -->\r\n      <p-button\r\n      icon=\"pi pi-info-circle\"\r\n      title=\"Info\"\r\n      (click)=\"showJsonInfoDialog = true\"\r\n      styleClass=\"p-button-text\"\r\n      ></p-button>\r\n  </header>\r\n\r\n \r\n  @if (showGraph) {\r\n    <lib-data-suggestions-bar-chart\r\n      [title]=\"'Recommendations'\"\r\n      [labels]=\"this.chartModel.chartLabels\"\r\n      [values]=\"this.chartModel.chartValues\"\r\n      [orientation]=\"this.chartModel.orientation\"\r\n      [maxValue]=\"this.chartModel.incrementoMaximo\"\r\n      [stepNumber]=\"this.chartModel.numeroPasos\"\r\n      [auxiliarLines]=\"this.chartModel.auxiliarLines\"\r\n      [heightPx]=\"320\"\r\n      [opacity]=\"this.chartModel.opacity\"\r\n      [sortAscending]=\"this.chartModel.ordered\"\r\n      [showLabels]=\"this.chartModel.labels\"\r\n      [barDistance] = \"this.chartModel.separation\"\r\n      [colorPalette]=\"this.chartModel.colorPalette\"\r\n      [barBorderRecommendation]=\"this.chartModel.borderColor\"\r\n      [hover]=\"this.chartModel.hoverRec\"\r\n    >\r\n    </lib-data-suggestions-bar-chart>\r\n \r\n  }\r\n \r\n</section>\r\n\r\n<p-dialog\r\nheader=\"Info\"\r\n[(visible)]=\"showJsonInfoDialog\"\r\n[modal]=\"true\"\r\n[dismissableMask]=\"true\"\r\n[style]=\"{ width: '52rem' }\"\r\n>\r\n\r\n<div class=\"dialog-tabs\">\r\n  <button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'suggestions'\"\r\n(click)=\"chartModel.showingInDialog = 'suggestions'\"\r\n>\r\nSuggestions\r\n</button>\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'data'\"\r\n(click)=\"chartModel.showingInDialog = 'data'\"\r\n>\r\nExpected data format\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'variables'\"\r\n(click)=\"chartModel.showingInDialog = 'variables'\"\r\n>\r\nVariables overview\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'readme'\"\r\n(click)=\"chartModel.showingInDialog = 'readme'\"\r\n>\r\nHow to use the library\r\n</button>\r\n<button\r\n  type=\"button\"\r\n  class=\"dialog-tab\"\r\n  [class.active]=\"chartModel.showingInDialog === 'communicationGoals'\"\r\n  (click)=\"chartModel.showingInDialog = 'communicationGoals'\"\r\n>\r\nCommunication Goals\r\n</button>\r\n</div>\r\n<div class=\"grid body\">\r\n  @if(chartModel.showingInDialog === 'suggestions'){\r\n    <ng-container *ngIf=\"result$ | async as result\">\r\n      <div class=\"suggestions-content\">\r\n  \r\n        <div class=\"meta\">\r\n          <span><strong>Size:</strong> {{ result.dataSize }}</span>\r\n          <span><strong>Variability:</strong> {{ result.dataVariability }}</span>\r\n          <span><strong>Suggested chart:</strong> {{ result.suggestedGraph }}</span>\r\n        </div>\r\n  \r\n        @if(result.rules?.length){\r\n          <table class=\"table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Index</th>\r\n                <th>Visual variable</th>\r\n                <th>Recommendation</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let r of result.rules\">\r\n                <td>{{ r.index }}</td>\r\n                <td>{{ r.visualVariable }}</td>\r\n                <td>{{ r.recommendation }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        } @else {\r\n          <p class=\"empty\">\r\n            There are no suggestions for this combination.\r\n          </p>\r\n        }\r\n  \r\n      </div>\r\n    </ng-container>\r\n  }\r\n@if(chartModel.showingInDialog === 'data'){\r\n<p>\r\n  The library accepts multiple JSON structures and automatically converts them \r\n    into the internal format required to generate the chart.\r\n</p>\r\n\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 1: Array of objects</h4>\r\n    <pre class=\"json-example\">{{ jsonExample1 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 2: Key-value dictionary</h4>\r\n    <pre class=\"json-example\">{{ jsonExample2 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 3: Column-oriented structure</h4>\r\n    <pre class=\"json-example\">{{ jsonExample3 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 4: Array of tuples</h4>\r\n    <pre class=\"json-example\">{{ jsonExample4 }}</pre>\r\n  </div>\r\n\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'variables'){\r\n<img\r\nsrc=\"assets/img/ejemploVariables.jpeg\"\r\nalt=\"Summary of recommended configurations\"\r\nstyle=\"width: 400px; margin-left: 120px;\"\r\n/>\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'readme'){\r\n  <div class=\"info-section\" style=\"margin-left: 10px;\">\r\n    <h3>Quick Start</h3>\r\n  \r\n    <p>\r\n      Install the library from the NPM registry:\r\n    </p>\r\n  \r\n    <pre><code>npm install data-suggestions</code></pre>\r\n  \r\n    <p>\r\n      Import the component into your Angular application and provide a dataset\r\n      together with a communication goal. The library will automatically analyze\r\n      the data and generate visualization recommendations.\r\n    </p>\r\n  \r\n    <p>\r\n      For detailed installation instructions, supported data formats,\r\n      configuration options, examples, and API documentation, please refer to\r\n      the project's README file.\r\n    </p>\r\n  </div>\r\n  \r\n}\r\n@if(chartModel.showingInDialog === 'communicationGoals'){\r\n  <div class=\"communication-goals-content\" style=\"margin-left: 10px;\">\r\n\r\n\r\n    <p>\r\n      Communication goals define the analytical objective that the library\r\n      should apply when generating visualization recommendations.\r\n    </p>\r\n\r\n    <p>\r\n      The available communication goals can be retrieved directly through the\r\n      <code>CommunicationGoalsService</code>.\r\n    </p>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Get communication goals with recommendation counts</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalsServiceExample\"></pre>\r\n    </div>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Example response</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalsResponseExample\"></pre>\r\n    </div>\r\n\r\n    <p>\r\n      The <code>json</code> property contains the value that must be passed to\r\n      the <code>communicationGoal</code> parameter.\r\n    </p>\r\n\r\n    <div class=\"json-section\">\r\n      <h4>Usage example</h4>\r\n      <pre class=\"json-example\" [textContent]=\"communicationGoalUsageExample\"></pre>\r\n    </div>\r\n\r\n  </div>\r\n}\r\n</div>\r\n<!--  <p>\r\nEl archivo debe ser un JSON con una propiedad <strong>data</strong> que sea\r\nun array de objetos con <strong>key</strong> y <strong>value</strong>.\r\n</p>\r\n\r\n<pre class=\"json-example\">{{ jsonExample }}</pre>\r\n-->\r\n<ng-template pTemplate=\"footer\">\r\n<p-button\r\n  label=\"Cerrar\"\r\n  icon=\"pi pi-check\"\r\n  (click)=\"showJsonInfoDialog = false\"\r\n></p-button>\r\n</ng-template>\r\n</p-dialog>", styles: [".panel{display:grid;gap:12px;padding:12px;border:1px solid #ddd;border-radius:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.9;margin-left:10px;margin-top:10px;margin-bottom:10px}.table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}.empty{opacity:.7}.dialog-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #ddd}.dialog-tab{border:none;background:transparent;padding:.75rem 1rem;cursor:pointer;font-weight:500;color:#666;border-bottom:3px solid transparent}.dialog-tab:hover{color:#111}.dialog-tab.active{color:#111;font-weight:700;border-bottom-color:#2563eb}.active{color:#5da6ff!important}.json-example{background:#0b1020;color:#e6e6e6;padding:12px;border-radius:8px;overflow:auto;font-size:.9rem;line-height:1.35}.dialog-body{display:block;width:100%}.suggestions-content{display:flex;flex-direction:column;width:100%}.meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}.empty{display:block;width:100%;padding:14px 0;text-align:left;margin:0 0 0 10px}.json-section{display:block;width:100%;margin-bottom:20px}.json-section h4{margin-bottom:8px}.json-example{display:block;width:100%}.code-block{display:block;white-space:pre-wrap;word-break:break-word}\n"] }]
+            args: [{ selector: 'chart-gen', standalone: true, imports: [CommonModule, DataSuggestionsBarChartComponent, ButtonModule, DialogModule], template: "<section class=\"panel\">\r\n  <header class=\"header\">\r\n    <span>Applied suggestions abc: {{ resultsLength }}</span>\r\n    <!-- <button type=\"button\" (click)=\"generate()\" [disabled]=\"!dataset?.length || !goal\">\r\n      Analyze\r\n    </button> -->\r\n      <p-button\r\n      icon=\"pi pi-info-circle\"\r\n      title=\"Info\"\r\n      (click)=\"showJsonInfoDialog = true\"\r\n      styleClass=\"p-button-text\"\r\n      ></p-button>\r\n  </header>\r\n\r\n \r\n  @if (showGraph) {\r\n    <lib-data-suggestions-bar-chart\r\n      [title]=\"'Recommendations'\"\r\n      [labels]=\"this.chartModel.chartLabels\"\r\n      [values]=\"this.chartModel.chartValues\"\r\n      [orientation]=\"this.chartModel.orientation\"\r\n      [maxValue]=\"this.chartModel.incrementoMaximo\"\r\n      [stepNumber]=\"this.chartModel.numeroPasos\"\r\n      [auxiliarLines]=\"this.chartModel.auxiliarLines\"\r\n      [heightPx]=\"320\"\r\n      [opacity]=\"this.chartModel.opacity\"\r\n      [sortAscending]=\"this.chartModel.ordered\"\r\n      [showLabels]=\"this.chartModel.labels\"\r\n      [barDistance] = \"this.chartModel.separation\"\r\n      [colorPalette]=\"this.chartModel.colorPalette\"\r\n      [barBorderRecommendation]=\"this.chartModel.borderColor\"\r\n      [hover]=\"this.chartModel.hoverRec\"\r\n    >\r\n    </lib-data-suggestions-bar-chart>\r\n \r\n  }\r\n \r\n</section>\r\n\r\n<p-dialog\r\nheader=\"Info\"\r\n[(visible)]=\"showJsonInfoDialog\"\r\n[modal]=\"true\"\r\n[dismissableMask]=\"true\"\r\n[style]=\"{ width: '60rem', height: '42rem' }\"\r\n[contentStyle]=\"{ height: '34rem', overflow: 'auto' }\"\r\n>\r\n\r\n<div class=\"dialog-tabs\">\r\n  <button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'suggestions'\"\r\n(click)=\"chartModel.showingInDialog = 'suggestions'\"\r\n>\r\nSuggestions\r\n</button>\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'data'\"\r\n(click)=\"chartModel.showingInDialog = 'data'\"\r\n>\r\nExpected data format\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'variables'\"\r\n(click)=\"chartModel.showingInDialog = 'variables'\"\r\n>\r\nVariables overview\r\n</button>\r\n\r\n<button\r\ntype=\"button\"\r\nclass=\"dialog-tab\"\r\n[class.active]=\"chartModel.showingInDialog === 'readme'\"\r\n(click)=\"chartModel.showingInDialog = 'readme'\"\r\n>\r\nHow to use the library\r\n</button>\r\n<button\r\n  type=\"button\"\r\n  class=\"dialog-tab\"\r\n  [class.active]=\"chartModel.showingInDialog === 'communicationGoals'\"\r\n  (click)=\"chartModel.showingInDialog = 'communicationGoals'\"\r\n>\r\nCommunication Goals\r\n</button>\r\n</div>\r\n<div class=\"grid body\">\r\n  @if(chartModel.showingInDialog === 'suggestions'){\r\n    <ng-container *ngIf=\"result$ | async as result\">\r\n      <div class=\"suggestions-content\">\r\n  \r\n        <div class=\"meta\">\r\n          <span><strong>Size:</strong> {{ result.dataSize }}</span>\r\n          <span><strong>Variability:</strong> {{ result.dataVariability }}</span>\r\n          <span><strong>Suggested chart:</strong> {{ result.suggestedGraph }}</span>\r\n        </div>\r\n  \r\n        @if(result.rules?.length){\r\n          <table class=\"table\">\r\n            <thead>\r\n              <tr>\r\n                <th>Index</th>\r\n                <th>Visual variable</th>\r\n                <th>Recommendation</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let r of result.rules\">\r\n                <td>{{ r.index }}</td>\r\n                <td>{{ r.visualVariable }}</td>\r\n                <td>{{ r.recommendation }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        } @else {\r\n          <p class=\"empty\">\r\n            There are no suggestions for this combination.\r\n          </p>\r\n        }\r\n  \r\n      </div>\r\n    </ng-container>\r\n  }\r\n@if(chartModel.showingInDialog === 'data'){\r\n<p>\r\n  The library accepts multiple JSON structures and automatically converts them \r\n    into the internal format required to generate the chart.\r\n</p>\r\n\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 1: Array of objects</h4>\r\n    <pre class=\"json-example\">{{ jsonExample1 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 2: Key-value dictionary</h4>\r\n    <pre class=\"json-example\">{{ jsonExample2 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 3: Column-oriented structure</h4>\r\n    <pre class=\"json-example\">{{ jsonExample3 }}</pre>\r\n  </div>\r\n\r\n  <div class=\"json-section\">\r\n    <h4>Option 4: Array of tuples</h4>\r\n    <pre class=\"json-example\">{{ jsonExample4 }}</pre>\r\n  </div>\r\n\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'variables'){\r\n<img\r\nsrc=\"assets/img/ejemploVariables.jpeg\"\r\nalt=\"Summary of recommended configurations\"\r\nstyle=\"width: 400px; margin-left: 120px;\"\r\n/>\r\n\r\n}\r\n@if(chartModel.showingInDialog === 'readme'){\r\n  <div class=\"info-section\">\r\n    <h3>Quick Start</h3>\r\n\r\n    <p>Install the library:</p>\r\n\r\n    <pre><code>npm install data-suggestions</code></pre>\r\n\r\n    <p>Import the component, service and communication goal constants:</p>\r\n\r\n    <pre><code>import &#123;\r\n  DataSuggestionsTableComponent,\r\n  DataSuggestionsService,\r\n  ChartGenGoals\r\n&#125; from 'data-suggestions';</code></pre>\r\n\r\n    <p>Add the component to the Angular standalone imports:</p>\r\n\r\n    <pre><code>@Component(&#123;\r\n  standalone: true,\r\n  imports: [\r\n    DataSuggestionsTableComponent\r\n  ]\r\n&#125;)</code></pre>\r\n\r\n    <p>Use the component in your template:</p>\r\n\r\n    <pre><code>&lt;chart-gen\r\n  [dataset]=\"dataset\"\r\n  [goal]=\"ChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\"&gt;\r\n&lt;/chart-gen&gt;</code></pre>\r\n\r\n    <p>\r\n      The <code>dataset</code> input contains the data to be analyzed. The\r\n      <code>goal</code> input defines the communication objective and must use\r\n      one of the values exported by <code>ChartGenGoals</code>.\r\n    </p>\r\n\r\n    <h4>Supported data formats</h4>\r\n\r\n    <p>The library accepts several JSON structures:</p>\r\n\r\n    <pre><code>[\r\n  &#123; \"key\": \"Monday\", \"value\": 30 &#125;,\r\n  &#123; \"key\": \"Tuesday\", \"value\": 42 &#125;\r\n]</code></pre>\r\n\r\n    <pre><code>&#123;\r\n  \"Monday\": 30,\r\n  \"Tuesday\": 42\r\n&#125;</code></pre>\r\n\r\n    <pre><code>&#123;\r\n  \"labels\": [\"Monday\", \"Tuesday\"],\r\n  \"values\": [30, 42]\r\n&#125;</code></pre>\r\n\r\n    <pre><code>[\r\n  [\"Monday\", 30],\r\n  [\"Tuesday\", 42]\r\n]</code></pre>\r\n\r\n    <h4>Available communication goals</h4>\r\n\r\n    <pre><code>ChartGenGoals.COUNT_REPEATED_VALUE\r\nChartGenGoals.COUNT_EXCEEDED_THRESHOLD\r\nChartGenGoals.COUNT_BELOW_THRESHOLD\r\nChartGenGoals.HIGHLIGHT_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\r\nChartGenGoals.HIGHLIGHT_LOWEST_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHER_VALUES\r\nChartGenGoals.HIGHLIGHT_LOWER_VALUES</code></pre>\r\n\r\n    <h4>Recommendation counts</h4>\r\n\r\n    <p>\r\n      The library also provides a service to calculate how many recommendations\r\n      would be applied to each dataset for a selected communication goal.\r\n    </p>\r\n\r\n    <pre><code>this.dataSuggestionsService\r\n  .getRecommendationCountsForDatasets(datasets, goal)\r\n  .subscribe(results =&gt; &#123;\r\n    this.datasetOptions = results\r\n      .map((&#123; dataset, recommendationCount &#125;) =&gt; (&#123;\r\n        ...dataset,\r\n        displayLabel: `$&#123;dataset.label&#125; ($&#123;recommendationCount&#125;)`,\r\n        recommendationCount\r\n      &#125;))\r\n      .sort((a, b) =&gt; b.recommendationCount - a.recommendationCount);\r\n  &#125;);</code></pre>\r\n  </div>\r\n}\r\n@if(chartModel.showingInDialog === 'communicationGoals'){\r\n  <div class=\"communication-goals-content\">\r\n    <h3>Communication Goals</h3>\r\n\r\n    <p>\r\n      Communication goals are exported by the library through\r\n      <code>ChartGenGoals</code>. Each key maps to the internal JSON rule file\r\n      used to generate recommendations.\r\n    </p>\r\n\r\n    <pre><code>import &#123; ChartGenGoals &#125; from 'data-suggestions';</code></pre>\r\n\r\n    <p>Example:</p>\r\n\r\n    <pre><code>goal = ChartGenGoals.HIGHLIGHT_HIGHEST_VALUE;</code></pre>\r\n\r\n    <p>Available goals:</p>\r\n\r\n    <pre><code>ChartGenGoals.COUNT_REPEATED_VALUE\r\nChartGenGoals.COUNT_EXCEEDED_THRESHOLD\r\nChartGenGoals.COUNT_BELOW_THRESHOLD\r\nChartGenGoals.HIGHLIGHT_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHEST_VALUE\r\nChartGenGoals.HIGHLIGHT_LOWEST_VALUE\r\nChartGenGoals.HIGHLIGHT_HIGHER_VALUES\r\nChartGenGoals.HIGHLIGHT_LOWER_VALUES</code></pre>\r\n  </div>\r\n}\r\n</div>\r\n<!--  <p>\r\nEl archivo debe ser un JSON con una propiedad <strong>data</strong> que sea\r\nun array de objetos con <strong>key</strong> y <strong>value</strong>.\r\n</p>\r\n\r\n<pre class=\"json-example\">{{ jsonExample }}</pre>\r\n-->\r\n<ng-template pTemplate=\"footer\">\r\n<p-button\r\n  label=\"Cerrar\"\r\n  icon=\"pi pi-check\"\r\n  (click)=\"showJsonInfoDialog = false\"\r\n></p-button>\r\n</ng-template>\r\n</p-dialog>", styles: [".panel{display:grid;gap:12px;padding:12px;border:1px solid #ddd;border-radius:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.9;margin-left:10px;margin-top:10px;margin-bottom:10px}.table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}.empty{opacity:.7}.dialog-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #ddd}.dialog-tab{border:none;background:transparent;padding:.75rem 1rem;cursor:pointer;font-weight:500;color:#666;border-bottom:3px solid transparent}.dialog-tab:hover{color:#111}.dialog-tab.active{color:#111;font-weight:700;border-bottom-color:#2563eb}.active{color:#5da6ff!important}.json-example{background:#0b1020;color:#e6e6e6;padding:12px;border-radius:8px;overflow:auto;font-size:.9rem;line-height:1.35}.dialog-body{display:block;width:100%}.suggestions-content{display:flex;flex-direction:column;width:100%}.meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}.empty{display:block;width:100%;padding:14px 0;text-align:left;margin:0 0 0 10px}.json-section{display:block;width:100%;margin-bottom:20px}.json-section h4{margin-bottom:8px}.json-example{display:block;width:100%}.code-block{display:block;white-space:pre-wrap;word-break:break-word}:host ::ng-deep .p-dialog-content{overflow:auto}.dialog-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.body{min-height:28rem}\n"] }]
         }], ctorParameters: () => [{ type: DataSuggestionsService }, { type: chartsModel }], propDecorators: { dataset: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1181,5 +1105,5 @@ function getMaxValue(values) {
  * Generated bundle index. Do not edit.
  */
 
-export { COMMUNICATION_GOAL_DEFINITIONS, CommunicationGoalsService, CommunicationRulesService, DataSuggestionsBarChartComponent, DataSuggestionsService, DataSuggestionsTableComponent, VISUAL_VARIABLE_INDEX_BY_NAME, definitionsToBaseOptions, getConfiguredVisualVariableIndex, normalizeSampleSizeLabel };
+export { ChartGenGoals, DataSuggestionsBarChartComponent, DataSuggestionsService, DataSuggestionsTableComponent, VISUAL_VARIABLE_INDEX_BY_NAME, getConfiguredVisualVariableIndex };
 //# sourceMappingURL=data-suggestions.mjs.map