neo-cmp-cli 1.13.16 → 1.13.18

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

@@ -0,0 +1,52 @@
+export class FilterBarModel {
+  label: string = 'Filter Bar';
+  description: string =
+    'Supports multi-dimensional filtering by date range, owner, business type, etc.';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/filter.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    closeDateOptions: [
+      { value: 201, label: 'This Week' },
+      { value: 301, label: 'This Month' },
+      { value: 401, label: 'This Quarter' },
+      { value: 'custom', label: 'Custom' },
+    ],
+    /** When matching the apiKey of an item returned by the business type API, use it as the default Business Type selection */
+    defaultBusiType: 'defaultBusiType_1', // New Business
+  };
+
+  /**
+   * Declare all events that the current component will trigger (matching @NeoEvent.dispatch method names in the component)
+   */
+  events = [
+    {
+      apiKey: 'onFiltersChange',
+      label: 'After filter conditions change',
+      helpText:
+        'Triggered when any filter option or custom time range changes; event params include closeDate, closeDateCustomRange (for non-custom: current relative period start/end Unix ms timestamps; for custom: RangePicker start/end), opportunityOwner (owner multi-select id array), businessType, businessTypeLabel (business type display name), changesSince, changesSinceCustomTime (for Custom Changes Since: selected date midnight; otherwise for non-custom Close Date: period start midnight)',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"data","label":"Current filter data","type":"Object"}],"label":"Event parameters","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'resetFilters',
+      label: 'Reset filters',
+      helpTextKey:
+        'Reset all filter conditions to defaults and trigger the "After filter conditions change" event',
+    },
+    {
+      apiKey: 'getFilters',
+      label: 'Get filters',
+      helpTextKey:
+        'Return current filter snapshot object; when closeDate is not custom, closeDateCustomRange is the relative period start/end timestamps; when custom, it is the custom range; businessTypeLabel is the business type display name; changesSinceCustomTime is the selected date midnight when Changes Since is Custom, otherwise the period start midnight when Close Date is not custom',
+    },
+  ];
+
+  propsSchema = [];
+}
+
+export default FilterBarModel;

package/template/neo-pipeline-cmps/src/components/filterBar__c/style.scss

@@ -0,0 +1,119 @@
+.filterBar__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 10px 12px;
+  align-items: flex-start;
+  align-content: flex-start;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  .filter-block {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 6px 8px;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .filter-field {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+
+    label {
+      font-size: 13px;
+      color: #666;
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    &.filter-field-range {
+      flex: 0 0 auto;
+    }
+  }
+
+  .filter-select {
+    min-width: 160px;
+    max-width: 100%;
+  }
+
+  .filter-select-wide {
+    min-width: 220px;
+  }
+
+  .filter-select-spin-wrap {
+    min-width: 220px;
+    min-height: 32px;
+  }
+
+  .filter-btn {
+    padding: 6px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background: #fff;
+
+    &.active {
+      background: #6366f1;
+      color: #fff;
+      border-color: #6366f1;
+    }
+  }
+
+  /* Changes Since question mark tooltip */
+  .help-tip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: help;
+    color: #999;
+    font-size: 12px;
+    margin-left: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+
+    .help-tip-text {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: #fff;
+      padding: 6px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      white-space: nowrap;
+      z-index: 100;
+      font-weight: 400;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 5px solid transparent;
+        border-top-color: #333;
+      }
+    }
+
+    &:hover .help-tip-text {
+      display: block;
+    }
+  }
+}

package/template/neo-pipeline-cmps/src/components/pipelineFunnel__c/README.md

