%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[55],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var a,r=n(0),s=(a=r)&&a.__esModule?a:{default:a};var o=void 0,i=void 0;"undefined"!==typeof document&&(o=document),"undefined"!==typeof window&&(i=window);var c=t.FrameContext=s.default.createContext({document:o,window:i}),u=c.Provider,l=c.Consumer;t.FrameContextProvider=u,t.FrameContextConsumer=l},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return S}));var a=n(118),r=n(1100),s=n(1109),o=n(1090),i=n(1117),c=n(1119),u=n(5),l=n(0),d=n(1024),p=n(551),f=n(1087),h=n(1099),m=n(11),b=n(370),j=n(371),x=n(1131),O=n.n(x),v=n(1);const y=Object(d.a)({productionPrefix:"iframe-"});class w extends l.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(p.a)(),plugins:[...Object(p.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(v.jsxs)(v.Fragment,{children:[Object(v.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(v.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(v.jsx)(O.a,{head:this.renderHead(),ref:this.handleRef,className:Object(u.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(v.jsx)(f.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(h.a,{theme:n,children:Object(l.cloneElement)(e,{container:this.state.container})})}):null})}}var C=Object(m.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(w);function g(e){const[t,n]=Object(l.useState)(e.currentTabIndex),{component:d,raw:p,iframe:f,className:h}=e;return Object(v.jsxs)(s.a,{className:Object(u.a)(h,"shadow"),children:[Object(v.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(v.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(o.a,{children:"remove_red_eye"})}),p&&Object(v.jsx)(i.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(o.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(f?Object(v.jsx)(C,{children:Object(v.jsx)(d,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(d,{})}))}),Object(v.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:p&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:p.default})})})]})]})}g.defaultProps={currentTabIndex:0};var S=g},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var a=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return a.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return a.FrameContextConsumer}});var r,s=n(1132),o=(r=s)&&r.__esModule?r:{default:r};t.default=o.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),s=n(0),o=d(s),i=d(n(22)),c=d(n(553)),u=n(1129),l=d(n(1133));function d(e){return e&&e.__esModule?e:{default:e}}var p=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return a.handleLoad=function(){a.forceUpdate()},a._isMounted=!1,a}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,a=e.defaultView||e.parentView,r=o.default.createElement(l.default,{contentDidMount:t,contentDidUpdate:n},o.default.createElement(u.FrameContextProvider,{value:{document:e,window:a}},o.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var s=this.getMountTarget();return[i.default.createPortal(this.props.head,this.getDoc().head),i.default.createPortal(r,s)]}},{key:"render",value:function(){var e=this,t=a({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,o.default.createElement("iframe",a({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(s.Component);p.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},p.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=p},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),r=n(0),s=(o(r),o(n(553)));function o(e){return e&&e.__esModule?e:{default:e}}var i=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return r.Children.only(this.props.children)}}]),t}(r.Component);i.propTypes={children:s.default.element.isRequired,contentDidMount:s.default.func.isRequired,contentDidUpdate:s.default.func.isRequired},t.default=i},2488:function(e,t,n){"use strict";n.r(t);var a=n(1161),r=n.n(a),s=n(0),o=n(1);t.default=function(){const[e,t]=Object(s.useState)({options:{xaxis:{categories:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},series:[{name:"series-1",data:[30,40,25,50,49,21,70,51]},{name:"series-2",data:[23,12,54,61,32,56,81,19]}]});return Object(o.jsx)("div",{className:"area",children:Object(o.jsx)(r.a,{options:e.options,series:e.series,type:"area",width:"500"})})}},2489:function(e,t,n){"use strict";n.r(t),t.default="import Chart from 'react-apexcharts'\nimport {useState} from 'react';\n\nfunction Area()\n{\n const [state, setState] = useState({\n options: {\n xaxis: {\n categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n },\n series : [\n {\n name: 'series-1',\n data: [30, 40, 25, 50, 49, 21, 70, 51]\n }, {\n name: 'series-2',\n data: [23, 12, 54, 61, 32, 56, 81, 19]\n }\n ],\n })\n\n return (\n <div className=\"area\">\n <Chart options={state.options} series={state.series} type=\"area\" width=\"500\"/>\n </div>\n );\n}\n\nexport default Area;\n"},2490:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(1161),s=n.n(r),o=n(1);t.default=function(){const[e,t]=Object(a.useState)({options:{dataLabels:{enabled:!1},plotOptions:{bar:{horizontal:!0}},xaxis:{categories:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},series:[{data:[30,40,25,50,49,21,70,51]}]});return Object(o.jsx)("div",{className:"bar",children:Object(o.jsx)(s.a,{options:e.options,series:e.series,type:"bar",width:"500"})})}},2491:function(e,t,n){"use strict";n.r(t),t.default="import {useState} from 'react';\nimport Chart from 'react-apexcharts'\n\nfunction Bar()\n{\n const [state, setState] = useState({\n options: {\n dataLabels : {\n enabled: false\n },\n plotOptions: {\n bar: {\n horizontal: true\n }\n },\n xaxis : {\n categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n },\n series : [\n {\n data: [30, 40, 25, 50, 49, 21, 70, 51]\n }\n ],\n });\n\n return (\n <div className=\"bar\">\n <Chart options={state.options} series={state.series} type=\"bar\" width=\"500\"/>\n </div>\n );\n}\n\nexport default Bar;\n"},2492:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(1161),s=n.n(r),o=n(1);t.default=function(){const[e,t]=Object(a.useState)({options:{dataLabels:{enabled:!1},xaxis:{categories:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},series:[{data:[30,40,25,50,49,21,70,51]}]});return Object(o.jsx)("div",{className:"column",children:Object(o.jsx)(s.a,{options:e.options,series:e.series,type:"bar",width:"500"})})}},2493:function(e,t,n){"use strict";n.r(t),t.default="import {useState} from 'react';\nimport Chart from 'react-apexcharts'\n\nfunction Column()\n{\n const [state, setState] = useState({\n options: {\n dataLabels: {\n enabled: false\n },\n xaxis : {\n categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n },\n series : [\n {\n data: [30, 40, 25, 50, 49, 21, 70, 51]\n }\n ],\n });\n\n return (\n <div className=\"column\">\n <Chart options={state.options} series={state.series} type=\"bar\" width=\"500\"/>\n </div>\n );\n}\n\nexport default Column;\n"},2494:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(1161),s=n.n(r),o=n(1);t.default=function(){const[e,t]=Object(a.useState)({options:{labels:["A","B","C","D","E"]},series:[44,55,41,17,15]});return Object(o.jsx)("div",{className:"donut",children:Object(o.jsx)(s.a,{options:e.options,series:e.series,type:"donut",width:"380"})})}},2495:function(e,t,n){"use strict";n.r(t),t.default="import {useState} from 'react';\nimport Chart from 'react-apexcharts'\n\nfunction Donut()\n{\n const [state, setState] = useState({\n options: {\n labels: ['A', 'B', 'C', 'D', 'E']\n },\n series : [44, 55, 41, 17, 15]\n\n });\n return (\n <div className=\"donut\">\n <Chart options={state.options} series={state.series} type=\"donut\" width=\"380\"/>\n </div>\n );\n}\n\nexport default Donut;\n"},2496:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(1161),s=n.n(r),o=n(1);t.default=function(){const[e,t]=Object(a.useState)({options:{stroke:{curve:"smooth"},markers:{size:0},xaxis:{categories:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},series:[{data:[30,40,25,50,49,21,70,51]}]});return Object(o.jsx)("div",{className:"line",children:Object(o.jsx)(s.a,{options:e.options,series:e.series,type:"line",width:"500"})})}},2497:function(e,t,n){"use strict";n.r(t),t.default="import {useState} from 'react';\nimport Chart from 'react-apexcharts'\n\nfunction Line()\n{\n const [state, setState] = useState({\n options: {\n stroke : {\n curve: 'smooth'\n },\n markers: {\n size: 0\n },\n xaxis : {\n categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n },\n series : [\n {\n data: [30, 40, 25, 50, 49, 21, 70, 51]\n }\n ],\n });\n\n return (\n <div className=\"line\">\n <Chart options={state.options} series={state.series} type=\"line\" width=\"500\"/>\n </div>\n );\n}\n\nexport default Line;\n"},2498:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(1161),s=n.n(r),o=n(1);t.default=function(){const[e,t]=Object(a.useState)({options:{labels:["RadialBar"],plotOptions:{radialBar:{hollow:{size:"70%"}}}},series:[68]});return Object(o.jsx)("div",{className:"radialbar",children:Object(o.jsx)(s.a,{options:e.options,series:e.series,type:"radialBar",height:"380"})})}},2499:function(e,t,n){"use strict";n.r(t),t.default="import {useState} from 'react';\nimport Chart from 'react-apexcharts'\n\nfunction RadialBar()\n{\n const [state, setState] = useState({\n options: {\n labels : ['RadialBar'],\n plotOptions: {\n radialBar: {\n hollow: {\n size: '70%',\n }\n },\n },\n },\n series : [68],\n });\n\n return (\n <div className=\"radialbar\">\n <Chart options={state.options} series={state.series} type=\"radialBar\" height=\"380\"/>\n </div>\n );\n}\n\nexport default RadialBar;\n"},2639:function(e,t,n){"use strict";n.r(t);var a=n(1130),r=n(1098),s=n(1090),o=n(194),i=n(28),c=n(1);t.default=function(){return Object(c.jsxs)(c.Fragment,{children:[Object(c.jsxs)("div",{className:"flex w-full items-center justify-between mb-24",children:[Object(c.jsx)(o.a,{variant:"h4",className:"",children:"react-apexcharts"}),Object(c.jsxs)(r.a,{variant:"outlined",component:"a",href:"https://github.com/apexcharts/react-apexcharts",target:"_blank",role:"button",children:[Object(c.jsx)(s.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})]}),Object(c.jsx)(o.a,{className:"mb-16",component:"p",children:"React.js wrapper for ApexCharts to build interactive visualizations in react."}),Object(c.jsx)("hr",{}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Example Usages"}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2488).default,raw:n(2489)}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2490).default,raw:n(2491)}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2492).default,raw:n(2493)}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2494).default,raw:n(2495)}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2496).default,raw:n(2497)}),Object(c.jsx)(a.a,{className:"mb-64",component:n(2498).default,raw:n(2499)}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Demos"}),Object(c.jsxs)("ul",{children:[Object(c.jsx)("li",{className:"mb-8",children:Object(c.jsx)(i.a,{to:"/apps/dashboards/analytics",children:"Analytics Dashboard"})}),Object(c.jsx)("li",{className:"mb-8",children:Object(c.jsx)(i.a,{to:"/apps/dashboards/project",children:"Project Dashboard"})})]})]})}}}]);
Zerion Mini Shell 1.0