Help with first web part

%3CLINGO-SUB%20id%3D%22lingo-sub-357897%22%20slang%3D%22en-US%22%3EHelp%20with%20first%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357897%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20trying%20to%20make%20my%20first%20web%20part%20using%20the%20Google%20charts%20api.%20I%20am%20using%20some%20of%20the%20code%20found%20here%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Fblob%2Fmaster%2Fgoogle-charts%2Fsrc%2Fwebparts%2FhelloWorld%2FHelloWorldWebPart.ts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FAJIXuMuK%2Fissues%2Fblob%2Fmaster%2Fgoogle-charts%2Fsrc%2Fwebparts%2FhelloWorld%2FHelloWorldWebPart.ts%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20renders%20find%20for%20the%20on%20load%20of%20the%20page%20but%20as%20soon%20as%20the%20properties%20pane%20is%20opened%20it%20stops%20rendering.%20I%20am%20attempting%20to%20glue%20my%20web%20part%20properties%20to%20the%20%22options%22%20object%20in%20the%20_drawChart()%20method.%20The%20documentation%20here%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fintegrate-with-property-pane%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fbasics%2Fintegrate-with-property-pane%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESays%20the%20redraw%20is%20automatic.%20What%20I%20think%20is%20happening%20is%20that%20the%20_drawChart()%20is%20only%20called%20when%20the%20pages%20loads%20but%20not%20each%20time%20the%20render()%20method%20is%20called%20(each%20time%20a%20property%20changes).%20Is%20that%20much%20of%20my%20assessment%20right%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CBLOCKQUOTE%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EGuid%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EEnvironment%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EEnvironmentType%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-core-library'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EBaseClientSideWebPart%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EIPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneDropdown%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-webpart-base'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ESPHttpClient%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ESPHttpClientResponse%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-http'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Eescape%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-lodash-subset'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'.%2FNampaPieChartWebPart.module.scss'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'NampaPieChartWebPartStrings'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3Egoogle%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'google'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EINampaPieChartWebPartProps%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elist%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Efield%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ecaption%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ewidth%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eheight%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Epiehole%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EISPLists%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evalue%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EISPList%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EISPList%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EId%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Edefault%3C%2FSPAN%3E%20%3CSPAN%3Eclass%3C%2FSPAN%3E%20%3CSPAN%3ENampaPieChartWebPart%3C%2FSPAN%3E%20%3CSPAN%3Eextends%3C%2FSPAN%3E%20%3CSPAN%3EBaseClientSideWebPart%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EINampaPieChartWebPartProps%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3Eguid%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3EGuid%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EnewGuid%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3CSPAN%3EtoString%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3ElistLists%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3ElistFields%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3EonInit%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Egoogle%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Echarts%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eload%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22current%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3CSPAN%3Epackages%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3CSPAN%3E%22corechart%22%3C%2FSPAN%3E%3CSPAN%3E%5D%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Egoogle%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Echarts%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EsetOnLoadCallback%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_drawChart%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ebind%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E))%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Esuper%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EonInit%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_getListData%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EISPLists%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EspHttpClient%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eget%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EpageContext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eweb%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EabsoluteUrl%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E%60%2F_api%2Fweb%2Flists%3F%24filter%3DHidden%20eq%20false%60%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3ESPHttpClient%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econfigurations%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ev1%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eresponse%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3ESPHttpClientResponse%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Eresponse%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ejson%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%20%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EdomElement%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EinnerHTML%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E%60%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CDIV%20class%3D%22%26quot%3B%26lt%3B%2FSPAN%22%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EnampaPieChart%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%22%20id%3D%22%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eguid%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%22%20style%3D%22background-color%3A%20inherit%3B%22%26gt%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3C%2FSPAN%3E%3C%2FDIV%3E%60%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3Eget%3C%2FSPAN%3E%20%3CSPAN%3EdataVersion%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eparse%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'1.0'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3EgetPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EIPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Epages%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eheader%3A%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edescription%3A%3C%2FSPAN%3E%20%3CSPAN%3E'A%20simple%20pie%20chart%20that%20will%20summarize%20a%20single%20column%20of%20a%20list.'%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Egroups%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupName%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Source%20Data'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupFields%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneDropdown%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'list'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'List'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eoptions%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ElistLists%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edisabled%3A%3C%2FSPAN%3E%20%3CSPAN%3Efalse%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneDropdown%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'field'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Field'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eoptions%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ElistFields%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edisabled%3A%3C%2FSPAN%3E%20%3CSPAN%3Etrue%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupName%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Appearance'%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupFields%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'caption'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Caption'%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'width'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Width'%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'height'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Height'%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'piehole'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Piehole'%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_drawChart%3C%2FSPAN%3E%3CSPAN%3E()%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Edata%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Egoogle%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Evisualization%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EarrayToDataTable%3C%2FSPAN%3E%3CSPAN%3E(%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Task'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E'Hours%20per%20Day'%3C%2FSPAN%3E%3CSPAN%3E%5D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Work'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E11%3C%2FSPAN%3E%3CSPAN%3E%5D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Eat'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E2%3C%2FSPAN%3E%3CSPAN%3E%5D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Commute'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E2%3C%2FSPAN%3E%3CSPAN%3E%5D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Watch%20TV'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E2%3C%2FSPAN%3E%3CSPAN%3E%5D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Sleep'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E7%3C%2FSPAN%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Eoptions%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Etitle%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eproperties%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ecaption%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EpieHole%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eproperties%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Epiehole%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ewidth%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eproperties%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ewidth%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eheight%3A%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eproperties%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eheight%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Echart%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Enew%3C%2FSPAN%3E%20%3CSPAN%3Egoogle%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Evisualization%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EPieChart%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eguid%3C%2FSPAN%3E%3CSPAN%3E))%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Echart%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Edraw%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edata%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Eoptions%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FBLOCKQUOTE%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357898%22%20slang%3D%22en-US%22%3ERe%3A%20Help%20with%20first%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357898%22%20slang%3D%22en-US%22%3E%3CP%3EBy%20the%20way%2C%20how%20do%20I%20paste%20better%20formatted%20code%20in%20a%20post%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I am trying to make my first web part using the Google charts api. I am using some of the code found here:

