Refresh the components created in dashboard

Refresh the components created in dashboard

Posted by: ykumar23 on 4 May 2018, 1:24 am EST

• 

  ykumar23

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 May 2018, 1:24 am EST

  Hi,

  A dynamic dashboard is created as per thehttp://demos.wijmo.com/5/Angular/DynamicDashboard/DynamicDashboard/

  But we need to show the widget in full width if it is single component.
  
  Ex : In the above link, if only bar chart is added (only one component) entire width is occupied by that tile. However the inner wjFlexChart is only occupying 50% width.

  As per out requirement, one row can accommodate 2 components at max.
  
  I modified code such that a single component in row takes 100% width (WjFlexChart) and for 2 component they share 50%-50%. Everything is working fine if rendering simultaneously.

  Problem comes if first component is rendered and second component is added later.
  
  First component is occupied with 100% and second component is added with 50%. So in total of 150% for single row.
  
  These two components are adjusted to 50% - 50% (ie. row with width 100%) when the window is resized manually.

  I tried using invalidateAll() on each flexChart but these components are not resizing till browser resize is done.
  
  Please suggest.

            const chart = flexChartContainer.querySelector ('wj-flex-chart');
            wjcCore.Control.invalidateAll(chart);
  

  (A row contains 2 flexChartContainer and each flexChartContainer contains 1 wj-flex-chart)

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2018, 1:32 am EST

  Hi,

  Please allow some time to adjust Parent height then call invalidate method.

  //refer to following code snippet
  window.setTimeout(()=>{
  	wijmo.Control.invalidateAll();
  },200);
  

  Please also find the attached sample.

  ~ManishDynamicDashboard.zip

• 

  ykumar23

  • Post Options:
  • Link
    Copy

  Posted 8 May 2018, 11:48 pm EST

  Hi,

  The issue is still replicating even after trying the mentioned steps.

  Modified the code and added some CSS changes, on initial load we see 2 widgets in the dashboard container, try removing one of the widgets and now we see the available widget in full length. Now, after adding a widget from the drop down we see that the widgets extends beyond the container.

  Please find the attached sample.

  dashboard.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 May 2018, 10:54 pm EST

  Hi,
  
  We need to make some changes in CSS file to make it working.
  
  Please refer to the attached updated sample.

  
  /* Changes made in app.css:-*/
  
  bar-chart-cmp,grid-cmp,linear-gauge-cmp,radial-gauge-cmp,
  blank-cmp,bubble-chart-cmp, column-chart-cmp,bullet-Graph-cmp
  {
  width: 50%;
  flex: 1 1;
  }
  
  .wj-flexchart{
  min-height: 400px;
  width: 100%;
  }
  
  .compholder {
  display: flex;
  width: 100%;
  }
  

  ~Manish

  dashboard_updated.zip