@antv/gpt-vis 1.0.1 → 1.0.2

package/dist/esm/vis/funnel/index.js

@@ -94,12 +94,10 @@ export var Funnel = function Funnel(options) {
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
-      _config$locale = config.locale,
-      renderLocale = _config$locale === void 0 ? locale : _config$locale,
       conversionRateLabel = config.conversionRateLabel,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
-    var chartLocale = resolveChartLocale(renderLocale);
+    var chartLocale = resolveChartLocale(locale);
     var labels = FUNNEL_LABELS[chartLocale];
     var numberFormatter = new Intl.NumberFormat(chartLocale);
     var stageConversionRateLabel = conversionRateLabel !== null && conversionRateLabel !== void 0 ? conversionRateLabel : labels.conversionRate;
@@ -117,6 +115,7 @@ export var Funnel = function Funnel(options) {
     var formatValue = function formatValue(value) {
       return Number.isFinite(value) ? numberFormatter.format(value) : '—';
     };
+    var isInverted = data.length > 1 && data[0].value < data[data.length - 1].value;
     var metricsByCategory = new Map(data.map(function (item, index) {
       var previous = data[index - 1];
       return [item.category, {
@@ -208,14 +207,14 @@ export var Funnel = function Funnel(options) {
             lineHeight: 17
           }
         }, {
-          text: function text(_d, index) {
-            return index === 0 ? '' : '———';
+          text: function text(_d, index, items) {
+            return (isInverted ? index < items.length - 1 : index > 0) ? '———' : '';
           },
-          position: 'top-right',
+          position: isInverted ? 'bottom-right' : 'top-right',
           fill: tokens.textSecondary,
           fillOpacity: 0.72,
-          dx: 18,
-          dy: -6,
+          dx: 8,
+          dy: isInverted ? 6 : -6,
           style: {
             fontFamily: CHART_FONT_FAMILY,
             fontSize: 8,
@@ -224,13 +223,15 @@ export var Funnel = function Funnel(options) {
           }
         }, {
           text: function text(_d, index, items) {
-            return index === 0 ? '' : formatMetricLabel(stageConversionRateLabel, formatConversionRate(items[index - 1].value, items[index].value), chartLocale);
+            var from = isInverted ? items[index] : items[index - 1];
+            var to = isInverted ? items[index + 1] : items[index];
+            return from && to ? formatMetricLabel(stageConversionRateLabel, formatConversionRate(from.value, to.value), chartLocale) : '';
           },
-          position: 'top-right',
+          position: isInverted ? 'bottom-right' : 'top-right',
           textAlign: 'left',
           textBaseline: 'middle',
           fill: tokens.textPrimary,
-          dx: 44,
+          dx: 26,
           style: {
             fontFamily: CHART_FONT_FAMILY,
             fontSize: 11,
@@ -257,10 +258,10 @@ export var Funnel = function Funnel(options) {
       }].concat(_toConsumableArray(data.length > 1 ? [{
         type: 'connector',
         data: [{
-          startX: data[0].category,
-          startY: data[data.length - 1].category,
+          startX: isInverted ? data[data.length - 1].category : data[0].category,
+          startY: isInverted ? data[0].category : data[data.length - 1].category,
           endX: 0,
-          endY: (data[0].value - data[data.length - 1].value) / 2
+          endY: Math.abs(data[0].value - data[data.length - 1].value) / 2
         }],
         encode: {
           x: 'startX',

package/dist/esm/vis/table/index.js

@@ -1,4 +1,5 @@
 import { measureText } from 'measury';
+import { escapeHtml } from "../../util/html";
 
 /**
  * TableConfig defines the configuration for rendering the table.
@@ -14,7 +15,7 @@ var CELL_PADDING = 16; // 8px * 2
 var MIN_WIDTH_MULTIPLIER = 1.1;
 
 // CSS styles for the table component
-var TABLE_STYLES = "\n  .".concat(SCOPE_ID, " {\n    font-family: ").concat(FONT_FAMILY, ";\n    overflow: auto;\n    height: 100%;\n    padding: 16px;\n  }\n\n  .").concat(SCOPE_ID, " .table-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: #1d2129;\n  }\n\n  .").concat(SCOPE_ID, " table {\n    border-collapse: separate;\n    border-spacing: 0;\n    background: #fff;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .").concat(SCOPE_ID, " th,\n  .").concat(SCOPE_ID, " td {\n    border-bottom: 1px solid #f0f0f0;\n    padding: 8px;\n    text-align: left;\n    font-size: 14px;\n    color: #333;\n    white-space: nowrap;\n  }\n\n  .").concat(SCOPE_ID, " th {\n    background: #f5f5f5;\n    font-weight: 600;\n    color: #000000e0;\n    position: relative;\n  }\n\n  .").concat(SCOPE_ID, " th:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 25%;\n    right: 0;\n    width: 1px;\n    height: 50%;\n    background: #e0e0e0;\n  }\n\n  .").concat(SCOPE_ID, " tr {\n    transition: background 0.2s;\n  }\n\n  .").concat(SCOPE_ID, " tbody tr:hover {\n    background: #f5f5f5;\n    cursor: pointer;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] {\n    background: #000;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] .table-title {\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] table {\n    background: #141414;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th,\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] td {\n    border-bottom: 1px solid #303030;\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th {\n    background: #1f1f1f;\n    color: #ffffffa6;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th:not(:last-child)::after {\n    background: #303030;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] tbody tr:hover {\n    background: #1f1f1f;\n  }\n");
+var TABLE_STYLES = "\n  .".concat(SCOPE_ID, " {\n    font-family: ").concat(FONT_FAMILY, ";\n    overflow: auto;\n    height: 100%;\n    padding: 16px;\n  }\n\n  .").concat(SCOPE_ID, " .table-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: #1d2129;\n  }\n\n  .").concat(SCOPE_ID, " .table-empty {\n    padding: 20px;\n    text-align: center;\n    color: #999;\n  }\n\n  .").concat(SCOPE_ID, " table {\n    border-collapse: separate;\n    border-spacing: 0;\n    background: #fff;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .").concat(SCOPE_ID, " th,\n  .").concat(SCOPE_ID, " td {\n    border-bottom: 1px solid #f0f0f0;\n    padding: 8px;\n    text-align: left;\n    font-size: 14px;\n    color: #333;\n    white-space: nowrap;\n  }\n\n  .").concat(SCOPE_ID, " th {\n    background: #f5f5f5;\n    font-weight: 600;\n    color: #000000e0;\n    position: relative;\n  }\n\n  .").concat(SCOPE_ID, " th:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 25%;\n    right: 0;\n    width: 1px;\n    height: 50%;\n    background: #e0e0e0;\n  }\n\n  .").concat(SCOPE_ID, " tr {\n    transition: background 0.2s;\n  }\n\n  .").concat(SCOPE_ID, " tbody tr:hover {\n    background: #f5f5f5;\n    cursor: pointer;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] {\n    background: #000;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] .table-title {\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] table {\n    background: #141414;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th,\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] td {\n    border-bottom: 1px solid #303030;\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th {\n    background: #1f1f1f;\n    color: #ffffffa6;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th:not(:last-child)::after {\n    background: #303030;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] tbody tr:hover {\n    background: #1f1f1f;\n  }\n");
 
 /**
  * Calculate the minimum width needed for a table based on its data.
@@ -122,10 +123,11 @@ export var Table = function Table(options) {
     if (theme === 'dark') {
       tableWrapper.setAttribute('data-theme', 'dark');
     }
+    var titleHTML = title ? "<div class=\"table-title\">".concat(escapeHtml(title), "</div>") : '';
 
     // Handle empty data case
     if (data.length === 0) {
-      tableWrapper.innerHTML = "\n        ".concat(title ? "<div class=\"table-title\">".concat(title, "</div>") : '', "\n        <div style=\"padding: 20px; text-align: center; color: #999;\">No data available</div>\n      ");
+      tableWrapper.innerHTML = "\n        ".concat(titleHTML, "\n        <div class=\"table-empty\">No data available</div>\n      ");
       container.appendChild(tableWrapper);
       return;
     }
@@ -137,17 +139,15 @@ export var Table = function Table(options) {
     var minWidth = calculateTableMinWidth(data, columns);
     // Ensure a minimum width for columns
     minWidth = Math.max(minWidth, columns.length * 100);
-
-    // Build table HTML using template strings
-    var headerHTML = columns.map(function (col) {
-      return "<th>".concat(col, "</th>");
+    var headerHTML = columns.map(function (column) {
+      return "<th>".concat(escapeHtml(column), "</th>");
     }).join('');
     var bodyHTML = data.map(function (row) {
-      return "<tr>".concat(columns.map(function (col) {
-        return "<td>".concat(row[col] != null ? row[col] : '', "</td>");
+      return "<tr>".concat(columns.map(function (column) {
+        return "<td>".concat(escapeHtml(row[column]), "</td>");
       }).join(''), "</tr>");
     }).join('');
-    tableWrapper.innerHTML = "\n      ".concat(title ? "<div class=\"table-title\">".concat(title, "</div>") : '', "\n      <table style=\"min-width: ").concat(minWidth, "px;\">\n        <thead><tr>").concat(headerHTML, "</tr></thead>\n        <tbody>").concat(bodyHTML, "</tbody>\n      </table>\n    ");
+    tableWrapper.innerHTML = "\n      ".concat(titleHTML, "\n      <table style=\"min-width: ").concat(minWidth, "px;\">\n        <thead><tr>").concat(headerHTML, "</tr></thead>\n        <tbody>").concat(bodyHTML, "</tbody>\n      </table>\n    ");
     container.appendChild(tableWrapper);
   };