https://github.com/AJIXuMuK/issues/blob/master/google-charts/src/webparts/helloWorld/HelloWorldWebPa...

 

It renders find for the on load of the page but as soon as the properties pane is opened it stops rendering. I am attempting to glue my web part properties to the "options" object in the _drawChart() method. The documentation here: 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane

 

Says the redraw is automatic. What I think is happening is that the _drawChart() is only called when the pages loads but not each time the render() method is called (each time a property changes). Is that much of my assessment right?

 

import {
Version,
Guid,
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown
} from '@microsoft/sp-webpart-base';
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './NampaPieChartWebPart.module.scss';
import * as strings from 'NampaPieChartWebPartStrings';
import * as google from 'google';
export interface INampaPieChartWebPartProps {
list: string;
field: string;
caption: string;
width: string;
height: string;
piehole: string;
}
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
export default class NampaPieChartWebPart extends BaseClientSideWebPart<INampaPieChartWebPartProps> {
private guid = Guid.newGuid().toString();
private listLists = [];
private listFields = [];
protected onInit(): Promise<void> {
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(this._drawChart.bind(this));
return super.onInit();
}
private _getListData(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.nampaPieChart }" id="${ this.guid }" style="background-color: inherit;">
 
</div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: 'A simple pie chart that will summarize a single column of a list.'
},
groups: [
{
groupName: 'Source Data',
groupFields: [
PropertyPaneDropdown('list', {
label: 'List',
options: this.listLists,
disabled: false
}),
PropertyPaneDropdown('field', {
label: 'Field',
options: this.listFields,
disabled: true
})
]
},
{
groupName: 'Appearance',
groupFields: [
PropertyPaneTextField('caption', {
label: 'Caption'
}),
PropertyPaneTextField('width', {
label: 'Width'
}),
PropertyPaneTextField('height', {
label: 'Height'
}),
PropertyPaneTextField('piehole', {
label: 'Piehole'
})
]
}
]
}
]
};
}
private _drawChart() {
const data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
const options = {
title: this.properties.caption,
pieHole: this.properties.piehole,
width: this.properties.width,
height: this.properties.height
};
const chart = new google.visualization.PieChart(document.getElementById(this.guid));
chart.draw(data, options);
}
}
1 Reply
Highlighted

By the way, how do I paste better formatted code in a post?