@app-studio/web 0.9.48 → 0.9.50

package/dist/web.umd.development.js

@@ -4882,17 +4882,28 @@
         borderStyle: 'solid',
         borderColor: 'transparent',
         _hover: {
-          opacity: 0.9,
-          color: textColor
+          opacity: 0.9
         },
         _active: {
-          opacity: 0.95,
-          color: textColor
+          opacity: 0.95
         },
         _focusVisible: {
           outline: 'none',
-          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color,
-          color: textColor
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'background-color 0.2s ease, opacity 0.2s ease'
+      },
+      reversed: {
+        backgroundColor: textColor,
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: textColor,
+        _hover: {
+          opacity: 0.9
+        },
+        _active: {
+          opacity: 0.95
         },
         transition: 'background-color 0.2s ease, opacity 0.2s ease'
       },
@@ -4932,7 +4943,6 @@
           opacity: 0.9
         },
         _active: {
-          color: color,
           opacity: 0.95
         },
         _focusVisible: {
@@ -4952,11 +4962,9 @@
         textDecorationThickness: '1px',
         textDecorationColor: color,
         _hover: {
-          color: color,
           opacity: 0.8
         },
         _active: {
-          color: color,
           opacity: 0.9
         },
         _focusVisible: {
@@ -6496,12 +6504,14 @@
     var groupWidth = chartWidth / barCount;
     var barWidth = groupWidth * 0.8 / seriesCount;
     var barSpacing = groupWidth * 0.2 / (seriesCount + 1);
+    // Calculate effective max value
+    var effectiveMaxValue = maxValue || 10;
     // Generate y-axis ticks
     var yAxisTicks = React.useMemo(() => {
       var tickCount = 5;
       var ticks = [];
       for (var i = 0; i <= tickCount; i++) {
-        var value = maxValue / tickCount * i;
+        var value = effectiveMaxValue / tickCount * i;
         ticks.push(value);
       }
       return ticks;
@@ -6534,7 +6544,7 @@
         }
       }), label);
     }), yAxisTicks.map((tick, index) => {
-      var y = height - padding.bottom - tick / maxValue * chartHeight;
+      var y = height - padding.bottom - tick / effectiveMaxValue * chartHeight;
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: "y-tick-" + index
       }, /*#__PURE__*/React__default.createElement("text", Object.assign({
@@ -6556,7 +6566,7 @@
     }), data.series.map((series, seriesIndex) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: "series-" + seriesIndex
     }, series.data.map((value, dataIndex) => {
-      var barHeight = value / maxValue * chartHeight * animationProgress;
+      var barHeight = value / effectiveMaxValue * chartHeight * animationProgress;
       var x = padding.left + dataIndex * groupWidth + barSpacing * (seriesIndex + 1) + barWidth * seriesIndex;
       var y = height - padding.bottom - barHeight;
       var categoryLabel = data.labels[dataIndex];
@@ -6669,12 +6679,14 @@
       });
       return max;
     }, [data]);
