Smith Chart does not update on again data binding to react component

[ali aslam]

Hi, I am using the Smith Chart in one of my projects. I fetch data from database and bind it to the react component named "SmithchartSeriesDirective" to its attribute named "points". It successfully binds the data on the smith chart, but on successive calls the data set changes due to any filter I apply, so this data is successfully fetched from database and as I bind it to the Smith Chart, the change does not reflects. Is there any refresh event I need to trigger?

Thanks

[Baby Palanidurai]

Hi Ali, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. You can refresh the smith charts by calling the refresh() method. We have prepared a simple sample with button click. In that button click, we have refreshed smith chart with new data.  

 

Code snippet: 

Change() { 

    let data = [ 

      { resistance: 20, reactance: -50 }, 

     // Add more data 

    ]; 

    this.smithchartInstance.series[0].points = data; 

    this.smithchartInstance.refresh(); 

} 

Sample link, 

https://stackblitz.com/edit/react-jjg9aj?file=index.js 

Kindly revert us, if you still facing issues. We are always happy to assist you. 

Regards, 

Baby. 

[ali aslam]

Hi Palanidurai,

I really appreciate you effort in helping me to resolve the issue. But issue still persist. I have integrated this smith chart in Grafana. Please view the attachments, it contains error plus my code.

Thanks & I hope you can help further.

Attachment: grafana_7b96d616.rar

[ali aslam]

Hi, Can you please update on it ? I am stuck.

Regards

[Baby Palanidurai]

Hi Ali, 

Thanks for your update. 

We have checked your code snippet files and images. In that, we have noticed, there is a problem in chart instance getting. Kindly get the chart instance by using ref attribute as like the below code snippet. 

class App extends Component<AppProps, AppState> { 

  private smithchartInstance: SmithchartComponent; 

  constructor(props) { 

    super(props); 

    this.state = { 

      name: "React" 

    }; 

  } 

Change() { 

    let data = [ 

      { resistance: 20, reactance: -50 }, 

      // More data 

    ]; 

    this.smithchartInstance.series[0].points = data; 

    this.smithchartInstance.refresh(); 

  } 

  render() { 

    return ( 

      <div> 

      <button id="click" onClick={this.Change.bind(this)}> 

          Click to Change data 

        </button> 

        <SmithchartComponent 

          id="smith-chart" 

          ref={gauge => (this.smithchartInstance = gauge)} 

        > 

          // Add more codes 

        </SmithchartComponent> 

      </div> 

    ); 

  } 

} 

Sample link: https://stackblitz.com/edit/react-ts-pcvvve?file=index.tsx 

Kindly revert us, if you have any other concerns. 

Regards, 

Baby. 

[ali aslam]

Hi, Thanks for getting back. I am unable to add this line. I get compile time error, when ever I add this line. Kindly view the attachments.

ERROR :

Type 'SmithchartComponent | null' is not assignable to type 'SmithchartComponent'.
Type 'null' is not assignable to type 'SmithchartComponent'.ts(2322)

Regards

[Baby Palanidurai]

Hi Ali, 

Thanks for your update. 

We have analyzed your query. Kindly use the below code snippet to resolve the reported issue. 

Code snippet: 

ref={gauge => (this.smithchartInstance = gauge as SmithchartComponent)} 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/chartSample1394200241 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[ali aslam]

Hi Palandurai,

Thanks for the help. It worked :)

Regards

[Baby Palanidurai]

Hi Ali, 

Most welcome. 

Please let us know, if you have any other concerns. We are always happy to assist you. 

Regards, 

Baby. 

[ali aslam]

Hi,

I need to remove the lines connecting the dots. Only need to show the dots. I have find the class named SeriesMarkerDataLabelConnectorLineModel .

 Will this help me in achieving my task ? Can you please share any example that implements this feature in smith chart.

Regards

[Baby Palanidurai]

Hi Ali, 

Thanks for your update. 

We have analyzed your query. We can achieve your requirement by setting fill property for series and marker options. To remove or hide the connecting the dots, you can set transparent for series fill property and set any color for marker fill property. 

Code snippet: 

<SmithchartSeriesCollectionDirective> 

            <SmithchartSeriesDirective 

              fill= 'transparent' 

              name="Transmission1" 

              marker={{ 

                shape: "Circle", 

                visible: true, 

                fill: 'red', 

                border: { width: 2 } 

              }} 

            /> 

          </SmithchartSeriesCollectionDirective> 

        </SmithchartComponent> 

Screenshot: 

 

Sample link: https://stackblitz.com/edit/react-ts-bzbqe7?file=index.tsx 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[ali aslam]

Hi,

