Skip to content

Commit

Permalink
Merge pull request apache#13968 from apache/fix/gauge-formatter
Browse files Browse the repository at this point in the history 
fix: gauge detail value animation broken by some previous commit.
  • Loading branch information
@100pah
100pah authored Jan 7, 2021
2 parents 29ad6e4 + 9a4ffa2 commit 3ed5076
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 58 deletions.
24 changes: 17 additions & 7 deletions src/chart/gauge/GaugeView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {parsePercent, round, linearMap} from '../../util/number';
import GaugeSeriesModel, { GaugeDataItemOption } from './GaugeSeries';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import { ColorString, ECElement, ParsedValue } from '../../util/types';
import { ColorString, ECElement } from '../../util/types';
import List from '../../data/List';
import Sausage from '../../util/shape/sausage';
import {createSymbol} from '../../util/symbol';
Expand Down Expand Up @@ -586,10 +586,6 @@ class GaugeView extends ChartView {
verticalAlign: 'middle'
}, {inheritColor: autoColor})
});
setLabelValueAnimation(
labelEl, {normal: itemTitleModel}, seriesModel.getRawValue(idx) as ParsedValue, () => data.getName(idx)
);
hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel);

itemGroup.add(labelEl);
}
Expand Down Expand Up @@ -618,10 +614,23 @@ class GaugeView extends ChartView {
}, {inheritColor: detailColor})
});
setLabelValueAnimation(
labelEl, {normal: itemDetailModel}, seriesModel.getRawValue(idx) as ParsedValue,
labelEl,
{normal: itemDetailModel},
value,
(value: number) => formatLabel(value, formatter)
);
hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel);
hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel, {
getFormattedLabel(
labelDataIndex, status, dataType, labelDimIndex, fmt, extendParams
) {
return formatLabel(
extendParams
? extendParams.interpolatedValue as typeof value
: value,
formatter
);
}
});

itemGroup.add(labelEl);
}
Expand All @@ -633,6 +642,7 @@ class GaugeView extends ChartView {
this._titleEls = newTitleEls;
this._detailEls = newDetailEls;
}

}

export default GaugeView;
4 changes: 2 additions & 2 deletions src/chart/helper/labelHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

import {retrieveRawValue} from '../../data/helper/dataProvider';
import List from '../../data/List';
import { ParsedValue } from '../../util/types';
import { InterpolatableValue } from '../../util/types';
import { isArray } from 'zrender/src/core/util';

