@trismegisto/charts 2.0.1 → 2.1.0

package/README.md

@@ -80,7 +80,9 @@ ativo) e `[(showTable)]`.
 **`hm-chart` (`HmChartComponent`)** é a saída de emergência para o que os tipados não cobrem: recebe a opção
 completa do motor (`option: HmChartOption`, tipada pelos `Hm*SeriesOption`), `label` e `points` (pontos
 navegáveis pelas setas). Ele cuida de ciclo de vida, tema, idioma, movimento reduzido e alto contraste, mas
-**não** monta resumo nem tabela: prefira sempre um tipado.
+**não** monta resumo nem tabela: prefira sempre um tipado. O motor grava o retorno de um `tooltip.formatter` com
+`innerHTML`: num `formatter` próprio, passe todo texto vindo de dados por `escapeHtml` (`@trismegisto/primitives`),
+como os tipados fazem.
 
 ## Regras que o app precisa saber
 

package/fesm2022/trismegisto-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, computed, Injectable, input, model, Directive, ElementRef, signal, afterNextRender, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { HermesI18nService } from '@trismegisto/angular/i18n';
-import { mergeCatalog, formatMessage, pluralMessage } from '@trismegisto/primitives';
+import { mergeCatalog, formatMessage, pluralMessage, escapeHtml } from '@trismegisto/primitives';
 
 const CHARTS_MESSAGES_EN = {
     meta: { locale: 'en-US' },
@@ -403,6 +403,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             type: Directive
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }, { type: i0.Output, args: ["showTableChange"] }] } });
 // ---- peças de opção compartilhadas -------------------------------------------------------------
+/**
+ * Tooltip comum. O motor grava a saída de um `formatter` com `innerHTML`: todo gráfico que define o
+ * próprio `formatter` devolve `escapeHtml(...)` (`@trismegisto/primitives`) do texto montado com nomes
+ * vindos dos dados. O formatter padrão do motor já escapa.
+ */
 function tooltipOption(ctx, trigger) {
     return {
         show: ctx.tooltip,
@@ -75828,7 +75833,7 @@ class HmHeatmapChartComponent extends HmChartBase {
                     ...tooltipOption(ctx, 'item'),
                     formatter: (p) => {
                         const value = p.value;
-                        return `${ys[value[1]]} · ${xs[value[0]]}: ${ctx.num(value[2])}`;
+                        return escapeHtml(`${ys[value[1]]} · ${xs[value[0]]}: ${ctx.num(value[2])}`);
                     },
                 },
                 xAxis: { type: 'category', data: [...xs], splitArea: { show: true } },
@@ -75906,7 +75911,7 @@ class HmCalendarHeatmapComponent extends HmChartBase {
                     ...tooltipOption(ctx, 'item'),
                     formatter: (p) => {
                         const [day, value] = p.value;
-                        return `${fmtDate(day)}: ${ctx.num(value)}`;
+                        return escapeHtml(`${fmtDate(day)}: ${ctx.num(value)}`);
                     },
                 },
                 visualMap: {
@@ -75992,7 +75997,7 @@ class HmScatterChartComponent extends HmChartBase {
                     formatter: (p) => {
                         const { seriesIndex, dataIndex } = p;
                         const s = series[seriesIndex];
-                        return describe(s, s.data[dataIndex]);
+                        return escapeHtml(describe(s, s.data[dataIndex]));
                     },
                 },
                 legend: legendOption(ctx, hasLegend),
@@ -76138,7 +76143,7 @@ class HmRadarChartComponent extends HmChartBase {
         const describe = (s) => `${s.name}: ${indicators.map((ind, i) => `${ind.name} ${ctx.num(s.values[i])}`).join(', ')}`;
         return {
             option: {
-                tooltip: { ...tooltipOption(ctx, 'item'), formatter: (p) => describe(series[p.dataIndex]) },
+                tooltip: { ...tooltipOption(ctx, 'item'), formatter: (p) => escapeHtml(describe(series[p.dataIndex])) },
                 legend: legendOption(ctx, series.length > 1),
                 radar: {
                     radius: '64%',
@@ -76317,7 +76322,7 @@ class HmBoxplotChartComponent extends HmChartBase {
                     ...tooltipOption(ctx, 'item'),
                     formatter: (p) => {
                         const g = groups[p.dataIndex];
-                        return describe(g.name, g.s);
+                        return escapeHtml(describe(g.name, g.s));
                     },
                 },
                 xAxis: horizontal ? valueAxis : categoryAxis,