Thanks for the help, it works fine but this property fill= 'transparent'  hides the circle beside legend text. Any other property that we can set ? Secondly, can we set different colors of the circles of the points, I need to set different colors for first and last circle point plotted on the chart.

Thanks.

[Baby Palanidurai]

Hi Ali, 

Thanks for your update. 

We have analyzed your query. In your scenario, you can set the transparent to series element in the loaded event instead of setting fill to transparent. Please find the below code snippet, 

loaded(args) { 

    let element = document.getElementById('smith-chart_series0_points'); 

    element.setAttribute('stroke', 'transparent'); 

  } 

 

Sample link: https://stackblitz.com/edit/react-ts-o6niqg?file=index.tsx 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[ali aslam]

Hi Palandurai,

Thanks for the help. It worked :).

Secondly, is there any way we can change the default theme value from 'Material' to any null or transparent value. The problem is I want the smith chart to take the background of my page, not to some restricted value, other wise I need to write some logic to get the color of my page and depending upon the page color I need to render the appropriate theme. Hope this is clear !

Regards

[Baby Palanidurai]

Hi Ali, 

 

Thanks for your update. 

 

We have analyzed your query. We are having background property for smith charts. If you want as transparent, you set background as transparent. Please find the blow code snippet to achieve this requirement, 

<SmithchartComponent background="transparent"/> 

</SmithchartComponent> 

Kindly revert us, if this is doesn’t meet your requirement. 

 

Regards, 

Baby. 

[ali aslam]

Hi Palindurai,

Thanks for the help, but the issue is partially fixed. Background color is perfect, its adjust on to my color page but the axis remains white in any case. I want to adjust the axis on to my color page as well. Is there any possibility?

PLease view the attached file as well.

Regards 

Attachment: axisIssue_323d5df7.rar

[ali aslam]

Hi,

Another thing, I am using render type as impedance. According to my understanding, smith chart plots data from left to right irrespective of the points location. I mean if I am passing random point in simple one point at right side then one point at left side then one at right side and so on, why chart still renders from left to right.

Regards

[Durga Gopalakrishnan]

Hi Ali, 

 

We have analyzed your queries. Please check with the below options. 

 

Query 1 : to adjust the axis on to my color page as well 

 

We suggest you to use horizontal axis and radial axis properties to customize axis line, gridlines and labels color. We have prepared sample for your reference. Please check with the below code snippet and sample. 

 

Code Snippet 

 

<SmithchartComponent 

        horizontalAxis={{ 

            majorGridLines:{color: ‘white’}, 

            axisLine:{color: ‘white’}, 

            labelStyle:{ color: ‘white’ } 

        }} 

        radialAxis={{ 

             majorGridLines:{color: ‘white’}, 

             axisLine:{color: ‘white’}, 

             labelStyle:{ color: ‘white’ } 

        }} /> 

</SmithchartComponent> 

 

Screenshot 

 

 

Sample 

https://stackblitz.com/edit/react-ts-fdxnnh?file=index.tsx 

Query 2 : passing random point in simple one point at right side then one point at left side then one, why chart still renders from left to right 

When the provided series points values are either higher or lower and when its value is in different order, points will get sorted and rendered based on calculated ranges. This is default behaviour.  

Kindly revert us, if you have any concerns. 

Regards, 

Durga G

[ali aslam]

Hi,

Thanks for the help. Can you please help me in customizing the smith chart tool tip? I need to add time as well with the plotted points in the tool tip. Hope my question is clear.

Your help is highly appreciated as always.

Thanks & Best Regards

[Srihari Muthukaruppan]

Hi Ali, 

  

We have analyzed your query. From that we would like to let you know that we were facing an issue in tooltip customization in SmithChart and we confirm this as a bug and have already logged a defect report. You can keep track of the bug from the feedback portal below.  

  

FeedbackPortal: https://www.syncfusion.com/feedback/12695 

  

The fix will be available in our upcoming volume 1 main release which expected to be rolled out end of March 2020. We appreciate your patience until then. 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

  

Regards,  

 Srihari M

[Baby Palanidurai]

Hi Ali, 

 

Thanks for your patience. 

 

Due to some technical difficulties, we couldn’t include the this in our main release. We will resolve and include in our next weekly patch release which is expected to rolled out at 14^th April 2020. We appreciate your patience until then. 

 

Regards, 

Baby. 

[Srihari Muthukaruppan]

Hi Ali, 

  

Thanks for being patience. 

  

We are glad to announce that our v18.1.44  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  

 

Npm Packages: https://www.npmjs.com/~syncfusionorg 

 
 

We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  

  

Regards,  

Srihari M