ContinuousModel.ts

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import * as zrUtil from 'zrender/src/core/util';
import VisualMapModel, { VisualMapOption, VisualMeta } from './VisualMapModel';
import * as numberUtil from '../../util/number';
import { VisualMappingOption } from '../../visual/VisualMapping';
import { inheritDefaultOption } from '../../util/component';
import { ItemStyleOption } from '../../util/types';

// Constant
const DEFAULT_BAR_BOUND = [20, 140];

type RangeWithAuto = {
    auto?: 0 | 1
};

type VisualState = VisualMapModel['stateList'][number];

export interface ContinousVisualMapOption extends VisualMapOption {

    align?: 'auto' | 'left' | 'right' | 'top' | 'bottom'

    /**
     * This prop effect default component type determine
     * @see echarts/component/visualMap/typeDefaulter.
     */
    calculable?: boolean

    /**
     * selected range. In default case `range` is [min, max]
     * and can auto change along with modification of min max,
     * until user specified a range.
     */
    range?: number[]
    /**
     * Whether to enable hover highlight.
     */
    hoverLink?: boolean

    /**
     * The extent of hovered data.
     */
    hoverLinkDataSize?: number
    /**
     * Whether trigger hoverLink when hover handle.
     * If not specified, follow the value of `realtime`.
     */
    hoverLinkOnHandle?: boolean,

    handleIcon?: string,
    // Percent of the item width
    handleSize?: string | number,
    handleStyle?: ItemStyleOption

    indicatorIcon?: string,
    // Percent of the item width
    indicatorSize?: string | number,
    indicatorStyle?: ItemStyleOption

    emphasis?: {
        handleStyle?: ItemStyleOption
    }
}

class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {

    static type = 'visualMap.continuous' as const;
    type = ContinuousModel.type;

    /**
     * @override
     */
    optionUpdated(newOption: ContinousVisualMapOption, isInit: boolean) {
        super.optionUpdated.apply(this, arguments as any);

        this.resetExtent();

        this.resetVisual(function (mappingOption?: VisualMappingOption) {
            mappingOption.mappingMethod = 'linear';
            mappingOption.dataExtent = this.getExtent();
        });

        this._resetRange();
    }

    /**
     * @protected
     * @override
     */
    resetItemSize() {
        super.resetItemSize.apply(this, arguments as any);

        const itemSize = this.itemSize;

        (itemSize[0] == null || isNaN(itemSize[0])) && (itemSize[0] = DEFAULT_BAR_BOUND[0]);
        (itemSize[1] == null || isNaN(itemSize[1])) && (itemSize[1] = DEFAULT_BAR_BOUND[1]);
    }

    /**
     * @private
     */
    _resetRange() {
        const dataExtent = this.getExtent();
        const range = this.option.range;

        if (!range || (range as RangeWithAuto).auto) {
            // `range` should always be array (so we don't use other
            // value like 'auto') for user-friend. (consider getOption).
            (dataExtent as RangeWithAuto).auto = 1;
            this.option.range = dataExtent;
        }
        else if (zrUtil.isArray(range)) {
            if (range[0] > range[1]) {
                range.reverse();
            }
            range[0] = Math.max(range[0], dataExtent[0]);
            range[1] = Math.min(range[1], dataExtent[1]);
        }
    }

    /**
     * @protected
     * @override
     */
    completeVisualOption() {
        super.completeVisualOption.apply(this, arguments as any);

        zrUtil.each(this.stateList, function (state: VisualState) {
            const symbolSize = this.option.controller[state].symbolSize;
            if (symbolSize && symbolSize[0] !== symbolSize[1]) {
                symbolSize[0] = symbolSize[1] / 3; // For good looking.
            }
        }, this);
    }

    /**
     * @override
     */
    setSelected(selected: number[]) {
        this.option.range = selected.slice();
        this._resetRange();
    }

    /**
     * @public
     */
    getSelected(): [number, number] {
        const dataExtent = this.getExtent();

        const dataInterval = numberUtil.asc(
            (this.get('range') || []).slice()
        ) as [number, number];

        // Clamp
        dataInterval[0] > dataExtent[1] && (dataInterval[0] = dataExtent[1]);
        dataInterval[1] > dataExtent[1] && (dataInterval[1] = dataExtent[1]);
        dataInterval[0] < dataExtent[0] && (dataInterval[0] = dataExtent[0]);
        dataInterval[1] < dataExtent[0] && (dataInterval[1] = dataExtent[0]);

        return dataInterval;
    }

