import React from 'react';
import { Vega } from 'react-vega';
import PropTypes from 'prop-types';
export const GaugeWidget = (props) => {
    const { title = '', unitLabel = '', legend = '', showTicks = false, ticksNumber = 6, backgroundColor = '#cbd1d6', fillColor = '#FF9800', value = 0, minValue = 0, maxValue = 100, handleHover = () => { } } = props;
    const specs = {
        $schema: 'https://vega.github.io/schema/vega/v5.json',
        width: 350,
        height: 180,
        padding: { left: 0, right: 0, top: 0, bottom: 0 },
        data: [
            {
                name: 'ticks',
                transform: [
                    {
                        type: 'sequence',
                        as: 'data',
                        start: {
                            signal: '0'
                        },
                        stop: {
                            signal: '(maxValue - minValue) + 0.1'
                        },
                        step: {
                            signal: '(maxValue - minValue)/(ticksNumber-1)'
                        }
                    },
                    {
                        type: 'formula',
                        expr: 'datum.data + minValue',
                        as: 'data_2'
                    },
                    {
                        type: 'formula',
                        as: 'radianRef',
                        expr: 'PI * (datum.data/(maxValue - minValue))'
                    },
                    {
                        type: 'formula',
                        as: 'x',
                        expr: 'centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))'
                    },
                    {
                        type: 'formula',
                        as: 'y',
                        expr: 'centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))'
                    }
                ]
            }
        ],
        signals: [
            {
                name: 'centerX',
                update: 'width/2'
            },
            {
                name: 'centerY',
                update: 'height/2 + outerRadius/2'
            },
            {
                name: 'outerRadius',
                update: 'targetValue ? radiusRef * 0.9 : radiusRef * 0.95'
            },
            {
                name: 'radiusRef',
                update: 'max(width/2, height/2)' // TODO: Important max or min functions are allowed
            },
            {
                name: 'innerRadius',
                update: 'outerRadius - outerRadius * 0.25'
            },
            {
                name: 'targetValue',
                value: value
            },
            {
                name: 'backgroundColor',
                value: backgroundColor
            },
            {
                name: 'ticksNumber',
                value: ticksNumber
            },
            {
                name: 'mainValue',
                value: value
            },
            {
                name: 'title',
                value: title
            },
            {
                name: 'unit',
                value: unitLabel
            },
            {
                name: 'usedValue',
                update: 'min(max(minValue, mainValue), maxValue)'
            },
            {
                name: 'minValue',
                value: minValue
            },
            {
                name: 'maxValue',
                value: maxValue
            },
            {
                name: 'fillColor',
                value: fillColor
            },
            {
                name: 'ticksColor',
                value: '#000000'
            },
            {
                name: 'showTicks',
                value: showTicks
            },
            {
                name: 'fontFactor',
                update: '(radiusRef/5)/25'
            },
            {
                name: 'hasTarget',
                update: 'isNumber(targetValue) === true'
            },
            {
                name: 'targetRule',
                update: '(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0'
            },
            {
                name: 'showTarget',
                value: true
            },
            {
                name: 'targetStatus',
                update: 'mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1'
            },
            {
                name: 'lowIsGood',
                value: false
            },
            {
                name: 'legend',
                value: legend
            }
        ],
        scales: [
            {
                name: 'gaugeScale',
                type: 'linear',
                domain: { data: 'ticks', field: 'data_2' },
                zero: false,
                range: { signal: '[-PI/2, PI/2]' }
            },
            {
                name: 'tickScale',
                type: 'linear',
                domain: { data: 'ticks', field: 'data' },
                range: { signal: '[PI/2, -PI/2]' }
            },
            {
                name: 'targetStatusColorScale',
                domain: [-1, 0, 1],
                range: ['red', 'orange', 'green']
            }
        ],
        axes: [],
        legends: [],
        marks: [
            {
                type: 'arc',
                name: 'gauge',
                encode: {
                    enter: {
                        x: { signal: 'centerX' },
                        y: { signal: 'centerY' },
                        startAngle: { signal: '-PI/2' },
                        endAngle: { signal: 'PI/2' },
                        outerRadius: { signal: 'outerRadius' },
                        innerRadius: { signal: 'innerRadius' },
                        fill: { signal: 'backgroundColor' }
                    }
                }
            },
            {
                type: 'arc',
                encode: {
                    enter: {
                        startAngle: { signal: '-PI/2' }
                    },
                    update: {
                        x: { signal: 'centerX' },
                        y: { signal: 'centerY' },
                        innerRadius: { signal: 'innerRadius' },
                        outerRadius: { signal: 'outerRadius' },
                        endAngle: { scale: 'gaugeScale', signal: 'usedValue' },
                        fill: { signal: 'fillColor' }
                    }
                }
            },
            {
                type: 'arc',
                description: 'ticks on the arc',
                from: { data: 'ticks' },
                encode: {
                    enter: {
                        x: { signal: 'centerX' },
                        y: { signal: 'centerY' },
                        outerRadius: { signal: 'outerRadius' },
                        innerRadius: { signal: 'outerRadius - (radiusRef*0.05)' },
                        startAngle: {
                            scale: 'tickScale',
                            field: 'data'
                        },
                        endAngle: {
                            scale: 'tickScale',
                            field: 'data'
                        },
                        stroke: { signal: 'ticksColor' },
                        opacity: { signal: 'showTicks ? 1 : 0' }
                    }
                }
            },
            {
                type: 'text',
                from: { data: 'ticks' },
                encode: {
                    enter: {
                        align: { value: 'center' },
                        baseline: { value: 'alphabetic' }
                    },
                    update: {
                        text: { signal: "format(datum.data_2, '.0f')" },
                        x: { field: 'x' },
                        y: { field: 'y' },
                        fontSize: { signal: 'fontFactor* 11' },
                        fill: { signal: 'ticksColor' },
                        opacity: { signal: 'showTicks ? 1 : 0' }
                    }
                }
            },
            {
                type: 'text',
                description: 'displayed min value at the bottom left of gauge when showTicks is false',
                from: { data: 'gauge' },
                encode: {
                    enter: {
                        align: { value: 'center' },
                        baseline: { value: 'top' }
                    },
                    update: {
                        text: { signal: 'minValue' },
                        x: {
                            signal: 'centerX - outerRadius + (outerRadius - innerRadius)/2'
                        },
                        y: { signal: 'centerY', offset: { signal: 'fontFactor*5' } },
                        fontSize: { signal: 'fontFactor * 11' },
                        opacity: { signal: 'showTicks ? 0 : 1' }
                    }
                }
            },
            {
                type: 'text',
                description: 'displayed max value at the bottom right of gauge when showTicks is false',
                from: { data: 'gauge' },
                encode: {
                    enter: {
                        align: { value: 'center' },
                        baseline: { value: 'top' }
                    },
                    update: {
                        text: { signal: 'maxValue' },
                        x: {
                            signal: 'centerX + innerRadius + (outerRadius - innerRadius)/2'
                        },
                        y: { signal: 'centerY', offset: { signal: 'fontFactor*5' } },
                        fontSize: { signal: 'fontFactor * 11' },
                        opacity: { signal: 'showTicks ? 0 : 1' }
                    }
                }
            },
            {
                type: 'text',
                description: 'displayed a title for the chart ',
                name: 'titleLabel',
                encode: {
                    enter: {
                        x: { signal: 'centerX' },
                        baseline: { value: 'top' },
                        align: { value: 'center' }
                    },
                    update: {
                        text: { signal: 'title' },
                        y: { signal: 'centerY', offset: { signal: 'fontFactor * -50' } },
                        fontSize: { signal: 'fontFactor * 14' },
                        fill: { signal: 'fillColor' }
                    }
                }
            },
            {
                type: 'text',
                description: 'displayed main value at the bottom center of the gauge ',
                name: 'gaugeValue',
                encode: {
                    enter: {
                        x: { signal: 'centerX' },
                        baseline: { value: 'top' },
                        align: { value: 'center' }
                    },
                    update: {
                        text: { signal: "format(mainValue, '.1f') + unit " },
                        y: { signal: 'centerY', offset: { signal: 'fontFactor * -25' } },
                        fontSize: { signal: 'fontFactor * 20' }
                    }
                }
            },
            {
                type: 'text',
                name: 'targetDiff',
                description: 'add status with symbol and difference and percentage',
                from: { data: 'gaugeValue' },
                encode: {
                    enter: {
                        x: { signal: 'centerX' },
                        align: { value: 'center' },
                        baseline: { value: 'top' }
                    },
                    update: {
                        // text: { "signal": "format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'" },
                        // fill: { "signal": "targetStatus", "scale": "targetStatusColorScale" },
                        // x: { "signal": "centerX + (fontFactor * 12)" },
                        text: { signal: 'legend' },
                        y: { signal: 'centerY', offset: { signal: 'fontFactor * -4' } },
                        fontSize: { signal: 'fontFactor * 10' },
                        opacity: { signal: ' targetRule ? 1 : 0' }
                    }
                }
            }
        ]
    };
    const signalListeners = { hover: handleHover };
    return (React.createElement(Vega, { spec: specs, actions: false, signalListeners: signalListeners }));
};
GaugeWidget.propTypes = {
    /** @type {?string} label showed in the bottom part of the graph */
    title: PropTypes.string.isRequired,
    /** @type {?string} optional symbol to put at the right side of the value */
    legend: PropTypes.string,
    /** @type {?bool} optional icon to display ticks in the graph */
    showTicks: PropTypes.bool,
    /** @type {?string} optional additional css properties */
    unitLabel: PropTypes.string,
    /** @type {?number}  number of ticks in the graph */
    ticksNumber: PropTypes.number,
    /** @type {?string} render prop if you want to pass a custom react element instead of the predefined label*/
    backgroundColor: PropTypes.string,
    /** @type {?number} main value for the graph element*/
    value: PropTypes.number.isRequired,
    /** @type {?number} range min value for the graph element*/
    minValue: PropTypes.number,
    /** @type {?number} range max value for the graph element*/
    maxValue: PropTypes.number
};
//# sourceMappingURL=GaugeWidget.js.map