Issue with Wijmo Linear Gauge Color Flickering During Grid Scrolling and Sortin

Issue with Wijmo Linear Gauge Color Flickering During Grid Scrolling and Sortin

Posted by: nilesh_nichal on 6 January 2025, 6:54 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 January 2025, 6:54 am EST

  We have implemented the Wijmo Linear Gauge (wj-linear-gauge) within a Wijmo Grid. However, we have observed that the customized (overridden) color inside the gauge momentarily changes during grid scrolling or sorting operations.
  
  Requirement: We need a solution to ensure that the customized color inside the Wijmo Linear Gauge (wj-linear-gauge) remains consistent and does not flicker or change temporarily while scrolling or sorting the Wijmo Grid.
  
  Please find the attached screen recording below.
  
  grid_issue.zip

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 7 January 2025, 4:40 am EST

  Hi Nilesh,

  To fix the issue please try to set the isAnimated property of the gauge as ‘false’.
  
  Sample Code:

      <wj-linear-gauge #theGauge [isAnimated]="false" >
          <wj-range [min]="0" [max]="33" [color]="'red'"></wj-range>
          <wj-range [min]="33" [max]="66" [color]="'yellow'"></wj-range>
          <wj-range [min]="66" [max]="100" [color]="'green'"></wj-range>
      </wj-linear-gauge>
  

  If the issue persists then please share a sample application replicating this issue or edit the attached sample application such that it reproduces the issue and send it back to us for further investigation.

  Sample Link: https://stackblitz.com/edit/asd32sa-9zpvtkgf?file=src%2Fapp%2Fapp.component.html

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 7 January 2025, 9:28 am EST

  Hi Akshay,

  I have updated the code with isAnimated property of the gauge as ‘false’, but there is one issue still there. The default fill color of the wj-linear-gauge is still rendered for a fraction of a second before the overridden color becomes visible during grid scrolling or sorting operations.
  
  Please find the below code

  <wj-linear-gauge #linearGauge
                               [isAnimated]="false"
                               [min]="0"
                               [max]="100"
                               [showText]="'None'"
                               [value]="(completenessValue$ | async)*1"
                               [showRanges]="false"
                               [thumbSize]="0">
                  <wj-range [min]="0"
                            [max]="50"
                            [color]="graphsColorConstants.belowAverage"></wj-range>
                  ...
  				...
                  <wj-range [wjProperty]="'face'"
                            [thickness]="0.7"
                            [min]="0"
                            [max]="100"
                            [color]="graphsColorConstants.faceColor"></wj-range>
              </wj-linear-gauge>

  Please find the below attached screen recording for the issue of The default fill color(which is blue as you can see from the screen recording) of the wj-linear-gauge which is still rendered for a fraction of a second before the overridden color. Let us know if anything required from our end.
  
  Grid fill issue.zip

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2025, 2:49 am EST

  Hi Nilesh,

  Thanks for pointing this out to us. This issue seems to be occurring as the Gauge color is updated on Gauge.refresh which is called in a different rendering cycle. I have reported this issue to the development team and will get back to you once I have any updates on the same[WJM-35521].

  As for now, I would request you to use the following workaround.

  .wj-flexgrid .wj-gauge .wj-pointer,
  .wj-gauge .wj-needle {
    fill: none;
  }
  

  With this class added the initial color of the gauge pointer is none. This only ensures that the initial blue color is not visible when scrolling the grid very fast although the proper fix has to be done in the Wijmo code itself.

  Regards,

  Akshay