win-chart 1.0.1 → 1.0.3

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

@@ -1,83 +0,0 @@
-import { IStyleProps } from '@/types';
-import { ReactNode } from 'react';
-import { css, styled } from 'styled-components';
-import { UnitWrapper } from 'src/components/win-wrappers/card-wrapper';
-import { useHalfScreenDispatch } from '@/hooks/useHalfScreenState';
-
-interface IProps extends IStyleProps {
-  label: string;
-  value: ReactNode;
-  unit: string;
-  extraLabel?: string;
-  extraValue?: ReactNode;
-  extraValueColor?: string;
-  jumpUrl?: string;
-}
-
-export const IndicatorInfo = ({
-  label,
-  value,
-  unit,
-  extraLabel,
-  extraValue,
-  extraValueColor,
-  jumpUrl,
-  ...args
-}: Partial<IProps>) => {
-  const halfScreenDispatch = useHalfScreenDispatch();
-
-  return (
-    <div {...args}>
-      <LabelWrapper>
-        <div
-          data-value
-          onClick={() => {
-            halfScreenDispatch.setState({
-              show: true,
-              src: jumpUrl,
-              title: '指标详情',
-            });
-          }}
-          style={{
-            ...(!!jumpUrl && {
-              cursor: 'pointer',
-            }),
-          }}
-        >
-          {value}
-        </div>
-        {!!unit && <UnitWrapper>({unit})</UnitWrapper>}
-      </LabelWrapper>
-    </div>
-  );
-};
-
-const LabelWrapper = styled.div<{ unit?: string }>`
-  line-height: 1;
-  margin-bottom: 0.08rem;
-
-  [data-label] {
-    width: 106px;
-    font-size: 0.32rem;
-    font-weight: 600;
-    margin-bottom: 0.08rem;
-    display: flex;
-
-    ${(props) =>
-      !!props.unit &&
-      css`
-        &::after {
-          content: '(${props.unit})';
-          display: inline-block;
-          color: #6d7a90;
-        }
-      `}
-  }
-
-  [data-value] {
-    font-size: 0.56rem;
-    font-weight: 700;
-    color: #000;
-    margin-bottom: 0.08rem;
-  }
-`;

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

@@ -1,28 +0,0 @@
-import { IListItem } from '@/types';
-import { CnSelect } from '@cainiaofe/cn-ui-m';
-import { css, styled } from 'styled-components';
-
-export const IndicatorSelectDecoration = styled(CnSelect).attrs({
-  size: 'small',
-  showSearch: true,
-  style: {
-    width: '2rem',
-  },
-})<{ dataSource?: IListItem[]; $right?: boolean }>`
-  .cn-ui-m-selectdrawer-content {
-    padding-left: 0;
-    cursor: pointer;
-
-    div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ${(props) =>
-    props.$right &&
-    css`
-      transform: translateY(-0.08rem);
-    `}
-`;

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