/**
Expand Down Expand Up @@ -49,7 +49,7 @@ export function getDefaultLabel(

export function getDefaultInterpolatedLabel(
data: List,
interpolatedValue: ParsedValue | ParsedValue[]
interpolatedValue: InterpolatableValue
): string {
const labelDims = data.mapDimensionsAll('defaultedLabel');
if (!isArray(interpolatedValue)) {
Expand Down
5 changes: 3 additions & 2 deletions src/chart/line/LineView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1064,8 +1064,9 @@ class LineView extends ChartView {
{
labelFetcher: seriesModel,
labelDataIndex: dataIndex,
defaultText(dataIndex, opt, overrideValue) {
return overrideValue ? getDefaultInterpolatedLabel(data, overrideValue)
defaultText(dataIndex, opt, interpolatedValue) {
return interpolatedValue != null
? getDefaultInterpolatedLabel(data, interpolatedValue)
: getDefaultLabel(data, dataIndex);
},
enableTextSetter: true
Expand Down
2 changes: 1 addition & 1 deletion src/label/LabelManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ class LabelManager {
extendWithKeys(layoutEmphasis, textEl.states.emphasis, LABEL_LAYOUT_PROPS);
}

animateLabelValue(textEl, dataIndex, data, seriesModel);
animateLabelValue(textEl, dataIndex, data, seriesModel, seriesModel);
}

if (guideLine && !guideLine.ignore && !guideLine.invisible) {
Expand Down
79 changes: 44 additions & 35 deletions src/label/labelStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,19 @@ import {
LabelOption,
DisplayState,
TextCommonOption,
ParsedValue,
CallbackDataParams,
StatesOptionMixin,
DisplayStateNonNormal,
ColorString,
ZRStyleProps
ZRStyleProps,
AnimationOptionMixin,
InterpolatableValue
} from '../util/types';
import GlobalModel from '../model/Global';
import { isFunction, retrieve2, extend, keys, trim } from 'zrender/src/core/util';
import { SPECIAL_STATES, DISPLAY_STATES } from '../util/states';
import { deprecateReplaceLog } from '../util/log';
import { makeInner, interpolateRawValues } from '../util/model';
import List from '../data/List';
import SeriesModel from '../model/Series';
import { initProps, updateProps } from '../util/graphic';

type TextCommonParams = {
Expand Down Expand Up @@ -68,9 +67,11 @@ type TextCommonParams = {
};
const EMPTY_OBJ = {};

interface SetLabelStyleOpt<LDI> extends TextCommonParams {
interface SetLabelStyleOpt<TLabelDataIndex> extends TextCommonParams {
defaultText?: string | ((
labelDataIndex: LDI, opt: SetLabelStyleOpt<LDI>, overrideValue?: ParsedValue | ParsedValue[]
labelDataIndex: TLabelDataIndex,
opt: SetLabelStyleOpt<TLabelDataIndex>,
interpolatedValue?: InterpolatableValue
) => string);
// Fetch text by:
// opt.labelFetcher.getFormattedLabel(
Expand All @@ -79,15 +80,19 @@ interface SetLabelStyleOpt<LDI> extends TextCommonParams {
labelFetcher?: {
getFormattedLabel: (
// In MapDraw case it can be string (region name)
labelDataIndex: LDI,
labelDataIndex: TLabelDataIndex,
status: DisplayState,
dataType?: string,
labelDimIndex?: number,
formatter?: string | ((params: object) => string),
extendParams?: Partial<CallbackDataParams>
// If provided, the implementation of `getFormattedLabel` can use it
// to generate the final label text.
extendParams?: {
interpolatedValue: InterpolatableValue
}
) => string;
};
labelDataIndex?: LDI;
labelDataIndex?: TLabelDataIndex;
labelDimIndex?: number;

/**
Expand Down Expand Up @@ -122,10 +127,10 @@ export function setLabelText(label: ZRText, labelTexts: Record<DisplayState, str
label.useStates(oldStates, true);
}

export function getLabelText<LDI>(
opt: SetLabelStyleOpt<LDI>,
stateModels?: LabelStatesModels<LabelModel>,
overrideValue?: ParsedValue | ParsedValue[]
function getLabelText<TLabelDataIndex>(
opt: SetLabelStyleOpt<TLabelDataIndex>,
stateModels: LabelStatesModels<LabelModel>,
interpolatedValue?: InterpolatableValue
): Record<DisplayState, string> {
const labelFetcher = opt.labelFetcher;
const labelDataIndex = opt.labelDataIndex;
Expand All @@ -138,13 +143,15 @@ export function getLabelText<LDI>(
null,
labelDimIndex,
normalModel && normalModel.get('formatter'),
overrideValue != null ? {
value: overrideValue
interpolatedValue != null ? {
interpolatedValue: interpolatedValue
} : null
);
}
if (baseText == null) {
baseText = isFunction(opt.defaultText) ? opt.defaultText(labelDataIndex, opt, overrideValue) : opt.defaultText;
baseText = isFunction(opt.defaultText)
? opt.defaultText(labelDataIndex, opt, interpolatedValue)
: opt.defaultText;
}

const statesText = {
Expand Down Expand Up @@ -176,23 +183,23 @@ export function getLabelText<LDI>(
* So please update the style on ZRText after use this method.
*/
// eslint-disable-next-line
function setLabelStyle<LDI>(
function setLabelStyle<TLabelDataIndex>(
targetEl: ZRText,
labelStatesModels: LabelStatesModels<LabelModelForText>,
opt?: SetLabelStyleOpt<LDI>,
opt?: SetLabelStyleOpt<TLabelDataIndex>,
stateSpecified?: Partial<Record<DisplayState, TextStyleProps>>
): void;
// eslint-disable-next-line
function setLabelStyle<LDI>(
function setLabelStyle<TLabelDataIndex>(
targetEl: Element,
labelStatesModels: LabelStatesModels<LabelModel>,
opt?: SetLabelStyleOpt<LDI>,
opt?: SetLabelStyleOpt<TLabelDataIndex>,
stateSpecified?: Partial<Record<DisplayState, TextStyleProps>>
): void;
function setLabelStyle<LDI>(
function setLabelStyle<TLabelDataIndex>(
targetEl: Element,
labelStatesModels: LabelStatesModels<LabelModel>,
opt?: SetLabelStyleOpt<LDI>,
opt?: SetLabelStyleOpt<TLabelDataIndex>,
stateSpecified?: Partial<Record<DisplayState, TextStyleProps>>
// TODO specified position?
) {
Expand Down Expand Up @@ -271,8 +278,8 @@ function setLabelStyle<LDI>(
textContent.dirty();

if (opt.enableTextSetter) {
labelInner(textContent).setLabelText = function (overrideValue: ParsedValue | ParsedValue[]) {
const labelStatesTexts = getLabelText(opt, labelStatesModels, overrideValue);
labelInner(textContent).setLabelText = function (interpolatedValue: InterpolatableValue) {
const labelStatesTexts = getLabelText(opt, labelStatesModels, interpolatedValue);
setLabelText(textContent, labelStatesTexts);
};
}
Expand Down Expand Up @@ -618,15 +625,15 @@ export const labelInner = makeInner<{
* Previous target value stored used for label.
* It's mainly for text animation
*/
prevValue?: ParsedValue | ParsedValue[]
prevValue?: InterpolatableValue
/**
* Target value stored used for label.
*/
value?: ParsedValue | ParsedValue[]
value?: InterpolatableValue
/**
* Current value in text animation.
*/
interpolatedValue?: ParsedValue | ParsedValue[]
interpolatedValue?: InterpolatableValue
/**
* If enable value animation
*/
Expand All @@ -643,18 +650,19 @@ export const labelInner = makeInner<{
/**
* Default text getter during interpolation
*/
defaultInterpolatedText?: (value: ParsedValue[] | ParsedValue) => string
defaultInterpolatedText?: (value: InterpolatableValue) => string
/**
* Change label text from interpolated text during animation
*/
setLabelText?(overrideValue?: ParsedValue | ParsedValue[]): void
setLabelText?: (interpolatedValue?: InterpolatableValue) => void

}, ZRText>();

export function setLabelValueAnimation(
label: ZRText,
labelStatesModels: LabelStatesModels<LabelModelForText>,
value: ParsedValue | ParsedValue[],
getDefaultText: (value: ParsedValue[] | ParsedValue) => string
value: InterpolatableValue,
getDefaultText: (value: InterpolatableValue) => string
) {
if (!label) {
return;
Expand All @@ -679,7 +687,8 @@ export function animateLabelValue(
textEl: ZRText,
dataIndex: number,
data: List,
seriesModel: SeriesModel
animatableModel: Model<AnimationOptionMixin>,
labelFetcher: SetLabelStyleOpt<number>['labelFetcher']
) {
const labelInnerStore = labelInner(textEl);
if (!labelInnerStore.valueAnimation) {
Expand All @@ -703,7 +712,7 @@ export function animateLabelValue(

const labelText = getLabelText({
labelDataIndex: dataIndex,
labelFetcher: seriesModel,
labelFetcher: labelFetcher,
defaultText: defaultInterpolatedText
? defaultInterpolatedText(interpolated)
: interpolated + ''
Expand All @@ -715,5 +724,5 @@ export function animateLabelValue(
(currValue == null
? initProps
: updateProps
)(textEl, {}, seriesModel, dataIndex, null, during);
}
)(textEl, {}, animatableModel, dataIndex, null, during);
}
15 changes: 8 additions & 7 deletions src/model/mixin/dataFormat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ import {
SeriesDataType,
ComponentMainType,
ComponentSubType,
DimensionLoose
DimensionLoose,
InterpolatableValue
} from '../../util/types';
import GlobalModel from '../Global';
import { TooltipMarkupBlockFragment } from '../../component/tooltip/tooltipMarkup';
Expand Down Expand Up @@ -110,15 +111,17 @@ export class DataFormatMixin {
dataType?: SeriesDataType,
labelDimIndex?: number,
formatter?: string | ((params: object) => string),
extendParams?: Partial<CallbackDataParams>
extendParams?: {
interpolatedValue: InterpolatableValue
}
): string {
status = status || 'normal';
const data = this.getData(dataType);

const params = this.getDataParams(dataIndex, dataType);

if (extendParams) {
zrUtil.extend(params, extendParams);
params.value = extendParams.interpolatedValue;
}

if (labelDimIndex != null && zrUtil.isArray(params.value)) {
Expand Down Expand Up @@ -152,12 +155,10 @@ export class DataFormatMixin {

let val = retrieveRawValue(data, dataIndex, dimLoose) as OptionDataValue;

// Tricky: `extendParams.value` is only used in interpolate case
// (label animation) currently.
if (extendParams && zrUtil.isArray(extendParams.value)) {
if (extendParams && zrUtil.isArray(extendParams.interpolatedValue)) {
const dimInfo = data.getDimensionInfo(dimLoose);
if (dimInfo) {
val = extendParams.value[dimInfo.index];
val = extendParams.interpolatedValue[dimInfo.index];
}
}

Expand Down
12 changes: 8 additions & 4 deletions src/util/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import {
Payload,
OptionId,
OptionName,
ParsedValue
InterpolatableValue
} from './types';
import { Dictionary } from 'zrender/src/core/types';
import SeriesModel from '../model/Series';
Expand Down Expand Up @@ -1008,14 +1008,18 @@ export function groupData<T, R extends string | number>(
* @param targetValue end value
* @param percent 0~1 percentage; 0 uses start value while 1 uses end value
* @return interpolated values
* If `sourceValue` and `targetValue` are `number`, return `number`.
* If `sourceValue` and `targetValue` are `string`, return `string`.
* If `sourceValue` and `targetValue` are `(string | number)[]`, return `(string | number)[]`.
* Other cases do not supported.
*/
export function interpolateRawValues(
data: List,
precision: number | 'auto',
sourceValue: ParsedValue[] | ParsedValue,
targetValue: ParsedValue[] | ParsedValue,
sourceValue: InterpolatableValue,
targetValue: InterpolatableValue,
percent: number
): (string | number)[] | string | number {
): InterpolatableValue {
const isAutoPrecision = precision == null || precision === 'auto';

if (targetValue == null) {
Expand Down
2 changes: 2 additions & 0 deletions src/util/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,7 @@ export type OrdinalSortInfo = {
*/
export type ParsedValue = ParsedValueNumeric | OrdinalRawValue;
export type ParsedValueNumeric = number | OrdinalNumber;

/**
* `ScaleDataValue` means that the user input primitive value to `src/scale/Scale`.
* (For example, used in `axis.min`, `axis.max`, `convertToPixel`).
Expand Down Expand Up @@ -645,6 +646,7 @@ export interface CallbackDataParams {
// Param name list for mapping `a`, `b`, `c`, `d`, `e`
$vars: string[];
}
export type InterpolatableValue = ParsedValue | ParsedValue[];
export type DimensionUserOuputEncode = {
[coordOrVisualDimName: string]:
// index: coordDimIndex, value: dataDimIndex
Expand Down

0 comments on commit 3ed5076

Please sign in to comment.