diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx index bdc9f4a834..6649965721 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx @@ -1,8 +1,9 @@ import cls from 'classnames'; import React from 'react'; +import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared'; import type { CustomTooltipProps } from './interface'; -import styles from './index.module.less'; +import './index.less'; export const ColTooltip: React.FC = ({ cell }) => { const meta = cell.getMeta(); @@ -15,9 +16,9 @@ export const ColTooltip: React.FC = ({ cell }) => { const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field); return ( -
- {cellName} - {meta.value} +
+ {cellName} + {meta.value}
); }; diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx index 7e010f6ecb..05b4ccf2cb 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx @@ -8,10 +8,11 @@ import { import cls from 'classnames'; import { first, get, isEmpty, isNil } from 'lodash'; import React from 'react'; +import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared'; import { getLeafColNode, getRowName } from '../utils'; import type { CustomTooltipProps } from './interface'; -import styles from './index.module.less'; +import './index.less'; export const DataTooltip: React.FC = ({ cell }) => { const meta = cell.getMeta() as ViewMeta; @@ -38,38 +39,40 @@ export const DataTooltip: React.FC = ({ cell }) => { const originalValue = get(metaFieldValue, valuesCfg?.originalValueField); return ( -
-
- {rowName} +
+
+ {rowName} {value ?? emptyPlaceholder}
-
+
{isNil(originalValue?.[0]?.[0]) ? emptyPlaceholder : originalValue?.[0]?.[0]}
{!isEmpty(derivedValues) && ( <> -
-
    +
    +
      {derivedValues.map((derivedValue, i) => { const isNormal = isNil(derivedValue); const isUp = isUpDataValue(derivedValue as string); const isDown = !isNormal && !isUp; return ( -
    • - +
    • + {derivedLabels[i]} - {!isNormal && } - + {!isNormal && ( + + )} + {derivedValue ?? emptyPlaceholder} diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx index ffbe122c75..d1c33c81eb 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx @@ -1,9 +1,10 @@ import { i18n, Node } from '@antv/s2'; import cls from 'classnames'; import React from 'react'; +import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared'; import type { CustomTooltipProps } from './interface'; -import styles from './index.module.less'; +import './index.less'; export const RowTooltip: React.FC = ({ cell }) => { const { field, spreadsheet, value, extra } = cell.getMeta() as Node; @@ -12,8 +13,8 @@ export const RowTooltip: React.FC = ({ cell }) => { spreadsheet.dataSet.getFieldDescription(field) || extra?.description; return ( -
      -
      {value}
      +
      +
      {value}
      {description && (
      {i18n('说明')}: {description} diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less new file mode 100644 index 0000000000..9ff49ba22f --- /dev/null +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less @@ -0,0 +1,159 @@ +@import '@antv/s2-shared/src/styles/variables.less'; + +.@{strategySheetTooltipClsPrefix} { + line-height: 20px; + font-size: 12px; + color: rgba(0, 0, 0, 0.65); + overflow: hidden; + padding: 12px; + + ul, + li { + list-style: none; + margin: 0; + padding: 0; + } + + & &-divider { + border-top: 1px solid #e9e9e9; + margin: 10px -12px; + } + + // tooltip for row cell + // ------------------------------------------------------ + &&-row &-value { + font-weight: 700; + } + + // tooltip for col cell + // ------------------------------------------------------ + &&-col &-name { + margin-right: 20px; + } + + &&-col &-value { + color: rgba(0, 0, 0, 0.85); + } + + // tooltip for normal data cell + // ------------------------------------------------------ + &&-data &-header { + display: flex; + justify-content: space-between; + align-items: center; + + .header-label { + font-weight: 700; + } + } + + &&-data &-original-value { + text-align: right; + } + + &&-data &-derived-values { + position: relative; + margin: 0; + padding: 0; + list-style: none; + + li.derived-value-item { + display: flex; + justify-content: space-between; + align-items: center; + + .derived-value-group { + color: rgba(0, 0, 0, 0.65); + + .derived-value-trend-icon { + display: inline-block; + width: 0; + height: 0; + margin-right: 4px; + border-right: 4px solid transparent; + border-bottom: 9px solid #000; + border-left: 4px solid transparent; + transform: rotate(0deg); + } + + &.derived-value-trend-up { + color: #f46649; + + .derived-value-trend-icon { + border-bottom-color: #f46649; + } + } + + &.derived-value-trend-down { + color: #2aa491; + + .derived-value-trend-icon { + transform: rotate(180deg); + border-bottom-color: #2aa491; + } + } + } + } + } + + // tooltip for bullet data cell + // ------------------------------------------------------ + &-bullet { + // 让描述一行显示 + max-width: max-content; + } + + &-bullet &-title { + font-weight: 500; + font-size: 14px; + color: rgba(0, 0, 0, 0.85); + line-height: 22px; + margin-bottom: 10px; + } + + &-bullet &-desc { + color: rgba(0, 0, 0, 0.45); + margin: 0; + padding: 0; + list-style: none; + font-weight: 400; + white-space: pre-wrap; + + > li + li { + margin-top: 6px; + } + } + + &-bullet .tooltip-bullet-item { + color: rgba(0, 0, 0, 0.45); + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + font-weight: 400; + font-size: 12px; + + &:last-child { + margin-top: 2px; + } + + &-value { + color: rgba(0, 0, 0, 0.85); + } + + &.bullet-current-item .bullet-item-legend { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 8px; + } + + &.bullet-target-item .bullet-item-legend { + display: inline-block; + width: 1px; + height: 12px; + border-left: 1px solid rgba(0, 0, 0, 0.25); + margin: 0 12px 0 4px; + } + } +} diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.module.less b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.module.less deleted file mode 100644 index 186166625a..0000000000 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.module.less +++ /dev/null @@ -1,161 +0,0 @@ -.strategySheetTooltip { - line-height: 20px; - font-size: 12px; - color: rgba(0, 0, 0, 0.65); - overflow: hidden; - padding: 12px; - - ul, - li { - list-style: none; - margin: 0; - padding: 0; - } - - &.row { - .value { - font-weight: 700; - } - } - - &.col { - .name { - margin-right: 20px; - } - - .value { - color: rgba(0, 0, 0, 0.85); - } - } - - .divider { - border-top: 1px solid #e9e9e9; - margin: 10px -12px; - } - - &.data { - .header { - display: flex; - justify-content: space-between; - align-items: center; - - .label { - font-weight: 700; - } - } - - .originalValue { - text-align: right; - } - - .derivedValues { - position: relative; - margin: 0; - padding: 0; - list-style: none; - - > .value { - display: flex; - justify-content: space-between; - align-items: center; - - .derivedValueGroup { - color: rgba(0, 0, 0, 0.65); - - .icon { - display: inline-block; - width: 0; - height: 0; - margin-right: 4px; - border-right: 4px solid transparent; - border-bottom: 9px solid #000; - border-left: 4px solid transparent; - transform: rotate(0deg); - } - - &.up { - color: #f46649; - - .icon { - border-bottom-color: #f46649; - } - } - - &.down { - color: #2aa491; - - .icon { - transform: rotate(180deg); - border-bottom-color: #2aa491; - } - } - } - } - } - } - - &.bullet { - // 让描述一行显示 - max-width: max-content; - - .title { - font-weight: 500; - font-size: 14px; - color: rgba(0, 0, 0, 0.85); - line-height: 22px; - margin-bottom: 10px; - } - - .desc { - color: rgba(0, 0, 0, 0.45); - margin: 0; - padding: 0; - list-style: none; - font-weight: 400; - white-space: pre-wrap; - - > li + li { - margin-top: 6px; - } - } - - .content { - .item { - color: rgba(0, 0, 0, 0.45); - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - font-weight: 400; - font-size: 12px; - - & + .item { - margin-top: 2px; - } - - .value { - color: rgba(0, 0, 0, 0.85); - } - - &.current { - .legend { - display: inline-block; - width: 10px; - height: 10px; - margin-right: 8px; - } - } - - &.target { - .legend { - display: inline-block; - width: 1px; - height: 12px; - border-left: 1px solid rgba(0, 0, 0, 0.25); - margin: 0 12px 0 4px; - } - } - } - } - } -} diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts index d1165c9f7c..8eee6f8519 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/interface.ts @@ -1,5 +1,4 @@ import type { Node, S2CellType, TooltipShowOptions, ViewMeta } from '@antv/s2'; -import type { StrategySheetProps } from '..'; export interface CustomTooltipProps { cell: S2CellType; diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/kpi-columns/custom-bullet-tooltip.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/kpi-columns/custom-bullet-tooltip.tsx index a1634a2114..39095aa777 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/kpi-columns/custom-bullet-tooltip.tsx +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/kpi-columns/custom-bullet-tooltip.tsx @@ -9,10 +9,11 @@ import { } from '@antv/s2'; import cls from 'classnames'; import React from 'react'; +import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared'; import type { CustomTooltipProps } from '../interface'; import { getColName, getRowName } from '../../utils'; -import styles from '../index.module.less'; +import '../index.less'; import type { StrategySheetProps } from '../..'; export interface KpiBulletTooltipProps extends CustomTooltipProps { @@ -46,32 +47,32 @@ export const KpiBulletTooltip: React.FC = (props) => { const colName = getColName(meta); return ( -
      -
      {rowName}
      -
      -
    • - +
      +
      {rowName}
      +
      +
    • + {colName} - {currentPercent} + {currentPercent}
      • -
    • - - +
    • + + {i18n('目标值')} - {targetPercent} + {targetPercent}
    -
    +
    {description?.(cell) ?? ( -
      +
      • 指标目标字段的净增目标完成度，净增目标完成度=净增值/净增目标
      • 绿色：实际完成度落后时间进度 10%（包含）以内或超出时间进度
      • 黄色：实际完成度慢于时间进度 10%-20%
        • diff --git a/packages/s2-shared/src/constant/classnames.ts b/packages/s2-shared/src/constant/classnames.ts index 93cb088c40..4ebd442f8e 100644 --- a/packages/s2-shared/src/constant/classnames.ts +++ b/packages/s2-shared/src/constant/classnames.ts @@ -1 +1,3 @@ export const DRILL_DOWN_PRE_CLASS = 's2-drill-down'; + +export const STRATEGY_SHEET_TOOLTIP_PRE_CLASS = 's2-strategy-sheet-tooltip'; diff --git a/packages/s2-shared/src/index.ts b/packages/s2-shared/src/index.ts index a2adf5f7c5..36199e8566 100644 --- a/packages/s2-shared/src/index.ts +++ b/packages/s2-shared/src/index.ts @@ -1,4 +1,5 @@ export * from './interface'; +export * from './utils/classnames'; export * from './utils/options'; export * from './utils/resize'; export * from './utils/drill-down'; diff --git a/packages/s2-shared/src/styles/drilldown.less b/packages/s2-shared/src/styles/drilldown.less index 79543503c5..95b56f3496 100644 --- a/packages/s2-shared/src/styles/drilldown.less +++ b/packages/s2-shared/src/styles/drilldown.less @@ -1,5 +1,6 @@ -@pre: s2-drill-down; -.@{pre} { +@import './variables.less'; + +.@{drillDownClsPrefix} { width: 260px; min-height: 20px; position: relative; diff --git a/packages/s2-shared/src/styles/variables.less b/packages/s2-shared/src/styles/variables.less new file mode 100644 index 0000000000..4927e4b396 --- /dev/null +++ b/packages/s2-shared/src/styles/variables.less @@ -0,0 +1,8 @@ +// s2 类名前缀 +@s2ClsPrefix: s2; + +// 下钻类名前缀 +@drillDownClsPrefix: ~'@{s2ClsPrefix}-drill-down'; + +// 趋势表 tooltip 类名前缀 +@strategySheetTooltipClsPrefix: ~'@{s2ClsPrefix}-strategy-sheet-tooltip'; diff --git a/packages/s2-shared/src/utils/classnames.ts b/packages/s2-shared/src/utils/classnames.ts new file mode 100644 index 0000000000..761beb4589 --- /dev/null +++ b/packages/s2-shared/src/utils/classnames.ts @@ -0,0 +1,8 @@ +import { STRATEGY_SHEET_TOOLTIP_PRE_CLASS } from '../constant'; + +/** 获取 tooltip css class name */ +export const getStrategySheetTooltipClsName = (name?: string) => { + return name + ? `${STRATEGY_SHEET_TOOLTIP_PRE_CLASS}-${name}` + : STRATEGY_SHEET_TOOLTIP_PRE_CLASS; +};