src/component/dataZoom/SliderZoomModel.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 DataZoomModel, {DataZoomOption} from './DataZoomModel';
import {
    BoxLayoutOptionMixin,
    ZRColor,
    LineStyleOption,
    AreaStyleOption,
    ItemStyleOption,
    LabelOption
} from '../../util/types';
import { inheritDefaultOption } from '../../util/component';

export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin {

    show?: boolean
    /**
     * Slider dataZoom don't support textStyle
     */

    /**
     * Background of slider zoom component
     */
    backgroundColor?: ZRColor

    /**
     * @deprecated Use borderColor instead
     */
    // dataBackgroundColor?: ZRColor

    /**
     * border color of the box. For compatibility,
     * if dataBackgroundColor is set, borderColor
     * is ignored.
     */
    borderColor?: ZRColor

    /**
     * Border radius of the box.
     */
    borderRadius?: number | number[]

    dataBackground?: {
        lineStyle?: LineStyleOption
        areaStyle?: AreaStyleOption
    }

    selectedDataBackground?: {
        lineStyle?: LineStyleOption
        areaStyle?: AreaStyleOption
    }

    /**
     * Color of selected area.
     */
    fillerColor?: ZRColor

    /**
     * @deprecated Use handleStyle instead
     */
    // handleColor?: ZRColor

    handleIcon?: string

    /**
     * number: height of icon. width will be calculated according to the aspect of icon.
     * string: percent of the slider height. width will be calculated according to the aspect of icon.
     */
    handleSize?: string | number

    handleStyle?: ItemStyleOption

    /**
     * Icon to indicate it is a draggable panel.
     */
    moveHandleIcon?: string
    moveHandleStyle?: ItemStyleOption
    /**
     * Height of handle rect. Can be a percent string relative to the slider height.
     */
    moveHandleSize?: number

    labelPrecision?: number | 'auto'

    labelFormatter?: string | ((value: number, valueStr: string) => string)

    showDetail?: boolean

    showDataShadow?: 'auto' | boolean

    zoomLock?: boolean

    textStyle?: LabelOption

    /**
     * If eable select by brushing
     */
    brushSelect?: boolean

    brushStyle?: ItemStyleOption

    emphasis?: {
        handleStyle?: ItemStyleOption
        moveHandleStyle?: ItemStyleOption
    }
}


class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
    static readonly type = 'dataZoom.slider';
    type = SliderZoomModel.type;

    static readonly layoutMode = 'box';

    static defaultOption: SliderDataZoomOption = inheritDefaultOption(DataZoomModel.defaultOption, {
        show: true,

        // deault value can only be drived in view stage.
        right: 'ph',  // Default align to grid rect.
        top: 'ph',    // Default align to grid rect.
        width: 'ph',  // Default align to grid rect.
        height: 'ph', // Default align to grid rect.
        left: null,   // Default align to grid rect.
        bottom: null, // Default align to grid rect.

        borderColor: '#d2dbee',
        borderRadius: 3,

        backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.

        // dataBackgroundColor: '#ddd',
        dataBackground: {
            lineStyle: {
                color: '#d2dbee',
                width: 0.5
            },
            areaStyle: {
                color: '#d2dbee',
                opacity: 0.2
            }
        },

        selectedDataBackground: {
            lineStyle: {
                color: '#8fb0f7',
                width: 0.5
            },
            areaStyle: {
                color: '#8fb0f7',
                opacity: 0.2
            }
        },

        // Color of selected window.
        fillerColor: 'rgba(135,175,274,0.2)',
        handleIcon: 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
        // Percent of the slider height
        handleSize: '100%',

        handleStyle: {
            color: '#fff',
            borderColor: '#ACB8D1'
        },

        moveHandleSize: 7,
        moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
        moveHandleStyle: {
            color: '#D2DBEE',
            opacity: 0.7
        },

        showDetail: true,
        showDataShadow: 'auto',                 // Default auto decision.
        realtime: true,
        zoomLock: false,                        // Whether disable zoom.

        textStyle: {
            color: '#6E7079'
        },

        brushSelect: true,
        brushStyle: {
            color: 'rgba(135,175,274,0.15)'
        },

        emphasis: {
            handleStyle: {
                borderColor: '#8FB0F7'
            },
            moveHandleStyle: {
                color: '#8FB0F7'
            }
        }
    } as SliderDataZoomOption);
}

export default SliderZoomModel;