neo-cmp-cli 1.13.16 → 1.13.18

package/template/neo-pipeline-cmps/src/utils/pipelineFunnel.ts

@@ -0,0 +1,343 @@
+/**
+ * Pipeline funnel pipelineFunnel specific (parse table rows, ECharts config)
+ */
+import * as echarts from 'echarts';
+
+import { formatAmountDisplay } from './common';
+
+export const FUNNEL_COLORS = [
+  '#3b82f6',
+  '#22c55e',
+  '#f59e0b',
+  '#8b5cf6',
+  '#ec4899',
+  '#06b6d4',
+];
+
+export interface FunnelStage {
+  name: string;
+  amountNum: number;
+  amount: string;
+  count: number;
+  conversionRate?: string;
+  color: string;
+}
+
+export function parseAmountToNumber(raw: unknown): number {
+  if (raw === null || raw === undefined) return 0;
+  const s = String(raw)
+    .replace(/,/g, '')
+    .replace(/[^\d.-]/g, '');
+  const n = parseFloat(s);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function formatSharePercent(amount: number, total: number): string {
+  if (!total || !Number.isFinite(amount)) return '—';
+  return `${((amount / total) * 100).toFixed(1)}%`;
+}
+
+export function isTruthyProp(v: unknown): boolean {
+  return v === true || v === 'true' || v === 1 || v === '1';
+}
+
+/** Ignore case and consecutive whitespace when comparing with backend stage names */
+export function isClosedLostStageName(raw: unknown): boolean {
+  const n = String(raw ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, ' ');
+  return n === 'closed lost';
+}
+
+/** Remove Closed Lost stage rows, keep header; must be called before parseRowsToStages to avoid counting in total and percentage */
+export function filterOutClosedLostRows(table: unknown[][]): unknown[][] {
+  if (!Array.isArray(table) || table.length < 2) return table;
+  const header = table[0];
+  const rest = table
+    .slice(1)
+    .filter((row) => !(Array.isArray(row) && isClosedLostStageName(row[0])));
+  return [header, ...rest];
+}
+
+export function parseRowsToStages(rows: unknown[][]): {
+  stages: FunnelStage[];
+  totalAmountNum: number;
+} {
+  if (!Array.isArray(rows) || rows.length < 2) {
+    return { stages: [], totalAmountNum: 0 };
+  }
+  const dataRows = rows.slice(1);
+  const stages: FunnelStage[] = [];
+  const amountNums: number[] = [];
+  let totalAmountNum = 0;
+
+  for (let i = 0; i < dataRows.length; i++) {
+    const row = dataRows[i];
+    if (!Array.isArray(row) || row.length < 4) continue;
+
+    const name = String(row[0] ?? '');
+    const countRaw = row[2];
+    const amountNum = parseAmountToNumber(row[3]);
+    totalAmountNum += amountNum;
+    amountNums.push(amountNum);
+
+    const countNum = parseInt(String(countRaw).replace(/\D/g, ''), 10);
+    const count = Number.isFinite(countNum) ? countNum : 0;
+
+    stages.push({
+      name,
+      amountNum,
+      amount: formatAmountDisplay(amountNum),
+      count,
+      color: FUNNEL_COLORS[i % FUNNEL_COLORS.length],
+    });
+  }
+
+  for (let j = 0; j < stages.length; j++) {
+    stages[j].conversionRate = formatSharePercent(
+      amountNums[j],
+      totalAmountNum,
+    );
+  }
+
+  return { stages, totalAmountNum };
+}
+
+export function funnelLayerValue(index: number, total: number): number {
+  return Math.max(total - index, 1);
+}
+
+export function funnelValueForStage(
+  stage: FunnelStage,
+  index: number,
+  stageCount: number,
+  useClassicFunnelShape: boolean,
+): number {
+  if (useClassicFunnelShape) {
+    return funnelLayerValue(index, stageCount);
+  }
+  const v = stage.amountNum;
+  if (Number.isFinite(v) && v > 0) return v;
+  return 0;
+}
+
+/** Classic funnel: width still controlled by value (order); layer height allocated by amount proportion (consistent with series.gap, unit is px) */
+export function classicFunnelLayerHeightPercents(
+  amountNums: number[],
+  viewHeightPx: number,
+  gapPx: number,
+): string[] {
+  const n = amountNums.length;
+  if (n === 0) return [];
+  const h = Math.max(viewHeightPx, 1);
+  const factor = (h - gapPx * Math.max(n - 1, 0)) / h;
+  const positives = amountNums.map((v) =>
+    Number.isFinite(v) && v > 0 ? v : 0,
+  );
+  const sum = positives.reduce((a, v) => a + v, 0);
+  if (sum <= 0) {
+    const even = (100 / n) * factor;
+    return Array(n).fill(`${even}%`);
+  }
+  return positives.map((v) => `${100 * (v / sum) * factor}%`);
+}
+
+export interface BuildFunnelChartOptionParams {
+  /** Container height (px), used in classic mode to calculate layer height percentages; should re-setOption when changed */
+  chartViewHeightPx?: number;
+  funnelGap?: number;
+}
+
+export function buildFunnelChartOption(
+  stages: FunnelStage[],
+  useClassicFunnelShape: boolean,
+  params?: BuildFunnelChartOptionParams,
+): echarts.EChartsOption {
+  const n = stages.length;
+  const values = stages.map((s, i) =>
+    funnelValueForStage(s, i, n, useClassicFunnelShape),
+  );
+  const funnelMax = useClassicFunnelShape
+    ? Math.max(n, 1)
+    : Math.max(...values, 1);
+
+  const gap = params?.funnelGap ?? 2;
+  const viewH = params?.chartViewHeightPx;
+  const classicHeights =
+    useClassicFunnelShape && viewH != null && viewH > 0
+      ? classicFunnelLayerHeightPercents(
+          stages.map((s) => s.amountNum),
+          viewH,
+          gap,
+        )
+      : null;
+
+  const coloredData = stages.map((s, i) => ({
+    name: s.name,
+    value: values[i],
+    itemStyle: {
+      color: s.color,
+      ...(classicHeights?.[i] ? { height: classicHeights[i] } : {}),
+    },
+  }));
+
+  const alignData = stages.map((s, i) => ({
+    name: s.name,
+    value: values[i],
+    ...(classicHeights?.[i]
+      ? { itemStyle: { height: classicHeights[i] } }
+      : {}),
+  }));
+
+  const labelLineStyle = {
+    length: 28,
+    lineStyle: {
+      width: 1,
+      color: '#d0d0d0',
+      type: 'solid' as const,
+    },
+  };
+
+  const labelLayoutLeft = () => ({
+    x: 0,
+    align: 'left' as const,
+    dx: 4,
+  });
+
+  const labelLayoutRight = () => ({
+    x: '100%',
+    align: 'right' as const,
+    dx: -6,
+  });
+
+  const funnelLayout = {
+    left: '12%',
+    top: 4,
+    bottom: 4,
+    width: '76%',
+    min: 0,
+    max: funnelMax,
+    minSize: '0%',
+    maxSize: '100%',
+    sort: 'none' as const,
+    gap: 1,
+  };
+
+  return {
+    backgroundColor: 'transparent',
+    legend: { show: false },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: '#333',
+      textStyle: { color: '#fff' },
+      formatter: (params: unknown) => {
+        const p = params as { dataIndex?: number; seriesName?: string };
+        const idx = p.dataIndex ?? 0;
+        const st = stages[idx];
+        if (!st) return '';
+        return [
+          `${st.name}`,
+          `Percentage: ${st.conversionRate ?? '—'}`,
+          `Amount: ${st.amount}`,
+          `Quantity: ${st.count}`,
+        ].join('<br/>');
+      },
+    },
+    series: [
+      {
+        name: 'Pipeline',
+        type: 'funnel',
+        z: 1,
+        ...funnelLayout,
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.15)',
+          },
+        },
+        label: {
+          show: true,
+          position: 'left',
+          color: '#888',
+          fontSize: 11,
+          formatter: (p: { dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            return stages[idx]?.conversionRate ?? '—';
+          },
+        },
+        labelLine: {
+          show: true,
+          ...labelLineStyle,
+        },
+        labelLayout: labelLayoutLeft,
+        data: coloredData,
+      },
+      {
+        name: 'PipelineLabels',
+        type: 'funnel',
+        z: 2,
+        animation: false,
+        animationDurationUpdate: 0,
+        ...funnelLayout,
+        itemStyle: {
+          color: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+        },
+        emphasis: { disabled: true },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#555',
+          fontSize: 11,
+          formatter: (p: { dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            const st = stages[idx];
+            return st ? `${st.amount} / ${st.count}` : '';
+          },
+        },
+        labelLine: {
+          show: true,
+          ...labelLineStyle,
+        },
+        labelLayout: labelLayoutRight,
+        data: alignData,
+      },
+      {
+        name: 'PipelineName',
+        type: 'funnel',
+        z: 3,
+        silent: true,
+        animation: false,
+        animationDurationUpdate: 0,
+        tooltip: { show: false },
+        ...funnelLayout,
+        itemStyle: {
+          color: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+        },
+        emphasis: { disabled: true },
+        label: {
+          show: true,
+          position: 'inside',
+          color: '#fff',
+          fontSize: 12,
+          fontWeight: 600,
+          textBorderColor: 'rgba(0,0,0,0.4)',
+          textBorderWidth: 1,
+          formatter: (p: { name?: string; dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            return stages[idx]?.name ?? p.name ?? '';
+          },
+        },
+        labelLine: { show: false },
+        data: alignData,
+      },
+    ],
+  };
+}

