neo-cmp-cli 1.13.16 → 1.13.18

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

@@ -0,0 +1,83 @@
+.pipelineFunnel__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  min-height: 400px;
+
+  .funnel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .funnel-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .ai-btn {
+    cursor: pointer;
+    font-size: 16px;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .funnel-total {
+    text-align: center;
+    margin-bottom: 0;
+
+    .funnel-total-label {
+      font-size: 12px;
+      color: #888;
+    }
+
+    .funnel-total-value {
+      font-size: 20px;
+      font-weight: 700;
+    }
+  }
+
+  .funnel-body {
+    min-height: 220px;
+  }
+
+  .funnel-chart-wrap {
+    width: 100%;
+    position: relative;
+  }
+
+  .funnel-chart {
+    min-height: 200px;
+  }
+
+  .funnel-legend {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 8px;
+    font-size: 11px;
+    color: #666;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}

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

@@ -0,0 +1,470 @@
+/**
+ * @file Opportunity Health Assessment Result Display
+ * @description Calls /rest/ai/v2.0/agent/apps/health_assessment/get_health_assessment_result, displays assessmentConclusion summary and ECharts radar chart based on assessmentDimension
+ */
+import * as React from 'react';
+import * as echarts from 'echarts';
+// @ts-ignore
+import { request } from 'neo-open-api';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+const HEALTH_ASSESSMENT_URL =
+  '/rest/ai/v2.0/agent/apps/health_assessment/get_health_assessment_result';
+
+export type HealthScoreRow = { name: string; score: number };
+
+interface ShowHealthResultProps {
+  /** Entity API Key, corresponding to request body object_api_key */
+  xObjectApiKey?: string;
+  /** Business data ID, corresponding to request body data_id */
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  data?: any;
+}
+
+interface ShowHealthResultState {
+  loading: boolean;
+  error: string | null;
+  summaryText: string;
+  scoreRows: HealthScoreRow[];
+}
+
+function unwrapResultRecord(res: any): Record<string, unknown> {
+  if (!res || typeof res !== 'object') return {};
+  const r = res as Record<string, unknown>;
+  const inner = r.data;
+  if (inner && typeof inner === 'object' && !Array.isArray(inner)) {
+    const d = inner as Record<string, unknown>;
+    if ('assessmentConclusion' in d || 'assessmentDimension' in d) {
+      return d;
+    }
+  }
+  if ('assessmentConclusion' in r || 'assessmentDimension' in r) {
+    return r;
+  }
+  if (inner && typeof inner === 'object') {
+    return inner as Record<string, unknown>;
+  }
+  return {};
+}
+
+function parseSummaryFromConclusion(conclusion: unknown): string {
+  if (conclusion == null) return '';
+  if (typeof conclusion === 'string') return conclusion.trim();
+  if (Array.isArray(conclusion)) {
+    const parts = conclusion
+      .map((x: any) => {
+        if (!x || typeof x !== 'object') return '';
+        return (
+          x.summary ?? x.conclusion ?? x.desc ?? x.description ?? x.remark ?? ''
+        );
+      })
+      .filter((s: string) => String(s).trim());
+    return parts.join('\n').trim();
+  }
+  if (typeof conclusion === 'object') {
+    const o = conclusion as Record<string, unknown>;
+    const text =
+      o.summary ?? o.conclusion ?? o.text ?? o.assessmentSummary ?? '';
+    return String(text ?? '').trim();
+  }
+  return String(conclusion).trim();
+}
+
+/**
+ * Radar chart only uses the API field assessmentDimension, which must be { name, score }[].
+ * Does not read conclusion or parse other key names (such as label / value / items wrappers).
+ */
+function scoreRowsFromAssessmentDimension(
+  dimension: unknown,
+): HealthScoreRow[] {
+  if (!Array.isArray(dimension)) return [];
+  const rows: HealthScoreRow[] = [];
+  for (const item of dimension) {
+    if (!item || typeof item !== 'object') continue;
+    const o = item as Record<string, unknown>;
+    if (!('name' in o) || !('score' in o)) continue;
+    const name = String(o.name ?? '').trim();
+    if (!name) continue;
+    const scoreRaw = o.score;
+    let score = 0;
+    if (typeof scoreRaw === 'number' && Number.isFinite(scoreRaw)) {
+      score = scoreRaw;
+    } else if (scoreRaw != null && scoreRaw !== '') {
+      const p = parseFloat(String(scoreRaw));
+      score = Number.isFinite(p) ? p : 0;
+    }
+    rows.push({ name, score });
+  }
+  return rows;
+}
+
+/**
+ * Radar axis outer label: no 6-character truncation; English wraps by word, non-spaced text (e.g. Chinese) wraps at fixed width.
+ * When too many lines, only the last line gets an ellipsis, other lines are shown as completely as possible.
+ */
+function wrapRadarAxisName(
+  text: string,
+  maxLineLen = 18,
+  maxLines = 8,
+): string {
+  const t = text.trim();
+  if (!t) return t;
+  if (t.length <= maxLineLen) return t;
+
+  const lines: string[] = [];
+  const push = (s: string) => {
+    if (s) lines.push(s);
+  };
+
+  if (/\s/.test(t)) {
+    const words = t.split(/\s+/).filter(Boolean);
+    let cur = '';
+    for (const w of words) {
+      if (w.length > maxLineLen) {
+        push(cur);
+        cur = '';
+        for (let i = 0; i < w.length; i += maxLineLen) {
+          push(w.slice(i, i + maxLineLen));
+        }
+        continue;
+      }
+      const next = cur ? `${cur} ${w}` : w;
+      if (next.length <= maxLineLen) cur = next;
+      else {
+        push(cur);
+        cur = w;
+      }
+    }
+    push(cur);
+  } else {
+    for (let i = 0; i < t.length; i += maxLineLen) {
+      push(t.slice(i, i + maxLineLen));
+    }
+  }
+
+  if (lines.length <= maxLines) return lines.join('\n');
+
+  const head = lines.slice(0, maxLines - 1);
+  const rest = lines.slice(maxLines - 1).join('');
+  const last =
+    rest.length > maxLineLen ? `${rest.slice(0, maxLineLen - 1)}…` : `${rest}…`;
+  return [...head, last].join('\n');
+}
+
+function buildHealthRadarOption(
+  items: HealthScoreRow[],
+): echarts.EChartsOption {
+  if (!items.length) {
+    return {
+      graphic: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'middle',
+          style: {
+            text: 'No radar chart dimension data available',
+            fill: '#999',
+            fontSize: 12,
+          },
+        },
+      ],
+    };
+  }
+
+  // Each axis has its own max to avoid low-score dimensions being squeezed; health scores are typically 0-100
+  const indicator = items.map((i) => ({
+    name: i.name,
+    max: Math.max(10, i.score, 1),
+  }));
+
+  return {
+    tooltip: {
+      trigger: 'item',
+    },
+    radar: {
+      indicator,
+      radius: '52%',
+      center: ['50%', '52%'],
+      axisName: {
+        color: '#666',
+        fontSize: 10,
+        lineHeight: 13,
+        formatter(name: string) {
+          return wrapRadarAxisName(name);
+        },
+      },
+      splitLine: {
+        lineStyle: { color: '#e5e7eb' },
+      },
+      splitArea: { show: false },
+      axisLine: {
+        lineStyle: { color: '#e5e7eb' },
+      },
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: items.map((i) => i.score),
+            name: 'Health Score',
+            areaStyle: {
+              color: 'rgba(99,102,241,0.2)',
+            },
+            lineStyle: {
+              color: '#6366f1',
+              width: 2,
+            },
+            itemStyle: {
+              color: '#6366f1',
+            },
+          },
+        ],
+      },
+    ],
+  };
+}
+
+class ShowHealthResult extends BaseCmp<
+  ShowHealthResultProps,
+  ShowHealthResultState
+> {
+  private radarChartRef = React.createRef<HTMLDivElement>();
+
+  private radarChartInstance: echarts.ECharts | null = null;
+
+  private radarResizeObserver: ResizeObserver | null = null;
+
+  constructor(props: ShowHealthResultProps) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: null,
+      summaryText: '',
+      scoreRows: [],
+    };
+
+    this.initRadarChart = this.initRadarChart.bind(this);
+    this.updateRadarChart = this.updateRadarChart.bind(this);
+    this.bindRadarResize = this.bindRadarResize.bind(this);
+    this.unbindRadarResize = this.unbindRadarResize.bind(this);
+    this.handleRadarWindowResize = this.handleRadarWindowResize.bind(this);
+    this.disposeRadarChart = this.disposeRadarChart.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchHealthAssessment();
+  }
+
+  componentDidUpdate(
+    prevProps: ShowHealthResultProps,
+    prevState: ShowHealthResultState,
+  ) {
+    if (
+      prevProps.id !== this.props.id ||
+      prevProps.xObjectApiKey !== this.props.xObjectApiKey
+    ) {
+      this.fetchHealthAssessment();
+    }
+
+    const hasBlock =
+      !this.state.error &&
+      (this.state.summaryText || this.state.scoreRows.length > 0);
+
+    if (!hasBlock) {
+      if (this.radarChartInstance) {
+        this.disposeRadarChart();
+      }
+      return;
+    }
+
+    if (!this.radarChartInstance && this.radarChartRef.current) {
+      this.initRadarChart();
+    } else if (prevState.scoreRows !== this.state.scoreRows) {
+      this.updateRadarChart();
+    }
+  }
+
+  componentWillUnmount() {
+    this.disposeRadarChart();
+  }
+
+  disposeRadarChart() {
+    this.unbindRadarResize();
+    if (this.radarChartInstance) {
+      this.radarChartInstance.dispose();
+      this.radarChartInstance = null;
+    }
+  }
+
+  initRadarChart() {
+    if (!this.radarChartRef.current || this.radarChartInstance) return;
+    this.radarChartInstance = echarts.init(this.radarChartRef.current);
+    this.bindRadarResize();
+    this.updateRadarChart();
+  }
+
+  bindRadarResize() {
+    if (typeof window === 'undefined') return;
+    window.addEventListener('resize', this.handleRadarWindowResize);
+    if (typeof ResizeObserver === 'undefined') return;
+    this.radarResizeObserver = new ResizeObserver(() => {
+      this.radarChartInstance?.resize();
+    });
+    const el = this.radarChartRef.current;
+    if (el) this.radarResizeObserver.observe(el);
+  }
+
+  unbindRadarResize() {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.handleRadarWindowResize);
+    }
+    this.radarResizeObserver?.disconnect();
+    this.radarResizeObserver = null;
+  }
+
+  handleRadarWindowResize() {
+    this.radarChartInstance?.resize();
+  }
+
+  updateRadarChart() {
+    if (!this.radarChartInstance) return;
+    const opt = buildHealthRadarOption(this.state.scoreRows);
+    this.radarChartInstance.setOption(opt, { notMerge: true });
+    requestAnimationFrame(() => {
+      this.radarChartInstance?.resize();
+    });
+  }
+
+  async fetchHealthAssessment() {
+    const xObjectApiKey = this.props.xObjectApiKey;
+    const id = this.props.id;
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const res = await request({
+        url: HEALTH_ASSESSMENT_URL,
+        method: 'POST',
+        data: {
+          data_id: id,
+          object_api_key: String(xObjectApiKey),
+        },
+      });
+
+      const record = unwrapResultRecord(res);
+      const conclusion = record.assessmentConclusion;
+      const dimension = record.assessmentDimension;
+
+      const summaryText = parseSummaryFromConclusion(conclusion);
+      const scoreRows = scoreRowsFromAssessmentDimension(dimension);
+
+      this.setState(
+        {
+          loading: false,
+          error: null,
+          summaryText,
+          scoreRows,
+        },
+        () => {
+          if (!this.radarChartInstance && this.radarChartRef.current) {
+            this.initRadarChart();
+          } else {
+            this.updateRadarChart();
+          }
+        },
+      );
+    } catch (e: any) {
+      console.error('showHealthResult health assessment API failed:', e);
+      this.setState(
+        {
+          loading: false,
+          error: e?.message || 'Request failed',
+          summaryText: '',
+          scoreRows: [],
+        },
+        () => this.disposeRadarChart(),
+      );
+    }
+  }
+
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchHealthAssessment();
+  }
+
+  render() {
+    const { className, style } = this.props;
+    const { loading, error, summaryText, scoreRows } = this.state;
+
+    console.log('showHealthResult__c:', scoreRows, this.props);
+
+    return (
+      <div
+        className={`showHealthResult__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.17 01"
+      >
+        {loading && (
+          <div className="showHealthResult__c__loading" aria-busy="true">
+            <span className="showHealthResult__c__loadingDot" />
+            <span className="showHealthResult__c__loadingDot" />
+            <span className="showHealthResult__c__loadingDot" />
+            <span className="showHealthResult__c__loadingText">
+              Fetching health assessment...
+            </span>
+          </div>
+        )}
+
+        {error && !loading && (
+          <div
+            className="showHealthResult__c__placeholder showHealthResult__c__placeholder--error"
+            role="alert"
+          >
+            <div className="showHealthResult__c__placeholderBody">
+              <div className="showHealthResult__c__placeholderTitle">
+                Unable to retrieve assessment results at this time
+              </div>
+              <div className="showHealthResult__c__placeholderMsg">{error}</div>
+            </div>
+          </div>
+        )}
+
+        {!loading && !error && !summaryText && !scoreRows.length && (
+          <div className="showHealthResult__c__placeholder showHealthResult__c__placeholder--empty">
+            <div className="showHealthResult__c__placeholderBody">
+              <div className="showHealthResult__c__placeholderTitle">
+                No assessment data available
+              </div>
+              <div className="showHealthResult__c__placeholderHint">
+                The current record may not have generated a health assessment
+                conclusion yet. Please try again later or check if the data is
+                complete.
+              </div>
+            </div>
+          </div>
+        )}
+
+        {(summaryText || scoreRows.length > 0) && (
+          <>
+            <div className="showHealthResult__c__summary" id="stSummary">
+              {summaryText || ' '}
+            </div>
+            <div
+              ref={this.radarChartRef}
+              className="showHealthResult__c__radar"
+              style={{ width: '100%', height: 300 }}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+}
+
+export default ShowHealthResult;

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

@@ -0,0 +1,45 @@
+/**
+ * @file Opportunity Health Assessment Result Display - Editor model
+ */
+export class ShowHealthResultModel {
+  label: string = 'Health Score Display';
+
+  description: string =
+    'Calls the health assessment API to display conclusion summary and radar chart';
+
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/detail.svg';
+
+  targetPage: string[] = ['all'];
+
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    xObjectApiKey: 'opportunity',
+    id: '1627009883848800',
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: 'Refresh health data',
+      helpTextKey: 'Re-request the health assessment API',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'xObjectApiKey',
+      label: 'Entity key (xObjectApiKey)',
+      placeholder: 'e.g. opportunity',
+    },
+    {
+      type: 'panelInput',
+      name: 'id',
+      label: 'Business data ID (data_id)',
+      placeholder: 'Business record primary key',
+    },
+  ];
+}
+
+export default ShowHealthResultModel;