You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/09/13 06:25:19 UTC

[GitHub] [echarts] MeMeMax opened a new issue, #17644: [Bug] Heatmap value overflow: 'truncate' not dynamic

MeMeMax opened a new issue, #17644:
URL: https://github.com/apache/echarts/issues/17644

   ### Version
   
   5.3.3
   
   ### Link to Minimal Reproduction
   
   https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian
   
   ### Steps to Reproduce
   
   1. Copy this code into the example
   ```
   // prettier-ignore
   const hours = [
       '12a', '1a', '2a', '3a', '4a', '5a', '6a',
       '7a', '8a', '9a', '10a', '11a',
       '12p', '1p', '2p', '3p', '4p', '5p',
       '6p', '7p', '8p', '9p', '10p', '11p'
   ];
   // prettier-ignore
   const days = [
       'Saturday', 'Friday', 'Thursday',
       'Wednesday', 'Tuesday', 'Monday', 'Sunday'
   ];
   // prettier-ignore
   const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7]
 , [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
       .map(function (item) {
       return [item[1], item[0], item[2]*100 || '-'];
   });
   option = {
     tooltip: {
       position: 'top'
     },
     grid: {
       height: '50%',
       top: '10%'
     },
     xAxis: {
       type: 'category',
       data: hours,
       splitArea: {
         show: true
       }
     },
     yAxis: {
       type: 'category',
       data: days,
       splitArea: {
         show: true
       }
     },
     visualMap: {
       min: 0,
       max: 10,
       calculable: true,
       orient: 'horizontal',
       left: 'center',
       bottom: '15%'
     },
     series: [
       {
         name: 'Punch Card',
         type: 'heatmap',
         data: data,
         label: {
           show: true,
           width:30,
           overflow:'truncate'
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
         }
       }
     ]
   };
   ```
   
   2. Pull the Heatmap view smaller
   3. Play around with series[0].label.width property
   
   ### Current Behavior
   
   Currently we have to set a fixed width for truncating the value of each cell. This results in the following behaviour:
   
   Either the value is smaller than the width and it is displayed. Or the value is larger than the width. Then ellipsis is displayed.
   
   ### Expected Behavior
   
   I would expect that the width can be dynamic so that the value is truncated if there is not enough space and not truncated if there is enough space.
   
   ### Environment
   
   ```markdown
   - OS: Windows
   - Browser: Chrome
   - Framework: Angular
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #17644: [Bug] Heatmap value overflow: 'truncate' not dynamic

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17644:
URL: https://github.com/apache/echarts/issues/17644#issuecomment-1247771384

   This issue is labeled with `difficulty: easy`.
   @MeMeMax Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.
   
   Please have a look at [How to debug ECharts](https://github.com/apache/echarts/blob/master/CONTRIBUTING.md#how-to-debug-echarts) if you'd like to give a try. 🤓


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Agility6 commented on issue #17644: [Bug] Heatmap value overflow: 'truncate' not dynamic

Posted by GitBox <gi...@apache.org>.
Agility6 commented on issue #17644:
URL: https://github.com/apache/echarts/issues/17644#issuecomment-1367949160

   I didn't seem to find a problem when I tried it, was this problem solved?
   Is this the expected effect?
   ![Snipaste_2022-12-30_22-29-49](https://user-images.githubusercontent.com/75616395/210081239-28c9400e-29c6-403b-8bd9-64014a7d9993.png)
   ![Snipaste_2022-12-30_22-30-08](https://user-images.githubusercontent.com/75616395/210081264-6acc5aa2-9e2c-4825-82d2-cda19bfedab5.png)
   
   
   (English is not my native language; please excuse typing errors.😁)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org