@smallwebco/tinypivot-react 1.0.52 → 1.0.53

package/dist/index.js

@@ -198,6 +198,7 @@ import {
   getChartGuidance,
   isChartConfigValid,
   processChartData,
+  processChartDataForHeatmap,
   processChartDataForPie,
   processChartDataForScatter
 } from "@smallwebco/tinypivot-core";
@@ -227,6 +228,76 @@ function ChartBuilder({
     () => CHART_TYPES.find((ct) => ct.type === chartConfig.type),
     [chartConfig.type]
   );
+  const isScatterType = useMemo2(
+    () => ["scatter", "bubble"].includes(chartConfig.type),
+    [chartConfig.type]
+  );
+  const isHeatmapType = useMemo2(
+    () => chartConfig.type === "heatmap",
+    [chartConfig.type]
+  );
+  const zoneLabels = useMemo2(() => {
+    const type = chartConfig.type;
+    switch (type) {
+      case "scatter":
+      case "bubble":
+        return {
+          xAxis: "X-Axis (measure)",
+          xAxisPlaceholder: "Drop a measure",
+          yAxis: "Y-Axis (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Color by (optional)",
+          seriesPlaceholder: "Group points by dimension",
+          showSize: type === "bubble",
+          showSeries: true
+        };
+      case "heatmap":
+        return {
+          xAxis: "X-Axis (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Y-Axis (dimension)",
+          yAxisPlaceholder: "Drop a dimension",
+          series: "Value / Intensity",
+          seriesPlaceholder: "Drop a measure for color intensity",
+          showSize: false,
+          showSeries: true
+        };
+      case "pie":
+      case "donut":
+        return {
+          xAxis: "Slices (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Values (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "",
+          seriesPlaceholder: "",
+          showSize: false,
+          showSeries: false
+        };
+      case "radar":
+        return {
+          xAxis: "Axes (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Values (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Compare by (optional)",
+          seriesPlaceholder: "Group by dimension",
+          showSize: false,
+          showSeries: true
+        };
+      default:
+        return {
+          xAxis: "X-Axis (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Y-Axis (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Color / Series (optional)",
+          seriesPlaceholder: "Group by dimension",
+          showSize: false,
+          showSeries: true
+        };
+    }
+  }, [chartConfig.type]);
   const handleDragStart = useCallback2((field, event) => {
     setDraggingField(field);
     event.dataTransfer?.setData("text/plain", field.field);
@@ -303,15 +374,40 @@ function ChartBuilder({
     onConfigChange?.(newConfig);
   }, [chartConfig, onConfigChange]);
   const updateAggregation = useCallback2((zone, aggregation) => {
-    const field = zone === "yAxis" ? chartConfig.yAxis : chartConfig.sizeField;
+    let field;
+    switch (zone) {
+      case "xAxis":
+        field = chartConfig.xAxis;
+        break;
+      case "yAxis":
+        field = chartConfig.yAxis;
+        break;
+      case "size":
+        field = chartConfig.sizeField;
+        break;
+      case "color":
+        field = chartConfig.colorField;
+        break;
+      default:
+        return;
+    }
     if (!field)
       return;
     const updated = { ...field, aggregation };
     let newConfig = { ...chartConfig };
-    if (zone === "yAxis") {
-      newConfig = { ...newConfig, yAxis: updated };
-    } else if (zone === "size") {
-      newConfig = { ...newConfig, sizeField: updated };
+    switch (zone) {
+      case "xAxis":
+        newConfig = { ...newConfig, xAxis: updated };
+        break;
+      case "yAxis":
+        newConfig = { ...newConfig, yAxis: updated };
+        break;
+      case "size":
+        newConfig = { ...newConfig, sizeField: updated };
+        break;
+      case "color":
+        newConfig = { ...newConfig, colorField: updated };
+        break;
     }
     setChartConfig(newConfig);
     onConfigChange?.(newConfig);
@@ -323,16 +419,20 @@ function ChartBuilder({
       area: "area",
       pie: "pie",
       donut: "donut",
+      radar: "radar",
       scatter: "scatter",
       bubble: "bubble",
-      heatmap: "heatmap",
-      treemap: "bar",
-      // Treemap rendered as bar (compatibility)
-      radar: "radar"
+      heatmap: "heatmap"
     };
     return mapping[type] || "bar";
   }, []);
   const formatValue = useCallback2((val, format, decimals) => {
+    if (val === null || val === void 0)
+      return "";
+    if (typeof val !== "number")
+      return String(val);
+    if (Number.isNaN(val))
+      return "";
     const dec = decimals ?? 0;
     if (format === "percent") {
       return `${val.toFixed(dec)}%`;
@@ -394,7 +494,10 @@ function ChartBuilder({
         enabled: options.showDataLabels ?? false
       },
       tooltip: {
-        theme: isDark ? "dark" : "light"
+        theme: isDark ? "dark" : "light",
+        style: {
+          fontSize: "12px"
+        }
       },
       stroke: {
         curve: "smooth",
@@ -413,7 +516,7 @@ function ChartBuilder({
         }
       };
     }
-    if (config.yAxis && !["pie", "donut", "radar", "treemap"].includes(config.type)) {
+    if (config.yAxis && !["pie", "donut", "radar"].includes(config.type)) {
       baseOptions.yaxis = {
         title: { text: options.yAxisTitle || config.yAxis.label },
         labels: {
@@ -476,11 +579,12 @@ function ChartBuilder({
       return chartData2.series[0]?.data || [];
     }
     if (config.type === "scatter" || config.type === "bubble") {
-      const points = processChartDataForScatter(data, config);
-      return [{
-        name: config.yAxis?.label || "Data",
-        data: points
-      }];
+      const scatterData = processChartDataForScatter(data, config);
+      return scatterData.series;
+    }
+    if (config.type === "heatmap") {
+      const heatmapData = processChartDataForHeatmap(data, config);
+      return heatmapData.series;
     }
     const chartData = processChartData(data, config);
     return chartData.series;
@@ -499,7 +603,7 @@ function ChartBuilder({
   const chartOptionsWithCategories = useMemo2(() => {
     const options = { ...chartOptions };
     const config = chartConfig;
-    if (!["pie", "donut", "scatter", "bubble"].includes(config.type)) {
+    if (!["pie", "donut", "scatter", "bubble", "heatmap"].includes(config.type)) {
       options.xaxis = {
         ...options.xaxis,
         categories: chartLabels
@@ -508,6 +612,46 @@ function ChartBuilder({
     if (config.type === "pie" || config.type === "donut") {
       options.labels = chartLabels;
     }
+    if (config.type === "heatmap") {
+      options.chart = {
+        ...options.chart,
+        type: "heatmap"
+      };
+      options.xaxis = {
+        ...options.xaxis,
+        type: "category"
+      };
+      options.dataLabels = {
+        enabled: true,
+        style: {
+          colors: ["#fff"],
+          fontSize: "10px"
+        },
+        formatter: (val) => {
+          if (val === null || val === void 0)
+            return "";
+          if (typeof val !== "number")
+            return String(val);
+          if (val >= 1e6)
+            return `${(val / 1e6).toFixed(1)}M`;
+          if (val >= 1e3)
+            return `${(val / 1e3).toFixed(0)}K`;
+          return Math.round(val).toLocaleString();
+        }
+      };
+      options.plotOptions = {
+        heatmap: {
+          shadeIntensity: 0.5,
+          radius: 2,
+          enableShades: true,
+          colorScale: {
+            inverse: false
+          }
+        }
+      };
+      options.colors = ["#6366f1"];
+      options.legend = { show: false };
+    }
     return options;
   }, [chartOptions, chartConfig, chartLabels]);
   const getChartIcon = useCallback2((type) => {
@@ -517,10 +661,9 @@ function ChartBuilder({
       area: "M3 17l6-6 4 4 8-8v10H3z",
       pie: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8v8l5.66 5.66C14.28 19.04 13.18 20 12 20z",
       donut: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z",
-      scatter: "M7 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z",
-      bubble: "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-6 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 2c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z",
+      scatter: "M7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-3 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+      bubble: "M7 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5-5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
       heatmap: "M3 3h4v4H3V3zm6 0h4v4H9V3zm6 0h4v4h-4V3zM3 9h4v4H3V9zm6 0h4v4H9V9zm6 0h4v4h-4V9zM3 15h4v4H3v-4zm6 0h4v4H9v-4zm6 0h4v4h-4v-4z",
-      treemap: "M3 3h8v10H3V3zm10 0h8v6h-8V3zM3 15h8v6H3v-6zm10-4h8v10h-8V11z",
       radar: "M12 2L4 6v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V6l-8-4zm0 3.18l6 3v5.09c0 4.08-2.76 7.91-6 9.14V5.18z"
     };
     return icons[type] || icons.bar;
@@ -547,7 +690,8 @@ function ChartBuilder({
         /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-fields-section", children: [
           /* @__PURE__ */ jsxs2("h4", { className: "vpg-chart-fields-title", children: [
             /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M4 6h16M4 12h10M4 18h6" }) }),
-            "Dimensions"
+            "Dimensions",
+            /* @__PURE__ */ jsx2("span", { className: "vpg-chart-fields-hint", children: "(text/date)" })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-fields-list", children: [
             dimensions.map((field) => /* @__PURE__ */ jsxs2(
@@ -570,7 +714,8 @@ function ChartBuilder({
         /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-fields-section", children: [
           /* @__PURE__ */ jsxs2("h4", { className: "vpg-chart-fields-title", children: [
             /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M16 8v8M12 11v5M8 14v2M4 4v16h16" }) }),
-            "Measures"
+            "Measures",
+            /* @__PURE__ */ jsx2("span", { className: "vpg-chart-fields-hint", children: "(numbers)" })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-fields-list", children: [
             measures.map((field) => /* @__PURE__ */ jsxs2(
@@ -593,7 +738,7 @@ function ChartBuilder({
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-config-panel", children: [
         /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: "X-Axis / Category" }),
+          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: zoneLabels.xAxis }),
           /* @__PURE__ */ jsx2(
             "div",
             {
@@ -603,13 +748,22 @@ function ChartBuilder({
               onDrop: (e) => handleDrop("xAxis", e),
               children: chartConfig.xAxis ? /* @__PURE__ */ jsxs2(Fragment, { children: [
                 /* @__PURE__ */ jsx2("span", { className: "vpg-zone-field-name", children: chartConfig.xAxis.label }),
+                isScatterType && chartConfig.xAxis.role === "measure" && /* @__PURE__ */ jsx2(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.xAxis.aggregation || "sum",
+                    onChange: (e) => updateAggregation("xAxis", e.target.value),
+                    children: CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ jsx2("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
                 /* @__PURE__ */ jsx2("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("xAxis"), children: /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: "Drop dimension here" })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: zoneLabels.xAxisPlaceholder })
             }
           )
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: "Y-Axis / Value" }),
+          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: zoneLabels.yAxis }),
           /* @__PURE__ */ jsx2(
             "div",
             {
@@ -619,7 +773,7 @@ function ChartBuilder({
               onDrop: (e) => handleDrop("yAxis", e),
               children: chartConfig.yAxis ? /* @__PURE__ */ jsxs2(Fragment, { children: [
                 /* @__PURE__ */ jsx2("span", { className: "vpg-zone-field-name", children: chartConfig.yAxis.label }),
-                chartConfig.yAxis.role === "measure" && /* @__PURE__ */ jsx2(
+                chartConfig.yAxis.role === "measure" && !isHeatmapType && /* @__PURE__ */ jsx2(
                   "select",
                   {
                     className: "vpg-zone-aggregation",
@@ -629,28 +783,37 @@ function ChartBuilder({
                   }
                 ),
                 /* @__PURE__ */ jsx2("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("yAxis"), children: /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: "Drop measure here" })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: zoneLabels.yAxisPlaceholder })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: "Color / Series (optional)" }),
+        zoneLabels.showSeries && /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: zoneLabels.series }),
           /* @__PURE__ */ jsx2(
             "div",
             {
-              className: `vpg-chart-drop-zone vpg-zone-optional ${dragOverZone === "series" ? "drag-over" : ""} ${chartConfig.seriesField ? "has-field" : ""}`,
-              onDragOver: (e) => handleDragOver("series", e),
+              className: `vpg-chart-drop-zone vpg-zone-optional ${dragOverZone === "series" ? "drag-over" : ""} ${(isHeatmapType ? chartConfig.colorField : chartConfig.seriesField) ? "has-field" : ""}`,
+              onDragOver: (e) => handleDragOver(isHeatmapType ? "color" : "series", e),
               onDragLeave: handleDragLeave,
-              onDrop: (e) => handleDrop("series", e),
-              children: chartConfig.seriesField ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                /* @__PURE__ */ jsx2("span", { className: "vpg-zone-field-name", children: chartConfig.seriesField.label }),
-                /* @__PURE__ */ jsx2("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("series"), children: /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: "Group by dimension" })
+              onDrop: (e) => handleDrop(isHeatmapType ? "color" : "series", e),
+              children: (isHeatmapType ? chartConfig.colorField : chartConfig.seriesField) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx2("span", { className: "vpg-zone-field-name", children: isHeatmapType ? chartConfig.colorField?.label : chartConfig.seriesField?.label }),
+                isHeatmapType && chartConfig.colorField?.role === "measure" && /* @__PURE__ */ jsx2(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.colorField?.aggregation || "sum",
+                    onChange: (e) => updateAggregation("color", e.target.value),
+                    children: CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ jsx2("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
+                /* @__PURE__ */ jsx2("button", { className: "vpg-zone-remove-btn", onClick: () => removeField(isHeatmapType ? "color" : "series"), children: /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: zoneLabels.seriesPlaceholder })
             }
           )
         ] }),
-        (chartConfig.type === "scatter" || chartConfig.type === "bubble") && /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: "Size (bubble)" }),
+        zoneLabels.showSize && /* @__PURE__ */ jsxs2("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ jsx2("label", { className: "vpg-chart-zone-label", children: "Size (number)" }),
           /* @__PURE__ */ jsx2(
             "div",
             {
@@ -660,8 +823,17 @@ function ChartBuilder({
               onDrop: (e) => handleDrop("size", e),
               children: chartConfig.sizeField ? /* @__PURE__ */ jsxs2(Fragment, { children: [
                 /* @__PURE__ */ jsx2("span", { className: "vpg-zone-field-name", children: chartConfig.sizeField.label }),
+                chartConfig.sizeField.role === "measure" && /* @__PURE__ */ jsx2(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.sizeField.aggregation || "sum",
+                    onChange: (e) => updateAggregation("size", e.target.value),
+                    children: CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ jsx2("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
                 /* @__PURE__ */ jsx2("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("size"), children: /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: "Drop measure for size" })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "vpg-zone-placeholder", children: "Drop a number for bubble size" })
             }
           )
         ] }),