import * as React from 'react';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';

const App = () => {
    const colorRanges = [
        { color: "#de290b", max: 1454040000, min: 1254040000 },
        { color: "#de440c", max: 1254039999, min: 1054040000 },
        { color: "#ea7707", max: 1054040000, min: 300000000 },
        { color: "#ee8a06", max: 460000000, min: 210000000 },
        { color: "#f19505", max: 209999999, min: 190000000 },
        { color: "#f6a903", max: 189999999, min: 180000000 },
        { color: "#f8b203", max: 179999999, min: 160000000 },
        { color: "#fabb02", max: 159999999, min: 140000000 },
        { color: "#fbbf01", max: 139999999, min: 100000000 },
        { color: "#fbcd01", max: 99999999, min: 90000000 },
        { color: "#fbde33", max: 89999999, min: 10000000 }
    ];

    const renderCallbacks = {
        '*': (element: any, data: any) => {
            element.css({
                color: '#ffffff'
            });
            element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '%</span>');
            return true;
        }
    };

    const source = [
        {
            color: '#37c837',
            label: 'Chrome',
            value: 44.06
        },
        {
            color: '#0066ff',
            label: 'Internet Explorer',
            value: 22.08
        },
        {
            color: '#ed7b0f',
            label: 'Firefox',
            value: 18.17
        },
        {
            color: '#818181',
            label: 'Others',
            value: 9.07
        },
        {
            color: '#9a0900',
            label: 'Opera',
            value: 3.38
        },
        {
            color: '#4dbff1',
            label: 'Safari',
            value: 3.24
        }
    ];

    return (
        <JqxTreeMap
            theme="material-purple"
            width="100%"
            height={300}
            source={source}
            colorRanges={colorRanges}
            renderCallbacks={renderCallbacks}
        />
    );
};

export default App;