@@ -1,235 +0,0 @@
-import { IndicatorService } from 'src/services/IndicatorService';
-import { IIndicatorCardConfig } from '@/types';
-import { IndicatorArea } from './components/IndicatorArea';
-import { RequestWrapper } from '../win-wrappers/request-wrapper';
-import {
-  CardTitleWrapperMobile,
-  CardWrapperMobile,
-} from '../win-wrappers/card-wrapper';
-import { WinCardChartType } from 'src/types/enum';
-import { INDICATOR_CONFIG_BASE_URL } from '../../utils/const';
-import { Indicator } from './components/Indicator';
-import { CnBox } from '@cainiaofe/cn-ui';
-import { IndicatorSelectDecoration } from './components/SelectDecoration';
-import { getListLabel, unitList } from 'src/utils';
-import { useContext, useEffect, useRef, useState } from 'react';
-import { HoverView } from '../hover-view';
-import { useCardOptionList } from 'src/hooks/useCardOptionList';
-import { VisionUserConfigContext } from '../VisionUserConfigContext';
-import { ChartContent } from './components/ChartContent';
-import { WinChartType } from 'src/components/win-chart';
-import { useInViewport } from 'ahooks';
-
-interface IProps {
-  id: number;
-  config?: IIndicatorCardConfig;
-}
-
-export const WidCardMobile = ({ id, config }: IProps) => {
-  if (config) {
-    return <ShowCard configData={config} />;
-  }
-
-  return (
-    <RequestWrapper
-      requestData={{ url: `${INDICATOR_CONFIG_BASE_URL}?id=${id}` }}
-      service={IndicatorService.getConfigInfo}
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      {(configData) => {
-        return <ShowCard configData={configData} />;
-      }}
-    </RequestWrapper>
-  );
-};
-
-const ShowCard = ({ configData }: { configData: IIndicatorCardConfig }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [inViewport] = useInViewport(ref);
-  const [shouldInit, setShouldInit] = useState(false);
-  const orgLevelList = useCardOptionList(
-    shouldInit && 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 visionUserConfig = useContext(VisionUserConfigContext);
-  const hasInitOrgLevelRef = useRef(false);
-
-  useEffect(() => {
-    if (inViewport) {
-      setShouldInit(true);
-    }
-  }, [inViewport]);
-
-  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 (
-    <CardWrapperMobile ref={ref}>
-      <CnBox direction="row" justify="space-between">
-        {isCommonTitle ? (
-          <CardTitleWrapperMobile
-            data-card-id={configData.id}
-            style={{
-              maxWidth: isSingleIndicator || !hasOrgLevel ? '80%' : '45%',
-              position: 'relative',
-              ...([
-                WinCardChartType.INDICATOR,
-                WinCardChartType.INDICATOR_AREA,
-              ].includes(configData.chartType) && {
-                fontSize: '0.24rem',
-                fontWeight: 500,
-              }),
-            }}
-          >
-            <HoverView content={configData.name} />
-          </CardTitleWrapperMobile>
-        ) : (
-          <div />
-        )}
-        <CnBox spacing={16} direction="row" align="center">
-          {hasOrgLevel && !isSingleIndicator && (
-            <IndicatorSelectDecoration
-              $right
-              value={curOrgLevelValue}
-              dataSource={orgLevelList}
-              onChange={setCurOrgLevelValue}
-            />
-          )}
-        </CnBox>
-      </CnBox>
-      {getShowContent({
-        configData,
-        hasOrgLevel,
-        orgLevelVal: curOrgLevelValue,
-        unit,
-      })}
-      {isSingleIndicator && (
-        <div style={{ height: 32 }}>
-          {hasOrgLevel && (
-            <IndicatorSelectDecoration
-              value={curOrgLevelValue}
-              dataSource={orgLevelList}
-              onChange={setCurOrgLevelValue}
-            />
-          )}
-        </div>
-      )}
-    </CardWrapperMobile>
-  );
-};
-
-const getShowContent = ({
-  configData,
-  hasOrgLevel,
-  orgLevelVal,
-  unit,
-}: {
-  configData: IIndicatorCardConfig;
-  orgLevelVal?: string;
-  unit?: string;
-  hasOrgLevel: boolean;
-}) => {
-  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.RADAR_CHART:
-      return <ChartContent winChartType={WinChartType.RADAR} {...data} />;
-
-    case WinCardChartType.RADAR_CHART_RESERVE:
-      return (
-        <ChartContent
-          reserveValueWithLabelType
-          winChartType={WinChartType.RADAR}
-          {...data}
-        />
-      );
-
-    case WinCardChartType.CYCLE_CHART:
-      return <ChartContent winChartType={WinChartType.CYCLE} {...data} />;
-
-    default:
-      return undefined;
-  }
-};

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

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

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

@@ -1,9 +0,0 @@
-export const getExtraLabel = (subTitle?: number) => {
-  switch (subTitle) {
-    case 1:
-      return '目标';
-
-    default:
-      return undefined;
-  }
-};

package/src/components/win-chart/components/chart-wrapper.tsx

@@ -1,5 +0,0 @@
-import { styled } from 'styled-components';
-
-export const ChartWrapper = styled.div`
-  height: 100%;
-`;

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

@@ -1,59 +0,0 @@
-import { ChartWrapper } from './components/chart-wrapper';
-import { IWinChartProps } from './utils/type';
-import { useRef, useEffect, useState } from 'react';
-import { getEChartOptions } from './utils/getChartOptions';
-import * as echarts from 'echarts';
-import { commonOpt } from './utils/const';
-import { debounce } from './utils/tool';
-import light from './theme/win-light.json';
-import dark from './theme/win-dark.json';
-import deepMerge from 'deepmerge';
-
-export * from './utils/const';
-export * from './utils/type';
-
-echarts.registerTheme('light', deepMerge(light, commonOpt));
-echarts.registerTheme('dark', deepMerge(dark, commonOpt));
-
-export const WinChart = ({
-  className,
-  style,
-  extraOption,
-  theme = 'light',
-  ...args
-}: IWinChartProps) => {
-  const boxRef = useRef<HTMLDivElement>(null);
-  const [eChart, setEChart] = useState<echarts.ECharts>();
-  const argsStr = JSON.stringify(args);
-  const extraOptionStr = JSON.stringify(extraOption ?? {});
-
-  // 生成实例
-  useEffect(() => {
-    const eChart = echarts.init(boxRef.current, theme);
-    setEChart(eChart);
-
-    // 监听窗口变化
-    const resize = debounce(eChart.resize, 500);
-    globalThis.addEventListener('resize', () => {
-      resize();
-    });
-  }, [theme]);
-
-  // 设置配置
-  useEffect(() => {
-    if (eChart) {
-      eChart.setOption(
-        deepMerge(
-          getEChartOptions(JSON.parse(argsStr)),
-          JSON.parse(extraOptionStr),
-        ),
-      );
-
-      setTimeout(() => {
-        eChart.resize();
-      }, 500);
-    }
-  }, [argsStr, eChart, extraOptionStr]);
-
-  return <ChartWrapper ref={boxRef} className={className} style={style} />;
-};