package/template/neo-pipeline-cmps/src/utils/queryByCustomSQL.ts

@@ -0,0 +1,121 @@
+// @ts-nocheck
+import { request as axiosFetcher } from 'neo-open-api';
+
+/**
+ * Common query Open APIs are stored here
+ */
+
+/** Normalize where to SQL fragment: string is used directly; array items are joined with 'and' */
+function normalizeWhere(where: unknown): string {
+  if (where == null || where === '') {
+    return '';
+  }
+  if (typeof where === 'string') {
+    return where.trim();
+  }
+  if (Array.isArray(where)) {
+    return where
+      .map((part) => (part == null ? '' : String(part).trim()))
+      .filter(Boolean)
+      .join(' and ');
+  }
+  return '';
+}
+
+// Query BI data by SQL
+export const queryByCustomSQL = async (options?: any) => {
+  const apiUrl = '/rest/neobi/v2.0/query/queryByCustomSQL';
+  const curOptions = options || {};
+  const xObjectApiKey = curOptions.xObjectApiKey || '';
+  const fields = Object.assign([], curOptions.fields || []);
+  const page = curOptions.page || 1;
+  const pageSize = curOptions.pageSize || 10;
+
+  // Automatically add objectId field
+  if (!fields.includes('id')) {
+    fields.push('id');
+  }
+
+  // Calculate pagination offset
+  const offset = (page - 1) * pageSize;
+
+  // Build SQL query
+  let querySql = `select ${fields.join(',')} from ${xObjectApiKey}`;
+
+  // Add sort conditions (if any)
+  if (curOptions.orderBy) {
+    querySql += ` order by ${curOptions.orderBy}`;
+  }
+
+  /**
+   * Add filter conditions (if any)
+   * Supported operators: =, !=, like, not like, not in, is not null, is null, >, <, <>, >=, <=, in, between ... and ...
+   * Notes for =, like and in:
+   *   "=" as a string condition means exact match. For example, city = 'Beijing' returns all records where city is strictly equal to "Beijing".
+   *   "like" as a string condition requires "%" wildcard for fuzzy matching. For example, city like 'Beijing%' returns all records where city starts with "Beijing".
+   *         Currently only supports placing "%" after the known content; e.g., city like '% Beijing' is not supported.
+   *         When the SQL query contains special characters like "%", URL encoding is required.
+   * Supports "in", but not subqueries.
+   * Supported logical operators: and, or.
+   *
+   * `where` can be a string, or a string array (multiple items joined with 'and' by default, equivalent to `a and b`).
+   */
+  const whereClause = normalizeWhere(curOptions.where);
+
+  if (whereClause) {
+    querySql += ` where ${whereClause}`;
+  }
+
+  if (curOptions.page || curOptions.pageSize) {
+    // Add pagination limit
+    querySql += ` limit ${offset},${pageSize}`;
+  }
+
+  const querySqlForm = new URLSearchParams();
+  querySqlForm.set('sqlObject', querySql);
+
+  try {
+    const config = {
+      url: apiUrl,
+      method: 'POST',
+      data: querySqlForm.toString(),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+    };
+
+    const resultData = await axiosFetcher(config);
+
+    if (resultData.code === 200) {
+      const records = resultData.data || [];
+      return {
+        status: true,
+        code: resultData.code,
+        msg:
+          resultData.msg || 'Successfully retrieved business object data list',
+        totalSize: records.length,
+        data: records || [],
+      };
+    }
+
+    return {
+      status: false,
+      code: resultData.code,
+      msg: resultData.msg || 'Failed to retrieve business object data list',
+      data: [],
+    };
+  } catch (error) {
+    console.error('Failed to retrieve business object data list:', error);
+
+    return {
+      status: false,
+      msg:
+        error.msg ||
+        error.message ||
+        'Failed to retrieve business object data list',
+      data: [],
+    };
+  }
+};
+
+export default queryByCustomSQL;

package/template/neo-pipeline-cmps/src/utils/requestDebounce.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import debounce from 'lodash/debounce';
+
+/** Data request debounce interval in milliseconds for components, used to merge repeated triggers within a short time */
+export const REQUEST_DEBOUNCE_MS = 280;
+
+/** lodash debounce instance (avoids dependency on @types/lodash) */
+export type DebouncedRequestFn = {
+  (): void;
+  cancel(): void;
+  flush(): void;
+};
+
+/**
+ * Trailing debounce: executes only once after a pause during continuous triggers, suitable for filter / props rapid update scenarios.
+ */
+export function createRequestDebounce(
+  fn: () => void,
+  wait: number = REQUEST_DEBOUNCE_MS,
+): DebouncedRequestFn {
+  return debounce(fn, wait) as DebouncedRequestFn;
+}