+    // Calculate effective max value
+    var effectiveMaxValue = maxValue || 10;
     // Generate y-axis ticks
     var yAxisTicks = React.useMemo(() => {
       var tickCount = 5;
       var ticks = [];
       for (var i = 0; i <= tickCount; i++) {
-        var value = maxValue / tickCount * i;
+        var value = effectiveMaxValue / tickCount * i;
         ticks.push(value);
       }
       return ticks;
@@ -6683,7 +6695,7 @@
     var generatePath = series => {
       var points = series.map((value, index) => {
         var x = padding.left + index / (data.labels.length - 1) * chartWidth;
-        var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+        var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
         return x + "," + y;
       });
       return "M " + points.join(' L ');
@@ -6695,7 +6707,7 @@
       var baseY = height - padding.bottom;
       var points = series.map((value, index) => {
         var x = padding.left + index / (data.labels.length - 1) * chartWidth;
-        var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+        var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
         return x + "," + y;
       });
       return "M " + startX + "," + baseY + " L " + points.join(' L ') + " L " + endX + "," + baseY + " Z";
@@ -6728,7 +6740,7 @@
         }
       }), label);
     }), yAxisTicks.map((tick, index) => {
-      var y = height - padding.bottom - tick / maxValue * chartHeight;
+      var y = height - padding.bottom - tick / effectiveMaxValue * chartHeight;
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: "y-tick-" + index
       }, /*#__PURE__*/React__default.createElement("text", Object.assign({
@@ -6760,7 +6772,7 @@
         stroke: lineColor
       }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
         var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
-        var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+        var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
         var categoryLabel = data.labels[dataIndex];
         var categoryTotal = data.series.reduce((sum, currentSeries) => {
           var seriesValue = currentSeries.data[dataIndex];
@@ -6892,6 +6904,22 @@
     }, [dataPoints]);
     // Generate pie slices
     var slices = React.useMemo(() => {
+      if (total === 0) {
+        // Return a single placeholder slice
+        var path = isDonut ? ["M " + centerX + " " + (centerY - radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY + radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY - radius), "M " + centerX + " " + (centerY - donutRadius), "A " + donutRadius + " " + donutRadius + " 0 1 0 " + centerX + " " + (centerY + donutRadius), "A " + donutRadius + " " + donutRadius + " 0 1 0 " + centerX + " " + (centerY - donutRadius), 'Z'].join(' ') : ["M " + centerX + " " + centerY, "M " + centerX + " " + (centerY - radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY + radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY - radius), 'Z'].join(' ');
+        return [{
+          path,
+          color: '#E2E8F0',
+          label: 'Total',
+          value: 0,
+          percentage: '0%',
+          labelX: centerX,
+          labelY: centerY,
+          startAngle: 0,
+          endAngle: Math.PI * 2,
+          index: -1
+        }];
+      }
       var result = [];
       var startAngle = -Math.PI / 2; // Start from top (12 o'clock position)
       for (var i = 0; i < dataPoints.length; i++) {
@@ -6912,13 +6940,13 @@
         // Create arc flag
         var largeArcFlag = angle > Math.PI ? 1 : 0;
         // Create path
-        var path = void 0;
+        var _path = void 0;
         if (isDonut) {
           // Donut slice path
-          path = ["M " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, "L " + innerEndX + " " + innerEndY, "A " + donutRadius + " " + donutRadius + " 0 " + largeArcFlag + " 0 " + innerStartX + " " + innerStartY, 'Z'].join(' ');
+          _path = ["M " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, "L " + innerEndX + " " + innerEndY, "A " + donutRadius + " " + donutRadius + " 0 " + largeArcFlag + " 0 " + innerStartX + " " + innerStartY, 'Z'].join(' ');
         } else {
           // Regular pie slice path
-          path = ["M " + centerX + " " + centerY, "L " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, 'Z'].join(' ');
+          _path = ["M " + centerX + " " + centerY, "L " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, 'Z'].join(' ');
         }
         // Calculate label position
         var labelAngle = startAngle + angle / 2;
@@ -6932,7 +6960,7 @@
         // Resolve the color through the theme system
         var resolvedColor = getColor(colorValue);
         result.push({
-          path,
+          path: _path,
           color: resolvedColor,
           label: dataPoints[i].label,
           value: dataPoints[i].value,
@@ -7039,19 +7067,24 @@
         showTooltip(x, y, tooltipContent);
       };
       var handleClick = () => {
-        if (onSliceClick) {
+        if (slice.index !== -1 && onSliceClick) {
           onSliceClick(dataPoints[slice.index], slice.index);
         }
       };
+      var isPlaceholder = slice.index === -1;
       return /*#__PURE__*/React__default.createElement("g", {
         key: "slice-" + index
       }, /*#__PURE__*/React__default.createElement("path", Object.assign({
         d: slice.path,
         fill: slice.color,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: hideTooltip,
+        onMouseEnter: !isPlaceholder ? handleMouseEnter : undefined,
+        onMouseLeave: !isPlaceholder ? hideTooltip : undefined,
         onClick: handleClick
-      }, PieSliceStyles, views == null ? void 0 : views.pie)), slice.endAngle - slice.startAngle > 0.2 && (/*#__PURE__*/React__default.createElement("text", {
+      }, PieSliceStyles, {
+        style: Object.assign({}, PieSliceStyles == null ? void 0 : PieSliceStyles.style, {
+          cursor: isPlaceholder ? 'default' : 'pointer'
+        })
+      }, views == null ? void 0 : views.pie)), !isPlaceholder && slice.endAngle - slice.startAngle > 0.2 && (/*#__PURE__*/React__default.createElement("text", {
         x: slice.labelX,
         y: slice.labelY,
         textAnchor: "middle",