neo-cmp-cli 1.13.16 → 1.13.18

package/template/neo-pipeline-cmps/src/components/stageTimeChart__c/index.tsx

@@ -0,0 +1,455 @@
+/**
+ * @file Stage Time Component
+ * @description Displays the average time spent in each sales stage; chart data from NeoBI queryDataTask, target/limit from XObject customItem3/4 (days)
+ */
+import * as React from 'react';
+import { Spin } from 'antd';
+// @ts-ignore
+import { request, xObject } from 'neo-open-api';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+import { filter2chartFilter } from '../../utils/filter2chartFilter';
+import {
+  buildQueryDataTaskFormBody,
+  extractStageKeyFromStageName,
+  parseNumberOrNaN,
+  getDefaultFilterWhereByProps,
+} from '../../utils/common';
+import {
+  buildStageTimeItems,
+  isClosedOutcomeStage,
+  parseDurationToDays,
+  type StageTimeItem,
+  type StageTimeRow,
+} from '../../utils/stageTimeChart';
+
+import './style.scss';
+
+const QUERY_DATA_TASK_URL = '/rest/neobi/v2.0/bestpractices/queryDataTask';
+
+const FORM_URLENCODED_UTF8 = 'application/x-www-form-urlencoded;charset=UTF-8';
+
+interface ThresholdsXObjectApi {
+  xObjectApiKey?: string;
+  fields?: string[];
+  page?: number;
+  pageSize?: number;
+}
+
+interface StageTimeChartProps {
+  title?: string;
+  viewId?: string;
+  viewType?: string;
+  data?: {
+    __NeoCurrentUser?: { id?: string | number };
+  };
+  thresholdsXObjectApi?: ThresholdsXObjectApi;
+  showAiButton?: boolean;
+  onStageClick?: (stageName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/** Threshold row: only normalize customItem3/4 to number, keep other fields as-is */
+interface ThresholdRecordRow extends Record<string, unknown> {
+  customItem3__c: number;
+  customItem4__c: number;
+}
+
+interface StageTimeChartState {
+  loading: boolean;
+  error: string | null;
+  items: StageTimeItem[];
+  filter: any;
+  /** Matches threshold row customItem2__c, default New Business (can be updated by setFilter) */
+  oppType: string;
+  /** Full list fetched by fetchThresholdRecords (customItem3/4 converted to number) */
+  thresholdRecords: ThresholdRecordRow[];
+}
+
+class StageTimeChart extends BaseCmp<StageTimeChartProps, StageTimeChartState> {
+  /** Initialize state */
+  constructor(props: StageTimeChartProps) {
+    super(props);
+    const initialOppType =
+      String(
+        (props as StageTimeChartProps & { oppType?: string }).oppType ?? '',
+      ).trim() || 'New Business';
+    this.state = {
+      loading: false,
+      error: null,
+      items: [],
+      filter: getDefaultFilterWhereByProps(props),
+      oppType: initialOppType,
+      thresholdRecords: [],
+    };
+
+    this.getThresholdRecord = this.getThresholdRecord.bind(this);
+    this.fetchThresholdRecords = this.fetchThresholdRecords.bind(this);
+    this.fetchChartRows = this.fetchChartRows.bind(this);
+    this.fetchAllData = this.fetchAllData.bind(this);
+    this.refreshData = this.refreshData.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+  }
+
+  /** Fetch thresholds and chart data after mount */
+  componentDidMount() {
+    this.fetchAllData();
+
+    /*
+    // Listen to a broadcast event
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('StageTimeChart received broadcast event updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+    */
+  }
+
+  /** Re-fetch data when key props change */
+  componentDidUpdate(
+    prevProps: StageTimeChartProps,
+    prevState: StageTimeChartState,
+  ) {
+    const uid = this.props.data?.__NeoCurrentUser?.id;
+    const puid = prevProps.data?.__NeoCurrentUser?.id;
+    const api = this.props.thresholdsXObjectApi;
+    const papi = prevProps.thresholdsXObjectApi;
+    const apiKeyChanged =
+      api?.xObjectApiKey !== papi?.xObjectApiKey ||
+      JSON.stringify(api?.fields ?? []) !== JSON.stringify(papi?.fields ?? []);
+    const filterChanged = !isEqual(this.state.filter, prevState.filter);
+    const oppTypeChanged = this.state.oppType !== prevState.oppType;
+
+    if (
+      this.props.viewId !== prevProps.viewId ||
+      this.props.viewType !== prevProps.viewType ||
+      uid !== puid ||
+      apiKeyChanged ||
+      filterChanged ||
+      oppTypeChanged
+    ) {
+      this.fetchAllData();
+    }
+  }
+
+  /** Find a single row in the list by customItem1__c / customItem2__c; customItem2 defaults to state.oppType */
+  getThresholdRecord(
+    customItem1__c: string = String(this.state.oppType ?? 'New Business'),
+    customItem2__c: string,
+    source: ThresholdRecordRow[] = this.state.thresholdRecords,
+  ): ThresholdRecordRow | undefined {
+    const k1 = String(customItem1__c ?? '').trim();
+    const k2 = String(customItem2__c ?? '').trim();
+    return source.find((r) => {
+      return (
+        String(r.customItem1__c ?? '').trim() === k1 &&
+        String(r.customItem2__c ?? '').trim() === k2
+      );
+    });
+  }
+
+  /** Fetch threshold list, only convert customItem3/4 to number, and write to state.thresholdRecords */
+  async fetchThresholdRecords(): Promise<ThresholdRecordRow[]> {
+    const { thresholdsXObjectApi } = this.props;
+    const apiKey = thresholdsXObjectApi?.xObjectApiKey;
+    if (!apiKey || String(apiKey).trim() === '') {
+      this.setState({ thresholdRecords: [] });
+      return [];
+    }
+
+    const defaultFields = [
+      'customItem1__c',
+      'customItem2__c',
+      'customItem3__c',
+      'customItem4__c',
+    ];
+    const fields = thresholdsXObjectApi?.fields?.length
+      ? [...thresholdsXObjectApi.fields]
+      : defaultFields;
+    const uniq = Array.from(new Set(fields));
+
+    try {
+      const result = await xObject.query({
+        xObjectApiKey: apiKey,
+        fields: uniq,
+        page: thresholdsXObjectApi?.page ?? 1,
+        pageSize: thresholdsXObjectApi?.pageSize ?? 500,
+      });
+
+      if (!result?.status) {
+        console.warn(
+          'StageTimeChart xObject.query(thresholds) not successful:',
+          result?.msg ?? result,
+        );
+        this.setState({ thresholdRecords: [] });
+        return [];
+      }
+
+      const records = (result.data ?? []) as Record<string, unknown>[];
+      const thresholdRecords: ThresholdRecordRow[] = records
+        .filter((r) => r && typeof r === 'object')
+        .map((r) => ({
+          ...r,
+          customItem3__c: parseNumberOrNaN(r.customItem3__c),
+          customItem4__c: parseNumberOrNaN(r.customItem4__c),
+        }));
+
+      this.setState({ thresholdRecords });
+      return thresholdRecords;
+    } catch (e) {
+      console.error('StageTimeChart failed to load threshold data:', e);
+      this.setState({ thresholdRecords: [] });
+      return [];
+    }
+  }
+
+  /** Request queryDataTask, parse table rows and attach target/limit for each row (from threshold row customItem3/4) */
+  async fetchChartRows(
+    thresholdRecords: ThresholdRecordRow[],
+  ): Promise<{ rows: StageTimeRow[]; error: string | null }> {
+    const { viewId, viewType } = this.props;
+    const oppType = this.state.oppType ?? 'New Business';
+    const userId = this.props.data?.__NeoCurrentUser?.id;
+
+    if (viewId == null || viewId === '' || userId == null || userId === '') {
+      return {
+        rows: [],
+        error: 'Missing viewId or current user id (data.__NeoCurrentUser.id)',
+      };
+    }
+
+    const filterObj =
+      this.state.filter &&
+      typeof this.state.filter === 'object' &&
+      !Array.isArray(this.state.filter)
+        ? this.state.filter
+        : {};
+
+    try {
+      const res = await request({
+        url: QUERY_DATA_TASK_URL,
+        method: 'POST',
+        data: buildQueryDataTaskFormBody({
+          viewId: String(viewId),
+          userId,
+          type: viewType ?? 'sync',
+          filter: filterObj,
+        }),
+        headers: {
+          'Content-Type': FORM_URLENCODED_UTF8,
+        },
+      });
+
+      const status = res?.status;
+      const table = res?.data;
+
+      if (status !== 0 || !Array.isArray(table)) {
+        return {
+          rows: [],
+          error: res?.message || res?.msg || 'Failed to query chart data',
+        };
+      }
+
+      const rowsMatrix = table as unknown[][];
+      if (!Array.isArray(rowsMatrix) || rowsMatrix.length < 2) {
+        return { rows: [], error: null };
+      }
+
+      const dataRows = rowsMatrix.slice(1);
+      const rows: StageTimeRow[] = [];
+      for (let i = 0; i < dataRows.length; i++) {
+        const row = dataRows[i];
+        if (!Array.isArray(row) || row.length < 3) continue;
+        const raw = row[2];
+        const actualTimeDisplay = String(raw ?? '');
+        const actualTime =
+          typeof raw === 'number' && Number.isFinite(raw)
+            ? raw
+            : parseDurationToDays(raw);
+        const stageName = String(row[0] ?? '');
+        if (isClosedOutcomeStage(stageName)) continue;
+        const stageKey = extractStageKeyFromStageName(stageName);
+        const th = this.getThresholdRecord(oppType, stageKey, thresholdRecords);
+        const targetPercent = th?.customItem3__c ?? NaN;
+        const limitPercent = th?.customItem4__c ?? NaN;
+
+        rows.push({
+          stageName,
+          actualTime,
+          actualTimeDisplay,
+          targetPercent: Number.isFinite(targetPercent) ? targetPercent : NaN,
+          limitPercent: Number.isFinite(limitPercent) ? limitPercent : NaN,
+        });
+      }
+
+      return { rows, error: null };
+    } catch (e: any) {
+      console.error('StageTimeChart queryDataTask failed:', e);
+      return {
+        rows: [],
+        error: e?.message || 'Network request failed',
+      };
+    }
+  }
+
+  /** 先拉阈值再拉图表，合并为 items */
+  async fetchAllData() {
+    this.setState({ loading: true, error: null });
+
+    const thresholdRecords = await this.fetchThresholdRecords();
+    const chartResult = await this.fetchChartRows(thresholdRecords);
+
+    if (chartResult.error) {
+      this.setState({
+        loading: false,
+        error: chartResult.error,
+        items: [],
+      });
+      return;
+    }
+
+    const items = buildStageTimeItems(chartResult.rows);
+
+    this.setState({
+      loading: false,
+      error: null,
+      items,
+    });
+  }
+
+  /** 刷新图表与阈值（设计器可绑定） */
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchAllData();
+  }
+
+  /** 设置 queryDataTask 的 filter 并重新拉数（设计器可绑定） */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (!filter) {
+      return;
+    }
+    const nextFilter = filter2chartFilter(filter);
+    console.log('[StageTimeChart__c] setFilter:', filter, nextFilter);
+    if (!isEqual(nextFilter, this.state.filter)) {
+      const nextOppType =
+        filter.businessTypeLabel != null &&
+        String(filter.businessTypeLabel).trim() !== ''
+          ? String(filter.businessTypeLabel).trim()
+          : this.state.oppType;
+      this.setState({ filter: nextFilter, oppType: nextOppType });
+    }
+  }
+
+  @NeoEvent.dispatch
+  onActiveStageChange(eventData?: any) {}
+
+  // 点击阶段切换时，更新当前激活的销售阶段
+  handleStageClick(stageName: string) {
+    this.onActiveStageChange({
+      activeStage: stageName,
+    });
+  }
+
+  /** 渲染标题、图例与阶段条形图 */
+  render() {
+    const {
+      title = 'Avg. Time in Stage',
+      // showAiButton = false,
+      onStageClick,
+      className,
+      style,
+    } = this.props;
+    const showAiButton = false;
+
+    const { loading, error, items } = this.state;
+
+    return (
+      <div
+        className={`stageTimeChart__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.17 01"
+      >
+        <Spin spinning={loading}>
+          <div className="chart-header">
+            <h3 className="chart-title">{title}</h3>
+            {showAiButton && (
+              <span
+                className="ai-btn"
+                onClick={() => console.log('AI Analysis clicked')}
+                title="AI Analysis"
+              >
+                ✨
+              </span>
+            )}
+          </div>
+
+          {error ? (
+            <div
+              className="stage-time-chart-error"
+              style={{ color: '#cf1322', fontSize: 12, marginBottom: 8 }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <div className="chart-legend">
+            <span className="legend-item">
+              <span className="legend-actual" />
+              Actual
+            </span>
+            <span className="legend-item">
+              <span className="legend-target" />
+              Target
+            </span>
+            <span className="legend-item">
+              <span className="legend-limit" />
+              Limit
+            </span>
+          </div>
+
+          <div className="chart-body">
+            {items.map((item, index) => (
+              <div
+                key={`${item.stageName}-${index}`}
+                className="stage-time-item"
+                onClick={() => this.handleStageClick(item.stageName)}
+              >
+                <div className="stage-time-header">
+                  <span className="stage-name">{item.stageName}</span>
+                  <span
+                    className="stage-time-value"
+                    style={{ color: item.actualColor }}
+                  >
+                    {item.actualTime}
+                  </span>
+                </div>
+                <div className="stage-time-bar">
+                  <div
+                    className="stage-time-actual"
+                    style={{
+                      width: `${item.barActualWidthPct}%`,
+                      backgroundColor: item.actualColor,
+                    }}
+                  />
+                  <div
+                    className="stage-time-target"
+                    style={{ left: `${item.barTargetLeftPct}%` }}
+                  />
+                  <div
+                    className="stage-time-limit"
+                    style={{ left: `${item.barLimitLeftPct}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default StageTimeChart;

package/template/neo-pipeline-cmps/src/components/stageTimeChart__c/model.ts

@@ -0,0 +1,106 @@
+export class StageTimeChartModel {
+  label: string = 'Stage Time';
+  description: string =
+    'Displays the average time spent in each sales stage; chart data from NeoBI queryDataTask, target/limit from XObject customItem3/4 (days)';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/barChart.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Avg. Time in Stage',
+    viewId: '4264466340118875',
+    viewType: 'sync',
+    showAiButton: true,
+    /** Opportunity type matching threshold record customItem2__c, default New Business */
+    oppType: 'New Business',
+    /** Thresholds: customItem1__c stage key, customItem2__c opportunity type, customItem3__c/4 target and limit (days) */
+    thresholdsXObjectApi: {
+      xObjectApiKey: 'customEntity105__c',
+      fields: [
+        'customItem1__c',
+        'customItem2__c',
+        'customItem3__c',
+        'customItem4__c',
+      ],
+      page: 1,
+      pageSize: 1000,
+    },
+  };
+
+  events = [
+    {
+      apiKey: 'onActiveStageChange',
+      label: 'Triggered on stage bar click',
+      helpText:
+        'Triggered when clicking a stage bar; event params include activeStage (current active stage)',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"activeStage","label":"Current active stage","type":"String"}],"label":"Event parameters","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: 'Refresh data',
+      helpTextKey:
+        'Re-request queryDataTask and threshold config to refresh stage time',
+    },
+    {
+      apiKey: 'setFilter',
+      label: 'Set filter conditions',
+      helpTextKey: 'Set the queryDataTask filter and re-fetch chart data',
+      funcInParams: [
+        {
+          apiKey: 'filter',
+          label: 'Filter conditions',
+          type: 'Object',
+          required: false,
+        },
+      ],
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'title',
+      label: 'Title',
+    },
+    {
+      type: 'panelInput',
+      name: 'viewId',
+      label: 'View ID',
+    },
+    {
+      type: 'panelInput',
+      name: 'viewType',
+      label: 'View type (request type)',
+    },
+    {
+      type: 'panelInput',
+      name: 'oppType',
+      label: 'Opportunity type (matching customItem2__c)',
+    },
+    /*
+    {
+      type: 'xObjectDataApi',
+      name: 'thresholdsXObjectApi',
+      label: 'Stage target/limit data source',
+      value: {
+        xObjectApiKey: '',
+        fields: [
+          'customItem1__c',
+          'customItem2__c',
+          'customItem3__c',
+          'customItem4__c',
+        ],
+      },
+      placeholder:
+        'Entity must contain customItem1__c (stage), customItem2__c (opportunity type), customItem3/4 (target/limit days)',
+      custom: true,
+    },
+    */
+  ];
+}
+
+export default StageTimeChartModel;

package/template/{neo-bi-cmps → neo-pipeline-cmps}/src/components/stageTimeChart__c/style.scss

@@ -1,10 +1,11 @@
-.stage-time-chart__c {
+.stageTimeChart__c {
   background: #fff;
   border-radius: 8px;
-  padding: 20px;
+  padding: 12px 20px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
+  min-height: 400px;
 
   .chart-header {
     display: flex;