@progress/kendo-react-charts/BaseChart.js

React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),I=require("prop-types"),w=require("@progress/kendo-react-intl"),u=require("@progress/kendo-charts"),m=require("@progress/kendo-react-common"),g=require("./utils/index.js"),C=require("./events/chart-event-builder.js"),y=require("./events/dom-event.js"),S=require("./store/store.js"),b=require("./store/reducer.js"),D=require("./tooltip/Series.js"),E=require("./tooltip/CrosshairContainer.js"),k=require("./ChartContext.js"),P=require("./package-metadata.js"),T=require("./events/drilldown-event.js");function q(p){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const e in p)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(p,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>p[e]})}}return t.default=p,Object.freeze(t)}const l=q(O),f=class f extends l.Component{constructor(t){super(t),this.chartInstance=null,this.surface=null,this._element=null,this.optionsStore={},this.optionsUnsubscriber=Function.prototype,this.themeStore={},this.themeUnsubscriber=Function.prototype,this.observersStore={},this.suppressTransitions=!1,this.showLicenseWatermark=!1,this.onRender=e=>{this.chartInstance!==null&&(this.surface=e.sender.surface,this.trigger("render",e))},this.onDrilldown=e=>{var i;const{series:s}=this.optionsStore.getState(),r=s.find(n=>n.name===e.series.name);if(r.drilldownSeriesFactory){const n="onDrilldown";if(this.props.hasOwnProperty(n)){const o={seriesName:r.name,drilldownValue:e.value},c=[...((i=this.props.drilldownState)==null?void 0:i.steps)||[],o],h=this.props.getTarget(),d={...e,currentState:this.props.drilldownState,nextState:{steps:c}},a=new T.DrilldownEvent(d,h);this.props[n].call(void 0,a)}}return!0},this.onLegendItemClick=e=>{if(this.chartInstance!==null)if(this.props.onLegendItemClick)this.trigger("legendItemClick",e);else{const{series:s}=this.optionsStore.getState();if(!s)return;let r={};const{seriesIndex:i,pointIndex:n}=e,o=s[i];if(n===void 0)r=Object.assign({},o,{visible:g.toggle(o.visible)});else{const c=o.pointVisibility=o.pointVisibility||[];c[n]=g.toggle(c[n]),r=Object.assign({},o)}this.optionsStore.dispatch({chartCollectionIdxKey:`series_${i}`,payload:r}),this.suppressTransitions=!0}},this.onWindowResize=()=>{this.chartInstance!==null&&this.chartInstance.resize()},this.onChartMouseLeave=e=>{const s=y.toDomEvent(this,e);this.triggerDomEvent("onMouseLeave",s)?e.preventDefault():this.chartInstance!==null&&this.chartInstance.hideElements()},this.onChildMouseLeave=e=>{const{syntheticEvent:s}=e;return this.chartInstance&&!g.hasParent(s.relatedTarget,this.element)&&this.chartInstance.hideElements(),!1},this.showLicenseWatermark=!m.validatePackage(P.packageMetadata,{component:"Chart"}),this.optionsStore=S.createStore(b.optionsReducer),this.observersStore=S.createStore(b.observersReducer),this.childrenObserver=new u.InstanceObserver(this,{onMouseLeave:"onChildMouseLeave"}),this.state={optionsStore:this.optionsStore,observersStore:this.observersStore,childrenObserver:this.childrenObserver,drilldownState:{steps:[]}},this.themeStore=S.createStore(b.themeReducer),this.chartObserver=new u.InstanceObserver(this,{render:"onRender",legendItemClick:"onLegendItemClick",drilldown:"onDrilldown"})}get element(){return this._element}static getDerivedStateFromProps(t,e){return{...e,drilldownState:t.drilldownState||[]}}componentDidMount(){if(this._element){let t={};try{t=u.chartTheme(this._element)}catch{}const e=u.deepExtend(u.chartBaseTheme(),t);this.themeStore.dispatch({type:"push",payload:e}),this.instantiateCoreChart()}this.optionsUnsubscriber=this.optionsStore.subscribe(this.refresh.bind(this)),this.themeUnsubscriber=this.themeStore.subscribe(this.refresh.bind(this)),window.addEventListener("resize",this.onWindowResize)}componentWillUnmount(){this.optionsUnsubscriber(),this.themeUnsubscriber(),this.chartInstance!==null&&(this.chartInstance.destroy(),this.chartInstance=null),window.removeEventListener("resize",this.onWindowResize)}componentDidUpdate(t){const{dir:e,children:s,...r}=this.props;if(this.chartInstance!==null){const i=w.provideIntlService(this),n=this.chartInstance.chartService,o=i.locale!==n._intlService.locale,c=Object.entries(t).filter(h=>h[0]!=="dir"&&h[0]!=="children").some(h=>{const[d,a]=h;return!(r.hasOwnProperty(d)&&r[d]===a)});o&&(this.chartInstance.chartService._intlService=i,this.chartInstance.chartService.format._intlService=i,c||this.chartInstance.noTransitionsRedraw()),c&&this.refresh(),t.dir!==e&&this.chartInstance.setDirection(this.getDirection(e))}}render(){const{style:t={},className:e,wrapper:s,children:r}=this.props,i=Object.assign({},t,{position:"relative"}),n=l.createElement(s,{className:e,style:i,key:"chartElement"},l.createElement("div",{onMouseLeave:this.onChartMouseLeave,ref:o=>this._element=o,className:"k-chart-surface"},r),l.createElement(l.Fragment,null,this.showLicenseWatermark&&l.createElement(m.WatermarkOverlay,null)));return l.createElement(k.ChartContext.Provider,{value:this.state},l.createElement(D.SeriesTooltip,{key:"seriesTooltip"}),l.createElement(E.CrosshairTooltipContainer,{key:"crosshairTooltips"}),n)}getDirection(t){return(t!==void 0?t:m.canUseDOM&&window.getComputedStyle(this.element).direction||"ltr")==="rtl"}getChartOptions(){const{renderAs:t,pannable:e,zoomable:s,paneDefaults:r,panes:i,transitions:n,seriesColors:o,seriesDefaults:c,axisDefaults:h,deriveOptionsFromParent:d}=this.props;let a={};return t!==void 0&&(a.renderAs=t),e!==void 0&&(a.pannable=e),s!==void 0&&(a.zoomable=s),r!==void 0&&(a.paneDefaults=r),i!==void 0&&(a.panes=i),n!==void 0&&(a.transitions=n),o!==void 0&&(a.seriesColors=o),c!==void 0&&(a.seriesDefaults=c),h!==void 0&&(a.axisDefaults=h),a=Object.assign(a,this.optionsStore.getState()),d&&(a=d(a)),a}refresh(){if(this.chartInstance!==null){const t=this.themeStore.getState(),e=this.getChartOptions(),s=e.transitions;this.suppressTransitions&&(e.transitions=!1),this.props.onRefresh?this.props.onRefresh.call(void 0,e,t,this.chartInstance):this.chartInstance.setOptions(e,t),this.suppressTransitions&&(e.transitions=s,this.suppressTransitions=!1)}}instantiateCoreChart(){const{dir:t,chartConstructor:e}=this.props,s=this.getChartOptions();this.chartInstance=new e(this.element,s,this.themeStore.getState(),{rtl:this.getDirection(t),intlService:w.provideIntlService(this),observer:this.chartObserver,sender:this})}trigger(t,e){const s=this.props.getTarget(),r=C.create(t,e,s),i="on"+t.charAt(0).toUpperCase()+t.slice(1),n=this.observersStore.getState();let o=!1;for(let c=0;c<n.length;c++)n[c].trigger(t,e)&&(o=!0);return o===!1&&r&&this.props.hasOwnProperty(i)?(this.props[i].call(void 0,r),r.isDefaultPrevented&&r.isDefaultPrevented()):o}requiresHandlers(t){for(let e=0;e<t.length;e++){const s=t[e],r="on"+s.charAt(0).toUpperCase()+s.slice(1);if(this.props.hasOwnProperty(r))return!0}return!1}triggerDomEvent(t,e){const s=this.observersStore.getState();let r=!1;for(let i=0;i<s.length;i++)s[i].trigger(t,e)&&(r=!0);return r}};f.propTypes={dir:I.string,renderAs:I.oneOf(["svg","canvas"])},f.defaultProps={renderAs:"svg"};let v=f;w.registerForIntl(v);exports.BaseChart=v;