@@ -0,0 +1,39 @@
+# PipelineFunnel Component
+
+Pipeline funnel chart component that displays the funnel conversion of the sales pipeline.
+
+## Usage
+
+```tsx
+import PipelineFunnel from './components/pipelineFunnel__c';
+
+<PipelineFunnel
+  title="Pipeline Funnel"
+  totalAmount="$11.1M"
+  stages={[
+    { name: 'Prospecting', amount: '$3.2M', count: 15, color: '#3b82f6' },
+    { name: 'Needs Analysis', amount: '$1.8M', count: 7, conversionRate: '56.3%', color: '#22c55e' },
+  ]}
+  onStageClick={(name) => console.log('Clicked:', name)}
+/>
+```
+
+## Props
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| title | Title | string | 'Pipeline Funnel' |
+| totalAmount | Total amount | string | '$11.1M' |
+| stages | Funnel stage data | FunnelStage[] | [] |
+| showAiButton | Show AI button | boolean | true |
+| onStageClick | Stage click callback | (stageName: string) => void | - |
+
+## FunnelStage
+
+| Property | Description | Type |
+|----------|-------------|------|
+| name | Stage name | string |
+| amount | Amount | string |
+| count | Count | number |
+| conversionRate | Conversion rate | string |
+| color | Color | string |

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

