@pisell/materials 3.3.82 → 3.3.84

package/lib/components/pisellMetricCard/PisellMetricCard.js

@@ -0,0 +1,166 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/PisellMetricCard.tsx
+var PisellMetricCard_exports = {};
+__export(PisellMetricCard_exports, {
+  default: () => PisellMetricCard_default
+});
+module.exports = __toCommonJS(PisellMetricCard_exports);
+var import_react = __toESM(require("react"));
+var import_pisellCard = __toESM(require("../pisellCard"));
+var import_components = require("./components");
+var import_utils = require("./utils");
+var import_PisellMetricCard = require("./PisellMetricCard.less");
+var PisellMetricCard = (props) => {
+  const {
+    // 核心数据
+    title,
+    subtitle,
+    value,
+    tag,
+    tooltip,
+    // 配置对象
+    format,
+    comparison,
+    styleConfig,
+    // 简单开关
+    showSubtitle = false,
+    showTag = false,
+    showTooltip = false,
+    loading = false,
+    hoverable = true,
+    // 通用属性
+    className,
+    style,
+    onClick
+  } = props;
+  const formatConfig = (0, import_react.useMemo)(() => ({
+    precision: (format == null ? void 0 : format.precision) ?? 0,
+    useGrouping: (format == null ? void 0 : format.useGrouping) ?? false,
+    showCurrencySymbol: (format == null ? void 0 : format.showCurrencySymbol) ?? false,
+    currencySymbol: (format == null ? void 0 : format.currencySymbol) ?? "",
+    formatter: format == null ? void 0 : format.formatter,
+    hideDecimalForWholeNumbers: (format == null ? void 0 : format.hideDecimalForWholeNumbers) ?? true
+  }), [format]);
+  const cardStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+      bordered: ((_a = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _a.bordered) ?? true,
+      borderRadius: ((_b = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _b.borderRadius) ?? 12,
+      padding: ((_c = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _c.padding) ?? 16,
+      shadow: ((_d = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _d.shadow) ?? true,
+      background: ((_e = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _e.background) ?? "#ffffff",
+      width: ((_f = styleConfig == null ? void 0 : styleConfig.card) == null ? void 0 : _f.width) ?? "auto"
+    };
+  }, [styleConfig]);
+  const titleStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    return {
+      size: ((_a = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _a.size) ?? 14,
+      weight: ((_b = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _b.weight) ?? 400,
+      color: ((_c = styleConfig == null ? void 0 : styleConfig.title) == null ? void 0 : _c.color) ?? "rgba(0, 0, 0, 0.45)"
+    };
+  }, [styleConfig]);
+  const valueStyle = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    return {
+      size: ((_a = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _a.size) ?? 30,
+      weight: ((_b = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _b.weight) ?? 600,
+      color: ((_c = styleConfig == null ? void 0 : styleConfig.value) == null ? void 0 : _c.color) ?? "rgba(0, 0, 0, 0.85)"
+    };
+  }, [styleConfig]);
+  const formattedValue = (0, import_react.useMemo)(() => {
+    return (0, import_utils.formatMetricValue)(value, formatConfig);
+  }, [value, formatConfig]);
+  const comparisonConfig = (0, import_react.useMemo)(() => {
+    if (!(comparison == null ? void 0 : comparison.value)) return null;
+    return {
+      value: comparison.value,
+      text: comparison.text ?? "v.s. pre",
+      showTrendIcon: comparison.showTrendIcon ?? true,
+      positiveColor: comparison.positiveColor ?? "#52c41a",
+      negativeColor: comparison.negativeColor ?? "#ff4d4f",
+      size: comparison.size ?? 14
+    };
+  }, [comparison]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_pisellCard.default,
+    {
+      bordered: cardStyle.bordered,
+      borderRadius: cardStyle.borderRadius,
+      padding: cardStyle.padding,
+      loading,
+      isClickable: !!onClick,
+      onClick,
+      style: {
+        width: typeof cardStyle.width === "number" ? `${cardStyle.width}px` : cardStyle.width,
+        background: cardStyle.background,
+        boxShadow: typeof cardStyle.shadow === "string" ? cardStyle.shadow : cardStyle.shadow ? "0px 1px 2px 0px rgba(16, 24, 40, 0.05)" : "none",
+        ...style
+      },
+      className: `pisell-metric-card ${className || ""}`
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricTitle,
+      {
+        title,
+        subtitle: showSubtitle ? subtitle : void 0,
+        tooltip: showTooltip ? tooltip : void 0,
+        titleSize: titleStyle.size,
+        titleWeight: titleStyle.weight,
+        titleColor: titleStyle.color
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricValue,
+      {
+        value: formattedValue,
+        valueSize: valueStyle.size,
+        valueWeight: valueStyle.weight,
+        valueColor: valueStyle.color
+      }
+    ),
+    comparisonConfig && /* @__PURE__ */ import_react.default.createElement(
+      import_components.MetricComparison,
+      {
+        comparison: comparisonConfig.value,
+        comparisonText: comparisonConfig.text,
+        showTrendIcon: comparisonConfig.showTrendIcon,
+        positiveColor: comparisonConfig.positiveColor,
+        negativeColor: comparisonConfig.negativeColor,
+        comparisonSize: comparisonConfig.size,
+        precision: formatConfig.precision,
+        showCurrencySymbol: formatConfig.showCurrencySymbol,
+        currencySymbol: formatConfig.currencySymbol
+      }
+    ),
+    showTag && tag && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-metric-card-tag" }, tag)
+  );
+};
+var PisellMetricCard_default = PisellMetricCard;

package/lib/components/pisellMetricCard/PisellMetricCard.less

@@ -0,0 +1,74 @@
+.pisell-metric-card {
+  // 标题区域
+  &-title-wrapper {
+    // 不设置固定的 margin-bottom，由子元素控制
+  }
+  
+  &-title {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 22px;
+    margin-bottom: 0;
+    
+    // 如果后面有副标题，间距为 4px
+    & + .pisell-metric-card-subtitle {
+      margin-top: 4px;
+    }
+  }
+  
+  &-subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 20px;
+    margin-bottom: 0;
+  }
+  
+  // 标题区域与数值区域的间距：8px
+  &-title-wrapper + &-value {
+    margin-top: 8px;
+  }
+  
+  // 数值区域
+  &-value {
+    font-size: 30px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 38px;
+    margin-bottom: 0;
+  }
+  
+  // 数值与环比信息的间距：4px
+  &-value + &-comparison {
+    margin-top: 4px;
+  }
+  
+  // 环比信息区域
+  &-comparison {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  
+  &-trend-icon {
+    font-size: 12px;
+  }
+  
+  // 环比信息与标签的间距：8px
+  &-comparison + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 如果没有环比，数值与标签的间距
+  &-value + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 标签区域
+  &-tag {
+    // margin-top 由上面的相邻选择器控制
+  }
+}

package/lib/components/pisellMetricCard/PisellMetricCard.stories.js

@@ -0,0 +1,238 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/PisellMetricCard.stories.tsx
+var PisellMetricCard_stories_exports = {};
+__export(PisellMetricCard_stories_exports, {
+  Basic: () => Basic,
+  Complete: () => Complete,
+  CustomStyle: () => CustomStyle,
+  EmptyValue: () => EmptyValue,
+  Loading: () => Loading,
+  MultipleCards: () => MultipleCards,
+  NegativeTrend: () => NegativeTrend,
+  PositiveTrend: () => PositiveTrend,
+  WithCurrency: () => WithCurrency,
+  WithGrouping: () => WithGrouping,
+  WithPrecision: () => WithPrecision,
+  WithTag: () => WithTag,
+  default: () => PisellMetricCard_stories_default
+});
+module.exports = __toCommonJS(PisellMetricCard_stories_exports);
+var import_antd = require("antd");
+var import_PisellMetricCard = __toESM(require("./PisellMetricCard"));
+var meta = {
+  title: "Data Display/PisellMetricCard",
+  component: import_PisellMetricCard.default,
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "标题文本",
+      control: "text"
+    },
+    value: {
+      description: "主数值",
+      control: "number"
+    }
+  }
+};
+var PisellMetricCard_stories_default = meta;
+var Basic = {
+  args: {
+    title: "Total Sales",
+    value: 1580
+  }
+};
+var WithCurrency = {
+  args: {
+    title: "Revenue",
+    value: 1580,
+    format: {
+      showCurrencySymbol: true,
+      currencySymbol: "$"
+    }
+  }
+};
+var PositiveTrend = {
+  args: {
+    title: "Total Orders",
+    value: 50,
+    comparison: {
+      value: 12
+    }
+  }
+};
+var NegativeTrend = {
+  args: {
+    title: "Total Items",
+    value: 3249,
+    comparison: {
+      value: -230
+    }
+  }
+};
+var WithGrouping = {
+  args: {
+    title: "Total Revenue",
+    value: 1234567,
+    format: {
+      useGrouping: true,
+      showCurrencySymbol: true,
+      currencySymbol: "$"
+    }
+  }
+};
+var WithPrecision = {
+  args: {
+    title: "Conversion Rate",
+    value: 18.567,
+    format: {
+      precision: 2
+    }
+  }
+};
+var Complete = {
+  args: {
+    title: "Monthly Revenue",
+    subtitle: "Last 30 days",
+    value: 125e3,
+    tooltip: "Total revenue from all sales channels",
+    showSubtitle: true,
+    showTooltip: true,
+    format: {
+      showCurrencySymbol: true,
+      currencySymbol: "$",
+      useGrouping: true,
+      precision: 2
+    },
+    comparison: {
+      value: 15e3,
+      text: "v.s. pre"
+    }
+  }
+};
+var WithTag = {
+  args: {
+    title: "Active Users",
+    value: 1128,
+    tag: /* @__PURE__ */ React.createElement(import_antd.Tag, { color: "green" }, "+15%"),
+    showTag: true
+  }
+};
+var CustomStyle = {
+  args: {
+    title: "Custom Style Card",
+    value: 1580,
+    comparison: {
+      value: 120
+    },
+    styleConfig: {
+      card: {
+        borderRadius: 8,
+        padding: 24,
+        background: "#f5f5f5",
+        width: 300
+      },
+      title: {
+        size: 16,
+        weight: 600,
+        color: "#1890ff"
+      },
+      value: {
+        size: 36,
+        weight: 700,
+        color: "#52c41a"
+      }
+    }
+  }
+};
+var Loading = {
+  args: {
+    title: "Loading Data",
+    value: 1580,
+    loading: true
+  }
+};
+var EmptyValue = {
+  args: {
+    title: "No Data",
+    value: null
+  }
+};
+var MultipleCards = {
+  render: () => /* @__PURE__ */ React.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+    gap: 16
+  } }, /* @__PURE__ */ React.createElement(
+    import_PisellMetricCard.default,
+    {
+      title: "Total Orders",
+      value: 50,
+      comparison: { value: 12 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    import_PisellMetricCard.default,
+    {
+      title: "Total Sales",
+      value: 1580,
+      format: { showCurrencySymbol: true, currencySymbol: "$" },
+      comparison: { value: 120 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    import_PisellMetricCard.default,
+    {
+      title: "Total Discount",
+      value: 230,
+      format: { showCurrencySymbol: true, currencySymbol: "$" },
+      comparison: { value: 80 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    import_PisellMetricCard.default,
+    {
+      title: "Total Items",
+      value: 3249,
+      comparison: { value: -230 }
+    }
+  ))
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Basic,
+  Complete,
+  CustomStyle,
+  EmptyValue,
+  Loading,
+  MultipleCards,
+  NegativeTrend,
+  PositiveTrend,
+  WithCurrency,
+  WithGrouping,
+  WithPrecision,
+  WithTag
+});

package/lib/components/pisellMetricCard/components/MetricComparison.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MetricComparisonProps } from '../types';
+/**
+ * MetricComparison 环比信息组件
+ *
+ * 负责渲染环比数值和趋势箭头
+ * - 自动根据正负值显示不同颜色
+ * - 支持格式化环比数值
+ * - 集成趋势箭头组件
+ *
+ * @param props 组件属性
+ */
+declare const MetricComparison: React.FC<MetricComparisonProps>;
+export default MetricComparison;

package/lib/components/pisellMetricCard/components/MetricComparison.js

@@ -0,0 +1,86 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/components/MetricComparison.tsx
+var MetricComparison_exports = {};
+__export(MetricComparison_exports, {
+  default: () => MetricComparison_default
+});
+module.exports = __toCommonJS(MetricComparison_exports);
+var import_react = __toESM(require("react"));
+var import_TrendIcon = __toESM(require("./TrendIcon"));
+var import_utils = require("../utils");
+var MetricComparison = ({
+  comparison,
+  comparisonText = "v.s. pre",
+  showTrendIcon = true,
+  positiveColor = "#52c41a",
+  negativeColor = "#ff4d4f",
+  comparisonSize = 14,
+  precision,
+  showCurrencySymbol,
+  currencySymbol
+}) => {
+  const trend = (0, import_react.useMemo)(() => {
+    return (0, import_utils.calculateTrend)(comparison);
+  }, [comparison]);
+  const formattedComparison = (0, import_react.useMemo)(() => {
+    if (comparison === null || comparison === void 0) {
+      return null;
+    }
+    const numComparison = typeof comparison === "string" ? parseFloat(comparison) : comparison;
+    if (isNaN(numComparison)) {
+      return null;
+    }
+    return (0, import_utils.formatMetricValue)(Math.abs(numComparison), {
+      precision,
+      showCurrencySymbol,
+      currencySymbol,
+      useGrouping: false
+    });
+  }, [comparison, precision, showCurrencySymbol, currencySymbol]);
+  if (formattedComparison === null || trend === "neutral") {
+    return null;
+  }
+  const color = trend === "up" ? positiveColor : negativeColor;
+  const sign = trend === "up" ? "+" : "-";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-metric-card-comparison",
+      style: {
+        fontSize: typeof comparisonSize === "number" ? `${comparisonSize}px` : comparisonSize,
+        color
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", null, comparisonText),
+    /* @__PURE__ */ import_react.default.createElement("span", null, sign, formattedComparison),
+    showTrendIcon && /* @__PURE__ */ import_react.default.createElement(import_TrendIcon.default, { trend, color })
+  );
+};
+var MetricComparison_default = MetricComparison;

package/lib/components/pisellMetricCard/components/MetricTitle.js

@@ -0,0 +1,84 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/components/MetricTitle.tsx
+var MetricTitle_exports = {};
+__export(MetricTitle_exports, {
+  default: () => MetricTitle_default
+});
+module.exports = __toCommonJS(MetricTitle_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var MetricTitle = ({
+  title,
+  subtitle,
+  tooltip,
+  titleSize = 14,
+  titleWeight = 400,
+  titleColor = "rgba(0, 0, 0, 0.45)"
+}) => {
+  const titleElement = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-metric-card-title-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-metric-card-title",
+      style: {
+        fontSize: typeof titleSize === "number" ? `${titleSize}px` : titleSize,
+        fontWeight: titleWeight,
+        color: titleColor,
+        display: "flex",
+        alignItems: "center",
+        gap: "4px"
+      }
+    },
+    title,
+    tooltip && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltip }, /* @__PURE__ */ import_react.default.createElement(
+      import_icons.QuestionCircleOutlined,
+      {
+        style: {
+          fontSize: 12,
+          color: titleColor,
+          cursor: "help"
+        }
+      }
+    ))
+  ), subtitle && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-metric-card-subtitle",
+      style: {
+        fontSize: 12,
+        fontWeight: 400,
+        color: titleColor
+      }
+    },
+    subtitle
+  ));
+  return titleElement;
+};
+var MetricTitle_default = MetricTitle;