|
| 1 | +import{ |
| 2 | +changeChildAction, |
| 3 | +changeValueAction, |
| 4 | +CompAction, |
| 5 | +CompActionTypes, |
| 6 | +wrapChildAction, |
| 7 | +}from"lowcoder-core"; |
| 8 | +import{AxisFormatterComp,EchartsAxisType}from"../basicChartComp/chartConfigs/cartesianAxisConfig"; |
| 9 | +import{barChartChildrenMap,ChartSize,getDataKeys}from"./barChartConstants"; |
| 10 | +import{barChartPropertyView}from"./barChartPropertyView"; |
| 11 | +import_from"lodash"; |
| 12 | +import{useContext,useEffect,useMemo,useRef,useState}from"react"; |
| 13 | +importReactResizeDetectorfrom"react-resize-detector"; |
| 14 | +importReactEChartsfrom"../basicChartComp/reactEcharts"; |
| 15 | +import{ |
| 16 | +childrenToProps, |
| 17 | +depsConfig, |
| 18 | +genRandomKey, |
| 19 | +NameConfig, |
| 20 | +UICompBuilder, |
| 21 | +withDefault, |
| 22 | +withExposingConfigs, |
| 23 | +withViewFn, |
| 24 | +ThemeContext, |
| 25 | +chartColorPalette, |
| 26 | +getPromiseAfterDispatch, |
| 27 | +dropdownControl, |
| 28 | +JSONObject, |
| 29 | +}from"lowcoder-sdk"; |
| 30 | +import{getEchartsLocale,trans}from"i18n/comps"; |
| 31 | +import{ItemColorComp}from"comps/basicChartComp/chartConfigs/lineChartConfig"; |
| 32 | +import{ |
| 33 | +echartsConfigOmitChildren, |
| 34 | +getEchartsConfig, |
| 35 | +getSelectedPoints, |
| 36 | +}from"./barChartUtils"; |
| 37 | +import'echarts-extension-gmap'; |
| 38 | +importlogfrom"loglevel"; |
| 39 | + |
| 40 | +letclickEventCallback=()=>{}; |
| 41 | + |
| 42 | +constchartModeOptions=[ |
| 43 | +{ |
| 44 | +label:"ECharts JSON", |
| 45 | +value:"json", |
| 46 | +} |
| 47 | +]asconst; |
| 48 | + |
| 49 | +letBarChartTmpComp=(function(){ |
| 50 | +returnnewUICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...barChartChildrenMap},()=>null) |
| 51 | +.setPropertyViewFn(barChartPropertyView) |
| 52 | +.build(); |
| 53 | +})(); |
| 54 | + |
| 55 | +BarChartTmpComp=withViewFn(BarChartTmpComp,(comp)=>{ |
| 56 | +constmode=comp.children.mode.getView(); |
| 57 | +constonUIEvent=comp.children.onUIEvent.getView(); |
| 58 | +constonEvent=comp.children.onEvent.getView(); |
| 59 | +constechartsCompRef=useRef<ReactECharts|null>(); |
| 60 | +const[chartSize,setChartSize]=useState<ChartSize>(); |
| 61 | +constfirstResize=useRef(true); |
| 62 | +consttheme=useContext(ThemeContext); |
| 63 | +constdefaultChartTheme={ |
| 64 | +color:chartColorPalette, |
| 65 | +backgroundColor:"#fff", |
| 66 | +}; |
| 67 | + |
| 68 | +letthemeConfig=defaultChartTheme; |
| 69 | +try{ |
| 70 | +themeConfig=theme?.theme.chart ?JSON.parse(theme?.theme.chart) :defaultChartTheme; |
| 71 | +}catch(error){ |
| 72 | +log.error('theme chart error: ',error); |
| 73 | +} |
| 74 | + |
| 75 | +consttriggerClickEvent=async(dispatch:any,action:CompAction<JSONValue>)=>{ |
| 76 | +awaitgetPromiseAfterDispatch( |
| 77 | +dispatch, |
| 78 | +action, |
| 79 | +{autoHandleAfterReduce:true} |
| 80 | +); |
| 81 | +onEvent('click'); |
| 82 | +} |
| 83 | + |
| 84 | +useEffect(()=>{ |
| 85 | +constechartsCompInstance=echartsCompRef?.current?.getEchartsInstance(); |
| 86 | +if(!echartsCompInstance){ |
| 87 | +return_.noop; |
| 88 | +} |
| 89 | +echartsCompInstance?.on("click",(param:any)=>{ |
| 90 | +document.dispatchEvent(newCustomEvent("clickEvent",{ |
| 91 | +bubbles:true, |
| 92 | +detail:{ |
| 93 | +action:'click', |
| 94 | +data:param.data, |
| 95 | +} |
| 96 | +})); |
| 97 | +triggerClickEvent( |
| 98 | +comp.dispatch, |
| 99 | +changeChildAction("lastInteractionData",param.data,false) |
| 100 | +); |
| 101 | +}); |
| 102 | +return()=>{ |
| 103 | +echartsCompInstance?.off("click"); |
| 104 | +document.removeEventListener('clickEvent',clickEventCallback) |
| 105 | +}; |
| 106 | +},[]); |
| 107 | + |
| 108 | +useEffect(()=>{ |
| 109 | +// bind events |
| 110 | +constechartsCompInstance=echartsCompRef?.current?.getEchartsInstance(); |
| 111 | +if(!echartsCompInstance){ |
| 112 | +return_.noop; |
| 113 | +} |
| 114 | +echartsCompInstance?.on("selectchanged",(param:any)=>{ |
| 115 | +constoption:any=echartsCompInstance?.getOption(); |
| 116 | +document.dispatchEvent(newCustomEvent("clickEvent",{ |
| 117 | +bubbles:true, |
| 118 | +detail:{ |
| 119 | +action:param.fromAction, |
| 120 | +data:getSelectedPoints(param,option) |
| 121 | +} |
| 122 | +})); |
| 123 | + |
| 124 | +if(param.fromAction==="select"){ |
| 125 | +comp.dispatch(changeChildAction("selectedPoints",getSelectedPoints(param,option),false)); |
| 126 | +onUIEvent("select"); |
| 127 | +}elseif(param.fromAction==="unselect"){ |
| 128 | +comp.dispatch(changeChildAction("selectedPoints",getSelectedPoints(param,option),false)); |
| 129 | +onUIEvent("unselect"); |
| 130 | +} |
| 131 | + |
| 132 | +triggerClickEvent( |
| 133 | +comp.dispatch, |
| 134 | +changeChildAction("lastInteractionData",getSelectedPoints(param,option),false) |
| 135 | +); |
| 136 | +}); |
| 137 | +// unbind |
| 138 | +return()=>{ |
| 139 | +echartsCompInstance?.off("selectchanged"); |
| 140 | +document.removeEventListener('clickEvent',clickEventCallback) |
| 141 | +}; |
| 142 | +},[onUIEvent]); |
| 143 | + |
| 144 | +constechartsConfigChildren=_.omit(comp.children,echartsConfigOmitChildren); |
| 145 | +constchildrenProps=childrenToProps(echartsConfigChildren); |
| 146 | +constoption=useMemo(()=>{ |
| 147 | +returngetEchartsConfig( |
| 148 | +childrenPropsasToViewReturn<typeofechartsConfigChildren>, |
| 149 | +chartSize, |
| 150 | +themeConfig |
| 151 | +); |
| 152 | +},[theme,childrenProps,chartSize, ...Object.values(echartsConfigChildren)]); |
| 153 | + |
| 154 | +useEffect(()=>{ |
| 155 | +comp.children.mapInstance.dispatch(changeValueAction(null,false)) |
| 156 | +if(comp.children.mapInstance.value)return; |
| 157 | +},[option]) |
| 158 | + |
| 159 | +return( |
| 160 | +<ReactResizeDetector |
| 161 | +onResize={(w,h)=>{ |
| 162 | +if(w&&h){ |
| 163 | +setChartSize({w:w,h:h}); |
| 164 | +} |
| 165 | +if(!firstResize.current){ |
| 166 | +// ignore the first resize, which will impact the loading animation |
| 167 | +echartsCompRef.current?.getEchartsInstance().resize(); |
| 168 | +}else{ |
| 169 | +firstResize.current=false; |
| 170 | +} |
| 171 | +}} |
| 172 | +> |
| 173 | +<ReactECharts |
| 174 | +ref={(e)=>(echartsCompRef.current=e)} |
| 175 | +style={{height:"100%"}} |
| 176 | +notMerge |
| 177 | +lazyUpdate |
| 178 | +opts={{locale:getEchartsLocale()}} |
| 179 | +option={option} |
| 180 | +mode={mode} |
| 181 | +/> |
| 182 | +</ReactResizeDetector> |
| 183 | +); |
| 184 | +}); |
| 185 | + |
| 186 | +functiongetYAxisFormatContextValue( |
| 187 | +data:Array<JSONObject>, |
| 188 | +yAxisType:EchartsAxisType, |
| 189 | +yAxisName?:string |
| 190 | +){ |
| 191 | +constdataSample=yAxisName&&data.length>0&&data[0][yAxisName]; |
| 192 | +letcontextValue=dataSample; |
| 193 | +if(yAxisType==="time"){ |
| 194 | +// to timestamp |
| 195 | +consttime= |
| 196 | +typeofdataSample==="number"||typeofdataSample==="string" |
| 197 | + ?newDate(dataSample).getTime() |
| 198 | + :null; |
| 199 | +if(time)contextValue=time; |
| 200 | +} |
| 201 | +returncontextValue; |
| 202 | +} |
| 203 | + |
| 204 | +BarChartTmpComp=classextendsBarChartTmpComp{ |
| 205 | +privatelastYAxisFormatContextVal?:JSONValue; |
| 206 | +privatelastColorContext?:JSONObject; |
| 207 | + |
| 208 | +updateContext(comp: this){ |
| 209 | +// the context value of axis format |
| 210 | +letresultComp=comp; |
| 211 | +constdata=comp.children.data.getView(); |
| 212 | +constsampleSeries=comp.children.series.getView().find((s)=>!s.getView().hide); |
| 213 | +constyAxisContextValue=getYAxisFormatContextValue( |
| 214 | +data, |
| 215 | +comp.children.yConfig.children.yAxisType.getView(), |
| 216 | +sampleSeries?.children.columnName.getView() |
| 217 | +); |
| 218 | +if(yAxisContextValue!==comp.lastYAxisFormatContextVal){ |
| 219 | +comp.lastYAxisFormatContextVal=yAxisContextValue; |
| 220 | +resultComp=comp.setChild( |
| 221 | +"yConfig", |
| 222 | +comp.children.yConfig.reduce( |
| 223 | +wrapChildAction( |
| 224 | +"formatter", |
| 225 | +AxisFormatterComp.changeContextDataAction({value:yAxisContextValue}) |
| 226 | +) |
| 227 | +) |
| 228 | +); |
| 229 | +} |
| 230 | +// item color context |
| 231 | +constcolorContextVal={ |
| 232 | +seriesName:sampleSeries?.children.seriesName.getView(), |
| 233 | +value:yAxisContextValue, |
| 234 | +}; |
| 235 | +if( |
| 236 | +comp.children.chartConfig.children.comp.children.hasOwnProperty("itemColor")&& |
| 237 | +!_.isEqual(colorContextVal,comp.lastColorContext) |
| 238 | +){ |
| 239 | +comp.lastColorContext=colorContextVal; |
| 240 | +resultComp=resultComp.setChild( |
| 241 | +"chartConfig", |
| 242 | +comp.children.chartConfig.reduce( |
| 243 | +wrapChildAction( |
| 244 | +"comp", |
| 245 | +wrapChildAction("itemColor",ItemColorComp.changeContextDataAction(colorContextVal)) |
| 246 | +) |
| 247 | +) |
| 248 | +); |
| 249 | +} |
| 250 | +returnresultComp; |
| 251 | +} |
| 252 | + |
| 253 | +overridereduce(action:CompAction): this{ |
| 254 | +constcomp=super.reduce(action); |
| 255 | +if(action.type===CompActionTypes.UPDATE_NODES_V2){ |
| 256 | +constnewData=comp.children.data.getView(); |
| 257 | +// data changes |
| 258 | +if(comp.children.data!==this.children.data){ |
| 259 | +setTimeout(()=>{ |
| 260 | +// update x-axis value |
| 261 | +constkeys=getDataKeys(newData); |
| 262 | +if(keys.length>0&&!keys.includes(comp.children.xAxisKey.getView())){ |
| 263 | +comp.children.xAxisKey.dispatch(changeValueAction(keys[0]||"")); |
| 264 | +} |
| 265 | +// pass to child series comp |
| 266 | +comp.children.series.dispatchDataChanged(newData); |
| 267 | +},0); |
| 268 | +} |
| 269 | +returnthis.updateContext(comp); |
| 270 | +} |
| 271 | +returncomp; |
| 272 | +} |
| 273 | + |
| 274 | +overrideautoHeight():boolean{ |
| 275 | +returnfalse; |
| 276 | +} |
| 277 | +}; |
| 278 | + |
| 279 | +letBarChartComp=withExposingConfigs(BarChartTmpComp,[ |
| 280 | +depsConfig({ |
| 281 | +name:"selectedPoints", |
| 282 | +desc:trans("chart.selectedPointsDesc"), |
| 283 | +depKeys:["selectedPoints"], |
| 284 | +func:(input)=>{ |
| 285 | +returninput.selectedPoints; |
| 286 | +}, |
| 287 | +}), |
| 288 | +depsConfig({ |
| 289 | +name:"lastInteractionData", |
| 290 | +desc:trans("chart.lastInteractionDataDesc"), |
| 291 | +depKeys:["lastInteractionData"], |
| 292 | +func:(input)=>{ |
| 293 | +returninput.lastInteractionData; |
| 294 | +}, |
| 295 | +}), |
| 296 | +depsConfig({ |
| 297 | +name:"data", |
| 298 | +desc:trans("chart.dataDesc"), |
| 299 | +depKeys:["data","mode"], |
| 300 | +func:(input)=>[], |
| 301 | +}), |
| 302 | +newNameConfig("title",trans("chart.titleDesc")), |
| 303 | +]); |
| 304 | + |
| 305 | + |
| 306 | +exportconstBarChartCompWithDefault=withDefault(BarChartComp,{ |
| 307 | +xAxisKey:"date", |
| 308 | +series:[ |
| 309 | +{ |
| 310 | +dataIndex:genRandomKey(), |
| 311 | +seriesName:trans("chart.spending"), |
| 312 | +columnName:"spending", |
| 313 | +}, |
| 314 | +{ |
| 315 | +dataIndex:genRandomKey(), |
| 316 | +seriesName:trans("chart.budget"), |
| 317 | +columnName:"budget", |
| 318 | +}, |
| 319 | +], |
| 320 | +}); |