@app-studio/web 0.9.48 → 0.9.50

package/dist/web.cjs.development.js

@@ -4921,17 +4921,28 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       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'
     },
@@ -4971,7 +4982,6 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
         opacity: 0.9
       },
       _active: {
-        color: color,
         opacity: 0.95
       },
       _focusVisible: {
@@ -4991,11 +5001,9 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       textDecorationThickness: '1px',
       textDecorationColor: color,
       _hover: {
-        color: color,
         opacity: 0.8
       },
       _active: {
-        color: color,
         opacity: 0.9
       },
       _focusVisible: {
@@ -6535,12 +6543,14 @@ var BarChart = _ref => {
   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;
@@ -6573,7 +6583,7 @@ var BarChart = _ref => {
       }
     }), 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({
@@ -6595,7 +6605,7 @@ var BarChart = _ref => {
   }), 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];
@@ -6708,12 +6718,14 @@ var LineChart = _ref => {
     });
     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;
@@ -6722,7 +6734,7 @@ var LineChart = _ref => {
   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 ');
@@ -6734,7 +6746,7 @@ var LineChart = _ref => {
     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";
@@ -6767,7 +6779,7 @@ var LineChart = _ref => {
       }
     }), 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({
@@ -6799,7 +6811,7 @@ var LineChart = _ref => {
       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];
@@ -6931,6 +6943,22 @@ var PieChart = _ref => {
   }, [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++) {
@@ -6951,13 +6979,13 @@ var PieChart = _ref => {
       // 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;
@@ -6971,7 +6999,7 @@ var PieChart = _ref => {
       // 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,
@@ -7078,19 +7106,24 @@ var PieChart = _ref => {
       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",