    /**
     * @override
     */
    getValueState(value: number): VisualState {
        const range = this.option.range;
        const dataExtent = this.getExtent();

        // When range[0] === dataExtent[0], any value larger than dataExtent[0] maps to 'inRange'.
        // range[1] is processed likewise.
        return (
            (range[0] <= dataExtent[0] || range[0] <= value)
            && (range[1] >= dataExtent[1] || value <= range[1])
        ) ? 'inRange' : 'outOfRange';
    }

    findTargetDataIndices(range: number[]) {
        type DataIndices = {
            seriesId: string
            dataIndex: number[]
        };
        const result: DataIndices[] = [];

        this.eachTargetSeries(function (seriesModel) {
            const dataIndices: number[] = [];
            const data = seriesModel.getData();

            data.each(this.getDataDimensionIndex(data), function (value, dataIndex) {
                range[0] <= value && value <= range[1] && dataIndices.push(dataIndex);
            }, this);

            result.push({
                seriesId: seriesModel.id,
                dataIndex: dataIndices
            });
        }, this);

        return result;
    }

    /**
     * @implement
     */
    getVisualMeta(
        getColorVisual: (value: number, valueState: VisualState) => string
    ) {
        type ColorStop = VisualMeta['stops'][number];
        const oVals = getColorStopValues(this, 'outOfRange', this.getExtent());
        const iVals = getColorStopValues(this, 'inRange', this.option.range.slice());
        const stops: ColorStop[] = [];

        function setStop(value: number, valueState: VisualState) {
            stops.push({
                value: value,
                color: getColorVisual(value, valueState)
            });
        }

        // Format to: outOfRange -- inRange -- outOfRange.
        let iIdx = 0;
        let oIdx = 0;
        const iLen = iVals.length;
        const oLen = oVals.length;

        for (; oIdx < oLen && (!iVals.length || oVals[oIdx] <= iVals[0]); oIdx++) {
            // If oVal[oIdx] === iVals[iIdx], oVal[oIdx] should be ignored.
            if (oVals[oIdx] < iVals[iIdx]) {
                setStop(oVals[oIdx], 'outOfRange');
            }
        }
        for (let first = 1; iIdx < iLen; iIdx++, first = 0) {
            // If range is full, value beyond min, max will be clamped.
            // make a singularity
            first && stops.length && setStop(iVals[iIdx], 'outOfRange');
            setStop(iVals[iIdx], 'inRange');
        }
        for (let first = 1; oIdx < oLen; oIdx++) {
            if (!iVals.length || iVals[iVals.length - 1] < oVals[oIdx]) {
                // make a singularity
                if (first) {
                    stops.length && setStop(stops[stops.length - 1].value, 'outOfRange');
                    first = 0;
                }
                setStop(oVals[oIdx], 'outOfRange');
            }
        }

        const stopsLen = stops.length;

        return {
            stops: stops,
            outerColors: [
                stopsLen ? stops[0].color : 'transparent',
                stopsLen ? stops[stopsLen - 1].color : 'transparent'
            ] as VisualMeta['outerColors']
        };
    }

    static defaultOption = inheritDefaultOption(VisualMapModel.defaultOption, {
        align: 'auto',           // 'auto', 'left', 'right', 'top', 'bottom'
        calculable: false,
        hoverLink: true,
        realtime: true,

        handleIcon: 'path://M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z',
        handleSize: '120%',

        handleStyle: {
            borderColor: '#fff',
            borderWidth: 1
        },

        indicatorIcon: 'circle',
        indicatorSize: '50%',
        indicatorStyle: {
            borderColor: '#fff',
            borderWidth: 2,
            shadowBlur: 2,
            shadowOffsetX: 1,
            shadowOffsetY: 1,
            shadowColor: 'rgba(0,0,0,0.2)'
        }
        // emphasis: {
        //     handleStyle: {
        //         shadowBlur: 3,
        //         shadowOffsetX: 1,
        //         shadowOffsetY: 1,
        //         shadowColor: 'rgba(0,0,0,0.2)'
        //     }
        // }
    }) as ContinousVisualMapOption;
}


function getColorStopValues(
    visualMapModel: ContinuousModel,
    valueState: VisualState,
    dataExtent: number[]
) {
    if (dataExtent[0] === dataExtent[1]) {
        return dataExtent.slice();
    }

    // When using colorHue mapping, it is not linear color any more.
    // Moreover, canvas gradient seems not to be accurate linear.
    // FIXME
    // Should be arbitrary value 100? or based on pixel size?
    const count = 200;
    const step = (dataExtent[1] - dataExtent[0]) / count;

    let value = dataExtent[0];
    const stopValues = [];
    for (let i = 0; i <= count && value < dataExtent[1]; i++) {
        stopValues.push(value);
        value += step;
    }
    stopValues.push(dataExtent[1]);

    return stopValues;
}

export default ContinuousModel;