jQuery UI Widgets Forums React jqxtreemap nice legend show

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 6 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxtreemap nice legend show #115058

    youngmehran
    Participant

    Hi
    i,m using jqxtreemap that i found in this link :

    https://www.jqwidgets.com/react/react-treemap/index.htm#https://www.jqwidgets.com/react/react-treemap/react-treemap-defaultfunctionality.htm

    in my react project ,

    and i like to show a legend like this under my tree map component :

    <div class='my-legend'>
    <div class='legend-title'>The Title or Explanation of your Map</div>
    <div class='legend-scale'>
      <ul class='legend-labels'>
        <li><span style='background:#8DD3C7;'></span>One</li>
        <li><span style='background:#FFFFB3;'></span>Two</li>
        <li><span style='background:#BEBADA;'></span>Three</li>
        <li><span style='background:#FB8072;'></span>Four</li>
        <li><span style='background:#80B1D3;'></span>etc</li>
      </ul>
    </div>
    <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div>
    </div>
    
    <style type='text/css'>
      .my-legend .legend-title {
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 90%;
        }
      .my-legend .legend-scale ul {
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        float: left;
        list-style: none;
        }
      .my-legend .legend-scale ul li {
        font-size: 80%;
        list-style: none;
        margin-left: 0;
        line-height: 18px;
        margin-bottom: 2px;
        }
      .my-legend ul.legend-labels li span {
        display: block;
        float: left;
        height: 16px;
        width: 30px;
        margin-right: 5px;
        margin-left: 0;
        border: 1px solid #999;
        }
      .my-legend .legend-source {
        font-size: 70%;
        color: #999;
        clear: both;
        }
      .my-legend a {
        color: #777;
        }
    </style>

    how can i do that ?

    tnx in advance

    jqxtreemap nice legend show #115060

    Yavor Dashev
    Participant

    Hi youngmehran,

    Unfortunately the jqxTreeMap doesn’t support this functionality by default.
    However I have made a workaround and you can see the code snippet below to see one of the possible solutions:

    //In you App.tsx file

    import * as React  from 'react';
    import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
    
    class App extends React.PureComponent<{}, ITreeMapProps> {
        private myTreeMap = React.createRef<JqxTreeMap>(); 
         addlegend =  () =>{
            setTimeout(() => {
                const labelElement = document.getElementsByClassName('jqx-treemap-legend-label')
                    const labelContent = '
    
                    <div class='my-legend'>
                    <div class='legend-title'>The Title or Explanation of your Map</div>
                    <div class='legend-scale'>
                    <ul class='legend-labels'>
                        <li><span style='background:#8DD3C7;'></span>One</li>
                        <li><span style='background:#FFFFB3;'></span>Two</li>
                        <li><span style='background:#BEBADA;'></span>Three</li>
                        <li><span style='background:#FB8072;'></span>Four</li>
                        <li><span style='background:#80B1D3;'></span>etc</li>
                    
                    </div>
                    <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div>
                    </div>
                    '
                    
                labelElement[0].innerHTML= labelContent
    
                    }, 300);
        }
        constructor(props: {}) {
          super(props);
      
      
       
          this.state = {
            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 }
            ],
            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;
                }
            },
            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
            }]
        }
        this.addlegend()
        }
        
        public render() {
          return (
              <div className='treeMapContainer'>
            <JqxTreeMap ref={this.myTreeMap} 
              source={this.state.source} 
              colorRange={50} 
           
              legendPosition={{x: 20, y: -150}}
              legendScaleCallback={this.state.legendScaleCallback}
              colorMode={'autoColors'}
            />
            </div>
          );
        }
      }
    export default App;

    //In you CSS file

    
    .jqx-treemap-legend-table,
    .jqx-treemap-legend-values{
      display: none;
    }
    .jqx-treemap-legend{
      background-color: white!important;
      color: black;
    }
    .jqx-treemap-legend-label{
      color: black!important;
    }
    .treeMapContainer{
      display: inline-block;
      border: 1px solid grey;
      padding: 10px 10px 200px 10px;
    }
    .my-legend .legend-title {
      text-align: left;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 90%;
      }
    .my-legend .legend-scale ul {
      margin: 0;
      margin-bottom: 5px;
      padding: 0;
      float: left;
      list-style: none;
      }
    .my-legend .legend-scale ul li {
      font-size: 80%;
      list-style: none;
      margin-left: 0;
      line-height: 18px;
      margin-bottom: 2px;
      }
    .my-legend ul.legend-labels li span {
      display: block;
      float: left;
      height: 16px;
      width: 30px;
      margin-right: 5px;
      margin-left: 0;
      border: 1px solid #999;
      }
    .my-legend .legend-source {
      font-size: 70%;
      color: #999;
      clear: both;
      }
    .my-legend a {
      color: #777;
      }

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 6 months, 1 week ago by  Yavor Dashev.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.