@@ -0,0 +1,416 @@
+/**
+ * @file Pipeline Funnel Chart Component
+ * @description Displays the funnel conversion of the sales pipeline, data from NeoBI queryDataTask
+ */
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { Spin } from 'antd';
+// @ts-ignore
+import { request } 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,
+  formatAmountDisplay,
+  getDefaultFilterWhereByProps,
+} from '../../utils/common';
+import {
+  buildFunnelChartOption,
+  filterOutClosedLostRows,
+  isTruthyProp,
+  parseRowsToStages,
+  type FunnelStage,
+} from '../../utils/pipelineFunnel';
+
+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 PipelineFunnelProps {
+  title?: string;
+  /** View ID, used in queryDataTask */
+  viewId?: string;
+  /** View type, corresponding to request parameter type */
+  viewType?: string;
+  /**
+   * When true, layer width decreases with stage order (classic funnel), layer height proportional to each stage's amount;
+   * When false (default), layer width is proportional to each stage's actual amount */
+  useClassicFunnelShape?: boolean;
+  /** Neo injected, contains current user */
+  data?: {
+    __NeoCurrentUser?: { id?: string | number };
+  };
+  showAiButton?: boolean;
+  onStageClick?: (stageName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface PipelineFunnelState {
+  loading: boolean;
+  error: string | null;
+  stages: FunnelStage[];
+  /** Sum of amount values across all stages, used for percentage calculation */
+  totalAmountNum: number;
+  /** Total amount label for top display */
+  totalAmountLabel: string;
+  /** Filter for request body, can be updated by component action setFilter */
+  filter: any;
+}
+
+class PipelineFunnel extends BaseCmp<PipelineFunnelProps, PipelineFunnelState> {
+  private chartRef = React.createRef<HTMLDivElement>();
+
+  private chartInstance: echarts.ECharts | null = null;
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor(props: PipelineFunnelProps) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: null,
+      stages: [],
+      totalAmountNum: 0,
+      totalAmountLabel: formatAmountDisplay(0),
+      filter: getDefaultFilterWhereByProps(props),
+    };
+
+    this.initChart = this.initChart.bind(this);
+    this.bindResize = this.bindResize.bind(this);
+    this.unbindResize = this.unbindResize.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.updateChart = this.updateChart.bind(this);
+    this.fetchChartData = this.fetchChartData.bind(this);
+    this.refreshData = this.refreshData.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchChartData();
+    this.initChart();
+    this.bindResize();
+
+    /*
+    // Listen to a broadcast event
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('PipelineFunnel received broadcast event updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+    */
+  }
+
+  componentDidUpdate(
+    prevProps: PipelineFunnelProps,
+    prevState: PipelineFunnelState,
+  ) {
+    const uid = this.props.data?.__NeoCurrentUser?.id;
+    const puid = prevProps.data?.__NeoCurrentUser?.id;
+    if (
+      this.props.viewId !== prevProps.viewId ||
+      this.props.viewType !== prevProps.viewType ||
+      uid !== puid
+    ) {
+      this.fetchChartData();
+    }
+
+    if (
+      prevState.stages !== this.state.stages ||
+      prevState.loading !== this.state.loading ||
+      isTruthyProp(prevProps.useClassicFunnelShape) !==
+        isTruthyProp(this.props.useClassicFunnelShape)
+    ) {
+      this.updateChart();
+    }
+
+    if (!this.chartInstance && this.chartRef.current) {
+      this.initChart();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unbindResize();
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
+
+  initChart() {
+    if (!this.chartRef.current || this.chartInstance) return;
+    this.chartInstance = echarts.init(this.chartRef.current);
+    this.updateChart();
+  }
+
+  bindResize() {
+    window.addEventListener('resize', this.handleWindowResize);
+    if (typeof ResizeObserver === 'undefined') return;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.chartInstance?.resize();
+      if (
+        isTruthyProp(this.props.useClassicFunnelShape) &&
+        this.state.stages.length > 0
+      ) {
+        this.updateChart();
+      }
+    });
+    const el = this.chartRef.current;
+    if (el) this.resizeObserver.observe(el);
+  }
+
+  unbindResize() {
+    window.removeEventListener('resize', this.handleWindowResize);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  handleWindowResize() {
+    this.chartInstance?.resize();
+    if (
+      isTruthyProp(this.props.useClassicFunnelShape) &&
+      this.state.stages.length > 0
+    ) {
+      this.updateChart();
+    }
+  }
+
+  updateChart() {
+    if (!this.chartInstance) return;
+    const { stages } = this.state;
+    const { onStageClick, useClassicFunnelShape } = this.props;
+    const classicShape = isTruthyProp(useClassicFunnelShape);
+    const el = this.chartRef.current;
+    const fallbackH = Math.max(stages.length * 52, 220);
+    const chartViewHeightPx = Math.max(el?.clientHeight ?? 0, fallbackH);
+
+    try {
+      if (stages.length === 0) {
+        this.chartInstance.clear();
+      } else {
+        const option = buildFunnelChartOption(stages, classicShape, {
+          chartViewHeightPx: classicShape ? chartViewHeightPx : undefined,
+          funnelGap: 2,
+        });
+        console.log('[PipelineFunnel__c] updateChart option:', option);
+        this.chartInstance.setOption(option, true);
+        this.chartInstance.off('click');
+        this.chartInstance.on(
+          'click',
+          (params: {
+            componentType?: string;
+            seriesType?: string;
+            seriesName?: string;
+            dataIndex?: number;
+          }) => {
+            if (
+              params.componentType === 'series' &&
+              params.seriesType === 'funnel' &&
+              params.seriesName !== 'PipelineName'
+            ) {
+              const idx =
+                typeof params.dataIndex === 'number' ? params.dataIndex : -1;
+              const name = stages[idx]?.name;
+              if (name) {
+                this.handleStageClick(name);
+                onStageClick?.(name);
+              }
+            }
+          },
+        );
+      }
+      requestAnimationFrame(() => this.chartInstance?.resize());
+    } catch (e) {
+      console.error('PipelineFunnel ECharts update failed:', e);
+    }
+  }
+
+  async fetchChartData() {
+    const { viewId, viewType } = this.props;
+    const userId = this.props.data?.__NeoCurrentUser?.id;
+
+    if (viewId == null || viewId === '' || userId == null || userId === '') {
+      this.setState({
+        loading: false,
+        error: 'Missing viewId or current user id (data.__NeoCurrentUser.id)',
+        stages: [],
+        totalAmountNum: 0,
+        totalAmountLabel: formatAmountDisplay(0),
+      });
+      return;
+    }
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const filterObj =
+        this.state.filter &&
+        typeof this.state.filter === 'object' &&
+        !Array.isArray(this.state.filter)
+          ? this.state.filter
+          : {};
+
+      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)) {
+        this.setState({
+          loading: false,
+          error: res?.message || res?.msg || 'Failed to query chart data',
+          stages: [],
+          totalAmountNum: 0,
+          totalAmountLabel: formatAmountDisplay(0),
+        });
+        return;
+      }
+
+      const filteredTable = filterOutClosedLostRows(table as unknown[][]);
+      const { stages, totalAmountNum } = parseRowsToStages(filteredTable);
+
+      this.setState({
+        loading: false,
+        error: null,
+        stages,
+        totalAmountNum,
+        totalAmountLabel: formatAmountDisplay(totalAmountNum),
+      });
+    } catch (e: any) {
+      console.error('PipelineFunnel queryDataTask failed:', e);
+      this.setState({
+        loading: false,
+        error: e?.message || 'Network request failed',
+        stages: [],
+        totalAmountNum: 0,
+        totalAmountLabel: formatAmountDisplay(0),
+      });
+    }
+  }
+
+  /**
+   * Refresh funnel chart data (bindable in designer)
+   */
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchChartData();
+  }
+
+  /**
+   * Set filter conditions and re-fetch data (bindable in designer)
+   * @param filter Filter object, used as the filter field of queryDataTask
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (!filter) {
+      return;
+    }
+    const nextFilter = filter2chartFilter(filter);
+    console.log('[PipelineFunnel__c] setFilter:', filter, nextFilter);
+    if (!isEqual(nextFilter, this.state.filter)) {
+      this.setState({ filter: nextFilter }, () => {
+        this.fetchChartData();
+      });
+    }
+  }
+
+  @NeoEvent.dispatch
+  onActiveStageChange(eventData?: any) {}
+
+  // Update the current active sales stage when clicking a stage
+  handleStageClick(stageName: string) {
+    this.onActiveStageChange({
+      activeStage: stageName,
+    });
+  }
+
+  render() {
+    const {
+      title = 'Pipeline Funnel',
+      // showAiButton = false,
+      className,
+      style,
+    } = this.props;
+    const showAiButton = false;
+
+    const { loading, error, stages, totalAmountLabel } = this.state;
+    const chartHeight = Math.max(stages.length * 52, 200);
+
+    return (
+      <div
+        className={`pipelineFunnel__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.17 01"
+      >
+        <Spin spinning={loading}>
+          <div className="funnel-header">
+            <h3 className="funnel-title">{title}</h3>
+            {showAiButton && (
+              <span
+                className="ai-btn"
+                onClick={() => console.log('AI Analysis clicked')}
+                title="AI Analysis"
+              >
+                ✨
+              </span>
+            )}
+          </div>
+
+          {error ? (
+            <div
+              className="funnel-error"
+              style={{ color: '#cf1322', fontSize: 12, marginBottom: 8 }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <div className="funnel-total">
+            <div className="funnel-total-label">Sales Amount</div>
+            <div className="funnel-total-value">{totalAmountLabel}</div>
+          </div>
+
+          <div className="funnel-body">
+            <div className="funnel-chart-wrap" style={{ height: chartHeight }}>
+              <div
+                ref={this.chartRef}
+                className="funnel-chart"
+                style={{ width: '100%', height: chartHeight }}
+              />
+            </div>
+          </div>
+
+          <div className="funnel-legend">
+            {stages.map((stage, index) => (
+              <span key={index} className="legend-item">
+                <span
+                  className="legend-dot"
+                  style={{ backgroundColor: stage.color }}
+                />
+                {stage.name}
+              </span>
+            ))}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default PipelineFunnel;

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

@@ -0,0 +1,80 @@
+export class PipelineFunnelModel {
+  label: string = 'Pipeline Funnel Chart';
+  description: string =
+    'Displays the funnel conversion of the sales pipeline, visually showing amount and count at each stage';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/funnel.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Pipeline Funnel',
+    viewId: '4264464770007375',
+    viewType: 'sync',
+    showAiButton: true,
+    /** When true, layer width decreases with stage order (classic shape), layer height proportional to amount; default false, layer width proportional to actual amount */
+    useClassicFunnelShape: false,
+  };
+
+  events = [
+    {
+      apiKey: 'onActiveStageChange',
+      label: 'Triggered on stage click',
+      helpText:
+        'Triggered when clicking a funnel stage; 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 to refresh funnel chart data',
+    },
+    {
+      apiKey: 'setFilter',
+      label: 'Set filter conditions',
+      helpTextKey: 'Set the report component filter and re-fetch 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: 'panelSelect',
+      name: 'useClassicFunnelShape',
+      label: 'Funnel shape',
+      value: false,
+      options: [
+        { label: 'Shape based on actual amount', value: false },
+        { label: 'Classic funnel (layer height by value)', value: true },
+      ],
+      clearable: false,
+    },
+  ];
+}
+
+export default PipelineFunnelModel;