@cloudtower/eagle 0.29.26 → 0.29.28

package/dist/esm/coreX/BarChart/index.js

@@ -1,7 +1,46 @@
 import { formatPercent } from '../../utils/tower.js';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
 const StackBar = "E_skwah65";
+const useShapeStyle = (shape, color) => {
+  return useMemo(() => {
+    switch (shape) {
+      case "stripes":
+        return {
+          backgroundImage: `linear-gradient(-45deg, 
+                ${color} 25%, 
+                transparent 25%, 
+                transparent 50%, 
+                ${color} 50%, 
+                ${color} 75%, 
+                transparent 75%, 
+                transparent)`,
+          backgroundSize: "4px 4px"
+        };
+      default:
+        return {
+          backgroundColor: color
+        };
+    }
+  }, [color, shape]);
+};
 function getWidth(input) {
   const {
     value,
@@ -9,27 +48,44 @@ function getWidth(input) {
   } = formatPercent(input);
   return value + unit;
 }
+const BarItem = props => {
+  const {
+    color,
+    shape,
+    style,
+    className
+  } = props;
+  const shapeStyle = useShapeStyle(shape, color);
+  return /* @__PURE__ */React__default.createElement("div", {
+    className,
+    style: __spreadValues(__spreadValues({}, shapeStyle), style)
+  });
+};
 const BarChart = ({
   data,
   total
-}) => /* @__PURE__ */React__default.createElement("div", {
-  className: StackBar
-}, (data || []).map((item, index) => {
-  const {
-    value,
-    color
-  } = item;
-  const width = total === 0 ? 0 : getWidth(100 * value / total);
+}) => {
   return /* @__PURE__ */React__default.createElement("div", {
-    className: "stack-bar-item",
-    key: index,
-    style: {
-      width,
-      background: color,
-      display: value === 0 || total === 0 ? "none" : "inline-block"
-    }
-  });
-}));
+    className: StackBar
+  }, (data || []).map((item, index) => {
+    const {
+      value,
+      color,
+      shape = "fill"
+    } = item;
+    const width = total === 0 ? 0 : getWidth(100 * value / total);
+    return /* @__PURE__ */React__default.createElement(BarItem, {
+      className: "stack-bar-item",
+      key: index,
+      shape,
+      color,
+      style: {
+        width,
+        display: value === 0 || total === 0 ? "none" : "inline-block"
+      }
+    });
+  }));
+};
 var BarChart$1 = BarChart;
 
 export { BarChart$1 as default, getWidth };