win-chart 1.0.0 → 1.0.2

package/src/components/win-card/components/WinRankContent.tsx

@@ -1,102 +0,0 @@
-import { CnBox } from '@cainiaofe/cn-ui';
-import { Fragment } from 'react';
-import { HoverView } from 'src/components/hover-view';
-import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
-import { WorkbenchService } from 'src/services/WorkbenchService';
-import { styled } from 'styled-components';
-
-export const WinRankContent = () => {
-  return (
-    <RequestWrapper service={WorkbenchService.queryWinRankList}>
-      {(data) => {
-        return (
-          <Wrapper>
-            {data.map((item, index) => (
-              <div key={item.title}>
-                <div data-title>{item.title}</div>
-                <div data-content>
-                  {item.list?.map((info, i) => {
-                    const isTopFive = i < 5;
-                    const getMarginStyle = () => {
-                      if (i === 4) {
-                        return {
-                          marginBottom: 4,
-                        };
-                      }
-                    };
-                    return (
-                      <Fragment key={info.label + info.children}>
-                        {index === 0 ? (
-                          <Mark style={getMarginStyle()}>
-                            {isTopFive ? '❤️' : '💪'}
-                          </Mark>
-                        ) : (
-                          <InfoDecoration
-                            style={{
-                              backgroundColor: isTopFive
-                                ? 'rgba(250,107,105,0.1)'
-                                : 'rgba(177,185,199,0.2)',
-                              ...getMarginStyle(),
-                            }}
-                          >
-                            <div data-label>
-                              <HoverView content={info.label} />
-                            </div>
-                            <span>{info.value}</span>
-                          </InfoDecoration>
-                        )}
-                      </Fragment>
-                    );
-                  })}
-                </div>
-              </div>
-            ))}
-          </Wrapper>
-        );
-      }}
-    </RequestWrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: grid;
-  grid: auto-flow / 36px repeat(4, 1fr);
-  gap: 8px;
-  overflow: auto;
-
-  [data-title] {
-    font-weight: 500;
-    font-size: 12px;
-    color: #394252;
-    line-height: 1;
-    margin-bottom: 16px;
-    display: grid;
-    place-items: center;
-  }
-
-  [data-content] {
-    display: grid;
-    grid: auto-flow 24px / 1fr;
-    gap: 12px;
-  }
-`;
-
-const Mark = styled.div`
-  display: grid;
-  place-items: center;
-`;
-
-const InfoDecoration = styled(CnBox).attrs({
-  direction: 'row',
-  justify: 'space-between',
-  align: 'center',
-})`
-  border-radius: 500px;
-  font-size: 12px;
-  color: #272f3d;
-  padding: 0 10px;
-
-  [data-label] {
-    width: 80px;
-  }
-`;

package/src/components/win-card/index.tsx

@@ -1,298 +0,0 @@
-import $i18n from 'panda-i18n';
-import { IndicatorService } from 'src/services/IndicatorService';
-import { IIndicatorCardConfig } from '@/types';
-import { IndicatorArea } from './components/IndicatorArea';
-import { RequestWrapper } from '../win-wrappers/request-wrapper';
-import { CardTitleWrapper, CardWrapper } from '../win-wrappers/card-wrapper';
-import { WinCardChartType } from 'src/types/enum';
-import { INDICATOR_CONFIG_BASE_URL } from '../../utils/const';
-import { MatterContent } from './components/MatterContent';
-import { Indicator } from './components/Indicator';
-import { ChartContent } from './components/ChartContent';
-import { CnBox, CnDropdown, CnMenu, CnMenuItem, Icon } from '@cainiaofe/cn-ui';
-import {
-  IndicatorSelectDecoration,
-  SelectDecoration,
-} from './components/SelectDecoration';
-import {
-  checkEntityArr,
-  getHandleOpenLink,
-  getListLabel,
-  unitList,
-} from 'src/utils';
-import { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
-import { HoverView } from '../hover-view';
-import { useCardOptionList } from 'src/hooks/useCardOptionList';
-import { VisionUserConfigContext } from '../VisionUserConfigContext';
-import { WinChartType } from '../win-chart';
-import { WinRankContent } from './components/WinRankContent';
-import { useHasIntersected } from '@/hooks/useHasIntersected';
-
-interface IProps {
-  id: number;
-  config?: IIndicatorCardConfig;
-  style?: CSSProperties;
-}
-
-export const WinCard = ({ id, config, style }: IProps) => {
-  if (config) {
-    return <ShowCard configData={config} style={style} />;
-  }
-
-  return (
-    <RequestWrapper
-      requestData={{ url: `${INDICATOR_CONFIG_BASE_URL}?id=${id}` }}
-      service={IndicatorService.getConfigInfo}
-      style={{
-        width: '100%',
-        height: '100%',
-        ...style,
-      }}
-    >
-      {(configData) => {
-        return (
-          <ShowCard
-            configData={configData}
-            style={{ height: configData.colHeight * 128 }}
-          />
-        );
-      }}
-    </RequestWrapper>
-  );
-};
-
-const ShowCard = ({
-  configData,
-  style,
-}: {
-  configData: IIndicatorCardConfig;
-  style?: CSSProperties;
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const hasIntersected = useHasIntersected(wrapperRef);
-  const orgLevelList = useCardOptionList(
-    hasIntersected && configData.commonConfig.orgLevel
-      ? configData.id
-      : undefined,
-  );
-  const [curOrgLevelValue, setCurOrgLevelValue] = useState<string>();
-  const isSingleIndicator = configData.chartType === WinCardChartType.INDICATOR;
-  const hasOrgLevel = !!configData.commonConfig.orgLevel;
-  const isCommonTitle = ![WinCardChartType.CUSTOM_CARD].includes(
-    configData.chartType,
-  );
-  const jumpUrl = configData.detailUrl;
-  const menuItems = [
-    ...(jumpUrl
-      ? [
-          <CnMenuItem key="jump" onClick={getHandleOpenLink(jumpUrl)}>
-            {$i18n.get({ id: 'ViewDetails', dm: '查看详情' })}
-          </CnMenuItem>,
-        ]
-      : []),
-  ];
-
-  const visionUserConfig = useContext(VisionUserConfigContext);
-  const hasInitOrgLevelRef = useRef(false);
-
-  useEffect(() => {
-    if (orgLevelList.length !== 0 && visionUserConfig) {
-      const configOrgLevelVal =
-        visionUserConfig[configData.commonConfig.orgLevel];
-      const valueInList = orgLevelList
-        .map((item) => item.value)
-        .includes(configOrgLevelVal);
-
-      if (!hasInitOrgLevelRef.current) {
-        // 第一次赋值
-        setCurOrgLevelValue(
-          valueInList ? configOrgLevelVal : orgLevelList[0].value,
-        );
-        hasInitOrgLevelRef.current = true;
-      } else {
-        // 用户配置切换赋值
-        if (valueInList) {
-          setCurOrgLevelValue(configOrgLevelVal);
-        }
-      }
-    }
-  }, [configData.commonConfig.orgLevel, orgLevelList, visionUserConfig]);
-
-  // 单位
-  const unit = getListLabel(unitList, configData.indicatorConfig[0]?.unit);
-
-  return (
-    <CardWrapper ref={wrapperRef} style={style}>
-      {isCommonTitle && (
-        <CnBox direction="row" justify="space-between" style={{ height: 20 }}>
-          <CardTitleWrapper
-            data-card-id={configData.id}
-            style={{
-              maxWidth: isSingleIndicator || !hasOrgLevel ? '80%' : '45%',
-              position: 'relative',
-              ...([
-                WinCardChartType.INDICATOR,
-                WinCardChartType.INDICATOR_AREA,
-              ].includes(configData.chartType) && {
-                fontSize: '12px',
-                fontWeight: 'normal',
-              }),
-            }}
-          >
-            <HoverView content={configData.name} />
-          </CardTitleWrapper>
-          <CnBox direction="row" align="center">
-            {hasOrgLevel && !isSingleIndicator && (
-              <SelectDecoration
-                value={curOrgLevelValue}
-                dataSource={orgLevelList}
-                onChange={setCurOrgLevelValue}
-              />
-            )}
-
-            {checkEntityArr(menuItems) && (
-              <div
-                style={{ transform: 'translate(8px, -4px) rotate(0.25turn)' }}
-              >
-                <CnDropdown
-                  trigger={
-                    <Icon type="ellipsis" style={{ cursor: 'pointer' }} />
-                  }
-                >
-                  <CnMenu style={{ width: 15 }}>{menuItems}</CnMenu>
-                </CnDropdown>
-              </div>
-            )}
-          </CnBox>
-        </CnBox>
-      )}
-
-      {getShowContent({
-        configData,
-        hasOrgLevel,
-        orgLevelVal: curOrgLevelValue,
-        unit,
-      })}
-      {isSingleIndicator && (
-        <CnBox spacing={8}>
-          {hasOrgLevel && (
-            <IndicatorSelectDecoration
-              value={curOrgLevelValue}
-              dataSource={orgLevelList}
-              onChange={setCurOrgLevelValue}
-            />
-          )}
-        </CnBox>
-      )}
-    </CardWrapper>
-  );
-};
-
-const getShowContent = ({
-  configData,
-  hasOrgLevel,
-  orgLevelVal,
-  unit,
-}: {
-  configData: IIndicatorCardConfig;
-  orgLevelVal?: string;
-  unit?: string;
-  hasOrgLevel: boolean;
-  color?: string[];
-}) => {
-  const data = {
-    configData,
-    orgLevelVal,
-    unit,
-  };
-
-  if (hasOrgLevel && !orgLevelVal) {
-    return null;
-  }
-
-  switch (configData.chartType) {
-    case WinCardChartType.INDICATOR:
-      return <Indicator {...data} />;
-
-    case WinCardChartType.INDICATOR_AREA:
-      return <IndicatorArea {...data} />;
-
-    case WinCardChartType.DUAL_LINE_BAR_CHART:
-      return (
-        <ChartContent winChartType={WinChartType.DUAL_LINE_BAR} {...data} />
-      );
-
-    case WinCardChartType.AREA_CHART:
-      return <ChartContent winChartType={WinChartType.AREA} {...data} />;
-
-    case WinCardChartType.LINE_CHART:
-      return <ChartContent winChartType={WinChartType.LINE} {...data} />;
-
-    case WinCardChartType.COLUMN_CHART:
-      return <ChartContent winChartType={WinChartType.COLUMN} {...data} />;
-
-    case WinCardChartType.STACK_COLUMN_CHART:
-      return (
-        <ChartContent winChartType={WinChartType.STACK_COLUMN} {...data} />
-      );
-
-    case WinCardChartType.FUNNEL_CHART:
-      return <ChartContent winChartType={WinChartType.FUNNEL} {...data} />;
-
-    case WinCardChartType.BAR_CHART:
-      return <ChartContent winChartType={WinChartType.BAR} {...data} />;
-
-    case WinCardChartType.PIE_CHART:
-      return <ChartContent winChartType={WinChartType.PIE} {...data} />;
-
-    case WinCardChartType.PIE_CHART_RESERVE:
-      return (
-        <ChartContent
-          reserveValueWithLabelType
-          winChartType={WinChartType.PIE}
-          {...data}
-        />
-      );
-
-    case WinCardChartType.CYCLE_CHART:
-      return <ChartContent winChartType={WinChartType.CYCLE} {...data} />;
-
-    case WinCardChartType.RADAR_CHART:
-      return <ChartContent winChartType={WinChartType.RADAR} {...data} />;
-
-    case WinCardChartType.RADAR_CHART_RESERVE:
-      return (
-        <ChartContent
-          reserveValueWithLabelType
-          winChartType={WinChartType.RADAR}
-          {...data}
-        />
-      );
-
-    case WinCardChartType.CUSTOM_CARD:
-      return getCustomCardContent(configData.name);
-
-    default:
-      return undefined;
-  }
-};
-
-const getCustomCardContent = (name: string) => {
-  switch (name) {
-    case 'WIN排行榜':
-      return <WinRankContent />;
-
-    case '工作台待办':
-      return <MatterContent />;
-
-    default:
-      return (
-        <div>
-          {$i18n.get({
-            id: 'TheCustomSliceWasNotFoundPleaseC_1572163781',
-            dm: '未找到该自定义该片，请检查名称是否正确',
-          })}
-        </div>
-      );
-  }
-};

package/src/components/win-card/utils/interface.ts

@@ -1,12 +0,0 @@
-import { IIndicatorCardConfig } from '@/types';
-
-export interface IContentProps {
-  color?: string[];
-  configData: IIndicatorCardConfig;
-  theme?: string;
-  orgLevelVal?: string;
-  unit?: string;
-  extraCondition?: {
-    [p: string]: string;
-  };
-}

package/src/components/win-card/utils/tool.ts

@@ -1,11 +0,0 @@
-import $i18n from 'panda-i18n';
-
-export const getExtraLabel = (subTitle?: number) => {
-  switch (subTitle) {
-    case 1:
-      return $i18n.get({ id: 'TERM.GoalGoals', dm: '目标' });
-
-    default:
-      return undefined;
-  }
-};

package/src/components/win-card-mobile/components/ChartContent.tsx

@@ -1,47 +0,0 @@
-import { IndicatorService } from 'src/services/IndicatorService';
-import { INDICATOR_DATA_BASE_URL, handleAddQuery } from '@/utils';
-import { IContentProps } from '../utils/interface';
-import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
-import { WinChart, WinChartType } from 'src/components/win-chart';
-
-interface IProps extends IContentProps {
-  winChartType: WinChartType;
-  reserveValueWithLabelType?: boolean;
-}
-
-export const ChartContent = ({
-  configData,
-  orgLevelVal,
-  winChartType,
-  reserveValueWithLabelType,
-}: IProps) => {
-  return (
-    <RequestWrapper
-      requestData={{
-        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
-          id: configData.id,
-          dataAccVal: configData.dataAccCode,
-          orgLevelVal,
-        }),
-      }}
-      service={IndicatorService.getDataInfoList}
-    >
-      {(data) => {
-        return (
-          <WinChart
-            sort={configData.commonConfig.sort}
-            yStart={configData.commonConfig.yStart}
-            color={configData.commonConfig.color}
-            xAxisLabelLength={configData.commonConfig.xAxisLabelLength}
-            xAxisLabelRotate={configData.commonConfig.xAxisLabelRotate}
-            reserveValueWithLabelType={reserveValueWithLabelType}
-            data={data.list0}
-            extraData={data.list1}
-            chartType={winChartType}
-            style={{ height: 'calc(100% - 0.4rem)' }}
-          />
-        );
-      }}
-    </RequestWrapper>
-  );
-};

package/src/components/win-card-mobile/components/DualLineBar.tsx

@@ -1,61 +0,0 @@
-import { IndicatorService } from 'src/services/IndicatorService';
-import {
-  arrayDeduplication,
-  getListLabel,
-  handleAddQuery,
-  unitList,
-} from '@/utils';
-import { IContentProps } from '../utils/interface';
-import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
-import { INDICATOR_DATA_BASE_URL } from '../../../utils/const';
-import { WinChart, WinChartType } from 'src/components/win-chart';
-import { UnitWrapper } from 'src/components/win-wrappers/card-wrapper';
-
-export const DualLineBar = ({ configData, orgLevelVal }: IContentProps) => {
-  const units =
-    arrayDeduplication(configData.indicatorConfig.map((item) => item.unit)) ??
-    [];
-  const unit0 = getListLabel(unitList, units[0]);
-  const unit1 = getListLabel(unitList, units[1]);
-
-  return (
-    <RequestWrapper
-      requestData={{
-        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
-          id: configData.id,
-          dataAccVal: configData.dataAccCode,
-          orgLevelVal,
-        }),
-      }}
-      service={IndicatorService.getDataInfoList}
-    >
-      {(data) => {
-        return (
-          <div
-            style={{
-              height: '100%',
-              position: 'relative',
-            }}
-          >
-            <WinChart
-              chartType={WinChartType.DUAL_LINE_BAR}
-              data={data.list0 ?? []}
-              extraData={data.list1 ?? []}
-            />
-            {/* {!!unit0 && (
-              <UnitWrapper
-                style={{
-                  position: 'absolute',
-                  left: 0,
-                  bottom: 14,
-                }}
-              >
-                ({unit0}, {unit1})
-              </UnitWrapper>
-            )} */}
-          </div>
-        );
-      }}
-    </RequestWrapper>
-  );
-};

package/src/components/win-card-mobile/components/Indicator.tsx

@@ -1,42 +0,0 @@
-import { IndicatorService } from 'src/services/IndicatorService';
-import { handleAddQuery, INDICATOR_DATA_BASE_URL } from '@/utils';
-import { IContentProps } from '../utils/interface';
-import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
-import { getExtraLabel } from '../utils/tool';
-import { IndicatorInfo } from './IndicatorInfo';
-
-export const Indicator = ({ configData, unit, orgLevelVal }: IContentProps) => {
-  return (
-    <RequestWrapper
-      errorBoxHeight={50}
-      noEmptyBox
-      requestData={{
-        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
-          id: configData.id,
-          dataAccVal: configData.dataAccCode,
-          orgLevelVal,
-        }),
-      }}
-      service={IndicatorService.getDataInfoList}
-      style={{
-        height: 'auto',
-      }}
-    >
-      {(data) => {
-        const curConfig = configData.indicatorConfig[0];
-        const subTitle = curConfig.extra?.subTitle;
-
-        return (
-          <IndicatorInfo
-            jumpUrl={`/#/h5/indicator-details?id=${curConfig.id}`}
-            label={configData.name}
-            unit={unit}
-            value={data.indicator?.value}
-            extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
-            extraValue={data.indicator?.expected}
-          />
-        );
-      }}
-    </RequestWrapper>
-  );
-};

package/src/components/win-card-mobile/components/IndicatorArea.tsx

@@ -1,65 +0,0 @@
-import { IndicatorService } from 'src/services/IndicatorService';
-import {
-  getListLabel,
-  handleAddQuery,
-  handleNumberShowStr,
-  unitList,
-} from '@/utils';
-import { IContentProps } from '../utils/interface';
-import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
-import { INDICATOR_DATA_BASE_URL } from '../../../utils/const';
-import { WinChart, WinChartType } from 'src/components/win-chart';
-import { getExtraLabel } from '../utils/tool';
-import { IndicatorInfo } from './IndicatorInfo';
-
-export const IndicatorArea = ({ configData, orgLevelVal }: IContentProps) => {
-  return (
-    <RequestWrapper
-      errorBoxHeight={50}
-      requestData={{
-        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
-          id: configData.id,
-          dataAccVal: configData.dataAccCode,
-          orgLevelVal,
-        }),
-      }}
-      service={IndicatorService.getDataInfoList}
-    >
-      {(data) => {
-        const curConfig = configData.indicatorConfig[0];
-        const subTitle = curConfig.extra?.subTitle;
-
-        return (
-          <div
-            style={{
-              display: 'grid',
-              grid: 'auto-flow / 4fr 6fr',
-              gap: '0.24rem',
-              transform: 'translateY(0.08rem)',
-            }}
-          >
-            <IndicatorInfo
-              jumpUrl={`/#/h5/indicator-details?id=${curConfig.id}`}
-              label={configData.name}
-              unit={getListLabel(unitList, configData.indicatorConfig[0]?.unit)}
-              value={handleNumberShowStr(data.indicator?.value)}
-              extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
-              extraValue={data.indicator?.expected}
-              style={{
-                transform: 'translateY(0.12rem)',
-              }}
-            />
-            <WinChart
-              color={configData.commonConfig.color}
-              data={data.list0 ?? []}
-              chartType={WinChartType.MINI_AREA}
-              style={{
-                height: '1.6rem',
-              }}
-            />
-          </div>
-        );
-      }}
-    </RequestWrapper>
-  );
-};